@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/cjs/product/shortcutssheet/shortcutssheet.js

@@ -0,0 +1,125 @@
+"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.defaultShortcutSections = void 0;
+exports.ShortcutsSheet = ShortcutsSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const drawer_1 = require("../../components/drawer");
+const kbd_1 = require("../../components/kbd");
+const core_1 = require("../../core");
+/** The physical Enter/Return key's printed glyph — not a reading-direction
+ *  indicator (a real keyboard prints the same ↵ shape under any locale), so
+ *  unlike `LogOut` elsewhere it is deliberately left unmirrored (excused in
+ *  `build/spec-check.mjs`'s own RTL icon-mirroring ALLOW list). */
+const enterKey = () => (0, jsx_runtime_1.jsx)(lucide_react_1.CornerDownLeft, { size: 16, strokeWidth: 1.75 });
+/**
+ * Attio's own canonical keyboard-shortcut list (crisp#615), live-measured
+ * off app.attio.com/techpartners' "Keyboard shortcuts" panel (Help →
+ * "Shortcuts") — 34 rows across 4 sections. The issue's own quoted table
+ * collapsed a few of these ("Navigate to the cell above/right/below/left",
+ * "Go to next/previous cell") into one row each; the live panel renders
+ * them as separate rows, which is what this list follows.
+ */
+exports.defaultShortcutSections = [
+    {
+        label: "General",
+        rows: [
+            { description: "Open quick actions", steps: [["⌘", "K"]] },
+            { description: "Open search", steps: [["/"]] },
+            { description: "Create a new note", steps: [["N"]] },
+            { description: "Create a new entry", steps: [["E"]] },
+            { description: "Create a new task", steps: [["T"]] },
+            { description: "Create a new email", steps: [["C"]] },
+            { description: "Go to home page", steps: [["G"], ["H"]] },
+            { description: "Go to tasks page", steps: [["G"], ["T"]] },
+            { description: "Go to all notes page", steps: [["G"], ["N"]] },
+            { description: "Go to all people page", steps: [["G"], ["P"]] },
+            { description: "Go to all companies page", steps: [["G"], ["C"]] },
+            { description: "Go to email drafts page", steps: [["G"], ["E"]] },
+            { description: "Toggle sidebar", steps: [["⌘", "."]] },
+            { description: "Navigate up", steps: [["↑"]] },
+            { description: "Navigate down", steps: [["↓"]] },
+        ],
+    },
+    {
+        label: "Record page",
+        rows: [
+            { description: "Go to next tab", steps: [["⌥", "→"]] },
+            { description: "Go to previous tab", steps: [["⌥", "←"]] },
+        ],
+    },
+    {
+        label: "Table view",
+        rows: [
+            { description: "Navigate to the cell above", steps: [["↑"]] },
+            { description: "Navigate to the cell to the right", steps: [["→"]] },
+            { description: "Navigate to the cell below", steps: [["↓"]] },
+            { description: "Navigate to the cell to the left", steps: [["←"]] },
+            { description: "Jump to bottom", steps: [["⌘", "↓"]] },
+            { description: "Jump to top", steps: [["⌘", "↑"]] },
+            { description: "Select/deselect current row", steps: [["⇧", "␣"]] },
+            { description: "Group select rows up", steps: [["⇧", "↑"]] },
+            { description: "Group select rows down", steps: [["⇧", "↓"]] },
+            { description: "Group select to top", steps: [["⌘", "⇧", "↑"]] },
+            { description: "Group select to bottom", steps: [["⌘", "⇧", "↓"]] },
+            {
+                description: "Open record page for current entry",
+                steps: [["⌘", enterKey()]],
+            },
+            { description: "Select/deselect all rows", steps: [["⌘", "A"]] },
+            { description: "Go to next cell", steps: [["⇥"]] },
+            { description: "Go to previous cell", steps: [["⇧", "⇥"]] },
+            { description: "Edit cell / go to next cell", steps: [[enterKey()]] },
+        ],
+    },
+    {
+        label: "Help",
+        rows: [{ description: "Open help drawer", steps: [["?"]] }],
+    },
+];
+/**
+ * Attio's "Keyboard shortcuts" panel (crisp#615, parity row P-106) — a
+ * `Drawer` narrowed to the measured 360px (Drawer's own default is 420px),
+ * listing `sections` grouped with a hairline-free 10px row rhythm and a
+ * 20px gap before each new section label.
+ */
+function ShortcutsSheet({ open, onOpenChange, sections = exports.defaultShortcutSections, title: titleProp, thenLabel: thenLabelProp, closeLabel, className, ...rest }) {
+    const title = (0, core_1.useCrispMessage)(titleProp, "Keyboard shortcuts");
+    const thenLabel = (0, core_1.useCrispMessage)(thenLabelProp, "then");
+    return ((0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: open, onOpenChange: onOpenChange, title: title, closeLabel: closeLabel, className: (0, core_1.cx)("crisp-shortcutssheet-panel", className), ...rest, children: (0, jsx_runtime_1.jsx)(drawer_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-body", children: sections.map((section) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-section-label", children: section.label }), section.rows.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-shortcutssheet-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-desc", children: row.description }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-keys", children: row.steps.map((step, stepIndex) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [stepIndex > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-shortcutssheet-then", children: thenLabel })), step.map((glyph, glyphIndex) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: glyph }, glyphIndex)))] }, stepIndex))) })] }, String(row.description))))] }, String(section.label)))) }) }) }));
+}
+ShortcutsSheet.displayName = "ShortcutsSheet";

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shortcutssheetRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Attio's "Keyboard shortcuts" panel (crisp#615), live-measured off
+// app.attio.com/techpartners — a second overlay reached from Help →
+// "Shortcuts": 360px wide (narrower than Drawer's own 420px default, hence
+// the width override below), 16px body padding (already Drawer's own
+// `crisp-drawer-body`, unchanged), rows 10px apart, a 20px gap before a new
+// section (expressed as the flex column's own 10px `gap` plus another 10px
+// on every section label but the first, rather than a second gap value),
+// section labels 12px/500, row descriptions 14px/500 — both the SAME
+// `color-mix(fgPrimary, 63%)` muted-text tint RecordPage's own notes already
+// established (crisp#871), and the "then" connector between a sequential
+// shortcut's two steps at 11px/500 in Kbd's own 50%-fgPrimary tint (the
+// same de-emphasis, on the same kind of supporting glyph).
+const config = (0, core_1.defineRecipe)({
+    name: "shortcutssheet",
+    base: "",
+    globalCss: `
+    /* Overrides Drawer's own 420px default (specificity: .crisp-drawer
+       .crisp-drawer-content.crisp-shortcutssheet-panel, higher than
+       Drawer's .crisp-drawer .crisp-drawer-content regardless of which
+       chunk of dist/styles.css concatenates first). */
+    .crisp-drawer .crisp-drawer-content.crisp-shortcutssheet-panel { width: 360px; }
+
+    .crisp-shortcutssheet-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2.5"]}; }
+    .crisp-shortcutssheet-section-label {
+      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);
+    }
+    .crisp-shortcutssheet-section-label:not(:first-child) { margin-top: ${tokens_1.contract.space["2.5"]}; }
+    .crisp-shortcutssheet-row { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["1"]}; }
+    .crisp-shortcutssheet-desc {
+      font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
+    }
+    .crisp-shortcutssheet-keys { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
+    .crisp-shortcutssheet-then {
+      font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent);
+    }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.shortcutssheetRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taskeditpopoverRecipe = exports.TaskEditPopover = void 0;
+var taskeditpopover_1 = require("./taskeditpopover");
+Object.defineProperty(exports, "TaskEditPopover", { enumerable: true, get: function () { return taskeditpopover_1.TaskEditPopover; } });
+var taskeditpopover_recipe_1 = require("./taskeditpopover.recipe");
+Object.defineProperty(exports, "taskeditpopoverRecipe", { enumerable: true, get: function () { return taskeditpopover_recipe_1.taskeditpopoverRecipe; } });

package/dist/cjs/product/taskeditpopover/taskeditpopover.js

@@ -0,0 +1,159 @@
+"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.TaskEditPopover = TaskEditPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const popover_1 = require("../../components/popover");
+const core_1 = require("../../core");
+const assigneepicker_1 = require("../assigneepicker/assigneepicker");
+const recordpicker_1 = require("../recordpicker/recordpicker");
+const taskeditpopover_recipe_1 = require("./taskeditpopover.recipe");
+/**
+ * A task's "Edit task" popover -- measured live on app.attio.com's Tasks
+ * page: a checkbox + editable title, then a chip row (due date / assigned /
+ * add record), a "more actions" kebab, and Cancel/Save. Composes
+ * `AssigneePicker` and `RecordPicker` (both crisp#626) behind their own
+ * chips, using the same core floating primitives `Popover` itself is built
+ * on rather than `Popover` directly (its content hardcodes a 360px max
+ * width, well under this popover's own measured 800px).
+ */
+function TaskEditPopover({ trigger, open: openProp, defaultOpen, onOpenChange, title, onTitleChange, done = false, onToggleDone, dueDateLabel, dueDatePicker, assignee = null, users = [], onAssigneeChange, linkedRecordCount = 0, recordCandidates = [], recordCandidatesLoading, onRecordQueryChange, onSelectRecord, menu, onCancel, onSave, headingLabel: headingLabelProp, closeLabel: closeLabelProp, dueDatePlaceholder: dueDatePlaceholderProp, assignLabel: assignLabelProp, assignedToLabel: assignedToLabelProp, addRecordLabel: addRecordLabelProp, linkedRecordLabel: linkedRecordLabelProp, moreActionsLabel: moreActionsLabelProp, cancelLabel: cancelLabelProp, cancelKeyLabel: cancelKeyLabelProp, saveLabel: saveLabelProp, className, }) {
+    const headingLabel = (0, core_1.useCrispMessage)(headingLabelProp, "Edit task");
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
+    const dueDatePlaceholder = (0, core_1.useCrispMessage)(dueDatePlaceholderProp, "Set due date");
+    const assignLabel = (0, core_1.useCrispMessage)(assignLabelProp, "Assign");
+    const assignedToLabel = (0, core_1.useCrispMessage)(assignedToLabelProp, "Assigned to");
+    const addRecordLabel = (0, core_1.useCrispMessage)(addRecordLabelProp, "Add record");
+    const linkedRecordLabel = (0, core_1.useCrispMessage)(linkedRecordLabelProp, linkedRecordCount === 1
+        ? "1 linked record"
+        : `${linkedRecordCount} linked records`);
+    const moreActionsLabel = (0, core_1.useCrispMessage)(moreActionsLabelProp, "More actions");
+    const cancelLabel = (0, core_1.useCrispMessage)(cancelLabelProp, "Cancel");
+    const cancelKeyLabel = (0, core_1.useCrispMessage)(cancelKeyLabelProp, "Esc");
+    const saveLabel = (0, core_1.useCrispMessage)(saveLabelProp, "Save");
+    const surfaceId = React.useId();
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [pos, setPos] = React.useState({});
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const place = () => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const { style } = (0, core_1.placeFloating)({
+            rect: el.getBoundingClientRect(),
+            align: "start",
+            gap: 6,
+            flipBelow: 300,
+            anchor: el,
+        });
+        setPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
+    React.useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        return (0, core_1.registerFloatingLayer)(contentRef.current);
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (contentRef.current?.contains(target))
+                return;
+            if ((0, core_1.isInsideLaterFloatingLayer)(target, contentRef.current))
+                return;
+            setOpen(false);
+            onCancel?.();
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open, setOpen, onCancel]);
+    const cancel = () => {
+        setOpen(false);
+        onCancel?.();
+    };
+    const save = () => {
+        setOpen(false);
+        onSave?.();
+    };
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? surfaceId : undefined,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: { display: "contents" }, children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, id: surfaceId, role: "dialog", "aria-label": headingLabel, className: (0, taskeditpopover_recipe_1.taskeditpopoverRecipe)({ className }), style: pos, onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                            e.preventDefault();
+                            cancel();
+                        }
+                        if (e.key === "Enter" &&
+                            e.metaKey === false &&
+                            e.ctrlKey === false &&
+                            e.target.tagName !== "TEXTAREA") {
+                            // Enter saves, same as Attio's own "Save ⏎" -- but never
+                            // steals it from a nested picker's own Enter-to-commit.
+                            if (!(0, core_1.isInsideLaterFloatingLayer)(e.target, contentRef.current)) {
+                                save();
+                            }
+                        }
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-header", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-taskeditpopover-heading", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheckBig, { size: 16, strokeWidth: 1.75 }), headingLabel] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-taskeditpopover-close", "aria-label": closeLabel, onClick: cancel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-body", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "crisp-taskeditpopover-check", checked: done, "aria-label": title, onChange: (e) => onToggleDone?.(e.target.checked) }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "crisp-taskeditpopover-title", value: title, onChange: (e) => onTitleChange?.(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-footer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-chips", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", "aria-label": dueDatePlaceholder, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 14, strokeWidth: 1.75 }), dueDateLabel ?? dueDatePlaceholder] }), children: dueDatePicker }), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", "aria-label": assignedToLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "@" }), assignee != null
+                                                        ? `${assignedToLabel} ${assignee.name}`
+                                                        : assignLabel] }), children: (0, jsx_runtime_1.jsx)(assigneepicker_1.AssigneePicker, { users: users, assignee: assignee, onAssigneeChange: onAssigneeChange }) }), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", "aria-label": addRecordLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2197" }), linkedRecordCount > 0
+                                                        ? linkedRecordLabel
+                                                        : addRecordLabel] }), children: (0, jsx_runtime_1.jsx)(recordpicker_1.RecordPicker, { records: recordCandidates, loading: recordCandidatesLoading, onQueryChange: onRecordQueryChange, onSelect: onSelectRecord }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskeditpopover-actions", children: [menu != null && ((0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "end", "aria-label": moreActionsLabel, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-taskeditpopover-kebab", "aria-label": moreActionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: menu })), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-cancel", onClick: cancel, children: [cancelLabel, (0, jsx_runtime_1.jsx)("kbd", { className: "crisp-taskeditpopover-key", children: cancelKeyLabel })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-taskeditpopover-save", onClick: save, children: [saveLabel, (0, jsx_runtime_1.jsx)("kbd", { className: "crisp-taskeditpopover-key", children: "\u23CE" })] })] })] })] }) }))] }));
+}
+TaskEditPopover.displayName = "TaskEditPopover";

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taskeditpopoverRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The "Edit task" popover -- measured live on app.attio.com's Tasks page
+// (click a task row): an 800px-wide floating card, radius 12, a single
+// subtle 1px ring shadow (no blur/offset layer -- lighter than
+// `elevation.floating`, which every other crisp overlay uses; this one
+// really does measure as just the ring, confirmed by walking every
+// ancestor up to the floating root). Same core floating primitives
+// `Popover`/`savedviews` already use directly (this doesn't reuse
+// `Popover` itself: its own `.crisp-popover-content` hardcodes a
+// max-width of min(360px, 92vw), far under this popover's measured width).
+//
+// Three rows: a 44px header (icon+"Edit task", a bottom hairline divider,
+// a close button), a body row (checkbox + editable title), and a 44px
+// footer (the due-date/assigned/add-record chip row on the left, the
+// kebab + Cancel/Save on the right). The chip row's own 10px/400 muted
+// caption size and the footer buttons' matching 10px labels don't fit any
+// existing text-scale token (closest is `text.xs` at 11px) -- raw px per
+// Golden Rule 3's "genuinely intrinsic size" exception, same as
+// `dialog.recipe.ts`'s own submit-key glyphs.
+const config = (0, core_1.defineRecipe)({
+    name: "taskeditpopover",
+    // Portaled root: position/z-index/the open transition live here as raw
+    // literal CSS (not `base`, which lightningcss nests under `.${prefixed}`
+    // at BUILD time -- fine for the plain declarations below, but this exact
+    // selector text has to exist as source text for `spec-check.mjs`'s
+    // overlay-escape/animation scan, the same reason Popover/Menu/Select
+    // declare their own portaled root in `globalCss` rather than `base`).
+    globalCss: `.crisp-taskeditpopover { position: fixed; z-index: 70; pointer-events: auto; opacity: 1; transform: scale(1); transition: opacity 0.08s ease, transform 0.08s ease; @starting-style { opacity: 0; transform: scale(0.97) translateY(-4px); } }`,
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 800px; max-width: 92vw; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-taskeditpopover-header { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: 44px; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-taskeditpopover-heading { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-taskeditpopover-heading svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-taskeditpopover-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-close:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .crisp-taskeditpopover-body { display: flex; align-items: center; gap: ${tokens_1.contract.space["2.5"]}; min-height: 52px; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; }
+    & .crisp-taskeditpopover-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); cursor: pointer; }
+    & .crisp-taskeditpopover-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
+    & .crisp-taskeditpopover-check:checked { background: ${tokens_1.contract.bgBrandSolid} center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .crisp-taskeditpopover-title { flex: 1; min-width: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-taskeditpopover-title:focus-visible { outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: 2px; }
+
+    & .crisp-taskeditpopover-footer { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: 44px; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["3"]}; }
+    & .crisp-taskeditpopover-chips { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; min-width: 0; }
+    & .crisp-taskeditpopover-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; box-sizing: border-box; padding: 4px 8px 4px 6px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
+    & .crisp-taskeditpopover-chip svg { flex-shrink: 0; }
+    & .crisp-taskeditpopover-chip:hover { background: ${tokens_1.contract.bgRaised}; }
+
+    & .crisp-taskeditpopover-actions { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; }
+    & .crisp-taskeditpopover-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 6px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-kebab:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-taskeditpopover-cancel { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-cancel:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-taskeditpopover-save { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 4px 6px 4px 8px; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-save:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; }
+    & .crisp-taskeditpopover-key { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 10px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.taskeditpopoverRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./workspaceswitchermenu"), exports);

package/dist/cjs/product/workspaceswitchermenu/workspaceswitchermenu.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceSwitcherMenu = WorkspaceSwitcherMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const avatar_1 = require("../../components/avatar");
+const menu_1 = require("../../components/menu");
+const core_1 = require("../../core");
+/**
+ * The FIXED content of Attio's own workspace-switcher popover (crisp#632) —
+ * live-measured off app.attio.com/techpartners: each workspace as a
+ * checked/unchecked row, then New workspace, then Account settings /
+ * Workspace settings, then Invite members / Upgrade Attio / Refer another
+ * team, then Apps and integrations, then Sign out — each group separated by
+ * a hairline, matching a 280px-wide popover.
+ *
+ * This is CONTENT, not a component with its own trigger/popover: pass it as
+ * `Sidebar`'s own `workspaceMenu` prop (crisp#415 already builds the real
+ * menu-button trigger/popover machinery around whatever children it's
+ * given — the workspace switcher itself has no fixed content of its own by
+ * design, since which settings exist is the consumer's; this is that fixed
+ * content, ready-made, the same way `defaultCommandItems` is for `Command`).
+ */
+function WorkspaceSwitcherMenu({ workspaces, currentWorkspaceId, onSelectWorkspace, onNewWorkspace, onAccountSettings, onWorkspaceSettings, onInviteMembers, onUpgradeAttio, onReferAnotherTeam, onAppsAndIntegrations, onSignOut, newWorkspaceLabel, accountSettingsLabel, workspaceSettingsLabel, inviteMembersLabel, upgradeAttioLabel, referAnotherTeamLabel, appsAndIntegrationsLabel, signOutLabel, }) {
+    const newWorkspace = (0, core_1.useCrispMessage)(newWorkspaceLabel, "New workspace");
+    const accountSettings = (0, core_1.useCrispMessage)(accountSettingsLabel, "Account settings");
+    const workspaceSettings = (0, core_1.useCrispMessage)(workspaceSettingsLabel, "Workspace settings");
+    const inviteMembers = (0, core_1.useCrispMessage)(inviteMembersLabel, "Invite members");
+    const upgradeAttio = (0, core_1.useCrispMessage)(upgradeAttioLabel, "Upgrade Attio");
+    const referAnotherTeam = (0, core_1.useCrispMessage)(referAnotherTeamLabel, "Refer another team");
+    const appsAndIntegrations = (0, core_1.useCrispMessage)(appsAndIntegrationsLabel, "Apps and integrations");
+    const signOut = (0, core_1.useCrispMessage)(signOutLabel, "Sign out");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [workspaces.map((ws) => {
+                const checked = ws.id === currentWorkspaceId;
+                return ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: ws.avatarTone, children: ws.avatarLabel }), trailingIcon: checked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, { size: 16, strokeWidth: 1.75, className: "crisp-workspaceswitchermenu-check" })) : undefined, "aria-checked": checked, onSelect: () => onSelectWorkspace?.(ws.id), children: ws.name }, ws.id));
+            }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), onSelect: onNewWorkspace, children: newWorkspace }), (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.User, { size: 16, strokeWidth: 1.75 }), onSelect: onAccountSettings, children: accountSettings }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onWorkspaceSettings, children: workspaceSettings }), (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.UserPlus, { size: 16, strokeWidth: 1.75 }), onSelect: onInviteMembers, children: inviteMembers }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowUp, { size: 16, strokeWidth: 1.75 }), onSelect: onUpgradeAttio, children: upgradeAttio }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.HeartHandshake, { size: 16, strokeWidth: 1.75 }), onSelect: onReferAnotherTeam, children: referAnotherTeam }), (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.Grid2x2, { size: 16, strokeWidth: 1.75 }), onSelect: onAppsAndIntegrations, children: appsAndIntegrations }), (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.LogOut, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), onSelect: onSignOut, children: signOut })] }));
+}
+WorkspaceSwitcherMenu.displayName = "WorkspaceSwitcherMenu";

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.workspaceswitchermenuRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+/**
+ * `WorkspaceSwitcherMenu` owns almost no styling of its own — every visible
+ * pixel besides the two rules below is `Menu`/`MenuItem`'s own
+ * already-measured recipe (crisp#632):
+ * - The RTL mirror for its "Sign out" icon: `LogOut` is treated as
+ *   direction-bearing (`build/spec-check.mjs`'s own DIRECTIONAL set), so
+ *   it's marked and mirrored the same way ObjectPageMenu's Notifications
+ *   chevron is (crisp#616) — see that file's identical recipe for why this
+ *   is a plain absolute selector, not `${rtlFlipCss}`'s `&`-nesting form.
+ * - The current-workspace checkmark's colour: `.crisp-menu-item svg` already
+ *   sets every menu icon to `fgMuted` (menu.recipe.ts), which is deliberate
+ *   there but wrong for THIS one glyph — Attio's own is brand-coloured, not
+ *   muted, to read as a status rather than a plain icon. `svg` doubled in
+ *   the selector (not just the class) so it outranks that rule under equal
+ *   source order instead of depending on file concatenation order.
+ */
+const config = (0, core_1.defineRecipe)({
+    name: "workspaceswitchermenu",
+    base: "",
+    globalCss: `
+    [dir="rtl"] .crisp-menu-item svg[data-rtl-flip] { transform: scaleX(-1); }
+    .crisp-menu-item svg.crisp-workspaceswitchermenu-check { color: ${tokens_1.contract.fgBrandContrast}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.workspaceswitchermenuRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/tokens/palette.js

@@ -277,4 +277,31 @@ exports.palette = {
     // s3 (shadow.yaml) -- the listbox's single-layer floating shadow, in place
     // of crisp's own multi-layer `elevation.floating` for this component only.
     selectShadow: { light: "#0000001f", dark: "#000000cc" },
+    // your-moon/crisp#998: the 12-colour tag/option-colour palette a workspace
+    // admin picks for a Select/MultiSelect option, measured live off
+    // app.attio.com's Categories multi-select field (table-cell/column-editor
+    // pill, not the larger tinted-text activity-feed variant -- see
+    // ~/grc-parity/attio-tag-palette.md). All 12 are near-white pastels with
+    // flat black text regardless of which one -- Attio's theme toggle is
+    // off-limits (same restriction every other raw entry in this file notes),
+    // so no dark variant was reachable; light is reused for dark, same as
+    // `cyan600`/`purple600`/`orange600` above already do for the same reason.
+    // Numbered 1-12 rather than named: Attio assigns them by an internal hash
+    // of the option's id, not by any hue name a consumer would recognise.
+    tagSwatch1: { light: "#fff3cc", dark: "#fff3cc" },
+    tagSwatch2: { light: "#f4fbcb", dark: "#f4fbcb" },
+    tagSwatch3: { light: "#fdf7c4", dark: "#fdf7c4" },
+    tagSwatch4: { light: "#feecf3", dark: "#feecf3" },
+    tagSwatch5: { light: "#e0fced", dark: "#e0fced" },
+    tagSwatch6: { light: "#ddf7ff", dark: "#ddf7ff" },
+    tagSwatch7: { light: "#f6f7f7", dark: "#f6f7f7" },
+    tagSwatch8: { light: "#ffebeb", dark: "#ffebeb" },
+    tagSwatch9: { light: "#feeee1", dark: "#feeee1" },
+    tagSwatch10: { light: "#e5eeff", dark: "#e5eeff" },
+    tagSwatch11: { light: "#f5f0ff", dark: "#f5f0ff" },
+    tagSwatch12: { light: "#fdedff", dark: "#fdedff" },
+    // measured alongside the palette above: flat opaque black, not `ink`
+    // (#101112) -- a genuinely different, slightly darker hex Attio uses only
+    // for this one pill's text, regardless of which of the 12 backgrounds.
+    tagSwatchInk: { light: "#000000", dark: "#000000" },
 };

package/dist/cjs/tokens/semantic.js

@@ -129,4 +129,24 @@ exports.semantic = {
     strokeSelectDivider: "selectDivider",
     fgSelectPlaceholder: "selectPlaceholder",
     shadowSelect: "selectShadow",
+    /** your-moon/crisp#998: a Select/MultiSelect option's fixed tag colour
+     *  (`swatch`, 1-12) -- see palette.ts's own comment on `tagSwatch1` for
+     *  the measurement. Distinct from `Select`'s existing `color` (an
+     *  arbitrary-CSS status dot) and `MultiSelect`'s existing `tone` (crisp's
+     *  own semantic 7-tone chip family): this is Attio's own enumerable,
+     *  workspace-admin-assigned palette, reproduced verbatim rather than
+     *  mapped onto either existing mechanism. */
+    bgTagSwatch1: "tagSwatch1",
+    bgTagSwatch2: "tagSwatch2",
+    bgTagSwatch3: "tagSwatch3",
+    bgTagSwatch4: "tagSwatch4",
+    bgTagSwatch5: "tagSwatch5",
+    bgTagSwatch6: "tagSwatch6",
+    bgTagSwatch7: "tagSwatch7",
+    bgTagSwatch8: "tagSwatch8",
+    bgTagSwatch9: "tagSwatch9",
+    bgTagSwatch10: "tagSwatch10",
+    bgTagSwatch11: "tagSwatch11",
+    bgTagSwatch12: "tagSwatch12",
+    fgTagSwatch: "tagSwatchInk",
 };