@wtfalch/design 0.1.0

package/dist/components/Slider.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+/**
+ * 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 = (v) => String(v), disabled, labelHidden, size = 'md', danger, className, }) {
+    const id = useId();
+    // What the knob is at while it is being dragged. The prop is what was
+    // last settled; between the two the drag is shown and nothing is saved.
+    const [live, setLive] = useState(value);
+    const input = useRef(null);
+    const keyboard = useRef(false);
+    const dragging = useRef(false);
+    const settling = useRef(null);
+    // Read at commit time rather than closed over, so the native listener
+    // below is registered once and still calls the caller's latest handler.
+    const commit = useRef(onChange);
+    commit.current = onChange;
+    useEffect(() => {
+        if (!dragging.current && settling.current === null)
+            setLive(value);
+    }, [value]);
+    useEffect(() => {
+        const el = input.current;
+        if (!el)
+            return;
+        const settle = () => {
+            const v = Number(el.value);
+            if (settling.current !== null)
+                clearTimeout(settling.current);
+            if (!keyboard.current)
+                return commit.current(v);
+            settling.current = setTimeout(() => {
+                settling.current = null;
+                commit.current(v);
+            }, 350);
+        };
+        el.addEventListener('change', settle);
+        return () => {
+            el.removeEventListener('change', settle);
+            if (settling.current !== null)
+                clearTimeout(settling.current);
+        };
+    }, []);
+    const fill = max > min ? ((Math.min(max, Math.max(min, live)) - min) / (max - min)) * 100 : 0;
+    // How far into the risk the value is, 0..1: none up to `from`, all at `to`.
+    const risk = danger
+        ? Math.max(0, Math.min(1, (live - danger.from) / ((danger.to ?? max) - danger.from || 1)))
+        : 0;
+    return (_jsxs("div", { className: `slider-row slider-${size}${disabled ? ' is-disabled' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { htmlFor: id, className: labelHidden ? 'sr-only' : 'slider-body', children: [_jsx("span", { className: "slider-label", children: label }), hint && _jsx("span", { className: "slider-hint", children: hint })] }), _jsxs("div", { className: "slider-control", children: [_jsxs("span", { className: "slider-box", children: [_jsx("span", { className: "slider-track", style: {
+                                    '--slider-f': String(fill / 100),
+                                    '--slider-risk': `${Math.round(risk * 100)}%`,
+                                }, children: _jsx("input", { id: id, type: "range", className: "slider", min: min, max: max, step: step ?? 'any', value: live, disabled: disabled, "aria-valuetext": format(live), ref: input, onKeyDown: () => {
+                                        keyboard.current = true;
+                                    }, onPointerDown: () => {
+                                        keyboard.current = false;
+                                        dragging.current = true;
+                                    }, onPointerUp: () => {
+                                        dragging.current = false;
+                                    }, onPointerCancel: () => {
+                                        dragging.current = false;
+                                    }, 
+                                    // React's `onChange` is the per-pixel event; it only draws. The
+                                    // commit is the native `change`, wired above.
+                                    onChange: (e) => setLive(Number(e.target.value)) }) }), _jsx("output", { htmlFor: id, className: "slider-value mono", children: format(live) })] }), _jsx("span", { className: "slider-end mono", "aria-hidden": "true", children: format(min) }), _jsx("span", { className: "slider-end mono", "aria-hidden": "true", children: format(max) })] })] }));
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Data that genuinely has columns.
+ *
+ * **This is not `Rows`, and the difference is not cosmetic.** A `Row` is one
+ * thing with a name and some facts about it; you read down the names and stop
+ * at the one you want. A table is a grid you read *across* as well as down --
+ * comparing the same field between two things is the only reason to line them
+ * up in tracks. If nobody will ever compare column three between row two and
+ * row nine, it is a list, and a list is `Rows`.
+ *
+ * **A real `<table>`, because the semantics are the accessibility.** A grid of
+ * divs looks identical and announces as a wall of unrelated text: a screen
+ * reader reading a `<td>` says which column it is in, and `<th scope>` is what
+ * makes that possible. There is no ARIA that gets you back what a `<table>`
+ * gives for free, only ARIA that approximates it badly.
+ *
+ * **Numbers go right.** Not decoration -- digits are compared by their columns,
+ * and left-aligned numbers of different lengths cannot be. `align: 'end'` also
+ * switches the cell to tabular figures so the digits keep their tracks.
+ */
+export interface Column<T> {
+    /** The heading. Every column has one; an unlabelled column is a column
+     *  nobody can ask about. */
+    header: string;
+    /** What to draw in the cell. */
+    cell: (item: T) => React.ReactNode;
+    /** `end` for numbers and sizes, which compare by column. */
+    align?: 'start' | 'end';
+    /** Hides the heading visually and leaves it for a screen reader -- for the
+     *  column of buttons at the end, where a visible "Actions" is noise. */
+    quiet?: boolean;
+    width?: string;
+}
+export default function Table<T>({ caption, columns, rows, keyOf, empty, className, }: {
+    /** What the table is. Rendered as a real `<caption>`, which is the one place
+     *  a table's name belongs. */
+    caption: string;
+    columns: Column<T>[];
+    rows: T[];
+    keyOf: (item: T) => string;
+    empty?: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/Table.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => {
+                            /* 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. */
+                            const Cell = i === 0 ? 'th' : 'td';
+                            return (_jsx(Cell, { scope: i === 0 ? 'row' : undefined, className: c.align === 'end' ? 'num' : undefined, children: c.cell(item) }, c.header));
+                        }) }, keyOf(item)))) })] }) }));
+}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,72 @@
+/**
+ * One row of choices where only one is showing.
+ *
+ * **The arrow keys are the point.** A tab list is a single tab stop: you Tab
+ * into it once and then move along it with arrows. Rendering tabs as ordinary
+ * buttons gives the opposite -- one stop per tab -- so a keyboard user pages
+ * through the whole strip to reach whatever is after it. That is invisible
+ * unless you put the mouse down, which is why it is worth having a component
+ * that cannot get it wrong.
+ *
+ * **Settings' rail is one of these, and I said it was not.** The earlier note
+ * here argued that a vertical list with an explanatory line under each name is
+ * "a different control that happens to select one of several panes". That was
+ * about how it looks. It is a tablist by every behavioural test -- one of ten
+ * is current, choosing one swaps the pane beside it, `aria-current` was already
+ * on it -- and being written as ten plain buttons cost exactly what this
+ * component exists to prevent: ten tab stops between the top of the window and
+ * the pane. `orientation="vertical"` is the smaller change.
+ *
+ * `ViewTabs` is still not one: it carries inline rename, drag-to-reorder and a
+ * cog per tab, and swapping it for this would delete features to gain a
+ * keyboard it can be given directly. The studio's "Source / Preview" is one
+ * button that changes its own label, which is a toggle.
+ *
+ * **Groups are headings, not tabs.** A vertical rail can put its tabs under
+ * group labels -- Settings has fifteen leaves and a flat list of fifteen is a
+ * list you read twice. The label is a heading with a hint under it and is not
+ * interactive: a button inside a tablist that is not a tab is a thing the
+ * arrow keys do not know about, and a collapsed group would hide tabs from a
+ * keyboard that expects to reach every one. So the rail shows everything and
+ * the group says what the tabs under it have in common; a tab inside a group
+ * shows no hint of its own, because the group's is the context and fifteen
+ * one-liners is the height the grouping was meant to save. Horizontal strips
+ * ignore groups -- there is no room above a tab for a heading.
+ */
+import React from 'react';
+export interface Tab {
+    id: string;
+    label: string;
+    /** Shown after the label, for a count or a state. */
+    badge?: string;
+    /** A line under the label, for a rail with room for one. Ignored in a
+     *  horizontal strip, where there is none, and under a group, where the
+     *  group's hint is the context. */
+    hint?: string;
+    disabled?: boolean;
+    /** The group this tab sits under in a vertical rail -- a `TabGroup.id`.
+     *  Tabs of one group must be adjacent in `tabs`; the label is drawn above
+     *  the first of them. */
+    group?: string;
+}
+export interface TabGroup {
+    id: string;
+    label: string;
+    /** What the tabs under this label have in common, in one line. */
+    hint?: string;
+}
+export default function Tabs({ tabs, value, onChange, label, orientation, groups, className, }: {
+    tabs: Tab[];
+    value: string;
+    onChange: (id: string) => void;
+    /** What this set of tabs is choosing between. */
+    label: string;
+    /** `vertical` for a rail down the side of a pane — Settings' sections,
+     *  which are tabs in every way that matters and were separate tab stops
+     *  because they were written as buttons. */
+    orientation?: 'horizontal' | 'vertical';
+    /** The headings a vertical rail draws above runs of tabs that name them in
+     *  `Tab.group`. A group no tab names is not drawn. */
+    groups?: TabGroup[];
+    className?: string;
+}): React.JSX.Element;

package/dist/components/Tabs.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One row of choices where only one is showing.
+ *
+ * **The arrow keys are the point.** A tab list is a single tab stop: you Tab
+ * into it once and then move along it with arrows. Rendering tabs as ordinary
+ * buttons gives the opposite -- one stop per tab -- so a keyboard user pages
+ * through the whole strip to reach whatever is after it. That is invisible
+ * unless you put the mouse down, which is why it is worth having a component
+ * that cannot get it wrong.
+ *
+ * **Settings' rail is one of these, and I said it was not.** The earlier note
+ * here argued that a vertical list with an explanatory line under each name is
+ * "a different control that happens to select one of several panes". That was
+ * about how it looks. It is a tablist by every behavioural test -- one of ten
+ * is current, choosing one swaps the pane beside it, `aria-current` was already
+ * on it -- and being written as ten plain buttons cost exactly what this
+ * component exists to prevent: ten tab stops between the top of the window and
+ * the pane. `orientation="vertical"` is the smaller change.
+ *
+ * `ViewTabs` is still not one: it carries inline rename, drag-to-reorder and a
+ * cog per tab, and swapping it for this would delete features to gain a
+ * keyboard it can be given directly. The studio's "Source / Preview" is one
+ * button that changes its own label, which is a toggle.
+ *
+ * **Groups are headings, not tabs.** A vertical rail can put its tabs under
+ * group labels -- Settings has fifteen leaves and a flat list of fifteen is a
+ * list you read twice. The label is a heading with a hint under it and is not
+ * interactive: a button inside a tablist that is not a tab is a thing the
+ * arrow keys do not know about, and a collapsed group would hide tabs from a
+ * keyboard that expects to reach every one. So the rail shows everything and
+ * the group says what the tabs under it have in common; a tab inside a group
+ * shows no hint of its own, because the group's is the context and fifteen
+ * one-liners is the height the grouping was meant to save. Horizontal strips
+ * ignore groups -- there is no room above a tab for a heading.
+ */
+import React, { useRef } from 'react';
+export default function Tabs({ tabs, value, onChange, label, orientation = 'horizontal', groups = [], className, }) {
+    const strip = useRef(null);
+    const grouped = orientation === 'vertical' && groups.length > 0;
+    const move = (from, by) => {
+        const n = tabs.length;
+        for (let i = 1; i <= n; i++) {
+            const at = (from + by * i + n * n) % n;
+            if (!tabs[at].disabled) {
+                onChange(tabs[at].id);
+                // Focus follows selection, which is the pattern for tabs whose panels
+                // are cheap to show. The alternative -- move focus, select on Enter --
+                // is for tab panels that cost something to render, and none here do.
+                strip.current?.querySelectorAll('[role="tab"]')[at]?.focus();
+                return;
+            }
+        }
+    };
+    return (_jsxs("div", { className: `tabs tabs-${orientation}${className ? ` ${className}` : ''}`, role: "tablist", "aria-label": label, "aria-orientation": orientation, ref: strip, children: [tabs.map((t, i) => (_jsxs(React.Fragment, { children: [grouped &&
+                        t.group &&
+                        tabs[i - 1]?.group !== t.group &&
+                        (() => {
+                            const g = groups.find((x) => x.id === t.group);
+                            return g ? (_jsxs("div", { className: "tab-group", role: "presentation", children: [_jsx("span", { className: "tab-group-label", children: g.label }), g.hint && _jsx("span", { className: "tab-hint", children: g.hint })] })) : null;
+                        })(), _jsxs("button", { role: "tab", type: "button", className: `tab${t.id === value ? ' on' : ''}${grouped && t.group ? ' in-group' : ''}`, "aria-selected": t.id === value, disabled: t.disabled, 
+                        /* One tab stop for the whole strip: everything but the current tab is
+                         taken out of the tab order, and the arrows move between them. */
+                        tabIndex: t.id === value ? 0 : -1, onClick: () => onChange(t.id), onKeyDown: (e) => {
+                            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                move(i, 1);
+                            }
+                            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                move(i, -1);
+                            }
+                            if (e.key === 'Home') {
+                                e.preventDefault();
+                                move(-1, 1);
+                            }
+                            if (e.key === 'End') {
+                                e.preventDefault();
+                                move(tabs.length, -1);
+                            }
+                        }, children: [_jsx("span", { className: "tab-label", children: t.label }), t.badge && _jsx("span", { className: "tab-badge", children: t.badge }), t.hint && orientation === 'vertical' && !(grouped && t.group) && (_jsx("span", { className: "tab-hint", children: t.hint }))] })] }, t.id))), _jsx("span", { className: "tabs-rule", "aria-hidden": "true" })] }));
+}

package/dist/components/Textarea.d.ts

@@ -0,0 +1,9 @@
+export interface Props extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    size?: 'sm' | 'md' | 'lg';
+    /** Monospace — a system prompt, an environment block, anything where the
+     *  characters are the content. */
+    mono?: boolean;
+    className?: string;
+}
+declare const Textarea: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/components/Textarea.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The other bare control `Field` wraps.
+ *
+ * Not resizable by hand. The chat composer grows with what you type, and the
+ * browser's drag handle fought it — you would size it, type a line, and it
+ * would snap back. `resize: none` lives in the stylesheet on the element, so
+ * 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.
+ */
+import { forwardRef } from 'react';
+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 });
+});
+export default Textarea;

package/dist/components/Toast.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Something happened, and it does not need answering.
+ *
+ * There is no transient feedback in this app at all. Every outcome is either a
+ * `.callout` that stays until the page changes, or nothing -- so "saved",
+ * "copied", "model removed" and "conversation deleted" are all silent, and the
+ * only way to know a button worked is that something else moved.
+ *
+ * **A toast is for the outcome you would not have chased.** If the reader has to
+ * act on it, it is a callout and belongs on the page. If they have to decide, it
+ * is a dialog. This is the third case: it worked, you may carry on, and in four
+ * seconds there will be no trace.
+ *
+ * **`role="status"`, not `alert`.** An alert interrupts whatever a screen reader
+ * is saying, which is right for "the download failed" and rude for "copied".
+ * The failing case passes `tone="bad"`, which is the one that promotes itself.
+ */
+export interface Toast {
+    text: string;
+    /** The same four words `Callout` and `Pill` use. `warn` was missing here
+     *  until 2026-09-05 -- three tones where the rest of the system has four. */
+    tone: 'info' | 'good' | 'warn' | 'bad';
+}
+export declare function useToast(): (text: string, tone?: Toast["tone"]) => void;
+/**
+ * The queue and the region, once, at the root.
+ *
+ * React Aria's `ToastQueue` owns what a `useState` list and two `setTimeout`s
+ * did by hand, and three things they did not: the timeout pauses while the
+ * pointer or focus is on the toast; the region is a landmark, so a screen
+ * reader can reach it with F6 rather than only hearing it; and dismissing one
+ * puts focus back where it was, instead of dropping it on the body.
+ *
+ * The role changes, and on purpose. Each toast was `role="status"` -- or
+ * `alert` for the failing tone -- which is right for text that only has to be
+ * heard. These carry a Dismiss button, and a live region's contents are not
+ * reachable; React Aria makes each toast an `alertdialog` inside a live
+ * `region` for that reason, so the announcement still happens and the button
+ * can still be reached.
+ */
+export declare function ToastHost({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Something happened, and it does not need answering.
+ *
+ * There is no transient feedback in this app at all. Every outcome is either a
+ * `.callout` that stays until the page changes, or nothing -- so "saved",
+ * "copied", "model removed" and "conversation deleted" are all silent, and the
+ * only way to know a button worked is that something else moved.
+ *
+ * **A toast is for the outcome you would not have chased.** If the reader has to
+ * act on it, it is a callout and belongs on the page. If they have to decide, it
+ * is a dialog. This is the third case: it worked, you may carry on, and in four
+ * seconds there will be no trace.
+ *
+ * **`role="status"`, not `alert`.** An alert interrupts whatever a screen reader
+ * is saying, which is right for "the download failed" and rude for "copied".
+ * The failing case passes `tone="bad"`, which is the one that promotes itself.
+ */
+import { createContext, useContext, useMemo, useState } from 'react';
+import Icon from './Icon';
+import { UNSTABLE_Toast as AriaToast, Button, Text, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, } from 'react-aria-components';
+const MARK = {
+    info: 'info',
+    good: 'check',
+    warn: 'warning',
+    bad: 'error',
+};
+/** How long one stays. Long enough to read twice, short enough that a run of
+ *  them does not pile up -- and paused while the pointer or focus is on it,
+ *  because a message that expires while you are reading it was never shown. */
+const LINGER = 4000;
+const Ctx = createContext(() => { });
+export function useToast() {
+    return useContext(Ctx);
+}
+/**
+ * The queue and the region, once, at the root.
+ *
+ * React Aria's `ToastQueue` owns what a `useState` list and two `setTimeout`s
+ * did by hand, and three things they did not: the timeout pauses while the
+ * pointer or focus is on the toast; the region is a landmark, so a screen
+ * reader can reach it with F6 rather than only hearing it; and dismissing one
+ * puts focus back where it was, instead of dropping it on the body.
+ *
+ * The role changes, and on purpose. Each toast was `role="status"` -- or
+ * `alert` for the failing tone -- which is right for text that only has to be
+ * heard. These carry a Dismiss button, and a live region's contents are not
+ * reachable; React Aria makes each toast an `alertdialog` inside a live
+ * `region` for that reason, so the announcement still happens and the button
+ * can still be reached.
+ */
+export function ToastHost({ children }) {
+    const queue = useMemo(() => new ToastQueue({ maxVisibleToasts: 4 }), []);
+    /* What gets read aloud, and it is not the toast.
+  
+       The old region was `aria-live="polite"` around the toasts themselves, so a
+       screen reader heard "Settings saved" the moment it appeared. React Aria's
+       region is a landmark instead -- reachable, labelled "1 notification." --
+       and after a push there is no live region anywhere in the document: that
+       was measured, not assumed, and it would have shipped "saved", "copied" and
+       "the download failed" in silence to anyone not looking.
+  
+       So the text is mirrored into two visually-hidden live regions of our own:
+       polite for the ordinary case and assertive for a failure, the same
+       distinction `role="status"` and `role="alert"` used to draw. An alert
+       interrupts whatever is being read, right for bad news and rude for
+       "copied". */
+    const [polite, setPolite] = useState('');
+    const [assertive, setAssertive] = useState('');
+    const push = useMemo(() => (text, tone = 'info') => {
+        queue.add({ text, tone }, { timeout: LINGER });
+        const say = tone === 'bad' ? setAssertive : setPolite;
+        // Cleared and re-set, so the same message twice is announced twice.
+        say('');
+        requestAnimationFrame(() => say(text));
+    }, [queue]);
+    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 }) })] })) })] }));
+}

package/dist/components/Toggle.d.ts

@@ -0,0 +1,56 @@
+/**
+ * A setting that takes effect as it moves.
+ *
+ * **A checkbox and a switch are not the same control, and the difference is not
+ * visual.** A checkbox collects an answer: you tick it, and it applies when you
+ * press Save. A switch *is* the action — flipping it changes the thing, now,
+ * and there is nothing to confirm afterwards. That is why a switch reads as on
+ * or off rather than ticked or blank: the two states are both settled, and
+ * neither is a draft.
+ *
+ * Six settings in this app saved the moment they changed and were all drawn as
+ * tick boxes: whether an applet is enabled, whether it reaches the internet,
+ * whether a tool is granted, whether a server is trusted. Every one of them
+ * promised a Save button that does not
+ * exist. The header's status panel (gone since 2026-09-03) was the only one
+ * that had it right, in a comment nobody else read.
+ *
+ * **`role="switch"`, so it is announced as one.** A screen reader says "on" and
+ * "off" instead of "checked" and "not checked" — which is the same distinction
+ * in words, and the only signal a non-visual reader gets that pressing it does
+ * something immediately.
+ *
+ * **The label is the hit area.** A 30×18 target fails the minimum on its own,
+ * and reaching for the words is what people do anyway.
+ *
+ * **One switch, or several checkboxes.** A lone binary setting is a switch. A
+ * set you pick from is a list of checkboxes — fifteen switches in a column read
+ * as fifteen unrelated settings rather than one choice with fifteen parts. See
+ * `Checkbox`.
+ */
+export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size, className, }: {
+    label: React.ReactNode;
+    /** What it does, or what turning it off costs. Under the label, in the same
+     *  column, so a long explanation does not push the switch off its row. */
+    hint?: React.ReactNode;
+    checked: boolean;
+    /** Returning a promise moves the knob at once and marks the row busy until it
+     *  settles: a rejection puts the knob back, a resolution holds it until
+     *  `checked` catches up. A plain return leaves everything to the caller. */
+    onChange: (on: boolean) => void | Promise<void>;
+    disabled?: boolean;
+    /** The state in words, beside the switch.
+     *
+     *  Only where nothing else already says it. A switch that is a `Card`'s
+     *  action has a title above it naming what it governs and a description
+     *  saying what happens either way — a third word beside the switch is the
+     *  same fact a third time, in the one place it does not fit. The header's
+     *  status panel kept it because there the row was the whole component; it
+     *  is gone, and the gallery's specimen is the one caller left. */
+    said?: React.ReactNode;
+    labelHidden?: boolean;
+    /** The same three the rest of the controls take. `sm` for a switch in a
+     *  toolbar or a dense row; `lg` where it is the only thing on the screen. */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;