@wtfalch/design 0.1.0

package/dist/components/Pill.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A word attached to a thing.
+ *
+ * Three jobs, three weights, and the weight is the whole design: a
+ * *measurement* is quiet, because there is nothing to act on and it should
+ * read as text that happens to sit in a row; a *capability* is a plain chip,
+ * because it is one of a set scanned across and none may be louder than the
+ * others; a *state* is the only one that takes colour, because it is the only
+ * one that can change.
+ *
+ * The four state tones are the ones `Callout` and `Toast` use, so one
+ * vocabulary covers the app: `warn` is a caution — the thing works, mind how —
+ * and `bad` is something that is actually not working.
+ *
+ * **Colour is never the only signal.** A state pill has a tint, a border and a
+ * word. The tint alone was 1.67:1 on Paper for weeks and looked fine on every
+ * dark theme anybody tested, which is why `pillTones.test.ts` measures every
+ * tone against every theme rather than trusting anyone's eye.
+ *
+ * **Tint into `--panel`, not `--panel-2`.** Mixing a mid tone into the darker
+ * surface moves the background towards the text; on a light theme that drops a
+ * label from 4.7:1 to 3.9:1. The tones mix at 10% into the panel for that
+ * reason and not for taste.
+ *
+ * This was the second-most-copied markup in the app — `<span className="pill
+ * pill-info">` at every call site, and a gallery page teaching it. A page that
+ * documents hand-written markup is a page that will be copied.
+ */
+export default function Pill({ tone, quiet, inRow, className, children, ...rest }) {
+    const classes = [
+        'pill',
+        quiet ? 'pill-quiet' : '',
+        tone ? `pill-${tone}` : '',
+        inRow ? 'row-pill' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("span", { className: classes, ...rest, children: children }));
+}

package/dist/components/Progress.d.ts

@@ -0,0 +1,35 @@
+/**
+ * How far along something is.
+ *
+ * There was a `.bar` -- six pixels of `--panel-2` with an accent `<i>` inside --
+ * and every caller did the arithmetic, the formatting and the conditional
+ * itself. That was survivable while one screen had a download in it. It is not
+ * now: the engine install, the model pull, the image runtime and the weights
+ * fetch all report progress, and three of them have a phase where the total is
+ * not known yet.
+ *
+ * **The indeterminate case is the reason this exists.** `.bar` could only draw a
+ * fraction, so a fetch that had not yet read `content-length` drew nothing --
+ * an empty track, indistinguishable from stalled, for however long the server
+ * took to answer. A thing that is working and a thing that is stuck must not
+ * look alike.
+ *
+ * **It announces itself.** A bar is a picture of a number, and a picture of a
+ * number is nothing at all to somebody who cannot see it. `role="progressbar"`
+ * with a `valuetext`, because "62%" is what the bar shows and "412 MB of 660 MB"
+ * is what it means.
+ */
+export default function Progress({ value, max, label, detail, tone, className, }: {
+    /** How far. Omit for indeterminate — the work has started, the size has not
+     *  arrived. */
+    value?: number;
+    max?: number;
+    /** What is progressing. Required: an unlabelled bar is a rectangle. */
+    label: string;
+    /** The human sentence, shown beside the bar and announced instead of the
+     *  percentage. */
+    detail?: string;
+    /** A subset of the tone words; the default fill is the accent and is not a tone. */
+    tone?: 'good' | 'bad';
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Progress.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * How far along something is.
+ *
+ * There was a `.bar` -- six pixels of `--panel-2` with an accent `<i>` inside --
+ * and every caller did the arithmetic, the formatting and the conditional
+ * itself. That was survivable while one screen had a download in it. It is not
+ * now: the engine install, the model pull, the image runtime and the weights
+ * fetch all report progress, and three of them have a phase where the total is
+ * not known yet.
+ *
+ * **The indeterminate case is the reason this exists.** `.bar` could only draw a
+ * fraction, so a fetch that had not yet read `content-length` drew nothing --
+ * an empty track, indistinguishable from stalled, for however long the server
+ * took to answer. A thing that is working and a thing that is stuck must not
+ * look alike.
+ *
+ * **It announces itself.** A bar is a picture of a number, and a picture of a
+ * number is nothing at all to somebody who cannot see it. `role="progressbar"`
+ * with a `valuetext`, because "62%" is what the bar shows and "412 MB of 660 MB"
+ * is what it means.
+ */
+export default function Progress({ value, max, label, detail, tone, className, }) {
+    const indeterminate = value === undefined || !max;
+    const pct = indeterminate ? 0 : Math.max(0, Math.min(100, (value / max) * 100));
+    return (_jsxs("div", { className: `progress${className ? ` ${className}` : ''}`, children: [(label || detail) && (_jsxs("div", { className: "progress-head", children: [_jsx("span", { className: "progress-label", children: label }), _jsx("span", { className: "grow" }), detail && _jsx("span", { className: "progress-detail mono", children: detail })] })), _jsx("div", { className: `bar${tone ? ` bar-${tone}` : ''}${indeterminate ? ' bar-indeterminate' : ''}`, role: "progressbar", "aria-label": label, "aria-valuenow": indeterminate ? undefined : Math.round(pct), "aria-valuemin": indeterminate ? undefined : 0, "aria-valuemax": indeterminate ? undefined : 100, "aria-valuetext": detail, children: _jsx("i", { style: indeterminate ? undefined : { width: `${pct}%` } }) })] }));
+}

package/dist/components/Rows.d.ts

@@ -0,0 +1,101 @@
+/**
+ * A list of things, each with a name, some qualifiers and something to do.
+ *
+ * There are thirty-eight of these in the app and every one is assembled by
+ * hand:
+ *
+ *     <div className="set-row">
+ *       <span className="grow" style={{ minWidth: 0 }}>
+ *         <span className="named">
+ *           <span className="truncate">{name}</span>
+ *           …pills…
+ *         </span>
+ *         <div className="set-hint">{meta}</div>
+ *       </span>
+ *       …buttons…
+ *     </div>
+ *
+ * Six nested elements, two of which exist only to stop the name eating the
+ * pills, and `minWidth: 0` inline on one of them because a flex item will not
+ * shrink below its content without it. Miss that and the row looks fine until
+ * somebody installs a model with a sixty-character name, at which point the
+ * tags saying what it can do get ellipsised away and the name -- the one part
+ * you could have guessed -- takes the whole row. That has been fixed twice.
+ *
+ * **The parts are named, so the layout is not the caller's problem.** `name`
+ * truncates, `pills` never do, `hint` is the line underneath, `trail` is the
+ * right-aligned column that lines up down the list, `actions` are the buttons.
+ * Every row in the app is some subset of those five.
+ *
+ * **`Rows` owns the dividers.** A rule between rows and none after the last one
+ * -- which sounds trivial and was not: `:last-of-type` matches by element type,
+ * so an actions bar rendered after the list meant the final row kept its border
+ * and every settings pane ended in two parallel lines. The container knows what
+ * a row is and the CSS asks it, rather than guessing from the DOM.
+ */
+export declare function Rows({ children, empty, label, look, className, }: {
+    /** Absent is the empty case too: a caller mapping over nothing renders
+     *  nothing, and that has to reach `empty` rather than an empty bordered box. */
+    children?: React.ReactNode;
+    /** Shown instead of the list when there is nothing. Every caller writes one
+     *  of these by hand today and half of them forget. */
+    empty?: React.ReactNode;
+    /** What the list is, for a screen reader. A list of rows with no name is a
+     *  stack of unrelated sentences. */
+    label?: string;
+    /**
+     * How the list is drawn.
+     *
+     * - `list` — rows separated by a hairline. Right for things you are reading:
+     *   downloads, activity, applets.
+     * - `pick` — each row its own bordered box, spaced. Right for things you are
+     *   *choosing between*: the rule-of-thumb elsewhere in this app is that
+     *   several options are choice rows, and a ruled list reads as a table of
+     *   records rather than as a set of alternatives one of which is yours.
+     *
+     * A variant rather than a second component: the slots, the truncation rule
+     * and the `min-width: 0` that makes the pills survive are the same either
+     * way, and only the surface differs.
+     */
+    look?: 'list' | 'pick';
+    className?: string;
+}): import("react").JSX.Element | null;
+export declare function Row({ name, pills, hint, trail, actions, below, onClick, tone, picked, loading, waiting, align, className, }: {
+    /** The subject. Truncates -- it is the only part that may. */
+    name: React.ReactNode;
+    /** Qualifiers, on the name's line. Never truncated: a badge that is
+     *  ellipsised is a badge that has stopped saying anything. */
+    pills?: React.ReactNode;
+    /** The line underneath: sizes, counts, whatever is true but secondary. */
+    hint?: React.ReactNode;
+    /** A right-aligned column before the actions -- a timestamp, a size. Lines up
+     *  down the list, which is the whole reason it is a slot and not another
+     *  pill. */
+    trail?: React.ReactNode;
+    actions?: React.ReactNode;
+    /** Something that opens underneath this row -- a confirmation, a report, the
+     *  detail of the thing named above. A sibling rather than a child, because it
+     *  is the full width of the list and not part of the row's own layout.
+     *
+     *  This exists so callers do not wrap the row in a div of their own: doing
+     *  that puts a plain element between `role="list"` and `role="listitem"`,
+     *  which breaks the relationship, and it hides the row from the container's
+     *  "no rule after the last one" rule. */
+    below?: React.ReactNode;
+    /** Makes the whole row activate. Rendered as a button, so it has a keyboard
+     *  and a focus ring, which a `<div onClick>` has neither of. */
+    onClick?: () => void;
+    tone?: 'bad';
+    /** The one that is chosen, in a `pick` list. A second signal beside whatever
+     *  the row already says in words -- colour is never the only one. */
+    picked?: boolean;
+    /** This row is the thing currently working. */
+    loading?: boolean;
+    /** Something else is working, so this one cannot be chosen yet. */
+    waiting?: boolean;
+    /** `start` when the row has enough text that vertically centred buttons drift
+     *  away from the name they belong to. */
+    align?: 'center' | 'start';
+    className?: string;
+}): import("react").JSX.Element;
+export default Rows;

package/dist/components/Rows.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A list of things, each with a name, some qualifiers and something to do.
+ *
+ * There are thirty-eight of these in the app and every one is assembled by
+ * hand:
+ *
+ *     <div className="set-row">
+ *       <span className="grow" style={{ minWidth: 0 }}>
+ *         <span className="named">
+ *           <span className="truncate">{name}</span>
+ *           …pills…
+ *         </span>
+ *         <div className="set-hint">{meta}</div>
+ *       </span>
+ *       …buttons…
+ *     </div>
+ *
+ * Six nested elements, two of which exist only to stop the name eating the
+ * pills, and `minWidth: 0` inline on one of them because a flex item will not
+ * shrink below its content without it. Miss that and the row looks fine until
+ * somebody installs a model with a sixty-character name, at which point the
+ * tags saying what it can do get ellipsised away and the name -- the one part
+ * you could have guessed -- takes the whole row. That has been fixed twice.
+ *
+ * **The parts are named, so the layout is not the caller's problem.** `name`
+ * truncates, `pills` never do, `hint` is the line underneath, `trail` is the
+ * right-aligned column that lines up down the list, `actions` are the buttons.
+ * Every row in the app is some subset of those five.
+ *
+ * **`Rows` owns the dividers.** A rule between rows and none after the last one
+ * -- which sounds trivial and was not: `:last-of-type` matches by element type,
+ * so an actions bar rendered after the list meant the final row kept its border
+ * and every settings pane ended in two parallel lines. The container knows what
+ * a row is and the CSS asks it, rather than guessing from the DOM.
+ */
+export function Rows({ children, empty, label, look = 'list', className, }) {
+    const items = Array.isArray(children) ? children.filter(Boolean) : children;
+    const none = Array.isArray(items) ? items.length === 0 : !items;
+    if (none) {
+        return empty ? _jsx("div", { className: "set-hint rows-empty", children: empty }) : null;
+    }
+    return (_jsx("div", { className: `rows${look === 'pick' ? ' rows-pick' : ''}${className ? ` ${className}` : ''}`, 
+        // biome-ignore lint/a11y/useSemanticElements: valid ARIA on a div; a <ul> brings the browser's list reset and the stylesheet and 204 baselines key on `div.rows`.
+        role: "list", "aria-label": label, children: items }));
+}
+export function Row({ name, pills, hint, trail, actions, below, onClick, tone, picked, loading, waiting, align = 'center', className, }) {
+    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "row-subject", children: [_jsxs("span", { className: "named", children: [_jsx("span", { className: "truncate", children: name }), pills] }), hint && _jsx("div", { className: "set-hint", children: hint })] }), trail && _jsx("span", { className: "row-trail set-hint mono", children: trail })] }));
+    const rowClass = `set-row rows-row${tone ? ` rows-${tone}` : ''}` +
+        `${align === 'start' ? ' rows-top' : ''}${picked ? ' is-picked' : ''}` +
+        `${loading ? ' is-loading' : ''}${waiting ? ' is-waiting' : ''}` +
+        `${className ? ` ${className}` : ''}`;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: rowClass, role: "listitem", children: [onClick ? (_jsx("button", { type: "button", className: "row-hit", disabled: waiting, onClick: onClick, children: body })) : (body), actions] }), below] }));
+}
+export default Rows;

package/dist/components/Select.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+interface Props {
+    block?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    /** `<option>`s, exactly as a native select takes them. The children are the
+     *  API and React Aria's items are the implementation; `readOptions` is the
+     *  seam between them. */
+    children?: ReactNode;
+    id?: string;
+    title?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    value?: string | number;
+    defaultValue?: string | number;
+    /** Native-select-shaped on purpose -- `e.target.value` -- because that is
+     *  what every call site was written against when this *was* a `<select>`. */
+    onChange?: (event: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    /** Something to the right of an option -- a play button beside a voice. */
+    aside?: (value: string) => ReactNode;
+}
+export default function Select({ block, size, className, children, value, defaultValue, onChange, disabled, id, title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, aside, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Select.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useEffect, useRef } from 'react';
+/** Read `<option>` children into a list this can render itself. */
+function readOptions(children) {
+    const out = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        const props = child.props;
+        const label = props.children;
+        out.push({
+            value: String(props.value ?? ''),
+            label,
+            text: typeof label === 'string' ? label : String(props.value ?? ''),
+            disabled: props.disabled,
+        });
+    });
+    return out;
+}
+/* Named rather than inherited from `SelectHTMLAttributes`.
+   The old signature spread every select attribute onto the element, which was
+   free when that element was a `<select>` and is wrong now that it is a
+   `<button>` -- `onCopy` alone is typed against a different element. Call sites
+   pass five things between them, so five is what this takes. */
+import { Select as AriaSelect, Button, ListBox, ListBoxItem, Popover, SelectValue, } from 'react-aria-components';
+export default function Select({ block = false, size, className, children, value, defaultValue, onChange, disabled, id, title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, aside, }) {
+    const options = readOptions(children);
+    /* `title`, set on the element: React Aria's `Button` takes `id` and the
+       `aria-*` labelling props and filters the rest, the same `filterDOMProps`
+       that dropped `aria-busy` on `Button` and `aria-modal` on `Modal`. */
+    const control = useRef(null);
+    useEffect(() => {
+        const el = control.current;
+        if (!el)
+            return;
+        if (title)
+            el.title = title;
+        else
+            el.removeAttribute('title');
+    }, [title]);
+    /* React Aria owns what was 13 KB of hand-rolled behaviour: the popover is
+       positioned against the button and flips when the edge is near, which the
+       measured-rectangle `top`/`left` could not; typeahead, Home and End, the
+       arrows, Escape, outside-press and focus restore are all its. What stays
+       is the seam -- `<option>` children in, `{target: {value}}` out -- because
+       the call sites were written against a native select and there is no
+       reason to make them care that it is not one any more.
+  
+       `sel-value` and the caret are the same markup as before, so the closed
+       control is pixel-identical; the list is the same markup with React Aria's
+       state attributes where the classes were. */
+    return (_jsxs(AriaSelect, { className: `sel${block ? ' block' : ''}${className ? ` ${className}` : ''}`, selectedKey: value !== undefined ? String(value) : undefined, defaultSelectedKey: defaultValue !== undefined ? String(defaultValue) : (options[0]?.value ?? undefined), onSelectionChange: (key) => {
+            if (key !== null)
+                onChange?.({ target: { value: String(key) } });
+        }, isDisabled: disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [_jsxs(Button, { ref: control, id: id, className: `sel-control${size ? ` size-${size}` : ''}`, children: [_jsx(SelectValue, { className: "sel-value", children: ({ selectedText, defaultChildren }) => selectedText ?? defaultChildren }), _jsx("svg", { className: "sel-caret", viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" }) })] }), _jsx(Popover, { className: "sel-list", placement: "bottom start", offset: 4, maxHeight: 280, children: _jsx(ListBox, { className: "sel-listbox", children: options.map((o) => (_jsxs(ListBoxItem, { id: o.value, textValue: o.text, isDisabled: o.disabled, className: "sel-item", children: [_jsx("span", { className: "sel-item-label", children: o.label }), _jsx("svg", { className: "sel-tick", viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: "m5 13 4 4 10-10" }) }), aside?.(o.value)] }, o.value))) }) })] }));
+}

package/dist/components/SizeGrid.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Pick a tile size by sweeping a grid, the way a spreadsheet asks for table
+ * dimensions.
+ *
+ * Six preset buttons and a `2×1` dropdown both said the same thing in a
+ * notation you have to decode. A tile is a rectangle on a grid, so the control
+ * is that rectangle: hover to see the shape you would get, click to take it.
+ * The label underneath keeps the numbers for anyone who wants them.
+ *
+ * It grows as you reach its edge, the way a spreadsheet's does: showing every
+ * cell up to the ceiling would be a wall of squares you have to aim in, and
+ * showing a fixed few would put the larger sizes behind a number box. Reaching
+ * the last column offers one more, and only then.
+ *
+ * `max` is the ceiling, and it means something: for an applet it is the
+ * dashboard grid you configured, so the control cannot offer a tile the layout
+ * has no room for.
+ */
+export default function SizeGrid({ value, max, disabled, onChange, }: {
+    value: {
+        cols: number;
+        rows: number;
+    };
+    /** The furthest this can go. The grid never offers past it. */
+    max?: {
+        cols: number;
+        rows: number;
+    };
+    disabled?: boolean;
+    onChange: (size: {
+        cols: number;
+        rows: number;
+    }) => void;
+}): import("react").JSX.Element;

package/dist/components/SizeGrid.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * Pick a tile size by sweeping a grid, the way a spreadsheet asks for table
+ * dimensions.
+ *
+ * Six preset buttons and a `2×1` dropdown both said the same thing in a
+ * notation you have to decode. A tile is a rectangle on a grid, so the control
+ * is that rectangle: hover to see the shape you would get, click to take it.
+ * The label underneath keeps the numbers for anyone who wants them.
+ *
+ * It grows as you reach its edge, the way a spreadsheet's does: showing every
+ * cell up to the ceiling would be a wall of squares you have to aim in, and
+ * showing a fixed few would put the larger sizes behind a number box. Reaching
+ * the last column offers one more, and only then.
+ *
+ * `max` is the ceiling, and it means something: for an applet it is the
+ * dashboard grid you configured, so the control cannot offer a tile the layout
+ * has no room for.
+ */
+export default function SizeGrid({ value, max = { cols: 3, rows: 3 }, disabled = false, onChange, }) {
+    // What the pointer is over, which is what gets shown. Falls back to the real
+    // value on leave, so the control never lies about what is selected.
+    const [hover, setHover] = useState(null);
+    const shown = hover ?? value;
+    // One spare row and column beyond whatever is reached, so there is always
+    // somewhere further to go until the ceiling says otherwise.
+    const extent = {
+        cols: Math.min(max.cols, Math.max(value.cols, shown.cols) + 1),
+        rows: Math.min(max.rows, Math.max(value.rows, shown.rows) + 1),
+    };
+    const cells = [];
+    for (let row = 1; row <= extent.rows; row++) {
+        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}`));
+        }
+    }
+    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] }))] })] }));
+}

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The shape of what has not arrived yet.
+ *
+ * Ported from chef-monorepo's `Skeleton`, keeping its API — `variant`,
+ * `surface`, `animation`, and the convention that a bare number is a spacing
+ * step, so `height={5}` is 20px. That convention lands exactly on this app's
+ * four-pixel grid, which is why it survived the port unchanged. What did not
+ * survive is `cva` and `clsx`: this project keeps four runtime dependencies on
+ * purpose, and two of them would have been for string concatenation.
+ *
+ * **The colour is `currentColor`, not a named surface.** chef's version picks
+ * `bg-surface-muted` or `bg-surface-elevated`, and the first place this landed
+ * was a card inside a modal — where the card is already that exact token, so
+ * six skeletons rendered invisible on an identical background. Any scheme that
+ * names the colour has that in it: the caller has to know what it is being
+ * drawn on, and is wrong the first time a surface moves. Ink at low alpha is
+ * right on every surface in every theme without anybody deciding.
+ *
+ * **A skeleton is a promise about layout, not a loading noise.** Its whole job
+ * is to occupy the space the real thing will occupy, so nothing jumps when the
+ * content lands. A grey box of the wrong size is worse than no box at all: it
+ * says "something this shape is coming", and then something a different shape
+ * arrives and pushes the page around. If you cannot say what shape is coming,
+ * the honest control is `Progress`, which claims nothing about layout.
+ *
+ * **Invisible to a screen reader.** These are pictures of absent text; read
+ * aloud they are nothing at all. Mark the region `aria-busy` and let the
+ * announcement come from the content when it arrives — a reader should be told
+ * "loading" once, not handed six shapes.
+ */
+export default function Skeleton({ variant, surface, animation, width, height, lines, className, }: {
+    variant?: 'rectangular' | 'rounded' | 'circular';
+    /** How strongly it reads. Named for the surface in the original because it
+     *  chose a colour there; here the colour comes from `currentColor`, so this
+     *  is only a strength — `elevated` for the flatter surfaces where a faint
+     *  bar disappears. */
+    surface?: 'muted' | 'elevated';
+    animation?: 'pulse' | 'none';
+    width?: number | string;
+    height?: number | string;
+    /** A paragraph rather than a bar. The last line is short, because real
+     *  paragraphs end mid-line and a block of equal bars reads as a table. */
+    lines?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Skeleton.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The shape of what has not arrived yet.
+ *
+ * Ported from chef-monorepo's `Skeleton`, keeping its API — `variant`,
+ * `surface`, `animation`, and the convention that a bare number is a spacing
+ * step, so `height={5}` is 20px. That convention lands exactly on this app's
+ * four-pixel grid, which is why it survived the port unchanged. What did not
+ * survive is `cva` and `clsx`: this project keeps four runtime dependencies on
+ * purpose, and two of them would have been for string concatenation.
+ *
+ * **The colour is `currentColor`, not a named surface.** chef's version picks
+ * `bg-surface-muted` or `bg-surface-elevated`, and the first place this landed
+ * was a card inside a modal — where the card is already that exact token, so
+ * six skeletons rendered invisible on an identical background. Any scheme that
+ * names the colour has that in it: the caller has to know what it is being
+ * drawn on, and is wrong the first time a surface moves. Ink at low alpha is
+ * right on every surface in every theme without anybody deciding.
+ *
+ * **A skeleton is a promise about layout, not a loading noise.** Its whole job
+ * is to occupy the space the real thing will occupy, so nothing jumps when the
+ * content lands. A grey box of the wrong size is worse than no box at all: it
+ * says "something this shape is coming", and then something a different shape
+ * arrives and pushes the page around. If you cannot say what shape is coming,
+ * the honest control is `Progress`, which claims nothing about layout.
+ *
+ * **Invisible to a screen reader.** These are pictures of absent text; read
+ * aloud they are nothing at all. Mark the region `aria-busy` and let the
+ * announcement come from the content when it arrives — a reader should be told
+ * "loading" once, not handed six shapes.
+ */
+const STEP = 4;
+/** A bare number is a spacing step; a string is a length, used as given. */
+const length = (value, fallback) => {
+    const v = value ?? fallback;
+    return typeof v === 'number' ? `${v * STEP}px` : v;
+};
+export default function Skeleton({ variant = 'rectangular', surface = 'muted', animation = 'pulse', width = '100%', height = 2, lines, className, }) {
+    const cls = `skel skel-${variant} skel-on-${surface}${animation === 'none' ? '' : ' skel-pulse'}${className ? ` ${className}` : ''}`;
+    if (lines && lines > 1) {
+        return (_jsx("span", { className: "skel-lines", "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => (_jsx("span", { className: cls, style: {
+                    height: length(height, 2),
+                    width: i === lines - 1 ? '62%' : length(width, '100%'),
+                } }, i))) }));
+    }
+    return (_jsx("span", { className: cls, "aria-hidden": "true", style: { height: length(height, 2), width: length(width, '100%') } }));
+}

package/dist/components/Slider.d.ts

@@ -0,0 +1,70 @@
+/**
+ * A number chosen from a range, by dragging.
+ *
+ * For a setting whose answer is "about this much" rather than one of a list:
+ * how much memory tf may take, say. A `Select` with eight sizes on it makes
+ * the person pick the nearest wrong one; a box you type a number into asks
+ * them to know the ceiling. A slider shows the ceiling, the floor, and where
+ * between them they are.
+ *
+ * **Bounded, always.** `min` and `max` are required rather than defaulted,
+ * because a slider with an invented ceiling lies about what the machine can
+ * do. **Stepped, optionally.** `step` given, the knob snaps to that interval
+ * -- half a gigabyte, five minutes -- and the value is always one of the
+ * marks. Without it the range is continuous (`step="any"`) and the value is
+ * wherever the knob stopped, which is right for a quantity nobody counts in
+ * units.
+ *
+ * **Applies on release, shows while dragging.** A setting that saved on
+ * every pixel would put a hundred writes behind one gesture, so `onChange`
+ * fires when the knob is let go and the value beside the knob follows the
+ * drag live. That is the *native* `change` event, listened for directly:
+ * React's `onChange` on an input is its `input` event under another name
+ * and fires per pixel, which is exactly what the first version did -- every
+ * pixel saved, every save handed the value back, and the knob snapped to
+ * wherever the last reply said while the pointer was still down. Nobody
+ * could drag it. The keyboard is the one place even the native event is too
+ * eager: an arrow key fires `change` per press, and the same replies landed
+ * between presses (measured: twenty-two presses from the floor landed at
+ * 2.5 rather than 12). So key presses settle for a third of a second before
+ * they are said, and while a drag or a settle is under way the prop is not
+ * allowed to overwrite what is on screen.
+ *
+ * A native `<input type="range">`, for the same reason `Toggle` is a native
+ * checkbox: the keyboard, the focus ring and the announcement come free, and
+ * `aria-valuetext` says the value in the caller's words ("12.0 GB") rather
+ * than as a bare number.
+ */
+export default function Slider({ label, hint, value, min, max, step, onChange, format, disabled, labelHidden, size, danger, className, }: {
+    label: React.ReactNode;
+    /** What it decides, or what the ends of it mean. */
+    hint?: React.ReactNode;
+    value: number;
+    min: number;
+    max: number;
+    /** The interval the knob snaps to. Absent, the range is continuous. */
+    step?: number;
+    /** The value settled on: knob released, or a key pressed. */
+    onChange: (value: number) => void;
+    /** The value in words, beside the knob and to a screen reader. */
+    format?: (value: number) => string;
+    disabled?: boolean;
+    labelHidden?: boolean;
+    /** The same three names every other control takes, and the same three
+     *  boxes: `sm`, `md` and `lg` are `.size-sm`, `.size-md` and `.size-lg`'s
+     *  padding and type, so a slider beside a button or a select of the same
+     *  size is the same height. Widths 120, 150 and 180. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Where the range starts to be a risk. The fill is the accent up to
+     * `from` and drifts, step by step, to the danger colour at `to` (the
+     * maximum when omitted) -- so a value past the safe mark reads as such
+     * without a word beside it, and the further past, the more so. For a
+     * ceiling somebody may raise past what was measured.
+     */
+    danger?: {
+        from: number;
+        to?: number;
+    };
+    className?: string;
+}): import("react").JSX.Element;