@wtfalch/design 0.1.0

package/dist/components/Card.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A box with a reason to exist.
+ *
+ * `.card` was CSS and nothing else, so every caller assembled its own header:
+ * a `<div className="row">`, a `<div className="grow">`, a title in a
+ * `truncate` span and a description in a `muted mono` div, with the spacing
+ * retyped each time. Four variants of that shape existed and no two agreed on
+ * the gap between the title and the line under it.
+ *
+ * **`title` and `description` are props, so the parts are named.** The same
+ * argument as `Field`: a component that takes a heading and a sentence cannot
+ * put them in the wrong order or forget to associate them, and a caller that
+ * only has a heading does not have to remember which wrapper it goes in.
+ *
+ * **The icon is optional and it is decoration.** `aria-hidden`, always — a card
+ * with `icon="image"` beside a title that says "A model that draws" is the same
+ * word twice to a screen reader. It is there to make a page of cards scannable
+ * by shape, which is a thing eyes do and readers do not.
+ */
+import { type IconName } from './Icon';
+export default function Card({ icon, title, description, action, children, tone, onClick, selected, className, }: {
+    icon?: IconName;
+    title?: React.ReactNode;
+    /** One or two sentences under the title. What this is for, or what pressing
+     *  the thing inside it will do. */
+    description?: React.ReactNode;
+    /** The control the card is about — a switch, usually. Far right, centred
+     *  against the whole heading block rather than against the title, so it does
+     *  not drift up when the description runs to two lines. */
+    action?: React.ReactNode;
+    children?: React.ReactNode;
+    /** `bad` for the one that failed — a card in a list, not a whole screen.
+     *  `warn` for a card whose contents want reading before touching: the
+     *  same colours `Callout` uses for the tone, so the card reads as the
+     *  callout it replaces. */
+    tone?: 'bad' | 'warn';
+    /** Makes the card itself the choice. Rendered as a button, so it has a
+     *  keyboard and a focus ring rather than a hover state and nothing else. */
+    onClick?: () => void;
+    selected?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Card.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A box with a reason to exist.
+ *
+ * `.card` was CSS and nothing else, so every caller assembled its own header:
+ * a `<div className="row">`, a `<div className="grow">`, a title in a
+ * `truncate` span and a description in a `muted mono` div, with the spacing
+ * retyped each time. Four variants of that shape existed and no two agreed on
+ * the gap between the title and the line under it.
+ *
+ * **`title` and `description` are props, so the parts are named.** The same
+ * argument as `Field`: a component that takes a heading and a sentence cannot
+ * put them in the wrong order or forget to associate them, and a caller that
+ * only has a heading does not have to remember which wrapper it goes in.
+ *
+ * **The icon is optional and it is decoration.** `aria-hidden`, always — a card
+ * with `icon="image"` beside a title that says "A model that draws" is the same
+ * word twice to a screen reader. It is there to make a page of cards scannable
+ * by shape, which is a thing eyes do and readers do not.
+ */
+import Icon from './Icon';
+export default function Card({ icon, title, description, action, children, tone, onClick, selected, className, }) {
+    const head = (title || description || action) && (_jsxs("div", { className: "card-head", children: [icon && (_jsx("span", { className: "card-icon", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) })), _jsxs("div", { className: "card-headings", children: [title && _jsx("strong", { className: "card-title", children: title }), description && _jsx("div", { className: "card-desc", children: description })] }), action && _jsx("div", { className: "card-action", children: action })] }));
+    const cls = `card${onClick ? ' card-pick' : ''}${selected ? ' card-on' : ''}${tone ? ` card-${tone}` : ''}${className ? ` ${className}` : ''}`;
+    const body = children && _jsx("div", { className: "card-body", children: children });
+    if (onClick) {
+        return (_jsxs("button", { type: "button", className: cls, "aria-pressed": selected, onClick: onClick, children: [head, body] }));
+    }
+    return (_jsxs("div", { className: cls, children: [head, body] }));
+}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Choose some of these, then press the button that applies them.
+ *
+ * The fourth component the gallery documented that nobody could import — and
+ * this one is worse than the others, because the markup it documents was
+ * *designed* to replace the native tick box and then never used anywhere. Four
+ * places went on rendering `<input type="checkbox">` in a `.set-row` while
+ * `.choice` sat in the stylesheet with a page of its own.
+ *
+ * **The native box is hidden, not styled.** A checkbox styles down to a square
+ * and no further; the tick inside it is the operating system's, in its shape,
+ * at its size. So the input is present and off-screen — it is what a keyboard
+ * reaches and what a screen reader reads — and the ring and tick are drawn by
+ * the row. Clicking anywhere in the row toggles it, because the row is the
+ * `<label>`.
+ *
+ * **This is not a `Toggle`.** A switch is the action and applies as it moves; a
+ * checkbox is an answer that applies when something else is pressed. If there
+ * is no Save at the end of it, this is the wrong control — see `Toggle`.
+ */
+export default function Checkbox({ label, hint, meta, checked, onChange, disabled, className, }: {
+    label: React.ReactNode;
+    /** What choosing it means, or what it costs. Under the name. `hint`, the
+     *  word `Toggle`, `Slider` and `Field` use for the same line; it was `why`. */
+    hint?: React.ReactNode;
+    /** A quieter third line — a path, a size, an id. */
+    meta?: React.ReactNode;
+    checked: boolean;
+    onChange: (on: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Choose some of these, then press the button that applies them.
+ *
+ * The fourth component the gallery documented that nobody could import — and
+ * this one is worse than the others, because the markup it documents was
+ * *designed* to replace the native tick box and then never used anywhere. Four
+ * places went on rendering `<input type="checkbox">` in a `.set-row` while
+ * `.choice` sat in the stylesheet with a page of its own.
+ *
+ * **The native box is hidden, not styled.** A checkbox styles down to a square
+ * and no further; the tick inside it is the operating system's, in its shape,
+ * at its size. So the input is present and off-screen — it is what a keyboard
+ * reaches and what a screen reader reads — and the ring and tick are drawn by
+ * the row. Clicking anywhere in the row toggles it, because the row is the
+ * `<label>`.
+ *
+ * **This is not a `Toggle`.** A switch is the action and applies as it moves; a
+ * checkbox is an answer that applies when something else is pressed. If there
+ * is no Save at the end of it, this is the wrong control — see `Toggle`.
+ */
+import { Checkbox as AriaCheckbox } from 'react-aria-components';
+export default function Checkbox({ label, hint, meta, checked, onChange, disabled, className, }) {
+    /* React Aria's `Checkbox` is the `<label>`. It keeps the real input in the
+       markup and visually hidden -- exactly the arrangement this component
+       already had by hand -- and stamps `data-selected`, `data-focus-visible`
+       and `data-disabled` on the row. The ring and the tick are still drawn by
+       the row's `::after` and `::before`; `checkbox.css` now reads the state off
+       those attributes instead of `:has(input:checked)`. */
+    return (_jsx(AriaCheckbox, { className: `choice${className ? ` ${className}` : ''}`, isSelected: checked, onChange: onChange, isDisabled: disabled, children: _jsxs("span", { className: "choice-body", children: [_jsx("span", { className: "choice-name", children: label }), hint && _jsx("span", { className: "choice-why", children: hint }), meta && _jsx("span", { className: "choice-meta", children: meta })] }) }));
+}

package/dist/components/DangerZone.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+/**
+ * The bottom of a settings panel, where the things that cannot be undone live.
+ *
+ * One bordered section with its actions divided inside it, rather than a box
+ * per action. Three tiles of red furniture stacked down a pane read as three
+ * warnings; one section with three things in it reads as a place — which is
+ * the point, because a place is somewhere you have to go.
+ *
+ * The same shape as the one in valet, and deliberately: these are the same
+ * decision in two products, and a person who has learned to be careful in one
+ * should not have to learn it again in the other.
+ *
+ * What differs is what a confirmation costs. Typing a name is the right price
+ * for something with no undo and the wrong one for something with an obvious
+ * undo — so the section says up front which of its actions are which, and each
+ * asks for what it is worth.
+ */
+export default function DangerZone({ 
+/** Which of these can be taken back, said before anything is pressed. */
+note, children, className, }: {
+    note: string;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * One thing that can be done here, and what it costs.
+ *
+ * `confirm` is the whole of the difference between them:
+ *
+ * - `click` — a second press, for something with a way back. The button says
+ *   what it will do rather than "Are you sure?", because a person reading
+ *   "Remove" twice has read what it removes.
+ * - `type` — the name, for something with no way back. A second click in the
+ *   same place as the first is a reflex; writing the thing out is the only
+ *   confirmation that requires having read what it is.
+ */
+export declare function DangerAction({ title, description, 
+/** Not destructive at all — rename, edit. No confirmation, no red. */
+kind, confirm, 
+/** What must be typed, when `confirm` is `type`. */
+match, label, busyLabel, busy, disabled, onConfirm, 
+/** Rendered instead of the controls, saying why this cannot be done. */
+unavailable, }: {
+    /** `title` and `description`, the words `Card`, `Modal` and `Dialog` use;
+     *  they were `heading` and `body`. */
+    title: string;
+    description: ReactNode;
+    /** `kind`, like `Button`: a role, not a colour. */
+    kind?: 'destructive' | 'plain';
+    confirm?: 'click' | 'type' | 'none';
+    match?: string;
+    label: string;
+    busyLabel?: string;
+    busy?: boolean;
+    disabled?: boolean;
+    onConfirm: () => void;
+    unavailable?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/DangerZone.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import Button from './Button';
+import Field from './Field';
+import Input from './Input';
+/**
+ * The bottom of a settings panel, where the things that cannot be undone live.
+ *
+ * One bordered section with its actions divided inside it, rather than a box
+ * per action. Three tiles of red furniture stacked down a pane read as three
+ * warnings; one section with three things in it reads as a place — which is
+ * the point, because a place is somewhere you have to go.
+ *
+ * The same shape as the one in valet, and deliberately: these are the same
+ * decision in two products, and a person who has learned to be careful in one
+ * should not have to learn it again in the other.
+ *
+ * What differs is what a confirmation costs. Typing a name is the right price
+ * for something with no undo and the wrong one for something with an obvious
+ * undo — so the section says up front which of its actions are which, and each
+ * asks for what it is worth.
+ */
+export default function DangerZone({ 
+/** Which of these can be taken back, said before anything is pressed. */
+note, children, className, }) {
+    return (_jsxs("section", { className: `danger-zone${className ? ` ${className}` : ''}`, children: [_jsxs("div", { className: "danger-zone-head", children: [_jsx("h3", { children: "Danger zone" }), _jsx("p", { className: "set-hint", children: note })] }), children] }));
+}
+/**
+ * One thing that can be done here, and what it costs.
+ *
+ * `confirm` is the whole of the difference between them:
+ *
+ * - `click` — a second press, for something with a way back. The button says
+ *   what it will do rather than "Are you sure?", because a person reading
+ *   "Remove" twice has read what it removes.
+ * - `type` — the name, for something with no way back. A second click in the
+ *   same place as the first is a reflex; writing the thing out is the only
+ *   confirmation that requires having read what it is.
+ */
+export function DangerAction({ title, description, 
+/** Not destructive at all — rename, edit. No confirmation, no red. */
+kind = 'destructive', confirm = 'click', 
+/** What must be typed, when `confirm` is `type`. */
+match, label, busyLabel, busy = false, disabled = false, onConfirm, 
+/** Rendered instead of the controls, saying why this cannot be done. */
+unavailable, }) {
+    const [asking, setAsking] = useState(false);
+    const [typed, setTyped] = useState('');
+    return (_jsxs("div", { className: `danger-act${kind === 'plain' ? ' plain' : ''}`, children: [_jsx("h4", { children: title }), _jsx("div", { className: "set-hint", children: description }), unavailable ? (_jsx("div", { className: "set-hint danger-unavailable", children: unavailable })) : confirm === 'type' ? (_jsx(_Fragment, { children: _jsxs("div", { className: "row danger-row field-row", children: [_jsx(Field, { label: "Confirm", hint: _jsxs(_Fragment, { children: ["Type ", _jsx("code", { className: "mono danger-name", children: match }), " to confirm."] }), children: (f) => (_jsx(Input, { ...f, mono: true, value: typed, disabled: disabled || busy, autoComplete: "off", spellCheck: false, onChange: (e) => setTyped(e.target.value) })) }), _jsx(Button, { kind: "danger", isDisabled: disabled || busy || typed.trim() !== match, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label })] }) })) : confirm === 'none' ? (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: kind === 'plain' ? 'primary' : 'danger', isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }) })) : asking ? (_jsxs("div", { className: "row danger-row", children: [_jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }), _jsx(Button, { isDisabled: disabled || busy, onPress: () => setAsking(false), children: "Cancel" })] })) : (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: () => setAsking(true), children: label }) }))] }));
+}

package/dist/components/Dialog.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A question that stops what you were doing until it is answered.
+ *
+ * `Modal` with three things changed, and each of them is a decision rather than
+ * a size:
+ *
+ * **Narrow, and centred.** `Modal` is sized for Settings -- wide, and starting
+ * near the top of the screen, because eleven panes of preferences need the room
+ * and want to begin where the eye already is. A two-button question inheriting
+ * that becomes a grey band across the top: the shape says "here is somewhere to
+ * work" while the content says "answer this and go".
+ *
+ * **The scrim decides nothing.** It is the easiest thing on screen to hit by
+ * accident, and for "may this applet write to your files" the accident would be
+ * an answer. Closing a workspace by mistake costs a click; closing a question
+ * by mistake means it was answered without being read.
+ *
+ * **Escape is optional.** Omit `onCancel` when there is no safe default -- a
+ * decision that must be made has no Escape key, because dismissing it would be
+ * choosing on the reader's behalf.
+ */
+export default function Dialog({ title, children, onCancel, actions, tone, }: {
+    title: string;
+    children: React.ReactNode;
+    onCancel?: () => void;
+    actions: React.ReactNode;
+    tone?: 'bad';
+}): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A question that stops what you were doing until it is answered.
+ *
+ * `Modal` with three things changed, and each of them is a decision rather than
+ * a size:
+ *
+ * **Narrow, and centred.** `Modal` is sized for Settings -- wide, and starting
+ * near the top of the screen, because eleven panes of preferences need the room
+ * and want to begin where the eye already is. A two-button question inheriting
+ * that becomes a grey band across the top: the shape says "here is somewhere to
+ * work" while the content says "answer this and go".
+ *
+ * **The scrim decides nothing.** It is the easiest thing on screen to hit by
+ * accident, and for "may this applet write to your files" the accident would be
+ * an answer. Closing a workspace by mistake costs a click; closing a question
+ * by mistake means it was answered without being read.
+ *
+ * **Escape is optional.** Omit `onCancel` when there is no safe default -- a
+ * decision that must be made has no Escape key, because dismissing it would be
+ * choosing on the reader's behalf.
+ */
+import Modal from './Modal';
+export default function Dialog({ title, children, onCancel, actions, tone, }) {
+    return (_jsx(Modal, { title: title, className: `dialog${tone ? ` dialog-${tone}` : ''}`, onClose: onCancel, dismissOnScrim: false, 
+        /* The answers are the buttons. A ✕ beside them is a third answer that
+           means nothing. */
+        closeButton: false, footer: actions, children: children }));
+}

package/dist/components/Empty.d.ts

@@ -0,0 +1,45 @@
+/**
+ * A list with nothing in it, said properly.
+ *
+ * There were two conventions and neither was a component. `.empty` — centred,
+ * generously padded — was used by five files; the settings panes used a bare
+ * `.set-hint`, which is the same 12px muted line that explains a heading. So
+ * "None configured." rendered as a fragment of caption floating under a card
+ * title, indistinguishable from a description of the thing above it, and a
+ * pane with nothing in it looked like a pane that had failed to finish drawing.
+ *
+ * **An empty state has three jobs and the old one did none of them.** Say the
+ * list is empty rather than leaving it ambiguous with loading. Say why, if
+ * there is a why. Offer the thing you would do next, if there is one.
+ *
+ * **The icon is decoration and is marked as such.** It is there so a pane of
+ * cards is scannable by shape — the same argument as `Card`'s. A screen reader
+ * gets the sentence, which is the part that carries the meaning.
+ *
+ * Deliberately quieter than a full-screen empty state: these sit inside a card
+ * that already has a heading, so a second large heading here would compete with
+ * the one above it. One line, optionally one button.
+ *
+ * **`illustration` is the same box given a whole surface.** A view with no
+ * applets on it is not a slot in a card -- it is the window, and the dashed
+ * outline that marks out where a list will be reads as a broken layout at that
+ * size. So the figure replaces the icon, the outline goes, and the box centres
+ * itself in whatever it was put in. Same component, because it is the same
+ * three jobs: say it is empty, say why, offer the next thing.
+ */
+import { type IconName } from './Icon';
+import { type IllustrationName } from './Illustration';
+export default function Empty({ icon, illustration, children, action, className, }: {
+    /** Decoration. Omit it where the surrounding card already carries one. */
+    icon?: IconName;
+    /** For an empty *surface* rather than an empty list: a figure instead of the
+     *  small mark, and the box loses its outline and centres itself. Wins over
+     *  `icon` where both are given -- two drawings saying the same thing is the
+     *  noise this is meant to avoid. */
+    illustration?: IllustrationName;
+    /** What is empty, and why if that helps. A sentence, not a label. */
+    children: React.ReactNode;
+    /** The obvious next thing, where there is one. */
+    action?: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Empty.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A list with nothing in it, said properly.
+ *
+ * There were two conventions and neither was a component. `.empty` — centred,
+ * generously padded — was used by five files; the settings panes used a bare
+ * `.set-hint`, which is the same 12px muted line that explains a heading. So
+ * "None configured." rendered as a fragment of caption floating under a card
+ * title, indistinguishable from a description of the thing above it, and a
+ * pane with nothing in it looked like a pane that had failed to finish drawing.
+ *
+ * **An empty state has three jobs and the old one did none of them.** Say the
+ * list is empty rather than leaving it ambiguous with loading. Say why, if
+ * there is a why. Offer the thing you would do next, if there is one.
+ *
+ * **The icon is decoration and is marked as such.** It is there so a pane of
+ * cards is scannable by shape — the same argument as `Card`'s. A screen reader
+ * gets the sentence, which is the part that carries the meaning.
+ *
+ * Deliberately quieter than a full-screen empty state: these sit inside a card
+ * that already has a heading, so a second large heading here would compete with
+ * the one above it. One line, optionally one button.
+ *
+ * **`illustration` is the same box given a whole surface.** A view with no
+ * applets on it is not a slot in a card -- it is the window, and the dashed
+ * outline that marks out where a list will be reads as a broken layout at that
+ * size. So the figure replaces the icon, the outline goes, and the box centres
+ * itself in whatever it was put in. Same component, because it is the same
+ * three jobs: say it is empty, say why, offer the next thing.
+ */
+import Icon from './Icon';
+import Illustration from './Illustration';
+export default function Empty({ icon, illustration, children, action, className, }) {
+    return (_jsxs("div", { className: `nothing${illustration ? ' nothing-surface' : ''}${className ? ` ${className}` : ''}`, children: [illustration ? (_jsx(Illustration, { name: illustration, size: 160, className: "nothing-figure" })) : (icon && (_jsx("span", { className: "nothing-mark", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) }))), _jsx("p", { className: "nothing-said", children: children }), action && _jsx("div", { className: "nothing-act", children: action })] }));
+}

package/dist/components/Field.d.ts

@@ -0,0 +1,58 @@
+/**
+ * A labelled input, its explanation, and what went wrong with it.
+ *
+ * **Almost every input in this app is labelled by its placeholder.**
+ * `placeholder="name"`, `placeholder="command"`,
+ * `placeholder="https://mcp.example.com/sse"` -- and a placeholder is not a
+ * label. It disappears the moment somebody types, so the one time you most want
+ * to know what a field was for is the one time it is gone: reviewing what you
+ * filled in. Half-finished forms are full of fields nobody can identify without
+ * clearing them first. Assistive technology treats it as a last-resort fallback
+ * for the same reason.
+ *
+ * **And thirty errors are red text sitting near a field, associated with
+ * nothing.** `<div className="set-hint" style={{ color: 'var(--bad)' }}>` says
+ * something is wrong to anyone looking directly at it, and says nothing at all
+ * to a screen reader on the input itself: no `aria-invalid`, no
+ * `aria-describedby`, so you can tab into a field the form has rejected and be
+ * told only its name. Colour alone carrying the meaning is the same failure in
+ * the other direction.
+ *
+ * So: the label is an element, the description and the error are wired to the
+ * input with `aria-describedby`, and a field in error says so with
+ * `aria-invalid` as well as with red.
+ *
+ * **The description sits above the input and the error below it**, in the order
+ * they are wanted. The description is what you read before typing -- under the
+ * field it is behind the cursor, arriving after the decision it was meant to
+ * inform. The error is the reply to what you typed, and a reply belongs after
+ * the thing it answers. Both can show at once: the rule still holds while you
+ * are breaking it.
+ */
+export interface FieldWiring {
+    id: string;
+    'aria-describedby': string | undefined;
+    'aria-invalid': boolean | undefined;
+}
+export default function Field({ label, hint, error, required, children, labelHidden, layout, className, }: {
+    /** What the field is. Always given -- there is no unlabelled case, only
+     *  fields whose label is hidden. */
+    label: string;
+    /** What to put in it, or what it will do. Read before typing, so it is drawn
+     *  above the input. */
+    hint?: React.ReactNode;
+    /** What is wrong. Truthy switches the field into its invalid state. */
+    error?: React.ReactNode;
+    required?: boolean;
+    /** For a field whose surroundings already name it -- a search box under a
+     *  heading that says Search. Still announced, just not drawn. */
+    labelHidden?: boolean;
+    /** `row` puts the label beside the control instead of above it, which is the
+     *  shape a settings pane wants: a column of names down the left and their
+     *  controls down the right, scannable as a list of what is set rather than a
+     *  form to fill in. Same element, same wiring, same guarantees -- the only
+     *  thing that changes is where the label sits. */
+    layout?: 'stack' | 'row';
+    children: (field: FieldWiring) => React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Field.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A labelled input, its explanation, and what went wrong with it.
+ *
+ * **Almost every input in this app is labelled by its placeholder.**
+ * `placeholder="name"`, `placeholder="command"`,
+ * `placeholder="https://mcp.example.com/sse"` -- and a placeholder is not a
+ * label. It disappears the moment somebody types, so the one time you most want
+ * to know what a field was for is the one time it is gone: reviewing what you
+ * filled in. Half-finished forms are full of fields nobody can identify without
+ * clearing them first. Assistive technology treats it as a last-resort fallback
+ * for the same reason.
+ *
+ * **And thirty errors are red text sitting near a field, associated with
+ * nothing.** `<div className="set-hint" style={{ color: 'var(--bad)' }}>` says
+ * something is wrong to anyone looking directly at it, and says nothing at all
+ * to a screen reader on the input itself: no `aria-invalid`, no
+ * `aria-describedby`, so you can tab into a field the form has rejected and be
+ * told only its name. Colour alone carrying the meaning is the same failure in
+ * the other direction.
+ *
+ * So: the label is an element, the description and the error are wired to the
+ * input with `aria-describedby`, and a field in error says so with
+ * `aria-invalid` as well as with red.
+ *
+ * **The description sits above the input and the error below it**, in the order
+ * they are wanted. The description is what you read before typing -- under the
+ * field it is behind the cursor, arriving after the decision it was meant to
+ * inform. The error is the reply to what you typed, and a reply belongs after
+ * the thing it answers. Both can show at once: the rule still holds while you
+ * are breaking it.
+ */
+import { useId } from 'react';
+export default function Field({ label, hint, error, required, children, labelHidden, layout = 'stack', className, }) {
+    const id = useId();
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { className: labelHidden ? 'sr-only' : 'field-label', htmlFor: id, children: [label, required && (_jsxs("span", { className: "field-required", "aria-label": "required", children: [' ', "*"] }))] }), hint && (_jsx("p", { className: "field-hint", id: hintId, children: hint })), children({
+                id,
+                /* Both, in reading order, when both are there. A field that has a rule
+                   and has broken it needs to say the rule too -- "must be a URL" on its
+                   own does not tell you what shape of URL. */
+                'aria-describedby': [hint && hintId, error && errorId].filter(Boolean).join(' ') || undefined,
+                'aria-invalid': error ? true : undefined,
+            }), error && (_jsx("p", { className: "field-error", id: errorId, role: "alert", children: error }))] }));
+}

package/dist/components/Icon.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The icon set. One component, one library, named glyphs.
+ *
+ * There were six hand-drawn icon components -- `ChatIcon`, `GearIcon`,
+ * `RefreshIcon`, `MinimizeIcon`, `StudioIcon`, `ConnectivityIcon` -- each a file
+ * exporting one path, each drawn to its own weight and its own optical size. Six
+ * hands, six sizes, and no way to add a seventh except by drawing it. That is
+ * how an interface ends up with a 14px gear beside a 16px chevron and nobody
+ * able to say which is wrong.
+ *
+ * These are **Pepicons Pencil**, hand-drawn, to sit with the Open Peeps
+ * illustrations rather than against them. Material Symbols was the set before,
+ * and the mismatch was not a matter of taste: Material is a *filled* set at ~27%
+ * ink coverage, Open Peeps is pure outline. Two drawings that share a screen
+ * should share a technique.
+ *
+ * **Attribution is a licence condition, not a courtesy.** Pepicons is CC BY 4.0
+ * (Open Peeps was CC0, which is why nothing like this line existed before).
+ * Credit: Pepicons by Christoph Kuehl -- https://pepicons.com. This comment is
+ * not enough on its own; the credit has to be somewhere a user can reach.
+ *
+ * **Inlined rather than installed.** The npm package ships the whole set, and a
+ * font or a bundle has to load before anything draws -- in an app that opens
+ * offline, on a machine that has just downloaded it, that is a flash of missing
+ * chrome on the one screen that has to inspire confidence. Nineteen glyphs cost
+ * nothing and cannot fail to arrive.
+ *
+ * `currentColor` throughout, so an icon takes the colour of the thing it sits
+ * in and never needs a variant.
+ *
+ * Source names, if you need to add a twentieth from https://pepicons.com:
+ *   chat      text-bubble
+ *   settings  gear
+ *   refresh   arrows-spin
+ *   minimize  minus
+ *   code      code
+ *   wifi      wifi
+ *   wifi-off  wifi-off
+ *   check     checkmark
+ *   close     times
+ *   info      info-circle
+ *   warning   exclamation-circle
+ *   error     no-entry
+ *   expand    expand
+ *   download  cloud-down
+ *   image     photo
+ *   bolt      electricity
+ *   speaker   speaker-high
+ *   mic       microphone
+ *   back      arrow-left
+ *   spinner   arrow-spin
+  file      file
+ */
+import type { IconName } from './iconNames';
+export type { IconName };
+export default function Icon({ name, size, className, title, }: {
+    name: IconName;
+    /** One number, because these are square and always have been. */
+    size?: number;
+    className?: string;
+    /** Given only when the icon is the whole message. An icon beside a label it
+     *  repeats is decoration, and decoration announced twice is noise. */
+    title?: string;
+}): import("react").JSX.Element;