@crisp-ui-kit/crisp 0.33.5 → 0.35.0

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

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.fillsheetRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+/**
+ * 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 = tokens_1.contract.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, ${tokens_1.contract.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 = (0, core_1.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: tokens_1.contract.font.sans,
+        fontSize: tokens_1.contract.text.md,
+        color: tokens_1.contract.fgPrimary,
+        background: tokens_1.contract.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: tokens_1.contract.space["3"],
+                paddingBlock: tokens_1.contract.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: tokens_1.contract.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: tokens_1.contract.bgRaised, color: tokens_1.contract.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 ${tokens_1.contract.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: tokens_1.contract.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), ${tokens_1.contract.fgPrimary} calc(50% - 1px), ${tokens_1.contract.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), ${tokens_1.contract.fgPrimary} calc(50% - 1px), ${tokens_1.contract.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: tokens_1.elevation.floating },
+            // No frame at all.
+            bare: { border: "none" },
+        },
+    },
+    defaultVariants: { surface: "panel" },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.fillsheetRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toTSV = exports.toMarkdown = exports.toHTML = exports.toCSV = exports.fillsheetRecipe = exports.FillSheet = void 0;
+var fillsheet_1 = require("./fillsheet");
+Object.defineProperty(exports, "FillSheet", { enumerable: true, get: function () { return fillsheet_1.FillSheet; } });
+var fillsheet_recipe_1 = require("./fillsheet.recipe");
+Object.defineProperty(exports, "fillsheetRecipe", { enumerable: true, get: function () { return fillsheet_recipe_1.fillsheetRecipe; } });
+var serialize_1 = require("./serialize");
+Object.defineProperty(exports, "toCSV", { enumerable: true, get: function () { return serialize_1.toCSV; } });
+Object.defineProperty(exports, "toHTML", { enumerable: true, get: function () { return serialize_1.toHTML; } });
+Object.defineProperty(exports, "toMarkdown", { enumerable: true, get: function () { return serialize_1.toMarkdown; } });
+Object.defineProperty(exports, "toTSV", { enumerable: true, get: function () { return serialize_1.toTSV; } });

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

@@ -0,0 +1,82 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toTSV = toTSV;
+exports.toCSV = toCSV;
+exports.toHTML = toHTML;
+exports.toMarkdown = toMarkdown;
+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.
+ */
+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. */
+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.
+ */
+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.
+ */
+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/cjs/index.js

@@ -40,6 +40,8 @@ __exportStar(require("./components/donutchart"), exports);
 __exportStar(require("./components/drawer"), exports);
 __exportStar(require("./components/emptystate"), exports);
 __exportStar(require("./components/fileupload"), exports);
+__exportStar(require("./components/filldoc"), exports);
+__exportStar(require("./components/fillsheet"), exports);
 __exportStar(require("./components/formfield"), exports);
 __exportStar(require("./components/input"), exports);
 __exportStar(require("./components/kbd"), exports);

package/dist/cjs/product/recordpage/recordpage.js

@@ -392,7 +392,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.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/datatable.css

@@ -43,6 +43,8 @@
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .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: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
@@ -66,7 +68,12 @@
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -79,10 +86,11 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }

package/dist/datatable.layered.css

@@ -44,6 +44,8 @@
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .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: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
@@ -67,7 +69,12 @@
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -80,10 +87,11 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }