From 2d6f98f4f73fd3a216857714d35d308103db3e91 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Wed, 22 Jul 2026 12:27:16 -0400
Subject: [PATCH 1/8] Adopt platform-bible-react components in place of raw
 HTML (Tier 1)

Swap raw <button>/<input>/<textarea>/<label> for Button/Input/Textarea/Label across the confirm-bar controls, the morpheme editor, icon buttons, and the Create/Save As/Project Metadata modals; delete the now-duplicated pill-btn-*, modal-form-*, and icon-button utilities; extend the jest mock (Input/Textarea plus the extra Button props the icon buttons rely on); and note the component preference in AGENTS.md.

Tier 2/3 (gloss inputs, WipeModal radios, ViewOptionsDropdown Popover, the combobox) are deferred. lint clean; 1578 tests pass; coverage 100%.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 AGENTS.md                                     |   4 +
 __mocks__/platform-bible-react.tsx            | 170 +++++++++++++++++-
 src/components/ArcOverlay.tsx                 |   8 +-
 src/components/ContinuousView.tsx             |  15 +-
 src/components/MorphemeEditor.tsx             |  27 ++-
 src/components/PhraseBox.tsx                  |  17 +-
 src/components/PhraseStripParts.tsx           |   9 +-
 src/components/SegmentListView.tsx            |  20 ++-
 src/components/TokenChip.tsx                  |  23 +--
 src/components/TokenLinkIcon.tsx              |  16 +-
 .../controls/EditPhraseControls.tsx           |  14 +-
 src/components/modals/CreateProjectModal.tsx  |  26 +--
 .../modals/ProjectMetadataModal.tsx           |  20 +--
 src/components/modals/SaveAsProjectModal.tsx  |  18 +-
 src/components/modals/UnlinkPhraseConfirm.tsx |  15 +-
 src/tailwind.css                              |  24 ---
 16 files changed, 292 insertions(+), 134 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 084b9f46..88dff395 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -67,6 +67,10 @@ The WebView root component is assigned to `globalThis.webViewComponent` (not exp
 
 [src/services/projectStorage.ts](src/services/projectStorage.ts) — owns all `papi.storage` reads and writes for interlinearizer projects. Two serialization queues prevent interleaved read-modify-write races. Tests must call `resetQueuesForTesting()` between tests because module state is not cleared by `resetMocks`.
 
+### Components
+
+Prefer Platform.Bible's `platform-bible-react` components (`Button`, `Input`, `Textarea`, `Label`, `Switch`, `RadioGroup`, `Popover`, `Tooltip`, etc.) over hand-rolled raw HTML (`<button>`, `<input>`, `<textarea>`, `<label>`, custom dropdowns) wherever an equivalent exists — this keeps the UI visually and behaviorally consistent with the host app and gives us theming and accessibility for free. Reserve raw elements for cases where the platform component can't preserve behavior the extension depends on (e.g. `field-sizing: content` gloss inputs); when you do, add a comment explaining why. When a raw element is replaced by a platform component in tests, extend `__mocks__/platform-bible-react.tsx` to stub the newly-used component.
+
 ### Styling
 
 All UI uses Tailwind CSS (via `src/tailwind.css`). Every Tailwind class is prefixed `tw:` to avoid collisions with Platform.Bible's own styles (configured in `tailwind.config.ts`). For modifier variants the prefix comes first: `tw:hover:px-3`, not `hover:tw-px-3`.
diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index f0420834..985a6f22 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -4,7 +4,14 @@
  */
 
 import { Children, cloneElement, forwardRef, isValidElement, useEffect, useRef } from 'react';
-import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import type {
+  ChangeEventHandler,
+  CSSProperties,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+} from 'react';
 
 export interface MenuItemContainingCommand {
   label: `%${string}%`;
@@ -242,21 +249,32 @@ export function ScrollGroupSelector({
 }
 
 /**
- * Stub button that passes through `children`, `onClick`, `type`, `className`, `disabled`,
- * `aria-label`, `aria-expanded`, `aria-haspopup`, `data-testid`, and `ref` to a native `<button>`
- * element; `variant` and `size` are accepted but ignored.
+ * Stub button that passes the attributes the extension relies on through to a native `<button>`
+ * element; `variant` and `size` are accepted but ignored (jsdom does not apply styling, so tests
+ * assert on behavior/testid/role, not the visual variant). The mouse/keyboard handlers and
+ * `tabIndex`/`style` are forwarded so migrated icon buttons keep their hover-preview and
+ * focus-skipping behavior under test.
  *
  * @param props - Component props.
  * @param props.children - Button content.
  * @param props.onClick - Click handler.
+ * @param props.onMouseEnter - Pointer-enter handler (icon buttons use it to preview hover state).
+ * @param props.onMouseLeave - Pointer-leave handler (clears the previewed hover state).
+ * @param props.onMouseDown - Pointer-down handler (e.g. to preventDefault and keep input focus).
  * @param props.type - HTML button type attribute.
  * @param props.className - CSS class names.
+ * @param props.style - Inline styles (icon buttons use it for absolute positioning).
+ * @param props.title - Native tooltip text; the {@link Tooltip} stub clones its trigger child with
+ *   this prop, so a `Button` used as a `TooltipTrigger asChild` child must forward it.
  * @param props.disabled - Whether the button is disabled.
+ * @param props.tabIndex - Tab order; icon buttons set `-1` to skip them in keyboard navigation.
  * @param props.variant - Ignored styling variant.
  * @param props.size - Ignored size variant.
  * @param props['aria-label'] - Accessible label.
  * @param props['aria-expanded'] - Expanded state for popup triggers.
  * @param props['aria-haspopup'] - Haspopup attribute.
+ * @param props['aria-controls'] - ID of the element the button controls (e.g. a listbox popup).
+ * @param props['aria-hidden'] - Hides the button from the accessibility tree when it is inert.
  * @param props['data-testid'] - Test identifier.
  * @param ref - Forwarded ref to the underlying button element.
  * @returns A native `<button>` element with standard attributes forwarded.
@@ -265,29 +283,45 @@ export const Button = forwardRef<
   HTMLButtonElement,
   Readonly<{
     children?: ReactNode;
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
+    onMouseDown?: MouseEventHandler<HTMLButtonElement>;
     type?: 'button' | 'submit' | 'reset';
     className?: string;
+    style?: CSSProperties;
+    title?: string;
     disabled?: boolean;
+    tabIndex?: number;
     variant?: 'default' | 'secondary' | 'destructive' | 'ghost' | 'outline' | 'link';
-    size?: 'default' | 'sm' | 'lg' | 'icon';
+    size?: 'default' | 'sm' | 'lg' | 'icon' | 'xs' | 'icon-sm' | 'icon-xs' | 'icon-lg';
     'aria-label'?: string;
     'aria-expanded'?: boolean;
     'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-controls'?: string;
+    'aria-hidden'?: boolean;
     'data-testid'?: string;
   }>
 >(function ButtonImpl(
   {
     children,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
     type,
     className,
+    style,
+    title,
     disabled,
+    tabIndex,
     variant: _variant,
     size: _size,
     'aria-label': ariaLabel,
     'aria-expanded': ariaExpanded,
     'aria-haspopup': ariaHaspopup,
+    'aria-controls': ariaControls,
+    'aria-hidden': ariaHidden,
     'data-testid': testId,
   },
   ref,
@@ -297,10 +331,18 @@ export const Button = forwardRef<
       ref={ref}
       type={type ?? 'button'}
       onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onMouseDown={onMouseDown}
       className={className}
+      style={style}
+      title={title}
+      tabIndex={tabIndex}
       aria-label={ariaLabel}
       aria-expanded={ariaExpanded}
       aria-haspopup={ariaHaspopup}
+      aria-controls={ariaControls}
+      aria-hidden={ariaHidden}
       data-testid={testId}
       disabled={disabled}
     >
@@ -309,6 +351,122 @@ export const Button = forwardRef<
   );
 });
 
+/**
+ * Stub input rendered as a native `<input>`, forwarding the attributes the extension's migrated
+ * form fields and inline editors rely on so tests can read and drive them by id, testid, role, or
+ * value.
+ *
+ * @param props - Component props.
+ * @param props.id - HTML `id` attribute (labels bind to it via `htmlFor`).
+ * @param props.type - Input type; defaults to `text`.
+ * @param props.value - Controlled value.
+ * @param props.placeholder - Placeholder text.
+ * @param props.className - CSS class names.
+ * @param props.style - Inline styles.
+ * @param props.disabled - Whether the input is disabled.
+ * @param props.onChange - Change handler.
+ * @param props.onKeyDown - Key-down handler (inline editors commit/cancel on Enter/Escape).
+ * @param props['aria-label'] - Accessible label.
+ * @param props['data-testid'] - Test identifier.
+ * @param ref - Forwarded ref to the underlying input element.
+ * @returns A native `<input>` element with the forwarded attributes.
+ */
+export const Input = forwardRef<
+  HTMLInputElement,
+  Readonly<{
+    id?: string;
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    'aria-label'?: string;
+    'data-testid'?: string;
+  }>
+>(function InputImpl(
+  {
+    id,
+    type,
+    value,
+    placeholder,
+    className,
+    style,
+    disabled,
+    onChange,
+    onKeyDown,
+    'aria-label': ariaLabel,
+    'data-testid': testId,
+  },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      id={id}
+      type={type ?? 'text'}
+      value={value}
+      placeholder={placeholder}
+      className={className}
+      style={style}
+      disabled={disabled}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      aria-label={ariaLabel}
+      data-testid={testId}
+    />
+  );
+});
+
+/**
+ * Stub textarea rendered as a native `<textarea>`, forwarding the attributes the extension's
+ * migrated multi-line form fields rely on.
+ *
+ * @param props - Component props.
+ * @param props.id - HTML `id` attribute (labels bind to it via `htmlFor`).
+ * @param props.value - Controlled value.
+ * @param props.placeholder - Placeholder text.
+ * @param props.className - CSS class names.
+ * @param props.rows - Visible row count.
+ * @param props.disabled - Whether the textarea is disabled.
+ * @param props.onChange - Change handler.
+ * @param props['data-testid'] - Test identifier.
+ * @param ref - Forwarded ref to the underlying textarea element.
+ * @returns A native `<textarea>` element with the forwarded attributes.
+ */
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  Readonly<{
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    rows?: number;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    'data-testid'?: string;
+  }>
+>(function TextareaImpl(
+  { id, value, placeholder, className, rows, disabled, onChange, 'data-testid': testId },
+  ref,
+) {
+  return (
+    <textarea
+      ref={ref}
+      id={id}
+      value={value}
+      placeholder={placeholder}
+      className={className}
+      rows={rows}
+      disabled={disabled}
+      onChange={onChange}
+      data-testid={testId}
+    />
+  );
+});
+
 /**
  * Stub book/chapter control that displays the current reference as text and exposes a single
  * "Submit reference" button so tests can simulate reference changes without the real picker UI.
diff --git a/src/components/ArcOverlay.tsx b/src/components/ArcOverlay.tsx
index c7a20c01..d6283887 100644
--- a/src/components/ArcOverlay.tsx
+++ b/src/components/ArcOverlay.tsx
@@ -1,5 +1,6 @@
 import type { PhraseAnalysisLink } from 'interlinearizer';
 import { Link2Off } from 'lucide-react';
+import { Button } from 'platform-bible-react';
 import { memo, useState, useCallback } from 'react';
 import type { PhraseMode } from '../types/phrase-mode';
 import { computeSplitFreeRefs, getArcStrokeProps, type ArcPath } from '../utils/phrase-arc';
@@ -321,10 +322,11 @@ export function ArcOverlay({
             );
             const willCreateFreeTokens = arcSplitFreeRefs !== undefined;
             return (
-              <button
+              <Button
                 key={`split-arc-${phraseId}-${d}`}
+                variant="ghost"
                 aria-label="Split phrase here"
-                className={`tw:absolute tw:-translate-x-1/2 tw:-translate-y-1/2 tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
+                className={`tw:absolute tw:-translate-x-1/2 tw:-translate-y-1/2 tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
                 data-testid="split-arc-btn"
                 style={{ left: midX, top: midY }}
                 tabIndex={-1}
@@ -353,7 +355,7 @@ export function ArcOverlay({
                 }}
               >
                 <Link2Off className="tw:h-2.5 tw:w-2.5" />
-              </button>
+              </Button>
             );
           })}
     </>
diff --git a/src/components/ContinuousView.tsx b/src/components/ContinuousView.tsx
index 87f87c2d..924d0511 100644
--- a/src/components/ContinuousView.tsx
+++ b/src/components/ContinuousView.tsx
@@ -1,5 +1,6 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import type { Book, Token } from 'interlinearizer';
+import { Button } from 'platform-bible-react';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import { usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
@@ -966,16 +967,17 @@ export default function ContinuousView({
   return (
     <div className="tw:relative tw:flex tw:items-center tw:gap-1">
       {/* Previous navigation arrow */}
-      <button
+      <Button
+        variant="ghost"
+        size="icon-sm"
         aria-label="Previous token"
-        className="tw:icon-button"
         disabled={atStart}
         tabIndex={-1}
         onClick={stepPrev}
         type="button"
       >
         <span aria-hidden="true">{isRtl ? '\u2192' : '\u2190'}</span>
-      </button>
+      </Button>
 
       {/* Scrollable token strip */}
       <div
@@ -1050,16 +1052,17 @@ export default function ContinuousView({
       </div>
 
       {/* Next navigation arrow */}
-      <button
+      <Button
+        variant="ghost"
+        size="icon-sm"
         aria-label="Next token"
-        className="tw:icon-button"
         disabled={atEnd}
         tabIndex={-1}
         onClick={stepNext}
         type="button"
       >
         <span aria-hidden="true">{isRtl ? '\u2190' : '\u2192'}</span>
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/src/components/MorphemeEditor.tsx b/src/components/MorphemeEditor.tsx
index 1070287f..0d1a6d9f 100644
--- a/src/components/MorphemeEditor.tsx
+++ b/src/components/MorphemeEditor.tsx
@@ -5,7 +5,7 @@
  *   lives separately in {@link ./MorphemeBox}.
  */
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { PopoverContent } from 'platform-bible-react';
+import { Button, PopoverContent } from 'platform-bible-react';
 import { useEffect, useId, useRef, useState } from 'react';
 import type { KeyboardEvent, MouseEvent } from 'react';
 
@@ -195,8 +195,10 @@ export function MorphemeBreakdownPopover({
       />
       <div className="tw:flex tw:justify-end tw:gap-1.5">
         {onDelete && (
-          <button
-            className="tw:me-auto tw:rounded tw:border tw:border-destructive tw:px-3 tw:py-0.5 tw:text-xs tw:text-destructive tw:hover:bg-destructive/10"
+          <Button
+            variant="outline"
+            size="sm"
+            className="tw:me-auto tw:text-destructive"
             type="button"
             onClick={() => {
               onDelete();
@@ -204,23 +206,14 @@ export function MorphemeBreakdownPopover({
             }}
           >
             {localizedStrings['%interlinearizer_morphemeEditor_delete%']}
-          </button>
+          </Button>
         )}
-        <button
-          className="tw:rounded tw:border tw:border-border tw:px-3 tw:py-0.5 tw:text-xs tw:text-muted-foreground tw:hover:bg-accent"
-          type="button"
-          onClick={onClose}
-        >
+        <Button variant="outline" size="sm" type="button" onClick={onClose}>
           {localizedStrings['%interlinearizer_morphemeEditor_cancel%']}
-        </button>
-        <button
-          className="tw:rounded tw:bg-primary tw:px-3 tw:py-0.5 tw:text-xs tw:text-primary-foreground tw:hover:bg-primary/90 tw:disabled:opacity-50 tw:disabled:pointer-events-none"
-          disabled={isMeaningless}
-          type="button"
-          onClick={handleSave}
-        >
+        </Button>
+        <Button size="sm" disabled={isMeaningless} type="button" onClick={handleSave}>
           {localizedStrings['%interlinearizer_morphemeEditor_done%']}
-        </button>
+        </Button>
       </div>
     </PopoverContent>
   );
diff --git a/src/components/PhraseBox.tsx b/src/components/PhraseBox.tsx
index e323f9bd..0a2f824d 100644
--- a/src/components/PhraseBox.tsx
+++ b/src/components/PhraseBox.tsx
@@ -1,6 +1,7 @@
 /** @file Shared phrase-box wrapper used around word tokens. */
 import type { PhraseAnalysisLink, Token } from 'interlinearizer';
 import { Trash2 } from 'lucide-react';
+import { Button } from 'platform-bible-react';
 import { memo, useCallback, useEffect, useState } from 'react';
 import type { KeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
 import {
@@ -349,26 +350,30 @@ export function PhraseBox({
             className="tw:absolute tw:top-0 tw:z-1 tw:left-1/2 tw:-translate-x-1/2 tw:-translate-y-full tw:inline-flex tw:gap-0.5 tw:rounded tw:border tw:phrase-hovered tw:bg-background tw:px-0.5 tw:py-px"
             data-phrase-controls="true"
           >
-            <button
+            <Button
+              variant="ghost"
+              size="icon-xs"
               aria-label="Edit phrase"
-              className="tw:rounded tw:px-0.5 tw:py-px tw:text-xs tw:text-muted-foreground tw:hover:text-foreground"
+              className="tw:text-xs tw:text-muted-foreground tw:hover:text-foreground"
               data-testid="edit-phrase-btn"
               tabIndex={-1}
               onClick={handleEditClick}
               type="button"
             >
               ✎
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-xs"
               aria-label="Unlink phrase"
-              className="tw:rounded tw:px-0.5 tw:py-px tw:text-xs tw:text-muted-foreground tw:hover:text-destructive"
+              className="tw:text-muted-foreground tw:hover:text-destructive"
               data-testid="unlink-phrase-btn"
               tabIndex={-1}
               onClick={handleUnlinkClick}
               type="button"
             >
               <Trash2 className="tw:h-3 tw:w-3" />
-            </button>
+            </Button>
           </span>
         )}
         <div
diff --git a/src/components/PhraseStripParts.tsx b/src/components/PhraseStripParts.tsx
index 46276c6d..51e07b3b 100644
--- a/src/components/PhraseStripParts.tsx
+++ b/src/components/PhraseStripParts.tsx
@@ -1,7 +1,7 @@
 /** @file Shared render parts for the two phrase strips (SegmentView and ContinuousView). */
 import type { Token } from 'interlinearizer';
 import { Merge, Split } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { memo } from 'react';
 import type { MouseEvent, ReactNode } from 'react';
 import MemoizedPhraseBox from './PhraseBox';
@@ -47,16 +47,17 @@ function BoundaryButton({ label, title, testId, icon, action }: BoundaryButtonPr
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <Button
+          variant="ghost"
           aria-label={label}
-          className="tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:bg-accent tw:hover:text-accent-foreground"
+          className="tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:bg-accent tw:hover:text-accent-foreground"
           data-testid={testId}
           tabIndex={-1}
           type="button"
           onClick={action}
         >
           {icon}
-        </button>
+        </Button>
       </TooltipTrigger>
       <TooltipContent>{title}</TooltipContent>
     </Tooltip>
diff --git a/src/components/SegmentListView.tsx b/src/components/SegmentListView.tsx
index 37d0bb67..191713cb 100644
--- a/src/components/SegmentListView.tsx
+++ b/src/components/SegmentListView.tsx
@@ -2,7 +2,7 @@ import { useLocalizedStrings } from '@papi/frontend/react';
 import { Canon, type SerializedVerseRef } from '@sillsdev/scripture';
 import type { Book, ScriptureRef, Segment, Token } from 'interlinearizer';
 import { LocateFixed, Merge } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import type { PhraseMode } from '../types/phrase-mode';
@@ -64,9 +64,14 @@ function MergeRowButton({ segment }: MergeRowButtonProps) {
       />
       <Tooltip>
         <TooltipTrigger asChild>
-          <button
+          {/* Full-area hit strip: the layout classes (absolute inset-0, h-auto, no padding) override
+              the Button size box so it fills the gap, and hover:bg-transparent suppresses the ghost
+              variant's hover band — this control deliberately never paints over the rail (see the
+              handle's group-hover styling below). */}
+          <Button
+            variant="ghost"
             aria-label={localizedStrings['%interlinearizer_boundaryControl_merge%']}
-            className="tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center tw:rounded"
+            className="tw:absolute tw:inset-0 tw:flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0 tw:hover:bg-transparent"
             data-testid="segment-merge-btn"
             tabIndex={-1}
             type="button"
@@ -79,7 +84,7 @@ function MergeRowButton({ segment }: MergeRowButtonProps) {
             <span className="tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:bg-muted tw:p-1 tw:text-muted-foreground tw:group-hover/merge:bg-accent tw:group-hover/merge:text-accent-foreground">
               <Merge className="tw:h-3 tw:w-3 tw:rotate-90" />
             </span>
-          </button>
+          </Button>
         </TooltipTrigger>
         <TooltipContent>
           {altHeld
@@ -373,15 +378,16 @@ export default function SegmentListView({
           <span className="tw:text-sm tw:font-semibold tw:text-foreground">
             {pinnedChapter !== undefined ? `${bookName} ${pinnedChapter}` : ''}
           </span>
-          <button
+          <Button
+            variant="ghost"
+            size="icon-sm"
             aria-label="Scroll to active verse"
-            className="tw:rounded tw:p-1 tw:text-foreground tw:hover:bg-muted/50"
             tabIndex={-1}
             onClick={recenterOnActive}
             type="button"
           >
             <LocateFixed className="tw:h-4 tw:w-4" />
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/src/components/TokenChip.tsx b/src/components/TokenChip.tsx
index 75b6c7db..7f949f8f 100644
--- a/src/components/TokenChip.tsx
+++ b/src/components/TokenChip.tsx
@@ -1,7 +1,7 @@
 import type { Token } from 'interlinearizer';
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Plus, X } from 'lucide-react';
-import { Popover, PopoverAnchor } from 'platform-bible-react';
+import { Button, Popover, PopoverAnchor } from 'platform-bible-react';
 import {
   type KeyboardEvent,
   memo,
@@ -354,9 +354,10 @@ export function TokenChip({
   return (
     <span className="tw:relative tw:inline-flex tw:shrink-0">
       {onRemove && (
-        <button
+        <Button
+          variant="ghost"
           aria-label={`Remove ${token.surfaceText} from phrase`}
-          className={`tw:absolute tw:-top-1.5 tw:-right-1.5 tw:z-10 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:rounded-full tw:border tw:bg-background${isRemoveHovered ? ' tw:border-destructive tw:text-destructive' : ' tw:border-border tw:text-muted-foreground'}`}
+          className={`tw:absolute tw:-top-1.5 tw:-right-1.5 tw:z-10 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:rounded-full tw:border tw:bg-background tw:p-0${isRemoveHovered ? ' tw:border-destructive tw:text-destructive' : ' tw:border-border tw:text-muted-foreground'}`}
           tabIndex={-1}
           type="button"
           onClick={(e) => {
@@ -367,7 +368,7 @@ export function TokenChip({
           onMouseLeave={() => setIsRemoveHovered(false)}
         >
           <X className="tw:h-2.5 tw:w-2.5" />
-        </button>
+        </Button>
       )}
       <label
         className={`tw:inline-flex tw:flex-col tw:items-center tw:rounded tw:border tw:bg-muted tw:px-0.5 tw:py-0.5${isRemoveHovered || isSplitFree ? ' tw:border-destructive' : ' tw:border-border'}${disabled ? ' tw:pointer-events-none' : ''}`}
@@ -402,11 +403,12 @@ export function TokenChip({
               />
             ) : (
               <PopoverAnchor asChild>
-                <button
+                <Button
+                  variant="ghost"
                   aria-label={localizedStrings[
                     '%interlinearizer_tokenChip_defineMorphemes%'
                   ].replace('{token}', () => token.surfaceText)}
-                  className={`tw:flex tw:flex-row tw:items-center tw:rounded tw:px-0.5 tw:font-mono tw:text-xs tw:italic tw:text-muted-foreground/50 tw:transition-colors${disabled ? '' : ' tw:cursor-pointer tw:hover:bg-accent'}`}
+                  className={`tw:flex tw:h-auto tw:flex-row tw:items-center tw:rounded tw:px-0.5 tw:py-0 tw:font-mono tw:text-xs tw:italic tw:text-muted-foreground/50 tw:transition-colors${disabled ? '' : ' tw:cursor-pointer tw:hover:bg-accent'}`}
                   tabIndex={-1}
                   type="button"
                   onClick={(e) => {
@@ -415,7 +417,7 @@ export function TokenChip({
                   }}
                 >
                   <span className="tw:whitespace-nowrap">{token.surfaceText}</span>
-                </button>
+                </Button>
               </PopoverAnchor>
             )}
             {popoverOpen && (
@@ -488,7 +490,8 @@ export function TokenChip({
             type="text"
           />
           {hasMultipleSuggestions && (
-            <button
+            <Button
+              variant="ghost"
               aria-controls={dropdownShown ? listboxId : undefined}
               aria-expanded={dropdownShown}
               aria-hidden={!addVisible}
@@ -496,7 +499,7 @@ export function TokenChip({
               // Absolutely positioned inside the input's reserved end-padding so it never affects
               // layout; we toggle only opacity, fading the button in on focus/hover. When hidden it
               // is also made non-interactive so an invisible button can't swallow clicks.
-              className={`tw:absolute tw:right-0.5 tw:top-1/2 tw:flex tw:h-2.5 tw:w-2.5 tw:-translate-y-1/2 tw:items-center tw:justify-center tw:rounded tw:text-muted-foreground tw:cursor-pointer tw:transition-opacity tw:hover:bg-accent${addVisible ? '' : ' tw:pointer-events-none tw:opacity-0'}`}
+              className={`tw:absolute tw:right-0.5 tw:top-1/2 tw:flex tw:h-2.5 tw:w-2.5 tw:-translate-y-1/2 tw:items-center tw:justify-center tw:rounded tw:p-0 tw:text-muted-foreground tw:cursor-pointer tw:transition-opacity tw:hover:bg-accent${addVisible ? '' : ' tw:pointer-events-none tw:opacity-0'}`}
               data-testid="suggestion-add"
               tabIndex={-1}
               type="button"
@@ -505,7 +508,7 @@ export function TokenChip({
               onMouseDown={(e) => e.preventDefault()}
             >
               <Plus className="tw:h-2.5 tw:w-2.5" />
-            </button>
+            </Button>
           )}
         </span>
         {dropdownShown && (
diff --git a/src/components/TokenLinkIcon.tsx b/src/components/TokenLinkIcon.tsx
index b2f09196..610761c7 100644
--- a/src/components/TokenLinkIcon.tsx
+++ b/src/components/TokenLinkIcon.tsx
@@ -1,7 +1,7 @@
 /** @file Inline link / unlink icon rendered between adjacent word token groups. */
 import type { PhraseAnalysisLink, Token } from 'interlinearizer';
 import { Link2, Unlink2 } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { memo, useCallback } from 'react';
 import { usePhraseDispatch } from './AnalysisStore';
 import { usePhraseStripContext } from './PhraseStripContext';
@@ -248,9 +248,10 @@ export function TokenLinkIcon({
     };
 
     return (
-      <button
+      <Button
+        variant="ghost"
         aria-label="Unlink tokens"
-        className={`tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:transition-opacity tw:hover:text-destructive tw:focus:opacity-100 tw:disabled:pointer-events-none tw:disabled:opacity-30 ${isPhraseRevealed ? 'tw:text-muted-foreground tw:opacity-100' : 'tw:text-muted-foreground/50 tw:opacity-100'}`}
+        className={`tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:transition-opacity tw:hover:text-destructive tw:focus:opacity-100 tw:disabled:opacity-30 ${isPhraseRevealed ? 'tw:text-muted-foreground tw:opacity-100' : 'tw:text-muted-foreground/50 tw:opacity-100'}`}
         data-testid="token-unlink-btn"
         disabled={unlinkDisabled}
         tabIndex={-1}
@@ -261,7 +262,7 @@ export function TokenLinkIcon({
         type="button"
       >
         <Unlink2 className="tw:h-3 tw:w-3" />
-      </button>
+      </Button>
     );
   }
 
@@ -317,9 +318,10 @@ export function TokenLinkIcon({
   };
 
   const linkButton = (
-    <button
+    <Button
+      variant="ghost"
       aria-label="Link tokens"
-      className={`tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-foreground/60 tw:hover:text-foreground' : 'tw:text-foreground/20 tw:cursor-default'}`}
+      className={`tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-foreground/60 tw:hover:text-foreground' : 'tw:text-foreground/20 tw:cursor-default'}`}
       data-testid="token-link-btn"
       disabled={linkDisabled}
       tabIndex={-1}
@@ -329,7 +331,7 @@ export function TokenLinkIcon({
       type="button"
     >
       <Link2 className="tw:h-3 tw:w-3" />
-    </button>
+    </Button>
   );
 
   // Only the cross-segment-disabled case carries a tooltip.
diff --git a/src/components/controls/EditPhraseControls.tsx b/src/components/controls/EditPhraseControls.tsx
index 3a2fdccc..0152c8fc 100644
--- a/src/components/controls/EditPhraseControls.tsx
+++ b/src/components/controls/EditPhraseControls.tsx
@@ -1,4 +1,5 @@
 /** @file Done/Cancel controls shown in the confirm bar while editing a phrase. */
+import { Button } from 'platform-bible-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { usePhraseLinkByIdMap } from '../AnalysisStore';
 import type { PhraseMode } from '../../types/phrase-mode';
@@ -34,23 +35,24 @@ export default function EditPhraseControls({ phraseMode, setPhraseMode }: EditPh
   return (
     <div className="tw:confirm-controls" data-testid="edit-phrase-controls">
       <span>Editing Phrase</span>
-      <button
-        className="tw:pill-btn-primary"
+      <Button
+        size="sm"
         data-testid="done-edit-btn"
         disabled={liveTokenCount < 2}
         onClick={() => setPhraseMode({ kind: 'view' })}
         type="button"
       >
         Done
-      </button>
-      <button
-        className="tw:pill-btn-secondary"
+      </Button>
+      <Button
+        variant="secondary"
+        size="sm"
         data-testid="cancel-phrase-btn"
         onClick={() => setPhraseMode({ ...phraseMode, revert: true })}
         type="button"
       >
         Cancel
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/src/components/modals/CreateProjectModal.tsx b/src/components/modals/CreateProjectModal.tsx
index 4b592336..89dc2259 100644
--- a/src/components/modals/CreateProjectModal.tsx
+++ b/src/components/modals/CreateProjectModal.tsx
@@ -1,5 +1,5 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { Button } from 'platform-bible-react';
+import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useState, useCallback } from 'react';
 import { parseLanguageTags } from '../../utils/language-tags';
 import { ModalShell } from './ModalShell';
@@ -87,33 +87,33 @@ export function CreateProjectModal({
       title={localizedStrings['%interlinearizer_modal_create_title%']}
       width="tw:w-96"
     >
-      <label className="tw:modal-form-label" htmlFor="project-name">
+      <Label htmlFor="project-name">
         {localizedStrings['%interlinearizer_modal_create_name_label%']}
-      </label>
-      <input
+      </Label>
+      <Input
         id="project-name"
-        className="tw:modal-form-input tw:mb-3"
+        className="tw:mb-3 tw:w-full"
         value={name}
         onChange={(e) => setName(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
       />
-      <label className="tw:modal-form-label" htmlFor="project-description">
+      <Label htmlFor="project-description">
         {localizedStrings['%interlinearizer_modal_create_description_label%']}
-      </label>
-      <textarea
+      </Label>
+      <Textarea
         id="project-description"
-        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        className="tw:mb-3 tw:resize-none"
         rows={2}
         value={description}
         onChange={(e) => setDescription(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
       />
-      <label className="tw:modal-form-label" htmlFor="analysis-language">
+      <Label htmlFor="analysis-language">
         {localizedStrings['%interlinearizer_modal_create_language_label%']}
-      </label>
-      <input
+      </Label>
+      <Input
         id="analysis-language"
-        className="tw:modal-form-input tw:mb-4"
+        className="tw:mb-4 tw:w-full"
         value={analysisLanguages}
         onChange={(e) => setAnalysisLanguages(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_language_placeholder%']}
diff --git a/src/components/modals/ProjectMetadataModal.tsx b/src/components/modals/ProjectMetadataModal.tsx
index 5c1d5ca5..0d1354bc 100644
--- a/src/components/modals/ProjectMetadataModal.tsx
+++ b/src/components/modals/ProjectMetadataModal.tsx
@@ -1,7 +1,7 @@
 import papi, { logger } from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Trash2 } from 'lucide-react';
-import { Button } from 'platform-bible-react';
+import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useCallback, useMemo, useState } from 'react';
 import { parseLanguageTags } from '../../utils/language-tags';
 import useSubmitGuard from '../../hooks/useSubmitGuard';
@@ -191,10 +191,10 @@ export function ProjectMetadataModal({
       {/* Editable fields */}
       <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
         <div className="tw:flex tw:flex-col tw:gap-1">
-          <label className="tw:section-label" htmlFor="metadata-edit-name">
+          <Label className="tw:section-label" htmlFor="metadata-edit-name">
             {localizedStrings['%interlinearizer_modal_metadata_name_label%']}
-          </label>
-          <input
+          </Label>
+          <Input
             id="metadata-edit-name"
             className="tw:modal-metadata-input"
             value={editName}
@@ -204,10 +204,10 @@ export function ProjectMetadataModal({
         </div>
 
         <div className="tw:flex tw:flex-col tw:gap-1">
-          <label className="tw:section-label" htmlFor="metadata-edit-description">
+          <Label className="tw:section-label" htmlFor="metadata-edit-description">
             {localizedStrings['%interlinearizer_modal_metadata_description_label%']}
-          </label>
-          <textarea
+          </Label>
+          <Textarea
             id="metadata-edit-description"
             className="tw:modal-metadata-input tw:resize-none"
             rows={2}
@@ -220,10 +220,10 @@ export function ProjectMetadataModal({
         </div>
 
         <div className="tw:flex tw:flex-col tw:gap-1">
-          <label className="tw:section-label" htmlFor="metadata-edit-language">
+          <Label className="tw:section-label" htmlFor="metadata-edit-language">
             {localizedStrings['%interlinearizer_modal_metadata_analysis_language_label%']}
-          </label>
-          <input
+          </Label>
+          <Input
             id="metadata-edit-language"
             className="tw:modal-metadata-input tw:font-mono"
             value={editLanguages}
diff --git a/src/components/modals/SaveAsProjectModal.tsx b/src/components/modals/SaveAsProjectModal.tsx
index bdade719..b8a0a7a4 100644
--- a/src/components/modals/SaveAsProjectModal.tsx
+++ b/src/components/modals/SaveAsProjectModal.tsx
@@ -1,6 +1,6 @@
 import papi, { logger } from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { Button } from 'platform-bible-react';
+import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import useSubmitGuard from '../../hooks/useSubmitGuard';
 import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
@@ -170,22 +170,22 @@ export function SaveAsProjectModal({
       <h3 className="tw:text-sm tw:font-medium tw:mb-2">
         {localizedStrings['%interlinearizer_modal_saveAs_new_section%']}
       </h3>
-      <label className="tw:modal-form-label" htmlFor="save-as-name">
+      <Label htmlFor="save-as-name">
         {localizedStrings['%interlinearizer_modal_create_name_label%']}
-      </label>
-      <input
+      </Label>
+      <Input
         id="save-as-name"
-        className="tw:modal-form-input tw:mb-3"
+        className="tw:mb-3 tw:w-full"
         value={name}
         onChange={(e) => setName(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
       />
-      <label className="tw:modal-form-label" htmlFor="save-as-description">
+      <Label htmlFor="save-as-description">
         {localizedStrings['%interlinearizer_modal_create_description_label%']}
-      </label>
-      <textarea
+      </Label>
+      <Textarea
         id="save-as-description"
-        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        className="tw:mb-3 tw:resize-none"
         rows={2}
         value={description}
         onChange={(e) => setDescription(e.target.value)}
diff --git a/src/components/modals/UnlinkPhraseConfirm.tsx b/src/components/modals/UnlinkPhraseConfirm.tsx
index c5d82022..16236fe5 100644
--- a/src/components/modals/UnlinkPhraseConfirm.tsx
+++ b/src/components/modals/UnlinkPhraseConfirm.tsx
@@ -1,4 +1,5 @@
 /** @file Confirmation controls shown in the confirm bar for unlinking (deleting) a phrase. */
+import { Button } from 'platform-bible-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { usePhraseDispatch } from '../AnalysisStore';
 import type { PhraseMode } from '../../types/phrase-mode';
@@ -42,22 +43,24 @@ export default function UnlinkPhraseConfirm({ phraseId, setPhraseMode }: UnlinkP
   return (
     <div className="tw:confirm-controls" data-testid="unlink-confirm">
       <span>Unlink this phrase?</span>
-      <button
-        className="tw:pill-btn-destructive"
+      <Button
+        variant="destructive"
+        size="sm"
         data-testid="unlink-confirm-yes"
         onClick={handleConfirm}
         type="button"
       >
         Unlink
-      </button>
-      <button
-        className="tw:pill-btn-secondary"
+      </Button>
+      <Button
+        variant="secondary"
+        size="sm"
         data-testid="unlink-confirm-cancel"
         onClick={handleCancel}
         type="button"
       >
         Cancel
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/src/tailwind.css b/src/tailwind.css
index 2b15d6d7..0900ba1e 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -109,10 +109,6 @@
   @apply tw:text-destructive;
 }
 
-@utility icon-button {
-  @apply tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50;
-}
-
 @utility link-slot {
   @apply tw:inline-flex tw:flex-col tw:items-center;
 }
@@ -129,14 +125,6 @@
   @apply tw:rounded tw:border tw:border-destructive/40 tw:bg-destructive/5;
 }
 
-@utility modal-form-input {
-  @apply tw:w-full tw:rounded tw:border tw:border-border tw:bg-muted tw:text-foreground tw:px-3 tw:py-1.5 tw:text-sm;
-}
-
-@utility modal-form-label {
-  @apply tw:block tw:text-sm tw:mb-1;
-}
-
 @utility modal-metadata-input {
   @apply tw:rounded tw:border tw:border-border tw:bg-background tw:px-2 tw:py-1 tw:text-sm tw:text-foreground;
 }
@@ -209,18 +197,6 @@
   @apply tw:inline-flex tw:items-start tw:gap-1;
 }
 
-@utility pill-btn-destructive {
-  @apply tw:rounded tw:border tw:border-destructive tw:bg-destructive tw:px-2 tw:py-0.5 tw:text-destructive-foreground tw:hover:opacity-90;
-}
-
-@utility pill-btn-primary {
-  @apply tw:rounded tw:border tw:border-ring tw:bg-ring tw:px-2 tw:py-0.5 tw:text-background tw:hover:opacity-90;
-}
-
-@utility pill-btn-secondary {
-  @apply tw:rounded tw:border tw:border-border tw:bg-muted tw:px-2 tw:py-0.5 tw:text-foreground tw:hover:bg-muted/80;
-}
-
 @utility section-label {
   @apply tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide;
 }

From 2148470af41699302a1eb2d47ec94be57fda43ca Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Thu, 23 Jul 2026 16:50:03 -0400
Subject: [PATCH 2/8] Restore label-to-field spacing lost in Input/Textarea
 migration

The deleted modal-form-label utility supplied mb-1 between each label
and its field; the migrated Label component has no default margin, so
CreateProjectModal and SaveAsProjectModal fields lost their gap.
---
 src/components/modals/CreateProjectModal.tsx | 6 +++---
 src/components/modals/SaveAsProjectModal.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/modals/CreateProjectModal.tsx b/src/components/modals/CreateProjectModal.tsx
index 89dc2259..5bfece89 100644
--- a/src/components/modals/CreateProjectModal.tsx
+++ b/src/components/modals/CreateProjectModal.tsx
@@ -87,7 +87,7 @@ export function CreateProjectModal({
       title={localizedStrings['%interlinearizer_modal_create_title%']}
       width="tw:w-96"
     >
-      <Label htmlFor="project-name">
+      <Label className="tw:mb-1" htmlFor="project-name">
         {localizedStrings['%interlinearizer_modal_create_name_label%']}
       </Label>
       <Input
@@ -97,7 +97,7 @@ export function CreateProjectModal({
         onChange={(e) => setName(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
       />
-      <Label htmlFor="project-description">
+      <Label className="tw:mb-1" htmlFor="project-description">
         {localizedStrings['%interlinearizer_modal_create_description_label%']}
       </Label>
       <Textarea
@@ -108,7 +108,7 @@ export function CreateProjectModal({
         onChange={(e) => setDescription(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
       />
-      <Label htmlFor="analysis-language">
+      <Label className="tw:mb-1" htmlFor="analysis-language">
         {localizedStrings['%interlinearizer_modal_create_language_label%']}
       </Label>
       <Input
diff --git a/src/components/modals/SaveAsProjectModal.tsx b/src/components/modals/SaveAsProjectModal.tsx
index b8a0a7a4..f45d1970 100644
--- a/src/components/modals/SaveAsProjectModal.tsx
+++ b/src/components/modals/SaveAsProjectModal.tsx
@@ -170,7 +170,7 @@ export function SaveAsProjectModal({
       <h3 className="tw:text-sm tw:font-medium tw:mb-2">
         {localizedStrings['%interlinearizer_modal_saveAs_new_section%']}
       </h3>
-      <Label htmlFor="save-as-name">
+      <Label className="tw:mb-1" htmlFor="save-as-name">
         {localizedStrings['%interlinearizer_modal_create_name_label%']}
       </Label>
       <Input
@@ -180,7 +180,7 @@ export function SaveAsProjectModal({
         onChange={(e) => setName(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
       />
-      <Label htmlFor="save-as-description">
+      <Label className="tw:mb-1" htmlFor="save-as-description">
         {localizedStrings['%interlinearizer_modal_create_description_label%']}
       </Label>
       <Textarea

From 355106fedec3b0acd1a5ffb06ef12a00384be14c Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Thu, 23 Jul 2026 17:11:46 -0400
Subject: [PATCH 3/8] Sort some thing this pr touches anyway

---
 src/components/ArcOverlay.tsx                 |  2 +-
 src/components/ContinuousView.tsx             | 26 +++++++++----------
 src/components/MorphemeEditor.tsx             | 10 +++----
 src/components/PhraseBox.tsx                  | 16 ++++++------
 src/components/PhraseStripParts.tsx           | 14 +++++-----
 src/components/SegmentListView.tsx            | 18 ++++++-------
 src/components/TokenChip.tsx                  |  6 ++---
 src/components/TokenLinkIcon.tsx              |  8 +++---
 .../controls/EditPhraseControls.tsx           |  8 +++---
 .../modals/ProjectMetadataModal.tsx           |  2 +-
 src/components/modals/UnlinkPhraseConfirm.tsx | 10 +++----
 11 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/components/ArcOverlay.tsx b/src/components/ArcOverlay.tsx
index d6283887..b8765e74 100644
--- a/src/components/ArcOverlay.tsx
+++ b/src/components/ArcOverlay.tsx
@@ -324,13 +324,13 @@ export function ArcOverlay({
             return (
               <Button
                 key={`split-arc-${phraseId}-${d}`}
-                variant="ghost"
                 aria-label="Split phrase here"
                 className={`tw:absolute tw:-translate-x-1/2 tw:-translate-y-1/2 tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
                 data-testid="split-arc-btn"
                 style={{ left: midX, top: midY }}
                 tabIndex={-1}
                 type="button"
+                variant="ghost"
                 onClick={() => {
                   // Clear the split-hover state synchronously with the click. The button is removed
                   // from the DOM by the resulting re-render, so no mouseLeave fires — without this
diff --git a/src/components/ContinuousView.tsx b/src/components/ContinuousView.tsx
index 924d0511..b27d35b0 100644
--- a/src/components/ContinuousView.tsx
+++ b/src/components/ContinuousView.tsx
@@ -3,17 +3,17 @@ import type { Book, Token } from 'interlinearizer';
 import { Button } from 'platform-bible-react';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import { usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
+import { useArcPaths } from '../hooks/useArcPaths';
+import { usePhraseHoverState } from '../hooks/usePhraseHoverState';
 import type { PhraseMode } from '../types/phrase-mode';
-import type { ViewOptions } from '../types/view-options';
-import { PhraseStripProvider } from './PhraseStripContext';
-import { PhraseStrip, LINK_SLOT_TRANSITION_MS, type StripItem } from './PhraseStripParts';
 import type { LinkSlot, TokenGroup } from '../types/token-layout';
-import { buildRenderUnits, groupTokens, resolveFocusContext } from '../utils/token-layout';
+import type { ViewOptions } from '../types/view-options';
 import { resolvedOrEmpty } from '../utils/localized-strings';
+import { buildRenderUnits, groupTokens, resolveFocusContext } from '../utils/token-layout';
 import { buildVerseStartLabelsByTokenRef, slotVerseLabel } from '../utils/verse-superscripts';
-import { useArcPaths } from '../hooks/useArcPaths';
-import { usePhraseHoverState } from '../hooks/usePhraseHoverState';
+import { usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
+import { PhraseStripProvider } from './PhraseStripContext';
+import { PhraseStrip, LINK_SLOT_TRANSITION_MS, type StripItem } from './PhraseStripParts';
 import {
   useArcSplitHandler,
   useCandidatePhraseIds,
@@ -968,13 +968,13 @@ export default function ContinuousView({
     <div className="tw:relative tw:flex tw:items-center tw:gap-1">
       {/* Previous navigation arrow */}
       <Button
-        variant="ghost"
-        size="icon-sm"
         aria-label="Previous token"
         disabled={atStart}
-        tabIndex={-1}
         onClick={stepPrev}
+        size="icon-sm"
+        tabIndex={-1}
         type="button"
+        variant="ghost"
       >
         <span aria-hidden="true">{isRtl ? '\u2192' : '\u2190'}</span>
       </Button>
@@ -1053,13 +1053,13 @@ export default function ContinuousView({
 
       {/* Next navigation arrow */}
       <Button
-        variant="ghost"
-        size="icon-sm"
         aria-label="Next token"
         disabled={atEnd}
-        tabIndex={-1}
         onClick={stepNext}
+        size="icon-sm"
+        tabIndex={-1}
         type="button"
+        variant="ghost"
       >
         <span aria-hidden="true">{isRtl ? '\u2190' : '\u2192'}</span>
       </Button>
diff --git a/src/components/MorphemeEditor.tsx b/src/components/MorphemeEditor.tsx
index 0d1a6d9f..471b9284 100644
--- a/src/components/MorphemeEditor.tsx
+++ b/src/components/MorphemeEditor.tsx
@@ -196,22 +196,22 @@ export function MorphemeBreakdownPopover({
       <div className="tw:flex tw:justify-end tw:gap-1.5">
         {onDelete && (
           <Button
-            variant="outline"
-            size="sm"
             className="tw:me-auto tw:text-destructive"
-            type="button"
             onClick={() => {
               onDelete();
               onClose();
             }}
+            size="sm"
+            type="button"
+            variant="outline"
           >
             {localizedStrings['%interlinearizer_morphemeEditor_delete%']}
           </Button>
         )}
-        <Button variant="outline" size="sm" type="button" onClick={onClose}>
+        <Button onClick={onClose} size="sm" type="button" variant="outline">
           {localizedStrings['%interlinearizer_morphemeEditor_cancel%']}
         </Button>
-        <Button size="sm" disabled={isMeaningless} type="button" onClick={handleSave}>
+        <Button disabled={isMeaningless} onClick={handleSave} size="sm" type="button">
           {localizedStrings['%interlinearizer_morphemeEditor_done%']}
         </Button>
       </div>
diff --git a/src/components/PhraseBox.tsx b/src/components/PhraseBox.tsx
index 0a2f824d..a8b5bbf9 100644
--- a/src/components/PhraseBox.tsx
+++ b/src/components/PhraseBox.tsx
@@ -4,6 +4,8 @@ import { Trash2 } from 'lucide-react';
 import { Button } from 'platform-bible-react';
 import { memo, useCallback, useEffect, useState } from 'react';
 import type { KeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
+import { sortByDocOrder } from '../utils/phrase-arc';
+import { NO_SLOT_FOCUS } from '../utils/token-layout';
 import {
   usePhraseDispatch,
   usePhraseGloss,
@@ -14,8 +16,6 @@ import {
 import { usePhraseStripContext } from './PhraseStripContext';
 import MemoizedTokenChip, { InertTokenChip } from './TokenChip';
 import MemoizedTokenLinkIcon from './TokenLinkIcon';
-import { sortByDocOrder } from '../utils/phrase-arc';
-import { NO_SLOT_FOCUS } from '../utils/token-layout';
 
 /**
  * Inline gloss input for a phrase. Reads and writes the phrase-level gloss from the analysis store.
@@ -351,26 +351,26 @@ export function PhraseBox({
             data-phrase-controls="true"
           >
             <Button
-              variant="ghost"
-              size="icon-xs"
               aria-label="Edit phrase"
               className="tw:text-xs tw:text-muted-foreground tw:hover:text-foreground"
               data-testid="edit-phrase-btn"
-              tabIndex={-1}
               onClick={handleEditClick}
+              size="icon-xs"
+              tabIndex={-1}
               type="button"
+              variant="ghost"
             >
               ✎
             </Button>
             <Button
-              variant="ghost"
-              size="icon-xs"
               aria-label="Unlink phrase"
               className="tw:text-muted-foreground tw:hover:text-destructive"
               data-testid="unlink-phrase-btn"
-              tabIndex={-1}
               onClick={handleUnlinkClick}
+              size="icon-xs"
+              tabIndex={-1}
               type="button"
+              variant="ghost"
             >
               <Trash2 className="tw:h-3 tw:w-3" />
             </Button>
diff --git a/src/components/PhraseStripParts.tsx b/src/components/PhraseStripParts.tsx
index 51e07b3b..c0d3e4af 100644
--- a/src/components/PhraseStripParts.tsx
+++ b/src/components/PhraseStripParts.tsx
@@ -4,16 +4,16 @@ import { Merge, Split } from 'lucide-react';
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { memo } from 'react';
 import type { MouseEvent, ReactNode } from 'react';
-import MemoizedPhraseBox from './PhraseBox';
-import { useAltHeldValue } from './AltHeldContext';
 import type { PhraseMode } from '../types/phrase-mode';
+import type { FocusContext, LinkSlot, TokenGroup } from '../types/token-layout';
+import { resolveSplitAnchor } from '../utils/split-anchor';
+import { resolveSlotFocus } from '../utils/token-layout';
+import { useAltHeldValue } from './AltHeldContext';
+import MemoizedPhraseBox from './PhraseBox';
 import { usePhraseStripContext } from './PhraseStripContext';
 import { useSegmentation } from './SegmentationStore';
 import { InertTokenChip } from './TokenChip';
 import MemoizedTokenLinkIcon from './TokenLinkIcon';
-import type { FocusContext, LinkSlot, TokenGroup } from '../types/token-layout';
-import { resolveSlotFocus } from '../utils/token-layout';
-import { resolveSplitAnchor } from '../utils/split-anchor';
 
 /** Props for {@link BoundaryButton}. */
 type BoundaryButtonProps = Readonly<{
@@ -48,13 +48,13 @@ function BoundaryButton({ label, title, testId, icon, action }: BoundaryButtonPr
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          variant="ghost"
           aria-label={label}
           className="tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:bg-accent tw:hover:text-accent-foreground"
           data-testid={testId}
+          onClick={action}
           tabIndex={-1}
           type="button"
-          onClick={action}
+          variant="ghost"
         >
           {icon}
         </Button>
diff --git a/src/components/SegmentListView.tsx b/src/components/SegmentListView.tsx
index 191713cb..e3e33d0b 100644
--- a/src/components/SegmentListView.tsx
+++ b/src/components/SegmentListView.tsx
@@ -5,15 +5,15 @@ import { LocateFixed, Merge } from 'lucide-react';
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
+import useSegmentWindow from '../hooks/useSegmentWindow';
 import type { PhraseMode } from '../types/phrase-mode';
 import type { ViewOptions } from '../types/view-options';
+import { buildSegmentLabels } from '../utils/segment-labels';
+import { segmentContainsVerse } from '../utils/verse-ref';
+import { buildVerseStartLabels } from '../utils/verse-superscripts';
 import { useAltHeldValue } from './AltHeldContext';
 import { useSegmentation } from './SegmentationStore';
 import MemoizedSegmentView from './SegmentView';
-import useSegmentWindow from '../hooks/useSegmentWindow';
-import { buildVerseStartLabels } from '../utils/verse-superscripts';
-import { buildSegmentLabels } from '../utils/segment-labels';
-import { segmentContainsVerse } from '../utils/verse-ref';
 import { RECENTER_FADE_TRANSITION_STYLE } from './recenter-fade';
 
 /** Localized labels for the between-rows merge control; hoisted so the array reference is stable. */
@@ -69,13 +69,13 @@ function MergeRowButton({ segment }: MergeRowButtonProps) {
               variant's hover band — this control deliberately never paints over the rail (see the
               handle's group-hover styling below). */}
           <Button
-            variant="ghost"
             aria-label={localizedStrings['%interlinearizer_boundaryControl_merge%']}
             className="tw:absolute tw:inset-0 tw:flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0 tw:hover:bg-transparent"
             data-testid="segment-merge-btn"
+            onClick={() => dispatch.merge(secondSegmentStartRef)}
             tabIndex={-1}
             type="button"
-            onClick={() => dispatch.merge(secondSegmentStartRef)}
+            variant="ghost"
           >
             {/* A solid rounded "handle" riding the rail: a real theme surface (`bg-muted`) so it
                 reads coherently over the line, brightening to the accent on hover. Rotated 90° so
@@ -379,12 +379,12 @@ export default function SegmentListView({
             {pinnedChapter !== undefined ? `${bookName} ${pinnedChapter}` : ''}
           </span>
           <Button
-            variant="ghost"
-            size="icon-sm"
             aria-label="Scroll to active verse"
-            tabIndex={-1}
             onClick={recenterOnActive}
+            tabIndex={-1}
+            size="icon-sm"
             type="button"
+            variant="ghost"
           >
             <LocateFixed className="tw:h-4 tw:w-4" />
           </Button>
diff --git a/src/components/TokenChip.tsx b/src/components/TokenChip.tsx
index 7f949f8f..75844ddf 100644
--- a/src/components/TokenChip.tsx
+++ b/src/components/TokenChip.tsx
@@ -355,11 +355,11 @@ export function TokenChip({
     <span className="tw:relative tw:inline-flex tw:shrink-0">
       {onRemove && (
         <Button
-          variant="ghost"
           aria-label={`Remove ${token.surfaceText} from phrase`}
           className={`tw:absolute tw:-top-1.5 tw:-right-1.5 tw:z-10 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:rounded-full tw:border tw:bg-background tw:p-0${isRemoveHovered ? ' tw:border-destructive tw:text-destructive' : ' tw:border-border tw:text-muted-foreground'}`}
           tabIndex={-1}
           type="button"
+          variant="ghost"
           onClick={(e) => {
             e.preventDefault();
             onRemove();
@@ -404,13 +404,13 @@ export function TokenChip({
             ) : (
               <PopoverAnchor asChild>
                 <Button
-                  variant="ghost"
                   aria-label={localizedStrings[
                     '%interlinearizer_tokenChip_defineMorphemes%'
                   ].replace('{token}', () => token.surfaceText)}
                   className={`tw:flex tw:h-auto tw:flex-row tw:items-center tw:rounded tw:px-0.5 tw:py-0 tw:font-mono tw:text-xs tw:italic tw:text-muted-foreground/50 tw:transition-colors${disabled ? '' : ' tw:cursor-pointer tw:hover:bg-accent'}`}
                   tabIndex={-1}
                   type="button"
+                  variant="ghost"
                   onClick={(e) => {
                     e.preventDefault();
                     if (!disabled) setPopoverOpen(true);
@@ -491,7 +491,6 @@ export function TokenChip({
           />
           {hasMultipleSuggestions && (
             <Button
-              variant="ghost"
               aria-controls={dropdownShown ? listboxId : undefined}
               aria-expanded={dropdownShown}
               aria-hidden={!addVisible}
@@ -503,6 +502,7 @@ export function TokenChip({
               data-testid="suggestion-add"
               tabIndex={-1}
               type="button"
+              variant="ghost"
               onClick={handleAddClick}
               // Suppress the mouse-down focus shift so clicking the button never blurs the input.
               onMouseDown={(e) => e.preventDefault()}
diff --git a/src/components/TokenLinkIcon.tsx b/src/components/TokenLinkIcon.tsx
index 610761c7..dfbe3477 100644
--- a/src/components/TokenLinkIcon.tsx
+++ b/src/components/TokenLinkIcon.tsx
@@ -3,10 +3,10 @@ import type { PhraseAnalysisLink, Token } from 'interlinearizer';
 import { Link2, Unlink2 } from 'lucide-react';
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { memo, useCallback } from 'react';
-import { usePhraseDispatch } from './AnalysisStore';
-import { usePhraseStripContext } from './PhraseStripContext';
 import type { SlotFocusInfo } from '../types/token-layout';
 import { computeSplitFreeRefs, sortByDocOrder, splitPhraseAtBoundary } from '../utils/phrase-arc';
+import { usePhraseDispatch } from './AnalysisStore';
+import { usePhraseStripContext } from './PhraseStripContext';
 
 /** Props for {@link TokenLinkIcon}. */
 type TokenLinkIconProps = Readonly<{
@@ -249,7 +249,6 @@ export function TokenLinkIcon({
 
     return (
       <Button
-        variant="ghost"
         aria-label="Unlink tokens"
         className={`tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:transition-opacity tw:hover:text-destructive tw:focus:opacity-100 tw:disabled:opacity-30 ${isPhraseRevealed ? 'tw:text-muted-foreground tw:opacity-100' : 'tw:text-muted-foreground/50 tw:opacity-100'}`}
         data-testid="token-unlink-btn"
@@ -260,6 +259,7 @@ export function TokenLinkIcon({
         onMouseEnter={(candidatePhraseId ?? splitFreeRefs) ? handleUnlinkMouseEnter : undefined}
         onMouseLeave={(candidatePhraseId ?? splitFreeRefs) ? handleUnlinkMouseLeave : undefined}
         type="button"
+        variant="ghost"
       >
         <Unlink2 className="tw:h-3 tw:w-3" />
       </Button>
@@ -319,7 +319,6 @@ export function TokenLinkIcon({
 
   const linkButton = (
     <Button
-      variant="ghost"
       aria-label="Link tokens"
       className={`tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-foreground/60 tw:hover:text-foreground' : 'tw:text-foreground/20 tw:cursor-default'}`}
       data-testid="token-link-btn"
@@ -329,6 +328,7 @@ export function TokenLinkIcon({
       onMouseEnter={isActive ? handleLinkMouseEnter : undefined}
       onMouseLeave={isActive ? handleLinkMouseLeave : undefined}
       type="button"
+      variant="ghost"
     >
       <Link2 className="tw:h-3 tw:w-3" />
     </Button>
diff --git a/src/components/controls/EditPhraseControls.tsx b/src/components/controls/EditPhraseControls.tsx
index 0152c8fc..b432e00c 100644
--- a/src/components/controls/EditPhraseControls.tsx
+++ b/src/components/controls/EditPhraseControls.tsx
@@ -1,8 +1,8 @@
 /** @file Done/Cancel controls shown in the confirm bar while editing a phrase. */
 import { Button } from 'platform-bible-react';
 import type { Dispatch, SetStateAction } from 'react';
-import { usePhraseLinkByIdMap } from '../AnalysisStore';
 import type { PhraseMode } from '../../types/phrase-mode';
+import { usePhraseLinkByIdMap } from '../AnalysisStore';
 
 /** Props for {@link EditPhraseControls}. */
 type EditPhraseControlsProps = Readonly<{
@@ -36,20 +36,20 @@ export default function EditPhraseControls({ phraseMode, setPhraseMode }: EditPh
     <div className="tw:confirm-controls" data-testid="edit-phrase-controls">
       <span>Editing Phrase</span>
       <Button
-        size="sm"
         data-testid="done-edit-btn"
         disabled={liveTokenCount < 2}
         onClick={() => setPhraseMode({ kind: 'view' })}
+        size="sm"
         type="button"
       >
         Done
       </Button>
       <Button
-        variant="secondary"
-        size="sm"
         data-testid="cancel-phrase-btn"
         onClick={() => setPhraseMode({ ...phraseMode, revert: true })}
+        size="sm"
         type="button"
+        variant="secondary"
       >
         Cancel
       </Button>
diff --git a/src/components/modals/ProjectMetadataModal.tsx b/src/components/modals/ProjectMetadataModal.tsx
index 0d1354bc..df43b2e3 100644
--- a/src/components/modals/ProjectMetadataModal.tsx
+++ b/src/components/modals/ProjectMetadataModal.tsx
@@ -3,8 +3,8 @@ import { useLocalizedStrings } from '@papi/frontend/react';
 import { Trash2 } from 'lucide-react';
 import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useCallback, useMemo, useState } from 'react';
-import { parseLanguageTags } from '../../utils/language-tags';
 import useSubmitGuard from '../../hooks/useSubmitGuard';
+import { parseLanguageTags } from '../../utils/language-tags';
 import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link ProjectMetadataModal}. */
diff --git a/src/components/modals/UnlinkPhraseConfirm.tsx b/src/components/modals/UnlinkPhraseConfirm.tsx
index 16236fe5..0bae3ff9 100644
--- a/src/components/modals/UnlinkPhraseConfirm.tsx
+++ b/src/components/modals/UnlinkPhraseConfirm.tsx
@@ -1,8 +1,8 @@
 /** @file Confirmation controls shown in the confirm bar for unlinking (deleting) a phrase. */
 import { Button } from 'platform-bible-react';
 import type { Dispatch, SetStateAction } from 'react';
-import { usePhraseDispatch } from '../AnalysisStore';
 import type { PhraseMode } from '../../types/phrase-mode';
+import { usePhraseDispatch } from '../AnalysisStore';
 
 /** Props for {@link UnlinkPhraseConfirm}. */
 type UnlinkPhraseConfirmProps = Readonly<{
@@ -44,20 +44,20 @@ export default function UnlinkPhraseConfirm({ phraseId, setPhraseMode }: UnlinkP
     <div className="tw:confirm-controls" data-testid="unlink-confirm">
       <span>Unlink this phrase?</span>
       <Button
-        variant="destructive"
-        size="sm"
         data-testid="unlink-confirm-yes"
         onClick={handleConfirm}
+        size="sm"
         type="button"
+        variant="destructive"
       >
         Unlink
       </Button>
       <Button
-        variant="secondary"
-        size="sm"
         data-testid="unlink-confirm-cancel"
         onClick={handleCancel}
+        size="sm"
         type="button"
+        variant="secondary"
       >
         Cancel
       </Button>

From e82324d0d6e2ab32f95a98e8232219bf69aea37b Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 27 Jul 2026 14:15:38 -0400
Subject: [PATCH 4/8] Fix oversized icons after Button migration

Icons inside migrated Button components were losing their h-*/w-* sizing
to buttonVariants' `[&_svg:not([class*=size-])]:size-4` rule, which wins
on specificity. Switching to the size-* shorthand opts them out of that
guard.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/PhraseBox.tsx        | 2 +-
 src/components/PhraseStripParts.tsx | 2 +-
 src/components/SegmentListView.tsx  | 4 ++--
 src/components/TokenLinkIcon.tsx    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/PhraseBox.tsx b/src/components/PhraseBox.tsx
index a8b5bbf9..c098ba5f 100644
--- a/src/components/PhraseBox.tsx
+++ b/src/components/PhraseBox.tsx
@@ -372,7 +372,7 @@ export function PhraseBox({
               type="button"
               variant="ghost"
             >
-              <Trash2 className="tw:h-3 tw:w-3" />
+              <Trash2 className="tw:size-3" />
             </Button>
           </span>
         )}
diff --git a/src/components/PhraseStripParts.tsx b/src/components/PhraseStripParts.tsx
index c0d3e4af..c3032a2d 100644
--- a/src/components/PhraseStripParts.tsx
+++ b/src/components/PhraseStripParts.tsx
@@ -163,7 +163,7 @@ function BoundaryControl({
           label={boundaryMergeLabel}
           title={altHeld ? boundaryMergeLabel : boundaryMergeAltHint}
           testId="boundary-merge-btn"
-          icon={<Merge className="tw:h-3 tw:w-3" />}
+          icon={<Merge className="tw:size-3" />}
           action={() => dispatch.merge(secondStart)}
         />
       </span>
diff --git a/src/components/SegmentListView.tsx b/src/components/SegmentListView.tsx
index e3e33d0b..0aaba628 100644
--- a/src/components/SegmentListView.tsx
+++ b/src/components/SegmentListView.tsx
@@ -82,7 +82,7 @@ function MergeRowButton({ segment }: MergeRowButtonProps) {
                 the Y-join points along this view's vertical merge axis (the lower row folds up into
                 the one above), unlike the horizontal continuous-strip merge. */}
             <span className="tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:bg-muted tw:p-1 tw:text-muted-foreground tw:group-hover/merge:bg-accent tw:group-hover/merge:text-accent-foreground">
-              <Merge className="tw:h-3 tw:w-3 tw:rotate-90" />
+              <Merge className="tw:size-3 tw:rotate-90" />
             </span>
           </Button>
         </TooltipTrigger>
@@ -386,7 +386,7 @@ export default function SegmentListView({
             type="button"
             variant="ghost"
           >
-            <LocateFixed className="tw:h-4 tw:w-4" />
+            <LocateFixed className="tw:size-4" />
           </Button>
         </div>
       )}
diff --git a/src/components/TokenLinkIcon.tsx b/src/components/TokenLinkIcon.tsx
index dfbe3477..ed3a9bce 100644
--- a/src/components/TokenLinkIcon.tsx
+++ b/src/components/TokenLinkIcon.tsx
@@ -261,7 +261,7 @@ export function TokenLinkIcon({
         type="button"
         variant="ghost"
       >
-        <Unlink2 className="tw:h-3 tw:w-3" />
+        <Unlink2 className="tw:size-3" />
       </Button>
     );
   }
@@ -330,7 +330,7 @@ export function TokenLinkIcon({
       type="button"
       variant="ghost"
     >
-      <Link2 className="tw:h-3 tw:w-3" />
+      <Link2 className="tw:size-3" />
     </Button>
   );
 

From 8e3d6ff827941d21f8c19f05b123cbe77aaffcbd Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 27 Jul 2026 14:44:46 -0400
Subject: [PATCH 5/8] Guard against icon-sizing regressions and fix remaining
 oversized icons

The Button mock now throws if a descendant SVG uses h-*/w-* without
size-, since buttonVariants silently overrides that sizing in
production and jsdom can't reproduce the visual regression otherwise.
Turning that check on caught three more instances the review's site
list missed (ArcOverlay's Link2Off, TokenChip's X and Plus) plus the
pre-existing ViewOptionsDropdown Settings icon; all four are fixed the
same way as the earlier batch. AGENTS.md documents the size-* rule.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 AGENTS.md                                     |  2 +
 __mocks__/platform-bible-react.tsx            | 38 +++++++++++++++++--
 src/components/ArcOverlay.tsx                 |  2 +-
 src/components/TokenChip.tsx                  |  4 +-
 .../controls/ViewOptionsDropdown.tsx          |  2 +-
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 88dff395..318d1119 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -71,6 +71,8 @@ The WebView root component is assigned to `globalThis.webViewComponent` (not exp
 
 Prefer Platform.Bible's `platform-bible-react` components (`Button`, `Input`, `Textarea`, `Label`, `Switch`, `RadioGroup`, `Popover`, `Tooltip`, etc.) over hand-rolled raw HTML (`<button>`, `<input>`, `<textarea>`, `<label>`, custom dropdowns) wherever an equivalent exists — this keeps the UI visually and behaviorally consistent with the host app and gives us theming and accessibility for free. Reserve raw elements for cases where the platform component can't preserve behavior the extension depends on (e.g. `field-sizing: content` gloss inputs); when you do, add a comment explaining why. When a raw element is replaced by a platform component in tests, extend `__mocks__/platform-bible-react.tsx` to stub the newly-used component.
 
+Size icons inside a `Button` with `size-*` (e.g. `tw:size-3`), never `h-*`/`w-*` — `buttonVariants` forces any child SVG lacking a `size-` class to `size-4`, silently overriding `h-*`/`w-*`.
+
 ### Styling
 
 All UI uses Tailwind CSS (via `src/tailwind.css`). Every Tailwind class is prefixed `tw:` to avoid collisions with Platform.Bible's own styles (configured in `tailwind.config.ts`). For modifier variants the prefix comes first: `tw:hover:px-3`, not `hover:tw-px-3`.
diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index 985a6f22..d692a84d 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -248,12 +248,41 @@ export function ScrollGroupSelector({
   );
 }
 
+/**
+ * Throws if a `Button`-descendant SVG uses `h-*`/`w-*` without `size-` — `buttonVariants` silently
+ * overrides that sizing in production (AGENTS.md § Components). jsdom can't reproduce the visual
+ * regression, so this fails loudly instead of letting it pass as a green test.
+ *
+ * @param node - A `Button` child (or subtree) to check.
+ */
+function assertNoOversizedIconClassName(node: ReactNode): void {
+  if (Array.isArray(node)) {
+    node.forEach(assertNoOversizedIconClassName);
+    return;
+  }
+  if (!isValidElement(node)) return;
+  const { className, children } = node.props as { className?: unknown; children?: ReactNode };
+  if (
+    typeof className === 'string' &&
+    /\btw:h-\S+/.test(className) &&
+    /\btw:w-\S+/.test(className) &&
+    !/\bsize-/.test(className)
+  ) {
+    throw new Error(
+      `Icon className "${className}" uses tw:h-*/tw:w-* instead of tw:size-* inside a Button — ` +
+        'the platform Button forces child SVG size unless the class contains "size-" (see AGENTS.md § Components).',
+    );
+  }
+  if (children) assertNoOversizedIconClassName(children);
+}
+
 /**
  * Stub button that passes the attributes the extension relies on through to a native `<button>`
- * element; `variant` and `size` are accepted but ignored (jsdom does not apply styling, so tests
- * assert on behavior/testid/role, not the visual variant). The mouse/keyboard handlers and
- * `tabIndex`/`style` are forwarded so migrated icon buttons keep their hover-preview and
- * focus-skipping behavior under test.
+ * element; `variant` and `size` are accepted but ignored for rendering (jsdom does not apply
+ * styling, so tests assert on behavior/testid/role, not the visual variant). Children still go
+ * through {@link assertNoOversizedIconClassName}, which throws on the one sizing regression this
+ * stub can catch regardless of variant/size. The mouse/keyboard handlers and `tabIndex`/`style` are
+ * forwarded so migrated icon buttons keep their hover-preview and focus-skipping behavior under test.
  *
  * @param props - Component props.
  * @param props.children - Button content.
@@ -326,6 +355,7 @@ export const Button = forwardRef<
   },
   ref,
 ) {
+  assertNoOversizedIconClassName(children);
   return (
     <button
       ref={ref}
diff --git a/src/components/ArcOverlay.tsx b/src/components/ArcOverlay.tsx
index b8765e74..1308d6d6 100644
--- a/src/components/ArcOverlay.tsx
+++ b/src/components/ArcOverlay.tsx
@@ -354,7 +354,7 @@ export function ArcOverlay({
                   else handleReshapeHoverLeave();
                 }}
               >
-                <Link2Off className="tw:h-2.5 tw:w-2.5" />
+                <Link2Off className="tw:size-2.5" />
               </Button>
             );
           })}
diff --git a/src/components/TokenChip.tsx b/src/components/TokenChip.tsx
index 75844ddf..f416b643 100644
--- a/src/components/TokenChip.tsx
+++ b/src/components/TokenChip.tsx
@@ -367,7 +367,7 @@ export function TokenChip({
           onMouseEnter={() => setIsRemoveHovered(true)}
           onMouseLeave={() => setIsRemoveHovered(false)}
         >
-          <X className="tw:h-2.5 tw:w-2.5" />
+          <X className="tw:size-2.5" />
         </Button>
       )}
       <label
@@ -507,7 +507,7 @@ export function TokenChip({
               // Suppress the mouse-down focus shift so clicking the button never blurs the input.
               onMouseDown={(e) => e.preventDefault()}
             >
-              <Plus className="tw:h-2.5 tw:w-2.5" />
+              <Plus className="tw:size-2.5" />
             </Button>
           )}
         </span>
diff --git a/src/components/controls/ViewOptionsDropdown.tsx b/src/components/controls/ViewOptionsDropdown.tsx
index 85c1956f..6a542872 100644
--- a/src/components/controls/ViewOptionsDropdown.tsx
+++ b/src/components/controls/ViewOptionsDropdown.tsx
@@ -182,7 +182,7 @@ export default function ViewOptionsDropdown({
         variant="ghost"
         onClick={() => setOpen((v) => !v)}
       >
-        <Settings className="tw:h-4 tw:w-4" />
+        <Settings className="tw:size-4" />
       </Button>
 
       {open &&

From f02469872263977f4a0c397649d7708d0acc7b11 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 27 Jul 2026 15:12:02 -0400
Subject: [PATCH 6/8] Stop the boundary strip reflowing when Alt toggles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BoundaryControl unmounted the whole split-marker row for intra-segment
slots whenever the marker wasn't shown (Alt up, or the not-mid-phrase
guard), so those rows collapsed to zero height and remounted at
min-h-4 purely from Alt going up/down — growing the strip unevenly,
since rows with a live boundary never move (their merge button's
wrapper reserves that height permanently). The wrapper now always
renders; only the marker inside it is conditional, matching the
link-icon row's existing mount-and-fade pattern.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/PhraseStripParts.tsx | 50 ++++++++++++++++-------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/PhraseStripParts.tsx b/src/components/PhraseStripParts.tsx
index c3032a2d..202d2075 100644
--- a/src/components/PhraseStripParts.tsx
+++ b/src/components/PhraseStripParts.tsx
@@ -100,10 +100,10 @@ type BoundaryControlProps = Readonly<{
  *   segment at the resolved punctuation-travel anchor). `Split` and `Merge` are a mirrored lucide
  *   pair, so the two operations read as one system yet stay distinct at icon size.
  *
- * Returns `undefined` (leaving the row blank) for slots where no edit applies: leading/trailing
- * slots (a leading slot sits on an existing segment start, where a split would be a no-op),
- * intra-segment slots while Alt is up, and intra-segment slots where the split is suppressed by the
- * not-mid-phrase UI guard.
+ * Returns `undefined` only where no boundary edit can ever apply: leading/trailing slots and while
+ * a phrase mode is active. An intra-segment slot always renders its reserved-height wrapper — even
+ * without a visible marker — so the strip doesn't reflow when Alt or the not-mid-phrase guard
+ * toggles.
  *
  * The not-mid-phrase rule: no split marker renders at a boundary that would cut a phrase (including
  * the gap between two fragments of a discontiguous phrase), and an Alt+click there is a silent
@@ -120,7 +120,8 @@ type BoundaryControlProps = Readonly<{
  * @param props.prevToken - Last word token before the slot.
  * @param props.nextToken - First word token after the slot (the word boundary).
  * @param props.punctuation - Gap punctuation between the two words, in document order.
- * @returns The merge button or the split marker, or `undefined` when no edit applies at this slot.
+ * @returns The merge button, split marker, empty wrapper, or `undefined` when no boundary slot
+ *   exists here.
  */
 function BoundaryControl({
   prevSegmentId,
@@ -172,28 +173,31 @@ function BoundaryControl({
 
   // Split stays Alt-gated: the marker only appears while Alt is held. The not-mid-phrase UI guard
   // additionally suppresses it at a boundary that would cut a phrase (the absent marker is the
-  // explanation; an Alt+click there is a silent no-op).
+  // explanation; an Alt+click there is a silent no-op). The wrapper itself always renders, so Alt
+  // toggling doesn't unmount/remount the row and grow the strip unevenly (rows with a live boundary
+  // never move, since the merge button's wrapper reserves that height permanently).
   const splittable = altHeld && !straddledBoundaryRefs.has(nextTokenRef);
-  if (!splittable) return undefined;
 
   return (
     <span className="tw:inline-flex tw:min-h-4 tw:items-center">
-      <SplitMarker
-        label={boundarySplitLabel}
-        // A split on a former boundary dispatches the original removed default start (which may be a
-        // leading punctuation token no word-anchored slot could name), so the restore cancels the
-        // removal exactly and the delta can normalize back to the default segmentation. Otherwise
-        // the anchor comes from the punctuation-travel rule so leading-quote punctuation lands on
-        // the following segment.
-        onSplit={() => {
-          /* v8 ignore next -- an intra-segment split slot always resolves its segment's baseline */
-          const baselineText = segmentById.get(nextSegmentId)?.baselineText ?? '';
-          const splitRef =
-            formerBoundaries.get(nextTokenRef) ??
-            resolveSplitAnchor(prevToken, nextToken, punctuation, baselineText);
-          dispatch.split(splitRef);
-        }}
-      />
+      {splittable && (
+        <SplitMarker
+          label={boundarySplitLabel}
+          // A split on a former boundary dispatches the original removed default start (which may be a
+          // leading punctuation token no word-anchored slot could name), so the restore cancels the
+          // removal exactly and the delta can normalize back to the default segmentation. Otherwise
+          // the anchor comes from the punctuation-travel rule so leading-quote punctuation lands on
+          // the following segment.
+          onSplit={() => {
+            /* v8 ignore next -- an intra-segment split slot always resolves its segment's baseline */
+            const baselineText = segmentById.get(nextSegmentId)?.baselineText ?? '';
+            const splitRef =
+              formerBoundaries.get(nextTokenRef) ??
+              resolveSplitAnchor(prevToken, nextToken, punctuation, baselineText);
+            dispatch.split(splitRef);
+          }}
+        />
+      )}
     </span>
   );
 }

From 8fa84e02db9e957ccc168549e8d5aa7a7502285b Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 27 Jul 2026 15:26:27 -0400
Subject: [PATCH 7/8] Extend icon-sizing guard to catch the numeric size= prop

assertNoOversizedIconClassName only recognized the h-*/w-*-without-
size- className pattern, missing icons sized via lucide's numeric
size prop instead of a Tailwind class -- but buttonVariants overrides
that the same way, since SVG width/height attributes lose to any
matching CSS rule. Extended the guard to also throw on a numeric size
prop without a size- class, which caught the only two such instances
in src: ProjectMetadataModal's delete Trash2 (size={13}) and
SelectInterlinearProjectModal's info Info icon (size={15}). Both
predate this PR. Fixed with tw:size-[13px]/tw:size-[15px] to keep
their exact original dimensions.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 __mocks__/platform-bible-react.tsx            | 22 ++++++++++++++-----
 .../modals/ProjectMetadataModal.tsx           |  2 +-
 .../modals/SelectInterlinearProjectModal.tsx  |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index d692a84d..d672426e 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -249,9 +249,10 @@ export function ScrollGroupSelector({
 }
 
 /**
- * Throws if a `Button`-descendant SVG uses `h-*`/`w-*` without `size-` — `buttonVariants` silently
- * overrides that sizing in production (AGENTS.md § Components). jsdom can't reproduce the visual
- * regression, so this fails loudly instead of letting it pass as a green test.
+ * Throws if a `Button`-descendant SVG loses its size to `buttonVariants`: an `h-*`/`w-*` className
+ * without `size-`, or a numeric `size` prop without a `size-` className. Production silently
+ * overrides both (AGENTS.md § Components); jsdom can't reproduce the visual regression, so this
+ * fails loudly instead of letting it pass as a green test.
  *
  * @param node - A `Button` child (or subtree) to check.
  */
@@ -261,18 +262,29 @@ function assertNoOversizedIconClassName(node: ReactNode): void {
     return;
   }
   if (!isValidElement(node)) return;
-  const { className, children } = node.props as { className?: unknown; children?: ReactNode };
+  const { className, size, children } = node.props as {
+    className?: unknown;
+    size?: unknown;
+    children?: ReactNode;
+  };
+  const hasSizeClass = typeof className === 'string' && /\bsize-/.test(className);
   if (
     typeof className === 'string' &&
     /\btw:h-\S+/.test(className) &&
     /\btw:w-\S+/.test(className) &&
-    !/\bsize-/.test(className)
+    !hasSizeClass
   ) {
     throw new Error(
       `Icon className "${className}" uses tw:h-*/tw:w-* instead of tw:size-* inside a Button — ` +
         'the platform Button forces child SVG size unless the class contains "size-" (see AGENTS.md § Components).',
     );
   }
+  if (typeof size === 'number' && !hasSizeClass) {
+    throw new Error(
+      `Icon has a numeric size={${size}} prop instead of a tw:size-* className inside a Button — ` +
+        'the platform Button forces child SVG size unless the class contains "size-" (see AGENTS.md § Components).',
+    );
+  }
   if (children) assertNoOversizedIconClassName(children);
 }
 
diff --git a/src/components/modals/ProjectMetadataModal.tsx b/src/components/modals/ProjectMetadataModal.tsx
index df43b2e3..8117f2fd 100644
--- a/src/components/modals/ProjectMetadataModal.tsx
+++ b/src/components/modals/ProjectMetadataModal.tsx
@@ -285,7 +285,7 @@ export function ProjectMetadataModal({
             onClick={() => setConfirmingDelete(true)}
             disabled={isSubmitting}
           >
-            <Trash2 size={13} className="tw:mr-1" />
+            <Trash2 className="tw:mr-1 tw:size-[13px]" />
             {localizedStrings['%interlinearizer_modal_metadata_delete%']}
           </Button>
           <div className="tw:flex tw:gap-2">
diff --git a/src/components/modals/SelectInterlinearProjectModal.tsx b/src/components/modals/SelectInterlinearProjectModal.tsx
index b25b7ed3..d3bb642e 100644
--- a/src/components/modals/SelectInterlinearProjectModal.tsx
+++ b/src/components/modals/SelectInterlinearProjectModal.tsx
@@ -159,7 +159,7 @@ export function SelectInterlinearProjectModal({
                   className="tw:shrink-0"
                   onClick={() => onViewInfo(project)}
                 >
-                  <Info size={15} />
+                  <Info className="tw:size-[15px]" />
                 </Button>
               </li>
             );

From 4cde5ce9e4ded2e67596c50270bf289aaef4346f Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 27 Jul 2026 15:41:26 -0400
Subject: [PATCH 8/8] Widen icon-sizing guard to single-dimension h-*/w-* usage

The className check required both tw:h-* and tw:w-* before throwing,
but buttonVariants overrides an SVG's size the same way whether one
or both dimensions are set -- so a hypothetical single-dimension
regression (e.g. tw:h-3 alone) would have slipped through undetected.
Changed the check to OR. All 1578 tests still pass: every icon site
in this codebase already pairs h-*/w-* together, so nothing currently
relies on the narrower behavior.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 __mocks__/platform-bible-react.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index d672426e..0966e894 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -249,10 +249,10 @@ export function ScrollGroupSelector({
 }
 
 /**
- * Throws if a `Button`-descendant SVG loses its size to `buttonVariants`: an `h-*`/`w-*` className
- * without `size-`, or a numeric `size` prop without a `size-` className. Production silently
- * overrides both (AGENTS.md § Components); jsdom can't reproduce the visual regression, so this
- * fails loudly instead of letting it pass as a green test.
+ * Throws if a `Button`-descendant SVG loses its size to `buttonVariants`: an `h-*` or `w-*`
+ * className without `size-`, or a numeric `size` prop without a `size-` className. Production
+ * silently overrides all of these (AGENTS.md § Components); jsdom can't reproduce the visual
+ * regression, so this fails loudly instead of letting it pass as a green test.
  *
  * @param node - A `Button` child (or subtree) to check.
  */
@@ -270,8 +270,7 @@ function assertNoOversizedIconClassName(node: ReactNode): void {
   const hasSizeClass = typeof className === 'string' && /\bsize-/.test(className);
   if (
     typeof className === 'string' &&
-    /\btw:h-\S+/.test(className) &&
-    /\btw:w-\S+/.test(className) &&
+    (/\btw:h-\S+/.test(className) || /\btw:w-\S+/.test(className)) &&
     !hasSizeClass
   ) {
     throw new Error(