cursedbelt 5.67.0 → 5.69.0

package/src/fonts/inter-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/looks.css

@@ -235,3 +235,44 @@
   --field-placeholder: var(--muted-foreground);
   --field-ring: var(--ring);
 }
+
+/* ─────────────────────────────── cb-font-inter ─────────────────────────────── */
+/*
+ * A TYPE scope, not a look: it changes the face and nothing else, so it composes with any look
+ * (`<html class="cb-obsidian cb-font-inter">`). The belt's stack is the system font — SF on a Mac,
+ * which is what Linear falls back to — but Windows and Android fall to Segoe and Roboto, so the
+ * same app read as two products depending on the OS (forge task 2915). An app opts in by putting
+ * the class on <html> beside its look (in index.html, so the first paint asks for the face).
+ *
+ * Self-hosted: the file ships INSIDE the belt (`src/fonts/`, with its OFL licence), copied from
+ * `@fontsource-variable/inter` (a devDependency — looks.spec holds the two byte-identical), and the
+ * relative url below is rebased by the app's Tailwind and copied into its own assets, so it is
+ * served from the app's origin — never a Google Fonts link: no third-party request, nothing for a
+ * CSP to refuse. Not a runtime dependency on purpose: a bare package url resolves from the APP's
+ * node_modules, which a library preview (tools/lib-preview.ts) never installs into, and which a
+ * nested install would miss. LATIN ONLY, one variable file for
+ * every weight: the fleet's copy is English, and the rest of the alphabet falls through to the
+ * system stack behind it. `font-display: swap` paints in the system face at once and swaps when the
+ * file lands; the metrics of the two are close enough that a TopBar does not move (the app's
+ * browser gate reads the layout shift). cv11 is the single-storey a, ss01 the open digits — the
+ * pair Linear sets.
+ */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.cb-font-inter {
+  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  /* Tailwind's preflight reads these two on <html>; re-run them here, where --font-sans changed. */
+  --default-font-family: var(--font-sans);
+  --default-font-feature-settings: 'cv11', 'ss01';
+  font-family: var(--font-sans);
+  font-feature-settings: 'cv11', 'ss01';
+}

package/src/looks.spec.ts

@@ -69,7 +69,8 @@ describe('looks.css', () => {
     }
     expect(declarationsOf(LOOKS_CSS, '.cb-aurora')).toBeNull();
     const plain = LOOKS_CSS.replace(/\/\*[\s\S]*?\*\//g, '');
-    const scopes = new Set([...plain.matchAll(/\.cb-([a-z]+)/g)].map((m) => m[1]));
+    // The type scopes (`cb-font-*`) change the face and no surface, so they are not looks.
+    const scopes = new Set([...plain.matchAll(/\.cb-([a-z-]+)/g)].map((m) => m[1]).filter((s) => !s?.startsWith('font-')));
     expect([...scopes].sort()).toEqual(SHIPPED.map((l) => l.id).sort());
   });
 
@@ -126,3 +127,60 @@ describe('looks.css', () => {
     expect(new Set(LOOKS.map((l) => l.id)).size).toBe(LOOKS.length);
   });
 });
+
+/**
+ * `cb-font-inter` (forge task 2915): the one face the belt self-hosts. The woff2 ships in
+ * `src/fonts/` and its `url()` is relative, so the app's Tailwind rebases it and the app's bundler
+ * copies it; the copy is held to the fontsource devDependency it came from, so a bump of that
+ * package without re-copying the file is red here rather than a stale face in every app.
+ */
+describe('cb-font-inter', () => {
+  const faces = [...LOOKS_CSS.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/@font-face\s*\{([^}]*)\}/g)].map((m) => m[1] ?? '');
+
+  /** Every face's `src: url(…)`, as written. */
+  const urls = (css: string[]): string[] => css.flatMap((face) => [...face.matchAll(/url\('([^']+)'\)/g)].map((m) => m[1] as string));
+
+  /** Where a face's url lands on disk, read the way the app's bundler reads it: relative to looks.css. */
+  const onDisk = (url: string): string => join(ROOT, 'src', url);
+
+  test('is one latin, variable, swap face, shipped inside the package beside its licence', async () => {
+    expect(faces).toHaveLength(1);
+    const face = faces[0] as string;
+    expect(face).toMatch(/font-family:\s*'Inter Variable'/);
+    expect(face).toMatch(/font-display:\s*swap/);
+    expect(face).toMatch(/font-weight:\s*100 900/);
+    expect(urls(faces)).toEqual(['./fonts/inter-latin-wght-normal.woff2']);
+    // Bun.file, not node:fs: this package's test preload virtualizes node:fs.
+    expect(await Bun.file(onDisk('./fonts/inter-latin-wght-normal.woff2')).exists()).toBe(true);
+    expect(await Bun.file(onDisk('./fonts/inter-OFL.txt')).text()).toContain('SIL Open Font License');
+    const pkg = (await Bun.file(join(ROOT, 'package.json')).json()) as { files: string[]; dependencies?: Record<string, string> };
+    expect(pkg.files).toContain('src');
+    expect(pkg.dependencies?.['@fontsource-variable/inter']).toBeUndefined();
+  });
+
+  test('the shipped file is byte-for-byte the one the fontsource devDependency ships', async () => {
+    const shipped = new Uint8Array(await Bun.file(onDisk('./fonts/inter-latin-wght-normal.woff2')).arrayBuffer());
+    const source = Bun.resolveSync('@fontsource-variable/inter/files/inter-latin-wght-normal.woff2', ROOT);
+    const upstream = new Uint8Array(await Bun.file(source).arrayBuffer());
+    expect(shipped.length).toBeGreaterThan(10_000);
+    expect(Bun.hash(shipped)).toBe(Bun.hash(upstream));
+  });
+
+  test('🔴 the failure path: a face pointing at a file the package does not ship is caught', async () => {
+    const stale = faces.map((face) => face.replace('inter-latin-wght-normal', 'inter-latin-variable-normal'));
+    for (const url of urls(stale)) expect(await Bun.file(onDisk(url)).exists()).toBe(false);
+  });
+
+  test('re-binds the sans stack with Inter first, and the cv11 + ss01 features', () => {
+    const decls = declarationsOf(LOOKS_CSS, '.cb-font-inter');
+    expect(decls?.get('--font-sans')).toStartWith("'Inter Variable',");
+    expect(decls?.get('--default-font-family')).toBe('var(--font-sans)');
+    expect(decls?.get('--default-font-feature-settings')).toBe("'cv11', 'ss01'");
+  });
+
+  test('is a type scope, not a look: no surface token, and no look the picker offers', () => {
+    const decls = declarationsOf(LOOKS_CSS, '.cb-font-inter');
+    expect(decls?.has('--background')).toBe(false);
+    expect(LOOKS.some((look) => lookClass(look.id) === 'cb-font-inter')).toBe(false);
+  });
+});

package/src/react/canvas-hud/CanvasToolbar.tsx

@@ -0,0 +1,177 @@
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { ScrollArea } from '../components/ScrollArea.js';
+import { cn } from '../lib/cn.js';
+
+export interface CanvasToolbarProps {
+  /** The left half: what the canvas shows (a reach, a layer switch). Hidden while the bar is
+   *  under 768px wide when `compactFilters` is given — five stops beside the tools would scroll out of a thumb's sight. */
+  filters?: ReactNode;
+  /** The same choice as a phone wants it, usually the OS picker (`NativeSelect`): shown only while
+   *  the bar is under 768px wide, on row two beside the legend. */
+  compactFilters?: ReactNode;
+  /** A key or chip strip (houses, layers, tags): ONE line that scrolls inside itself, its ends
+   *  fading where there is more. Beside the filters at every width; never under 10rem. */
+  legend?: ReactNode;
+  /** Names the legend strip for a screen reader. */
+  legendLabel?: string;
+  /** The right half: the find box and the views. Never shrinks — the legend does. */
+  tools?: ReactNode;
+  /**
+   * Where the keyboard goes after a control in the bar acts: a POINTER click on a button, tab or
+   * radio, or Escape from one. Default: the `[role="application"]` beside the bar (the canvas the
+   * bar sits above). `false` keeps focus on the control, the browser's default.
+   */
+  returnFocus?: (() => void) | false;
+  'aria-label'?: string;
+  className?: string;
+  /** Rides on the bar's root, for an app's own selectors (`data-view`, …). */
+  [data: `data-${string}`]: string | undefined;
+}
+
+/**
+ * Whether a POINTER click landed on a control that should hand the keyboard back to the canvas
+ * once it has acted — a filter stop, a chip, a HUD button. A field keeps focus (it is typed into);
+ * a click the keyboard made (`detail` 0 — Enter or Space on a focused button) is a reader moving
+ * by Tab, whose focus stays where they put it.
+ *
+ * 🔴 The failure this exists for (family, 2026-10-06): the reach stops are a tab list, and a click
+ * leaves focus on the stop. Every arrow after that went to the stop — ← and → re-rooted and
+ * re-packed the tree — while the reader believed they were walking the family. Figma's rule: a
+ * toolbar click acts and the canvas keeps the keyboard.
+ */
+export function controlReleasesFocus(event: Pick<MouseEvent, 'target' | 'currentTarget' | 'detail'>): boolean {
+  if (event.detail === 0) return false;
+  const target = event.target;
+  if (!(target instanceof Element) || target === event.currentTarget) return false;
+  if (target.closest("input, select, textarea, [contenteditable='true'], [role='combobox'], [role='listbox'], [role='menu']")) {
+    return false;
+  }
+  return target.closest("button, [role='tab'], [role='radio']") !== null;
+}
+
+/** A key on a field is the field's whole language — Escape there is not the way back to the canvas. */
+export const isTextControl = (target: EventTarget | null): boolean =>
+  target instanceof Element && target.closest("input, select, textarea, [contenteditable='true'], [role='combobox']") !== null;
+
+/** The canvas drawn under a bar — the `application` in the box the bar shares with it. */
+const canvasBeside = (bar: Element): HTMLElement | null =>
+  bar.parentElement?.querySelector<HTMLElement>("[role='application']") ?? null;
+
+/**
+ * The toolbar a canvas wears ABOVE itself, in flow — filters left, find and views right, a legend
+ * strip that scrolls inside itself, the OS picker in place of the filters below 768px.
+ *
+ * 🔴 ONE BAR, IN FLOW — never five overlays over the drawing. family's tree floated its reach
+ * buttons, house legend, find box and view switch over the canvas's top edge until 2026-10-06, and
+ * their collisions were fought width by width while cards were drawn under them at every width. A
+ * bar above the canvas, like Figma's and Linear's, cannot collide with anything by construction:
+ * the drawing starts where the bar ends. Built from family's `TreeBar` (forge task 2917) so
+ * patterns' and desk's boards never hand-roll a second one. Not `ListToolbar`: that one is a
+ * search box and a chip filter above a list; a canvas's bar carries its own reach, a legend of
+ * anything, and gives the keyboard back to the drawing.
+ *
+ * Narrow (the BAR under 768px — a container query, so a split pane counts): row one is the
+ * `tools`, right-aligned; row two is what the canvas shows — `compactFilters` (or `filters`) and the
+ * legend strip beside it. A phone's find button and four views do not leave a picker room beside
+ * them (family at 390: 300px of tools in a 366px row), and the picker and the legend are the same
+ * question — who is drawn — so they share a row. Wide: one line when the filters, a
+ * 10rem legend and the tools fit; when they do not (a 900px window), the tools ride down to row two
+ * as a group, right-aligned, rather than the filters being cut — the stops never shrink on a wide
+ * bar. Two rows at most at every width: the legend scrolls rather than wrapping.
+ *
+ * The bar hands the keyboard back to the canvas after a control acts (`returnFocus`), because a
+ * bar in flow sits OUTSIDE the canvas, so the canvas's own hand-back never sees its clicks.
+ */
+export function CanvasToolbar({
+  filters,
+  compactFilters,
+  legend,
+  legendLabel,
+  tools,
+  returnFocus,
+  'aria-label': ariaLabel,
+  className,
+  ...data
+}: CanvasToolbarProps) {
+  const giveBack = (bar: Element) => {
+    if (returnFocus === false) return false;
+    if (returnFocus) {
+      returnFocus();
+      return true;
+    }
+    const canvas = canvasBeside(bar);
+    canvas?.focus({ preventScroll: true });
+    return canvas !== null;
+  };
+  const onClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (controlReleasesFocus(event)) giveBack(event.currentTarget);
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Escape' || event.target === event.currentTarget || isTextControl(event.target)) return;
+    if (giveBack(event.currentTarget)) event.preventDefault();
+  };
+  return (
+    // The handlers delegate — the bar's buttons, tabs and fields are the controls; these only hand
+    // the keyboard back to the canvas after one of them acts.
+    // biome-ignore lint/a11y/useSemanticElements: a <fieldset> is a FORM's grouping (its legend, its min-width quirk); this is a toolbar's layout box, and `group` only names it. No `toolbar` role: it promises arrow-key roving, which would take the arrows from the find box (ListToolbar's reasoning).
+    <div
+      {...data}
+      data-slot='canvas-toolbar'
+      role='group'
+      aria-label={ariaLabel}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      // `@container`: the bar answers to ITS width, not the window's — a canvas in a split pane
+      // or a demo column is a phone-width bar on a desk-width screen.
+      className={cn('@container border-b border-border bg-card', className)}
+    >
+      <div className='flex flex-wrap items-center gap-x-3 gap-y-2 px-3 py-2'>
+        {filters ? (
+          <div
+            data-slot='canvas-toolbar-filters'
+            className={cn(
+              'order-2 min-w-0 items-center gap-2 @3xl:order-none @3xl:shrink-0',
+              compactFilters ? 'hidden @3xl:flex' : 'flex',
+            )}
+          >
+            {filters}
+          </div>
+        ) : null}
+        {compactFilters ? (
+          <div
+            data-slot='canvas-toolbar-compact-filters'
+            className='order-2 flex min-w-26 max-w-48 flex-1 items-center @3xl:hidden [&>*]:w-full [&_select]:w-full'
+          >
+            {compactFilters}
+          </div>
+        ) : null}
+        {legend ? (
+          <ScrollArea
+            axis='x'
+            space='none'
+            safeArea={false}
+            fade
+            role='group'
+            aria-label={legendLabel}
+            data-slot='canvas-toolbar-legend'
+            className={cn(
+              'order-3 flex min-w-40 basis-0 items-center gap-1 px-0.5 @3xl:order-none',
+              // The strip's own scrollbar is hidden; its fading ends are the "there is more" cue.
+              '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            )}
+          >
+            {legend}
+          </ScrollArea>
+        ) : null}
+        {tools ? (
+          <div
+            data-slot='canvas-toolbar-tools'
+            className='order-1 ml-auto flex flex-none basis-full items-center justify-end gap-2 @3xl:order-none @3xl:basis-auto'
+          >
+            {tools}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/react/canvas-hud/index.ts

@@ -7,6 +7,8 @@ export type { CanvasNodeMenuItem, CanvasNodeMenuProps, CanvasNodeMenuSection } f
 export { CanvasNodeMenu } from './CanvasNodeMenu.js';
 export type { CanvasSearchFieldProps } from './CanvasSearchField.js';
 export { CanvasSearchField } from './CanvasSearchField.js';
+export type { CanvasToolbarProps } from './CanvasToolbar.js';
+export { CanvasToolbar, controlReleasesFocus, isTextControl } from './CanvasToolbar.js';
 export type { CanvasZoomHintProps, HudButtonProps, HudZoomControlsProps } from './HudControls.js';
 export { CanvasZoomHint, HudButton, HudZoomControls } from './HudControls.js';
 export type { CanvasWheelMode, CanvasWheelOptions } from './useCanvasWheel.js';

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

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
-import { cleanup, render } from '@testing-library/react';
+import { act, cleanup, render } from '@testing-library/react';
 import { ActionBar, FooterSlot } from './ActionBar.js';
 import { Button } from './Button.js';
 
@@ -291,3 +291,51 @@ describe('FooterSlot — the footer is ordered by variant, not by the children (
     expect(labels(slot)).toEqual(['Back', 'Skip']);
   });
 });
+
+describe('ActionBar — mobile, with the keyboard up', () => {
+  const realVV = Object.getOwnPropertyDescriptor(window, 'visualViewport');
+  beforeEach(() => stubMatchMedia(true));
+  afterEach(() => {
+    if (realVV) Object.defineProperty(window, 'visualViewport', realVV);
+    else Reflect.deleteProperty(window, 'visualViewport');
+  });
+
+  /** iOS's keyboard, stood in: the visible viewport loses `px` from the bottom. */
+  function standInKeyboard() {
+    const vv = new EventTarget() as EventTarget & { height: number; offsetTop: number };
+    vv.height = window.innerHeight;
+    vv.offsetTop = 0;
+    Object.defineProperty(window, 'visualViewport', { configurable: true, get: () => vv });
+    return {
+      raise(px: number) {
+        vv.height = window.innerHeight - px;
+        vv.dispatchEvent(new Event('resize'));
+      },
+    };
+  }
+
+  test('🔴 steps aside while the keyboard is up, and is back when it goes (LAY-15)', async () => {
+    const keyboard = standInKeyboard();
+    const { container } = render(
+      <ActionBar
+        destructive={<Button tooltip='Delete' variant='destructive'>Delete</Button>}
+        primary={<Button tooltip='Save' variant='primary'>Save</Button>}
+        secondary={<Button tooltip='Cancel' variant='secondary'>Cancel</Button>}
+      />,
+    );
+    const bar = () => container.querySelector('[data-cb-action-bar]') as HTMLElement;
+    expect(bar().hidden).toBe(false);
+    await act(() => keyboard.raise(336));
+    expect(bar().hidden).toBe(true);
+    expect(bar().getAttribute('data-cb-keyboard')).toBe('aside');
+    await act(() => keyboard.raise(0));
+    expect(bar().hidden).toBe(false);
+  });
+
+  test("the URL bar collapsing (under 120px) is not a keyboard", async () => {
+    const keyboard = standInKeyboard();
+    const { container } = render(<ActionBar primary={<Button tooltip='Save' variant='primary'>Save</Button>} />);
+    await act(() => keyboard.raise(60));
+    expect((container.querySelector('[data-cb-action-bar]') as HTMLElement).hidden).toBe(false);
+  });
+});

package/src/react/components/ActionBar.tsx

@@ -1,4 +1,5 @@
 import { Children, Fragment, isValidElement, type ReactNode } from 'react';
+import { useKeyboardOpen } from '../hooks/useKeyboardOpen.js';
 import { useMediaQuery } from '../hooks/useMediaQuery.js';
 import { cn } from '../lib/cn.js';
 import { devWarnOnce } from '../lib/devWarn.js';
@@ -84,6 +85,7 @@ export function ActionBar({
   className,
 }: ActionBarProps) {
   const isMobile = useMediaQuery(MOBILE_QUERY);
+  const keyboardOpen = useKeyboardOpen();
   if (hasPrimaryChild(children)) {
     devWarnOnce(
       'ActionBar:primary-child',
@@ -92,6 +94,12 @@ export function ActionBar({
     );
   }
 
+  if (isMobile && keyboardOpen) {
+    // 🔴 Aside while the keyboard is up. Lifted by `--keyboard-inset` the bar sat IN the strip the
+    // keyboard leaves, over the line being typed on (family's editor, three rows deep, Apple pass
+    // 2026-10-06 — LAY-15). Nobody saves mid-keystroke: the keyboard goes, the bar is back.
+    return <div data-cb-action-bar='mobile' data-cb-keyboard='aside' hidden />;
+  }
   if (isMobile) {
     return (
       <div
@@ -109,8 +117,8 @@ export function ActionBar({
         )}
         {/* `*`, not `button`: a Download is `<Button asChild><a download>`, and a link primary
             sat half-width under a phone's full-width Cancel (desk's Export, forge task 2750). */}
-        {primary && <div className='[&>*]:w-full'>{primary}</div>}
-        {secondary && <div className='[&>*]:w-full'>{secondary}</div>}
+        {primary && <div className='[&>*]:w-full [&>*>button]:w-full'>{primary}</div>}
+        {secondary && <div className='[&>*]:w-full [&>*>button]:w-full'>{secondary}</div>}
       </div>
     );
   }

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

@@ -2234,6 +2234,10 @@ export function DataTable<TRow extends Record<string, unknown>>({
                     {selectionShown ? (
                       <th
                         scope='col'
+                        // The seam an app's own cell padding leaves alone: this cell is exactly the 44px
+                        // the checkbox's label needs on a touchscreen (music's 6px pushed the label under
+                        // the next cell and cut a finger's reach to 37px — the Apple pass, 2026-10-06).
+                        data-cb-selection-cell=''
                         className={cn(
                           'w-11 border-b border-border px-0 text-center',
                           stickyHeader && 'sticky top-0 z-10 bg-card/95 backdrop-blur-sm',
@@ -2408,6 +2412,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
                                   } as CSSProperties)
                                 : undefined
                             }
+                            data-cb-selection-cell=''
                             className={cn(
                               'w-11 cursor-pointer px-0 text-center align-middle',
                               stickyFirstColumn && 'sticky left-0 z-10 bg-[var(--cb-frozen-bg)]',
@@ -2473,7 +2478,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
                 <tfoot data-cb-table-footer=''>
                   <tr>
                     {footerHeaders.filter((h) => h.column.columnDef.meta?.leading === true).map((h) => footerCell(h, -1))}
-                    {selectionShown ? <td className='w-11 border-t border-border px-0' /> : null}
+                    {selectionShown ? <td data-cb-selection-cell='' className='w-11 border-t border-border px-0' /> : null}
                     {footerHeaders.filter((h) => h.column.columnDef.meta?.leading !== true).map(footerCell)}
                     {hasActions ? <td className='border-t border-border px-2' /> : null}
                   </tr>

package/src/react/components/EntityCard.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn.js';
+import { CardTapTarget } from './CardTapTarget.js';
+
+export interface EntityCardProps {
+  /** The face: an `Avatar`, a portrait, a cover thumbnail. Drawn at its own size, never squeezed. */
+  media: ReactNode;
+  /** The name — one line, ellipsed. */
+  name: ReactNode;
+  /** One line under the name (dates, a role, a count) — muted, tabular figures, ellipsed. */
+  line?: ReactNode;
+  /** Fired on tap/click and on Enter/Space — the whole card is the target. */
+  onClick: () => void;
+  /** What a tap does, for a screen reader ("Open Ada Lovelace") — the name alone says what, not why. */
+  'aria-label'?: string;
+  /**
+   * Skip `onClick` when the click only completes a text selection inside the card. Default
+   * `false`: a face, a name and one line hold nothing worth selecting, and a press that the
+   * selection check swallows reads as a dead card on a phone.
+   */
+  selectionSafe?: boolean;
+  className?: string;
+  /** Rides on the card's root, for an app's own selectors (`data-ended`, `data-self`, …). */
+  [data: `data-${string}`]: string | undefined;
+}
+
+/**
+ * A person, a title, a game — a face, a name, one line, the whole card one tap target that dips
+ * on press. Built from family's close-family `KinCard` (forge task 2918), on `CardTapTarget`, so
+ * the tap floor (`TAP_TARGET_HEIGHT`), the press dip (`PRESS_SURFACE`) and the iPhone-safe
+ * `div[role=button]` come from the one place they are kept.
+ *
+ * The card is a row: the face left, the text beside it. It fills its grid cell, and its text
+ * truncates rather than wrapping, so every card in a grid row is the same height whatever the
+ * name. `relative isolate` keeps anything the face positions from painting over the next card and
+ * eating its taps (`CardTapTarget`'s other half).
+ */
+export function EntityCard({
+  media,
+  name,
+  line,
+  onClick,
+  'aria-label': ariaLabel,
+  selectionSafe = false,
+  className,
+  ...data
+}: EntityCardProps) {
+  return (
+    <CardTapTarget
+      {...data}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      selectionSafe={selectionSafe}
+      className={cn(
+        'relative isolate flex min-h-14 min-w-0 items-center gap-3 rounded-lg border border-border bg-card px-3 py-2',
+        'hover:border-border-strong hover:bg-card-raised',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        className,
+      )}
+    >
+      <span data-slot='entity-card-media' className='flex flex-none items-center'>
+        {media}
+      </span>
+      <span className='flex min-w-0 flex-col gap-0.5'>
+        <span data-slot='entity-card-name' className='truncate text-sm leading-5 font-medium text-foreground'>
+          {name}
+        </span>
+        {line ? (
+          <span data-slot='entity-card-line' className='truncate text-xs leading-4 text-muted-foreground tabular-nums'>
+            {line}
+          </span>
+        ) : null}
+      </span>
+    </CardTapTarget>
+  );
+}

package/src/react/components/Grid.tsx

@@ -23,8 +23,10 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
 // grid is pulled out by half a gutter on both sides, so content still aligns with the
 // edges, and the wrapper clips what hangs over — which is exactly the first column of
 // every row's border, wherever the row wraps. The clip margin keeps a focus ring at the
-// edge visible (it is far less than the half gutter the border sits out at).
-const DIVIDED_WRAPPER = 'overflow-x-clip [overflow-clip-margin:calc(var(--spacing)*1)]';
+// edge visible (it is far less than the half gutter the border sits out at). Under `@supports`:
+// Safari has no `overflow-clip-margin` (27.0.1, read by the shipped-Safari check, FND-18) and
+// the ring is clipped there — an enhancement, said so, rather than a declaration it drops.
+const DIVIDED_WRAPPER = 'overflow-x-clip supports-[overflow-clip-margin:1px]:[overflow-clip-margin:calc(var(--spacing)*1)]';
 // The extra 1px on the left is the clipped rule's own width: without it the first
 // column's content would sit a pixel in from the edge every other block lines up on.
 const DIVIDED_GRID =

package/src/react/components/ScrollArea.tsx

@@ -106,7 +106,7 @@ const REGION_HEIGHT: Record<ScrollAreaHeight, string> = {
  *
  * Rules:
  *   - NEVER write `overflow-y-auto` directly. Use `ScrollArea`.
- *   - NEVER use `h-[calc(100dvh-…)]` to compensate for layout — `dvh` does NOT
+ *   - NEVER use a `100dvh` calc height to compensate for layout — `dvh` does NOT
  *     shrink for the keyboard. Height comes from the shell's flex column
  *     (`min-h-0` + `flex-1`), not the component.
  *   - Modals/drawers/panels use this same `ScrollArea` for their scrollable body.

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

@@ -65,3 +65,17 @@ describe('SecretInput', () => {
     expect(copyButton(container)).toBeDefined();
   });
 });
+
+describe('SecretInput — the frame is the field to a finger (LAY-13, the Apple pass)', () => {
+  test('a tap on the frame itself focuses the input; one on a button inside does not steal focus', () => {
+    const { container } = render(<SecretInput value='hunter2' onChange={() => {}} label='Password' />);
+    const frame = container.querySelector('[data-cb-field-control]') as HTMLElement;
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(frame).toBeTruthy();
+    fireEvent.pointerDown(frame);
+    expect(document.activeElement).toBe(input);
+    input.blur();
+    fireEvent.pointerDown(copyButton(container) as HTMLElement);
+    expect(document.activeElement).not.toBe(input);
+  });
+});