@crisp-ui-kit/crisp 0.34.0 → 0.36.0

package/dist/esm/components/bulkbar/bulkbar.recipe.js

@@ -15,6 +15,12 @@ const config = defineRecipe({
     & .crisp-bulkbar-count { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-bulkbar-count:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); color: ${c.fgPrimary}; }
     & .crisp-bulkbar-count svg { flex-shrink: 0; }
+    /* the ", Clear selection" ARIA concatenates onto the pill's name (#324)
+       -- read, never drawn. Same technique as Slider's thumblabel. */
+    & .crisp-bulkbar-clearlabel {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
     & .crisp-bulkbar-btn { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.menuRow}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-bulkbar-btn:hover { background: ${c.bgRaised}; }
     & .crisp-bulkbar-btn--danger { color: ${c.bgDanger}; }

package/dist/esm/components/datatable/datatable.js

@@ -135,7 +135,7 @@ function renderTyped(col, value, avatarTone, display, locale = "en-US") {
     }
 }
 const CHECK_W = 40;
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
     : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
     // Two different defaults on purpose. FORMATTING falls back to "en-US", which
@@ -235,6 +235,21 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     }
     const [editing, setEditing] = React.useState(null);
     const [scrolledX, setScrolledX] = React.useState(false);
+    // Mirrors `scrolledX` for the trailing edge: true while there is still
+    // unrevealed content sliding under the sticky trailing column, i.e. while
+    // NOT scrolled all the way to the end. Recomputed after every render (see
+    // the effect below), not just on scroll, because a column resize or a data
+    // change can move `scrollWidth` without firing a scroll event.
+    const [scrolledXEnd, setScrolledXEnd] = React.useState(false);
+    const scrollRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!stickyLast)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setScrolledXEnd(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    });
     // column widths (drag-to-resize) + fixed-layout sizing
     const [widths, setWidths] = React.useState({});
     const [resizingKey, setResizingKey] = React.useState(null);
@@ -433,6 +448,43 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             };
         return {};
     };
+    // Mirror of the group above, for a single trailing column (#327): the last
+    // VISIBLE data column (`columns`, not `allColumns` — a hidden column can't
+    // be the one that pins). `insetInlineEnd`, never `right`, for the same
+    // direction-safety reason `stickyCol` uses `insetInlineStart`: a physical
+    // `right` pins to the trailing edge only in LTR and swaps to the LEADING
+    // edge under `dir="rtl"`, which is backwards for a column meant to stay
+    // pinned to the reading direction's end.
+    const stickyLastCol = (index) => {
+        if (!stickyLast || index !== columns.length - 1)
+            return {};
+        return {
+            "data-sticky": "",
+            "data-sticky-edge-end": "",
+            style: { insetInlineEnd: 0 },
+        };
+    };
+    // Merges the two groups for a data-column cell. A column can be pinned by
+    // both (a one-column table with both flags on) — the header sticky outranks
+    // either via its own z-index rule (#285's ordering still holds), and here
+    // the two style objects merge rather than one overwriting the other.
+    const dataStickyCol = (index) => {
+        const lead = stickyCol(index);
+        const trail = stickyLastCol(index);
+        // Not `!lead["data-sticky"]`: the attribute's value is `""`, which is
+        // falsy, so that check silently treated every pinned column as unpinned.
+        if (!("data-sticky" in lead) && !("data-sticky" in trail))
+            return {};
+        return {
+            ...lead,
+            ...trail,
+            "data-sticky": "",
+            style: {
+                ...lead.style,
+                ...trail.style,
+            },
+        };
+    };
     const alignFor = (col) => col.align ??
         (col.type === "number" || col.type === "currency" ? "right" : undefined);
     function startResize(col, e) {
@@ -470,8 +522,16 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
     return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
-                    onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
+                    ref: scrollRef,
+                    onScroll: (e) => {
+                        const el = e.currentTarget;
+                        setScrolledX(el.scrollLeft > 0);
+                        if (stickyLast) {
+                            setScrolledXEnd(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+                        }
+                    },
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
+                    ...(scrolledXEnd ? { "data-scrolled-x-end": "" } : {}),
                 }, children: [_jsxs("colgroup", { children: [showGrip && _jsx("col", { style: { width: GRIP_W } }), selectable && _jsx("col", { style: { width: CHECK_W } }), columns.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key)))] }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [showGrip && (_jsx(TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && (_jsx(TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
                                     const Icon = col.icon;
                                     // The sort direction was painted (`data-sorted`) and never
@@ -489,7 +549,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 : "descending"
                                             : "none";
                                     const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
-                                    return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
+                                    return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
@@ -529,7 +589,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
                                             const value = cellValue(col, row);
-                                            const sticky = stickyCol(i);
+                                            const sticky = dataStickyCol(i);
                                             if (isEditing) {
                                                 return (_jsx(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: _jsx("input", { className: "crisp-datatable-edit", 
                                                         // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
@@ -562,6 +622,6 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 }, children: col.render
                                                     ? col.render(value, row)
                                                     : renderTyped(col, value, avatarTone, col.format?.(value, row), locale) }, col.key));
-                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

package/dist/esm/components/datatable/datatable.recipe.js

@@ -59,6 +59,8 @@ const config = defineRecipe({
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* mirror of the rule above, for stickyLast's trailing column (#327) */
+    & .crisp-table-scroll[data-scrolled-x-end] [data-sticky-edge-end] { clip-path: inset(0 0 0 -38px); box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
     & .crisp-datatable-addcell { padding: 0; border-top: none; }
     & .crisp-datatable-addrow { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border: none; border-top: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.lg}; cursor: pointer; transition: background-color .12s; }

package/dist/esm/components/filldoc/filldoc.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cx } from "../../core/index.js";
+import { FillSheet } from "../fillsheet/index.js";
+import { filldocRecipe } from "./filldoc.recipe.js";
+/** Size a textarea to its content; see FillSheet's autoGrow for the reset. */
+function autoGrow(el) {
+    if (!el)
+        return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+}
+let seq = 0;
+const nextId = () => `b${++seq}`;
+const emptyTable = () => ({
+    id: nextId(),
+    type: "table",
+    columns: [{ width: 160 }, { width: 320 }],
+    value: [
+        ["", ""],
+        ["", ""],
+    ],
+});
+/**
+ * A page you can write on, of which a sheet is one block.
+ *
+ * FillSheet is the table; this is the document it sits in. The two share a
+ * look on purpose -- a real page, real margins, square corners, and nothing
+ * drawn that is not content -- and the same split between the person who
+ * MAKES a form and the person who fills it in: in `edit` you write the prose
+ * and add or remove blocks, in `fill` the prose is fixed and only the sheets
+ * take input.
+ *
+ * Every block's controls are hidden until the pointer is in that block. A
+ * page covered in handles and grips stops looking like a page, which is the
+ * whole thing this is for.
+ */
+export const FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel = "Text", addHeadingLabel = "Heading", addTableLabel = "Table", removeLabel = "Remove", className, style, ...rest }, forwardedRef) {
+    const editable = mode === "edit";
+    const replace = (i, block) => {
+        const next = blocks.slice();
+        next[i] = block;
+        onBlocksChange?.(next);
+    };
+    const insertAfter = (i, block) => {
+        const next = blocks.slice();
+        next.splice(i + 1, 0, block);
+        onBlocksChange?.(next);
+    };
+    const removeAt = (i) => {
+        const next = blocks.slice();
+        next.splice(i, 1);
+        onBlocksChange?.(next);
+    };
+    return (_jsx("div", { ...rest, ref: forwardedRef, 
+        // The role rides WITH the name: `aria-label` on a role-less div is
+        // not exposed at all, and a bare `role="group"` on an unnamed page
+        // just adds an empty group to the tree. Either both or neither.
+        role: label ? "group" : undefined, "aria-label": label, className: cx(filldocRecipe({ page }), className), style: style, children: blocks.map((block, i) => (_jsxs("div", { className: "crisp-filldoc-block", children: [editable && (_jsx("div", { className: "crisp-filldoc-tools", children: _jsx("button", { type: "button", "aria-label": removeLabel, title: removeLabel, onClick: () => removeAt(i), children: "\u00D7" }) })), block.type === "table" ? (_jsx(FillSheet, { label: block.label, mode: mode, surface: "panel", columns: block.columns, value: block.value, onValueChange: (value) => replace(i, { ...block, value }) })) : editable ? (_jsx("textarea", { ref: autoGrow, className: cx("crisp-filldoc-writer", block.type === "heading"
+                        ? "crisp-filldoc-heading"
+                        : "crisp-filldoc-text"), rows: 1, value: block.text, "aria-label": block.type === "heading" ? addHeadingLabel : addTextLabel, onChange: (e) => {
+                        autoGrow(e.currentTarget);
+                        replace(i, { ...block, text: e.target.value });
+                    } })) : block.type === "heading" ? (_jsx("h2", { className: "crisp-filldoc-heading", children: block.text })) : (_jsx("p", { className: "crisp-filldoc-text", children: block.text })), editable && (_jsxs("div", { className: "crisp-filldoc-insert", children: [_jsx("span", { className: "crisp-filldoc-insert-rule" }), _jsxs("button", { type: "button", onClick: () => insertAfter(i, { id: nextId(), type: "text", text: "" }), children: ["+ ", addTextLabel] }), _jsxs("button", { type: "button", onClick: () => insertAfter(i, { id: nextId(), type: "heading", text: "" }), children: ["+ ", addHeadingLabel] }), _jsxs("button", { type: "button", onClick: () => insertAfter(i, emptyTable()), children: ["+ ", addTableLabel] }), _jsx("span", { className: "crisp-filldoc-insert-rule" })] }))] }, block.id))) }));
+});

package/dist/esm/components/filldoc/filldoc.recipe.js

@@ -0,0 +1,208 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+/**
+ * FillDoc — a page of blocks, of which a sheet is one.
+ *
+ * The measurement rule is waived here for the same reason it is waived for
+ * FillSheet, and by the same decision: Attio has no document editor. It spends
+ * the measured scale everywhere a value exists on it.
+ *
+ * The look is FillSheet's, continued: a real page with real margins, square
+ * corners, and nothing on it that is not content. A block shows no chrome at
+ * rest — no handle, no outline, no drag grip — because a page covered in
+ * controls stops looking like a page. The controls appear where the pointer
+ * is, and only in `edit`.
+ */
+const line = c.borderDefault;
+// A4 at 96dpi, in the unit that actually means A4. `mm` is a real CSS unit,
+// so this prints at the size it says.
+const PAGE_WIDTH = "210mm";
+const PAGE_MIN_HEIGHT = "297mm";
+const PAGE_MARGIN = "20mm";
+const spec = defineSpec({
+    name: "filldoc",
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: c.space["4"],
+        boxSizing: "border-box",
+        width: PAGE_WIDTH,
+        minHeight: PAGE_MIN_HEIGHT,
+        padding: PAGE_MARGIN,
+        margin: "0 auto",
+        background: c.bgSurface,
+        fontFamily: c.font.sans,
+        fontSize: c.text.lg,
+        lineHeight: "22px",
+        color: c.fgPrimary,
+        // Paper is not rounded, and the lift is what says it is a sheet rather
+        // than a panel in a layout.
+        borderRadius: "0",
+        boxShadow: e.floating,
+    },
+    parts: [
+        { selector: "&:focus, &:focus-visible", decls: { outline: "none" } },
+        {
+            slot: "block",
+            selector: "& .crisp-filldoc-block",
+            decls: { position: "relative" },
+        },
+        // --- text ------------------------------------------------------------
+        {
+            slot: "heading",
+            selector: "& .crisp-filldoc-heading",
+            decls: {
+                margin: "0",
+                fontSize: c.text.xl,
+                fontWeight: c.weight.semibold,
+                lineHeight: "26px",
+                color: c.fgPrimary,
+                whiteSpace: "pre-wrap",
+                overflowWrap: "break-word",
+            },
+        },
+        {
+            slot: "paragraph",
+            selector: "& .crisp-filldoc-text",
+            decls: {
+                margin: "0",
+                fontSize: c.text.lg,
+                lineHeight: "22px",
+                color: c.fgPrimary,
+                whiteSpace: "pre-wrap",
+                overflowWrap: "break-word",
+            },
+        },
+        // The editor for a text block is the text: same font, same line box, no
+        // box of its own. Anything else and the words move when you click them.
+        {
+            slot: "writer",
+            selector: "& .crisp-filldoc-writer",
+            decls: {
+                display: "block",
+                width: "100%",
+                margin: "0",
+                padding: "0",
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                fontFamily: "inherit",
+                fontSize: "inherit",
+                fontWeight: "inherit",
+                lineHeight: "inherit",
+                color: "inherit",
+                resize: "none",
+                overflow: "hidden",
+                // the page turns text selection off so a block drag does not smear
+                // one across it; the writer has to opt back in
+                userSelect: "text",
+                WebkitUserSelect: "text",
+            },
+        },
+        // --- the between-blocks control --------------------------------------
+        // A page covered in buttons stops reading as a page, so the only thing
+        // that ever appears is a hairline with a + on it, in the gap the pointer
+        // is actually in.
+        {
+            slot: "inserter",
+            selector: "& .crisp-filldoc-insert",
+            decls: {
+                position: "absolute",
+                insetInlineStart: "0",
+                insetInlineEnd: "0",
+                insetBlockEnd: `calc(${c.space["4"]} / -2)`,
+                height: c.space["4"],
+                display: "flex",
+                alignItems: "center",
+                gap: c.space["2"],
+                opacity: "0",
+                transition: "opacity .1s",
+                cursor: "pointer",
+            },
+        },
+        {
+            selector: "& .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within",
+            decls: { opacity: "1" },
+        },
+        {
+            selector: "& .crisp-filldoc-insert-rule",
+            decls: { flex: "1", height: "1px", background: line },
+        },
+        {
+            slot: "insertButton",
+            selector: "& .crisp-filldoc-insert button",
+            decls: {
+                display: "inline-flex",
+                alignItems: "center",
+                height: "20px",
+                padding: `0 ${c.space["1.5"]}`,
+                border: "none",
+                borderRadius: c.radius.sm,
+                background: c.bgRaised,
+                fontFamily: "inherit",
+                fontSize: c.text.sm,
+                color: c.fgMuted,
+                cursor: "pointer",
+            },
+        },
+        {
+            selector: "& .crisp-filldoc-insert button:hover",
+            decls: { background: c.bgNeutralWeak, color: c.fgPrimary },
+        },
+        // --- the block's own controls ----------------------------------------
+        {
+            slot: "blockTools",
+            selector: "& .crisp-filldoc-tools",
+            decls: {
+                position: "absolute",
+                insetInlineEnd: "100%",
+                insetBlockStart: "0",
+                paddingInlineEnd: c.space["2"],
+                display: "flex",
+                gap: c.space["1"],
+                opacity: "0",
+                transition: "opacity .1s",
+            },
+        },
+        {
+            selector: "& .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within",
+            decls: { opacity: "1" },
+        },
+        {
+            selector: "& .crisp-filldoc-tools button",
+            decls: {
+                width: "20px",
+                height: "20px",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "0",
+                border: "none",
+                borderRadius: c.radius.sm,
+                background: "transparent",
+                fontFamily: "inherit",
+                fontSize: c.text.sm,
+                color: c.fgMuted,
+                cursor: "pointer",
+            },
+        },
+        {
+            selector: "& .crisp-filldoc-tools button:hover",
+            decls: { background: c.bgRaised, color: c.fgPrimary },
+        },
+    ],
+    variants: {
+        page: {
+            // A real sheet of A4. The default, because the point is a document.
+            a4: {},
+            // Grows to its content and fills its container instead, for a document
+            // embedded in a screen rather than printed.
+            auto: { width: "100%", minHeight: "0", maxWidth: PAGE_WIDTH },
+        },
+    },
+    defaultVariants: { page: "a4" },
+});
+const config = specToRecipe(spec);
+export const filldocRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

package/dist/esm/components/filldoc/index.js

@@ -0,0 +1,3 @@
+export { FillDoc } from "./filldoc.js";
+export { filldocRecipe } from "./filldoc.recipe.js";
+export { docToHTML, docToMarkdown } from "./serialize.js";

package/dist/esm/components/filldoc/serialize.js

@@ -0,0 +1,35 @@
+import { toHTML, toMarkdown } from "../fillsheet/serialize.js";
+/**
+ * The whole document, in the formats a document reads.
+ *
+ * The same trick as the sheet's serialisers: plain functions over plain data,
+ * no React and no DOM, so a server route can render an export. A table block
+ * hands straight off to the sheet's own writer, so there is one implementation
+ * of table escaping rather than two that drift.
+ */
+const escapeHtml = (s) => s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+/** An HTML document body: what Word, Google Docs and Pages paste as a document. */
+export function docToHTML(blocks) {
+    return blocks
+        .map((b) => {
+        if (b.type === "table")
+            return toHTML(b.value, { columns: b.columns });
+        const text = escapeHtml(b.text).replace(/\r?\n/g, "<br>");
+        return b.type === "heading" ? `<h2>${text}</h2>` : `<p>${text}</p>`;
+    })
+        .join("\n");
+}
+/** The same document as Markdown. */
+export function docToMarkdown(blocks) {
+    return blocks
+        .map((b) => {
+        if (b.type === "table")
+            return toMarkdown(b.value, { columns: b.columns });
+        return b.type === "heading" ? `## ${b.text}` : b.text;
+    })
+        .join("\n\n");
+}