@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/esm/product/shortcutssheet/shortcutssheet.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CornerDownLeft } from "lucide-react";
+import * as React from "react";
+import { Drawer, DrawerBody } from "../../components/drawer/index.js";
+import { Kbd } from "../../components/kbd/index.js";
+import { cx, useCrispMessage } from "../../core/index.js";
+/** 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 = () => _jsx(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.
+ */
+export const 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.
+ */
+export function ShortcutsSheet({ open, onOpenChange, sections = defaultShortcutSections, title: titleProp, thenLabel: thenLabelProp, closeLabel, className, ...rest }) {
+    const title = useCrispMessage(titleProp, "Keyboard shortcuts");
+    const thenLabel = useCrispMessage(thenLabelProp, "then");
+    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, title: title, closeLabel: closeLabel, className: cx("crisp-shortcutssheet-panel", className), ...rest, children: _jsx(DrawerBody, { children: _jsx("div", { className: "crisp-shortcutssheet-body", children: sections.map((section) => (_jsxs(React.Fragment, { children: [_jsx("div", { className: "crisp-shortcutssheet-section-label", children: section.label }), section.rows.map((row) => (_jsxs("div", { className: "crisp-shortcutssheet-row", children: [_jsx("div", { className: "crisp-shortcutssheet-desc", children: row.description }), _jsx("div", { className: "crisp-shortcutssheet-keys", children: row.steps.map((step, stepIndex) => (_jsxs(React.Fragment, { children: [stepIndex > 0 && (_jsx("span", { className: "crisp-shortcutssheet-then", children: thenLabel })), step.map((glyph, glyphIndex) => (_jsx(Kbd, { children: glyph }, glyphIndex)))] }, stepIndex))) })] }, String(row.description))))] }, String(section.label)))) }) }) }));
+}
+ShortcutsSheet.displayName = "ShortcutsSheet";

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

@@ -0,0 +1,47 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = 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: ${c.space["2.5"]}; }
+    .crisp-shortcutssheet-section-label {
+      font-size: ${c.text.sm}; font-weight: ${c.weight.medium};
+      color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent);
+    }
+    .crisp-shortcutssheet-section-label:not(:first-child) { margin-top: ${c.space["2.5"]}; }
+    .crisp-shortcutssheet-row { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["1"]}; }
+    .crisp-shortcutssheet-desc {
+      font-size: ${c.text.lg}; font-weight: ${c.weight.medium};
+      color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent);
+    }
+    .crisp-shortcutssheet-keys { display: flex; align-items: center; gap: ${c.space["1"]}; flex-shrink: 0; }
+    .crisp-shortcutssheet-then {
+      font-size: ${c.text.xs}; font-weight: ${c.weight.medium};
+      color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent);
+    }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const shortcutssheetRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { TaskEditPopover } from "./taskeditpopover.js";
+export { taskeditpopoverRecipe } from "./taskeditpopover.recipe.js";

package/dist/esm/product/taskeditpopover/taskeditpopover.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDays, CircleCheckBig, MoreHorizontal, X } from "lucide-react";
+import * as React from "react";
+import { Popover } from "../../components/popover/index.js";
+import { FloatingPortal, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
+import { AssigneePicker, } from "../assigneepicker/assigneepicker.js";
+import { RecordPicker, } from "../recordpicker/recordpicker.js";
+import { taskeditpopoverRecipe } from "./taskeditpopover.recipe.js";
+/**
+ * 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).
+ */
+export 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 = useCrispMessage(headingLabelProp, "Edit task");
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
+    const dueDatePlaceholder = useCrispMessage(dueDatePlaceholderProp, "Set due date");
+    const assignLabel = useCrispMessage(assignLabelProp, "Assign");
+    const assignedToLabel = useCrispMessage(assignedToLabelProp, "Assigned to");
+    const addRecordLabel = useCrispMessage(addRecordLabelProp, "Add record");
+    const linkedRecordLabel = useCrispMessage(linkedRecordLabelProp, linkedRecordCount === 1
+        ? "1 linked record"
+        : `${linkedRecordCount} linked records`);
+    const moreActionsLabel = useCrispMessage(moreActionsLabelProp, "More actions");
+    const cancelLabel = useCrispMessage(cancelLabelProp, "Cancel");
+    const cancelKeyLabel = useCrispMessage(cancelKeyLabelProp, "Esc");
+    const saveLabel = 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 } = 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 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 (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 (_jsxs("div", { ref: rootRef, style: { display: "contents" }, children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: contentRef, id: surfaceId, role: "dialog", "aria-label": headingLabel, className: 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 (!isInsideLaterFloatingLayer(e.target, contentRef.current)) {
+                                save();
+                            }
+                        }
+                    }, children: [_jsxs("div", { className: "crisp-taskeditpopover-header", children: [_jsxs("span", { className: "crisp-taskeditpopover-heading", children: [_jsx(CircleCheckBig, { size: 16, strokeWidth: 1.75 }), headingLabel] }), _jsx("button", { type: "button", className: "crisp-taskeditpopover-close", "aria-label": closeLabel, onClick: cancel, children: _jsx(X, { size: 16, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-taskeditpopover-body", children: [_jsx("input", { type: "checkbox", className: "crisp-taskeditpopover-check", checked: done, "aria-label": title, onChange: (e) => onToggleDone?.(e.target.checked) }), _jsx("input", { type: "text", className: "crisp-taskeditpopover-title", value: title, onChange: (e) => onTitleChange?.(e.target.value) })] }), _jsxs("div", { className: "crisp-taskeditpopover-footer", children: [_jsxs("div", { className: "crisp-taskeditpopover-chips", children: [_jsx(Popover, { align: "start", "aria-label": dueDatePlaceholder, trigger: _jsxs("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [_jsx(CalendarDays, { size: 14, strokeWidth: 1.75 }), dueDateLabel ?? dueDatePlaceholder] }), children: dueDatePicker }), _jsx(Popover, { align: "start", "aria-label": assignedToLabel, trigger: _jsxs("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [_jsx("span", { "aria-hidden": "true", children: "@" }), assignee != null
+                                                        ? `${assignedToLabel} ${assignee.name}`
+                                                        : assignLabel] }), children: _jsx(AssigneePicker, { users: users, assignee: assignee, onAssigneeChange: onAssigneeChange }) }), _jsx(Popover, { align: "start", "aria-label": addRecordLabel, trigger: _jsxs("button", { type: "button", className: "crisp-taskeditpopover-chip", children: [_jsx("span", { "aria-hidden": "true", children: "\u2197" }), linkedRecordCount > 0
+                                                        ? linkedRecordLabel
+                                                        : addRecordLabel] }), children: _jsx(RecordPicker, { records: recordCandidates, loading: recordCandidatesLoading, onQueryChange: onRecordQueryChange, onSelect: onSelectRecord }) })] }), _jsxs("div", { className: "crisp-taskeditpopover-actions", children: [menu != null && (_jsx(Popover, { align: "end", "aria-label": moreActionsLabel, trigger: _jsx("button", { type: "button", className: "crisp-taskeditpopover-kebab", "aria-label": moreActionsLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: menu })), _jsxs("button", { type: "button", className: "crisp-taskeditpopover-cancel", onClick: cancel, children: [cancelLabel, _jsx("kbd", { className: "crisp-taskeditpopover-key", children: cancelKeyLabel })] }), _jsxs("button", { type: "button", className: "crisp-taskeditpopover-save", onClick: save, children: [saveLabel, _jsx("kbd", { className: "crisp-taskeditpopover-key", children: "\u23CE" })] })] })] })] }) }))] }));
+}
+TaskEditPopover.displayName = "TaskEditPopover";

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

@@ -0,0 +1,65 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = 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: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-taskeditpopover-header { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: 44px; box-sizing: border-box; padding: 0 ${c.space["2"]} 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-taskeditpopover-heading { display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-taskeditpopover-heading svg { flex-shrink: 0; color: ${c.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: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-close:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    & .crisp-taskeditpopover-body { display: flex; align-items: center; gap: ${c.space["2.5"]}; min-height: 52px; box-sizing: border-box; padding: ${c.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: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 9%, transparent); cursor: pointer; }
+    & .crisp-taskeditpopover-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
+    & .crisp-taskeditpopover-check:checked { background: ${c.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: ${c.radius.sm}; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-taskeditpopover-title:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: 2px; }
+
+    & .crisp-taskeditpopover-footer { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: 44px; box-sizing: border-box; padding: 0 ${c.space["2"]} 0 ${c.space["3"]}; }
+    & .crisp-taskeditpopover-chips { display: flex; align-items: center; gap: ${c.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: ${c.radius.md}; background: none; color: color-mix(in srgb, ${c.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: ${c.bgRaised}; }
+
+    & .crisp-taskeditpopover-actions { display: flex; align-items: center; gap: ${c.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: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-taskeditpopover-kebab:hover { background: ${c.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: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-cancel:hover { background: ${c.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: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: 10px; cursor: pointer; }
+    & .crisp-taskeditpopover-save:hover { background: ${c.bgBrandSolidPressed}; }
+    & .crisp-taskeditpopover-key { color: color-mix(in srgb, currentColor 55%, transparent); font-size: 10px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const taskeditpopoverRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1 @@
+export * from "./workspaceswitchermenu.js";

package/dist/esm/product/workspaceswitchermenu/workspaceswitchermenu.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleArrowUp, CircleCheck, Grid2x2, HeartHandshake, LogOut, Plus, Settings, User, UserPlus, } from "lucide-react";
+import { Avatar } from "../../components/avatar/index.js";
+import { MenuItem, MenuSeparator } from "../../components/menu/index.js";
+import { useCrispMessage } from "../../core/index.js";
+/**
+ * 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`).
+ */
+export function WorkspaceSwitcherMenu({ workspaces, currentWorkspaceId, onSelectWorkspace, onNewWorkspace, onAccountSettings, onWorkspaceSettings, onInviteMembers, onUpgradeAttio, onReferAnotherTeam, onAppsAndIntegrations, onSignOut, newWorkspaceLabel, accountSettingsLabel, workspaceSettingsLabel, inviteMembersLabel, upgradeAttioLabel, referAnotherTeamLabel, appsAndIntegrationsLabel, signOutLabel, }) {
+    const newWorkspace = useCrispMessage(newWorkspaceLabel, "New workspace");
+    const accountSettings = useCrispMessage(accountSettingsLabel, "Account settings");
+    const workspaceSettings = useCrispMessage(workspaceSettingsLabel, "Workspace settings");
+    const inviteMembers = useCrispMessage(inviteMembersLabel, "Invite members");
+    const upgradeAttio = useCrispMessage(upgradeAttioLabel, "Upgrade Attio");
+    const referAnotherTeam = useCrispMessage(referAnotherTeamLabel, "Refer another team");
+    const appsAndIntegrations = useCrispMessage(appsAndIntegrationsLabel, "Apps and integrations");
+    const signOut = useCrispMessage(signOutLabel, "Sign out");
+    return (_jsxs(_Fragment, { children: [workspaces.map((ws) => {
+                const checked = ws.id === currentWorkspaceId;
+                return (_jsx(MenuItem, { icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: ws.avatarTone, children: ws.avatarLabel }), trailingIcon: checked ? (_jsx(CircleCheck, { size: 16, strokeWidth: 1.75, className: "crisp-workspaceswitchermenu-check" })) : undefined, "aria-checked": checked, onSelect: () => onSelectWorkspace?.(ws.id), children: ws.name }, ws.id));
+            }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 16, strokeWidth: 1.75 }), onSelect: onNewWorkspace, children: newWorkspace }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(User, { size: 16, strokeWidth: 1.75 }), onSelect: onAccountSettings, children: accountSettings }), _jsx(MenuItem, { icon: _jsx(Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onWorkspaceSettings, children: workspaceSettings }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(UserPlus, { size: 16, strokeWidth: 1.75 }), onSelect: onInviteMembers, children: inviteMembers }), _jsx(MenuItem, { icon: _jsx(CircleArrowUp, { size: 16, strokeWidth: 1.75 }), onSelect: onUpgradeAttio, children: upgradeAttio }), _jsx(MenuItem, { icon: _jsx(HeartHandshake, { size: 16, strokeWidth: 1.75 }), onSelect: onReferAnotherTeam, children: referAnotherTeam }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Grid2x2, { size: 16, strokeWidth: 1.75 }), onSelect: onAppsAndIntegrations, children: appsAndIntegrations }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(LogOut, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), onSelect: onSignOut, children: signOut })] }));
+}
+WorkspaceSwitcherMenu.displayName = "WorkspaceSwitcherMenu";

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

@@ -0,0 +1,31 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+/**
+ * `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 = 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: ${c.fgBrandContrast}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const workspaceswitchermenuRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/tokens/palette.js

@@ -274,4 +274,31 @@ export const 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/esm/tokens/semantic.js

@@ -126,4 +126,24 @@ export const 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",
 };

package/dist/multiselect.css

@@ -50,6 +50,24 @@
     .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent); }
     .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent); }
     .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- flat black text, no
+       ring/border, unlike the tone family above. 7px radius/10px text are
+       measured literals, no matching step in the shared scale (same as
+       Select's own .crisp-select-swatch). */
+    .crisp-multiselect-swatch { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: 7px; font-size: 10px; font-weight: var(--crisp-weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--crisp-fg-tag-swatch); }
+    .crisp-multiselect-swatch[data-swatch="1"] { background: var(--crisp-bg-tag-swatch1); }
+    .crisp-multiselect-swatch[data-swatch="2"] { background: var(--crisp-bg-tag-swatch2); }
+    .crisp-multiselect-swatch[data-swatch="3"] { background: var(--crisp-bg-tag-swatch3); }
+    .crisp-multiselect-swatch[data-swatch="4"] { background: var(--crisp-bg-tag-swatch4); }
+    .crisp-multiselect-swatch[data-swatch="5"] { background: var(--crisp-bg-tag-swatch5); }
+    .crisp-multiselect-swatch[data-swatch="6"] { background: var(--crisp-bg-tag-swatch6); }
+    .crisp-multiselect-swatch[data-swatch="7"] { background: var(--crisp-bg-tag-swatch7); }
+    .crisp-multiselect-swatch[data-swatch="8"] { background: var(--crisp-bg-tag-swatch8); }
+    .crisp-multiselect-swatch[data-swatch="9"] { background: var(--crisp-bg-tag-swatch9); }
+    .crisp-multiselect-swatch[data-swatch="10"] { background: var(--crisp-bg-tag-swatch10); }
+    .crisp-multiselect-swatch[data-swatch="11"] { background: var(--crisp-bg-tag-swatch11); }
+    .crisp-multiselect-swatch[data-swatch="12"] { background: var(--crisp-bg-tag-swatch12); }
   
 .crisp-multiselect {
   position: relative; display: inline-flex; width: 100%; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

package/dist/multiselect.layered.css

@@ -51,6 +51,24 @@
     .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent); }
     .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent); }
     .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
+    /* your-moon/crisp#998: Attio's own 12-colour tag palette (measured live,
+       see tokens/palette.ts's tagSwatch1 comment) -- flat black text, no
+       ring/border, unlike the tone family above. 7px radius/10px text are
+       measured literals, no matching step in the shared scale (same as
+       Select's own .crisp-select-swatch). */
+    .crisp-multiselect-swatch { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: 7px; font-size: 10px; font-weight: var(--crisp-weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--crisp-fg-tag-swatch); }
+    .crisp-multiselect-swatch[data-swatch="1"] { background: var(--crisp-bg-tag-swatch1); }
+    .crisp-multiselect-swatch[data-swatch="2"] { background: var(--crisp-bg-tag-swatch2); }
+    .crisp-multiselect-swatch[data-swatch="3"] { background: var(--crisp-bg-tag-swatch3); }
+    .crisp-multiselect-swatch[data-swatch="4"] { background: var(--crisp-bg-tag-swatch4); }
+    .crisp-multiselect-swatch[data-swatch="5"] { background: var(--crisp-bg-tag-swatch5); }
+    .crisp-multiselect-swatch[data-swatch="6"] { background: var(--crisp-bg-tag-swatch6); }
+    .crisp-multiselect-swatch[data-swatch="7"] { background: var(--crisp-bg-tag-swatch7); }
+    .crisp-multiselect-swatch[data-swatch="8"] { background: var(--crisp-bg-tag-swatch8); }
+    .crisp-multiselect-swatch[data-swatch="9"] { background: var(--crisp-bg-tag-swatch9); }
+    .crisp-multiselect-swatch[data-swatch="10"] { background: var(--crisp-bg-tag-swatch10); }
+    .crisp-multiselect-swatch[data-swatch="11"] { background: var(--crisp-bg-tag-swatch11); }
+    .crisp-multiselect-swatch[data-swatch="12"] { background: var(--crisp-bg-tag-swatch12); }
   
 .crisp-multiselect {
   position: relative; display: inline-flex; width: 100%; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

package/dist/native/tokens.d.ts

@@ -2,7 +2,7 @@
 // The same tokens the CSS custom properties carry, resolved per theme, with
 // dimensions as numbers for React Native and Lynx style objects.
 export type Theme = "light" | "dark";
-export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "bgBrandContrast" | "fgBrandContrast" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "bgSurfaceMuted" | "borderDefault" | "borderSubtle" | "borderDropzone" | "borderDivider" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgScrim" | "bgOverlayStrong" | "strokeGroupDivider" | "fgAlertDescription" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgWarningSolid" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft" | "ringBrandSoft" | "fgSelectNeutral" | "bgSelectListbox" | "strokeSelectTrigger" | "bgSelectPressed" | "bgSelectDisabled" | "strokeSelectInvalid" | "strokeSelectDivider" | "fgSelectPlaceholder" | "shadowSelect", string>;
+export type ColorTokens = Record<"bgBrandSolid" | "bgBrandSolidPressed" | "bgBrandContrast" | "fgBrandContrast" | "fgOnBrand" | "fgOnTone" | "bgSurface" | "bgRaised" | "bgSurfaceMuted" | "borderDefault" | "borderSubtle" | "borderDropzone" | "borderDivider" | "ringNeutral" | "ringField" | "ringSwitch" | "bgTileActive" | "shadowTileActive" | "bgScrim" | "bgOverlayStrong" | "strokeGroupDivider" | "fgAlertDescription" | "bgOverlayFrost" | "shadowOverlay1" | "shadowOverlay2" | "shadowOverlay3" | "bgPopover" | "ringPopover" | "shadowPopover1" | "shadowPopover2" | "shadowPopover3" | "fgPrimary" | "fgMuted" | "bgDanger" | "bgDangerSolid" | "fgDanger" | "strokeFieldFocus" | "fgDisabled" | "bgNeutralWeak" | "bgNeutralInverted" | "fgOnNeutralInverted" | "fgNeutralSubtle" | "fgNeutralMuted" | "strokeFocusRing" | "bgSuccess" | "bgWarning" | "bgWarningSolid" | "bgOrange" | "bgCyan" | "bgPurple" | "bgSidebar" | "bgSubtle" | "fgBrandSoft" | "fgSuccessSoft" | "fgWarningSoft" | "fgDangerSoft" | "fgNeutralSoft" | "bgPurpleSoft" | "fgPurpleSoft" | "ringPurpleSoft" | "ringBrandSoft" | "fgSelectNeutral" | "bgSelectListbox" | "strokeSelectTrigger" | "bgSelectPressed" | "bgSelectDisabled" | "strokeSelectInvalid" | "strokeSelectDivider" | "fgSelectPlaceholder" | "shadowSelect" | "bgTagSwatch1" | "bgTagSwatch2" | "bgTagSwatch3" | "bgTagSwatch4" | "bgTagSwatch5" | "bgTagSwatch6" | "bgTagSwatch7" | "bgTagSwatch8" | "bgTagSwatch9" | "bgTagSwatch10" | "bgTagSwatch11" | "bgTagSwatch12" | "fgTagSwatch", string>;
 export declare const tokens: {
   color: Record<Theme, ColorTokens>;
   palette: Record<Theme, Record<string, string>>;