cursedbelt 5.68.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/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/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);
+  });
+});

package/src/react/components/SecretInput.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type FocusEvent, type KeyboardEvent, type ReactNode, useState } from 'react';
+import { type CSSProperties, type FocusEvent, type KeyboardEvent, type ReactNode, useRef, useState } from 'react';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { CONTROL_HEIGHT_CLASS, type ControlSize, declareFieldWidth } from '../lib/field.js';
 import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
@@ -166,6 +166,7 @@ export const SecretInput = ({
   unstyled,
   size = 'md',
 }: SecretInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const [internalShown, setInternalShown] = useState(false);
   const { copied: internalCopied, copy } = useCopyToClipboard();
   // `onCopy` bypasses `useCopyToClipboard`, so its "copied ✓" tick has to be kept
@@ -199,8 +200,19 @@ export const SecretInput = ({
         unstyled,
       )}
       style={resolveStyle({}, styles?.root ?? style, unstyled)}
+      // The frame IS the field to a finger: its 44px on a coarse pointer (`TAP_TARGET_HEIGHT`) is
+      // the input's reach only if a tap on the frame's own border or padding lands in the input —
+      // the Apple pass read vault's master-password field as 42px (its frame less the border) on
+      // every touchscreen, 2026-10-06 (LAY-13). `data-cb-field-control` says so to the audit.
+      data-cb-field-control=''
+      onPointerDown={(event) => {
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        inputRef.current?.focus();
+      }}
     >
       <input
+        ref={inputRef}
         id={id}
         name={name}
         // guardrails-ignore no-raw-inputs: this IS the SecretInput Field-family

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

@@ -77,7 +77,7 @@ describe('equal segments', () => {
     const { container, rerender } = render(<SegmentedControl options={powers} value='z²' onChange={() => {}} />);
     const list = () => container.querySelector('[role="tablist"]');
     expect(list()?.hasAttribute('data-cb-segments-equal')).toBe(true);
-    expect(list()?.className).toContain('auto-cols-fr');
+    expect(list()?.className).toContain('auto-cols-[minmax(min-content,1fr)]');
     rerender(<SegmentedControl options={powers} value='z²' onChange={() => {}} equal={false} />);
     expect(list()?.hasAttribute('data-cb-segments-equal')).toBe(false);
     expect(list()?.className).toContain('inline-flex');

package/src/react/components/SegmentedControl.tsx

@@ -90,7 +90,11 @@ export function SegmentedControl<T extends string>({
           'max-w-full items-center gap-0.5 overflow-x-auto rounded-md bg-muted p-1',
           // Equal: one grid track per segment, every track 1fr of the widest — so z² and z⁸
           // are the same size and the strip does not bounce (FRM-7).
-          uniform ? 'inline-grid auto-cols-fr grid-flow-col' : 'inline-flex',
+          // `minmax(min-content, 1fr)`, not `minmax(0, 1fr)`: on a touchscreen each segment is at
+          // least 44px (`TAP_TARGET`), and a track allowed to shrink to 0 let seven powers overlap
+          // each other on an iPad (patterns, the Apple pass, 2026-10-06 — LAY-9). Now the strip
+          // scrolls sideways, as its `overflow-x-auto` always meant it to.
+          uniform ? 'inline-grid auto-cols-[minmax(min-content,1fr)] grid-flow-col' : 'inline-flex',
           className,
         )}
       >

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

@@ -0,0 +1,15 @@
+import { expect, test } from 'bun:test';
+import { render } from '@testing-library/react';
+import { IconButton } from './IconButton.js';
+
+// The test preload (happydom.ts) warms `TooltipImpl`, so the FIRST tooltip any spec mounts is
+// already the real one and its trigger node is never swapped under a held reference. If the
+// warm-up goes, the very first commit below renders the stand-in, which has no Radix state.
+test('a tooltip is the real implementation from its first commit under bun test', () => {
+  const { getByRole } = render(
+    <IconButton label='Files'>
+      <svg />
+    </IconButton>,
+  );
+  expect(getByRole('button', { name: 'Files' }).getAttribute('data-state')).not.toBeNull();
+});

package/src/react/hooks/useKeyboardOpen.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Whether the on-screen keyboard is up: the layout viewport is taller than the visible one by
+ * more than `threshold` px (`useKeyboardInset`'s arithmetic, as a boolean). iOS's URL bar
+ * collapsing moves `innerHeight` with it, so it never reads as a keyboard; a real keyboard is
+ * 260–420px. `false` where `visualViewport` is absent, and on the first render.
+ *
+ * What it is for (forge task apple-device-testing, 2026-10-06): a bar that rides above the
+ * keyboard sits IN the strip the keyboard leaves, over the line being typed on — the Apple pass
+ * read family's three-row editor footer over the first field (LAY-15). While a person types,
+ * `ActionBar` steps aside and comes back when the keyboard goes.
+ */
+export function useKeyboardOpen(threshold = 120): boolean {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+    if (!vv) return;
+    const update = () => setOpen(window.innerHeight - vv.height - vv.offsetTop > threshold);
+    update();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+    };
+  }, [threshold]);
+  return open;
+}

package/src/react/index.ts

@@ -39,6 +39,7 @@ export {
 } from 'cursedbelt-core/color-scheme';
 export { ThemeToggle, type ThemeToggleProps } from './colorScheme/ThemeToggle.js';
 export { type UseColorScheme, useColorScheme } from './colorScheme/useColorScheme.js';
+export { AppearanceMenu, type AppearanceMenuProps } from './look/AppearanceMenu.js';
 export { LookPicker, type LookPickerProps } from './look/LookPicker.js';
 export {
   applyLookToDocument,
@@ -794,6 +795,7 @@ export { useEscapeKey } from './hooks/useEscapeKey.js';
 export { type UseOutsidePressOptions, useOutsidePress } from './hooks/useOutsidePress.js';
 export { useHasHover } from './hooks/useHasHover.js';
 export { useKeyboardInset } from './hooks/useKeyboardInset.js';
+export { useKeyboardOpen } from './hooks/useKeyboardOpen.js';
 export { useKeyDown } from './hooks/useKeyDown.js';
 export { type UseKeySequenceOptions, useKeySequence } from './hooks/useKeySequence.js';
 export {

package/src/react/look/AppearanceMenu.spec.tsx

@@ -0,0 +1,90 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { readFileSync } from 'node:fs';
+import { colorSchemeStore, initColorScheme } from 'cursedbelt-core/color-scheme';
+import { AppearanceMenu } from './AppearanceMenu.js';
+import { initLook, LOOK_STORAGE_KEY, LOOKS, lookClass, resetLook } from './lookStore.js';
+
+afterEach(() => {
+  cleanup();
+  resetLook();
+  localStorage.removeItem(LOOK_STORAGE_KEY);
+  for (const look of LOOKS) document.documentElement.classList.remove(lookClass(look.id));
+  colorSchemeStore.setMode('system');
+});
+
+describe('AppearanceMenu', () => {
+  test('is one named button until pressed, then the look cards and the scheme in one panel', async () => {
+    initLook({ fallback: 'obsidian' });
+    initColorScheme();
+    const { getByRole, queryAllByRole, getAllByRole, findByRole } = render(<AppearanceMenu />);
+    expect(queryAllByRole('radio')).toHaveLength(0);
+
+    fireEvent.click(getByRole('button', { name: 'Appearance' }));
+    // The panel is a lazy chunk: the first press fetches it and it opens as it lands.
+    expect(await findByRole('dialog', { name: 'Appearance' })).not.toBeNull();
+    // The looks are radios (LookPicker); the scheme is SegmentedControl's tabs beside them.
+    const radios = getAllByRole('radio').map((r) => r.textContent ?? '');
+    for (const look of LOOKS) expect(radios.some((t) => t.includes(look.label))).toBe(true);
+    expect(getByRole('radio', { name: /Obsidian/ }).getAttribute('aria-checked')).toBe('true');
+    expect(getByRole('tablist', { name: 'Light or dark' })).not.toBeNull();
+  });
+
+  test('a look picked in the panel is worn and kept; a scheme picked there is applied', async () => {
+    initLook({ fallback: 'obsidian' });
+    initColorScheme();
+    const { getByRole, findByRole } = render(<AppearanceMenu />);
+    fireEvent.click(getByRole('button', { name: 'Appearance' }));
+
+    fireEvent.click(await findByRole('radio', { name: /Dracula/ }));
+    expect(document.documentElement.classList.contains('cb-dracula')).toBe(true);
+    expect(document.documentElement.classList.contains('cb-obsidian')).toBe(false);
+    expect(localStorage.getItem(LOOK_STORAGE_KEY)).toBe('dracula');
+
+    // Radix Tabs selects on the press, not the click.
+    fireEvent.mouseDown(getByRole('tab', { name: 'Dark' }));
+    expect(colorSchemeStore.getMode()).toBe('dark');
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+
+  test('`looks` narrows what the panel offers', async () => {
+    const { getByRole, queryByRole, findByRole } = render(<AppearanceMenu looks={['obsidian', 'aurora']} />);
+    fireEvent.click(getByRole('button', { name: 'Appearance' }));
+    expect(await findByRole('radio', { name: /Aurora/ })).not.toBeNull();
+    expect(queryByRole('radio', { name: /Nord/ })).toBeNull();
+  });
+
+  test('the panel closes on a second press and reopens on a third', async () => {
+    const { getByRole, findByRole, queryByRole } = render(<AppearanceMenu />);
+    fireEvent.click(getByRole('button', { name: 'Appearance' }));
+    await findByRole('dialog', { name: 'Appearance' });
+    fireEvent.click(getByRole('button', { name: 'Appearance' }));
+    expect(queryByRole('dialog')).toBeNull();
+    fireEvent.click(getByRole('button', { name: 'Appearance' }));
+    expect(await findByRole('dialog', { name: 'Appearance' })).not.toBeNull();
+  });
+});
+
+// 🔴 The panel's Popover, RadioGroup and Tabs cost every app ~21 kB gzip of ENTRY chunk when this
+// file imported them (arch, 2026-10-07: 157,950 B with the menu vs 136,443 B with ThemeToggle).
+// They may reach the button only through the dynamic import of ./AppearancePanel.
+const STATIC_IMPORT = /^import\s[^;]*?from\s+'([^']+)'/gms;
+function staticImportsOf(source: string): string[] {
+  return [...source.matchAll(STATIC_IMPORT)].filter((m) => !m[0].startsWith('import type')).map((m) => m[1] ?? '');
+}
+const PANEL_ONLY = ['./AppearancePanel.js', '../components/Popover.js', '../components/SegmentedControl.js', './LookPicker.js'];
+
+describe('AppearanceMenu stays out of the entry chunk', () => {
+  test('its module imports none of the panel statically', () => {
+    const source = readFileSync(new URL('./AppearanceMenu.tsx', import.meta.url), 'utf8');
+    const imported = staticImportsOf(source);
+    expect(imported).toContain('../components/IconButton.js');
+    for (const heavy of PANEL_ONLY) expect(imported).not.toContain(heavy);
+    expect(source).toContain("import('./AppearancePanel.js')");
+  });
+
+  test('🔴 the failure path: a static import of the panel is caught', () => {
+    const regressed = "import { Popover } from '../components/Popover.js';\nimport { IconButton } from '../components/IconButton.js';";
+    expect(PANEL_ONLY.some((heavy) => staticImportsOf(regressed).includes(heavy))).toBe(true);
+  });
+});