cursedbelt 1.0.0 → 2.5.0

package/src/react/components/DataTable/SortHeader.tsx

@@ -2,6 +2,7 @@ import type { Column } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { Tooltip } from '../Tooltip';
+import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget';
 
 /**
  * The full label, one hover away — and it is OURS, not the browser's.
@@ -84,7 +85,7 @@ export function SortHeader<TRow>({
       // computed styles on orch's Fleet tab, 2026-08-12: `th` uppercase,
       // `button` none. Letter-spacing does inherit (0.55px on both), so only
       // the case needs restating.
-      className='-mx-1 -my-2.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-2.5 uppercase transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11'
+      className={`-mx-1 -my-2.5 inline-flex max-w-full items-center gap-1 rounded px-1 py-2.5 uppercase transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
     >
       {/* min-w-0 so the label is what gives way in a narrow track — the sort
           arrow is the affordance and must survive at any width. */}

package/src/react/components/DataTable/{FilterBuilder.tsx → TableFilterBuilder.tsx}

@@ -18,13 +18,13 @@ import {
   VALUELESS_OPS,
 } from './filterQuery';
 
-export interface FilterBuilderColumn {
+export interface TableFilterBuilderColumn {
   key: string;
   label: string;
 }
 
-export interface FilterBuilderProps {
-  columns: FilterBuilderColumn[];
+export interface TableFilterBuilderProps {
+  columns: TableFilterBuilderColumn[];
   value: FilterQuery;
   onChange: (next: FilterQuery) => void;
   className?: string;
@@ -36,7 +36,30 @@ const OP_OPTIONS = (Object.keys(FILTER_OP_LABELS) as FilterOp[]).map((op) => ({
 }));
 
 /**
- * The filter builder — `(A and B) or (C and D)`, and the UX is the hard half.
+ * The TABLE's filter builder — `(A and B) or (C and D)`, and the UX is the hard half.
+ *
+ * ── 🔴 Why the name carries `Table`, 2026-09-13 ─────────────────────────────
+ * It was `FilterBuilder`, and `cursedesk` has a `FilterBuilder` of its own. The
+ * graduation pass that looked at the pair to decide which one should live here
+ * found they are not two copies of one component — they are two different
+ * components wearing one basename, which is the trap that makes the next person
+ * merge them wrongly:
+ *
+ * - **This one is a VIEW filter.** Two levels by construction (groups OR'd,
+ *   conditions AND'd inside one), values are strings, columns are `{key,label}`
+ *   with no type, and it narrows rows already on screen behind a popover on the
+ *   `DataTable` toolbar. Nothing it builds crosses a wire.
+ * - **`cursedesk`'s is a QUERY builder** — an arbitrarily-nested AND/OR/NOT
+ *   tree with per-type operator sets (`between`, `matches`, `in`, `isEmpty`),
+ *   range and set editors, `caseSensitive` per rule and a validator, editing
+ *   the exact `FilterNode` its API consumes so what is built is what the server
+ *   filters and exports by.
+ *
+ * Neither is the other generalised. Collapsing them would mean either giving a
+ * table toolbar a regex field and a three-deep nesting rule, or taking typed
+ * operators away from a filter the server evaluates — so they stay two, and
+ * this one says which it is. See {@link FilterQuery} for the shape it edits;
+ * the name of the thing it is NOT is `cursedesk`'s `ui/workbench/FilterBuilder`.
  *
  * The owner's closing clause is the acceptance test, not a nicety: *"easy enough
  * that I don't give up on trying it."* So every decision here is made against
@@ -60,7 +83,12 @@ const OP_OPTIONS = (Object.keys(FILTER_OP_LABELS) as FilterOp[]).map((op) => ({
  * The trigger carries the live count so the toolbar says how many constraints
  * are on without opening anything (DESIGN.md §2 — one line, state legible on it).
  */
-export function FilterBuilder({ columns, value, onChange, className }: FilterBuilderProps) {
+export function TableFilterBuilder({
+  columns,
+  value,
+  onChange,
+  className,
+}: TableFilterBuilderProps) {
   const [open, setOpen] = useState(false);
   const activeCount = countActiveConditions(value);
   const firstColumn = columns[0]?.key ?? '';

package/src/react/components/DataTable/Toolbar.tsx

@@ -3,9 +3,9 @@ import { Download, Plus, Upload } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { Button } from '../Button';
 import { Cluster, Split } from '../layout';
-import { FilterBuilder } from './FilterBuilder';
 import { SearchBox } from './SearchBox';
 import { SortStack } from './SortStack';
+import { TableFilterBuilder } from './TableFilterBuilder';
 import { TableViewToggle } from './TableViewToggle';
 import { ViewOptionsMenu } from './ViewOptionsMenu';
 
@@ -34,7 +34,7 @@ export interface TableToolbarProps<TRow> {
  * left/centre, actions far right, never a second row.
  *
  * What sits on it, left to right: the search box with its use-time scope control
- * ({@link SearchBox}), the filter builder ({@link FilterBuilder}), the sort stack
+ * ({@link SearchBox}), the filter builder ({@link TableFilterBuilder}), the sort stack
  * ({@link SortStack}), anything the caller adds, then — right-aligned — the
  * rows ⇄ cards toggle, the column menu, and import/export/add.
  *
@@ -88,7 +88,7 @@ export function TableToolbar<TRow>({
           />
         ) : null}
         {enableFilterBuilder && controls ? (
-          <FilterBuilder
+          <TableFilterBuilder
             columns={controls.filterColumns}
             value={controls.filterQuery}
             onChange={controls.setFilterQuery}

package/src/react/components/DataTable/cells/LinkCell.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'react';
 import { ExternalLink } from '../../ExternalLink';
+import { TAP_TARGET_HEIGHT } from '../../../lib/tapTarget';
 
 export interface LinkCellProps {
   href: string;
@@ -24,7 +25,7 @@ export function LinkCell({ href, label }: LinkCellProps): JSX.Element | null {
       url={href}
       {...(label === undefined ? {} : { display: label })}
       stopPropagation
-      className='max-w-[180px] truncate font-sans not-italic pointer-coarse:min-h-11'
+      className={`max-w-[180px] truncate font-sans not-italic ${TAP_TARGET_HEIGHT}`}
     />
   );
 }

package/src/react/components/DataTable/index.ts

@@ -18,7 +18,14 @@ export {
   type DataTableProps,
   nextSortStack,
 } from './DataTable';
-export { FilterBuilder, type FilterBuilderColumn, type FilterBuilderProps } from './FilterBuilder';
+// 🔴 `TableFilterBuilder`, not `FilterBuilder` — see its header. The bare name belonged to
+// two different components in two repos, and a shared basename that is not a shared
+// component is how the next person merges them wrongly.
+export {
+  TableFilterBuilder,
+  type TableFilterBuilderColumn,
+  type TableFilterBuilderProps,
+} from './TableFilterBuilder';
 export {
   activeGroups,
   compareValues,

package/src/react/components/DragHandle.tsx

@@ -3,6 +3,7 @@ import { DragHandleIcon } from '../hooks/DragHandleIcon';
 import { cn } from '../lib/cn';
 import { REVEAL_ON_HOVER } from './revealOnHover';
 import { Tooltip } from './Tooltip';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface DragHandleProps {
   /** Spread from a drag hook's `handleProps` — the pointer/keyboard drag wiring. */
@@ -35,7 +36,7 @@ export function DragHandle({
         {...handleProps}
         aria-label={label}
         className={cn(
-          'flex w-6 shrink-0 items-center justify-center self-stretch text-muted-foreground/60 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+          `flex w-6 shrink-0 items-center justify-center self-stretch text-muted-foreground/60 ${TAP_TARGET}`,
           alwaysVisible ? 'transition' : REVEAL_ON_HOVER,
           className,
         )}

package/src/react/components/EmojiField.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { EmojiPicker } from '../emoji/EmojiPicker';
 import { cn } from '../lib/cn';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface EmojiFieldProps {
   /** The current emoji (a single grapheme), or '' for none. */
@@ -46,7 +47,7 @@ export function EmojiField({
           aria-describedby={ariaDescribedBy}
           aria-label={value ? `Emoji: ${value}` : 'Pick an emoji'}
           className={cn(
-            'inline-flex size-10 items-center justify-center rounded-field border border-field-border bg-field-bg text-xl transition hover:border-field-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-field-ring/30 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+            `inline-flex size-10 items-center justify-center rounded-field border border-field-border bg-field-bg text-xl transition hover:border-field-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-field-ring/30 disabled:cursor-not-allowed disabled:opacity-50 ${TAP_TARGET}`,
             className,
           )}
         >

package/src/react/components/EventTimeline.tsx

@@ -43,8 +43,9 @@ const TONE_MARKER: Record<EventTimelineTone, { icon: ReactNode; className: strin
  * consistently indented body. Subtle dividers separate events; the axis line
  * connects markers so the sequence reads as one story.
  *
- * Not the media `timeline/` surface (`TimelineSurface` — a time-scaled editing
- * canvas); this is the presentational history list.
+ * This is the presentational history list. (It used to need distinguishing from a
+ * time-scaled editing canvas in `react/timeline`; that went with the unreferenced
+ * subpaths on 2026-09-13, so `EventTimeline` is now the only timeline here.)
  */
 export function EventTimeline({ items, className }: EventTimelineProps) {
   return (

package/src/react/components/FileLocation.spec.tsx

@@ -4,7 +4,7 @@ import { FileLocation } from './FileLocation';
 
 afterEach(cleanup);
 
-const PATH = '/Users/me/.aliasManager/aliases.sh';
+const PATH = '/srv/demo-app/.aliasManager/aliases.sh';
 
 describe('FileLocation', () => {
   test('shows the path and the default "Saved in" label', () => {

package/src/react/components/IconButton.tsx

@@ -30,7 +30,7 @@ export interface IconButtonProps extends Omit<ButtonProps, 'size' | 'leftIcon' |
 
 /**
  * Icon-only button: a {@link Button} locked to a square `icon*` size (≥44px touch
- * target on coarse pointers via Button's `pointer-coarse:min-h-11` baseline,
+ * target on coarse pointers via Button's `TAP_TARGET_HEIGHT` baseline,
  * regardless of `size`) with a mandatory `aria-label`. Defaults to the `ghost`
  * variant — the right weight for toolbars/row actions. Slightly larger glyphs
  * (`size-5`) than a text button's, since the icon carries the whole meaning.

package/src/react/components/InfoHint.tsx

@@ -17,6 +17,7 @@ import { type ReactNode, useState } from 'react';
 import { useHasHover } from '../hooks/useHasHover';
 import { cn } from '../lib/cn';
 import { HOVER_HINT_DELAY_MS } from '../lib/hoverIntent';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface InfoHintProps {
   /** The help body. */
@@ -90,10 +91,10 @@ export function InfoHint({
         ref={refs.setReference}
         aria-label={label}
         className={cn(
-          // ≥44px touch target on coarse pointers (same floor as Button/IconButton's
-          // `pointer-coarse:min-h-11`/`min-w-11` — a bare `size-4` icon glyph with no
-          // padding measured 16×16px on mobile, cc/197).
-          'inline-flex items-center justify-center text-muted-foreground hover:text-accent pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+          // ≥44px touch target on coarse pointers (the same `TAP_TARGET` floor
+          // Button/IconButton carry — a bare `size-4` icon glyph with no padding
+          // measured 16×16px on mobile, cc/197).
+          `inline-flex items-center justify-center text-muted-foreground hover:text-accent ${TAP_TARGET}`,
           className,
         )}
         {...getReferenceProps()}

package/src/react/components/InheritBadge.tsx

@@ -135,7 +135,7 @@ export function InheritBadge({
           label={resetLabel}
           disabled={disabled}
           onClick={onReset}
-          // Glyph only is shrunk, never the BOX: Button's `pointer-coarse:min-h-11`
+          // Glyph only is shrunk, never the BOX: Button's `TAP_TARGET_HEIGHT`
           // is what keeps this a real touch target, and forcing a size-5 square
           // would quietly delete that on every phone.
           className={cn('[&_svg]:size-3.5', REVEAL_ON_HOVER)}

package/src/react/components/InlineEditableText.tsx

@@ -5,6 +5,7 @@ import { AutoGrowTextarea } from './AutoGrowTextarea';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
 import { Tooltip } from './Tooltip';
+import { TAP_TARGET_HEIGHT } from '../lib/tapTarget';
 
 export interface InlineEditableTextProps {
   value: string;
@@ -184,7 +185,7 @@ export function InlineEditableText({
           // measuring gate (and any tool that reasons about layout) still sees 24px.
           // `DESIGN.md` §5's footprint is the floor and UX_STANDARDS §0 records that it
           // wins over the band — so the box grows too, and the band stays as the extra.
-          'pointer-coarse:min-h-11',
+          TAP_TARGET_HEIGHT,
           'pointer-coarse:before:absolute pointer-coarse:before:top-[-10px] pointer-coarse:before:bottom-[-10px] pointer-coarse:before:left-[-4px] pointer-coarse:before:right-[-4px] pointer-coarse:before:content-[""]',
           wrap ? 'whitespace-pre-wrap break-words' : 'block w-full truncate',
           !value && 'italic text-muted-foreground',

package/src/react/components/MeterList.tsx

@@ -2,6 +2,7 @@ import type { KeyboardEvent, ReactNode } from 'react';
 import { cn } from '../lib/cn';
 import { Surface } from './Surface';
 import type { StatTileTone } from './StatTile';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
 
 const TONE_DOT: Record<StatTileTone, string> = {
   success: 'bg-success',
@@ -111,7 +112,7 @@ export function MeterList({ items, flat = false, labelWidth = 'default', classNa
                 ) : null}
                 <span className='truncate'>{item.label}</span>
                 {item.actionHint ? (
-                  <span className='text-caption font-medium text-muted-foreground opacity-0 transition-opacity group-hover/meter:opacity-100 group-focus-visible/meter:opacity-100 pointer-coarse:opacity-100'>
+                  <span className={`text-caption font-medium text-muted-foreground opacity-0 transition-opacity group-hover/meter:opacity-100 group-focus-visible/meter:opacity-100 ${TAP_TARGET_ALWAYS}`}>
                     {item.actionHint}
                   </span>
                 ) : null}

package/src/react/components/PathText.tsx

@@ -6,6 +6,7 @@ import { CopyButton } from './CopyButton';
 import { type FileManagerKind, REVEAL_LABEL } from './FileLocation';
 import { IconButton } from './IconButton';
 import { Tooltip } from './Tooltip';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
 
 export interface PathTextProps {
   /** The full path (file path, module id, URL path). Never pre-truncate it. */
@@ -32,8 +33,8 @@ export interface PathTextProps {
    * lives". `PathText` is the INLINE form — a chip inside a fact row, a table cell, a
    * sentence — and it is where most paths in a control plane actually appear. The
    * owner reported the gap from the inline side (station, 2026-08-15): *"I see Repo
-   * /Users/curt/… but I want icons to open finder there and open vscode there because
-   * it is a path"*. That app answered it by hand-rolling a second component; the
+   * ~/… but I want icons to open finder there and open vscode there because it is a
+   * path"*. That app answered it by hand-rolling a second component; the
    * answer belongs on the primitive, so every app's inline paths get the same doors.
    */
   onReveal?: (path: string) => void;
@@ -135,7 +136,7 @@ export function PathText({
           confirmToast={false}
           stopPropagation
           iconSize={12}
-          className='opacity-0 transition-opacity focus-visible:opacity-100 group-hover/path:opacity-100 pointer-coarse:opacity-100'
+          className={`opacity-0 transition-opacity focus-visible:opacity-100 group-hover/path:opacity-100 ${TAP_TARGET_ALWAYS}`}
         />
       )}
     </span>

package/src/react/components/RatingField.tsx

@@ -1,6 +1,7 @@
 import { Star } from 'lucide-react';
 import type { KeyboardEvent } from 'react';
 import { cn } from '../lib/cn';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface RatingFieldProps {
   /** The current rating (0 = unrated). */
@@ -72,7 +73,7 @@ export function RatingField({
               'inline-flex items-center justify-center rounded p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-field-ring/40 disabled:cursor-not-allowed',
               // DESIGN.md §5: a 28px star is a miss on a phone, and the neighbouring
               // star is a different rating.
-              'pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+              TAP_TARGET,
               filled ? 'text-warning' : 'text-muted-foreground hover:text-warning',
             )}
           >

package/src/react/components/SecretInput.tsx

@@ -3,6 +3,7 @@ import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
 import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field';
 import { resolveClass, resolveStyle, type StyleableProps } from '../styling';
 import { IconButton } from './IconButton';
+import { TAP_TARGET, TAP_TARGET_HEIGHT } from '../lib/tapTarget';
 
 // Tiny self-contained icons so the component carries no icon dependency.
 const Eye = () => (
@@ -63,8 +64,7 @@ const Check = () => (
 
 // Token-driven (unit 11) — --muted-foreground/--foreground/--muted already carry
 // light and dark, so the five palette classes and their dark: twins are one set now.
-const BTN_CLASS =
-  'h-auto min-h-0 w-auto inline-flex shrink-0 items-center justify-center rounded p-1 text-muted-foreground transition hover:text-foreground hover:bg-muted pointer-coarse:min-h-11 pointer-coarse:min-w-11';
+const BTN_CLASS = `h-auto min-h-0 w-auto inline-flex shrink-0 items-center justify-center rounded p-1 text-muted-foreground transition hover:text-foreground hover:bg-muted ${TAP_TARGET}`;
 
 export type SecretInputSlot = 'root' | 'input' | 'button';
 
@@ -184,7 +184,7 @@ export const SecretInput = ({
   return (
     <div
       className={resolveClass(
-        `flex items-center gap-0.5 ${CONTROL_HEIGHT_CLASS[size]} pointer-coarse:min-h-11 rounded-field border border-field-border bg-field-bg px-1 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 has-[[aria-invalid=true]]:border-field-error`,
+        `flex items-center gap-0.5 ${CONTROL_HEIGHT_CLASS[size]} ${TAP_TARGET_HEIGHT} rounded-field border border-field-border bg-field-bg px-1 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 has-[[aria-invalid=true]]:border-field-error`,
         classNames?.root ?? className,
         unstyled,
       )}

package/src/react/components/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { cn } from '../lib/cn';
 import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field';
 import { Tooltip } from './Tooltip';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface SegmentOption<T extends string> {
   value: T;
@@ -75,13 +76,12 @@ export function SegmentedControl<T extends string>({
               data-testid={opt['data-testid']}
               className={cn(
                 'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-[calc(var(--radius-md)-0.25rem)] px-3 text-sm font-medium transition-colors',
-                'pointer-coarse:min-h-11',
                 CONTROL_HEIGHT_CLASS[size],
                 'text-muted-foreground hover:text-foreground',
                 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-raised',
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                 'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-muted-foreground',
-                'pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+                TAP_TARGET,
                 capitalize && 'capitalize',
               )}
             >

package/src/react/components/StarRating.spec.tsx

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import { StarRating } from './StarRating';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 afterEach(cleanup);
 
@@ -80,8 +81,7 @@ describe('StarRating — whole steps render real buttons', () => {
     const { getAllByRole } = render(<StarRating value={0} onChange={() => {}} size='sm' />);
     for (const button of getAllByRole('button')) {
       const cls = button.getAttribute('class') ?? '';
-      expect(cls).toContain('pointer-coarse:min-h-11');
-      expect(cls).toContain('pointer-coarse:min-w-11');
+      for (const utility of TAP_TARGET.split(' ')) expect(cls).toContain(utility);
     }
   });
 

package/src/react/components/StarRating.tsx

@@ -1,6 +1,7 @@
 import { useId, useRef, useState } from 'react';
 import { cn } from '../lib/cn';
 import { Tooltip } from './Tooltip';
+import { TAP_TARGET, TAP_TARGET_HEIGHT } from '../lib/tapTarget';
 
 /**
  * The fleet's one star rating.
@@ -161,12 +162,15 @@ export function StarRating({
               key={i}
               // guardrails-ignore no-raw-action-button: a star is a GLYPH, not a chrome control — Button/IconButton bring a border, a background, a hover fill and a locked `icon*` size, and five of those in a table cell is a toolbar where a rating should be. This IS the rating primitive; what the rule protects (the ≥44px coarse-pointer target, the visible focus ring, `type='button'`) is carried here explicitly and pinned by StarRating.spec.tsx.
               type='button'
-              // ≥44px on a coarse pointer without growing the PAINTED star — the
-              // same trick Checkbox uses. A 20px star with a 44px target is the
-              // whole reason music could stop hiding its rating on a phone.
+              // ≥44px on a coarse pointer without growing the PAINTED star: this
+              // button has no background of its own, so the floor can sit on it
+              // directly. (Checkbox cannot do that — its control IS the painted
+              // box, so its floor lives on the `<label>` around it instead.) A
+              // 20px star with a 44px target is the whole reason music could stop
+              // hiding its rating on a phone.
               className={cn(
                 'inline-flex cursor-pointer items-center justify-center rounded-sm bg-transparent p-0',
-                'pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+                TAP_TARGET,
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                 height,
               )}
@@ -228,7 +232,7 @@ export function StarRating({
       tabIndex={0}
       className={cn(
         'inline-flex w-fit cursor-pointer gap-0.5 outline-none',
-        'pointer-coarse:min-h-11 pointer-coarse:items-center',
+        `${TAP_TARGET_HEIGHT} pointer-coarse:items-center`,
         'focus-visible:ring-2 focus-visible:ring-ring',
         height,
         className,

package/src/react/components/StatStrip.tsx

@@ -5,6 +5,7 @@ import { ScrollArea } from './ScrollArea';
 import { Surface } from './Surface';
 import { Sparkline } from './Sparkline';
 import type { StatTileTone } from './StatTile';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
 
 const TONE_DOT: Record<StatTileTone, string> = {
   success: 'bg-success',
@@ -59,7 +60,7 @@ function ItemBody({ item, orientation }: { item: StatStripItem; orientation: 'ho
           <span
             className={cn(
               'ml-auto text-caption font-medium normal-case tracking-normal text-muted-foreground',
-              'opacity-0 transition-opacity group-hover/stat:opacity-100 group-focus-visible/stat:opacity-100 pointer-coarse:opacity-100',
+              `opacity-0 transition-opacity group-hover/stat:opacity-100 group-focus-visible/stat:opacity-100 ${TAP_TARGET_ALWAYS}`,
             )}
           >
             {item.actionHint}

package/src/react/components/StatTile.tsx

@@ -5,6 +5,7 @@ import { CopyButton } from './CopyButton';
 import { Sparkline } from './Sparkline';
 import { TruncatedText } from './TruncatedText';
 import { Tooltip } from './Tooltip';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
 
 interface Progress {
   value: number;
@@ -117,8 +118,7 @@ const VALUE_SIZE = { sm: 'text-base', md: 'text-2xl', lg: 'text-3xl' } as const;
  * an unnamed group-hover would make all eight copy buttons appear at once the
  * moment the pointer entered the panel.
  */
-const REVEAL_ON_TILE_HOVER =
-  'opacity-0 transition-opacity group-hover/tile:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100';
+const REVEAL_ON_TILE_HOVER = `opacity-0 transition-opacity group-hover/tile:opacity-100 focus-visible:opacity-100 ${TAP_TARGET_ALWAYS}`;
 
 /** Color by SEMANTIC direction, never by the sign of the number. */
 const DELTA_CLASS = {
@@ -215,7 +215,7 @@ export function StatTile({
         {onPress && actionHint ? (
           <span
             aria-hidden
-            className='text-caption font-medium text-muted-foreground opacity-0 transition-opacity group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100 pointer-coarse:opacity-100'
+            className={`text-caption font-medium text-muted-foreground opacity-0 transition-opacity group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100 ${TAP_TARGET_ALWAYS}`}
           >
             {actionHint}
           </span>

package/src/react/components/Tabs.spec.tsx

@@ -80,8 +80,9 @@ describe('Tabs', () => {
   // The pointer is removed rather than repaired because there is nothing to point AT.
   // What these class assertions can prove, they prove; that the rendered list actually
   // scrolls at a real viewport is UNPROVEN. Do not read the three tests below as more
-  // than they are. Writing that browser proof is tracked in
-  // /Users/curt/.app-managed/repos/fleet/owner/backlog/2026-09-10-csat-branch-drain.md.
+  // than they are. The backlog file that used to be named here as the place the browser
+  // proof was tracked belonged to a previous generation and no longer exists, so this
+  // says where the gap is rather than pretending somebody else is holding it.
   describe('fill', () => {
     test('default is a plain auto-height block — no layout opinions', () => {
       const { getByRole } = render(<Tabs items={ITEMS} />);

package/src/react/components/Tabs.tsx

@@ -2,6 +2,7 @@ import * as RadixTabs from '@radix-ui/react-tabs';
 import type { JSX, ReactNode } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/cn';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface TabItem<T extends string = string> {
   value: T;
@@ -156,7 +157,7 @@ export function Tabs<T extends string = string>({
               // an automated touch-target probe flags even though `min-h-11` already
               // satisfies the height floor (orch-host task-sources mobile scan measured
               // a "db" tab at 17×44px).
-              'pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+              TAP_TARGET,
               // Active underline tab: accent underline + accent text + semibold — the
               // same accent-marks-the-active-view treatment as the sidebar nav, so the
               // selected tab is unmistakable at a glance (not just a hairline shift).

package/src/react/components/TruncatedText.tsx

@@ -49,7 +49,8 @@ export interface TruncatedTextProps {
  *
  * It also answers `DESIGN.md` §5's "node labels must never truncate with harsh,
  * broken text string cuts" for the DOM case: the cut is still there, but the whole
- * string is one hover away instead of lost. {@link fitLabel} is the canvas/SVG half.
+ * string is one hover away instead of lost. (The canvas/SVG half of that answer lived
+ * in `react/canvas`, removed with the unreferenced subpaths on 2026-09-13.)
  *
  * ── The hint is conditional, and measured at MOUNT ───────────────────────────
  * A hover bubble that repeats a label you can already read in full is noise, so

package/src/react/components/calendar/MonthGrid.spec.tsx

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render, screen } from '@testing-library/react';
 import { MonthGrid } from './MonthGrid';
+import { TAP_TARGET_ALWAYS } from '../../lib/tapTarget';
 
 afterEach(cleanup);
 
@@ -100,7 +101,7 @@ describe('MonthGrid', () => {
     // The keyboard path the component documents must survive the reveal.
     expect(wrapper?.className).toContain('group-focus-within:opacity-100');
     // A finger cannot hover.
-    expect(wrapper?.className).toContain('pointer-coarse:opacity-100');
+    expect(wrapper?.className).toContain(TAP_TARGET_ALWAYS);
   });
 
   test("dayActionReveal='always' opts a grid out of the reveal", () => {

package/src/react/components/calendar/MonthGrid.tsx

@@ -2,6 +2,7 @@ import type { WeekStart } from 'cwip/calendar';
 import { dayStartMs, monthMatrix, todayKey, WEEKDAY_LABELS } from 'cwip/calendar';
 import type { ReactNode } from 'react';
 import { cn } from '../../lib/cn';
+import { TAP_TARGET_ALWAYS } from '../../lib/tapTarget';
 
 export interface MonthGridDay {
   /** Local day key ("YYYY-MM-DD") this cell represents. */
@@ -148,7 +149,7 @@ export function MonthGrid({
                         // the keyboard path this grid documents keeps working. `pointer-
                         // coarse` is a question about the input DEVICE — a finger cannot
                         // hover, so on a touch screen the action is simply visible.
-                        'opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 pointer-coarse:opacity-100',
+                        `opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 ${TAP_TARGET_ALWAYS}`,
                     )}
                   >
                     {action}

package/src/react/components/calendar/WeekView.tsx

@@ -15,6 +15,7 @@ import { IconButton } from '../IconButton';
 import { EventChip } from './EventChip';
 import { filterOccurrences } from './occurrences';
 import type { CalendarEventBase, OccurrenceFilters } from './types';
+import { TAP_TARGET_ALWAYS } from '../../lib/tapTarget';
 
 export interface WeekViewProps {
   /** Any date within the week to render. */
@@ -111,7 +112,7 @@ export function WeekView({
                     'h-auto min-h-[44px] w-auto min-w-[44px] rounded p-1.5 text-muted-foreground',
                     'opacity-0 transition-opacity hover:bg-muted hover:text-foreground',
                     'focus:opacity-100 group-hover:opacity-100',
-                    'pointer-coarse:opacity-100',
+                    TAP_TARGET_ALWAYS,
                   )}
                 >
                   <Plus className='h-3.5 w-3.5' />

package/src/react/components/revealOnHover.ts

@@ -1,3 +1,4 @@
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
+
 /** Hide until the parent `.group` is hovered/focused; always shown on touch. */
-export const REVEAL_ON_HOVER =
-  'opacity-0 transition group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100';
+export const REVEAL_ON_HOVER = `opacity-0 transition group-hover:opacity-100 focus-visible:opacity-100 ${TAP_TARGET_ALWAYS}`;