@wtfalch/design 0.6.0 → 0.8.0

package/dist/components/Button.d.ts

@@ -1,29 +1,9 @@
-/**
- * A button. The most-copied markup in the app, finally a component.
- *
- * Four kinds that look like four things, three sizes, and a busy state that is
- * not a disabled one. None of that is new — all of it was in the stylesheet
- * already, and every call site assembled it by hand from
- * `<button className="primary size-sm">`. A page in the gallery documented that
- * markup, which is how a catalogue teaches people to copy rather than import.
- *
- * **`type="button"` is the default, and that is the whole reason this exists
- * rather than a class.** A `<button>` with no type is `type="submit"`: drop one
- * inside a `<form>` and pressing it submits the form and reloads the page. That
- * is not a thing anybody writes on purpose, it is a thing everybody forgets —
- * fifty-eight of them here, found by a linter rather than by a person. A
- * default cannot be forgotten. `type="submit"` is still available, and now it
- * has to be asked for, which is the right way round.
- *
- * **Behaviour comes from React Aria.** Press handling that works with a mouse,
- * a touch, a pen and a keyboard is more than `onClick`: it is pointer capture,
- * the difference between a press that ends on the button and one that drags
- * off it, and not firing twice on a touch screen. `data-pressed`,
- * `data-hovered` and `data-focus-visible` land on the element, so the
- * stylesheet keeps describing states rather than tracking them.
- */
-import { type ButtonProps } from 'react-aria-components';
-export interface Props extends Omit<ButtonProps, 'className' | 'style' | 'children'> {
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+/** What this component adds, on either element. Kept separate from React
+ *  Aria's set so the `asChild` half of `ButtonProps` can have these without
+ *  the button-only ones -- `className` lives here, and React Aria's own
+ *  `className` is a function-or-string this package does not want. */
+export interface OwnProps {
     children?: React.ReactNode;
     /** The same word every other control in the package uses. React Aria spells
      *  it `isDisabled`, and that still works; this one exists so a consumer does
@@ -60,4 +40,16 @@ export interface Props extends Omit<ButtonProps, 'className' | 'style' | 'childr
     iconOnly?: boolean;
     className?: string;
 }
-export default function Button({ kind, disabled, size, busy, block, iconOnly, className, children, ...rest }: Props): import("react").JSX.Element;
+export interface Props extends OwnProps, Omit<AriaButtonProps, 'className' | 'style' | 'children'> {
+}
+/** The button's own props, plus the slot switch. When `asChild` is set the
+ *  element is the caller's, so what may be passed alongside is the DOM's
+ *  attribute set rather than React Aria's — `onPress` and `type` have nothing
+ *  to attach to on an `<a>`. */
+export type ButtonProps = (Props & {
+    asChild?: false;
+}) | (OwnProps & Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children'> & {
+    asChild: true;
+    children: React.ReactNode;
+});
+export default function Button(props: ButtonProps): import("react").JSX.Element;

package/dist/components/Button.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. */
 /**
  * A button. The most-copied markup in the app, finally a component.
  *
@@ -22,10 +29,45 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * off it, and not firing twice on a touch screen. `data-pressed`,
  * `data-hovered` and `data-focus-visible` land on the element, so the
  * stylesheet keeps describing states rather than tracking them.
+ *
+ * **`asChild` puts the styling on somebody else's element, and that is how a
+ * link becomes a button.** A control that takes you somewhere has to be an
+ * anchor: middle-click, cmd-click, "copy link address" and a screen reader's
+ * list of links all come from the element, not from what it looks like. Every
+ * consumer had drawn its own instead — valet's `.v-link-button`, manage's and
+ * app-template's `.app-link` — three hand-styled anchors chasing one button's
+ * appearance, which is the drift this package exists to stop.
+ *
+ * The alternative was an `href` prop rendering React Aria's `Link`, and
+ * `asChild` beats it on the case that actually occurs: in a Next app the
+ * anchor has to be `next/link`, or the whole page reloads. `href` would have
+ * meant every app wrapping its tree in a `RouterProvider` and remembering to;
+ * `asChild` lets the caller hand over the element they already wanted:
+ *
+ *     <Button asChild kind="primary"><Link href="/manage">Manage</Link></Button>
+ *
+ * It is the same shape chef-monorepo's `Button` uses, for the same reason.
+ *
+ * Two things do not survive the swap, both because the slotted element is not
+ * a `<button>`. `busy` is ignored: its countdown bar is drawn on the element
+ * this component would have rendered, and the child owns its own contents.
+ * And `disabled` cannot use the native attribute, which an anchor ignores, so
+ * it becomes `aria-disabled` plus a capture-phase block — `Slot` runs the
+ * child's own `onClick` before ours, so the capture phase is the only place
+ * left to stop it, and stopping propagation there is what a native disabled
+ * button does anyway: it emits no click at all.
  */
+import { Slot } from '@radix-ui/react-slot';
 import { useEffect, useRef } from 'react';
 import { Button as AriaButton } from 'react-aria-components';
-export default function Button({ kind = 'default', disabled, size = 'md', busy, block, iconOnly, className, children, ...rest }) {
+/* An anchor ignores `disabled`, and `Slot` runs the child's `onClick` before
+   ours, so the capture phase is the only place left to block it. */
+const blockActivation = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+export default function Button(props) {
+    const { kind = 'default', disabled, size = 'md', busy, block, iconOnly, className } = props;
     const classes = [
         iconOnly ? 'icon-btn' : '',
         kind === 'default' ? '' : kind,
@@ -50,6 +92,10 @@ export default function Button({ kind = 'default', disabled, size = 'md', busy,
      * *not* disabled -- "Working, not disabled", and the label stays because it
      * is the only thing saying what is taking so long. Swapping the semantics to
      * get a tidier call site would be changing behaviour nobody asked to change.
+     *
+     * Declared before the `asChild` branch below, because a hook cannot sit
+     * after a conditional return. It does nothing on that path: the ref is
+     * never attached, so there is no element to stamp.
      */
     const ref = useRef(null);
     useEffect(() => {
@@ -61,6 +107,20 @@ export default function Button({ kind = 'default', disabled, size = 'md', busy,
         else
             el.removeAttribute('aria-busy');
     }, [busy]);
+    if (props.asChild) {
+        /* The one class the button form does not carry. Every rule in the
+           stylesheet is written against the `button` element, which an anchor is
+           not, so the slotted element needs a hook of its own. Adding it here
+           rather than to `classes` above keeps the button's own class list, and
+           therefore every committed baseline, exactly as it was. */
+        const slotClasses = ['btn', classes].filter(Boolean).join(' ');
+        /* Narrowed by `props.asChild`, so what is left after the component's own
+           props is the DOM attribute set -- which is why an unknown `data-*`
+           reaches the child untouched. */
+        const { asChild: _asChild, kind: _kind, disabled: _disabled, size: _size, busy: _busy, block: _block, iconOnly: _iconOnly, className: _className, children, ...slotted } = props;
+        return (_jsx(Slot, { ...slotted, "aria-disabled": disabled || slotted['aria-disabled'], onClickCapture: disabled ? blockActivation : slotted.onClickCapture, className: slotClasses, children: children }));
+    }
+    const { asChild: _asChild, kind: _kind, disabled: _disabled, size: _size, busy: _busy, block: _block, iconOnly: _iconOnly, className: _className, children, ...rest } = props;
     return (_jsx(AriaButton, { ref: ref, 
         /* The default, and the point of the component. React Aria sets this too;
            stating it here means the prop is visible in the signature rather than

package/dist/components/Callout.d.ts

@@ -1,24 +1,3 @@
-/**
- * Something the page needs to say, in the place it applies to.
- *
- * The third component the gallery documented and nobody could import — 31 call
- * sites assembling `className="callout callout-bad"` by hand, and a `-mark`
- * that was a letter somebody typed (`i`, `!`, `✓`) rather than the icon set the
- * rest of the app draws from.
- *
- * **A Callout is not a Toast.** A toast floats over the page and takes no
- * space; this sits in the flow, next to the thing it is about, and pushes what
- * follows down. That is the point of it: "this server is not answering" belongs
- * beside the server, not in the corner.
- *
- * **`timed` makes it a toast that stayed home.** A countdown bar, five seconds,
- * then gone. The rule that comes with it: **anything that disappears on a timer
- * must be safe to have missed.** "Saved" qualifies. "This download failed" does
- * not, and neither does anything carrying a button — if the reader has to act,
- * the message waits for them. The countdown pauses on hover for the same
- * reason, because a message that expires while you are reading it was never
- * really shown.
- */
 import { type IconName } from './Icon.js';
 export default function Callout({ tone, children, icon, timed, onDismiss, className, }: {
     tone?: 'info' | 'good' | 'warn' | 'bad';

package/dist/components/Callout.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. */
 /**
  * Something the page needs to say, in the place it applies to.
  *

package/dist/components/Card.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 box with a reason to exist.
  *

package/dist/components/Checkbox.d.ts

@@ -1,34 +1,3 @@
-/**
- * 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`.
- *
- * **It can post itself.** `checked`/`onChange` were required and there was no
- * `name`, which made this component unusable in a plain `<form action=…>`:
- * with nothing to submit under, a caller wanting one boolean in a Server
- * Action had to render `<input type="checkbox" name="x">` by hand and wrap it
- * in its own `<label>`. That is exactly the native tick box this component
- * exists to replace, and it reappeared the moment the form was uncontrolled —
- * manage's break-glass form carried one, with a comment explaining why it had
- * to. So `name` and `value` are passed through, and `checked` is optional:
- * give it `checked` and `onChange` for a controlled box, `defaultChecked` (or
- * neither) for one the form reads at submit.
- */
 export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }: {
     label: React.ReactNode;
     /** What choosing it means, or what it costs. Under the name. `hint`, the

package/dist/components/Checkbox.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. */
 /**
  * Choose some of these, then press the button that applies them.
  *

package/dist/components/Command.js

@@ -1,6 +1,14 @@
+'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';
-import { Modal as AriaModal, Autocomplete, Dialog, Header, Input, Keyboard, ListBox, ListBoxItem, ListBoxSection, ModalOverlay, SearchField, Text, useFilter, } from 'react-aria-components';
+import { Modal as AriaModal, Autocomplete, Dialog, Header, Input, ListBox, ListBoxItem, ListBoxSection, ModalOverlay, SearchField, Text, useFilter, } from 'react-aria-components';
+import Kbd from './Kbd.js';
 import Icon from './Icon.js';
 export default function Command({ open, onOpenChange, groups, placeholder = 'Search commands…', label = 'Command palette', className, }) {
     const [query, setQuery] = useState('');
@@ -32,5 +40,5 @@ export default function Command({ open, onOpenChange, groups, placeholder = 'Sea
                                                caller's. Forty `onRun`s that each remember to
                                                close is thirty-nine chances to forget. */
                                             close();
-                                        }, children: [command.icon && _jsx(Icon, { name: command.icon, className: "cmd-icon" }), _jsxs("span", { className: "cmd-text", children: [_jsx(Text, { slot: "label", className: "cmd-label", children: command.label }), command.description && (_jsx(Text, { slot: "description", className: "cmd-desc", children: command.description }))] }), command.shortcut && (_jsx(Keyboard, { className: "cmd-key", children: command.shortcut }))] }, command.id)))] }, group.title))) }))] })) }) }) }));
+                                        }, children: [command.icon && _jsx(Icon, { name: command.icon, className: "cmd-icon" }), _jsxs("span", { className: "cmd-text", children: [_jsx(Text, { slot: "label", className: "cmd-label", children: command.label }), command.description && (_jsx(Text, { slot: "description", className: "cmd-desc", children: command.description }))] }), command.shortcut && _jsx(Kbd, { className: "cmd-key", children: command.shortcut })] }, command.id)))] }, group.title))) }))] })) }) }) }));
 }

package/dist/components/DangerZone.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. */
 import { useState } from 'react';
 import Button from './Button.js';
 import Field from './Field.js';

package/dist/components/Dialog.d.ts

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

package/dist/components/Dialog.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. */
 /**
  * A question that stops what you were doing until it is answered.
  *

package/dist/components/Field.d.ts

@@ -1,52 +1,5 @@
-/**
- * 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;
-    /** The label element's own id, for a control a `<label for>` cannot name.
-     *
-     *  `htmlFor` is enough for an `<input>`, which is what almost every caller
-     *  wraps. It is not enough for `Select`, or for anything else built on a
-     *  `<button>`: a button takes its accessible name from its *contents*, and
-     *  a `<label for>` pointing at one is ignored by the name computation. A
-     *  caller that put a `Select` in a `Field` got a label on screen and a
-     *  control announcing only its current value — and the workaround was an
-     *  `aria-label` repeating the label string, which is two literals and two
-     *  chances to drift apart. That drift is exactly the bug this component
-     *  exists to prevent, so: pass this as `aria-labelledby` and there is one
-     *  string in one place. */
-    labelId: string;
-}
+import { type FieldWiring } from './fieldWiring.js';
+export type { FieldWiring } from './fieldWiring.js';
 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. */
@@ -66,6 +19,25 @@ export default function Field({ label, hint, error, required, children, labelHid
      *  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;
+    /**
+     * The control.
+     *
+     * **Elements, or a function.** Elements are the shape to reach for: a
+     * function cannot cross the server boundary, so a render prop made every
+     * page with a form a client component whether or not it needed to be, and
+     * all three apps' `design.ts` say so in the same sentence. Plain children
+     * read the wiring from context instead, and the package's own controls
+     * apply it when the caller has not named an `id`:
+     *
+     *     <Field label="Region" hint="Cannot be changed later">
+     *       <Select name="region" defaultValue="sg">…</Select>
+     *     </Field>
+     *
+     * The function form stays, unchanged and not deprecated. It is still the
+     * answer for a control the package does not own, or for a caller that
+     * needs the ids for something else -- a `<datalist>` to point at, a label
+     * rendered somewhere the provider does not reach.
+     */
+    children: React.ReactNode | ((field: FieldWiring) => React.ReactNode);
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Field.js

@@ -1,4 +1,11 @@
+'use client';
 import { jsxs as _jsxs, 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. */
 /**
  * A labelled input, its explanation, and what went wrong with it.
  *
@@ -31,18 +38,20 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * are breaking it.
  */
 import { useId } from 'react';
+import { FieldWiringContext } from './fieldWiring.js';
 export default function Field({ label, hint, error, required, children, labelHidden, layout = 'stack', className, }) {
     const id = useId();
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
     const labelId = `${id}-label`;
-    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { id: labelId, 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,
-                labelId,
-                /* 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 }))] }));
+    const wiring = {
+        id,
+        labelId,
+        /* 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,
+    };
+    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { id: labelId, 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 })), typeof children === 'function' ? (children(wiring)) : (_jsx(FieldWiringContext.Provider, { value: wiring, children: children })), error && (_jsx("p", { className: "field-error", id: errorId, role: "alert", children: error }))] }));
 }

package/dist/components/Identity.d.ts

@@ -1,28 +1,3 @@
-/**
- * A person, said in one line.
- *
- * A name, an address and a coloured disc with their initials. It is a mail
- * client's most repeated object -- every row of a thread list, every header of
- * a message, every chip in a composer's To field -- and until there is one of
- * these it is written by hand at each of those, slightly differently, and the
- * initials are wrong in a different way at every site.
- *
- * **The colour is derived from the address, not chosen.** The same person is
- * the same colour in the list, in the header and in the composer, across
- * reloads and across machines, with nothing stored. That consistency is the
- * only thing the colour is for: it is a second, weaker cue that two rows are
- * from the same sender, which is worth something when scanning and worth
- * nothing if it changes.
- *
- * **The disc is `aria-hidden` and the initials are never read out.** "A L" is
- * not a name, and a screen reader that announces it before the name has made
- * every row of the list longer to listen to for no information at all.
- *
- * **Initials come from the name when there is one, and from the address when
- * there is not.** A contact with no display name is common -- most machine
- * senders have none -- and falling through to the first letter of the local
- * part beats an empty disc or a `?`.
- */
 export interface Props {
     /** The display name, when the message carried one. */
     name?: string | null;

package/dist/components/Identity.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 person, said in one line.
  *

package/dist/components/Input.d.ts

@@ -1,3 +1,4 @@
+import { type IconName } from './Icon.js';
 export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
     /** The same three every control takes, so a row of mixed controls lines up
      *  without anyone measuring. */
@@ -8,6 +9,15 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     /** Full width of whatever holds it. Inputs already are, by default; this is
      *  for the `size`d ones, which are not. */
     block?: boolean;
+    /** A glyph inside the left edge. Decorative: it is `aria-hidden`, because
+     *  a magnifier beside a field called "Search" is the label said twice. */
+    icon?: IconName;
+    /** Empty it. Given, a clear button appears inside the right edge whenever
+     *  the field has a value; the caller owns the value and does the clearing. */
+    onClear?: () => void;
+    /** Inside the right edge, before the clear button. A `Kbd` saying what
+     *  opens this, which is what the mail client's `.mail-search-key` was. */
+    trailing?: React.ReactNode;
     className?: string;
 }
 declare const Input: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input.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. */
 /**
  * The bare control `Field` wraps.
  *
@@ -41,7 +48,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { ToggleButton } from 'react-aria-components';
 import Icon from './Icon.js';
-const Input = forwardRef(function Input({ size = 'md', mono, block, className, type = 'text', ...rest }, ref) {
+import { useFieldWiring } from './fieldWiring.js';
+const Input = forwardRef(function Input({ size = 'md', mono, block, className, type = 'text', icon, onClear, trailing, ...rest }, ref) {
+    /* What the `Field` above wired, when the caller did not thread it by hand.
+       Explicit props win: a caller that named an `id` meant that id, and a
+       render-prop `Field` spreading its wiring is passing the same values in
+       anyway. This is the fallback, not an override. */
+    const field = useFieldWiring();
+    const wired = {
+        id: rest.id ?? field?.id,
+        'aria-describedby': rest['aria-describedby'] ?? field?.['aria-describedby'],
+        'aria-invalid': rest['aria-invalid'] ?? field?.['aria-invalid'],
+    };
     const classes = [
         size === 'md' ? '' : `size-${size}`,
         mono ? 'mono' : '',
@@ -54,12 +72,22 @@ const Input = forwardRef(function Input({ size = 'md', mono, block, className, t
        run time does not remount it -- a hook count that changes with a prop is a
        React error, and a remount would drop the caret. */
     const [shown, setShown] = useState(false);
+    const glyph = { sm: 14, md: 16, lg: 18 }[size];
     if (type !== 'password') {
-        return _jsx("input", { ref: ref, type: type, className: classes || undefined, ...rest });
+        const box = (_jsx("input", { ref: ref, type: type, className: classes || undefined, ...rest, ...wired }));
+        if (!icon && !onClear && !trailing)
+            return box;
+        /* Something to clear, rather than something that could be cleared: a
+           clear button over an empty field is a control that does nothing. Both
+           shapes of value are checked because either may be the caller's. */
+        const filled = rest.value !== undefined
+            ? String(rest.value).length > 0
+            : String(rest.defaultValue ?? '').length > 0;
+        return (_jsxs("span", { className: `adorned adorned-${size}${block ? ' block' : ''}${icon ? ' adorned-icon' : ''}`, children: [icon && _jsx(Icon, { name: icon, size: glyph, className: "adorned-mark", "aria-hidden": true }), box, (trailing || (onClear && filled)) && (_jsxs("span", { className: "adorned-end", children: [trailing, onClear && filled && (_jsx("button", { type: "button", className: "icon-btn ghost adorned-clear", "aria-label": "Clear", onClick: onClear, disabled: rest.disabled, children: _jsx(Icon, { name: "close", size: glyph }) }))] }))] }));
     }
     return (_jsxs("span", { className: `secret secret-${size}${block ? ' block' : ''}`, children: [_jsx("input", { ref: ref, type: shown ? 'text' : 'password', className: classes || undefined, 
                 /* Only while revealed: as a password these are moot, and setting them
                    on a password field makes some browsers stop offering to fill it. */
-                autoCapitalize: shown ? 'off' : undefined, autoCorrect: shown ? 'off' : undefined, spellCheck: shown ? false : undefined, ...rest }), _jsx(ToggleButton, { className: `icon-btn ghost secret-eye${size === 'md' ? '' : ` size-${size}`}`, "aria-label": "Show password", isSelected: shown, onChange: setShown, isDisabled: rest.disabled, children: _jsx(Icon, { name: shown ? 'eye-off' : 'eye', size: { sm: 14, md: 16, lg: 18 }[size] }) })] }));
+                autoCapitalize: shown ? 'off' : undefined, autoCorrect: shown ? 'off' : undefined, spellCheck: shown ? false : undefined, ...rest, ...wired }), _jsx(ToggleButton, { className: `icon-btn ghost secret-eye${size === 'md' ? '' : ` size-${size}`}`, "aria-label": "Show password", isSelected: shown, onChange: setShown, isDisabled: rest.disabled, children: _jsx(Icon, { name: shown ? 'eye-off' : 'eye', size: glyph }) })] }));
 });
 export default Input;

package/dist/components/Kbd.d.ts

@@ -0,0 +1,7 @@
+export default function Kbd({ children, className, }: {
+    /** The chord as it should read. `⌘K`, `Ctrl+K`, `Esc`. The package does not
+     *  translate between platforms: which modifier this machine calls what is a
+     *  fact the app knows and this component does not. */
+    children: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Kbd.js

@@ -0,0 +1,34 @@
+'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. */
+/**
+ * A key, or a chord, drawn the way the app draws one.
+ *
+ * The rule already existed twice. `Menu` had `.menu-key` and `Command` had
+ * `.cmd-key`, and the two declaration blocks were identical down to the
+ * property order -- the same mono face, the same `--text-2xs`, the same
+ * `--muted`, the same tracking. Neither was reachable: `Keyboard` came from
+ * React Aria and the class was internal, so a consumer wanting to say "press
+ * ⌘K" beside its own search box had nothing to import and drew a third one.
+ * The mail client's `.keys` and `.mail-search-key` are that third one.
+ *
+ * **It is `<kbd>`, which is the whole point.** A styled `<span>` reads as a
+ * word; `<kbd>` says "this is something you press", and a screen reader can
+ * treat it accordingly. React Aria's `Keyboard` renders the element and
+ * carries the slot wiring that lets `Menu` and `Command` place it, so this is
+ * that component with the package's class on it rather than a new one.
+ *
+ * **It draws the reminder; it does not bind anything.** Same contract as
+ * `Menu`'s `shortcut` and `Command`'s: what actually listens for the chord is
+ * the app's business, and a component that both drew a key and bound it would
+ * be two things. Nothing here reads the keyboard.
+ */
+import { Keyboard } from 'react-aria-components';
+export default function Kbd({ children, className, }) {
+    return _jsx(Keyboard, { className: ['kbd', className].filter(Boolean).join(' '), children: children });
+}

package/dist/components/Markdown.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 DOMPurify from 'dompurify';
 import { marked } from 'marked';
 import { useEffect, useMemo, useState } from 'react';