@wtfalch/design 0.10.2 → 0.12.0

package/README.md

@@ -17,6 +17,12 @@ draws them changes. 0.9.0 did exactly that to several of them, and 0.10.0
 deleted 41 more: the components that drew them draw themselves now, so the
 rules had no reader left.
 
+0.11.0 went the other way and removed the rules that reached *through* a
+class, which is the same mistake seen from the other side. `.row > .switch-row`
+styled a Toggle by the container a caller had written round it, so the caller
+had to know to write `.row` -- a class no component here renders. Those are
+props now: `inRow` on `Toggle` and on `Field`, `tile` on `Checkbox`.
+
 If you need a card, render `<Card>`; if you need a row of your own, write it
 in the token vocabulary:
 
@@ -188,6 +194,36 @@ Icons and illustrations are the system's, shared by every product the way
 `Button` is. A product wanting its own inside the package's components is a
 case nobody has had; when it comes, the product entry is where to bind it.
 
+## Rich text
+
+Prose, written and drawn, added in `0.11.0` for the CMS and the forum.
+
+```tsx
+import { RichText, isEmptyRichText } from '@wtfalch/design'      // drawing it
+import { RichTextEditor } from '@wtfalch/design/editor'          // writing it
+import { richTextSchema } from '@wtfalch/design/rich-text'       // storing it
+```
+
+Three entries and not one, because they cost different things. Drawing prose
+is a server component with no dependencies. Writing it loads TipTap, which is
+ProseMirror, and a site that only reads should not download an editor.
+Validating it needs zod. TipTap and zod are **optional peer dependencies**:
+install them if you import those entries, and the front door works without
+either.
+
+**The restriction is the component.** The toolbar offers two heading levels,
+bold, italic, a link and two kinds of list. `richTextSchema` admits exactly
+those and `RichText` draws exactly those, so a document cannot contain
+something a page cannot render — and a consumer that validates on the way
+into its database gets that guarantee against a crafted request too, not just
+against the toolbar. Tables, colours, fonts, code blocks and quotes are off,
+each one a line in the component with the reason beside it. A seventh thing
+is added in all three places, on purpose.
+
+Nothing here produces an HTML string: `RichText` walks the value into React
+elements, so there is no sanitiser to configure and none to get wrong. That
+is the difference from `Markdown`, which parses and must sanitise.
+
 ## Status
 
 `0.3.1`. Twenty-eight components, every one of the 70 gallery specimens

package/dist/components/DangerZone.js

@@ -53,5 +53,5 @@ match, label, busyLabel, busy = false, disabled = false, onConfirm,
 unavailable, }) {
     const [asking, setAsking] = useState(false);
     const [typed, setTyped] = useState('');
-    return (_jsxs("div", { className: `danger-act${kind === 'plain' ? ' plain' : ''}`, children: [_jsx("h4", { children: title }), _jsx("div", { className: "set-hint", children: description }), unavailable ? (_jsx("div", { className: "set-hint mt-2", children: unavailable })) : confirm === 'type' ? (_jsx(_Fragment, { children: _jsxs("div", { className: "row danger-row field-row", children: [_jsx(Field, { label: "Confirm", hint: _jsxs(_Fragment, { children: ["Type ", _jsx("code", { className: "mono danger-name", children: match }), " to confirm."] }), children: (f) => (_jsx(Input, { ...f, mono: true, value: typed, disabled: disabled || busy, autoComplete: "off", spellCheck: false, onChange: (e) => setTyped(e.target.value) })) }), _jsx(Button, { kind: "danger", isDisabled: disabled || busy || typed.trim() !== match, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label })] }) })) : confirm === 'none' ? (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: kind === 'plain' ? 'primary' : 'danger', isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }) })) : asking ? (_jsxs("div", { className: "row danger-row", children: [_jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }), _jsx(Button, { isDisabled: disabled || busy, onPress: () => setAsking(false), children: "Cancel" })] })) : (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: () => setAsking(true), children: label }) }))] }));
+    return (_jsxs("div", { className: `danger-act${kind === 'plain' ? ' plain' : ''}`, children: [_jsx("h4", { children: title }), _jsx("div", { className: "set-hint", children: description }), unavailable ? (_jsx("div", { className: "set-hint mt-2", children: unavailable })) : confirm === 'type' ? (_jsx(_Fragment, { children: _jsxs("div", { className: "danger-row danger-field-row", children: [_jsx(Field, { inRow: true, label: "Confirm", hint: _jsxs(_Fragment, { children: ["Type ", _jsx("code", { className: "mono danger-name", children: match }), " to confirm."] }), children: (f) => (_jsx(Input, { ...f, mono: true, value: typed, disabled: disabled || busy, autoComplete: "off", spellCheck: false, onChange: (e) => setTyped(e.target.value) })) }), _jsx(Button, { kind: "danger", isDisabled: disabled || busy || typed.trim() !== match, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label })] }) })) : confirm === 'none' ? (_jsx("div", { className: "danger-row", children: _jsx(Button, { kind: kind === 'plain' ? 'primary' : 'danger', isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }) })) : asking ? (_jsxs("div", { className: "danger-row", children: [_jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }), _jsx(Button, { isDisabled: disabled || busy, onPress: () => setAsking(false), children: "Cancel" })] })) : (_jsx("div", { className: "danger-row", children: _jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: () => setAsking(true), children: label }) }))] }));
 }

package/dist/components/Field.d.ts

@@ -1,6 +1,6 @@
 import { type FieldWiring } from './fieldWiring.js';
 export type { FieldWiring } from './fieldWiring.js';
-export default function Field({ label, hint, error, required, children, labelHidden, layout, className, }: {
+export default function Field({ label, hint, error, required, children, labelHidden, layout, inRow, className, }: {
     /** What the field is. Always given -- there is no unlabelled case, only
      *  fields whose label is hidden. */
     label: string;
@@ -39,5 +39,12 @@ export default function Field({ label, hint, error, required, children, labelHid
      * rendered somewhere the provider does not reach.
      */
     children: React.ReactNode | ((field: FieldWiring) => React.ReactNode);
+    /** Sitting in a row of controls rather than in a column of settings.
+     *
+     *  This was a rule keyed on the container -- `.field-row > .field` -- which
+     *  meant the package reaching through a class the caller had to know to
+     *  write, and `.field-row` is not a class this package hands out. A prop says the
+     *  same thing and travels with the component. */
+    inRow?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Field.js

@@ -39,7 +39,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 import { useId } from 'react';
 import { FieldWiringContext } from './fieldWiring.js';
-export default function Field({ label, hint, error, required, children, labelHidden, layout = 'stack', className, }) {
+export default function Field({ label, hint, error, required, children, labelHidden, layout = 'stack', inRow, className, }) {
     const id = useId();
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
@@ -53,5 +53,5 @@ export default function Field({ label, hint, error, required, children, labelHid
         '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: "text-muted", "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 }))] }));
+    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${inRow ? ' field-in-row' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { id: labelId, className: labelHidden ? 'sr-only' : 'field-label', htmlFor: id, children: [label, required && (_jsxs("span", { className: "text-muted", "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/RichText.d.ts

@@ -0,0 +1,24 @@
+import type { RichTextValue } from '../rich-text/schema.js';
+/**
+ * Rich text, drawn.
+ *
+ * The reading half of the pair: `RichTextEditor` writes the value, this
+ * draws it, and `richTextSchema` is what they both agree on. A server
+ * component — no hooks, no handlers — so a page that only shows prose never
+ * loads an editor.
+ *
+ * **No HTML string anywhere in this file**, which is the whole security
+ * argument and the difference from `Markdown`. Nothing is parsed and nothing
+ * is injected, so there is no sanitiser whose configuration could be wrong.
+ * A value that has been through `richTextSchema` holds only the small closed
+ * set below; one that has not is still safe here, because a node this has no
+ * case for is skipped rather than trusted.
+ *
+ * **Every outward link gets `rel="noopener noreferrer"`.** The prose is
+ * written by somebody, and where a reader came from is not the destination's
+ * business.
+ */
+export default function RichText({ value, className, }: {
+    value: RichTextValue;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/RichText.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Rich text, drawn.
+ *
+ * The reading half of the pair: `RichTextEditor` writes the value, this
+ * draws it, and `richTextSchema` is what they both agree on. A server
+ * component — no hooks, no handlers — so a page that only shows prose never
+ * loads an editor.
+ *
+ * **No HTML string anywhere in this file**, which is the whole security
+ * argument and the difference from `Markdown`. Nothing is parsed and nothing
+ * is injected, so there is no sanitiser whose configuration could be wrong.
+ * A value that has been through `richTextSchema` holds only the small closed
+ * set below; one that has not is still safe here, because a node this has no
+ * case for is skipped rather than trusted.
+ *
+ * **Every outward link gets `rel="noopener noreferrer"`.** The prose is
+ * written by somebody, and where a reader came from is not the destination's
+ * business.
+ */
+export default function RichText({ value, className, }) {
+    return (_jsx("div", { className: className ? `rich-text ${className}` : 'rich-text', children: (value.content ?? []).map((node, index) => renderBlock(node, index)) }));
+}
+function renderBlock(node, key) {
+    switch (node.type) {
+        case 'paragraph':
+            return _jsx("p", { children: renderInline(node.content) }, key);
+        case 'heading':
+            return node.attrs.level === 2 ? (_jsx("h2", { children: renderInline(node.content) }, key)) : (_jsx("h3", { children: renderInline(node.content) }, key));
+        case 'bulletList':
+            return _jsx("ul", { children: (node.content ?? []).map((item, i) => renderItem(item, i)) }, key);
+        case 'orderedList':
+            return (_jsx("ol", { start: node.attrs?.start, children: (node.content ?? []).map((item, i) => renderItem(item, i)) }, key));
+        default:
+            return null;
+    }
+}
+function renderItem(item, key) {
+    return (_jsx("li", { children: item.content.map((paragraph, i) => (
+        // The index is the right key here and in `renderInline`: this draws a
+        // finished value, the list is never reordered, inserted into or
+        // filtered, and the text is not unique — two paragraphs both saying
+        // "Yes" are two paragraphs.
+        // biome-ignore lint/suspicious/noArrayIndexKey: a finished value, never reconciled
+        _jsx("p", { children: renderInline(paragraph.content) }, i))) }, key));
+}
+function renderInline(content) {
+    if (!content || content.length === 0)
+        return null;
+    return content.map((node, index) => {
+        let element = node.text;
+        // Applied innermost first, so the order the marks arrive in cannot change
+        // the nesting: the link is always outermost, which is what a reader
+        // clicks and what a screen reader announces.
+        for (const mark of node.marks ?? []) {
+            if (mark.type === 'bold')
+                element = _jsx("strong", { children: element });
+            if (mark.type === 'italic')
+                element = _jsx("em", { children: element });
+        }
+        const link = (node.marks ?? []).find((mark) => mark.type === 'link');
+        if (link && link.type === 'link') {
+            const external = /^https?:\/\//i.test(link.attrs.href);
+            element = (_jsx("a", { href: link.attrs.href, ...(external ? { rel: 'noopener noreferrer' } : {}), children: element }));
+        }
+        // biome-ignore lint/suspicious/noArrayIndexKey: a finished value, never reconciled
+        return _jsx("span", { children: element }, index);
+    });
+}

package/dist/components/RichTextEditor.d.ts

@@ -0,0 +1,32 @@
+import type { RichTextValue } from '../rich-text/schema.js';
+/**
+ * Writing prose, with a toolbar that offers six things.
+ *
+ * **The restriction is the component.** TipTap is ProseMirror, which will
+ * model tables, colours, fonts, code blocks and arbitrary nesting given the
+ * chance. Every one of those is switched off below. What is left — two
+ * heading levels, bold, italic, a link and two kinds of list — is exactly
+ * what `richTextSchema` admits and exactly what `RichText` can draw, so the
+ * three cannot disagree about what a document may contain. A consumer that
+ * wants a seventh thing adds it in all three places, on purpose, rather than
+ * discovering that a paste brought one in.
+ *
+ * **`immediatelyRender: false`** because this will be rendered on a server
+ * first: without it TipTap builds a document during SSR and React finds a
+ * different one on hydration.
+ *
+ * **The value is TipTap's JSON**, handed back on every change. The component
+ * holds no copy of it: the consumer owns the document, which is what lets an
+ * editor sit inside a larger form that saves everything at once.
+ *
+ * TipTap is an optional peer dependency. Import this entry and you need it;
+ * import the package's front door and you do not.
+ */
+export default function RichTextEditor({ value, onChange, label, placeholder, className, }: {
+    value: RichTextValue;
+    onChange: (value: RichTextValue) => void;
+    /** What this field is, for a screen reader and for the toolbar's own name. */
+    label: string;
+    placeholder?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/RichTextEditor.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Client, because this module calls hooks and attaches handlers. It is also
+   the only component in the package that loads an editor, which is why it
+   ships from its own entry (`@wtfalch/design/editor`) rather than the front
+   door: a site that renders prose should not download one to do it. */
+import Link from '@tiptap/extension-link';
+import { Placeholder } from '@tiptap/extensions';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useCallback } from 'react';
+import Button from './Button.js';
+/**
+ * Writing prose, with a toolbar that offers six things.
+ *
+ * **The restriction is the component.** TipTap is ProseMirror, which will
+ * model tables, colours, fonts, code blocks and arbitrary nesting given the
+ * chance. Every one of those is switched off below. What is left — two
+ * heading levels, bold, italic, a link and two kinds of list — is exactly
+ * what `richTextSchema` admits and exactly what `RichText` can draw, so the
+ * three cannot disagree about what a document may contain. A consumer that
+ * wants a seventh thing adds it in all three places, on purpose, rather than
+ * discovering that a paste brought one in.
+ *
+ * **`immediatelyRender: false`** because this will be rendered on a server
+ * first: without it TipTap builds a document during SSR and React finds a
+ * different one on hydration.
+ *
+ * **The value is TipTap's JSON**, handed back on every change. The component
+ * holds no copy of it: the consumer owns the document, which is what lets an
+ * editor sit inside a larger form that saves everything at once.
+ *
+ * TipTap is an optional peer dependency. Import this entry and you need it;
+ * import the package's front door and you do not.
+ */
+export default function RichTextEditor({ value, onChange, label, placeholder, className, }) {
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                // Left on: paragraph, text, bold, italic, the two lists, listItem,
+                // history, and the two cursors that make dragging sane.
+                heading: { levels: [2, 3] },
+                // Off, each one a decision rather than an oversight. A code block and
+                // a quote are shapes a block-based consumer expresses as their own
+                // blocks; a horizontal rule is a spacer, and spacing belongs to the
+                // theme; strike and inline code are marks nobody asked for, and every
+                // one of them is another thing two documents can disagree about.
+                codeBlock: false,
+                blockquote: false,
+                horizontalRule: false,
+                strike: false,
+                code: false,
+                // Configured separately below, so its defaults — which allow any
+                // scheme — never apply.
+                link: false,
+            }),
+            // What an empty editor says. TipTap's own extension rather than a CSS
+            // rule of ours: `attr()` reads the attribute of the element the
+            // pseudo-element belongs to, so a rule on the paragraph cannot reach a
+            // `data-placeholder` on the box, and ProseMirror's empty paragraph
+            // holds a trailing `<br>` so `:empty` never matches it either. Both of
+            // those were tried, and the picture of the second is why this is here.
+            Placeholder.configure({ placeholder: placeholder ?? '' }),
+            Link.configure({
+                openOnClick: false,
+                autolink: false,
+                // The same three `richTextSchema` admits. This is the first of two
+                // gates and the schema is the one that counts.
+                protocols: ['http', 'https', 'mailto'],
+                HTMLAttributes: { rel: 'noopener noreferrer' },
+            }),
+        ],
+        content: value,
+        immediatelyRender: false,
+        editorProps: {
+            attributes: {
+                // `rich-text` styles the elements ProseMirror builds; the rest is
+                // this surface's own box, which is ours to draw. Two of the largest
+                // spacing step is about six lines — enough to write a paragraph in
+                // without the box growing under the cursor on the first one.
+                class: 'rich-text p-3 min-h-[calc(var(--space-15)*2)] outline-none',
+                // A contenteditable div is a `generic` to an accessibility tree, and
+                // `aria-label` is prohibited on a generic — axe said so on the first
+                // run, which is what the suite is for. `textbox` with
+                // `aria-multiline` is what a rich text area is, and it is what makes
+                // the label legal and announced.
+                role: 'textbox',
+                'aria-multiline': 'true',
+                'aria-label': label,
+            },
+        },
+        onUpdate: ({ editor: instance }) => onChange(instance.getJSON()),
+    });
+    const setLink = useCallback(() => {
+        if (!editor)
+            return;
+        const current = editor.getAttributes('link').href;
+        // A prompt rather than a dialog: it is one field, it is modal either way,
+        // and a dialog here would be the first piece of state this component has
+        // to own. Worth replacing the day a link needs a second field.
+        const href = window.prompt('Link to', current ?? 'https://');
+        if (href === null)
+            return;
+        if (href.trim() === '') {
+            editor.chain().focus().unsetLink().run();
+            return;
+        }
+        editor.chain().focus().extendMarkRange('link').setLink({ href: href.trim() }).run();
+    }, [editor]);
+    /* The box.
+  
+       `rounded-(--radius)`, not `rounded`: Tailwind v4 emits a literal
+       `0.25rem` for the bare utility and never reads `--radius-DEFAULT`, so
+       `rounded` is an unthemeable 4px corner where the vocabulary says 6. The
+       screenshots caught it as four moved corners and nothing else. Nothing
+       else in the package uses the bare form.
+  
+       `shadow`, not `outline`: `--focus-ring` is a box-shadow value
+       (`0 0 0 2px var(--accent)`), so `outline: var(--focus-ring)` is invalid
+       and drops the whole declaration silently — which this had, and which no
+       screenshot would ever have shown because a baseline is never focused.
+       `pagination.css` records the same bug. The ring belongs to the box
+       rather than to the contenteditable, so it does not draw a second,
+       thinner rectangle inside the border. */
+    const box = 'grid overflow-hidden rounded-(--radius) border border-border-strong surface-control focus-within:shadow-(--focus-ring)';
+    if (!editor) {
+        return _jsx("div", { className: className ? `${box} ${className}` : box, "aria-busy": "true" });
+    }
+    const controls = [
+        {
+            label: 'Heading',
+            active: editor.isActive('heading', { level: 2 }),
+            run: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        },
+        {
+            label: 'Subheading',
+            active: editor.isActive('heading', { level: 3 }),
+            run: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+        },
+        {
+            label: 'Bold',
+            active: editor.isActive('bold'),
+            run: () => editor.chain().focus().toggleBold().run(),
+        },
+        {
+            label: 'Italic',
+            active: editor.isActive('italic'),
+            run: () => editor.chain().focus().toggleItalic().run(),
+        },
+        { label: 'Link', active: editor.isActive('link'), run: setLink },
+        {
+            label: 'Bullets',
+            active: editor.isActive('bulletList'),
+            run: () => editor.chain().focus().toggleBulletList().run(),
+        },
+        {
+            label: 'Numbers',
+            active: editor.isActive('orderedList'),
+            run: () => editor.chain().focus().toggleOrderedList().run(),
+        },
+    ];
+    return (_jsxs("div", { className: className ? `${box} ${className}` : box, children: [_jsx("div", { className: "flex flex-wrap gap-1 border-b border-border p-1 surface-panel", role: "toolbar", "aria-label": `${label} formatting`, children: controls.map((control) => (_jsx(Button, { type: "button", size: "sm", kind: control.active ? 'primary' : 'ghost', "aria-pressed": control.active, onPress: control.run, children: control.label }, control.label))) }), _jsx(EditorContent, { editor: editor })] }));
+}

package/dist/components/Toggle.d.ts

@@ -1,4 +1,4 @@
-export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size, className, }: {
+export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size, inRow, className, }: {
     label: React.ReactNode;
     /** What it does, or what turning it off costs. Under the label, in the same
      *  column, so a long explanation does not push the switch off its row. */
@@ -22,5 +22,12 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
     /** The same three the rest of the controls take. `sm` for a switch in a
      *  toolbar or a dense row; `lg` where it is the only thing on the screen. */
     size?: 'sm' | 'md' | 'lg';
+    /** Sitting in a row of controls rather than in a column of settings.
+     *
+     *  This was a rule keyed on the container -- `.row > .switch-row` -- which
+     *  meant the package reaching through a class the caller had to know to
+     *  write, and `.row` is not a class this package hands out. A prop says the
+     *  same thing and travels with the component. */
+    inRow?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Toggle.js

@@ -49,7 +49,7 @@ const KNOB = { sm: 10, md: 12, lg: 16 };
  *  than pressed. Six is over the jitter and still a third of the way across
  *  the shortest track. */
 const SLOP = 6;
-export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size = 'md', className, }) {
+export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size = 'md', inRow, className, }) {
     /* React Aria's `Switch` is the `<label>`: it owns a visually-hidden
        `<input type="checkbox" role="switch">` and stamps `data-selected`,
        `data-disabled`, `data-focus-visible` and `data-pressed` on the label. So
@@ -154,7 +154,7 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
             return 0;
         return Math.min(1, Math.max(0, (x - box.left - 2 - knobWidth / 2) / travel));
     };
-    return (_jsxs(Switch, { ref: rowRef, className: `switch-row switch-${size}${className ? ` ${className}` : ''}`, isSelected: shown, onChange: commit, isDisabled: disabled, 
+    return (_jsxs(Switch, { ref: rowRef, className: `switch-row switch-${size}${inRow ? ' switch-in-row' : ''}${className ? ` ${className}` : ''}`, isSelected: shown, onChange: commit, isDisabled: disabled, 
         /* Read-only, not disabled, while a request is out: focus stays where it
            is and the row does not dim, it just refuses a second answer until
            the first has been taken. */

package/dist/editor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The editor entry: `@wtfalch/design/editor`.
+ *
+ * Its own entry because it is the one component in the package that loads an
+ * editor — TipTap, which is ProseMirror — and a site that only *renders*
+ * prose should not download one to do it. `RichText` and the value helpers
+ * ship from the package's front door for exactly that reason; the schema
+ * ships from `@wtfalch/design/rich-text`, because it needs zod.
+ *
+ * TipTap and zod are optional peer dependencies. Import this and you install
+ * them; import anything else in the package and you do not.
+ */
+export { default as RichTextEditor } from './components/RichTextEditor.js';
+/** Re-exported, so writing prose needs one import rather than three. */
+export { type BlockNode, type RichTextMark, type RichTextValue, blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/editor.js

@@ -0,0 +1,16 @@
+/**
+ * The editor entry: `@wtfalch/design/editor`.
+ *
+ * Its own entry because it is the one component in the package that loads an
+ * editor — TipTap, which is ProseMirror — and a site that only *renders*
+ * prose should not download one to do it. `RichText` and the value helpers
+ * ship from the package's front door for exactly that reason; the schema
+ * ships from `@wtfalch/design/rich-text`, because it needs zod.
+ *
+ * TipTap and zod are optional peer dependencies. Import this and you install
+ * them; import anything else in the package and you do not.
+ */
+export { default as RichTextEditor } from './components/RichTextEditor.js';
+/** Re-exported, so writing prose needs one import rather than three. */
+export { blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/index.d.ts

@@ -55,6 +55,14 @@ export type { Props as InputProps } from './components/Input.js';
  *  of, now one component a consumer can reach. */
 export { default as Kbd } from './components/Kbd.js';
 export { default as Markdown } from './components/Markdown.js';
+/** Prose written with `RichTextEditor` (`@wtfalch/design/editor`), drawn.
+ *  Here rather than in that entry because reading prose should not download
+ *  an editor; the schema the two agree on ships with it. */
+export { default as RichText } from './components/RichText.js';
+/** The value's shape and the three helpers that need no validator. The schema
+ *  itself is `@wtfalch/design/rich-text`, because zod is an optional peer. */
+export type { BlockNode, RichTextMark, RichTextValue } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';
 export { default as Menu } from './components/Menu.js';
 export type { Item as MenuItem, Section as MenuSection } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';

package/dist/index.js

@@ -49,6 +49,11 @@ export { default as Input } from './components/Input.js';
  *  of, now one component a consumer can reach. */
 export { default as Kbd } from './components/Kbd.js';
 export { default as Markdown } from './components/Markdown.js';
+/** Prose written with `RichTextEditor` (`@wtfalch/design/editor`), drawn.
+ *  Here rather than in that entry because reading prose should not download
+ *  an editor; the schema the two agree on ships with it. */
+export { default as RichText } from './components/RichText.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';
 export { default as Menu } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';
 /** Moving through a list that does not fit, counted in items rather than