chore(rebase): post-rebase fixups onto new ai/main

Mechanical follow-ups after rebasing this PR onto the rebased
ai/feature/markers-checklist/followup-tj-review-rolf-05-11-2026 (which
sits on top of new ai/main with main's React 19 / Tailwind 4 / new
shadcn baseline + the prefix sweep already applied).

- Apply Tailwind 4 prefix sweep (tw- → tw:) to the 5 files this PR
  modified that still used the old tw- prefix:
  - components/checklist.component.tsx: 80 conversions
  - components/checklist.component.test.tsx: 12 conversions
  - checklist.web-view.tsx: 6 conversions
  - project-selector.component.tsx: 6 conversions
  - scope-selector.component.tsx: 4 conversions
  Total: 108 replacements across 5 files.
- Rebuild lib/platform-bible-react/dist/* to reflect the rebased
  source state.

Verified: npm run -w lib/platform-bible-react build exit 0;
npm run build:types exit 0; npm run typecheck exit 0 (modulo a
pre-existing buildInfo.json missing-module error, which is a
generated file the main-process build creates — CI's full build
generates it).

Author: rolfheij-sil

extensions/src/platform-scripture/src/checklist.web-view.tsx

@@ -820,7 +820,7 @@ function ChecklistContent({
           openTabs={comparativeOpenTabs}
           selection={comparativeSelection}
           onChangeSelection={handleComparativeTextsChange}
-          buttonClassName="tw-h-8 tw-min-w-32 tw-font-normal"
+          buttonClassName="tw:h-8 tw:min-w-32 tw:font-normal"
           // UX-2 finding #6: show a placeholder when no comparatives are
           // selected. The tooltip on the trigger carries the full hint on hover.
           buttonPlaceholder={
@@ -967,7 +967,7 @@ function ChecklistContent({
           onChangeSelection={(next: { projectId: string }) =>
             updateWebViewDefinition({ projectId: next.projectId })
           }
-          buttonClassName="tw-h-8 tw-min-w-32 tw-font-normal"
+          buttonClassName="tw:h-8 tw:min-w-32 tw:font-normal"
           // UX-2 finding #5: drop the truncating "Select primary S..." placeholder.
           // When a project is selected the short name fills the trigger; when none
           // is selected the trigger stays empty and the aria-label / tooltip carries

extensions/src/platform-scripture/src/components/checklist.component.test.tsx

@@ -84,18 +84,18 @@ describe('ChecklistTool — character-style rendering (UX-2 #19)', () => {
     // RTL's getByText normalizes whitespace by default, so match the trimmed text.
     const planted = screen.getByText('planted.');
     expect(planted.className).not.toMatch(/usfm_/);
-    // The neutral span should still carry the tw-text-foreground class (not a usfm_* class).
-    expect(planted.className).toContain('tw-text-foreground');
+    // The neutral span should still carry the tw:text-foreground class (not a usfm_* class).
+    expect(planted.className).toContain('tw:text-foreground');
   });
 });
 
 describe('ChecklistTool — match-row coloring (UX-2 #15)', () => {
-  it('applies a subtle tw-bg-primary/20 tint to the row <tr> when row.isMatch is true', () => {
+  it('applies a subtle tw:bg-primary/20 tint to the row <tr> when row.isMatch is true', () => {
     // The first fix attempt (3b8b99b8c2) put the bg on inner cell containers and tried to bleed
-    // it past TableCell's `tw-p-4` with negative margins — visually the bg only covered the
+    // it past TableCell's `tw:p-4` with negative margins — visually the bg only covered the
     // text area, not the full cell rectangle (Rolf-reported). This iteration applies the bg
     // class to the `<tr>` via DataTable's `getRowClassName` prop, so every `<td>` inherits the
-    // tint via the row-level paint. tw-bg-primary/20 (down from /30) reads as a subtle hint
+    // tint via the row-level paint. tw:bg-primary/20 (down from /30) reads as a subtle hint
     // without competing with content. No text-color override — inner spans keep their default
     // colors so contrast stays readable in both light and dark modes.
     const matchRowData: ChecklistData = {
@@ -119,15 +119,15 @@ describe('ChecklistTool — match-row coloring (UX-2 #15)', () => {
     const refCell = screen.getByTestId('checklist-reference-cell');
     const row = refCell.closest('tr');
     expect(row).not.toBeNull();
-    expect(row?.className).toContain('tw-bg-primary/20');
+    expect(row?.className).toContain('tw:bg-primary/20');
     // The inner cell content should NOT carry the bg (single source of truth — the row).
-    expect(refCell.className).not.toContain('tw-bg-primary');
+    expect(refCell.className).not.toContain('tw:bg-primary');
     // And the obsolete text-color override from WP2 should be absent everywhere.
-    expect(row?.className).not.toContain('tw-text-primary-foreground');
-    expect(refCell.className).not.toContain('tw-text-primary-foreground');
+    expect(row?.className).not.toContain('tw:text-primary-foreground');
+    expect(refCell.className).not.toContain('tw:text-primary-foreground');
   });
 
-  it('does NOT apply tw-bg-primary/20 to the row <tr> when row.isMatch is false', () => {
+  it('does NOT apply tw:bg-primary/20 to the row <tr> when row.isMatch is false', () => {
     render(
       <ChecklistTool
         data={baseData}
@@ -143,8 +143,8 @@ describe('ChecklistTool — match-row coloring (UX-2 #15)', () => {
     const refCell = screen.getByTestId('checklist-reference-cell');
     const row = refCell.closest('tr');
     expect(row).not.toBeNull();
-    expect(row?.className).not.toContain('tw-bg-primary');
-    expect(refCell.className).not.toContain('tw-bg-primary');
+    expect(row?.className).not.toContain('tw:bg-primary');
+    expect(refCell.className).not.toContain('tw:bg-primary');
   });
 });
 

extensions/src/platform-scripture/src/components/checklist.component.tsx

@@ -87,10 +87,10 @@ function getMarkerIndentStyle(marker: string): CSSProperties {
 // primary-color background tint so users can quickly scan past them. The tint is applied to the
 // `<tr>` itself via DataTable's `getRowClassName` prop — this paints the bg behind every `<td>`
 // in the row, so the colored region truly fills each cell from edge to edge. (The earlier
-// per-cell approach with `-tw-m-4 tw-px-6 tw-py-6` only colored the content area, not the full
+// per-cell approach with `tw:-m-4 tw:px-6 tw:py-6` only colored the content area, not the full
 // cell rectangle — see commit 3b8b99b8c2.) The 30% opacity proved too loud; 20% reads as a hint
 // without competing with the content.
-const MATCH_ROW_BG_CLASS = 'tw-bg-primary/20';
+const MATCH_ROW_BG_CLASS = 'tw:bg-primary/20';
 
 // ---------- Small presentational sub-components ----------
 
@@ -193,13 +193,13 @@ function ParagraphRow({
                 <button
                   key={itemKey}
                   type="button"
-                  className="tw-cursor-pointer tw-bg-transparent tw-p-0 tw-text-primary hover:tw-underline focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-ring"
+                  className="tw:cursor-pointer tw:bg-transparent tw:p-0 tw:text-primary tw:hover:underline tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-ring"
                   onClick={() => onGotoVerseClick(verseRef)}
                   aria-label={gotoAriaTemplate.replace('{ref}', verseRef)}
                   title={gotoAriaTemplate.replace('{ref}', verseRef)}
                   data-testid="checklist-verse-goto"
                 >
-                  <sup className="tw-font-semibold">{item.verseNumber}</sup>
+                  <sup className="tw:font-semibold">{item.verseNumber}</sup>
                 </button>
               );
             }
@@ -282,7 +282,7 @@ function CellContent({
   // character-style rules defined in `checklist-usfm-styles.scss` (UX-2 finding #19). Without
   // it, the character-style rules don't match and items would render unstyled.
   return (
-    <div className="checklist-formatted-font tw-flex tw-flex-col tw-gap-1" dir={dir}>
+    <div className="checklist-formatted-font tw:flex tw:flex-col tw:gap-1" dir={dir}>
       {cell.paragraphs.map((paragraph, paragraphIndex) => (
         <ParagraphRow
           // Paragraph markers may repeat within a single cell (e.g. two consecutive `\p`s), so the
@@ -333,7 +333,7 @@ function ColumnHeaderWithTooltip({
            * table-fixed layout honors them.
            */}
           <div
-            className="tw-flex tw-w-full tw-cursor-default tw-items-center tw-justify-start tw-px-2 tw-py-1 tw-font-semibold hover:tw-bg-accent/50"
+            className="tw:flex tw:w-full tw:cursor-default tw:items-center tw:justify-start tw:px-2 tw:py-1 tw:font-semibold tw:hover:bg-accent/50"
             aria-label={ariaLabel}
             data-testid="checklist-column-header"
           >
@@ -440,7 +440,7 @@ export function ChecklistTool({
       // eslint-disable-next-line react/no-unstable-nested-components
       header: () => (
         <span
-          className="tw-block tw-px-2 tw-py-1 tw-font-semibold"
+          className="tw:block tw:px-2 tw:py-1 tw:font-semibold"
           data-testid="checklist-column-headers"
         >
           {/* The Ref column header is intentionally unlabeled in the spec — it's axis metadata
@@ -460,7 +460,7 @@ export function ChecklistTool({
         // (applied via DataTable's `getRowClassName` prop below — see `MATCH_ROW_BG_CLASS`).
         // The row-level bg paints behind every `<td>` in the row, so the colored region fills
         // each cell edge-to-edge. Cell content here keeps its default padding/typography.
-        const containerClass = 'tw-block tw-px-2 tw-py-2';
+        const containerClass = 'tw:block tw:px-2 tw:py-2';
         // Sebastian PR #2219 #3137366113: "Make the scripture reference in the first column a
         // link button with the tooltip 'Go to {scrRef}' instead of the goto button". When a
         // goto callback is provided, render the ref as a `LinkedScrRefButton`; otherwise fall
@@ -483,7 +483,7 @@ export function ChecklistTool({
         }
         return (
           <span
-            className={`tw-font-mono tw-text-sm ${containerClass}`.trim()}
+            className={`tw:font-mono tw:text-sm ${containerClass}`.trim()}
             data-testid="checklist-reference-cell"
           >
             {ref}
@@ -524,7 +524,7 @@ export function ChecklistTool({
             // (see `MATCH_ROW_BG_CLASS` and the `getRowClassName` prop on DataTable). The row-
             // level bg paints behind every `<td>`, so cell content keeps its default classes.
             return (
-              <div className="tw-flex tw-flex-col tw-gap-1 tw-px-2 tw-py-2">
+              <div className="tw:flex tw:flex-col tw:gap-1 tw:px-2 tw:py-2">
                 <CellContent
                   cell={cell}
                   showVerseText={showVerseText}
@@ -590,22 +590,22 @@ export function ChecklistTool({
 
   // ----- Render helpers -----
 
-  // TabToolbar's start/end area divs use `tw-items-start`, which top-aligns children — while the
-  // container itself uses `tw-items-center`. The hamburger (a direct container child) is therefore
+  // TabToolbar's start/end area divs use `tw:items-start`, which top-aligns children — while the
+  // container itself uses `tw:items-center`. The hamburger (a direct container child) is therefore
   // vertically centered against the 56px toolbar height, but our selectors / view-menu trigger
   // (children of the area divs) end up top-aligned, creating a visible misalignment. Wrapping each
-  // render in our own `tw-h-full tw-items-center` flex restores horizontal alignment across the
+  // render in our own `tw:h-full tw:items-center` flex restores horizontal alignment across the
   // hamburger + selectors + view-menu trigger without touching the shared TabToolbar component.
   const renderToolbarStart = () => (
-    <div className="tw-flex tw-h-full tw-flex-row tw-items-center tw-gap-1">
+    <div className="tw:flex tw:h-full tw:flex-row tw:items-center tw:gap-1">
       {primaryProjectSelector}
       {comparativeTextsSelector}
       {verseRangeSelector}
     </div>
   );
 
   const renderToolbarEnd = () => (
-    <div className="tw-flex tw-h-full tw-flex-row tw-items-center tw-gap-1">
+    <div className="tw:flex tw:h-full tw:flex-row tw:items-center tw:gap-1">
       {/*
        * UX-2 finding #8: View toggles now live behind a single eye-icon
        * DropdownMenu button. Two checkbox items: Hide matches (disabled when
@@ -622,11 +622,11 @@ export function ChecklistTool({
                   type="button"
                   variant="outline"
                   size="sm"
-                  className="tw-h-8 tw-w-8 tw-p-0"
+                  className="tw:h-8 tw:w-8 tw:p-0"
                   aria-label={getLocalizedString('%markersChecklist_toolbar_view%')}
                   data-testid="checklist-view-menu-trigger"
                 >
-                  <Eye className="tw-h-4 tw-w-4" aria-hidden="true" />
+                  <Eye className="tw:h-4 tw:w-4" aria-hidden="true" />
                 </Button>
               </DropdownMenuTrigger>
             </TooltipTrigger>
@@ -786,7 +786,7 @@ export function ChecklistTool({
        * chrome would host the hamburger; reversing now that the outer chrome
        * is hidden.)
        */}
-      <div className="tw-sticky tw-top-0 tw-z-10 tw-bg-background" data-testid="checklist-toolbar">
+      <div className="tw:sticky tw:top-0 tw:z-10 tw:bg-background" data-testid="checklist-toolbar">
         <TabToolbar
           onSelectProjectMenuItem={onSelectProjectMenuItem ?? (() => undefined)}
           onSelectViewInfoMenuItem={() => undefined}
@@ -799,17 +799,17 @@ export function ChecklistTool({
       {renderBanners()}
 
       {/*
-       * UX-2 finding #11: wrap the table section in `tw-relative tw-z-0` so the sticky
+       * UX-2 finding #11: wrap the table section in `tw:relative tw:z-0` so the sticky
        * <thead>'s internal z-20 (set by shadcn-ui Table with stickyHeader) lives inside
        * a new stacking context here and can never out-stack the toolbar above (which
-       * uses `tw-sticky tw-top-0 tw-z-10`). Without this wrapper the thead's z-20 wins
+       * uses `tw:sticky tw:top-0 tw:z-10`). Without this wrapper the thead's z-20 wins
        * over the toolbar's z-10 and the column headers scroll OVER the toolbar.
        *
        * UX-2 finding #10: enforce equal column widths via Tailwind arbitrary variants
        * applied to the inner <table>:
-       *   - `[&_table]:tw-table-fixed [&_table]:tw-w-full` — switch to fixed layout so
+       *   - `tw:[&_table]:table-fixed tw:[&_table]:w-full` — switch to fixed layout so
        *     columns honor explicit widths on <th> instead of widest-content auto-sizing.
-       *   - `[&_thead_th:first-child]:tw-w-24` — Ref column is a fixed 96px (`w-24`),
+       *   - `tw:[&_thead_th:first-child]:w-24` — Ref column is a fixed 96px (`w-24`),
        *     enough for "GEN 1:1" etc.
        * Under table-fixed, the remaining N project columns (all with implicit
        * `width: auto`) share the remaining horizontal space equally — the browser
@@ -819,7 +819,7 @@ export function ChecklistTool({
       <section
         aria-label={getLocalizedString('%markersChecklist_table_aria%')}
         aria-busy={isLoading}
-        className="tw-relative tw-z-0 tw-m-1 tw-flex-1 tw-overflow-auto tw-rounded-md tw-border [&_table]:tw-table-fixed [&_table]:tw-w-full [&_thead_th:first-child]:tw-w-24"
+        className="tw:relative tw:z-0 tw:m-1 tw:flex-1 tw:overflow-auto tw:rounded-md tw:border tw:[&_table]:table-fixed tw:[&_table]:w-full tw:[&_thead_th:first-child]:w-24"
         data-testid="checklist-data-table"
       >
         <DataTable