@crisp-ui-kit/crisp 0.57.3 → 0.57.4

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

@@ -120,6 +120,53 @@ const config = defineRecipe({
       font-size: ${c.text.sm}; font-weight: ${c.weight.medium};
       color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent);
     }
+
+    /* crisp#568: the "Discard changes" / "Save for everyone ▾" bar a
+       consumer swaps into its own toolbar's trailing slot (TableToolbar's
+       own children prop already documents "right-aligned actions after the
+       count") while the loaded view is dirty -- measured live on
+       app.attio.com replacing that exact slot's usual Import/Export + New
+       button. Not rendered inside SavedViews' own trigger/panel, which
+       stays untouched; this is its own export, SavedViewsSaveBar. */
+    .crisp-savedviews-savebar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    /* Rest-state color is a 55% color-mix of fgPrimary -- measured
+       identical to recordpanel's own ".crisp-recordpanel-section-action"
+       (its own comment: "measured 10px/400, a lighter mix..." -- font size
+       there was the SAME outer-vs-inner-div miss #688 corrected; the 55%
+       mix itself checks out independently here). Hover repeats crisp's own
+       already-measured Button ghost intent exactly (bgRaised + fgPrimary),
+       confirmed live (hover bg rgba(0,0,0,.04) + ink text matches bgRaised
+       + fgPrimary bit for bit) -- reused, not re-derived. */
+    .crisp-savedviews-savebar-discard {
+      box-sizing: border-box; display: inline-flex; align-items: center; height: 28px;
+      margin: 0; padding-inline: ${c.space["2"]}; border: none; border-radius: ${c.radius.md};
+      background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium};
+      color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer;
+      transition: background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-savebar-discard:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    /* the split "Save for everyone ▾" pill -- two adjacent buttons sharing
+       one visual pill (measured: label half rounds only its outer/left
+       corners, the chevron half only its outer/right corners, seamless
+       between). Fill is crisp's OWN measured bgBrandContrast, not Attio's
+       own literal button blue -- the owner's directive is Attio structure/
+       sizing, seed-identity color (crisp direction doc). Hover/active reuse
+       Button's own already-measured primary-intent brightness filter
+       (crisp#910) rather than Attio's own literal darker fill, for the
+       same reason. */
+    .crisp-savedviews-savebar-save-group { display: flex; }
+    .crisp-savedviews-savebar-save, .crisp-savedviews-savebar-save-chevron {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      height: 28px; margin: 0; border: none; background: ${c.bgBrandContrast}; color: ${c.fgOnBrand};
+      cursor: pointer; transition: filter .2s;
+    }
+    .crisp-savedviews-savebar-save:hover, .crisp-savedviews-savebar-save-chevron:hover { filter: brightness(0.96); }
+    .crisp-savedviews-savebar-save:active, .crisp-savedviews-savebar-save-chevron:active { filter: brightness(0.92); }
+    .crisp-savedviews-savebar-save {
+      padding-inline: ${c.space["2"]} ${c.space["1.5"]}; border-radius: ${c.radius.md} 0 0 ${c.radius.md};
+      font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium};
+    }
+    .crisp-savedviews-savebar-save-chevron { width: 28px; padding: 0; border-radius: 0 ${c.radius.md} ${c.radius.md} 0; }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -0,0 +1,2 @@
+export { SharePopover, } from "./share.js";
+export { shareRecipe } from "./share.recipe.js";

package/dist/esm/product/share/share.js

@@ -0,0 +1,143 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpCircle, Play, Users } from "lucide-react";
+import * as React from "react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Input } from "../../components/input/index.js";
+import { Select } from "../../components/select/index.js";
+import { useTablistKeyboard } from "../../components/tabs/index.js";
+import { FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
+import { shareRecipe } from "./share.recipe.js";
+/**
+ * A Share/permissions popover — measured live on app.attio.com (both an
+ * object table's and a List's own "Share" trigger, techpartners workspace):
+ * Members/Automations pill tabs, a "Workspace access" row (avatar + label +
+ * a `Read and write ⌄`-style role select), an optional plan-gated upsell
+ * slot, a "Clear permissions" action, an "Individual members" list (one row
+ * per member, its own role select), and — on the Automations tab — a
+ * search box + role select + "Add" row. Both tabs share a trailing "Learn
+ * more about permissions" link.
+ *
+ * Its own floating shell (not the generic `Popover`): the measured surface
+ * is 440px wide, past `Popover`'s 360px content cap. See share.recipe.ts.
+ */
+export function SharePopover({ trigger, align = "end", open: openProp, defaultOpen, onOpenChange, tab: tabProp, defaultTab = "members", onTabChange, membersTabLabel: membersTabLabelProp, automationsTabLabel: automationsTabLabelProp, workspaceIcon, workspaceAccessLabel: workspaceAccessLabelProp, workspaceAccessValue, workspaceAccessOptions, onWorkspaceAccessChange, advancedSharing, onClearPermissions, clearPermissionsLabel: clearPermissionsLabelProp, members, membersSectionLabel: membersSectionLabelProp, memberRoleOptions, onMemberAccessChange, automationSearchValue, defaultAutomationSearchValue, onAutomationSearchChange, automationSearchPlaceholder: automationSearchPlaceholderProp, automationRoleValue, automationRoleOptions, onAutomationRoleChange, onAddAutomation, addAutomationDisabled, addAutomationLabel: addAutomationLabelProp, learnMoreHref, learnMoreLabel: learnMoreLabelProp, "aria-label": ariaLabel, className, ...rest }) {
+    const membersTabLabel = useCrispMessage(membersTabLabelProp, "Members");
+    const automationsTabLabel = useCrispMessage(automationsTabLabelProp, "Automations");
+    const workspaceAccessLabel = useCrispMessage(workspaceAccessLabelProp, "Workspace access");
+    const clearPermissionsLabel = useCrispMessage(clearPermissionsLabelProp, "Clear permissions");
+    const membersSectionLabel = useCrispMessage(membersSectionLabelProp, "Individual members");
+    const automationSearchPlaceholder = useCrispMessage(automationSearchPlaceholderProp, "Search...");
+    const addAutomationLabel = useCrispMessage(addAutomationLabelProp, "Add");
+    const learnMoreLabel = useCrispMessage(learnMoreLabelProp, "Learn more about permissions");
+    const surfaceId = React.useId();
+    const triggerId = trigger.props.id ?? `${surfaceId}-trigger`;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const [internalTab, setInternalTab] = React.useState(defaultTab);
+    const activeTab = tabProp ?? internalTab;
+    const selectTab = (t) => {
+        if (tabProp === undefined)
+            setInternalTab(t);
+        onTabChange?.(t);
+    };
+    const [internalSearch, setInternalSearch] = React.useState(defaultAutomationSearchValue ?? "");
+    const searchValue = automationSearchValue ?? internalSearch;
+    const setSearch = (q) => {
+        if (automationSearchValue === undefined)
+            setInternalSearch(q);
+        onAutomationSearchChange?.(q);
+    };
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [pos, setPos] = React.useState({});
+    const [up, setUp] = React.useState(false);
+    const place = () => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const { style, up: flipUp } = placeFloating({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 320,
+            anchor: el,
+        });
+        setUp(flipUp);
+        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]);
+    const close = React.useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    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;
+            close();
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open, close]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if (hasNestedFloatingLayer(contentRef.current))
+                return;
+            close();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        id: triggerId,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? surfaceId : undefined,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    const tablistRef = React.useRef(null);
+    const tabEntries = React.useMemo(() => [{ value: "members" }, { value: "automations" }], []);
+    const { onKeyDown: onTabKeyDown, tabIndexFor } = useTablistKeyboard({
+        tabs: tabEntries,
+        active: activeTab,
+        select: (v) => selectTab(v),
+        listRef: tablistRef,
+    });
+    return (_jsxs("div", { ref: rootRef, className: shareRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: contentRef, className: "crisp-share-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-up": up ? "" : undefined, style: pos, ...rest, children: [_jsxs("div", { ref: tablistRef, className: "crisp-share-tabs", role: "tablist", onKeyDown: onTabKeyDown, children: [_jsxs("button", { type: "button", role: "tab", "data-value": "members", "aria-selected": activeTab === "members", tabIndex: tabIndexFor("members"), className: "crisp-share-tab", onClick: () => selectTab("members"), children: [_jsx(Users, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), membersTabLabel] }), _jsxs("button", { type: "button", role: "tab", "data-value": "automations", "aria-selected": activeTab === "automations", tabIndex: tabIndexFor("automations"), className: "crisp-share-tab", onClick: () => selectTab("automations"), children: [_jsx(Play, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), automationsTabLabel] })] }), activeTab === "members" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "crisp-share-row", children: [workspaceIcon ?? (_jsx(Avatar, { size: "lg", tone: "brand", children: typeof workspaceAccessLabel === "string"
+                                                ? workspaceAccessLabel.charAt(0)
+                                                : null })), _jsx("span", { className: "crisp-share-row-label", children: workspaceAccessLabel }), _jsx(Select, { variant: "ghost", width: "auto", options: workspaceAccessOptions, value: workspaceAccessValue, onValueChange: onWorkspaceAccessChange, "aria-label": workspaceAccessLabel })] }), advancedSharing, onClearPermissions && (_jsx("button", { type: "button", className: "crisp-share-clear", onClick: onClearPermissions, children: clearPermissionsLabel })), members && members.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "crisp-share-section-label", children: membersSectionLabel }), _jsx("div", { className: "crisp-share-members", children: members.map((m) => (_jsxs("div", { className: "crisp-share-member", children: [m.avatar ?? (_jsx(Avatar, { size: "lg", tone: "brand", children: typeof m.name === "string"
+                                                            ? m.name.charAt(0).toUpperCase()
+                                                            : null })), _jsxs("span", { className: "crisp-share-member-text", children: [_jsx("span", { className: "crisp-share-member-name", children: m.name }), m.email && (_jsx("span", { className: "crisp-share-member-email", children: m.email }))] }), _jsx(Select, { variant: "ghost", width: "auto", options: memberRoleOptions, value: m.access, disabled: m.accessDisabled, onValueChange: (v) => onMemberAccessChange?.(m.id, v), "aria-label": typeof m.name === "string"
+                                                            ? `${m.name}'s access`
+                                                            : undefined })] }, m.id))) })] }))] })) : (_jsxs("div", { className: "crisp-share-automations-row", children: [_jsx(Input, { value: searchValue, onChange: (e) => setSearch(e.target.value), placeholder: automationSearchPlaceholder, "aria-label": automationSearchPlaceholder }), _jsx(Select, { variant: "ghost", width: "auto", options: automationRoleOptions, value: automationRoleValue, onValueChange: onAutomationRoleChange, "aria-label": automationsTabLabel }), _jsx("button", { type: "button", className: "crisp-share-add", disabled: addAutomationDisabled, onClick: onAddAutomation, children: addAutomationLabel })] })), _jsxs("a", { className: "crisp-share-learnmore", href: learnMoreHref, target: "_blank", rel: "noreferrer", children: [_jsx(HelpCircle, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), learnMoreLabel] })] }) }))] }));
+}
+SharePopover.displayName = "SharePopover";

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

@@ -0,0 +1,111 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// SharePopover's shell — measured live on app.attio.com (both the object
+// table's and a List's own "Share" trigger, techpartners workspace,
+// 2026-09-27): a 440px-wide floating panel, radius 12 (xl), the same
+// layered popover shadow every other floating surface uses (`e.floating`
+// matched the measured box-shadow's four layers exactly, so no new shadow
+// literal was needed).
+//
+// This is its own floating shell rather than a reuse of the generic
+// `Popover` (components/popover): that recipe caps its content at
+// `min(360px, 92vw)`, and 440px measured wider than that on every sample.
+// `product/savedviews` already sets the precedent for a product surface
+// owning its own portaled shell over the generic one when the measured
+// geometry doesn't fit it.
+//
+// Three muted-text alphas were measured that don't match any existing
+// color token: the workspace-access/role value text (`rgba(0,0,0,.55)`),
+// the "Individual members" section label (`rgba(0,0,0,.5)`), and the
+// inactive-tab/footer-link text (`rgba(0,0,0,.63)` — this one incidentally
+// equals `fgAlertDescription`'s light value, but that token is Dialog's own
+// alert-description colour, a different surface, so it is not reused here).
+// Rather than add new palette entries for three one-off alphas (tokens/**
+// is another lane's file), each is expressed as `color-mix(in srgb,
+// fgPrimary N%, transparent)` — the same idiom `segmented`'s own track
+// background already uses for its 5% tint — so the value is theme-reactive
+// (it scales with fgPrimary's dark value too) without a new token or a
+// flat literal that would go stale in dark mode.
+const mutedText = (pct) => `color-mix(in srgb, ${c.fgPrimary} ${pct}%, transparent)`;
+const config = defineRecipe({
+    name: "share",
+    base: `display: contents; font-family: ${c.font.sans};`,
+    globalCss: `
+    .crisp-share-content {
+      font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box;
+      width: 440px; max-width: 92vw;
+      padding: ${c.space["3"]}; display: flex; flex-direction: column; gap: ${c.space["3"]};
+      border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary};
+      box-shadow: ${e.floating};
+      opacity: 1; transform: none; transform-origin: top right;
+      transition: opacity 0.08s ease, transform 0.08s ease;
+      @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); }
+    }
+    .crisp-share-content[data-up] { transform-origin: bottom right; }
+
+    .crisp-share-tabs { display: flex; align-items: center; gap: ${c.space["1"]}; }
+    .crisp-share-tab {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
+      height: ${c.size.row}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md};
+      background: transparent; color: ${mutedText(63)};
+      font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.07px;
+      cursor: pointer; transition: background-color .12s ease, color .12s ease;
+    }
+    .crisp-share-tab svg { flex-shrink: 0; }
+    .crisp-share-tab:hover { color: ${c.fgPrimary}; }
+    .crisp-share-tab[aria-selected="true"] { background: ${c.bgSurfaceMuted}; color: ${c.fgPrimary}; }
+
+    .crisp-share-row { display: flex; align-items: center; gap: ${c.space["2"]}; min-height: 34px; }
+    .crisp-share-row-label { flex: 1; min-width: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; letter-spacing: -0.07px; }
+    .crisp-share-row .crisp-select { flex-shrink: 0; }
+    .crisp-share-row .crisp-select .crisp-select-value,
+    .crisp-share-row .crisp-select .crisp-select-chevron { color: ${mutedText(55)}; }
+
+    .crisp-share-clear {
+      align-self: flex-start; margin: 0; padding: 0; border: none; background: none;
+      font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium};
+      color: ${mutedText(63)}; cursor: pointer;
+    }
+    .crisp-share-clear:hover { color: ${c.fgPrimary}; text-decoration: underline; }
+
+    .crisp-share-section-label {
+      margin: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${mutedText(50)};
+    }
+    .crisp-share-members { display: flex; flex-direction: column; gap: ${c.space["2"]}; }
+    .crisp-share-member { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    .crisp-share-member-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: ${c.space["1.5"]}; overflow: hidden; }
+    .crisp-share-member-name { flex-shrink: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; letter-spacing: -0.07px; }
+    .crisp-share-member-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${mutedText(55)}; letter-spacing: -0.07px; }
+    .crisp-share-member .crisp-select { flex-shrink: 0; }
+    .crisp-share-member .crisp-select .crisp-select-value,
+    .crisp-share-member .crisp-select .crisp-select-chevron { color: ${mutedText(55)}; }
+
+    .crisp-share-automations-row { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    .crisp-share-automations-row .crisp-input { flex: 1; min-width: 0; }
+    .crisp-share-automations-row .crisp-select { flex-shrink: 0; }
+
+    .crisp-share-add {
+      flex-shrink: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      height: 32px; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.lg};
+      background: ${c.bgBrandSolid}; color: ${c.fgOnBrand};
+      font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.07px;
+      cursor: pointer; transition: background-color .12s ease, opacity .12s ease;
+    }
+    .crisp-share-add:hover:not(:disabled) { background: ${c.bgBrandSolidPressed}; }
+    .crisp-share-add:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    .crisp-share-learnmore {
+      display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
+      font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${mutedText(63)};
+      text-decoration: none;
+    }
+    .crisp-share-learnmore:hover { color: ${c.fgPrimary}; }
+    .crisp-share-learnmore svg { flex-shrink: 0; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const shareRecipe = resolveRecipe(config);
+export default config;

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

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

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