cursedbelt 5.55.2 → 5.58.0

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

@@ -0,0 +1,110 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { FactList } from '../master-detail/DetailPane.js';
+import { Property, PropertyList } from './PropertyList.js';
+
+afterEach(cleanup);
+
+describe('PropertyList', () => {
+  test('is a real definition list: one <dt>/<dd> pair per fact, named by aria-label', () => {
+    const { container, getByLabelText } = render(
+      <PropertyList aria-label='List template'>
+        <Property label='Opens as'>Checklist</Property>
+        <Property label='Archive'>Kept</Property>
+      </PropertyList>,
+    );
+    expect(getByLabelText('List template').tagName).toBe('DL');
+    expect([...container.querySelectorAll('dt')].map((el) => el.textContent)).toEqual(['Opens as', 'Archive']);
+    expect([...container.querySelectorAll('dd')].map((el) => el.textContent)).toEqual(['Checklist', 'Kept']);
+  });
+
+  test('the label column is ONE shared track sized by the token, never by a row (FRM-1, FRM-2)', () => {
+    const { container } = render(
+      <PropertyList>
+        <Property label='A'>1</Property>
+      </PropertyList>,
+    );
+    expect(container.querySelector('dl')?.className).toContain('grid-cols-[minmax(0,var(--property-label-w))_minmax(0,1fr)]');
+  });
+
+  test('🔴 a row draws no fill, no border and no radius — the boxes the owner lost to Linear on', () => {
+    const { container } = render(
+      <PropertyList>
+        <Property label='Opens as'>Checklist</Property>
+      </PropertyList>,
+    );
+    for (const el of container.querySelectorAll('dl, dl *')) {
+      expect(el.className).not.toMatch(/(^|\s)(bg-|border|rounded)/);
+    }
+  });
+
+  test('the label is muted and regular weight; the value is the full-strength text', () => {
+    const { container } = render(
+      <PropertyList>
+        <Property label='Opens as'>Checklist</Property>
+      </PropertyList>,
+    );
+    const dt = container.querySelector('dt');
+    expect(dt?.className).toContain('text-[var(--muted-foreground)]');
+    expect(dt?.className).toContain('font-normal');
+    expect(container.querySelector('dd > span')?.className).toContain('text-[var(--foreground)]');
+  });
+
+  test('rows sit on the small control height, so a control value lines up with a text one (FND-4)', () => {
+    const { container } = render(
+      <PropertyList>
+        <Property label='Opens as'>Checklist</Property>
+      </PropertyList>,
+    );
+    expect(container.querySelector('dt')?.className).toContain('min-h-[var(--control-h-sm)]');
+    expect(container.querySelector('dd')?.className).toContain('min-h-[var(--control-h-sm)]');
+  });
+
+  test('an absent value renders no row at all; `empty` keeps the row and mutes it', () => {
+    const { container } = render(
+      <PropertyList>
+        <Property label='Gone'>{''}</Property>
+        <Property label='Null'>{null}</Property>
+        <Property label='Lead' empty>
+          Add lead
+        </Property>
+      </PropertyList>,
+    );
+    expect(container.querySelectorAll('dt')).toHaveLength(1);
+    expect(container.querySelector('dd > span')?.className).toContain('text-[var(--muted-foreground)]');
+  });
+
+  test('a mono value breaks anywhere; prose breaks between words (task 2593)', () => {
+    const { getByText } = render(
+      <PropertyList>
+        <Property label='Path' mono>
+          /a/b
+        </Property>
+        <Property label='Note'>the recovery codes</Property>
+      </PropertyList>,
+    );
+    expect(getByText('/a/b').className).toContain('break-all');
+    expect(getByText('the recovery codes').className).toContain('break-words');
+    expect(getByText('the recovery codes').className).not.toContain('break-all');
+  });
+
+  test('icon and action stay inside the fact\'s own row (FRM-6)', () => {
+    const { container } = render(
+      <PropertyList>
+        <Property label='Status' icon={<svg data-testid='ring' />} action={<span data-testid='copy'>Copy</span>}>
+          Planned
+        </Property>
+      </PropertyList>,
+    );
+    const dd = container.querySelector('dd');
+    expect(dd?.querySelector('[data-testid="ring"]')).not.toBeNull();
+    expect(dd?.querySelector('[data-testid="copy"]')?.textContent).toBe('Copy');
+  });
+
+  test('FactList IS a compact PropertyList — one primitive draws every label/value pair', () => {
+    const { container } = render(<FactList facts={[{ label: 'Port', value: '3207' }, { label: 'Blank', value: '' }]} />);
+    const dl = container.querySelector('dl');
+    expect(dl?.getAttribute('data-density')).toBe('compact');
+    expect(container.querySelectorAll('dt')).toHaveLength(1);
+  });
+});

package/src/react/components/PropertyList.tsx

@@ -0,0 +1,92 @@
+/**
+ * `PropertyList` — one record's facts as Linear draws them: a quiet label column, the values in
+ * a second column, and nothing else. No row fills, no boxes, no rules between rows.
+ *
+ * ── The failure it exists to stop ───────────────────────────────────────────
+ * The owner put desk's Components page under Linear's project page and asked a judge which had
+ * the better UI (2026-10-05). desk lost, and the judge's words for its facts were "tightly boxed
+ * container shapes, stark block borders": five label/value rows, each in its own filled,
+ * rounded box, with the label in bold. Linear's Properties panel carries nine rows in less ink:
+ * the label is muted and regular weight, the value is the only full-strength text in the row,
+ * and the rows are separated by nothing but their own height. Every app that hand-rolls a `<dl>`
+ * makes desk's choice again, so the shape lives here once and `no-hand-rolled-property-list`
+ * refuses the raw element in app source.
+ *
+ * The numbers are the design law's: one shared label column (FRM-1, FRM-2) sized by a token,
+ * rows on the control height so a value that IS a control (a select, a button) lines up with
+ * one that is text (FND-4), two type sizes at most (FND-5), and text that never drops under
+ * 12px (FND-6).
+ */
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface PropertyListProps extends HTMLAttributes<HTMLDListElement> {
+	/**
+	 * `comfortable` (default) is Linear's panel: 14px text on 32px rows. `compact` is 12px text
+	 * on 24px rows, for a dense detail pane that lists paths and ids.
+	 */
+	density?: "comfortable" | "compact";
+	children: ReactNode;
+}
+
+export function PropertyList({ density = "comfortable", className, children, ...props }: PropertyListProps) {
+	return (
+		<dl
+			data-density={density}
+			className={cn(
+				"group/properties m-0 grid grid-cols-[minmax(0,var(--property-label-w))_minmax(0,1fr)] gap-x-4",
+				density === "compact" ? "gap-y-1 text-xs" : "gap-y-0 text-sm",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</dl>
+	);
+}
+
+export interface PropertyProps {
+	/** What the fact is. Plain words, sentence case (CPY-9). */
+	label: ReactNode;
+	/** A 16px mark before the value — Linear's status ring, a person, a calendar. */
+	icon?: ReactNode;
+	/** The value is not set: drawn muted, the way Linear draws "Add lead". */
+	empty?: boolean;
+	/** A monospace value with no word to break at (a path, an id) breaks anywhere. */
+	mono?: boolean;
+	/** Trailing controls that belong to this fact — a copy button, a reset (FRM-6). */
+	action?: ReactNode;
+	children: ReactNode;
+}
+
+/** One fact. Renders nothing when its value is absent, so a caller never filters by hand. */
+export function Property({ label, icon, empty = false, mono = false, action, children }: PropertyProps) {
+	if (children === undefined || children === null || children === "" || children === false) return null;
+	return (
+		<div className="contents">
+			<dt className="m-0 flex min-h-[var(--control-h-sm)] min-w-0 items-center font-normal text-[var(--muted-foreground)] group-data-[density=compact]/properties:min-h-6 group-data-[density=compact]/properties:items-start">
+				<span className="truncate">{label}</span>
+			</dt>
+			<dd className="m-0 flex min-h-[var(--control-h-sm)] min-w-0 items-center gap-2 group-data-[density=compact]/properties:min-h-6 group-data-[density=compact]/properties:items-start">
+				{icon ? (
+					<span aria-hidden="true" className="flex size-4 flex-none items-center justify-center text-[var(--muted-foreground)]">
+						{icon}
+					</span>
+				) : null}
+				{/* break-all only for a mono id, which has no word to break at; prose breaks between
+				    words — "the re/covery codes" broke mid-word when every value was break-all (task 2593). */}
+				<span
+					data-slot="property-value"
+					className={cn(
+						"min-w-0",
+						mono ? "break-all font-mono" : "break-words",
+						empty ? "text-[var(--muted-foreground)]" : "text-[var(--foreground)]",
+					)}
+				>
+					{children}
+				</span>
+				{action ? <span className="flex flex-none items-center gap-1">{action}</span> : null}
+			</dd>
+		</div>
+	);
+}

package/src/react/components/Wizard/ReviewStep.tsx

@@ -1,7 +1,8 @@
-import { Fragment, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { type FieldValues, get, type UseFormReturn } from 'react-hook-form';
 import type { FieldSpec } from '../FieldInput.js';
 import { Stack } from '../layout.js';
+import { Property, PropertyList } from '../PropertyList.js';
 import { Section } from '../Section.js';
 import { Surface } from '../Surface.js';
 import type { StepDef } from './types.js';
@@ -58,14 +59,13 @@ export function ReviewStep<T extends FieldValues>({
       {steps.map((s) => (
         <Surface key={s.id} level='flat' pad='sm'>
           <Section title={s.title}>
-            <dl className='grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm'>
+            <PropertyList>
               {s.fields.map((key) => (
-                <Fragment key={key}>
-                  <dt className='font-medium text-muted-foreground'>{labelFor(key)}</dt>
-                  <dd className='min-w-0 break-words text-foreground'>{valueFor(key)}</dd>
-                </Fragment>
+                <Property key={key} label={labelFor(key)}>
+                  {valueFor(key)}
+                </Property>
               ))}
-            </dl>
+            </PropertyList>
           </Section>
         </Surface>
       ))}

package/src/react/components/editorPage.css

@@ -0,0 +1,421 @@
+/*
+ * The creation page's own look — `EditorPage`, `QuietForm` and `IconPicker`. Prefix `cbfk-`, and
+ * the same layering rules as `formKit.css`, which says why.
+ *
+ * 🔴 Its own file, imported only by `EditorPage.tsx` and `IconPicker.tsx`. It lived at the end of
+ * `formKit.css` for one unpublished version, and every component that imports that file
+ * (`KeyBadge`, `ExpandableRow`, …) carried it: station's DuplicatesView and music's TubeView
+ * — one KeyBadge each — grew 1.84 → 2.90 kB gzip of a page neither draws (forge task 2832,
+ * measured by tools/consumer-preflight.ts). `src/react/components/formKitStylesheets.spec.ts`
+ * keeps the split.
+ */
+
+/*
+ * ── EditorPage ─────────────────────────────────────────────────────────────
+ *
+ * A creation page: header, then form | divider | preview. Layered like the rest of this file.
+ */
+@layer base {
+	.cbfk-page {
+		position: relative;
+		container-type: inline-size;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
+		background-color: var(--background);
+		color: var(--foreground);
+		outline: none;
+	}
+
+	.cbfk-page[data-presentation="overlay"] {
+		position: fixed;
+		inset: 0;
+		z-index: var(--z-overlay, 1000);
+	}
+
+	.cbfk-page[data-presentation="inline"] {
+		height: 100%;
+	}
+
+	.cbfk-page-head {
+		display: flex;
+		flex: none;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 3rem;
+		padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left));
+		padding-top: max(0.5rem, env(safe-area-inset-top));
+		border-bottom: 1px solid var(--border);
+	}
+
+	.cbfk-page-back {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		gap: 0.375rem;
+		min-height: 2.25rem;
+		margin: 0;
+		padding: 0 0.5rem;
+		border: 0;
+		border-radius: var(--radius-sm, 0.375rem);
+		background: transparent;
+		color: var(--muted-foreground);
+		font: inherit;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+
+	.cbfk-page-back:hover {
+		background-color: var(--muted);
+		color: var(--foreground);
+	}
+
+	.cbfk-page-back:focus-visible,
+	.cbfk-page-mode:focus-visible,
+	.cbfk-page-divider:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: -2px;
+	}
+
+	.cbfk-page-back svg {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.cbfk-page-sep {
+		flex: none;
+		color: var(--muted-foreground);
+		opacity: 0.6;
+	}
+
+	.cbfk-page-title {
+		flex: 1 1 auto;
+		min-width: 0;
+		margin: 0;
+		overflow: hidden;
+		font-size: 0.9375rem;
+		font-weight: 500;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.cbfk-page-actions {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	/* The Edit / Preview switch is a phone's; wide, both sides are simply there. */
+	.cbfk-page-modes {
+		display: none;
+	}
+
+	.cbfk-page-split {
+		display: flex;
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.cbfk-page-form,
+	.cbfk-page-preview {
+		box-sizing: border-box;
+		min-width: 0;
+		min-height: 0;
+		/* guardrails-ignore no-raw-overflow: task 2827 — each side scrolls on its own in a Tailwind-free host, where ScrollArea cannot draw; the keyboard inset below is ScrollArea's. */
+		overflow: auto;
+		overscroll-behavior: contain;
+		/* ScrollArea's keyboard clearance (a no-op 0px on desktop): a focused field is never
+		   parked under a phone's keyboard, and the last one can be scrolled above it. */
+		scroll-padding-bottom: calc(var(--keyboard-inset, 0px) + 1rem);
+		padding-bottom: var(--keyboard-inset, 0px);
+	}
+
+	.cbfk-page-form {
+		flex: 0 0 var(--cbfk-page-split, 50%);
+	}
+
+	.cbfk-page-form-inner {
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
+		box-sizing: border-box;
+		max-width: 46rem;
+		margin: 0 auto;
+		padding: 2rem 2rem 4rem;
+	}
+
+	.cbfk-page-preview {
+		flex: 1 1 0;
+		padding: 1.25rem 2rem 4rem;
+		background-color: var(--surface-sunken, var(--muted));
+	}
+
+	.cbfk-page-preview-head {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		min-height: 2rem;
+		margin: 0 0 1rem;
+	}
+
+	.cbfk-page-preview-label {
+		flex: 1 1 auto;
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	.cbfk-page-preview-tools {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.cbfk-page-preview-body {
+		max-width: 40rem;
+		margin: 0 auto;
+	}
+
+	/* A 1px line with an 11px grab area either side of it; the line lights while dragged. */
+	.cbfk-page-divider {
+		position: relative;
+		flex: none;
+		width: 1px;
+		background-color: var(--border);
+		cursor: col-resize;
+		touch-action: none;
+	}
+
+	.cbfk-page-divider::before {
+		position: absolute;
+		inset: 0 -0.375rem;
+		content: "";
+	}
+
+	.cbfk-page-divider:hover,
+	.cbfk-page[data-dragging="true"] .cbfk-page-divider {
+		background-color: var(--ring, var(--accent));
+	}
+
+	.cbfk-page[data-dragging="true"] {
+		cursor: col-resize;
+		user-select: none;
+	}
+
+	/* Narrow: one side at a time, chosen in the header. */
+	@container (max-width: 48rem) {
+		/* The switch takes the title's place: Back, Edit | Preview, the actions. A title cut to
+		   one letter says nothing, and the page's own heading is still its accessible name. */
+		.cbfk-page-crumb,
+		.cbfk-page-sep {
+			display: none;
+		}
+
+		.cbfk-page-title {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip: rect(0 0 0 0);
+			white-space: nowrap;
+		}
+
+		.cbfk-page-modes {
+			display: inline-flex;
+			flex: none;
+			margin-right: auto;
+			padding: 0.125rem;
+			border-radius: var(--radius-sm, 0.375rem);
+			background-color: var(--muted);
+		}
+
+		.cbfk-page-mode {
+			min-height: 2rem;
+			margin: 0;
+			padding: 0 0.75rem;
+			border: 0;
+			border-radius: calc(var(--radius-sm, 0.375rem) - 2px);
+			background: transparent;
+			color: var(--muted-foreground);
+			font: inherit;
+			font-size: 0.8125rem;
+			cursor: pointer;
+		}
+
+		.cbfk-page-mode[aria-selected="true"] {
+			background-color: var(--background);
+			color: var(--foreground);
+		}
+
+		.cbfk-page-divider {
+			display: none;
+		}
+
+		.cbfk-page-form {
+			flex: 1 1 auto;
+		}
+
+		.cbfk-page[data-mode="edit"] .cbfk-page-preview,
+		.cbfk-page[data-mode="preview"] .cbfk-page-form {
+			display: none;
+		}
+
+		.cbfk-page-form-inner {
+			padding: 1.25rem 1rem 4rem;
+		}
+
+		.cbfk-page-preview {
+			padding: 1rem 1rem 4rem;
+		}
+	}
+}
+
+/* ── IconPicker ─────────────────────────────────────────────────────────── */
+@layer base {
+	.cbfk-icons {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		min-width: 0;
+	}
+
+	.cbfk-icons-sets {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		min-inline-size: 0;
+		margin: 0;
+		border: 0;
+		padding: 0;
+	}
+
+	.cbfk-icons-set {
+		min-height: 1.75rem;
+		margin: 0;
+		padding: 0 0.625rem;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: var(--muted-foreground);
+		font: inherit;
+		font-size: 0.75rem;
+		cursor: pointer;
+	}
+
+	.cbfk-icons-set:hover {
+		color: var(--foreground);
+	}
+
+	.cbfk-icons-set[aria-pressed="true"] {
+		background-color: var(--muted);
+		color: var(--foreground);
+	}
+
+	.cbfk-icons-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
+		gap: 0.25rem;
+	}
+
+	.cbfk-icons-cell {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		aspect-ratio: 1;
+		margin: 0;
+		padding: 0;
+		border: 1px solid transparent;
+		border-radius: var(--radius-sm, 0.375rem);
+		background: transparent;
+		cursor: pointer;
+	}
+
+	.cbfk-icons-cell:hover {
+		background-color: var(--muted);
+	}
+
+	.cbfk-icons-cell:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: -2px;
+	}
+
+	.cbfk-icons-cell[aria-checked="true"] {
+		border-color: var(--ring, var(--accent));
+		background-color: var(--muted);
+	}
+
+	.cbfk-icons-note {
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+	}
+}
+
+/*
+ * ── QuietForm (and EditorPage's form) ──────────────────────────────────────
+ *
+ * 🔴 UNLAYERED, unlike everything above, and on purpose: a quiet form must win over the border
+ * and fill an `Input`'s own utilities draw — in `@layer utilities` in a Tailwind app, and as
+ * `.cs-root .border` (two classes) in desk's compiled copy. Only an unlayered rule out-ranks a
+ * layered one, and `:is()` takes its most specific argument (`input:not(…)`, a class and an
+ * element), so `.cbfk-quiet :is(…)` out-ranks two classes as well. It is safe because it is
+ * opt-in — it reaches only what sits inside `.cbfk-quiet`.
+ */
+.cbfk-quiet
+	:is(
+		input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
+		textarea,
+		select
+	) {
+	border-color: transparent;
+	background-color: transparent;
+	box-shadow: none;
+	transition:
+		border-color 120ms ease,
+		background-color 120ms ease;
+}
+
+.cbfk-quiet
+	:is(
+		input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
+		textarea,
+		select
+	):is(:hover, :focus-visible, :focus) {
+	border-color: var(--border);
+	background-color: var(--background);
+}
+
+.cbfk-quiet [data-cb-field-label][data-cb-field-label] {
+	color: var(--muted-foreground);
+	font-size: 0.8125rem;
+	font-weight: 450;
+}
+
+/* A page title in a quiet form: an input marked `data-cb-quiet-title` reads as the heading. */
+.cbfk-quiet input[data-cb-quiet-title][data-cb-quiet-title] {
+	height: auto;
+	min-height: 2.75rem;
+	padding-inline: 0.25rem;
+	font-size: 1.5rem;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+}
+
+/* The preview's tools are a row of small switches, not full-width settings rows. Unlayered for
+   the reason above: a `Switch` label is `w-full justify-between` in its own utilities. */
+.cbfk-page-preview-tools > label[data-cb-tap-target] {
+	width: auto;
+	min-height: 2rem;
+	padding-block: 0;
+	gap: 0.5rem;
+}
+
+.cbfk-page-preview-tools > label[data-cb-tap-target] > span:first-child {
+	color: var(--muted-foreground);
+	font-size: 0.8125rem;
+}

package/src/react/components/formKit.ts

@@ -1,9 +1,18 @@
 /**
  * `cursedbelt/react/form-kit` — the builder-form pieces that draw from their own plain
  * stylesheet (`formKit.css`), so an app with no Tailwind and no `./react` barrel (desk) can
- * mount them. A Tailwind app gets the same five from `cursedbelt/react`.
+ * mount them. A Tailwind app gets the same pieces from `cursedbelt/react`.
  */
+export { EditorPage, type EditorPageProps, QuietForm, type QuietFormProps } from './EditorPage.js';
 export { ExpandableRow, type ExpandableRowProps } from './ExpandableRow.js';
+export {
+  ICON_SETS,
+  IconPicker,
+  type IconPickerProps,
+  type IconSet,
+  iconDataUrl,
+  type PickedIcon,
+} from './IconPicker.js';
 export { FormPreviewLayout, type FormPreviewLayoutProps } from './FormPreviewLayout.js';
 export { KeyBadge, type KeyBadgeProps } from './KeyBadge.js';
 export { RevealAction, type RevealActionProps } from './RevealAction.js';