@wtfalch/design 0.6.0 → 0.7.0

package/dist/components/Rows.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 /**
  * A list of things, each with a name, some qualifiers and something to do.
  *

package/dist/components/ScrollArea.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 import { useCallback, useEffect, useRef } from 'react';
 export default function ScrollArea({ axis = 'y', fade = true, hideBar = false, className, children, ref, label, }) {
     const own = useRef(null);

package/dist/components/Select.d.ts

@@ -12,6 +12,11 @@ interface Props {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     disabled?: boolean;
+    /** What the form submits this under. Without it there is nothing to post,
+     *  which is what sent callers back to a mirrored hidden input. */
+    name?: string;
+    /** The form to submit with, when the control sits outside it. */
+    form?: string;
     value?: string | number;
     defaultValue?: string | number;
     /** Native-select-shaped on purpose -- `e.target.value` -- because that is
@@ -24,5 +29,5 @@ interface Props {
     /** 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 default function Select({ block, size, className, children, value, defaultValue, onChange, disabled, name, form, id, title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, aside, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/Select.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 import { Children, isValidElement, useEffect, useRef } from 'react';
 /** Read `<option>` children into a list this can render itself. */
 function readOptions(children) {
@@ -23,7 +30,7 @@ function readOptions(children) {
    `<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, }) {
+export default function Select({ block = false, size, className, children, value, defaultValue, onChange, disabled, name, form, 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`
@@ -52,5 +59,5 @@ export default function Select({ block = false, size, className, children, value
     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))) }) })] }));
+        }, isDisabled: disabled, name: name, form: form, "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.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 import { useState } from 'react';
 /**
  * Pick a tile size by sweeping a grid, the way a spreadsheet asks for table

package/dist/components/Slider.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 import { useEffect, useId, useRef, useState } from 'react';
 /**
  * A number chosen from a range, by dragging.

package/dist/components/SplitPane.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));

package/dist/components/Stat.d.ts

@@ -0,0 +1,45 @@
+/**
+ * One figure, with what it counts over it and what it means under it.
+ *
+ * **Drawn three times before it was a component.** valet's portal overview
+ * and its organisation page under `/admin` each had their own, and the same
+ * account's numbers rendered in two shapes on the two surfaces read as two
+ * products rather than as two views of one thing. Folding them into one local
+ * `Stat` fixed that inside valet and left the next app to rediscover it;
+ * valet's own docblock says so ("a candidate for the package, once a second
+ * product wants one"). The mail client's counts are the second product.
+ *
+ * **`tabular-nums`, and that is the reason this is not a `Card`.** Figures
+ * are read down a row, and proportional digits put the same magnitude in
+ * different places on every tile, so a column of numbers stops being
+ * comparable at a glance. A tile is not a card with a big number in it: it is
+ * a number with furniture, and the furniture exists to make the number
+ * legible next to the one beside it.
+ *
+ * **The label goes over the value.** A figure read before you know what it
+ * counts is a figure you read twice. This is the one place in the package
+ * where the caption leads.
+ *
+ * **`look="bare"` is the compact form**, for a figure inside a row that
+ * already has a border around it -- valet's `.v-figure`, in the admin table.
+ * A bordered tile inside a bordered row is two boxes saying one thing.
+ */
+export default function Stat({ label, value, note, tone, look, className, }: {
+    /** What is being counted. Over the value, not under it. */
+    label: React.ReactNode;
+    /** The figure. A string, because the formatting -- locale, unit, precision
+     *  -- is the caller's: this component cannot know whether 1024 should read
+     *  as `1,024`, `1.0k` or `1 KiB`. */
+    value: React.ReactNode;
+    /** The sentence under the figure. What it excludes, when it was measured,
+     *  what it is a fraction of. */
+    note?: React.ReactNode;
+    /** Semantic colour on the value, the same four words as `Callout` and
+     *  `Pill`. Left off, a figure is just a figure -- which is right for most
+     *  of them, and a row where every tile is coloured says nothing. */
+    tone?: 'info' | 'good' | 'warn' | 'bad';
+    /** `tile` has a border and a panel behind it. `bare` is the figure alone,
+     *  for a cell in something already bordered. */
+    look?: 'tile' | 'bare';
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Stat.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One figure, with what it counts over it and what it means under it.
+ *
+ * **Drawn three times before it was a component.** valet's portal overview
+ * and its organisation page under `/admin` each had their own, and the same
+ * account's numbers rendered in two shapes on the two surfaces read as two
+ * products rather than as two views of one thing. Folding them into one local
+ * `Stat` fixed that inside valet and left the next app to rediscover it;
+ * valet's own docblock says so ("a candidate for the package, once a second
+ * product wants one"). The mail client's counts are the second product.
+ *
+ * **`tabular-nums`, and that is the reason this is not a `Card`.** Figures
+ * are read down a row, and proportional digits put the same magnitude in
+ * different places on every tile, so a column of numbers stops being
+ * comparable at a glance. A tile is not a card with a big number in it: it is
+ * a number with furniture, and the furniture exists to make the number
+ * legible next to the one beside it.
+ *
+ * **The label goes over the value.** A figure read before you know what it
+ * counts is a figure you read twice. This is the one place in the package
+ * where the caption leads.
+ *
+ * **`look="bare"` is the compact form**, for a figure inside a row that
+ * already has a border around it -- valet's `.v-figure`, in the admin table.
+ * A bordered tile inside a bordered row is two boxes saying one thing.
+ */
+export default function Stat({ label, value, note, tone, look = 'tile', className, }) {
+    const classes = ['stat', look === 'bare' ? 'stat-bare' : '', className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, "data-tone": tone, children: [_jsx("p", { className: "stat-label", children: label }), _jsx("p", { className: "stat-value", children: value }), note && _jsx("p", { className: "stat-note", children: note })] }));
+}

package/dist/components/Tabs.d.ts

@@ -39,6 +39,27 @@ export interface Tab {
     label: string;
     /** Shown after the label, for a count or a state. */
     badge?: string;
+    /**
+     * What the badge means, on hover and to a screen reader.
+     *
+     * A badge is one or two characters by design, and a mark that terse either
+     * explains itself or does not. valet had two on its admin strip that did
+     * not, and moved them out of the badge into a visible line rather than ship
+     * a glyph nobody could resolve -- which is a page working around a
+     * component, not a page making a choice.
+     *
+     * On `title` plus `aria-label`, not `title` alone: `title` never appears on
+     * a touch screen and is inconsistently announced, so the accessible name is
+     * set explicitly. The badge becomes a labelled `<abbr>`-shaped thing rather
+     * than decoration, which is what it always was.
+     *
+     * Additive, deliberately. Without this the badge's own text stays part of
+     * the tab's accessible name, which is right for the count case the prop
+     * above was written for -- "Keys 3" is a useful thing to hear. Hiding an
+     * untitled badge would have been the tidier rule and would have taken that
+     * count away from everyone already relying on it.
+     */
+    badgeTitle?: 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. */

package/dist/components/Tabs.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 /**
  * One row of choices where only one is showing.
  *
@@ -78,5 +85,5 @@ export default function Tabs({ tabs, value, onChange, label, orientation = 'hori
                                 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" })] }));
+                        }, children: [_jsx("span", { className: "tab-label", children: t.label }), t.badge && (_jsx("span", { className: "tab-badge", title: t.badgeTitle, "aria-label": t.badgeTitle, 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/Toast.d.ts

@@ -1,27 +1,19 @@
-/**
- * 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;
+type Push = (text: string, tone?: Toast['tone']) => void;
+export declare function useToast(): Push;
+/**
+ * Whether anything above will actually show a toast.
+ *
+ * For a component that has a second way of saying something and would rather
+ * use it than push into the void. `useToast` outside a host is a no-op that
+ * typechecks, which is the failure this exists to let you avoid.
+ */
+export declare function useHasToastHost(): boolean;
 /**
  * The queue and the region, once, at the root.
  *
@@ -37,7 +29,21 @@ export declare function useToast(): (text: string, tone?: Toast["tone"]) => void
  * 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.
+ *
+ * **Nesting one inside another is a no-op, and that is what makes this usable
+ * by a package.** `@wtfalch/email`'s mail client wanted to say "Archived."
+ * and could not: `useToast` needs a host above it, so the component would
+ * have had to wrap itself in one -- and then an application that already had
+ * a host would carry two regions announcing into the same page. It wrote its
+ * own `role="status"` strip instead and said so in a docblock, which is a
+ * package working around a package.
+ *
+ * So a `ToastHost` that finds one above it renders its children and steps
+ * aside. A library wraps itself unconditionally and gets the right answer
+ * both ways: its own region in an app that has none, and the app's region --
+ * one queue, one landmark, one place messages pile up -- in an app that does.
  */
 export declare function ToastHost({ children }: {
     children: React.ReactNode;
 }): import("react").JSX.Element;
+export {};

package/dist/components/Toast.js

@@ -1,4 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 /**
  * Something happened, and it does not need answering.
  *
@@ -29,9 +36,23 @@ const MARK = {
  *  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(() => { });
+/* `null`, not a no-op, so `ToastHost` can tell "nobody above me" from "a host
+   above me whose push happens to do nothing". `useToast` still hands back a
+   no-op, which is the old behaviour. */
+const Ctx = createContext(null);
+const NOOP = () => { };
 export function useToast() {
-    return useContext(Ctx);
+    return useContext(Ctx) ?? NOOP;
+}
+/**
+ * Whether anything above will actually show a toast.
+ *
+ * For a component that has a second way of saying something and would rather
+ * use it than push into the void. `useToast` outside a host is a no-op that
+ * typechecks, which is the failure this exists to let you avoid.
+ */
+export function useHasToastHost() {
+    return useContext(Ctx) !== null;
 }
 /**
  * The queue and the region, once, at the root.
@@ -48,8 +69,22 @@ export function useToast() {
  * 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.
+ *
+ * **Nesting one inside another is a no-op, and that is what makes this usable
+ * by a package.** `@wtfalch/email`'s mail client wanted to say "Archived."
+ * and could not: `useToast` needs a host above it, so the component would
+ * have had to wrap itself in one -- and then an application that already had
+ * a host would carry two regions announcing into the same page. It wrote its
+ * own `role="status"` strip instead and said so in a docblock, which is a
+ * package working around a package.
+ *
+ * So a `ToastHost` that finds one above it renders its children and steps
+ * aside. A library wraps itself unconditionally and gets the right answer
+ * both ways: its own region in an app that has none, and the app's region --
+ * one queue, one landmark, one place messages pile up -- in an app that does.
  */
 export function ToastHost({ children }) {
+    const outer = useContext(Ctx);
     const queue = useMemo(() => new ToastQueue({ maxVisibleToasts: 4 }), []);
     /* What gets read aloud, and it is not the toast.
   
@@ -74,5 +109,11 @@ export function ToastHost({ children }) {
         say('');
         requestAnimationFrame(() => say(text));
     }, [queue]);
+    /* Somebody above owns the region. Render through: pushing into the outer
+       queue is what keeps one landmark and one pile of messages on the page.
+       After every hook, because a hook count that changes with context is a
+       React error. */
+    if (outer)
+        return _jsx(_Fragment, { children: children });
     return (_jsxs(Ctx.Provider, { value: push, children: [children, _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: polite }), _jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: assertive }), _jsx(ToastRegion, { queue: queue, className: "toasts", children: ({ toast }) => (_jsxs(AriaToast, { toast: toast, className: `toast toast-${toast.content.tone}`, children: [_jsx(Icon, { name: MARK[toast.content.tone], size: 16, className: "toast-mark" }), _jsx(ToastContent, { className: "grow", children: _jsx(Text, { slot: "title", children: toast.content.text }) }), _jsx(Button, { slot: "close", className: "ghost size-sm", "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 14 }) })] })) })] }));
 }

package/dist/components/Toggle.d.ts

@@ -1,33 +1,3 @@
-/**
- * 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

package/dist/components/Toggle.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 /**
  * A setting that takes effect as it moves.
  *

package/dist/components/Tooltip.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 /**
  * A tooltip. It was called `Explain`, which named the intention rather than the
  * thing -- so it sat in a catalogue beside Button and Callout as though it were

package/dist/components/Tour.d.ts

@@ -1,26 +1,3 @@
-/**
- * A short walk round the chrome, once, after onboarding.
- *
- * Onboarding answers "what does this need to run". It says nothing about the
- * four controls somebody is then left alone with: two floating buttons in one
- * corner, a cog in another, and a `+` beside the board name. Every one of them
- * is an icon with a `title`, which is a tooltip you have to already suspect is
- * there to go looking for.
- *
- * **It points at the real thing.** Each step finds its target by selector and
- * cuts a hole in the scrim over it, so the control being described is the
- * control you can see — not a screenshot of one, which goes stale the first
- * time the button moves.
- *
- * **A step whose target is missing is skipped, not shown empty.** The chat
- * launcher is not on the page while the dock is open, and the studio button
- * changes what it does when a session is minimised. A tour that insists on
- * pointing at something that is not there would be describing a different app.
- *
- * **Escape ends it and it never comes back on its own.** This is the least
- * important thing on the screen and it is in the way of everything else; the
- * one unforgivable version is the one you cannot get out of.
- */
 export interface TourStop {
     /** Where it points. Missing from the page means the stop is skipped. */
     target: string;

package/dist/components/Tour.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module's own JSX attaches handlers or calls hooks. A
+   server component may still import it -- that is the point -- it simply
+   renders on the client. The ones without this line (Brand, Empty, Icon,
+   Illustration, Pill, Progress, Skeleton, Stat, Textarea, Table) render on
+   the server, which is why the directive is per component rather than one
+   line at the package's front door. */
 /**
  * A short walk round the chrome, once, after onboarding.
  *

package/dist/index.d.ts

@@ -22,7 +22,10 @@ export { default as Brand } from './components/Brand.js';
 export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks.js';
 export type { BrandName, FillMark, Mark, StrokeMark } from './components/brandMarks.js';
 export { default as Button } from './components/Button.js';
-export type { Props as ButtonProps } from './components/Button.js';
+/** The union: the button's props, or the DOM's when `asChild` hands the
+ *  element to the caller. `ButtonOwnProps` is the button-only half, for a
+ *  wrapper that never slots. */
+export type { ButtonProps, Props as ButtonOwnProps } from './components/Button.js';
 export { default as Callout } from './components/Callout.js';
 export { default as Card } from './components/Card.js';
 export { default as Checkbox } from './components/Checkbox.js';
@@ -45,6 +48,9 @@ export type { IconName } from './components/iconNames.js';
 export { default as Illustration } from './components/Illustration.js';
 export { default as Input } from './components/Input.js';
 export type { Props as InputProps } from './components/Input.js';
+/** A key, or a chord. The rule `Menu` and `Command` each had a private copy
+ *  of, now one component a consumer can reach. */
+export { default as Kbd } from './components/Kbd.js';
 export { default as Markdown } from './components/Markdown.js';
 export { default as Menu } from './components/Menu.js';
 export type { Item as MenuItem, Section as MenuSection } from './components/Menu.js';
@@ -67,6 +73,9 @@ export type { Props as ScrollAreaProps } from './components/ScrollArea.js';
 export { default as Select } from './components/Select.js';
 export { default as SizeGrid } from './components/SizeGrid.js';
 export { default as Skeleton } from './components/Skeleton.js';
+/** One figure, with what it counts over it. Three apps drew this before it
+ *  was here. */
+export { default as Stat } from './components/Stat.js';
 export { default as Slider } from './components/Slider.js';
 /** Two panes and a handle between them, the handle being a real `separator`
  *  widget rather than a div with a mousedown listener. */
@@ -78,7 +87,9 @@ export { default as Tabs } from './components/Tabs.js';
 export type { Tab, TabGroup } from './components/Tabs.js';
 export { default as Textarea } from './components/Textarea.js';
 export type { Props as TextareaProps } from './components/Textarea.js';
-export { Toast, ToastHost, useToast } from './components/Toast.js';
+/** `ToastHost` nests: one inside another renders through, so a package can
+ *  wrap itself and still leave an application with a single region. */
+export { Toast, ToastHost, useHasToastHost, useToast } from './components/Toast.js';
 export { default as Toggle } from './components/Toggle.js';
 export { default as Tooltip } from './components/Tooltip.js';
 export { default as Tour } from './components/Tour.js';

package/dist/index.js

@@ -42,6 +42,9 @@ export { hueOf, initialsOf } from './components/initials.js';
 export { ICON_NAMES } from './components/iconNames.js';
 export { default as Illustration } from './components/Illustration.js';
 export { default as Input } from './components/Input.js';
+/** A key, or a chord. The rule `Menu` and `Command` each had a private copy
+ *  of, now one component a consumer can reach. */
+export { default as Kbd } from './components/Kbd.js';
 export { default as Markdown } from './components/Markdown.js';
 export { default as Menu } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';
@@ -62,6 +65,9 @@ export { default as ScrollArea } from './components/ScrollArea.js';
 export { default as Select } from './components/Select.js';
 export { default as SizeGrid } from './components/SizeGrid.js';
 export { default as Skeleton } from './components/Skeleton.js';
+/** One figure, with what it counts over it. Three apps drew this before it
+ *  was here. */
+export { default as Stat } from './components/Stat.js';
 export { default as Slider } from './components/Slider.js';
 /** Two panes and a handle between them, the handle being a real `separator`
  *  widget rather than a div with a mousedown listener. */
@@ -69,7 +75,9 @@ export { default as SplitPane } from './components/SplitPane.js';
 export { default as Table } from './components/Table.js';
 export { default as Tabs } from './components/Tabs.js';
 export { default as Textarea } from './components/Textarea.js';
-export { ToastHost, useToast } from './components/Toast.js';
+/** `ToastHost` nests: one inside another renders through, so a package can
+ *  wrap itself and still leave an application with a single region. */
+export { ToastHost, useHasToastHost, useToast } from './components/Toast.js';
 export { default as Toggle } from './components/Toggle.js';
 export { default as Tooltip } from './components/Tooltip.js';
 export { default as Tour } from './components/Tour.js';