@wtfalch/design 0.10.2 → 0.12.0

package/dist/rich-text/schema.d.ts

@@ -0,0 +1,219 @@
+import { z } from 'zod';
+/**
+ * What a rich-text value is, and the only shape `RichTextEditor` produces or
+ * `RichText` draws.
+ *
+ * **A restricted document, on purpose.** The editor is TipTap, which is
+ * ProseMirror, which will model tables, colours, fonts and arbitrary nesting
+ * given the chance. A system where every writer can reach all of that is one
+ * where two pages share nothing but a logo. What is left here is
+ * paragraphs, two heading levels, two kinds of list, bold, italic and links
+ * — the set a piece of prose actually needs.
+ *
+ * **The schema is the contract between three things**: what the toolbar can
+ * produce, what a consumer should store, and what the view can draw. A
+ * consumer validates with this on the way into its database, so a crafted
+ * request can no more insert a table than the editor can, and a node the
+ * view has no case for cannot arrive.
+ *
+ * Zod is an OPTIONAL peer dependency, and this file is the only one that
+ * reaches it — which is why it ships from `@wtfalch/design/rich-text` rather
+ * than the front door. A consumer that renders prose without validating it
+ * should not have to install a validator to load the package. The types and
+ * the pure helpers live in `./value`, which imports from here with `import
+ * type` and so compiles to nothing.
+ */
+/** The marks a run of text may carry. `link` is the only one with a value, and its href is checked. */
+export declare const richTextMarkSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"bold">;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"italic">;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"link">;
+    attrs: z.ZodObject<{
+        href: z.ZodString;
+        target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    }, z.core.$strip>;
+}, z.core.$strip>], "type">;
+/** Named `RichTextMark` rather than `Mark`, which this package already uses for a product's brand mark. */
+export type RichTextMark = z.infer<typeof richTextMarkSchema>;
+export declare const blockNodeSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"paragraph">;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+        marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+            type: z.ZodLiteral<"bold">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"italic">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"link">;
+            attrs: z.ZodObject<{
+                href: z.ZodString;
+                target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>;
+        }, z.core.$strip>], "type">>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"heading">;
+    attrs: z.ZodObject<{
+        level: z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>]>;
+    }, z.core.$strip>;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+        marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+            type: z.ZodLiteral<"bold">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"italic">;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"link">;
+            attrs: z.ZodObject<{
+                href: z.ZodString;
+                target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>;
+        }, z.core.$strip>], "type">>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"bulletList">;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"listItem">;
+        content: z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"paragraph">;
+            content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"text">;
+                text: z.ZodString;
+                marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"bold">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"italic">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"link">;
+                    attrs: z.ZodObject<{
+                        href: z.ZodString;
+                        target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                    }, z.core.$strip>;
+                }, z.core.$strip>], "type">>>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"orderedList">;
+    attrs: z.ZodOptional<z.ZodObject<{
+        start: z.ZodNumber;
+    }, z.core.$strip>>;
+    content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        type: z.ZodLiteral<"listItem">;
+        content: z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"paragraph">;
+            content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"text">;
+                text: z.ZodString;
+                marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"bold">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"italic">;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"link">;
+                    attrs: z.ZodObject<{
+                        href: z.ZodString;
+                        target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                    }, z.core.$strip>;
+                }, z.core.$strip>], "type">>>;
+            }, z.core.$strip>>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>], "type">;
+export type BlockNode = z.infer<typeof blockNodeSchema>;
+/** A whole value: what TipTap calls the document. */
+export declare const richTextSchema: z.ZodObject<{
+    type: z.ZodLiteral<"doc">;
+    content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodLiteral<"paragraph">;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+            marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"bold">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"italic">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"link">;
+                attrs: z.ZodObject<{
+                    href: z.ZodString;
+                    target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                }, z.core.$strip>;
+            }, z.core.$strip>], "type">>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"heading">;
+        attrs: z.ZodObject<{
+            level: z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>]>;
+        }, z.core.$strip>;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+            marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"bold">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"italic">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"link">;
+                attrs: z.ZodObject<{
+                    href: z.ZodString;
+                    target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                }, z.core.$strip>;
+            }, z.core.$strip>], "type">>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"bulletList">;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"listItem">;
+            content: z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"paragraph">;
+                content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                    marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                        type: z.ZodLiteral<"bold">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"italic">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"link">;
+                        attrs: z.ZodObject<{
+                            href: z.ZodString;
+                            target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                        }, z.core.$strip>;
+                    }, z.core.$strip>], "type">>>;
+                }, z.core.$strip>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"orderedList">;
+        attrs: z.ZodOptional<z.ZodObject<{
+            start: z.ZodNumber;
+        }, z.core.$strip>>;
+        content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            type: z.ZodLiteral<"listItem">;
+            content: z.ZodArray<z.ZodObject<{
+                type: z.ZodLiteral<"paragraph">;
+                content: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                    marks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                        type: z.ZodLiteral<"bold">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"italic">;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"link">;
+                        attrs: z.ZodObject<{
+                            href: z.ZodString;
+                            target: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                        }, z.core.$strip>;
+                    }, z.core.$strip>], "type">>>;
+                }, z.core.$strip>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>>;
+    }, z.core.$strip>], "type">>>;
+}, z.core.$strip>;
+export type RichTextValue = z.infer<typeof richTextSchema>;

package/dist/rich-text/schema.js

@@ -0,0 +1,88 @@
+import { z } from 'zod';
+/**
+ * What a rich-text value is, and the only shape `RichTextEditor` produces or
+ * `RichText` draws.
+ *
+ * **A restricted document, on purpose.** The editor is TipTap, which is
+ * ProseMirror, which will model tables, colours, fonts and arbitrary nesting
+ * given the chance. A system where every writer can reach all of that is one
+ * where two pages share nothing but a logo. What is left here is
+ * paragraphs, two heading levels, two kinds of list, bold, italic and links
+ * — the set a piece of prose actually needs.
+ *
+ * **The schema is the contract between three things**: what the toolbar can
+ * produce, what a consumer should store, and what the view can draw. A
+ * consumer validates with this on the way into its database, so a crafted
+ * request can no more insert a table than the editor can, and a node the
+ * view has no case for cannot arrive.
+ *
+ * Zod is an OPTIONAL peer dependency, and this file is the only one that
+ * reaches it — which is why it ships from `@wtfalch/design/rich-text` rather
+ * than the front door. A consumer that renders prose without validating it
+ * should not have to install a validator to load the package. The types and
+ * the pure helpers live in `./value`, which imports from here with `import
+ * type` and so compiles to nothing.
+ */
+/** The marks a run of text may carry. `link` is the only one with a value, and its href is checked. */
+export const richTextMarkSchema = z.discriminatedUnion('type', [
+    z.object({ type: z.literal('bold') }),
+    z.object({ type: z.literal('italic') }),
+    z.object({
+        type: z.literal('link'),
+        attrs: z.object({
+            /**
+             * http(s), mailto, or a path. `javascript:` and `data:` are the two
+             * that turn a link into script, and they are refused here rather than
+             * only in the editor: the editor is a convenience, this is the gate.
+             */
+            href: z
+                .string()
+                .trim()
+                .min(1)
+                .max(2048)
+                .refine((href) => /^(https?:\/\/|mailto:|\/)/i.test(href), 'A link must be http(s), mailto: or a path beginning with /'),
+            target: z.string().nullish(),
+        }),
+    }),
+]);
+const textNode = z.object({
+    type: z.literal('text'),
+    text: z.string().max(10_000),
+    marks: z.array(richTextMarkSchema).max(8).optional(),
+});
+const inline = z.array(textNode).max(500).optional();
+const paragraph = z.object({ type: z.literal('paragraph'), content: inline });
+const heading = z.object({
+    type: z.literal('heading'),
+    /**
+     * Two levels, and not level 1: the page's own `<h1>` is its title, and a
+     * second one in the body is the most common way a document stops being
+     * navigable to somebody reading it with a screen reader.
+     */
+    attrs: z.object({ level: z.union([z.literal(2), z.literal(3)]) }),
+    content: inline,
+});
+const listItem = z.object({
+    type: z.literal('listItem'),
+    content: z.array(paragraph).max(20),
+});
+const bulletList = z.object({
+    type: z.literal('bulletList'),
+    content: z.array(listItem).max(200).optional(),
+});
+const orderedList = z.object({
+    type: z.literal('orderedList'),
+    attrs: z.object({ start: z.number().int().min(1).max(999) }).optional(),
+    content: z.array(listItem).max(200).optional(),
+});
+export const blockNodeSchema = z.discriminatedUnion('type', [
+    paragraph,
+    heading,
+    bulletList,
+    orderedList,
+]);
+/** A whole value: what TipTap calls the document. */
+export const richTextSchema = z.object({
+    type: z.literal('doc'),
+    content: z.array(blockNodeSchema).max(400).optional(),
+});

package/dist/rich-text/value.d.ts

@@ -0,0 +1,25 @@
+import type { RichTextValue } from './schema.js';
+/**
+ * The parts of a rich-text value that need no validator.
+ *
+ * Split from `./schema` so the package's front door stays free of zod. The
+ * schema is a runtime object and zod is an optional peer dependency, so a
+ * consumer that renders prose and never validates it — a site, a preview —
+ * would otherwise fail to load the package at all for want of a dependency
+ * it has no use for. The type import above is erased at build, so nothing
+ * here reaches zod.
+ */
+/**
+ * A document with nothing in it — and one empty paragraph, not an empty
+ * array. ProseMirror's schema says a document is `block+`, so a `doc` with
+ * no children is not a document it can put a cursor in: the editor rendered
+ * an empty box with no paragraph, which meant no node to mark as empty and
+ * so no placeholder. The picture of that is why this reads the way it does.
+ * `isEmptyRichText` treats both forms as empty, and the schema accepts both,
+ * because a value that arrives from somewhere else may be either.
+ */
+export declare const emptyRichText: RichTextValue;
+/** Whether there is anything to draw, so a caller can skip an empty value rather than leave a gap. */
+export declare function isEmptyRichText(value: RichTextValue): boolean;
+/** The plain words, for a summary, a search index or a document's own `<title>`. */
+export declare function richTextToPlain(value: RichTextValue): string;

package/dist/rich-text/value.js

@@ -0,0 +1,41 @@
+/**
+ * The parts of a rich-text value that need no validator.
+ *
+ * Split from `./schema` so the package's front door stays free of zod. The
+ * schema is a runtime object and zod is an optional peer dependency, so a
+ * consumer that renders prose and never validates it — a site, a preview —
+ * would otherwise fail to load the package at all for want of a dependency
+ * it has no use for. The type import above is erased at build, so nothing
+ * here reaches zod.
+ */
+/**
+ * A document with nothing in it — and one empty paragraph, not an empty
+ * array. ProseMirror's schema says a document is `block+`, so a `doc` with
+ * no children is not a document it can put a cursor in: the editor rendered
+ * an empty box with no paragraph, which meant no node to mark as empty and
+ * so no placeholder. The picture of that is why this reads the way it does.
+ * `isEmptyRichText` treats both forms as empty, and the schema accepts both,
+ * because a value that arrives from somewhere else may be either.
+ */
+export const emptyRichText = { type: 'doc', content: [{ type: 'paragraph' }] };
+/** Whether there is anything to draw, so a caller can skip an empty value rather than leave a gap. */
+export function isEmptyRichText(value) {
+    return (value.content ?? []).every((node) => !('content' in node) || (node.content ?? []).length === 0);
+}
+/** The plain words, for a summary, a search index or a document's own `<title>`. */
+export function richTextToPlain(value) {
+    const parts = [];
+    const walk = (nodes) => {
+        for (const node of nodes) {
+            if (!node || typeof node !== 'object')
+                continue;
+            const record = node;
+            if (typeof record.text === 'string')
+                parts.push(record.text);
+            if (Array.isArray(record.content))
+                walk(record.content);
+        }
+    };
+    walk(value.content ?? []);
+    return parts.join(' ').replace(/\s+/g, ' ').trim();
+}

package/dist/rich-text.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The rich-text schema: `@wtfalch/design/rich-text`.
+ *
+ * What a consumer validates with on the way into its database, so that a
+ * crafted request can no more store a table than the toolbar can produce
+ * one. Separate from the front door because it is the only part of the
+ * package that needs zod, and separate from `./editor` because validating a
+ * value is a thing a server does and downloading an editor is not.
+ */
+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/rich-text.js

@@ -0,0 +1,11 @@
+/**
+ * The rich-text schema: `@wtfalch/design/rich-text`.
+ *
+ * What a consumer validates with on the way into its database, so that a
+ * crafted request can no more store a table than the toolbar can produce
+ * one. Separate from the front door because it is the only part of the
+ * package that needs zod, and separate from `./editor` because validating a
+ * value is a thing a server does and downloading an editor is not.
+ */
+export { blockNodeSchema, richTextMarkSchema, richTextSchema, } from './rich-text/schema.js';
+export { emptyRichText, isEmptyRichText, richTextToPlain } from './rich-text/value.js';

package/dist/styles/index.css

@@ -37,6 +37,7 @@
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
+    --radius-DEFAULT: var(--radius);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
@@ -173,6 +174,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-\[calc\(var\(--space-15\)\*2\)\] {
+    min-height: calc(var(--space-15) * 2);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -313,6 +317,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--radius\) {
+    border-radius: var(--radius);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -462,6 +469,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -508,9 +518,16 @@
   .surface-bg {
     background: var(--bg);
   }
+  .surface-control {
+    background: var(--control);
+  }
   .surface-panel {
     background: var(--panel);
   }
+  .focus-within\:shadow-\(--focus-ring\):focus-within {
+    --tw-shadow: var(--focus-ring);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -1243,13 +1260,6 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   to { transform: scaleX(0); }
 }
 
-/* (The bordered head bar that used to live here is gone. It was a second
-   `.card-head` -- same name, different thing -- and the only place it was ever
-   used was the gallery page documenting it. A card that holds rows now takes
-   `title` like any other, and the header the component draws is the one
-   header.) */
-.row { display: flex; align-items: center; gap: var(--space-3); }
-
 .ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
@@ -1510,13 +1520,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
-   no grid here to decide a height, and a screenshot of an applet letterboxed
-   inside a page is mostly not the applet. */
-.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
-
-.bare > * { flex: 1; min-height: 0; }
-
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
@@ -1864,7 +1867,15 @@ input:active, textarea:active, select:active { transform: none; }
 
 .danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
 
-.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+/* `display: flex` is here now. These rows carried `.row` as well, which is a
+   class no component of this package renders -- it only ever reached them
+   because a consumer's stylesheet happened to define it too. */
+.danger-row {
+  display: flex;
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+  align-items: center;
+}
 
 .danger-row > input { min-width: 0; }
 
@@ -1886,15 +1897,15 @@ input:active, textarea:active, select:active { transform: none; }
   column-gap: var(--space-3);
 }
 
-.field-row { align-items: flex-end; gap: var(--space-2); }
+.danger-field-row { align-items: flex-end; gap: var(--space-2); }
 
-.field-row > button { flex: none; }
+.danger-field-row > button { flex: none; }
 
 /* Two forms one under the other, whose buttons say different words -- "Add"
    and "Block". Sized to their text they came out different widths, and two
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
-.field-row > button { min-width: 9ch; }
+.danger-field-row > button { min-width: 9ch; }
 }
 
 /* ---- ./callout.css ---- */
@@ -2225,9 +2236,12 @@ input:active, textarea:active, select:active { transform: none; }
 /* Sized to its words, for a switch that sits in a row of other controls rather
    than owning a row of its own. `flex: 1` there would push the label away from
    the switch by the whole width of the bar. */
-.row > .switch-row { flex: none; padding-block: 0; }
+/* `inRow`: a toggle beside other controls rather than in a column of
+   settings. Was `.row > .switch-row`, which reached through `.row` -- a class
+   no component here renders. */
+.switch-in-row { flex: none; padding-block: 0; }
 
-.row > .switch-row .switch-body { flex: none; }
+.switch-in-row .switch-body { flex: none; }
 
 /* The opposite case: a switch that *is* the row, with something small beside it
    -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
@@ -3816,7 +3830,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-row > .field { flex: 1; min-width: 0; }
+/* `inRow`: a field sharing a line with other controls rather than stacked in a
+   column. Was `.field-row > .field`, which reached through a container class
+   the caller had to write and this package does not hand out. */
+.field-in-row { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
    A grid rather than `position: absolute`: both children take the one cell, the
@@ -4692,3 +4709,97 @@ body.splitting * { cursor: inherit !important; }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
 
+/* Prose and the surface it is written on, added in 0.8.0. Last, because
+   `.prose` styles the elements the reset in `base.css` flattened and has to
+   win over it, and because the editor's box sits over nothing. */
+/* ---- ./richtext.css ---- */
+@layer components {
+/* Prose: one class, and the elements it styles are ones nobody wrote.
+ *
+ * That is the whole reason a class exists here rather than utilities. Inside
+ * the editor the paragraphs, headings and lists are ProseMirror's, built
+ * from the document — there is no JSX to hang a utility on, so the choice is
+ * descendant rules behind one class or an arbitrary variant per element,
+ * which is the same selector spelled worse. `Markdown` has the same problem
+ * for the same reason and answers it the same way, as `.md` in `base.css`.
+ *
+ * The editor and the view share the class on purpose. They have to look
+ * identical and one set of rules is what guarantees it; two sets maintained
+ * separately is precisely how a what-you-see-is-what-you-get editor stops
+ * being one. Everything the components *do* render — the box, the toolbar,
+ * the writing surface's own padding and focus ring — is utilities in the
+ * component, where it belongs.
+ *
+ * `.rich-text` and not `.prose`: this package's classes ship unprefixed into
+ * other people's stylesheets, and `.prose` is the one name in CSS most
+ * likely to already be taken — Tailwind's typography plugin defines exactly
+ * it. A consumer with that plugin and this package would have had two sets
+ * of margins fighting, and it would have read as a theming bug.
+ *
+ * Every value here is a token. The vertical rhythm is `--space-*`, four
+ * pixels a step and scaling with `--density`; the type steps are `--text-*`,
+ * scaling with `--font-size`. A heading two sizes apart from its body at one
+ * density is two sizes apart at every density.
+ */
+
+.rich-text > * {
+  margin: 0;
+}
+
+.rich-text > * + * {
+  margin-top: var(--space-3);
+}
+
+.rich-text h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  letter-spacing: -0.01em;
+}
+
+.rich-text h3 {
+  font-size: var(--text-md);
+  font-weight: var(--weight-strong);
+}
+
+/* A heading after prose needs more room above it than below: the space
+   belongs to the section it opens, not to the paragraph it follows. */
+.rich-text > * + :is(h2, h3) {
+  margin-top: var(--space-6);
+}
+
+.rich-text :is(ul, ol) {
+  padding-left: var(--space-5);
+}
+
+.rich-text li + li {
+  margin-top: var(--space-1);
+}
+
+.rich-text a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rich-text strong {
+  font-weight: var(--weight-strong);
+}
+
+/* An empty editor says what goes in it. The placeholder extension puts the
+   words on the empty node as `data-placeholder` and marks it, so `attr()` is
+   reading an attribute of the element it is drawn on — which is the part a
+   hand-rolled rule got wrong twice: a rule on the paragraph cannot reach an
+   attribute on the box, and ProseMirror's empty paragraph holds a trailing
+   `<br>` so `:empty` never matches it either. `pointer-events: none` so a
+   click on the words still lands in the text.
+
+   Harmless on the view, which never produces the class. */
+.rich-text p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--muted);
+  pointer-events: none;
+}
+}
+