@crisp-ui-kit/crisp 0.33.5 → 0.35.0

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

@@ -0,0 +1,322 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+/**
+ * FillSheet — a cell canvas, not a table.
+ *
+ * ON THE MEASUREMENT RULE: every other recipe in this repo takes its numbers
+ * from app.attio.com, and CLAUDE.md says not to build what cannot be measured.
+ * That rule is WAIVED here, deliberately and with the owner's sign-off: Attio
+ * has no spreadsheet, so there is nothing to measure against. This is the one
+ * component whose composition is designed rather than reproduced. Do not
+ * "restore" it to a measured source — there isn't one.
+ *
+ * It still spends the measured SCALE wherever a value exists on it (space,
+ * text, the semantic colours), because the scale is what keeps this looking
+ * like the rest of crisp. The few raw px below each say what decides them.
+ *
+ * ON THE LOOK: bare. A cell is NOT a box. Boxing every cell on four sides is
+ * the single thing that makes a grid read as spreadsheet software, and it was
+ * rejected on sight. What is left is a faint rule under each row and between
+ * each column, with none on the outer edge — the cells are separated, the
+ * sheet is not fenced. There is no lettering, no numbered gutter and no header
+ * row anywhere in this file.
+ */
+// border-DEFAULT (#e4e4e7), not border-subtle (#eeeff1). Subtle is for a rule
+// on a tinted surface; on white paper it vanishes, and a form whose grid you
+// cannot see is not a form.
+const line = c.borderDefault;
+// Selection is NEUTRAL, not brand. A blue block laid over the cells is the
+// Excel selection and it was rejected; this is the same ink wash the record
+// tables use for a selected row, so a selected range here and a selected row
+// there read as the same gesture.
+const tint = (pct) => `color-mix(in srgb, ${c.fgPrimary} ${pct}%, transparent)`;
+// The grab strip for a resize edge. 5px is the smallest target that is
+// reliably hittable with a mouse without swallowing clicks meant for the cell.
+const GRAB = "5px";
+const spec = defineSpec({
+    name: "fillsheet",
+    base: {
+        // `grid` (not `table`) is the whole point: per-column widths and per-row
+        // heights are template tracks, so either axis can be dragged independently
+        // and a cell never has to agree with its column about its height.
+        display: "grid",
+        gridTemplateColumns: "var(--crisp-fillsheet-cols)",
+        gridTemplateRows: "var(--crisp-fillsheet-rows)",
+        position: "relative",
+        overflow: "auto",
+        maxWidth: "100%",
+        // The frame is a real border, so without this a consumer who sets a width
+        // (or leans on `maxWidth: 100%`, as the A4 example does) gets a content
+        // box 2px narrower than they sized for, the column tracks overflow it by
+        // those 2px, and the sheet grows a scrollbar for one pixel of nothing.
+        boxSizing: "border-box",
+        fontFamily: c.font.sans,
+        fontSize: c.text.md,
+        color: c.fgPrimary,
+        background: c.bgSurface,
+        // SQUARE. The web attribute panel this borrows its structure from is a
+        // radius-xl card, but a card is a UI surface and this is a form printed
+        // on a page -- ruled paper has corners.
+        borderRadius: "0",
+        // A real BORDER, not `inset` box-shadow. An inset shadow is painted under
+        // the element's own children, and every cell here has an opaque
+        // background covering the grid edge to edge -- so the frame was drawn and
+        // then painted straight over, and the sheet read as having no outline at
+        // all. `outline` is the other option and is barred: the root sets
+        // `outline: none` on focus, and the frame would blink out when you click
+        // into the sheet.
+        border: `1px solid ${line}`,
+        // Dragging a selection across cells otherwise paints the browser's own
+        // text selection over the range tint.
+        userSelect: "none",
+        WebkitUserSelect: "none",
+    },
+    parts: [
+        // The grid root takes focus so it can receive keys, but it must NOT draw
+        // the browser's focus ring: a rectangle around the whole sheet reads as
+        // "everything is selected" and drowns the one ring that means it. The
+        // focused cell is the focus indicator, and focusing the sheet always
+        // selects a cell, so a keyboard user is never left with no visible
+        // position.
+        { selector: "&:focus, &:focus-visible", decls: { outline: "none" } },
+        {
+            slot: "cell",
+            selector: "& .crisp-fillsheet-cell",
+            decls: {
+                position: "relative",
+                display: "flex",
+                // Top, not centre: a cell that wrapped to four lines should start
+                // where every other cell in its row starts.
+                alignItems: "flex-start",
+                minWidth: "0",
+                paddingInline: c.space["3"],
+                paddingBlock: c.space["3"],
+                // A divider on both axes: the point is to read it cell by cell, not
+                // as ruled rows. The last column and the last row drop theirs (below)
+                // so nothing doubles up against the panel's own frame -- the same
+                // rule fms uses, where `.attr-row + .attr-row` draws the divider and
+                // the outer edge is left to the panel.
+                borderInlineEnd: `1px solid ${line}`,
+                borderBlockEnd: `1px solid ${line}`,
+                background: c.bgSurface,
+                // Narrowing a column WRAPS the text; it does not clip it or hide it
+                // behind an ellipsis. `break-word` rather than `anywhere` so ordinary
+                // prose still breaks at spaces and only an unbreakable run is split.
+                // `pre-wrap` so an explicit newline survives too.
+                whiteSpace: "pre-wrap",
+                overflowWrap: "break-word",
+                // Pinned, not left to `normal`: the row height below is 8 + 20 + 8, so
+                // a single-line cell sits with EQUAL space above and below it. Leave
+                // this to the font and the text rides high in the row, which is what
+                // "too near the top" was.
+                lineHeight: "20px",
+                cursor: "cell",
+            },
+        },
+        // A read-only column is a KEY cell, and it is filled rather than blank.
+        // This is the move the fms iOS detail view makes: its label cell sits on
+        // gray200 against a white value cell, and that contrast -- not an outline
+        // -- is what makes you read the form cell by cell. It also says which
+        // cells are yours to fill before you touch one.
+        {
+            selector: "& .crisp-fillsheet-cell[aria-readonly]",
+            decls: { background: c.bgRaised, color: c.fgMuted },
+        },
+        // The outer edges belong to the frame, not to a cell.
+        {
+            selector: "& .crisp-fillsheet-cell:last-child",
+            decls: { borderInlineEnd: "none" },
+        },
+        {
+            // each row is a `display: contents` wrapper, so the LAST row wrapper is
+            // the grid's last child and its cells are the bottom row
+            selector: "& > div:last-child .crisp-fillsheet-cell",
+            decls: { borderBlockEnd: "none" },
+        },
+        {
+            selector: '& .crisp-fillsheet-cell[data-align="end"]',
+            decls: {
+                justifyContent: "flex-end",
+                fontVariantNumeric: "tabular-nums",
+            },
+        },
+        // --- the state stack ------------------------------------------------
+        // One flat tint, and nothing else. There is no hover treatment and no
+        // ring: a click opens the cell immediately, so anything layered on the
+        // moment before that is decoration you see only in passing. Every cell in
+        // a range shares one fill, so a selection reads as a single block rather
+        // than a block with its lead cell picked out of it.
+        // Only a MULTI-cell selection is painted. Pressing a single cell paints
+        // nothing at all: the press opens that cell, so a tint under the pointer
+        // is a state that exists for the length of a mouse click and is then
+        // replaced -- which reads as a flicker, not as feedback. A range is
+        // different. It persists, and it is the thing the fill handle acts on.
+        {
+            selector: "&[data-multi] .crisp-fillsheet-cell[data-range]",
+            decls: { background: tint(6) },
+        },
+        // A KEYBOARD user has to be able to see where they are. Pressing a cell
+        // paints nothing, which is right for the mouse -- the press is on its way
+        // to opening that cell -- but it left arrow-key navigation completely
+        // invisible: the root drew no focus ring (deliberately, a rectangle round
+        // the whole sheet reads as "everything is selected") and a single-cell
+        // selection drew nothing either, so nothing on screen said where you
+        // were.
+        //
+        // Hung off `data-keynav`, which the component sets from the last thing
+        // that moved the selection, NOT off `:focus-visible`. That was tried and
+        // is wrong here: the cell press calls `focus()` on the root, and Chrome
+        // counts a programmatic focus as keyboard-ish, so `:focus-visible`
+        // matched on a plain mouse press and put the flicker straight back.
+        {
+            selector: "&[data-keynav] .crisp-fillsheet-cell[data-selected]",
+            decls: {
+                background: tint(6),
+                boxShadow: `inset 0 -2px 0 ${c.fgPrimary}`,
+            },
+        },
+        {
+            // Last, so it beats both. The cell you are typing in shows nothing at
+            // all -- the tint is there to say "this is selected", and once you are
+            // writing in it that is already obvious.
+            selector: "& .crisp-fillsheet-cell[data-editing]",
+            decls: { background: c.bgSurface },
+        },
+        {
+            slot: "columnResize",
+            selector: "& .crisp-fillsheet-colresize",
+            decls: {
+                position: "absolute",
+                insetBlockStart: "0",
+                insetBlockEnd: "0",
+                insetInlineEnd: "0",
+                zIndex: "3",
+                width: GRAB,
+                cursor: "col-resize",
+                // a drag on the grab is a RESIZE, never a scroll — without this a
+                // finger on the boundary pans the page instead of moving the column
+                touchAction: "none",
+            },
+        },
+        {
+            slot: "rowResize",
+            selector: "& .crisp-fillsheet-rowresize",
+            decls: {
+                position: "absolute",
+                insetInlineStart: "0",
+                insetInlineEnd: "0",
+                insetBlockEnd: "0",
+                zIndex: "3",
+                height: GRAB,
+                cursor: "row-resize",
+                touchAction: "none",
+            },
+        },
+        // Hovering the boundary draws it. This is the ONLY affordance for
+        // resizing -- there is no header row to grab -- so it is a solid 2px
+        // line in the primary ink, not a tint: at 5px wide and invisible until
+        // touched, a fainter one is a control nobody finds.
+        {
+            selector: "& .crisp-fillsheet-colresize:hover",
+            decls: {
+                background: `linear-gradient(to right, transparent 0, transparent calc(50% - 1px), ${c.fgPrimary} calc(50% - 1px), ${c.fgPrimary} calc(50% + 1px), transparent calc(50% + 1px))`,
+            },
+        },
+        {
+            selector: "& .crisp-fillsheet-rowresize:hover",
+            decls: {
+                background: `linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), ${c.fgPrimary} calc(50% - 1px), ${c.fgPrimary} calc(50% + 1px), transparent calc(50% + 1px))`,
+            },
+        },
+        {
+            slot: "editor",
+            selector: "& .crisp-fillsheet-editor",
+            decls: {
+                // IN FLOW, not absolutely positioned over the cell. Pinned to the
+                // cell's box with `inset: 0` it could never be taller than the cell,
+                // so a second line scrolled out of sight under `overflow: hidden`
+                // instead of growing the row. In flow, the textarea's height drives
+                // the cell, the cell drives the row's `minmax(h, auto)` track, and a
+                // cell grows as you type the way a textarea does.
+                display: "block",
+                flexGrow: "1",
+                width: "100%",
+                minWidth: "0",
+                margin: "0",
+                // No inset of its own: it sits INSIDE the cell's padding now, so
+                // repeating it here would double it and shift the text on open.
+                padding: "0",
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                fontFamily: "inherit",
+                fontSize: "inherit",
+                // must match the cell's, or a wrapped cell re-flows as you type
+                lineHeight: "20px",
+                color: "inherit",
+                resize: "none",
+                // The root sets `user-select: none` so dragging a range does not paint
+                // the browser's text selection across the cells -- and that INHERITS,
+                // so without putting it back here you cannot select the text inside a
+                // cell you have opened. Drag-select, double-click a word, ⌘A: none of
+                // it worked in the editor.
+                userSelect: "text",
+                WebkitUserSelect: "text",
+                // the height is set from scrollHeight on every keystroke; a scrollbar
+                // would mean that measurement had failed
+                overflow: "hidden",
+            },
+        },
+        // A select inside a cell. `Select`'s trigger is a field -- it has a ring,
+        // a hover fill and its own inset -- and all of that belongs to a form
+        // control sitting in a layout, not to a cell in a sheet that is meant to
+        // look like paper. Stripped back so the open cell reads exactly like the
+        // closed one, with the list doing the work.
+        {
+            slot: "selectCell",
+            selector: "& .crisp-fillsheet-select .crisp-select-trigger",
+            decls: {
+                width: "100%",
+                height: "100%",
+                padding: "0",
+                border: "none",
+                background: "transparent",
+                boxShadow: "none",
+                font: "inherit",
+                color: "inherit",
+            },
+        },
+        {
+            selector: "& .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open]",
+            decls: { background: "transparent", boxShadow: "none" },
+        },
+        {
+            // the chevron is the one bit of chrome a closed cell must never show,
+            // and it has no job while the list is already open either
+            selector: "& .crisp-fillsheet-select .crisp-select-chevron",
+            decls: { display: "none" },
+        },
+    ],
+    variants: {
+        surface: {
+            // The frame on the root is the whole edge. The default.
+            panel: {},
+            // The same frame, lifted off the page, for a sheet that IS the document
+            // rather than one section of a screen.
+            //
+            // `elevation.floating`, not a hand-written stack. The first version was
+            // two raw `rgba(0,0,0,...)` layers, which is Lesson 30 exactly: a black
+            // shadow does nothing on a dark background, so the lift simply vanished
+            // when the theme flipped. The spec gate caught it. The elevation module
+            // exists so this value is written once and is theme-aware.
+            paper: { boxShadow: e.floating },
+            // No frame at all.
+            bare: { border: "none" },
+        },
+    },
+    defaultVariants: { surface: "panel" },
+});
+const config = specToRecipe(spec);
+export const fillsheetRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

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

@@ -0,0 +1,3 @@
+export { FillSheet, } from "./fillsheet.js";
+export { fillsheetRecipe } from "./fillsheet.recipe.js";
+export { toCSV, toHTML, toMarkdown, toTSV, } from "./serialize.js";

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

@@ -0,0 +1,76 @@
+/**
+ * Getting a sheet OUT, in the formats documents actually read.
+ *
+ * These are plain functions over `string[][]` — no React, no DOM — so they run
+ * in a server route building an export just as well as in a click handler.
+ * That is the whole reason the grid is `string[][]`: the value IS the
+ * document, and nothing here has to know what a cell meant.
+ */
+const headings = (columns) => columns?.some((c) => c.label !== undefined)
+    ? columns.map((c) => c.label ?? "")
+    : null;
+/**
+ * Tab-separated, the clipboard's lingua franca for a grid: Excel, Sheets,
+ * Numbers and Word's table paste all read it as CELLS.
+ */
+export function toTSV(value) {
+    // A tab or a newline INSIDE a cell would invent columns and rows in
+    // whatever reads this, so they are flattened to spaces. TSV has no quoting
+    // to escape them with — that is what CSV is for.
+    return value
+        .map((row) => row.map((c) => c.replace(/[\t\n\r]+/g, " ")).join("\t"))
+        .join("\n");
+}
+/** RFC 4180: quote a field that contains a comma, a quote or a newline. */
+export function toCSV(value, o = {}) {
+    const esc = (cell) => /[",\n\r]/.test(cell) ? `"${cell.replace(/"/g, '""')}"` : cell;
+    const head = headings(o.columns);
+    const rows = head ? [head, ...value] : value;
+    // CRLF, which is what RFC 4180 says and what Excel expects on Windows.
+    return rows.map((row) => row.map(esc).join(",")).join("\r\n");
+}
+const escapeHtml = (s) => s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+/**
+ * A real `<table>`.
+ *
+ * This is the one that makes "paste into a document" work: Word, Google Docs,
+ * Pages and every rich-text editor read `text/html` from the clipboard and
+ * build a formatted table from it. Given only tab-separated text they paste a
+ * paragraph of tabs instead.
+ *
+ * Newlines inside a cell become `<br>`, so a wrapped note survives as a
+ * wrapped note rather than collapsing into one line.
+ */
+export function toHTML(value, o = {}) {
+    const cell = (text) => escapeHtml(text).replace(/\r?\n/g, "<br>");
+    const head = headings(o.columns);
+    const thead = head
+        ? `<thead><tr>${head.map((h) => `<th>${cell(h)}</th>`).join("")}</tr></thead>`
+        : "";
+    const tbody = `<tbody>${value
+        .map((row) => `<tr>${row.map((c) => `<td>${cell(c)}</td>`).join("")}</tr>`)
+        .join("")}</tbody>`;
+    const caption = o.title ? `<caption>${escapeHtml(o.title)}</caption>` : "";
+    return `<table>${caption}${thead}${tbody}</table>`;
+}
+/**
+ * A GitHub-flavoured Markdown table.
+ *
+ * A pipe inside a cell is escaped and a newline becomes `<br>`, because a
+ * Markdown table row is a single line — an unescaped one silently splits the
+ * row into columns that were never there.
+ */
+export function toMarkdown(value, o = {}) {
+    const cell = (text) => text.replace(/\|/g, "\\|").replace(/\r?\n/g, "<br>");
+    const width = Math.max(0, ...value.map((r) => r.length));
+    const head = headings(o.columns) ?? Array.from({ length: width }, () => "");
+    const line = (cells) => `| ${Array.from({ length: head.length }, (_, i) => cell(cells[i] ?? "")).join(" | ")} |`;
+    const rule = `| ${head.map(() => "---").join(" | ")} |`;
+    const body = value.map(line).join("\n");
+    const title = o.title ? `### ${o.title}\n\n` : "";
+    return `${title}${line(head)}\n${rule}\n${body}`;
+}

package/dist/esm/index.js

@@ -24,6 +24,8 @@ export * from "./components/donutchart/index.js";
 export * from "./components/drawer/index.js";
 export * from "./components/emptystate/index.js";
 export * from "./components/fileupload/index.js";
+export * from "./components/filldoc/index.js";
+export * from "./components/fillsheet/index.js";
 export * from "./components/formfield/index.js";
 export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";

package/dist/esm/product/recordpage/recordpage.js

@@ -355,7 +355,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
                                                 autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
                                                     if (e.key === "Escape") {

package/dist/filldoc.css

@@ -0,0 +1,31 @@
+.crisp-filldoc {
+  display: flex; flex-direction: column; gap: var(--crisp-space-4); box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 20mm; margin: 0 auto; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-filldoc-block { position: relative; }
+    & .crisp-filldoc-heading { margin: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); line-height: 26px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-text { margin: 0; font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-writer { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
+    & .crisp-filldoc-insert { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: calc(var(--crisp-space-4) / -2); height: var(--crisp-space-4); display: flex; align-items: center; gap: var(--crisp-space-2); opacity: 0; transition: opacity .1s; cursor: pointer; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within { opacity: 1; }
+    & .crisp-filldoc-insert-rule { flex: 1; height: 1px; background: var(--crisp-border-default); }
+    & .crisp-filldoc-insert button { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-insert button:hover { background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); }
+    & .crisp-filldoc-tools { position: absolute; inset-inline-end: 100%; inset-block-start: 0; padding-inline-end: var(--crisp-space-2); display: flex; gap: var(--crisp-space-1); opacity: 0; transition: opacity .1s; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within { opacity: 1; }
+    & .crisp-filldoc-tools button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-tools button:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+}
+.crisp-filldoc--page_a4 {
+  
+}
+.crisp-filldoc--page_auto {
+  width: 100%; min-height: 0; max-width: 210mm;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-filldoc, .crisp-filldoc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/filldoc.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface FilldocVariants {
+  page?: "a4" | "auto";
+}
+
+export declare const filldocRecipe: RecipeFn<{ page: { a4: string; auto: string } }>;

package/dist/filldoc.layered.css

@@ -0,0 +1,33 @@
+@layer crisp-components {
+.crisp-filldoc {
+  display: flex; flex-direction: column; gap: var(--crisp-space-4); box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 20mm; margin: 0 auto; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-filldoc-block { position: relative; }
+    & .crisp-filldoc-heading { margin: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); line-height: 26px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-text { margin: 0; font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-writer { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
+    & .crisp-filldoc-insert { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: calc(var(--crisp-space-4) / -2); height: var(--crisp-space-4); display: flex; align-items: center; gap: var(--crisp-space-2); opacity: 0; transition: opacity .1s; cursor: pointer; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within { opacity: 1; }
+    & .crisp-filldoc-insert-rule { flex: 1; height: 1px; background: var(--crisp-border-default); }
+    & .crisp-filldoc-insert button { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-insert button:hover { background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); }
+    & .crisp-filldoc-tools { position: absolute; inset-inline-end: 100%; inset-block-start: 0; padding-inline-end: var(--crisp-space-2); display: flex; gap: var(--crisp-space-1); opacity: 0; transition: opacity .1s; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within { opacity: 1; }
+    & .crisp-filldoc-tools button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-tools button:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+}
+.crisp-filldoc--page_a4 {
+  
+}
+.crisp-filldoc--page_auto {
+  width: 100%; min-height: 0; max-width: 210mm;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-filldoc, .crisp-filldoc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/fillsheet.css

@@ -0,0 +1,29 @@
+.crisp-fillsheet {
+  display: grid; grid-template-columns: var(--crisp-fillsheet-cols); grid-template-rows: var(--crisp-fillsheet-rows); position: relative; overflow: auto; max-width: 100%; box-sizing: border-box; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); border-radius: 0; border: 1px solid var(--crisp-border-default); user-select: none; -webkit-user-select: none;
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-fillsheet-cell { position: relative; display: flex; align-items: flex-start; min-width: 0; padding-inline: var(--crisp-space-3); padding-block: var(--crisp-space-3); border-inline-end: 1px solid var(--crisp-border-default); border-block-end: 1px solid var(--crisp-border-default); background: var(--crisp-bg-surface); white-space: pre-wrap; overflow-wrap: break-word; line-height: 20px; cursor: cell; }
+    & .crisp-fillsheet-cell[aria-readonly] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-fillsheet-cell:last-child { border-inline-end: none; }
+    & > div:last-child .crisp-fillsheet-cell { border-block-end: none; }
+    & .crisp-fillsheet-cell[data-align="end"] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    &[data-multi] .crisp-fillsheet-cell[data-range] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    &[data-keynav] .crisp-fillsheet-cell[data-selected] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); box-shadow: inset 0 -2px 0 var(--crisp-fg-primary); }
+    & .crisp-fillsheet-cell[data-editing] { background: var(--crisp-bg-surface); }
+    & .crisp-fillsheet-colresize { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; width: 5px; cursor: col-resize; touch-action: none; }
+    & .crisp-fillsheet-rowresize { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 3; height: 5px; cursor: row-resize; touch-action: none; }
+    & .crisp-fillsheet-colresize:hover { background: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-rowresize:hover { background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-editor { display: block; flex-grow: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; line-height: 20px; color: inherit; resize: none; user-select: text; -webkit-user-select: text; overflow: hidden; }
+    & .crisp-fillsheet-select .crisp-select-trigger { width: 100%; height: 100%; padding: 0; border: none; background: transparent; box-shadow: none; font: inherit; color: inherit; }
+    & .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open] { background: transparent; box-shadow: none; }
+    & .crisp-fillsheet-select .crisp-select-chevron { display: none; }
+}
+.crisp-fillsheet--surface_panel {
+  
+}
+.crisp-fillsheet--surface_paper {
+  box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+}
+.crisp-fillsheet--surface_bare {
+  border: none;
+}

package/dist/fillsheet.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface FillsheetVariants {
+  surface?: "panel" | "paper" | "bare";
+}
+
+export declare const fillsheetRecipe: RecipeFn<{ surface: { panel: string; paper: string; bare: string } }>;

package/dist/fillsheet.layered.css

@@ -0,0 +1,31 @@
+@layer crisp-components {
+.crisp-fillsheet {
+  display: grid; grid-template-columns: var(--crisp-fillsheet-cols); grid-template-rows: var(--crisp-fillsheet-rows); position: relative; overflow: auto; max-width: 100%; box-sizing: border-box; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); border-radius: 0; border: 1px solid var(--crisp-border-default); user-select: none; -webkit-user-select: none;
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-fillsheet-cell { position: relative; display: flex; align-items: flex-start; min-width: 0; padding-inline: var(--crisp-space-3); padding-block: var(--crisp-space-3); border-inline-end: 1px solid var(--crisp-border-default); border-block-end: 1px solid var(--crisp-border-default); background: var(--crisp-bg-surface); white-space: pre-wrap; overflow-wrap: break-word; line-height: 20px; cursor: cell; }
+    & .crisp-fillsheet-cell[aria-readonly] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-fillsheet-cell:last-child { border-inline-end: none; }
+    & > div:last-child .crisp-fillsheet-cell { border-block-end: none; }
+    & .crisp-fillsheet-cell[data-align="end"] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    &[data-multi] .crisp-fillsheet-cell[data-range] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    &[data-keynav] .crisp-fillsheet-cell[data-selected] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); box-shadow: inset 0 -2px 0 var(--crisp-fg-primary); }
+    & .crisp-fillsheet-cell[data-editing] { background: var(--crisp-bg-surface); }
+    & .crisp-fillsheet-colresize { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; width: 5px; cursor: col-resize; touch-action: none; }
+    & .crisp-fillsheet-rowresize { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 3; height: 5px; cursor: row-resize; touch-action: none; }
+    & .crisp-fillsheet-colresize:hover { background: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-rowresize:hover { background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-editor { display: block; flex-grow: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; line-height: 20px; color: inherit; resize: none; user-select: text; -webkit-user-select: text; overflow: hidden; }
+    & .crisp-fillsheet-select .crisp-select-trigger { width: 100%; height: 100%; padding: 0; border: none; background: transparent; box-shadow: none; font: inherit; color: inherit; }
+    & .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open] { background: transparent; box-shadow: none; }
+    & .crisp-fillsheet-select .crisp-select-chevron { display: none; }
+}
+.crisp-fillsheet--surface_panel {
+  
+}
+.crisp-fillsheet--surface_paper {
+  box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+}
+.crisp-fillsheet--surface_bare {
+  border: none;
+}
+}