@wtfalch/design 0.7.0 → 0.9.0

package/dist/components/Shell.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The frame a signed-in surface stands in: a header, and the page under it.
+ *
+ * Three apps have one, all called `shell.tsx`, all the same six elements. The
+ * differences were a wider variant in manage and where each put the theme
+ * control, which is a prop and a slot, not three components.
+ *
+ * **It gates nothing, and that is worth stating because a frame looks like
+ * the place to.** A layout cannot reliably stop the page beneath it
+ * rendering, so every page decides for itself who may see it. Putting a check
+ * here would read as protection and provide none. All three app docblocks say
+ * this; it moves with the component.
+ *
+ * **A `<header>` and a `<main>`, so the landmarks exist.** Hand-built
+ * versions reached for `<div>` often enough that this is the second reason to
+ * have one: "skip to content" and a screen reader's landmark list both come
+ * from the elements, and neither is visible to the person who wrote the div.
+ *
+ * Server-renderable: no hooks, no handlers. `who` and `brand` are slots, so
+ * the client parts an app needs -- a user menu, the theme switch -- are the
+ * app's to pass and stay its own client boundaries.
+ */
+export default function Shell({ brand, who, nav, wide = false, children, className, }) {
+    /* Utilities: this component is layout and nothing else, which is where they
+       earn their place. The measure is the one thing that is not a utility --
+       it is a number two elements have to agree on, so it is a custom property
+       on the frame rather than a literal repeated in three class lists, which
+       is how manage ended up with `head-inner-wide` and `main-wide` as separate
+       classes and had to remember both. */
+    const measure = wide ? 'max-w-[var(--shell-measure-wide)]' : 'max-w-[var(--shell-measure)]';
+    const band = `w-full mx-auto px-4 ${measure}`;
+    return (_jsxs("div", { className: ['shell flex flex-col min-h-screen surface-bg text-text', className]
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("header", { className: "flex-none border-b border-border surface-panel", children: [_jsxs("div", { className: `${band} flex items-center justify-between gap-4 py-3 min-w-0`, children: [brand, who && _jsx("div", { className: "flex items-center gap-3 min-w-0", children: who })] }), nav && _jsx("div", { className: `${band} pb-2`, children: nav })] }), _jsx("main", { className: `${band} flex-1 py-6 min-w-0`, children: children })] }));
+}

package/dist/components/SizeGrid.js

@@ -41,8 +41,20 @@ export default function SizeGrid({ value, max = { cols: 3, rows: 3 }, disabled =
         for (let col = 1; col <= extent.cols; col++) {
             const on = col <= shown.cols && row <= shown.rows;
             const chosen = col <= value.cols && row <= value.rows;
-            cells.push(_jsx("button", { type: "button", className: `size-cell${on ? ' on' : ''}${chosen && !hover ? ' chosen' : ''}`, disabled: disabled, "aria-label": `${col} by ${row}`, onMouseEnter: () => !disabled && setHover({ cols: col, rows: row }), onFocus: () => !disabled && setHover({ cols: col, rows: row }), onClick: () => onChange({ cols: col, rows: row }) }, `${col}x${row}`));
+            cells.push(_jsx("button", { type: "button", 
+                /* `size-cell` stays as the hook for the two states: `on` is a fill
+                   from `color-mix`, which is not a utility. The rest -- a painted
+                   cell with no contents, so it says it is a block rather than
+                   taking a control's arrangement -- is here. */
+                className: [
+                    'size-cell block w-[18px] h-[14px] p-0 rounded-sm border border-border surface-panel-2 cursor-pointer',
+                    'disabled:cursor-default disabled:opacity-50',
+                    on ? 'on' : '',
+                    chosen && !hover ? 'border-accent' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), disabled: disabled, "aria-label": `${col} by ${row}`, onMouseEnter: () => !disabled && setHover({ cols: col, rows: row }), onFocus: () => !disabled && setHover({ cols: col, rows: row }), onClick: () => onChange({ cols: col, rows: row }) }, `${col}x${row}`));
         }
     }
-    return (_jsxs("div", { className: "size-grid-wrap", children: [_jsx("div", { className: "size-grid", style: { gridTemplateColumns: `repeat(${extent.cols}, 1fr)` }, onMouseLeave: () => setHover(null), children: cells }), _jsxs("span", { className: "set-hint mono", children: [shown.cols, " \u00D7 ", shown.rows, (extent.cols === max.cols || extent.rows === max.rows) && (_jsxs("span", { className: "size-ceiling", children: [' ', "\u00B7 max ", max.cols, "\u00D7", max.rows] }))] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "grid gap-1", style: { gridTemplateColumns: `repeat(${extent.cols}, 1fr)` }, onMouseLeave: () => setHover(null), children: cells }), _jsxs("span", { className: "set-hint mono", children: [shown.cols, " \u00D7 ", shown.rows, (extent.cols === max.cols || extent.rows === max.rows) && (_jsxs("span", { className: "opacity-[0.55]", children: [' ', "\u00B7 max ", max.cols, "\u00D7", max.rows] }))] })] }));
 }

package/dist/components/Stat.js

@@ -26,6 +26,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * A bordered tile inside a bordered row is two boxes saying one thing.
  */
 export default function Stat({ label, value, note, tone, look = 'tile', className, }) {
-    const classes = ['stat', look === 'bare' ? 'stat-bare' : '', className].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: classes, "data-tone": tone, children: [_jsx("p", { className: "stat-label", children: label }), _jsx("p", { className: "stat-value", children: value }), note && _jsx("p", { className: "stat-note", children: note })] }));
+    /* Utilities, so the tile's shape reads where it is drawn. `bare` states
+       the compact shape rather than adding a class that undoes the tile's --
+       which is the mistake the old element reset made across this package.
+       `stat` and `stat-value` stay as hooks: the tone is an attribute on the
+       tile colouring a child, which is a relationship, and a utility is a
+       property on one element. */
+    const tile = look === 'bare'
+        ? 'grid gap-0 leading-[1.25]'
+        : 'grid gap-1 p-4 border border-border rounded-md surface-panel';
+    const classes = ['stat', tile, '[&>p]:m-0', className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, "data-tone": tone, children: [_jsx("p", { className: "text-xs text-muted", children: label }), _jsx("p", { className: `stat-value font-strong tabular-nums ${look === 'bare' ? 'text-sm' : 'text-lg'}`, children: value }), note && _jsx("p", { className: "text-xs text-muted", children: note })] }));
 }

package/dist/components/Table.js

@@ -3,7 +3,13 @@ export default function Table({ caption, columns, rows, keyOf, empty, className,
     if (!rows.length) {
         return empty ? _jsx("div", { className: "set-hint rows-empty", children: empty }) : null;
     }
-    return (_jsx("div", { className: `table-scroll${className ? ` ${className}` : ''}`, children: _jsxs("table", { className: "table", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { scope: "col", style: { width: c.width, textAlign: c.align === 'end' ? 'right' : undefined }, children: _jsx("span", { className: c.quiet ? 'sr-only' : undefined, children: c.header }) }, c.header))) }) }), _jsx("tbody", { children: rows.map((item) => (_jsx("tr", { children: columns.map((c, i) => {
+    return (
+    /* The one thing about a table that is a property of one element. Its
+       cells, headings and last-row rule are structural -- `th:first-child`,
+       `tbody tr:last-child td` -- and a structural pseudo-class is the right
+       tool for them: expressing the same thing with utilities means this
+       component doing index arithmetic to work out what CSS already knows. */
+    _jsx("div", { className: ['overflow-x-auto', className].filter(Boolean).join(' '), children: _jsxs("table", { className: "data-table", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { scope: "col", style: { width: c.width, textAlign: c.align === 'end' ? 'right' : undefined }, children: _jsx("span", { className: c.quiet ? 'sr-only' : undefined, children: c.header }) }, c.header))) }) }), _jsx("tbody", { children: rows.map((item) => (_jsx("tr", { children: columns.map((c, i) => {
                             /* The first cell is the row's name, so it is a `<th scope="row">`
                                -- that is what lets a reader ask "which row am I in" and get
                                an answer instead of a cell index. */

package/dist/components/Textarea.js

@@ -8,15 +8,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * this component keeps it by rendering the element.
  *
  * Same contract as `Input`: a plain `<textarea>` so every element rule in the
- * stylesheet keeps working, and its `id`, `aria-describedby` and `aria-invalid`
- * come from `Field`'s render prop rather than from a context. On its own it
- * needs an `aria-label`, for the same reason `Input` does.
+ * stylesheet keeps working, and its `id`, `aria-describedby` and
+ * `aria-invalid` come from the `Field` above it -- handed in by a render
+ * prop, or read from context when the caller passed plain children. On its
+ * own it needs an `aria-label`, for the same reason `Input` does.
  */
 import { forwardRef } from 'react';
+import { useFieldWiring } from './fieldWiring.js';
 const Textarea = forwardRef(function Textarea({ size = 'md', mono, className, ...rest }, ref) {
     const classes = [size === 'md' ? '' : `size-${size}`, mono ? 'mono' : '', className ?? '']
         .filter(Boolean)
         .join(' ');
-    return _jsx("textarea", { ref: ref, className: classes || undefined, ...rest });
+    /* Explicit props win; this is the fallback. After `rest` in the spread,
+       because a key present with an undefined value still overwrites. */
+    const field = useFieldWiring();
+    const wired = {
+        id: rest.id ?? field?.id,
+        'aria-describedby': rest['aria-describedby'] ?? field?.['aria-describedby'],
+        'aria-invalid': rest['aria-invalid'] ?? field?.['aria-invalid'],
+    };
+    return _jsx("textarea", { ref: ref, className: classes || undefined, ...rest, ...wired });
 });
 export default Textarea;

package/dist/components/ThemeSwitch.d.ts

@@ -0,0 +1,19 @@
+import type { Product } from '../products/index.js';
+import type { BrandName } from './brandMarks.js';
+export default function ThemeSwitch({ product, only, label, labelHidden, size, storageKey, onChange, className, }: {
+    /** Whose themes to offer. A registered name, or a `Product` from
+     *  `defineProduct` for an app with its own palette. */
+    product: BrandName | Product;
+    /** A subset of the product's themes, in the order to show them. */
+    only?: readonly string[];
+    label?: string;
+    /** The label becomes the accessible name and is not drawn, for a header
+     *  where the control's meaning is obvious from its contents. */
+    labelHidden?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    storageKey?: string;
+    /** For an app that has something else to update. The theme is already
+     *  applied by the time this runs. */
+    onChange?: (theme: string) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/ThemeSwitch.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. */
+/**
+ * The control that changes the theme.
+ *
+ * All three apps have one and the first forty lines are the same in each: the
+ * guarded `localStorage` read, the guarded write, the assignment to
+ * `document.documentElement.dataset.theme`. What differed was the wrapper and
+ * the label -- one says "Appearance", one says "Theme" -- which is drift, not
+ * design.
+ *
+ * **The choice lives in the browser, not the account.** It is a preference
+ * about this screen rather than a fact about the person: the same account on
+ * a laptop in a bright room and a phone at night wants two answers. That is
+ * also why it needs no server round trip and no session.
+ *
+ * **The default is not stored.** A browser that never chose follows whatever
+ * the default becomes, so changing a product's default reaches everyone who
+ * never expressed an opinion, rather than only new visitors.
+ *
+ * **It writes `data-theme` and does not call `applyTheme`.** The palettes are
+ * already on the page as CSS from `productCss`; the attribute is the switch.
+ * `applyTheme` writes custom properties one by one and is for the case with
+ * no stylesheet to lean on.
+ *
+ * **`aria-labelledby`, or an `aria-label`, but never both and never neither.**
+ * The apps passed `aria-label="Appearance"` beside a visible "Appearance"
+ * span, which is the same string written twice -- exactly the drift `Field`
+ * exists to stop. Given `label`, this renders it and points the control at
+ * it; given `labelHidden`, the string becomes the accessible name and is not
+ * drawn.
+ */
+import { useEffect, useId, useState } from 'react';
+import { THEME_STORAGE_KEY, storedTheme, themeChoices } from '../themes/choice.js';
+import Select from './Select.js';
+export default function ThemeSwitch({ product, only, label = 'Appearance', labelHidden = false, size = 'sm', storageKey = THEME_STORAGE_KEY, onChange, className, }) {
+    const choices = themeChoices(product, only);
+    const labelId = useId();
+    /* The server cannot know what this browser stored, so the first render has
+       to match what the server sent -- the attribute the blocking script wrote
+       is on `<html>` already, and reading `localStorage` during render would
+       be a hydration mismatch. The effect catches the control up. */
+    const [choice, setChoice] = useState(() => choices[0]?.id ?? '');
+    useEffect(() => {
+        setChoice(storedTheme(product, { only, storageKey }));
+        // The product object is rebuilt per render when passed inline; its
+        // identity is not the dependency, what it resolves to is.
+    }, [product, only, storageKey]);
+    const choose = (next) => {
+        if (!choices.some((c) => c.id === next))
+            return;
+        setChoice(next);
+        try {
+            localStorage.setItem(storageKey, next);
+        }
+        catch {
+            /* A browser blocking site data still gets the theme, just not the
+               memory of it. Failing the change over the storage would be worse. */
+        }
+        document.documentElement.dataset.theme = next;
+        onChange?.(next);
+    };
+    return (_jsxs("div", { className: ['theme-switch', className].filter(Boolean).join(' '), children: [_jsx("span", { className: "theme-switch-label", id: labelId, hidden: labelHidden, children: label }), _jsx(Select, { "aria-labelledby": labelHidden ? undefined : labelId, "aria-label": labelHidden ? label : undefined, size: size, value: choice, onChange: (e) => choose(e.target.value), children: choices.map((c) => (_jsx("option", { value: c.id, children: c.label }, c.id))) })] }));
+}

package/dist/components/Toast.js

@@ -115,5 +115,5 @@ export function ToastHost({ children }) {
        React error. */
     if (outer)
         return _jsx(_Fragment, { children: children });
-    return (_jsxs(Ctx.Provider, { value: push, children: [children, _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: polite }), _jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: assertive }), _jsx(ToastRegion, { queue: queue, className: "toasts", children: ({ toast }) => (_jsxs(AriaToast, { toast: toast, className: `toast toast-${toast.content.tone}`, children: [_jsx(Icon, { name: MARK[toast.content.tone], size: 16, className: "toast-mark" }), _jsx(ToastContent, { className: "grow", children: _jsx(Text, { slot: "title", children: toast.content.text }) }), _jsx(Button, { slot: "close", className: "ghost size-sm", "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 14 }) })] })) })] }));
+    return (_jsxs(Ctx.Provider, { value: push, children: [children, _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: polite }), _jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: assertive }), _jsx(ToastRegion, { queue: queue, className: "toasts", children: ({ toast }) => (_jsxs(AriaToast, { toast: toast, className: `toast toast-${toast.content.tone}`, children: [_jsx(Icon, { name: MARK[toast.content.tone], size: 16, className: "toast-mark" }), _jsx(ToastContent, { className: "ctl-grow", children: _jsx(Text, { slot: "title", children: toast.content.text }) }), _jsx(Button, { slot: "close", className: "toast-close", "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 14 }) })] })) })] }));
 }

package/dist/components/Tooltip.js

@@ -58,12 +58,26 @@ export default function Tooltip({ label, align = 'right', mark, className, child
        is also why `overflow: hidden` on any ancestor no longer clips it -- the
        Permissions pane's horizontal scrollbar, found by hiding one class at a
        time, was this box sitting in the scrollable overflow. */
-    return (_jsxs(TooltipTrigger, { delay: 0, closeDelay: 150, children: [_jsx(Focusable, { children: _jsx("span", { className: `explain explain-${align}${className ? ` ${className}` : ''}`, 
+    return (_jsxs(TooltipTrigger, { delay: 0, closeDelay: 150, children: [_jsx(Focusable, { children: _jsx("span", { 
+                    /* `explain` stays as the hook: the mark brightens on hover and on
+                       focus of this element, which is a parent state reaching a child.
+                       The rest is this element's own. `text-transform` and
+                       `letter-spacing` are reset because one of these sits inside a
+                       heading, and headings here are uppercase and tracked out. */
+                    className: [
+                        'explain',
+                        `explain-${align}`,
+                        'relative flex-none inline-flex items-center ml-2 cursor-help',
+                        'normal-case tracking-normal font-normal',
+                        className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '), 
                     /* A role, because a name on a role-less span is prohibited -- axe's
                        `aria-prohibited-attr`, found the first time this was scanned. `img`
                        rather than `button`: the mark is a glyph that reveals help, not a
                        control that does something, and `button` would promise an action
                        and -- inside the `<label>` rows these sit in -- invite a click that
                        the label forwards to the setting behind it. */
-                    role: "img", "aria-label": mark ? label : `About ${label}`, children: mark ?? (_jsx("span", { className: "explain-mark", "aria-hidden": "true", children: "?" })) }) }), _jsx(AriaTooltip, { className: "explain-tip", placement: align === 'left' ? 'bottom end' : 'bottom start', offset: 8, crossOffset: align === 'left' ? 6 : -6, children: children })] }));
+                    role: "img", "aria-label": mark ? label : `About ${label}`, children: mark ?? (_jsx("span", { className: "explain-mark w-[18px] h-[18px] rounded-full border border-border text-muted text-xs leading-[16px] text-center", "aria-hidden": "true", children: "?" })) }) }), _jsx(AriaTooltip, { className: "explain-tip", placement: align === 'left' ? 'bottom end' : 'bottom start', offset: 8, crossOffset: align === 'left' ? 6 : -6, children: children })] }));
 }

package/dist/components/Tour.js

@@ -111,5 +111,5 @@ export default function Tour({ stops, onDone, storageKey, }) {
                     height: box.height + 12,
                 } }), _jsxs("div", { ref: card, className: "tour-card", style: style, 
                 // biome-ignore lint/a11y/useSemanticElements: a <dialog> brings the top layer, ::backdrop and showModal() focus semantics; this is an anchored coach-mark card that positions itself and manages its own focus, so the role is the faithful choice.
-                role: "dialog", "aria-modal": "true", "aria-labelledby": "tour-title", tabIndex: -1, children: [_jsx("strong", { id: "tour-title", className: "tour-title", children: stop.title }), _jsx("p", { className: "tour-body", children: stop.body }), _jsxs("div", { className: "tour-actions", children: [_jsxs("span", { className: "tour-count mono", children: [at + 1, " of ", live.length] }), _jsx("span", { className: "grow" }), _jsx(Button, { kind: "ghost", size: "sm", onPress: finish, children: "Skip" }), _jsx(Button, { kind: "primary", size: "sm", onPress: next, children: at + 1 < live.length ? 'Next' : 'Done' })] })] })] }), document.body);
+                role: "dialog", "aria-modal": "true", "aria-labelledby": "tour-title", tabIndex: -1, children: [_jsx("strong", { id: "tour-title", className: "tour-title", children: stop.title }), _jsx("p", { className: "tour-body", children: stop.body }), _jsxs("div", { className: "tour-actions", children: [_jsxs("span", { className: "tour-count mono", children: [at + 1, " of ", live.length] }), _jsx("span", { className: "ctl-grow" }), _jsx(Button, { kind: "ghost", size: "sm", onPress: finish, children: "Skip" }), _jsx(Button, { kind: "primary", size: "sm", onPress: next, children: at + 1 < live.length ? 'Next' : 'Done' })] })] })] }), document.body);
 }

package/dist/components/fieldWiring.d.ts

@@ -0,0 +1,44 @@
+/**
+ * What a `Field` tells the control inside it.
+ *
+ * Its own module for the reason `iconNames.ts` and `tourMarker.ts` are:
+ * `fastRefresh.test.ts` holds every component module to exporting its
+ * component and nothing else, because a module exporting a value beside a
+ * component loses its Fast Refresh boundary and editing it re-runs every
+ * importer instead of swapping the component in place.
+ *
+ * The context exists so `Field`'s children can be elements rather than a
+ * function. A function cannot cross the server boundary, so the render prop
+ * made every page with a form a client component whether or not it needed to
+ * be -- which is the line all three consuming apps have in their
+ * `design.ts`.
+ */
+export interface FieldWiring {
+    id: string;
+    'aria-describedby': string | undefined;
+    'aria-invalid': boolean | undefined;
+    /** The label element's own id, for a control a `<label for>` cannot name.
+     *
+     *  `htmlFor` is enough for an `<input>`, which is what almost every caller
+     *  wraps. It is not enough for `Select`, or for anything else built on a
+     *  `<button>`: a button takes its accessible name from its *contents*, and
+     *  a `<label for>` pointing at one is ignored by the name computation. A
+     *  caller that put a `Select` in a `Field` got a label on screen and a
+     *  control announcing only its current value — and the workaround was an
+     *  `aria-label` repeating the label string, which is two literals and two
+     *  chances to drift apart. That drift is exactly the bug `Field` exists to
+     *  prevent, so: pass this as `aria-labelledby` and there is one string. */
+    labelId: string;
+}
+/** `null` outside a `Field`, so a control can tell "no field around me" from
+ *  "a field that wired me with nothing". */
+export declare const FieldWiringContext: import("react").Context<FieldWiring | null>;
+/**
+ * What the `Field` above this control wired, if there is one.
+ *
+ * For the package's own controls, which apply it when the caller has not
+ * named an `id` themselves. A consumer building its own control can use it
+ * for the same reason: it is how a control gets a label without the caller
+ * threading four attributes by hand.
+ */
+export declare function useFieldWiring(): FieldWiring | null;

package/dist/components/fieldWiring.js

@@ -0,0 +1,30 @@
+/**
+ * What a `Field` tells the control inside it.
+ *
+ * Its own module for the reason `iconNames.ts` and `tourMarker.ts` are:
+ * `fastRefresh.test.ts` holds every component module to exporting its
+ * component and nothing else, because a module exporting a value beside a
+ * component loses its Fast Refresh boundary and editing it re-runs every
+ * importer instead of swapping the component in place.
+ *
+ * The context exists so `Field`'s children can be elements rather than a
+ * function. A function cannot cross the server boundary, so the render prop
+ * made every page with a form a client component whether or not it needed to
+ * be -- which is the line all three consuming apps have in their
+ * `design.ts`.
+ */
+import { createContext, useContext } from 'react';
+/** `null` outside a `Field`, so a control can tell "no field around me" from
+ *  "a field that wired me with nothing". */
+export const FieldWiringContext = createContext(null);
+/**
+ * What the `Field` above this control wired, if there is one.
+ *
+ * For the package's own controls, which apply it when the caller has not
+ * named an `id` themselves. A consumer building its own control can use it
+ * for the same reason: it is how a control gets a label without the caller
+ * threading four attributes by hand.
+ */
+export function useFieldWiring() {
+    return useContext(FieldWiringContext);
+}

package/dist/index.d.ts

@@ -36,7 +36,10 @@ export { DangerAction, default as DangerZone } from './components/DangerZone.js'
 export { default as Dialog } from './components/Dialog.js';
 export { default as Empty } from './components/Empty.js';
 export { default as Field } from './components/Field.js';
-export type { FieldWiring } from './components/Field.js';
+/** The wiring a `Field` hands its control, and the hook that reads it —
+ *  its own module, so `Field.tsx` keeps its Fast Refresh boundary. */
+export { useFieldWiring } from './components/fieldWiring.js';
+export type { FieldWiring } from './components/fieldWiring.js';
 export { default as Icon } from './components/Icon.js';
 /** A person in one line -- initials, name, address -- and the two pure
  *  functions behind the disc, exported so a caller colouring something else
@@ -72,6 +75,8 @@ export { default as ScrollArea } from './components/ScrollArea.js';
 export type { Props as ScrollAreaProps } from './components/ScrollArea.js';
 export { default as Select } from './components/Select.js';
 export { default as SizeGrid } from './components/SizeGrid.js';
+/** The frame a signed-in surface stands in. Gates nothing, on purpose. */
+export { default as Shell } from './components/Shell.js';
 export { default as Skeleton } from './components/Skeleton.js';
 /** One figure, with what it counts over it. Three apps drew this before it
  *  was here. */
@@ -86,6 +91,10 @@ export type { Column } from './components/Table.js';
 export { default as Tabs } from './components/Tabs.js';
 export type { Tab, TabGroup } from './components/Tabs.js';
 export { default as Textarea } from './components/Textarea.js';
+/** The theme control, and the blocking script that beats it to the paint. */
+export { default as ThemeSwitch } from './components/ThemeSwitch.js';
+export { THEME_STORAGE_KEY, themeChoiceScript, themeChoices, storedTheme } from './themes/choice.js';
+export type { ThemeChoice } from './themes/choice.js';
 export type { Props as TextareaProps } from './components/Textarea.js';
 /** `ToastHost` nests: one inside another renders through, so a package can
  *  wrap itself and still leave an application with a single region. */

package/dist/index.js

@@ -33,6 +33,9 @@ export { DangerAction, default as DangerZone } from './components/DangerZone.js'
 export { default as Dialog } from './components/Dialog.js';
 export { default as Empty } from './components/Empty.js';
 export { default as Field } from './components/Field.js';
+/** The wiring a `Field` hands its control, and the hook that reads it —
+ *  its own module, so `Field.tsx` keeps its Fast Refresh boundary. */
+export { useFieldWiring } from './components/fieldWiring.js';
 export { default as Icon } from './components/Icon.js';
 /** A person in one line -- initials, name, address -- and the two pure
  *  functions behind the disc, exported so a caller colouring something else
@@ -64,6 +67,8 @@ export { Row, Rows } from './components/Rows.js';
 export { default as ScrollArea } from './components/ScrollArea.js';
 export { default as Select } from './components/Select.js';
 export { default as SizeGrid } from './components/SizeGrid.js';
+/** The frame a signed-in surface stands in. Gates nothing, on purpose. */
+export { default as Shell } from './components/Shell.js';
 export { default as Skeleton } from './components/Skeleton.js';
 /** One figure, with what it counts over it. Three apps drew this before it
  *  was here. */
@@ -75,6 +80,9 @@ export { default as SplitPane } from './components/SplitPane.js';
 export { default as Table } from './components/Table.js';
 export { default as Tabs } from './components/Tabs.js';
 export { default as Textarea } from './components/Textarea.js';
+/** The theme control, and the blocking script that beats it to the paint. */
+export { default as ThemeSwitch } from './components/ThemeSwitch.js';
+export { THEME_STORAGE_KEY, themeChoiceScript, themeChoices, storedTheme } from './themes/choice.js';
 /** `ToastHost` nests: one inside another renders through, so a package can
  *  wrap itself and still leave an application with a single region. */
 export { ToastHost, useHasToastHost, useToast } from './components/Toast.js';