cursedbelt 5.28.0 → 5.30.0

package/dist/react/components/formKit.css

@@ -0,0 +1,555 @@
+/*
+ * The form kit's own look, as plain CSS — `ExpandableRow`, `SettingsStrip`, `RevealAction`,
+ * `KeyBadge` and `FormPreviewLayout`. Prefix `cbfk-`. Owner's cb-form review, 2026-09-30.
+ *
+ * 🔴 Plain CSS inside `@layer base`, for the reason `searchInput.css` gives at length: desk has
+ * no Tailwind and draws these from this file alone, while a Tailwind app's utilities sit in
+ * `@layer utilities` ABOVE `base`, so a `className` passed to any of these still wins there. An
+ * unlayered rule here would out-rank every utility in every app and could not be overridden.
+ *
+ * Tokens fall back to the plain names an app is most likely to bridge (`--border`,
+ * `--foreground`, `--muted-foreground`, `--muted`, `--card`, `--accent`, `--ring`,
+ * `--radius-sm`) — desk answers those on `.cs-root`, and `test/ui/belt-tokens.test.ts` there
+ * fails if a name this file reads is left unanswered.
+ *
+ * 🔴 Layout switches on the CONTAINER, not the viewport. A builder row lives in a 960px dialog
+ * on a desktop, in a 380px side panel on the same desktop, and in a phone sheet; only the width
+ * it was actually given says whether its controls fit on one line.
+ */
+
+@layer base {
+	/* ── ExpandableRow ─────────────────────────────────────────────────────── */
+
+	.cbfk-row {
+		container-type: inline-size;
+		box-sizing: border-box;
+		min-width: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md, var(--radius-sm, 0.5rem));
+		background-color: var(--card, var(--background));
+		color: var(--foreground);
+		transition: border-color 120ms ease;
+	}
+
+	.cbfk-row[data-expanded="true"] {
+		border-color: var(--border-strong, var(--border));
+	}
+
+	.cbfk-row-head {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 2.75rem;
+		padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+		cursor: pointer;
+	}
+
+	.cbfk-row-lead {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		color: var(--muted-foreground);
+	}
+
+	.cbfk-row-title {
+		display: flex;
+		flex: 1 1 auto;
+		align-items: center;
+		min-width: 0;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25rem;
+	}
+
+	/* A title that IS an input (the builder's name field) fills its slot. */
+	.cbfk-row-title > input,
+	.cbfk-row-title > textarea {
+		flex: 1 1 auto;
+		min-width: 0;
+		width: 100%;
+	}
+
+	.cbfk-row-summary {
+		display: inline-flex;
+		flex: none;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+	}
+
+	/* The type indicator is secondary metadata confirming what the row is, never a heavy
+	   box competing with the name — so a control put here loses its border weight until it
+	   is hovered or focused, and reads in the muted tone. */
+	.cbfk-row-meta {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		min-width: 0;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+
+	.cbfk-row-meta > select,
+	.cbfk-row-meta > input {
+		border-color: transparent;
+		background-color: transparent;
+		color: inherit;
+		transition:
+			border-color 120ms ease,
+			background-color 120ms ease;
+	}
+
+	.cbfk-row-meta > select:hover,
+	.cbfk-row-meta > select:focus-visible,
+	.cbfk-row-meta > input:hover,
+	.cbfk-row-meta > input:focus-visible {
+		border-color: var(--border-strong, var(--border));
+		background-color: var(--background);
+		color: var(--foreground);
+	}
+
+	.cbfk-row-actions {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		gap: 0.125rem;
+	}
+
+	.cbfk-row-toggle {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		width: 2rem;
+		height: 2rem;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		border-radius: var(--radius-sm, 0.375rem);
+		background: transparent;
+		color: var(--muted-foreground);
+		cursor: pointer;
+	}
+
+	.cbfk-row-toggle:hover {
+		background-color: var(--muted, transparent);
+		color: var(--foreground);
+	}
+
+	.cbfk-row-toggle:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 1px;
+	}
+
+	.cbfk-row-toggle svg {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 160ms ease;
+	}
+
+	.cbfk-row[data-expanded="true"] .cbfk-row-toggle svg {
+		transform: rotate(180deg);
+	}
+
+	/* The settings panel — indented so it sits physically UNDER the title it belongs to,
+	   one step quieter than the row, and separated by a hairline rather than a second box. */
+	.cbfk-row-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 0.75rem 0.75rem 0.875rem var(--cbfk-indent, 0.75rem);
+		border-top: 1px solid var(--border-subtle, var(--border));
+		animation: cbfk-reveal 160ms ease-out;
+	}
+
+	.cbfk-row[data-has-lead="true"] {
+		--cbfk-indent: 2.25rem;
+	}
+
+	@keyframes cbfk-reveal {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	/* Thumb targets on a touch screen (DESIGN.md §5): the toggle's reach grows to 44px. */
+	@media (pointer: coarse) {
+		.cbfk-row-toggle {
+			width: 2.75rem;
+			height: 2.75rem;
+		}
+	}
+
+	/*
+	 * Narrow: one line cannot hold a handle, a name, a type picker and three actions, so the
+	 * row becomes a two-line block — handle, name and chevron on line one; the type under the
+	 * name with the utilities at its right, where a thumb reaches them. Two lines, not four:
+	 * a collapsed list on a phone still has to show several rows at once.
+	 */
+	@container (max-width: 30rem) {
+		.cbfk-row-head {
+			display: grid;
+			grid-template-columns: auto minmax(0, 1fr) auto auto;
+			grid-template-areas:
+				"lead title   title   toggle"
+				".    meta    summary actions";
+			row-gap: 0.25rem;
+			align-items: center;
+		}
+
+		.cbfk-row-lead {
+			grid-area: lead;
+		}
+
+		.cbfk-row-title {
+			grid-area: title;
+		}
+
+		.cbfk-row-toggle {
+			grid-area: toggle;
+		}
+
+		.cbfk-row-meta {
+			grid-area: meta;
+		}
+
+		.cbfk-row-summary {
+			grid-area: summary;
+		}
+
+		.cbfk-row-actions {
+			grid-area: actions;
+			justify-content: flex-end;
+		}
+
+		.cbfk-row-panel {
+			padding-left: 0.75rem;
+		}
+	}
+
+	/* ── SettingsStrip ─────────────────────────────────────────────────────── */
+
+	/* Secondary configuration — a required tick, an example value — clustered on one slightly
+	   darker strip so it reads as belonging together and apart from the row's identity. */
+	.cbfk-strip {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem 1rem;
+		box-sizing: border-box;
+		min-inline-size: 0;
+		margin: 0;
+		padding: 0.5rem 0.75rem;
+		border: 0;
+		border-radius: var(--radius-sm, 0.375rem);
+		background-color: var(--surface-sunken, var(--muted));
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+
+	.cbfk-strip-label {
+		flex-basis: 100%;
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	/* An input on the strip is sized to a typical short value, never edge to edge. */
+	.cbfk-strip > input:not([type="checkbox"]):not([type="radio"]),
+	.cbfk-strip > select {
+		/* border-box, or a host with no preflight caps the CONTENT at 28rem and the box overshoots. */
+		box-sizing: border-box;
+		flex: 1 1 14rem;
+		max-width: 28rem;
+		min-width: 0;
+	}
+
+	.cbfk-strip > label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		cursor: pointer;
+	}
+
+	/* ── RevealAction ──────────────────────────────────────────────────────── */
+
+	/* The door into something rarely used: a micro-button line, low contrast at rest, with a
+	   clear hover state — never an empty input sitting open on every row. */
+	.cbfk-reveal {
+		display: inline-flex;
+		align-items: center;
+		align-self: flex-start;
+		gap: 0.25rem;
+		box-sizing: border-box;
+		min-height: 1.75rem;
+		margin: 0;
+		padding: 0 0.5rem 0 0.375rem;
+		border: 1px dashed transparent;
+		border-radius: var(--radius-sm, 0.375rem);
+		background: transparent;
+		color: var(--muted-foreground);
+		font: inherit;
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition:
+			color 120ms ease,
+			border-color 120ms ease,
+			background-color 120ms ease;
+	}
+
+	.cbfk-reveal:hover {
+		border-color: var(--border);
+		background-color: var(--muted, transparent);
+		color: var(--accent, var(--foreground));
+	}
+
+	.cbfk-reveal:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 1px;
+	}
+
+	.cbfk-reveal svg {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	@media (pointer: coarse) {
+		.cbfk-reveal {
+			min-height: 2.75rem;
+		}
+	}
+
+	/* ── KeyBadge ──────────────────────────────────────────────────────────── */
+
+	/* A technical key as metadata: mono, muted, a low-contrast pill. 12px, not the 10px a
+	   mock-up might ask for — DESIGN.md §4 floors secondary text at 12px. */
+	.cbfk-key {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		box-sizing: border-box;
+		max-width: 100%;
+		padding: 0.0625rem 0.375rem;
+		border-radius: var(--radius-sm, 0.25rem);
+		background-color: var(--muted, var(--surface-sunken));
+		color: var(--muted-foreground);
+		font-family: var(
+			--font-mono,
+			ui-monospace,
+			SFMono-Regular,
+			Menlo,
+			Consolas,
+			monospace
+		);
+		font-size: 0.75rem;
+		font-weight: 400;
+		line-height: 1.125rem;
+		letter-spacing: 0.02em;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.cbfk-key[data-uppercase="true"] {
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+
+	.cbfk-keyline {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		min-width: 0;
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+		font-weight: 400;
+		line-height: 1.25rem;
+	}
+
+	/* ── FormPreviewLayout ─────────────────────────────────────────────────── */
+
+	.cbfk-split {
+		container-type: inline-size;
+		box-sizing: border-box;
+		min-width: 0;
+	}
+
+	.cbfk-split-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.cbfk-split-form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		min-width: 0;
+	}
+
+	/* Narrow: the preview comes FIRST and pins to the top of the scroll, so the card can be
+	   watched while the fields below it are edited. Opaque, so what scrolls under it does not
+	   show through. */
+	.cbfk-split-preview {
+		position: sticky;
+		/* Sticky stops at the scroller's PADDING edge, so inside a padded scroller (every dialog
+		   body) the bar would pin 16px down with the form showing above it. The host sets this
+		   to minus its body's top padding: belt `Modal` and desk's `.cs-modal` both do. */
+		top: var(--cbfk-sticky-top, 0);
+		z-index: var(--z-sticky, 100);
+		order: -1;
+		min-width: 0;
+		margin: 0 -0.25rem;
+		padding: 0.25rem;
+		background-color: var(--cbfk-sticky-bg, var(--popover, var(--card, var(--background))));
+	}
+
+	.cbfk-split-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		box-sizing: border-box;
+		width: 100%;
+		min-height: 2.75rem;
+		margin: 0;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md, var(--radius-sm, 0.5rem));
+		background-color: var(--card, var(--background));
+		color: var(--foreground);
+		font: inherit;
+		font-size: 0.8125rem;
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.cbfk-split-bar:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 1px;
+	}
+
+	.cbfk-split-bar-summary {
+		display: flex;
+		flex: 1 1 auto;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.cbfk-split-bar-label {
+		flex: none;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	.cbfk-split-bar svg {
+		flex: none;
+		width: 1rem;
+		height: 1rem;
+		color: var(--muted-foreground);
+		transition: transform 160ms ease;
+	}
+
+	.cbfk-split[data-preview-open="true"] .cbfk-split-bar svg {
+		transform: rotate(180deg);
+	}
+
+	.cbfk-split-body {
+		max-height: 45dvh;
+		margin-top: 0.5rem;
+		/* A card taller than 45dvh scrolls inside the pinned bar rather than covering the form.
+		   guardrails-ignore no-raw-overflow: plain CSS for a no-Tailwind host — ScrollArea is a
+		   React component and this is one capped box inside a sticky bar, with no keyboard to clear. */
+		overflow: auto;
+		overscroll-behavior: contain;
+	}
+
+	.cbfk-split[data-preview-open="false"] .cbfk-split-body {
+		display: none;
+	}
+
+	.cbfk-split-head {
+		display: none;
+		margin: 0 0 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	.cbfk-split-below {
+		min-width: 0;
+		margin-top: 0.5rem;
+	}
+
+	/*
+	 * Wide: twelve columns, the form on seven and the live preview on five, sticky at the top
+	 * of its column. The bar is gone (the preview is simply there) and the body is never
+	 * collapsed, whatever the narrow toggle last said.
+	 */
+	@container (min-width: 52rem) {
+		.cbfk-split-grid {
+			display: grid;
+			grid-template-columns: repeat(12, minmax(0, 1fr));
+			align-items: start;
+			gap: 1.5rem;
+		}
+
+		.cbfk-split-form {
+			grid-column: span 7 / span 7;
+		}
+
+		.cbfk-split-preview {
+			order: 0;
+			grid-column: span 5 / span 5;
+			margin: 0;
+			padding: 0;
+			background: transparent;
+		}
+
+		.cbfk-split-bar {
+			display: none;
+		}
+
+		.cbfk-split-head {
+			display: block;
+		}
+
+		/* The builder runs under both columns. A grid item's sticky box is held in its own
+		   area, so the preview beside the short fields stays in that first row. */
+		.cbfk-split-below {
+			grid-column: 1 / -1;
+		}
+
+		.cbfk-split-body,
+		.cbfk-split[data-preview-open="false"] .cbfk-split-body {
+			display: block;
+			max-height: none;
+			margin-top: 0;
+			overflow: visible;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cbfk-row-panel {
+			animation: none;
+		}
+
+		.cbfk-row-toggle svg,
+		.cbfk-split-bar svg {
+			transition: none;
+		}
+	}
+}

package/dist/react/components/formKit.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `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`.
+ */
+export { ExpandableRow, type ExpandableRowProps } from './ExpandableRow.js';
+export { FormPreviewLayout, type FormPreviewLayoutProps } from './FormPreviewLayout.js';
+export { KeyBadge, type KeyBadgeProps } from './KeyBadge.js';
+export { RevealAction, type RevealActionProps } from './RevealAction.js';
+export { SettingsStrip, type SettingsStripProps } from './SettingsStrip.js';
+export { DESCRIPTION_FOLD_CHARS, declareFieldWidth, type FieldWidth, inputTypeWidth, naturalFieldWidth, } from '../lib/field.js';
+//# sourceMappingURL=formKit.d.ts.map

package/dist/react/components/formKit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formKit.d.ts","sourceRoot":"","sources":["../../../src/react/components/formKit.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG5E,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,KAAK,UAAU,EACf,cAAc,EACd,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/dist/react/components/formKit.js

@@ -0,0 +1,14 @@
+/**
+ * `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`.
+ */
+export { ExpandableRow } from './ExpandableRow.js';
+export { FormPreviewLayout } from './FormPreviewLayout.js';
+export { KeyBadge } from './KeyBadge.js';
+export { RevealAction } from './RevealAction.js';
+export { SettingsStrip } from './SettingsStrip.js';
+// The width rule `Field` applies, for an app whose field row is its own (desk's): one answer to
+// "how wide may this control grow", not a copy of it per app.
+export { DESCRIPTION_FOLD_CHARS, declareFieldWidth, inputTypeWidth, naturalFieldWidth, } from '../lib/field.js';
+//# sourceMappingURL=formKit.js.map

package/dist/react/components/formKit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formKit.js","sourceRoot":"","sources":["../../../src/react/components/formKit.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAA+B,MAAM,wBAAwB,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,YAAY,EAA0B,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAC;AAC5E,gGAAgG;AAChG,8DAA8D;AAC9D,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EAEjB,cAAc,EACd,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/dist/react/filter-rail/RailSection.d.ts

@@ -48,8 +48,8 @@ export interface RailSectionProps {
 }
 /**
  * The open state of a remembered section: `localStorage` under `key`, re-read when the app seeds
- * it, written and ANNOUNCED on every toggle. `key === undefined` is a plain `useState`-free
- * default — the hook is still called unconditionally, so a section may gain a key later.
+ * it, written and ANNOUNCED on every toggle (`useRememberedPreference`). `key === undefined` is a
+ * plain default — the hook is still called unconditionally, so a section may gain a key later.
  */
 export declare function useRailSectionOpen(key: string | undefined, defaultOpen?: boolean): [open: boolean, setOpen: (open: boolean) => void];
 export declare function RailSection({ label, children, action, open: controlledOpen, onOpenChange, persistKey, defaultOpen, collapsible, className, headerClassName, contentClassName, }: RailSectionProps): ReactNode;

package/dist/react/filter-rail/RailSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RailSection.d.ts","sourceRoot":"","sources":["../../../src/react/filter-rail/RailSection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAsD,MAAM,OAAO,CAAC;AAK3F;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAiBD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,WAAW,UAAO,GACjB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,CAgDnD;AAOD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,UAAU,EACV,WAAkB,EAClB,WAAkB,EAClB,SAAS,EACT,eAAe,EACf,gBAAgB,GACjB,EAAE,gBAAgB,GAAG,SAAS,CAuE9B"}
+{"version":3,"file":"RailSection.d.ts","sourceRoot":"","sources":["../../../src/react/filter-rail/RailSection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAKrE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,WAAW,UAAO,GACjB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,CAKnD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,UAAU,EACV,WAAkB,EAClB,WAAkB,EAClB,SAAS,EACT,eAAe,EACf,gBAAgB,GACjB,EAAE,gBAAgB,GAAG,SAAS,CAuE9B"}

package/dist/react/filter-rail/RailSection.js

@@ -1,78 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from 'lucide-react';
-import { useCallback, useId, useState, useSyncExternalStore } from 'react';
-import { announcePreference, onPreferenceSeed } from '../media-gallery/preferenceBus.js';
+import { useCallback, useId, useState } from 'react';
+import { useRememberedPreference } from '../media-gallery/rememberedPreference.js';
 import { cn } from '../lib/cn.js';
 import { TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
 /** The stored value for "shut". Anything else — absent included — is the section's default. */
 const SHUT = 'closed';
 const OPEN = 'open';
-/** Page memory first (a value `localStorage` refused to keep), then `localStorage`. */
-function readStored(key) {
-    const kept = memory.get(key);
-    if (kept !== undefined)
-        return kept;
-    try {
-        return globalThis.localStorage?.getItem(key) ?? null;
-    }
-    catch {
-        return null;
-    }
-}
 /**
  * The open state of a remembered section: `localStorage` under `key`, re-read when the app seeds
- * it, written and ANNOUNCED on every toggle. `key === undefined` is a plain `useState`-free
- * default — the hook is still called unconditionally, so a section may gain a key later.
+ * it, written and ANNOUNCED on every toggle (`useRememberedPreference`). `key === undefined` is a
+ * plain default — the hook is still called unconditionally, so a section may gain a key later.
  */
 export function useRailSectionOpen(key, defaultOpen = true) {
-    const subscribe = useCallback((changed) => {
-        if (!key)
-            return () => { };
-        const offSeed = onPreferenceSeed((keys) => {
-            if (!keys.includes(key))
-                return;
-            // The seed is the authority now; a value parked in page memory must not shadow it.
-            memory.delete(key);
-            changed();
-        });
-        // Another tab on the same origin toggled it.
-        const onStorage = (event) => {
-            if (event.key === key)
-                changed();
-        };
-        globalThis.addEventListener?.('storage', onStorage);
-        local.add(changed);
-        return () => {
-            offSeed();
-            globalThis.removeEventListener?.('storage', onStorage);
-            local.delete(changed);
-        };
-    }, [key]);
-    const stored = useSyncExternalStore(subscribe, () => (key ? readStored(key) : null), () => null);
+    const [stored, setStored] = useRememberedPreference(key);
     const open = stored === SHUT ? false : stored === OPEN ? true : defaultOpen;
-    const setOpen = useCallback((next) => {
-        if (!key)
-            return;
-        const value = next ? OPEN : SHUT;
-        try {
-            globalThis.localStorage?.setItem(key, value);
-            memory.delete(key);
-        }
-        catch {
-            // Unremembered across reloads, but it must still MOVE: keep it in page memory, which
-            // `readStored` answers from first.
-            memory.set(key, value);
-        }
-        for (const changed of [...local])
-            changed();
-        announcePreference(key, value);
-    }, [key]);
+    const setOpen = useCallback((next) => setStored(next ? OPEN : SHUT), [setStored]);
     return [open, setOpen];
 }
-/** Every mounted remembered section, so a toggle re-renders the others sharing its key. */
-const local = new Set();
-/** Where a value goes when `localStorage` throws (Safari private mode, a sandboxed iframe). */
-const memory = new Map();
 export function RailSection({ label, children, action, open: controlledOpen, onOpenChange, persistKey, defaultOpen = true, collapsible = true, className, headerClassName, contentClassName, }) {
     const [remembered, setRemembered] = useRailSectionOpen(persistKey, defaultOpen);
     const [plain, setPlain] = useState(defaultOpen);