@wtfalch/design 0.6.0 → 0.7.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,34 +1,3 @@
-/**
- * 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;

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.
  *

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.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.
  *

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';

package/dist/components/Menu.js

@@ -1,5 +1,13 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu as AriaMenu, Popover as AriaPopover, Header, Keyboard, MenuItem, MenuSection, MenuTrigger, Separator, SubmenuTrigger, Text, } from 'react-aria-components';
+/* 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 { Menu as AriaMenu, Popover as AriaPopover, Header, MenuItem, MenuSection, MenuTrigger, Separator, SubmenuTrigger, Text, } from 'react-aria-components';
+import Kbd from './Kbd.js';
 import Icon from './Icon.js';
 function isSection(entry) {
     return 'title' in entry && Array.isArray(entry.items);
@@ -9,7 +17,7 @@ function renderItem(item) {
         /* Typeahead needs a string, and `label` may be a node. Without this,
            typing the first letter of an item whose label is markup matches
            nothing and the menu looks broken. */
-        textValue: typeof item.label === 'string' ? item.label : item.id, children: [item.icon && _jsx(Icon, { name: item.icon, className: "menu-icon" }), _jsxs("span", { className: "menu-text", children: [_jsx(Text, { slot: "label", className: "menu-label", children: item.label }), item.description && (_jsx(Text, { slot: "description", className: "menu-desc", children: item.description }))] }), item.shortcut && _jsx(Keyboard, { className: "menu-key", children: item.shortcut }), item.items && (_jsx("svg", { className: "menu-more", viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) }))] }, item.id));
+        textValue: typeof item.label === 'string' ? item.label : item.id, children: [item.icon && _jsx(Icon, { name: item.icon, className: "menu-icon" }), _jsxs("span", { className: "menu-text", children: [_jsx(Text, { slot: "label", className: "menu-label", children: item.label }), item.description && (_jsx(Text, { slot: "description", className: "menu-desc", children: item.description }))] }), item.shortcut && _jsx(Kbd, { className: "menu-key", children: item.shortcut }), item.items && (_jsx("svg", { className: "menu-more", viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) }))] }, item.id));
     const body = item.items ? (_jsxs(SubmenuTrigger, { children: [row, _jsx(AriaPopover, { className: "menu-sheet", children: _jsx(AriaMenu, { className: "menu-list", children: item.items.map(renderItem) }) })] }, item.id)) : (row);
     if (!item.separated)
         return body;

package/dist/components/Modal.d.ts

@@ -1,36 +1,3 @@
-/**
- * A window over the app, and the behaviour every one of them was missing.
- *
- * There are eight of these -- Settings, FirstRun, ViewSettings, DownloadModal,
- * ModelSettings, AppletSettings, AppletReview, the studio -- and all eight were
- * built by hand from `.backdrop` and `.modal`. Not one of them trapped focus.
- *
- * **That is not a detail.** Everything behind a modal is still in the tab
- * order: still focusable, still clickable by a keyboard, and completely
- * invisible under the scrim. Tab past the last button in Settings and you are
- * somewhere on the dashboard you cannot see, operating controls you cannot
- * read. Shift-Tab from the first does the same going the other way. The mouse
- * never finds this, which is why it survived eight implementations.
- *
- * So: focus moves in, is kept in, and goes back where it came from when the
- * window closes -- to the button that opened it, not to the top of the page.
- * `role="dialog"` and `aria-modal` say the same thing to a screen reader, which
- * otherwise reads the page underneath as though it were still there.
- *
- * **This is the workspace shape.** A title, a body, optionally a footer, sized
- * to its content. `Dialog` is the narrow two-answer version and is built on
- * this -- same trap, same restore, stricter about the scrim, because for "may
- * this applet write to your files" a stray click on the background is a way of
- * answering by accident.
- *
- * **A sheet is this with `edge` set, not a second component.** A drawer from
- * the side of the window differs from a window in the middle of it by where it
- * is anchored and which way it slides -- and in nothing else. Same focus trap,
- * same restore, same scrim, same header, body and footer. Writing a `Sheet`
- * that duplicates all of that to change two CSS properties is how a design
- * system ends up with two windows that drift: one of them gets the fix and
- * nobody notices which.
- */
 export default function Modal({ title, description, subtitle, head, children, footer, footerClass, onClose, closeDisabled, width, edge, bodyClass, className, dismissOnScrim, closeButton, labelledBy, }: {
     /** The window's name. Rendered as the heading and announced on open. */
     title?: React.ReactNode;

package/dist/components/Modal.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 window over the app, and the behaviour every one of them was missing.
  *

package/dist/components/Pagination.d.ts

@@ -1,36 +1,3 @@
-/**
- * Moving through a list that does not fit.
- *
- * **It counts in items, not in pages**, because that is what the server
- * answers and what the reader asks. A JMAP query returns a position, a limit
- * and a total; a mailbox is "51–100 of 1,284", not "page 2 of 26". Page
- * numbers are this component's arithmetic, done once here rather than at every
- * call site -- which is where the off-by-one lives, and where it becomes an
- * empty last page.
- *
- * **The count is the point, and it is said out loud.** "51–100 of 1,284" tells
- * you how far in you are and how much is left; two arrows tell you neither. A
- * pager with no count is a pager you navigate by feel.
- *
- * **A total is optional, because a server may refuse to count.** JMAP's
- * `calculateTotal` is a request, not a promise, and a large mailbox is exactly
- * where it gets declined. Without one this shows the range and keeps Next
- * enabled while a full page came back, which is the only honest thing it can
- * do: a page shorter than the limit is the end.
- *
- * **The ellipsis is a field, not punctuation.** It stands for the pages you
- * cannot see, so it is where you say which one you want: type a number, press
- * Enter, and you are there. Drawn as a ghost -- no border, no background, the
- * `…` as its placeholder -- so at rest the row looks exactly like a row of
- * page buttons with an elision in it, and it becomes a control when you touch
- * it. Without this, reaching page 17 of 26 is eleven presses of Next, and the
- * middle of a row of live buttons is a dead spot.
- *
- * **`nav` with a name**, so a screen reader can jump to it and so two pagers
- * on a page are distinguishable. The current page's button is
- * `aria-current="page"`, which is what tells a reader where they are without
- * relying on the colour that says it visually.
- */
 export interface Props {
     /** Index of the first item shown, counting from zero -- the same number the
      *  query was given, so caller and component never disagree about the origin. */

package/dist/components/Pagination.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. */
 /**
  * Moving through a list that does not fit.
  *

package/dist/components/Popover.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 { Popover as AriaPopover, Dialog, DialogTrigger, } from 'react-aria-components';
 export default function Popover({ trigger, children, placement = 'bottom start', label, offset = 6, open, onOpenChange, className, }) {
     return (_jsxs(DialogTrigger, { isOpen: open, onOpenChange: onOpenChange, children: [trigger, _jsx(AriaPopover, { className: `pop${className ? ` ${className}` : ''}`, placement: placement, offset: offset, children: _jsx(Dialog, { className: "pop-body", "aria-label": label, children: ({ close }) => (typeof children === 'function' ? children(close) : children) }) })] }));