@crisp-ui-kit/crisp 0.57.2 → 0.57.4

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

@@ -124,6 +124,19 @@ const config = defineRecipe({
        the component's own comment) -- NOT \`display: contents\`, which
        drops a button's accessible semantics in some engines. */
     & .crisp-recordpage-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: ${c.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
+    /* #990: measured live on app.attio.com's URL/domain attribute (hover the
+       row) -- the link itself never carries the edit affordance, a
+       separate 20px button trails it, mounting only on hover: 16px icon,
+       rgba(0,0,0,0.55) (crisp's own color-mix(fgPrimary 55%) -- the exact
+       formula .crisp-datatable-entity-action's identical muted icon
+       already uses), 6px radius (radius.sm). Reveal is opacity-based,
+       not the mount/unmount Attio's own DOM does, so a keyboard user
+       tabbing to it (:focus-visible) doesn't need the row hovered first --
+       same mechanism DataTable's own row actions (#601) already use. */
+    & .crisp-recordpage-edit-affordance { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s, color .12s; }
+    & .crisp-recordpage-field:hover .crisp-recordpage-edit-affordance,
+    & .crisp-recordpage-edit-affordance:focus-visible { opacity: 1; }
+    & .crisp-recordpage-edit-affordance:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .crisp-recordpage-empty { color: ${c.fgMuted}; }
 
     /* #431: measured live on app.attio.com's record page Details column --
@@ -226,6 +239,31 @@ const config = defineRecipe({
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: ${c.space["1.5"]}; padding: ${c.space["6"]} ${c.space["3"]}; border: 1px dashed ${c.borderDefault}; border-radius: ${c.radius.xl}; color: ${c.fgMuted}; font-size: ${c.text.md}; text-align: center; }
     & .crisp-recordpage-emptycard svg { color: ${c.fgMuted}; opacity: 0.7; }
 
+    /* #622: the Activity tab's own toolbar -- "Filters" + "+ Add meeting",
+       both the same measured button chrome as the topbar's own action
+       buttons (28px, e.field shadow, 14/500 label). */
+    & .crisp-recordpage-tabtoolbar { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
+
+    /* #622: Files tab's empty state -- measured live on Attio's own record
+       page (a company with no files uploaded). The 138x138 dotted-grid
+       backdrop is the same measured tile EmptyState's records variant uses
+       (crisp/#603), duplicated here rather than composed through that
+       component because this surface's title (16/600) and body (14/500,
+       63%-mixed fgPrimary, not the flat fgMuted EmptyState uses) measure to
+       their own values, matching neither of that component's existing
+       variants. */
+    & .crisp-recordpage-panel--center { flex: 1; align-items: center; justify-content: center; }
+    & .crisp-recordpage-illustrated { display: flex; flex-direction: column; align-items: center; gap: ${c.space["1.5"]}; text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: ${c.space["2"]}; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-recordpage-illustrated-title { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    /* #988: the Calls tab's own gated state measures a larger 20/24 title
+       than Files/Deals' 16/600 -- Attio's own "empty view" pattern (the
+       same 20/600 EmptyState's page/records variants already carry, not a
+       one-off). */
+    & .crisp-recordpage-illustrated-title--lg { font-size: 20px; line-height: 24px; }
+    & .crisp-recordpage-illustrated-desc { max-width: 320px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: ${c.space["1.5"]}; margin-top: ${c.space["2"]}; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
 
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
@@ -236,6 +274,31 @@ const config = defineRecipe({
     & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+
+    /* #620: the "Run workflow" quick action's own popover -- measured live:
+       a centered, top-anchored overlay sharing product/command's own
+       Cmd-K-palette shell exactly (elevation.modal, bgOverlayFrost 60% +
+       blur(15px), radius 2xl/xl outer/inner) -- duplicated here rather than
+       imported, the same "own copy per product surface" choice already
+       made elsewhere in this codebase (product/command sits outside this
+       lane's own product/recordpage ownership). */
+    & .crisp-recordpage-workflow-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-recordpage-workflow-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; }
+    & .crisp-recordpage-workflow-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 808px; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity .2s ease, transform .2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-recordpage-workflow-card { display: flex; flex-direction: column; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; overflow: hidden; }
+    & .crisp-recordpage-workflow-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; }
+    & .crisp-recordpage-workflow-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.07px; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-workflow-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: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-recordpage-workflow-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-recordpage-workflow-search { display: flex; align-items: center; min-height: 52px; padding: ${c.space["4"]}; }
+    & .crisp-recordpage-workflow-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.xl}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-workflow-input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-recordpage-workflow-sep { height: 1px; flex-shrink: 0; background: ${c.borderSubtle}; }
+    & .crisp-recordpage-workflow-empty { display: flex; flex-direction: column; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["6"]} ${c.space["3"]}; text-align: center; }
+    & .crisp-recordpage-workflow-create { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 0 ${c.space["3"]}; margin-top: ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-workflow-create:hover { background: ${c.bgRaised}; }
+    & .crisp-recordpage-workflow-footer { display: flex; align-items: center; height: 44px; flex-shrink: 0; padding: 0 ${c.space["2.5"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-recordpage-workflow-footer-nav { display: flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -0,0 +1,2 @@
+export { RecordPicker, } from "./recordpicker.js";
+export { recordpickerRecipe } from "./recordpicker.recipe.js";

package/dist/esm/product/recordpicker/recordpicker.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { useListboxKeyboard } from "../../components/select/index.js";
+import { Spinner } from "../../components/spinner/index.js";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
+import { recordpickerRecipe } from "./recordpicker.recipe.js";
+/**
+ * The record-search picker behind a task's "Add record" chip -- measured
+ * live on app.attio.com's Tasks page ("Edit task" -> "Add record"): a
+ * "Search..." row, then a FLAT list mixed across every object type (a
+ * person result sat first, ahead of several companies, with no section
+ * headers -- unlike the mention picker's own grouped Users/Records shape,
+ * crisp#646). Attio's own live search took a moment to resolve, showing a
+ * centred spinner + "Loading..." row meanwhile; not independently
+ * re-measured against a second empty-results case, so `emptyLabel`'s
+ * default copy ("No records") is inferred by symmetry with
+ * `AssigneePicker`'s own measured "No users", not itself pixel-measured.
+ */
+export function RecordPicker({ records, loading = false, onSelect, query: queryProp, onQueryChange, searchLabel: searchLabelProp, loadingLabel: loadingLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = useCrispMessage(searchLabelProp, "Search...");
+    const loadingLabel = useCrispMessage(loadingLabelProp, "Loading...");
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only --
+    // same reasoning as `Inbox`'s own `emptyTitle`/`emptySubtitle`.
+    const crispMessages = useCrispMessages();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No records"] ?? "No records";
+    const [internalQuery, setInternalQuery] = React.useState("");
+    const query = queryProp ?? internalQuery;
+    const setQuery = (q) => {
+        if (queryProp === undefined)
+            setInternalQuery(q);
+        onQueryChange?.(q);
+    };
+    const [highlight, setHighlight] = React.useState(0);
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
+    const select = (r) => {
+        onSelect?.(r);
+    };
+    const { onKeyDown } = useListboxKeyboard({
+        enabledIndexes: records.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
+            const r = records[highlight];
+            if (r)
+                select(r);
+        },
+        close: () => { },
+        dismiss: () => { },
+    });
+    const activeId = !loading && highlight >= 0 && highlight < records.length
+        ? optionId(highlight)
+        : undefined;
+    return (_jsxs("div", { className: recordpickerRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpicker-search", children: [_jsx(Search, { size: 16, strokeWidth: 1.75 }), _jsx("input", { type: "text", className: "crisp-recordpicker-search-input", placeholder: searchLabel, value: query, onChange: (e) => {
+                            setQuery(e.target.value);
+                            setHighlight(0);
+                        }, onKeyDown: onKeyDown, role: "combobox", "aria-expanded": "true", "aria-controls": listboxId, "aria-activedescendant": activeId, 
+                        // biome-ignore lint/a11y/noAutofocus: focus the search field the moment its enclosing popover opens
+                        autoFocus: true })] }), loading ? (_jsxs("div", { className: "crisp-recordpicker-loading", children: [_jsx(Spinner, { size: 16 }), loadingLabel] })) : records.length === 0 ? (_jsx("div", { className: "crisp-recordpicker-empty", children: emptyLabel })) : (_jsx("div", { className: "crisp-recordpicker-list", role: "listbox", id: listboxId, children: records.map((r, i) => (_jsxs("button", { type: "button", id: optionId(i), role: "option", tabIndex: -1, "aria-selected": i === highlight, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-recordpicker-option", onMouseEnter: () => setHighlight(i), onClick: () => select(r), children: [r.icon, r.name] }, r.id))) }))] }));
+}
+RecordPicker.displayName = "RecordPicker";

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

@@ -0,0 +1,33 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The record picker behind a task's "Add record" chip -- measured live on
+// app.attio.com's Tasks page ("Edit task" -> "Add record" -> its own
+// sub-popover, same measured 350px width as `AssigneePicker`'s): a
+// borderless "Search..." row, then a flat list mixed across every object
+// type (not grouped into sections -- that's the *mention* picker's own
+// shape, crisp#646, a different, still-ungrouped-by-default surface here),
+// each row a consumer-supplied type icon + the record's name. A "Loading..."
+// row appears while results are in flight (the same measured centred
+// Spinner + text DataTable's own #826 loading state already uses).
+const config = defineRecipe({
+    name: "recordpicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${c.font.sans};
+
+    & .crisp-recordpicker-search { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["3"]}; color: ${c.fgMuted}; }
+    & .crisp-recordpicker-search svg { flex-shrink: 0; }
+    & .crisp-recordpicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; color: ${c.fgPrimary}; }
+    & .crisp-recordpicker-search-input::placeholder { color: ${c.fgMuted}; }
+
+    & .crisp-recordpicker-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: ${c.space["8"]} ${c.space["3"]}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
+    & .crisp-recordpicker-empty { padding: ${c.space["4"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+
+    & .crisp-recordpicker-list { display: flex; flex-direction: column; margin: 0; padding: ${c.space["1"]}; list-style: none; max-height: 280px; overflow-y: auto; }
+    & .crisp-recordpicker-option { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; box-sizing: border-box; height: 32px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; }
+    & .crisp-recordpicker-option svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-recordpicker-option:hover, & .crisp-recordpicker-option[data-highlighted] { background: ${c.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const recordpickerRecipe = resolveRecipe(config);
+export default config;

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

@@ -1,2 +1,2 @@
-export { SavedViews, } from "./savedviews.js";
+export { SavedViews, SavedViewsSaveBar, } from "./savedviews.js";
 export { savedviewsRecipe } from "./savedviews.recipe.js";

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

@@ -3,7 +3,7 @@ import { ChevronDown, MoreVertical, Plus, Users2 } from "lucide-react";
 import * as React from "react";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { useListboxKeyboard } from "../../components/select/index.js";
-import { FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
+import { cx, FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
 import { savedviewsRecipe } from "./savedviews.recipe.js";
 // #618: the same fallback Select's own `optionText` gives a non-string
 // `label` — `keywords` first, then the plain string itself, then (rather
@@ -200,3 +200,24 @@ export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, o
                             }, children: [_jsx("span", { className: "crisp-savedviews-row-icon", "aria-hidden": "true", children: _jsx(Plus, { size: 16, strokeWidth: 1.75 }) }), _jsx("span", { className: "crisp-savedviews-row-label", children: createLabel })] })] }) }))] }));
 }
 SavedViews.displayName = "SavedViews";
+/**
+ * The "unsaved changes" bar for a currently loaded saved view — Attio's own
+ * "Discard changes" + a split "Save for everyone ▾" button, measured live
+ * (app.attio.com, a saved Companies view with its sort changed). Not a part
+ * of `SavedViews`' own trigger/panel: Attio renders this in the page
+ * toolbar's own trailing slot, replacing whatever sits there at rest
+ * (Import/Export, "+ New …") — the same slot `TableToolbar`'s own
+ * `children` prop already documents ("Right-aligned actions after the
+ * count"). A consumer swaps this in for that slot's usual content once its
+ * own dirty check (live filters/sort/columns vs. the loaded view's
+ * snapshot) is true, and swaps it back out once it's false — this
+ * component itself carries no dirty state or visibility toggle.
+ */
+export function SavedViewsSaveBar({ onSave, onDiscard, onSaveAsNew, discardLabel: discardLabelProp, saveLabel: saveLabelProp, saveAsNewLabel: saveAsNewLabelProp, saveOptionsLabel: saveOptionsLabelProp, className, ...rest }) {
+    const discardLabel = useCrispMessage(discardLabelProp, "Discard changes");
+    const saveLabel = useCrispMessage(saveLabelProp, "Save for everyone");
+    const saveAsNewLabel = useCrispMessage(saveAsNewLabelProp, "Save as new view");
+    const saveOptionsLabel = useCrispMessage(saveOptionsLabelProp, "More save options");
+    return (_jsxs("div", { className: cx("crisp-savedviews-savebar", className), ...rest, children: [_jsx("button", { type: "button", className: "crisp-savedviews-savebar-discard", onClick: onDiscard, children: discardLabel }), _jsxs("div", { className: "crisp-savedviews-savebar-save-group", children: [_jsx("button", { type: "button", className: "crisp-savedviews-savebar-save", onClick: onSave, children: saveLabel }), onSaveAsNew && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-savedviews-savebar-save-chevron", "aria-label": saveOptionsLabel, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }), children: _jsx(MenuItem, { onSelect: onSaveAsNew, children: saveAsNewLabel }) }))] })] }));
+}
+SavedViewsSaveBar.displayName = "SavedViewsSaveBar";

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