cursedbelt 1.0.0 → 2.3.0

package/src/react/analytics/index.ts

@@ -6,7 +6,7 @@
  * | layer | lives in | why |
  * |---|---|---|
  * | the marks (bar, area, heatmap, …) | `cursedbelt/react/charts` | a chart is a chart whether or not it is on a dashboard |
- * | the range vocabulary + bucketing | `cursedbelt/core/analytics` | framework-free, because the SERVER buckets too and both sides must agree |
+ * | the range vocabulary + bucketing | `cursedbelt/analytics` | framework-free, because the SERVER buckets too and both sides must agree |
  * | the dashboard furniture (this) | here | a panel with a question, a range switcher |
  * | what the numbers MEAN | the consuming app | orch's task categories are not station's traffic sources |
  *

package/src/react/chat/MessageComposer.tsx

@@ -5,6 +5,7 @@ import { IconButton } from '../components/IconButton';
 import { Input } from '../components/Input';
 import { cn } from '../lib/cn';
 import { FIELD_CLASS } from '../lib/field';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface MessageComposerProps {
   /** Called when the user submits a message. */
@@ -106,10 +107,10 @@ export function MessageComposer({
                 label={`Remove ${f.name}`}
                 onClick={() => setPendingFiles((prev) => prev.filter((_, j) => j !== i))}
                 // `size-4` keeps the glyph compact inline in the pill on a mouse/trackpad;
-                // `pointer-coarse:min-h-11 pointer-coarse:min-w-11` still floors the REAL
-                // tap target to 44px on touch (an earlier `min-h-0` here silently defeated
-                // IconButton's own pointer-coarse baseline — cbux-184).
-                className='ml-0.5 size-4 p-0 text-muted-foreground hover:bg-transparent hover:text-foreground [&_svg]:size-3 pointer-coarse:min-h-11 pointer-coarse:min-w-11'
+                // `TAP_TARGET` still floors the REAL tap target to 44px on touch (an
+                // earlier `min-h-0` here silently defeated IconButton's own pointer-coarse
+                // baseline — cbux-184).
+                className={`ml-0.5 size-4 p-0 text-muted-foreground hover:bg-transparent hover:text-foreground [&_svg]:size-3 ${TAP_TARGET}`}
               >
                 <X aria-hidden />
               </IconButton>

package/src/react/components/Button.tsx

@@ -5,6 +5,7 @@ import { useRef, useState, type ButtonHTMLAttributes, type MouseEvent, type Reac
 import { toast } from 'sonner';
 import { cn } from '../lib/cn';
 import { Tooltip, type TooltipMobile, type TooltipPlacement } from './Tooltip';
+import { TAP_TARGET_HEIGHT } from '../lib/tapTarget';
 
 /**
  * The single source of truth for every interactive element that triggers an action.
@@ -24,7 +25,7 @@ export const buttonVariants = cva(
   [
     'relative inline-flex items-center justify-center gap-2 rounded-md font-medium',
     'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',
-    'pointer-coarse:min-h-11', // ≥44px touch target on coarse pointers
+    TAP_TARGET_HEIGHT, // ≥44px touch target on coarse pointers
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background',
     // Disabled = muted surface + faded + inert (never color-alone): clearly off, not a low-contrast haze.
     'disabled:pointer-events-none disabled:opacity-50 disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground',
@@ -90,7 +91,7 @@ export const buttonVariants = cva(
         sm: 'h-[var(--control-h-sm)] px-3 text-sm pointer-coarse:min-w-11',
         md: 'h-[var(--control-h-md)] px-4 text-sm pointer-coarse:min-w-11',
         lg: 'h-[var(--control-h-lg)] px-6 text-base pointer-coarse:min-w-11',
-        // `pointer-coarse:min-w-11` alongside the shared `pointer-coarse:min-h-11`
+        // `pointer-coarse:min-w-11` alongside the shared `TAP_TARGET_HEIGHT`
         // above: these are the SQUARE shapes, so a coarse pointer must widen them too
         // — `min-h-11` alone leaves a 36×44 target (width still short of the 44px
         // floor) whenever the token width is below 44px (owner orch-host 390px

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

@@ -30,4 +30,55 @@ describe('Checkbox', () => {
     expect(getByText('Accept terms')).toBeDefined();
     expect(getByRole('checkbox')).toBeDefined();
   });
+
+  // 🔴 The floor is on the TARGET, never on the painted box. happy-dom computes no
+  // layout, so this can only pin the classes — `e2e/touch-targets.spec.ts` measures
+  // the rendered pixels in a Pixel 7 profile, which is the assertion that counts.
+  test('the coarse-pointer floor is on the label target, not on the painted box', () => {
+    const { getByRole } = render(<Checkbox checked={false} onCheckedChange={() => {}} />);
+    const box = getByRole('checkbox');
+    const boxClass = box.getAttribute('class') ?? '';
+    // `min-height` beats `height`: any coarse floor here repaints the square at
+    // 44×44 rather than growing a target around it.
+    expect(boxClass).toContain('size-4');
+    expect(boxClass).not.toContain('pointer-coarse:min-h-11');
+    expect(boxClass).not.toContain('pointer-coarse:min-w-11');
+
+    const target = box.closest('[data-cb-tap-target]');
+    expect(target).not.toBeNull();
+    const targetClass = target?.getAttribute('class') ?? '';
+    expect(targetClass).toContain('pointer-coarse:min-h-11');
+    expect(targetClass).toContain('pointer-coarse:min-w-11');
+  });
+
+  test('the caption is inside the tap target and wired to the box', () => {
+    const { getByText, getByRole } = render(
+      <Checkbox checked={false} onCheckedChange={() => {}} label='Show hidden' />,
+    );
+    const caption = getByText('Show hidden');
+    const target = getByRole('checkbox').closest('[data-cb-tap-target]');
+    expect(target?.contains(caption)).toBe(true);
+    expect((target as HTMLLabelElement).htmlFor).toBe(getByRole('checkbox').id);
+    expect((target as HTMLLabelElement).htmlFor).not.toBe('');
+  });
+
+  test('labelClassName restyles the caption without touching the box', () => {
+    const { getByText, getByRole } = render(
+      <Checkbox
+        checked={false}
+        onCheckedChange={() => {}}
+        label='Show hidden'
+        labelClassName='text-xs text-muted-foreground'
+      />,
+    );
+    const caption = (getByText('Show hidden').getAttribute('class') ?? '').split(/\s+/);
+    // tailwind-merge drops the defaults it replaces rather than leaving both, so
+    // the call site does not have to out-specify the component.
+    expect(caption).toContain('text-xs');
+    expect(caption).toContain('text-muted-foreground');
+    expect(caption).not.toContain('text-sm');
+    expect(caption).not.toContain('text-foreground');
+    // …and `className` still means the box, as it always has.
+    expect(getByRole('checkbox').getAttribute('class') ?? '').toContain('size-4');
+  });
 });

package/src/react/components/Checkbox.tsx

@@ -2,52 +2,94 @@ import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { Check, Minus } from 'lucide-react';
 import { type ComponentPropsWithoutRef, type ReactNode, useId } from 'react';
 import { cn } from '../lib/cn';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface CheckboxProps extends ComponentPropsWithoutRef<typeof RadixCheckbox.Root> {
-  /** Optional caption rendered beside the box; wraps the control in a `<label>`. */
+  /** Optional caption rendered beside the box; rendered inside the `<label>` target. */
   label?: ReactNode;
+  /**
+   * Typography for the caption. Defaults to `text-sm text-foreground`; `cn` is
+   * tailwind-merge, so `text-xs text-muted-foreground` here REPLACES both rather
+   * than fighting them.
+   *
+   * It exists because `className` lands on the painted box, so a dense toolbar
+   * that wanted a 12px muted caption had no way to ask for one — and the app that
+   * wanted it (`apps/flix`'s filter bar) kept a private copy of this whole control
+   * for that one reason. Restyling a shared component's defaults at every call
+   * site is how the copies start.
+   */
+  labelClassName?: string;
 }
 
+// ── 🔴 The painted box is 16px at EVERY pointer type ────────────────────────────
+// The floor lives on the `<label>` target below, never here. This element carries
+// `bg-surface` and `data-[state=checked]:bg-accent-solid` — it IS the painted
+// square — and `min-height` beats `height`, so a `pointer-coarse:min-h-11` on it
+// does not grow a target AROUND a 16px box, it repaints the box itself at 44×44.
+// That is exactly what this file did from the day it was written, under a comment
+// asserting it did not: `size-4` + `TAP_TARGET` drew a fingernail-sized checkbox
+// on every phone, and left the words beside it under 44px besides.
+//
+// A comment cannot hold this. `e2e/touch-targets.spec.ts` measures both halves in
+// a real Pixel 7 profile — 16px painted, ≥44px reachable — which is the only
+// configuration where `pointer-coarse:` is switched on at all.
 const BOX = cn(
-  // The painted box stays 16px — a 44px checkbox is a design change. The TARGET
-  // grows around it on a coarse pointer, which is what DESIGN.md §5 asks for.
   'peer size-4 shrink-0 rounded-sm border border-border-strong bg-surface transition-colors',
-  'pointer-coarse:min-h-11 pointer-coarse:min-w-11',
   'data-[state=checked]:border-accent-solid data-[state=checked]:bg-accent-solid data-[state=checked]:text-white',
   'data-[state=indeterminate]:border-accent-solid data-[state=indeterminate]:bg-accent-solid data-[state=indeterminate]:text-white',
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
   'disabled:cursor-not-allowed disabled:opacity-50',
 );
 
+// The tap target: the whole label, box and caption and the gap between them.
+//
+// Clicking a `<label>` toggles the control it labels — native browser behaviour,
+// not something this component implements — so the 44px floor belongs on the
+// region a thumb is actually aiming at, which is the words as much as the box.
+// `data-cb-tap-target` is the seam `e2e/touch-targets.spec.ts` measures a
+// sub-44px control through, the way a checkbox has to be measured.
+const TARGET = cn(
+  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 align-middle',
+  TAP_TARGET,
+);
+
 /**
  * Checkbox vendored from shadcn (Radix `Checkbox`). White check on a solid-accent
  * fill when checked (a dash when `indeterminate`); a visible `--ring` focus ring on
  * keyboard focus. Use `checked` + `onCheckedChange` (RHF wires this via
- * `<Controller>`). Pass `label` for a captioned control.
+ * `<Controller>`). Pass `label` for a captioned control, and `labelClassName` to
+ * set that caption's typography without touching the box.
+ *
+ * `className` lands on the painted 16px box; the 44px coarse-pointer target is the
+ * enclosing `<label>` and is not overridable, because it is the rule.
  */
-export function Checkbox({ label, className, id: idProp, ...props }: CheckboxProps) {
+export function Checkbox({
+  label,
+  className,
+  labelClassName,
+  id: idProp,
+  ...props
+}: CheckboxProps) {
   const reactId = useId();
   const id = idProp ?? reactId;
-  const box = (
-    <RadixCheckbox.Root id={id} className={cn(BOX, className)} {...props}>
-      <RadixCheckbox.Indicator className='flex items-center justify-center text-current'>
-        {props.checked === 'indeterminate' ? (
-          <Minus className='size-3.5' />
-        ) : (
-          <Check className='size-3.5' />
-        )}
-      </RadixCheckbox.Indicator>
-    </RadixCheckbox.Root>
-  );
-  if (label == null) return box;
-  // Sibling label associated by id (a label can't statically "contain" the Radix
-  // button control); clicking the caption toggles the box.
   return (
-    <span className='inline-flex items-center gap-2'>
-      {box}
-      <label htmlFor={id} className='cursor-pointer text-sm text-foreground'>
-        {label}
-      </label>
-    </span>
+    // `htmlFor` is explicit rather than relying on the label's first labelable
+    // descendant: Radix renders a hidden bubble `<input type="checkbox">` inside
+    // the Root when the control sits in a form, and an implicit association would
+    // resolve to THAT instead of the button the user can see.
+    <label htmlFor={id} data-cb-tap-target='' className={TARGET}>
+      <RadixCheckbox.Root id={id} className={cn(BOX, className)} {...props}>
+        <RadixCheckbox.Indicator className='flex items-center justify-center text-current'>
+          {props.checked === 'indeterminate' ? (
+            <Minus className='size-3.5' />
+          ) : (
+            <Check className='size-3.5' />
+          )}
+        </RadixCheckbox.Indicator>
+      </RadixCheckbox.Root>
+      {label == null ? null : (
+        <span className={cn('text-sm text-foreground', labelClassName)}>{label}</span>
+      )}
+    </label>
   );
 }

package/src/react/components/CodeArea.tsx

@@ -3,6 +3,7 @@ import { cn } from '../lib/cn';
 import { handleCodeTabIndent } from '../lib/tabIndent';
 import { CopyButton } from './CopyButton';
 import { ScrollArea } from './ScrollArea';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
 
 export interface CodeAreaProps {
   /** The code text (controlled). */
@@ -102,7 +103,7 @@ export function CodeArea({
             // Reveal on hover/focus on fine pointers; always visible on touch,
             // where there is no hover to reveal it.
             'opacity-0 transition-opacity duration-[var(--duration-fast)]',
-            'group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:opacity-100',
+            `group-focus-within:opacity-100 group-hover:opacity-100 ${TAP_TARGET_ALWAYS}`,
           )}
         >
           <CopyButton value={value} confirmToast={false} />

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

@@ -7,9 +7,9 @@ afterEach(cleanup);
 
 describe('CodeChip — DESIGN.md §3, an inline literal is a monospace chip with a tint', () => {
   test('it is monospace, tinted, and inline enough to sit in a sentence', () => {
-    const { container } = render(<CodeChip>~/.app-managed/deploy</CodeChip>);
+    const { container } = render(<CodeChip>~/.local/state/deploy</CodeChip>);
     const chip = container.querySelector('[data-cb-code-chip]');
-    expect(chip?.textContent).toBe('~/.app-managed/deploy');
+    expect(chip?.textContent).toBe('~/.local/state/deploy');
     expect(chip?.className).toContain('font-mono');
     // The TINT is the clause — a grey monospace run reads as prose in a different face.
     expect(chip?.className).toContain('bg-surface-sunken');

package/src/react/components/Collapsible.tsx

@@ -2,6 +2,7 @@ import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { ChevronDown } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../lib/cn';
+import { TAP_TARGET_HEIGHT } from '../lib/tapTarget';
 
 export interface CollapsibleProps {
   /** The always-visible clickable header content (shown left of the chevron). */
@@ -52,7 +53,7 @@ export function Collapsible({
           // guardrails-ignore no-raw-action-button: this IS the Collapsible section-toggle
           // primitive — its own trigger is necessarily a raw <button> (Radix Trigger asChild).
           type='button'
-          className='group flex w-full items-center justify-between gap-2 py-2 text-left text-sm font-medium text-foreground transition-colors hover:text-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11'
+          className={`group flex w-full items-center justify-between gap-2 py-2 text-left text-sm font-medium text-foreground transition-colors hover:text-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
         >
           {trigger}
           <ChevronDown className='size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180' />

package/src/react/components/ComboboxField.tsx

@@ -7,6 +7,7 @@ import { cn } from '../lib/cn';
 import { CONTROL_HEIGHT_CLASS, CONTROL_MIN_HEIGHT_CLASS, type ControlSize } from '../lib/field';
 import { FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 /** A single option in the combobox list. */
 export interface ComboboxOption {
@@ -255,7 +256,7 @@ export function ComboboxField(props: ComboboxFieldProps) {
                   <span>{lbl}</span>
                   <Combobox.ChipRemove
                     aria-label={`Remove ${lbl}`}
-                    className='inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition hover:bg-border hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:min-w-11'
+                    className={`inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition hover:bg-border hover:text-foreground ${TAP_TARGET}`}
                   >
                     <X className='size-3' aria-hidden />
                   </Combobox.ChipRemove>
@@ -282,7 +283,7 @@ export function ComboboxField(props: ComboboxFieldProps) {
         ) : (
           <Combobox.Trigger
             aria-label='Toggle options'
-            className='mr-2 flex size-5 shrink-0 items-center justify-center text-muted-foreground transition hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:min-w-11'
+            className={`mr-2 flex size-5 shrink-0 items-center justify-center text-muted-foreground transition hover:text-foreground ${TAP_TARGET}`}
           >
             <ChevronDown className='size-4' />
           </Combobox.Trigger>

package/src/react/components/CopyButton.tsx

@@ -5,6 +5,7 @@ import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
 import { cn } from '../lib/cn';
 import { Button } from './Button';
 import type { TooltipPlacement } from './Tooltip';
+import { TAP_TARGET } from '../lib/tapTarget';
 
 export interface CopyButtonProps {
   /** Text written to the clipboard (or a resolver called on click). */
@@ -88,7 +89,7 @@ export function CopyButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        'h-auto min-h-0 w-auto shrink-0 cursor-pointer gap-1 rounded p-1 text-muted-foreground hover:bg-transparent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11',
+        `h-auto min-h-0 w-auto shrink-0 cursor-pointer gap-1 rounded p-1 text-muted-foreground hover:bg-transparent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${TAP_TARGET}`,
         className,
       )}
     >

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

@@ -24,7 +24,7 @@ describe('CopyableText', () => {
   });
 
   test('block mode shows the full value in a wrapping mono panel', () => {
-    const path = '/Users/x/.app-managed/cc-orch/___orch-worktrees/tsk_01KXFNYZSFPAEP6XVJGZPEGWX4';
+    const path = '/srv/worktrees/cc-orch/tsk_01KXFNYZSFPAEP6XVJGZPEGWX4/packages/app/src';
     const { getByText, container } = render(<CopyableText value={path} block />);
     expect(getByText(path)).toBeDefined();
     expect(getByText(path).className).toContain('break-all');

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

@@ -1,5 +1,6 @@
 import { Check } from 'lucide-react';
 import { cn } from '../../lib/cn';
+import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget';
 
 export interface ColumnChecklistItem {
   key: string;
@@ -97,7 +98,7 @@ export function ColumnChecklist({
             className={cn(
               'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
               'hover:bg-muted focus-visible:bg-muted focus-visible:outline-none',
-              'pointer-coarse:min-h-11',
+              TAP_TARGET_HEIGHT,
               item.disabled && 'cursor-not-allowed opacity-50',
             )}
           >

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

@@ -3,6 +3,7 @@ import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-r
 import { IconButton } from '../IconButton';
 import { Cluster } from '../layout';
 import { SelectField } from '../SelectField';
+import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget';
 
 export interface TablePaginationProps<TRow> {
   table: Table<TRow>;
@@ -33,7 +34,7 @@ export function TablePagination<TRow>({ table, pageSizeOptions }: TablePaginatio
             <SelectField
               fieldStyle={false}
               aria-label='Rows per page'
-              className='h-8 rounded-md border border-border bg-background px-2 pointer-coarse:min-h-11'
+              className={`h-8 rounded-md border border-border bg-background px-2 ${TAP_TARGET_HEIGHT}`}
               value={String(pageSize)}
               onValueChange={(v) => table.setPageSize(Number(v))}
               options={pageSizeOptions.map((n) => ({ value: String(n), label: String(n) }))}

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)}