@crisp-ui-kit/crisp 0.34.0 → 0.36.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/recordpanel/recordpanel.js

@@ -26,7 +26,8 @@ function FieldValue({ col, row, emptyLabel, }) {
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", detailsLabel = "Details", emptyLabel = "Empty", ...rest }) {
+export function RecordPanel({ record, columns, onClose, className, closeLabel = "Close panel", title, detailsLabel = "Details", emptyLabel = "Empty", footer, ...rest }) {
+    const titleId = React.useId();
     // close on Escape while open
     React.useEffect(() => {
         if (!record)
@@ -42,6 +43,7 @@ export function RecordPanel({ record, columns, onClose, className, closeLabel =
         ? record[entityCol.key]
         : undefined;
     const fields = columns.filter((c) => c.type !== "entity");
-    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-label": entity?.name ?? "Record", children: [_jsxs("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { className: "crisp-recordpanel-title", children: entity?.name ?? "Record" }), _jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [_jsx("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsx("span", { className: "crisp-recordpanel-field-value", children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })] }, col.key)))] })] }));
+    const heading = title ?? entity?.name ?? "Record";
+    return (_jsxs("div", { className: recordpanelRecipe({ className }), ...rest, role: "dialog", "aria-labelledby": titleId, children: [_jsxs("div", { className: "crisp-recordpanel-header", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpanel-fav", src: entity.avatar, alt: "" })) : entity ? (_jsx(Avatar, { size: "md", shape: "rounded", tone: "brand", children: entity.name.charAt(0) })) : null, _jsx("span", { id: titleId, className: "crisp-recordpanel-title", children: heading }), _jsx("button", { type: "button", className: "crisp-recordpanel-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpanel-body", children: [_jsx("div", { className: "crisp-recordpanel-sectionlabel", children: detailsLabel }), fields.map((col) => (_jsxs("div", { className: "crisp-recordpanel-field", children: [_jsxs("span", { className: "crisp-recordpanel-field-label", children: [col.icon ? _jsx(col.icon, { size: 15, strokeWidth: 1.75 }) : null, col.label] }), _jsx("span", { className: "crisp-recordpanel-field-value", children: _jsx(FieldValue, { col: col, row: record, emptyLabel: emptyLabel }) })] }, col.key)))] }), footer != null && (_jsx("div", { className: "crisp-recordpanel-footer", children: footer }))] }));
 }
 RecordPanel.displayName = "RecordPanel";

package/dist/esm/product/recordpanel/recordpanel.recipe.js

@@ -36,6 +36,14 @@ const config = defineRecipe({
     ${recordTagCss}
     & .crisp-recordpanel-link { color: ${c.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-link:hover { text-decoration: underline; }
+
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the
+       header's own measured values rather than inventing new ones -- the
+       same horizontal inset (space.3), the same hairline border token
+       (borderSubtle, flipped to border-top since this sits at the opposite
+       edge), and the header/body gap (space.2) for its own vertical padding
+       and for spacing between whatever it's given. */
+    & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["3"]}; border-top: 1px solid ${c.borderSubtle}; }
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/product/sidebar/sidebar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Building2, ChartNoAxesColumn, ChevronDown, CircleDollarSign, FileText, House, Inbox, LayoutGrid, Mail, MessageSquare, PanelLeft, Phone, Search, Send, SquareCheck, User, UserPlus, Users, Waypoints, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
@@ -81,8 +81,14 @@ export const ATTIO_SIDEBAR_FOOTER = {
 function SectionHeader({ label, open, onToggle, }) {
     return (_jsxs("button", { type: "button", className: "crisp-sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [_jsx(IconChevronMini, {}), _jsx("span", { children: label })] }));
 }
-export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
-    const [collapsedSections, setCollapsedSections] = React.useState(() => new Set());
+export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, groups, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+    // Seeded once, on mount, from whatever groups start collapsed — not
+    // reactive to `groups` changing later, matching every other piece of
+    // this component's state (recordsSection/listsSection/chatsSection have
+    // never supported a starting-collapsed prop at all).
+    const [collapsedSections, setCollapsedSections] = React.useState(() => new Set(groups
+        ?.filter((g) => g.defaultCollapsed)
+        .map((g) => g.key ?? g.label)));
     const [commandOpen, setCommandOpen] = React.useState(false);
     React.useEffect(() => {
         function handleKeyDown(event) {
@@ -107,6 +113,13 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
             return next;
         });
     }, []);
-    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "crisp-sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "crisp-sidebar-search-label", children: searchLabel }), _jsx("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsx("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), _jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) }), _jsxs("div", { className: "crisp-sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsxs("div", { className: "crisp-sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "crisp-sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "crisp-sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "crisp-sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "crisp-sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "crisp-sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "crisp-sidebar-search-label", children: searchLabel }), _jsx("span", { className: "crisp-sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsx("div", { className: "crisp-sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), groups ? (
+            // #325: navigation as data, reusing the exact section markup/
+            // recipe above — SectionHeader + .crisp-sidebar-section — instead
+            // of the three fixed Attio sections.
+            groups.map((group) => {
+                const groupKey = group.key ?? group.label;
+                return (_jsxs(React.Fragment, { children: [_jsx(SectionHeader, { label: group.label, open: !collapsedSections.has(groupKey), onToggle: () => toggleSection(groupKey) }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has(groupKey) ? "" : undefined, children: group.items.map((item) => (_jsx(NavItem, { href: item.href ?? "#", active: item.active, icon: item.icon ? _jsx(item.icon, {}) : undefined, trailing: item.count, onClick: item.onSelect, children: item.label }, item.href ?? item.label))) })] }, groupKey));
+            })) : (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "crisp-sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "crisp-sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) })] })), _jsxs("div", { className: "crisp-sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "crisp-sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "crisp-sidebar-divider" }), _jsxs("div", { className: "crisp-sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
 });
 Sidebar.displayName = "Sidebar";

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 } }>;