@crisp-ui-kit/crisp 0.34.0 → 0.35.0

package/dist/cjs/components/datatable/datatable.js

@@ -171,7 +171,7 @@ function renderTyped(col, value, avatarTone, display, locale = "en-US") {
     }
 }
 const CHECK_W = 40;
-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
+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
@@ -271,6 +271,21 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     }
     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);
@@ -469,6 +484,43 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             };
         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) {
@@ -506,8 +558,16 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.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: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.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
@@ -525,7 +585,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 : "descending"
                                             : "none";
                                     const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
-                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
+                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.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);
@@ -565,7 +625,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.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 ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 
                                                         // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
@@ -598,6 +658,6 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 }, children: col.render
                                                     ? col.render(value, row)
                                                     : renderTyped(col, value, avatarTone, col.format?.(value, row), locale) }, col.key));
-                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

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

@@ -62,6 +62,8 @@ const config = (0, core_1.defineRecipe)({
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; transition: background-color .12s; }

package/dist/cjs/components/filldoc/filldoc.js

@@ -0,0 +1,102 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FillDoc = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const fillsheet_1 = require("../fillsheet");
+const filldoc_recipe_1 = require("./filldoc.recipe");
+/** 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.
+ */
+exports.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 ((0, jsx_runtime_1.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: (0, core_1.cx)((0, filldoc_recipe_1.filldocRecipe)({ page }), className), style: style, children: blocks.map((block, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-filldoc-block", children: [editable && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-filldoc-tools", children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": removeLabel, title: removeLabel, onClick: () => removeAt(i), children: "\u00D7" }) })), block.type === "table" ? ((0, jsx_runtime_1.jsx)(fillsheet_1.FillSheet, { label: block.label, mode: mode, surface: "panel", columns: block.columns, value: block.value, onValueChange: (value) => replace(i, { ...block, value }) })) : editable ? ((0, jsx_runtime_1.jsx)("textarea", { ref: autoGrow, className: (0, core_1.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" ? ((0, jsx_runtime_1.jsx)("h2", { className: "crisp-filldoc-heading", children: block.text })) : ((0, jsx_runtime_1.jsx)("p", { className: "crisp-filldoc-text", children: block.text })), editable && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-filldoc-insert", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-filldoc-insert-rule" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => insertAfter(i, { id: nextId(), type: "text", text: "" }), children: ["+ ", addTextLabel] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => insertAfter(i, { id: nextId(), type: "heading", text: "" }), children: ["+ ", addHeadingLabel] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => insertAfter(i, emptyTable()), children: ["+ ", addTableLabel] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-filldoc-insert-rule" })] }))] }, block.id))) }));
+});

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

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.filldocRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+/**
+ * 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 = tokens_1.contract.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 = (0, core_1.defineSpec)({
+    name: "filldoc",
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens_1.contract.space["4"],
+        boxSizing: "border-box",
+        width: PAGE_WIDTH,
+        minHeight: PAGE_MIN_HEIGHT,
+        padding: PAGE_MARGIN,
+        margin: "0 auto",
+        background: tokens_1.contract.bgSurface,
+        fontFamily: tokens_1.contract.font.sans,
+        fontSize: tokens_1.contract.text.lg,
+        lineHeight: "22px",
+        color: tokens_1.contract.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: tokens_1.elevation.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: tokens_1.contract.text.xl,
+                fontWeight: tokens_1.contract.weight.semibold,
+                lineHeight: "26px",
+                color: tokens_1.contract.fgPrimary,
+                whiteSpace: "pre-wrap",
+                overflowWrap: "break-word",
+            },
+        },
+        {
+            slot: "paragraph",
+            selector: "& .crisp-filldoc-text",
+            decls: {
+                margin: "0",
+                fontSize: tokens_1.contract.text.lg,
+                lineHeight: "22px",
+                color: tokens_1.contract.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(${tokens_1.contract.space["4"]} / -2)`,
+                height: tokens_1.contract.space["4"],
+                display: "flex",
+                alignItems: "center",
+                gap: tokens_1.contract.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 ${tokens_1.contract.space["1.5"]}`,
+                border: "none",
+                borderRadius: tokens_1.contract.radius.sm,
+                background: tokens_1.contract.bgRaised,
+                fontFamily: "inherit",
+                fontSize: tokens_1.contract.text.sm,
+                color: tokens_1.contract.fgMuted,
+                cursor: "pointer",
+            },
+        },
+        {
+            selector: "& .crisp-filldoc-insert button:hover",
+            decls: { background: tokens_1.contract.bgNeutralWeak, color: tokens_1.contract.fgPrimary },
+        },
+        // --- the block's own controls ----------------------------------------
+        {
+            slot: "blockTools",
+            selector: "& .crisp-filldoc-tools",
+            decls: {
+                position: "absolute",
+                insetInlineEnd: "100%",
+                insetBlockStart: "0",
+                paddingInlineEnd: tokens_1.contract.space["2"],
+                display: "flex",
+                gap: tokens_1.contract.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: tokens_1.contract.radius.sm,
+                background: "transparent",
+                fontFamily: "inherit",
+                fontSize: tokens_1.contract.text.sm,
+                color: tokens_1.contract.fgMuted,
+                cursor: "pointer",
+            },
+        },
+        {
+            selector: "& .crisp-filldoc-tools button:hover",
+            decls: { background: tokens_1.contract.bgRaised, color: tokens_1.contract.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" },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.filldocRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.docToMarkdown = exports.docToHTML = exports.filldocRecipe = exports.FillDoc = void 0;
+var filldoc_1 = require("./filldoc");
+Object.defineProperty(exports, "FillDoc", { enumerable: true, get: function () { return filldoc_1.FillDoc; } });
+var filldoc_recipe_1 = require("./filldoc.recipe");
+Object.defineProperty(exports, "filldocRecipe", { enumerable: true, get: function () { return filldoc_recipe_1.filldocRecipe; } });
+var serialize_1 = require("./serialize");
+Object.defineProperty(exports, "docToHTML", { enumerable: true, get: function () { return serialize_1.docToHTML; } });
+Object.defineProperty(exports, "docToMarkdown", { enumerable: true, get: function () { return serialize_1.docToMarkdown; } });

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.docToHTML = docToHTML;
+exports.docToMarkdown = docToMarkdown;
+const serialize_1 = require("../fillsheet/serialize");
+/**
+ * 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. */
+function docToHTML(blocks) {
+    return blocks
+        .map((b) => {
+        if (b.type === "table")
+            return (0, serialize_1.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. */
+function docToMarkdown(blocks) {
+    return blocks
+        .map((b) => {
+        if (b.type === "table")
+            return (0, serialize_1.toMarkdown)(b.value, { columns: b.columns });
+        return b.type === "heading" ? `## ${b.text}` : b.text;
+    })
+        .join("\n\n");
+}