@crisp-ui-kit/crisp 0.5.0 → 0.7.1

package/dist/cjs/product/authshell/authshell.recipe.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.authshellRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Attio's welcome/auth surface (app.attio.com/welcome/*) — measured live,
+// 2026-09-15. A centered page frame holding a two-pane card: the form on the
+// left, an optional product preview on the right, with an optional top
+// progress bar and a footer under the card. Every value below is measured
+// from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
+// at the container query below) — Attio drops the pane in JS somewhere between a
+// measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
+const config = (0, core_1.defineRecipe)({
+    name: "authshell",
+    base: `min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
+    background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${tokens_1.contract.borderDefault}; }
+    & .authshell-progress-fill { height: 2px; background: ${tokens_1.contract.fgPrimary}; border-radius: 4px; transition: width .2s; }
+
+    & .authshell-logo { margin-top: ${tokens_1.contract.space["8"]}; height: 24px; display: flex; align-items: center; }
+
+    & .authshell-card { margin-top: ${tokens_1.contract.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${tokens_1.contract.borderSubtle}; overflow: hidden; }
+
+    & .authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+
+    & .authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${tokens_1.contract.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${tokens_1.contract.bgSubtle} 0%, transparent) 0%, ${tokens_1.contract.bgSubtle} 100%); pointer-events: none; }
+
+    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["8"]}; align-items: center; }
+
+    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; align-self: stretch; }
+
+    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+
+    & .authshell-footer { margin-top: ${tokens_1.contract.space["6"]}; display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; line-height: 16px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .authshell-footer a { color: inherit; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; }
+
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
+       hairline ring instead of elevation.field's soft glow, and a 36px (not
+       40px) submit. Scoped to .authshell-body so a consumer keeps using
+       crisp's Input / FormField / Button and gets the auth treatment for free. */
+    & .authshell-body .formfield-label { font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); padding-inline-start: ${tokens_1.contract.space["1"]}; }
+    & .authshell-body .formfield { gap: ${tokens_1.contract.space["1"]}; }
+    & .authshell-body .input { height: 34px; padding-inline: ${tokens_1.contract.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    /* Same three-layer brand shadow as Button's primary intent, but the auth
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
+       the in-app button's rgba(255,255,255,0.07) highlight. */
+    & .authshell-body .button { height: 36px; padding-inline: ${tokens_1.contract.space["3"]}; border-radius: 10px; }
+    & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+
+    /* Attio drops the preview pane in JS on narrow viewports (measured: two
+       panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
+       that bracket, not a measured value. A CONTAINER query, not a media
+       query: the shell is embedded in the docs inside an ~800px column, where
+       a viewport query would keep the 1130px card and overflow it. Asking the
+       shell's own width is what "there isn't room for the preview" means. */
+    container-type: inline-size;
+    @container (max-width: 1200px) { & .authshell-preview { display: none; } }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.authshellRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/authshell/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.authshellRecipe = exports.AuthShell = void 0;
+var authshell_1 = require("./authshell");
+Object.defineProperty(exports, "AuthShell", { enumerable: true, get: function () { return authshell_1.AuthShell; } });
+var authshell_recipe_1 = require("./authshell.recipe");
+Object.defineProperty(exports, "authshellRecipe", { enumerable: true, get: function () { return authshell_recipe_1.authshellRecipe; } });

package/dist/cjs/product/board/board.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Board = Board;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const board_recipe_1 = require("./board.recipe");
+/**
+ * A kanban board with native drag-and-drop between columns. Cards are
+ * `draggable`; dropping one on a column reparents it via `onCardsChange`
+ * (the parent owns the cards, so the move is a controlled state update).
+ * Measured from Attio's Deals pipeline.
+ */
+function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, ...rest }) {
+    const [dragId, setDragId] = React.useState(null);
+    const [overCol, setOverCol] = React.useState(null);
+    const move = (cardId, toColumn) => {
+        const card = cards.find((c) => c.id === cardId);
+        if (!card || card.columnId === toColumn)
+            return;
+        onCardsChange?.(cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumn } : c)));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, board_recipe_1.boardRecipe)({ className }), ...rest, children: columns.map((col) => {
+            const colCards = cards.filter((c) => c.columnId === col.id);
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
+                    if (!dragId)
+                        return;
+                    e.preventDefault();
+                    setOverCol(col.id);
+                }, onDragLeave: (e) => {
+                    if (!e.currentTarget.contains(e.relatedTarget)) {
+                        setOverCol((v) => (v === col.id ? null : v));
+                    }
+                }, onDrop: (e) => {
+                    e.preventDefault();
+                    if (dragId)
+                        move(dragId, col.id);
+                    setDragId(null);
+                    setOverCol(null);
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "board-col-header", children: [col.accent && ((0, jsx_runtime_1.jsx)("span", { className: "board-col-dot", style: { background: col.accent } })), (0, jsx_runtime_1.jsx)("span", { className: "board-col-title", children: col.title }), (0, jsx_runtime_1.jsx)("span", { className: "board-col-count", children: colCards.length }), onNewCard && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "board-col-add", "aria-label": `Add to ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "board-col-body", children: [onNewCard && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => ((0, jsx_runtime_1.jsx)("div", { className: "board-card", draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
+                                    setDragId(null);
+                                    setOverCol(null);
+                                }, children: renderCard(card) }, card.id)))] })] }, col.id));
+        }) }));
+}
+Board.displayName = "Board";

package/dist/cjs/product/board/board.recipe.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boardRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A kanban board — measured from Attio's Deals pipeline: horizontally scrolling
+// columns (dot + title + count header, a "New" button, a stack of draggable
+// cards), with the hovered drop column highlighted.
+const config = (0, core_1.defineRecipe)({
+    name: "board",
+    base: `display: flex; gap: ${tokens_1.contract.space["3"]}; height: 100%; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; overflow-x: auto; align-items: flex-start; font-family: ${tokens_1.contract.font.sans};
+    & .board-col { display: flex; flex-direction: column; width: 280px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
+    & .board-col-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
+    & .board-col-dot { width: 9px; height: 9px; border-radius: ${tokens_1.contract.radius.full}; flex-shrink: 0; }
+    & .board-col-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .board-col-count { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .board-col-add:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .board-col-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-height: 48px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; overflow-y: auto; transition: background 0.12s; }
+    & .board-col[data-over] .board-col-body { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
+    & .board-newcard { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04); cursor: grab; }
+    & .board-card:active { cursor: grabbing; }
+    & .board-card[data-dragging] { opacity: 0.4; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.boardRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/board/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boardRecipe = exports.Board = void 0;
+var board_1 = require("./board");
+Object.defineProperty(exports, "Board", { enumerable: true, get: function () { return board_1.Board; } });
+var board_recipe_1 = require("./board.recipe");
+Object.defineProperty(exports, "boardRecipe", { enumerable: true, get: function () { return board_recipe_1.boardRecipe; } });

package/dist/cjs/product/command/command.js

@@ -0,0 +1,238 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCommandItems = void 0;
+exports.Command = Command;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const combobox = __importStar(require("@zag-js/combobox"));
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const kbd_1 = require("../../components/kbd");
+const command_recipe_1 = require("./command.recipe");
+const IconHome = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.House, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconTasks = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconCompanies = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconPeople = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconDeals = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleDollarSign, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconNewPerson = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconNewTask = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.ListTodo, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconSearch = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+const IconSettings = () => ((0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }));
+/** crisp's own generic command set (not copied from any product). */
+exports.defaultCommandItems = [
+    {
+        id: "go-home",
+        label: "Go to Home",
+        icon: IconHome,
+        group: "Navigation",
+        shortcut: ["G", "H"],
+    },
+    {
+        id: "go-tasks",
+        label: "Go to Tasks",
+        icon: IconTasks,
+        group: "Navigation",
+        shortcut: ["G", "T"],
+    },
+    {
+        id: "go-companies",
+        label: "Go to Companies",
+        icon: IconCompanies,
+        group: "Navigation",
+        shortcut: ["G", "C"],
+    },
+    {
+        id: "go-people",
+        label: "Go to People",
+        icon: IconPeople,
+        group: "Navigation",
+        shortcut: ["G", "P"],
+    },
+    {
+        id: "go-deals",
+        label: "Go to Deals",
+        icon: IconDeals,
+        group: "Navigation",
+        shortcut: ["G", "D"],
+    },
+    {
+        id: "new-company",
+        label: "New company",
+        icon: IconCompanies,
+        group: "Create",
+        keywords: ["create", "add"],
+    },
+    {
+        id: "new-person",
+        label: "New person",
+        icon: IconNewPerson,
+        group: "Create",
+        keywords: ["create", "add"],
+    },
+    {
+        id: "new-task",
+        label: "New task",
+        icon: IconNewTask,
+        group: "Create",
+        keywords: ["create", "add"],
+    },
+    {
+        id: "search-records",
+        label: "Search records…",
+        icon: IconSearch,
+        group: "Actions",
+        keywords: ["find"],
+    },
+    {
+        id: "settings",
+        label: "Settings",
+        icon: IconSettings,
+        group: "Actions",
+        keywords: ["preferences"],
+    },
+];
+// A globally unique (process-lifetime) id per mounted instance, rather than
+// React's tree-position-based useId. The dialog/combobox machines defer
+// their outside-click/focus dismissal listeners by a frame, so a rapid
+// unmount+remount that reused useId's tree-relative ids could let a stale
+// registration from a just-unmounted instance resolve (by id) to a new
+// instance's DOM node.
+let instanceCounter = 0;
+function useCommandInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-command-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * ⌘K command palette. Composes a Zag dialog machine (modal, focus trap,
+ * scroll lock) with a Zag combobox machine (filterable, keyboard-navigable
+ * option list) so keyboard/focus correctness comes from the machines, not
+ * hand-rolled event handling.
+ */
+function Command({ open, onOpenChange, items = exports.defaultCommandItems, placeholder = "Search actions and records…", "aria-label": ariaLabel = "Command palette", navigateLabel = "Navigate", selectLabel = "Select", emptyLabel = "No matching commands", query: queryProp, onQueryChange, filterItems = true, }) {
+    const instanceId = useCommandInstanceId();
+    const dialogId = `${instanceId}-dialog`;
+    const comboId = `${instanceId}-combobox`;
+    const inputRef = React.useRef(null);
+    const [internalQuery, setInternalQuery] = React.useState("");
+    const query = queryProp !== undefined ? queryProp : internalQuery;
+    const setQuery = React.useCallback((next) => {
+        onQueryChange?.(next);
+        if (queryProp === undefined)
+            setInternalQuery(next);
+    }, [onQueryChange, queryProp]);
+    const dialogService = (0, react_1.useMachine)(dialog.machine, {
+        id: dialogId,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        initialFocusEl: () => inputRef.current,
+        "aria-label": ariaLabel,
+    });
+    const dlg = dialog.connect(dialogService, react_1.normalizeProps);
+    const filteredItems = React.useMemo(() => {
+        if (!filterItems)
+            return items;
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return items;
+        return items.filter((item) => item.label.toLowerCase().includes(q) ||
+            item.keywords?.some((k) => k.toLowerCase().includes(q)));
+    }, [items, query, filterItems]);
+    const collection = React.useMemo(() => combobox.collection({
+        items: filteredItems,
+        itemToValue: (item) => item.id,
+        itemToString: (item) => item.label,
+    }), [filteredItems]);
+    const comboService = (0, react_1.useMachine)(combobox.machine, {
+        id: comboId,
+        collection,
+        // The list is always visible while the dialog is open (not a floating
+        // popover) — the combobox is only used for its keyboard/filter machine.
+        open: true,
+        // The dialog already owns escape/outside-click dismissal; avoid a
+        // second competing dismissable layer.
+        disableLayer: true,
+        inputBehavior: "autohighlight",
+        closeOnSelect: false,
+        // Always driven from our own `query` (internal state, or the caller's
+        // controlled prop) so a caller-driven query update reaches the input,
+        // not just the reverse — the sole source of truth is `query`, not this
+        // machine's own copy.
+        inputValue: query,
+        onInputValueChange(details) {
+            setQuery(details.inputValue);
+        },
+        onSelect(details) {
+            const item = items.find((candidate) => candidate.id === details.itemValue);
+            item?.onSelect?.();
+            onOpenChange(false);
+        },
+    });
+    const combo = combobox.connect(comboService, react_1.normalizeProps);
+    // Reset the query/highlight each time the palette opens, so it never
+    // reopens showing a stale filter from the previous session.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only re-run when `open` flips — `combo` is a fresh object every render.
+    React.useLayoutEffect(() => {
+        if (!open)
+            return;
+        setQuery("");
+        combo.setInputValue("", "script");
+        combo.clearHighlightValue();
+    }, [open]);
+    // The footer's primary button mirrors the currently highlighted row (Attio
+    // shows the active action there and runs it on ↵ / click).
+    const highlightedItem = filteredItems.find((item) => item.id === combo.highlightedValue) ??
+        filteredItems[0];
+    const runItem = (item) => {
+        if (!item)
+            return;
+        item.onSelect?.();
+        onOpenChange(false);
+    };
+    if (!dlg.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, command_recipe_1.commandRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...dlg.getBackdropProps(), className: "command-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...dlg.getPositionerProps(), className: "command-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...dlg.getContentProps(), className: "command-content", children: (0, jsx_runtime_1.jsxs)("div", { className: "command-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "command-control", children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...combo.getInputProps(), className: "command-input", placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)("div", { ...combo.getContentProps(), className: "command-list", children: filteredItems.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "command-empty", children: emptyLabel })) : (filteredItems.map((item, i) => {
+                                        const Icon = item.icon;
+                                        const showGroup = item.group && item.group !== filteredItems[i - 1]?.group;
+                                        return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [showGroup && ((0, jsx_runtime_1.jsx)("div", { className: "command-group-label", "aria-hidden": "true", children: item.group })), (0, jsx_runtime_1.jsxs)("div", { ...combo.getItemProps({ item }), className: "command-item", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "command-item-label", children: item.label }), item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "command-item-shortcut", children: item.shortcut.map((key) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: key }, key))) }))] })] }, item.id));
+                                    })) }), (0, jsx_runtime_1.jsxs)("div", { className: "command-footer", children: [(0, jsx_runtime_1.jsxs)("span", { className: "command-footer-nav", children: [(0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2191" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: "\u2193" }), navigateLabel] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "command-footer-action", disabled: !highlightedItem, onClick: () => runItem(highlightedItem), children: [(0, jsx_runtime_1.jsx)("span", { className: "command-footer-action-label", children: highlightedItem?.label ?? selectLabel }), (0, jsx_runtime_1.jsx)("span", { className: "command-footer-key", children: "\u21B5" })] })] })] }) }) })] }) }));
+}

package/dist/cjs/product/command/command.recipe.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commandRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+const config = (0, core_1.defineRecipe)({
+    name: "command",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans}
+  ; & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+  & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; }
+  & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+  & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
+  & .command-control { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgMuted}; }
+  & .command-control svg { flex-shrink: 0; }
+  & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.xl}; color: ${tokens_1.contract.fgPrimary}; }
+  & .command-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+  & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2.5"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px}; }
+  & .command-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+  & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding-inline: ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.xl}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; }
+  & .command-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+  & .command-item[data-highlighted] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
+  & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; }
+  & .command-group-label { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+  & .command-list > .command-group-label:first-child { padding-top: ${tokens_1.contract.space["1"]}; }
+  & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 ${tokens_1.contract.space["2.5"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+  & .command-footer-nav { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+  & .command-footer-action { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; max-width: 60%; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+  & .command-footer-action:disabled { opacity: 0.5; cursor: default; }
+  & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${tokens_1.contract.text.xs}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.commandRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: {
+        content: {
+            maxWidth: "720px",
+            borderRadius: "16px",
+        },
+    },
+});
+exports.default = config;

package/dist/cjs/product/command/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commandRecipe = exports.defaultCommandItems = exports.Command = void 0;
+var command_1 = require("./command");
+Object.defineProperty(exports, "Command", { enumerable: true, get: function () { return command_1.Command; } });
+Object.defineProperty(exports, "defaultCommandItems", { enumerable: true, get: function () { return command_1.defaultCommandItems; } });
+var command_recipe_1 = require("./command.recipe");
+Object.defineProperty(exports, "commandRecipe", { enumerable: true, get: function () { return command_recipe_1.commandRecipe; } });

package/dist/cjs/product/entitycard/entitycard.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityCard = EntityCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const entitycard_recipe_1 = require("./entitycard.recipe");
+/**
+ * A note / entity card — measured from Attio's Notes grid. A bordered white
+ * card with an author row, a title, a clamped excerpt, and a footer row with a
+ * right-aligned date. Rendered as a button so the whole card is clickable.
+ */
+function EntityCard({ author, title, excerpt, footer, date, onClick, "aria-label": ariaLabel, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, entitycard_recipe_1.entitycardRecipe)({ className }), ...rest, onClick: onClick, "aria-label": ariaLabel, children: [author != null && (0, jsx_runtime_1.jsx)("span", { className: "entitycard-author", children: author }), (0, jsx_runtime_1.jsx)("span", { className: "entitycard-title", children: title }), excerpt != null && (0, jsx_runtime_1.jsx)("span", { className: "entitycard-excerpt", children: excerpt }), (0, jsx_runtime_1.jsx)("span", { className: "entitycard-spacer" }), (footer != null || date != null) && ((0, jsx_runtime_1.jsxs)("span", { className: "entitycard-foot", children: [footer, date != null && (0, jsx_runtime_1.jsx)("span", { className: "entitycard-date", children: date })] }))] }));
+}
+EntityCard.displayName = "EntityCard";

package/dist/cjs/product/entitycard/entitycard.recipe.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.entitycardRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A note / entity card — measured from Attio's Notes grid: a bordered white card
+// with an author row (avatar + name) at the top, a title, a clamped excerpt,
+// and a footer row (avatar + name … date). The whole card is clickable.
+const config = (0, core_1.defineRecipe)({
+    name: "entitycard",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-width: 0; text-align: start;
+    padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.xl};
+    background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; color: ${tokens_1.contract.fgPrimary};
+    font-family: ${tokens_1.contract.font.sans}; cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease;
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    &:hover { box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}, 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }
+    &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
+
+    & .entitycard-author { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .entitycard-title { margin-top: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.1px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .entitycard-excerpt { margin-top: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; color: ${tokens_1.contract.fgMuted}; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+    & .entitycard-spacer { flex: 1; min-height: ${tokens_1.contract.space["3"]}; }
+    & .entitycard-foot { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding-top: ${tokens_1.contract.space["2.5"]}; margin-top: ${tokens_1.contract.space["1"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; }
+    & .entitycard-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${tokens_1.contract.fgPrimary}; }
+    & .entitycard-date { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.entitycardRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/entitycard/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.entitycardRecipe = exports.EntityCard = void 0;
+var entitycard_1 = require("./entitycard");
+Object.defineProperty(exports, "EntityCard", { enumerable: true, get: function () { return entitycard_1.EntityCard; } });
+var entitycard_recipe_1 = require("./entitycard.recipe");
+Object.defineProperty(exports, "entitycardRecipe", { enumerable: true, get: function () { return entitycard_recipe_1.entitycardRecipe; } });