@crisp-ui-kit/crisp 0.54.1 → 0.54.3

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

@@ -17,10 +17,18 @@ import { contract as c } from "../../tokens/index.js";
 // `title`/`trailing` slot content a consumer supplies. `size.header` (48px)
 // is reused rather than a new token, since it's the same "workspace-switcher
 // header height" measured elsewhere in the sidebar.
+//
+// crisp#576: `border-box` plus a plain `height: ${size.header}` meant the
+// bordered variant's own 1px border was eaten OUT OF the 48px box, leaving
+// only 47px of content -- caught in review of internal/grc's own shell
+// shifting up 1px end-to-end after adopting this component. Re-measured
+// live: Attio's own `<header>` is 49px total (border-box) with the 1px
+// border OUTSIDE the 48px content row, not inside it. `[data-bordered]` now
+// grows the box by the border's own width so content stays 48px either way.
 const config = defineRecipe({
     name: "headerbar",
     base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    &[data-bordered] { border-bottom: 1px solid ${c.borderSubtle}; }
+    &[data-bordered] { height: calc(${c.size.header} + 1px); border-bottom: 1px solid ${c.borderSubtle}; }
     & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; min-width: 0; }
     & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${c.space["2"]}; overflow: hidden; }
     & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; }`,

package/dist/esm/product/importdialog/importdialog.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFileUpload } from "@seed-design/react-file-upload";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import { X } from "lucide-react";
+import * as React from "react";
+import { Button } from "../../components/button/index.js";
+import { cx, hasOpenFloatingLayer, useCrispMessage, withDescribedBy, } from "../../core/index.js";
+import { importdialogRecipe } from "./importdialog.recipe.js";
+let instanceCounter = 0;
+function useImportDialogInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-importdialog-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A full-viewport step wizard — Attio's own CSV import flow (measured live:
+ * `1584x871` filling a ~1600x900 viewport, `border-radius: 0`, no shadow,
+ * opaque white). Composes Zag's dialog machine for focus-trap/scroll-lock/
+ * Escape exactly like `Dialog`/`Drawer`, with its own recipe for the
+ * full-bleed chrome neither of those two share (see importdialog.recipe.ts).
+ *
+ * The step header and footer are generic — the wizard doesn't know about
+ * CSV. Step 1's body is typically `ImportDialogDropzone`; steps 2-4
+ * (map columns / review values / preview import) are consumer-supplied
+ * `children`, since Attio's own column-mapping UI wasn't part of this
+ * measurement pass.
+ */
+export function ImportDialog({ open, onOpenChange, title = "Import", steps, activeStep, onStepClick, children, primaryLabel = "Next", onPrimary, primaryDisabled, "aria-label": ariaLabel, closeLabel: closeLabelProp, className, style, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
+    const id = useImportDialogInstanceId();
+    const service = useMachine(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
+    });
+    const api = dialog.connect(service, normalizeProps);
+    if (!api.open)
+        return null;
+    return (_jsx(Portal, { children: _jsxs("div", { className: importdialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-importdialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-importdialog-positioner", children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-importdialog-content", className), style: style, "data-crisp-importdialog": id, children: [_jsxs("div", { className: "crisp-importdialog-header", children: [_jsx("h2", { ...api.getTitleProps(), className: "crisp-importdialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-importdialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] }), _jsx("nav", { className: "crisp-importdialog-steps", "aria-label": (typeof title === "string" ? title : ariaLabel) ?? "Steps", children: steps.map((step) => {
+                                    const isActive = step.id === activeStep;
+                                    const commonProps = {
+                                        className: "crisp-importdialog-step",
+                                        "data-active": isActive ? "" : undefined,
+                                        "aria-current": isActive ? "step" : undefined,
+                                    };
+                                    return onStepClick ? (_jsx("button", { type: "button", ...commonProps, onClick: () => onStepClick(step.id), children: step.label }, step.id)) : (_jsx("span", { ...commonProps, children: step.label }, step.id));
+                                }) }), _jsx("div", { className: "crisp-importdialog-body", children: children }), _jsx("div", { className: "crisp-importdialog-footer", children: _jsx(Button, { type: "button", intent: "primary", size: "md", disabled: primaryDisabled, onClick: onPrimary, children: primaryLabel }) })] }) })] }) }));
+}
+ImportDialog.displayName = "ImportDialog";
+/**
+ * The step-1 drop target — measured chrome (`border: 1px dashed
+ * rgb(230,231,234)`, `border-radius: 20px`, `background: rgb(251,251,251)`)
+ * over the SAME headless drag/drop + file-picker engine `FileUpload` uses
+ * (`@seed-design/react-file-upload`'s `useFileUpload`), rather than a fork
+ * of it. `FileUpload`'s own rendered markup (a single button carrying one
+ * title + one hint) can't host this dropzone's four separate pieces of copy
+ * — a title, an "or" divider, a "Choose a .CSV file" trigger, and a "Learn
+ * more" link that needs its own `<a href>` — so this composes the hook
+ * directly instead of wrapping `<FileUpload>`, and the engine (not this
+ * file) still owns every bit of drag-state/accept/reject behaviour.
+ */
+export function ImportDialogDropzone({ accept = ".csv", disabled, maxFileSize, onFileAccept, onFileReject, dropLabel = "Drop your .CSV file onto this area to upload", orLabel = "or", chooseLabel = "Choose a .CSV file", learnMoreHref, learnMoreLabel = "Learn more", className, id, ...rest }) {
+    const [rejections, setRejections] = React.useState([]);
+    const { dropzoneProps, triggerProps, hiddenInputProps, inputRef } = useFileUpload({
+        accept,
+        disabled,
+        maxFileSize,
+        maxFiles: 1,
+        onFileReject: (r) => {
+            setRejections(r);
+            onFileReject?.(r);
+        },
+        onFileAccept: (entries) => {
+            setRejections([]);
+            const file = entries[entries.length - 1]?.file;
+            if (file)
+                onFileAccept?.(file);
+        },
+    });
+    return (_jsxs("div", { ...rest, ...dropzoneProps, className: cx("crisp-importdialog-dropzone", className), children: [_jsx("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-importdialog-dropzone-input" }), _jsx("span", { className: "crisp-importdialog-dropzone-title", children: dropLabel }), _jsx("span", { className: "crisp-importdialog-dropzone-or", children: orLabel }), _jsx("button", { ...triggerProps, className: "crisp-importdialog-dropzone-choose", children: chooseLabel }), learnMoreHref && (_jsx("a", { className: "crisp-importdialog-dropzone-learnmore", href: learnMoreHref, target: "_blank", rel: "noreferrer", children: learnMoreLabel })), _jsx("ul", { className: "crisp-importdialog-dropzone-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "crisp-importdialog-dropzone-error", children: r.file.name }, r.file.name))) })] }));
+}
+ImportDialogDropzone.displayName = "ImportDialogDropzone";

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

@@ -0,0 +1,89 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A full-viewport wizard takeover — measured live from Attio's own Import CSV
+// flow (app.attio.com/techpartners/companies -> toolbar "Import / Export" ->
+// "Import CSV"): panel `1584x871` in a ~1600x900 viewport (i.e. it fills the
+// content area, not a small centred modal like `Dialog`), `border-radius: 0`,
+// `box-shadow: none`, opaque `rgb(255,255,255)` background. Unlike
+// Dialog/Drawer's frosted, edge-gutter surfaces (AUTHORING Lesson 30), a
+// full-viewport takeover has no edge to float off of, so it gets its own
+// recipe rather than composing either.
+//
+// The 4-step header renders each step as a 28px pill (`size.row`), 8px
+// corner (`radius.md`), transparent at rest. Attio's own active-step
+// treatment wasn't captured in the measurement pass, so the current step
+// reuses crisp's existing brand-tint pattern (14%/82% `color-mix` — the same
+// ratio `RecordsTable`'s brand-tone tag and `MultiSelect`'s brand chip
+// already use) rather than inventing a new colour — a documented scope
+// decision, not a guess.
+//
+// The dropzone is `border: 1px dashed rgb(230,231,234)` (`borderDropzone`,
+// see tokens/palette.ts), `border-radius: 20px`, `background: rgb(251,251,251)`
+// (`bgSubtle`). 20px sits between the scale's `2xl` (16px) and `full` (999px)
+// with no other measured use yet — left as a raw px per AUTHORING 4b's
+// "genuine one-off" exception rather than added to the shared scale for a
+// single consumer.
+//
+// The primary "Next" button is composed from crisp's own `Button` (`intent`
+// `primary`, `size` `md` — 28px tall, 8px corner, brand solid background —
+// matches the measurement exactly), not a hand-rolled button.
+const config = defineRecipe({
+    name: "importdialog",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .crisp-importdialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-importdialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .crisp-importdialog-content {
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: relative; display: flex; flex-direction: column; box-sizing: border-box;
+      width: 100%; height: 100%; border-radius: 0; background: ${c.bgSurface}; box-shadow: none;
+      transform: none; opacity: 1; transition: opacity 0.2s ease;
+      @starting-style { opacity: 0; }
+    }
+    & .crisp-importdialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-importdialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-importdialog-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-importdialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+
+    & .crisp-importdialog-steps { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; padding: ${c.space["4"]} ${c.space["6"]} 0; }
+    & .crisp-importdialog-step {
+      display: inline-flex; align-items: center; height: ${c.size.row}; padding: 0 ${c.space["2.5"]};
+      border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted};
+      font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: default;
+      transition: background-color .12s, color .12s;
+    }
+    & button.crisp-importdialog-step { cursor: pointer; }
+    & .crisp-importdialog-step[data-active] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .crisp-importdialog-step:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: 1px; }
+
+    & .crisp-importdialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: ${c.space["6"]}; }
+
+    & .crisp-importdialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["6"]}; border-top: 1px solid ${c.borderSubtle}; }
+
+    & .crisp-importdialog-dropzone {
+      box-sizing: border-box; position: relative; flex: 1; min-height: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: ${c.space["1"]}; width: 100%;
+      border: 1px dashed ${c.borderDropzone}; border-radius: 20px; background: ${c.bgSubtle};
+      text-align: center; transition: background-color .12s, border-color .12s;
+    }
+    & .crisp-importdialog-dropzone[data-dragging-over] { border-color: ${c.bgBrandSolid}; background: color-mix(in srgb, ${c.bgBrandSolid} 6%, transparent); }
+    & .crisp-importdialog-dropzone[data-invalid] { border-color: ${c.bgDanger}; }
+    & .crisp-importdialog-dropzone-title { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }
+    & .crisp-importdialog-dropzone-or { color: ${c.fgMuted}; font-size: ${c.text.md}; line-height: 18px; }
+    & .crisp-importdialog-dropzone-choose {
+      border: none; background: none; padding: 0; margin: 0; font-family: inherit;
+      font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.bgBrandSolid}; cursor: pointer;
+    }
+    & .crisp-importdialog-dropzone-choose:hover { color: ${c.bgBrandSolidPressed}; }
+    & .crisp-importdialog-dropzone-choose:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: 2px; border-radius: ${c.radius.sm}; }
+    & .crisp-importdialog-dropzone-learnmore { color: ${c.fgMuted}; font-size: ${c.text.md}; text-decoration: underline; }
+    & .crisp-importdialog-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-importdialog-dropzone-errors { margin: 0; padding: 0; list-style: none; }
+    & .crisp-importdialog-dropzone-errors:empty { position: absolute; }
+    & .crisp-importdialog-dropzone-error { color: ${c.bgDanger}; font-size: ${c.text.md}; line-height: 18px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const importdialogRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export * from "./importdialog.js";
+export * from "./importdialog.recipe.js";

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

@@ -6,6 +6,14 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // column (transparent, border-right) and a flexible main area whose tab bar
 // (14/500 labels over a sliding ink underline) switches content — Overview shows
 // a bordered Highlights stat-grid and an Activity feed.
+//
+// `.crisp-recordpage-panel`'s own `padding-top` (c.space["4"], 16px) was
+// dropped (your-moon/crisp#588): this panel is only ever rendered as Tabs'
+// own children (every branch of `builtinPanel` in recordpage.tsx, all fed to
+// `<Tabs>` below), so it sat inside `.crisp-tabs-panel`, which now carries
+// its own measured 32px top-inset by default — keeping both would have
+// stacked to 48px. Caught by tracing every consumer of `Tabs` before
+// shipping its new default, not by a screenshot.
 const config = defineRecipe({
     name: "recordpage",
     base: `
@@ -125,7 +133,8 @@ const config = defineRecipe({
 
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${c.space["3"]} ${c.space["5"]}; }
 
-    & .crisp-recordpage-panel { padding-top: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    /* no padding-top: Tabs' own panel supplies it now (#588) */
+    & .crisp-recordpage-panel { display: flex; flex-direction: column; gap: ${c.space["4"]}; }
     & .crisp-recordpage-card { border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius["2xl"]}; background: ${c.bgSurface}; overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; letter-spacing: -0.14px; color: ${c.fgPrimary}; padding: ${c.space["3"]} ${c.space["3"]} ${c.space["2"]}; }
     & .crisp-recordpage-hl-card { border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius["2xl"]}; overflow: hidden; }

package/dist/esm/product/recordstable/recordstable.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plug, Plus, Star, Tag, Trash2, TrendingUp, Upload, Users, Workflow, X, } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Avatar } from "../../components/avatar/index.js";
@@ -8,15 +8,67 @@ import { Button } from "../../components/button/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
 import { DatePickerField } from "../../components/datepickerfield/index.js";
 import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
-import { EmptyState } from "../../components/emptystate/index.js";
+import { EmptyState, } from "../../components/emptystate/index.js";
 import { Input } from "../../components/input/index.js";
 import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js";
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
+import { Tooltip } from "../../components/tooltip/index.js";
 import { isInsideLaterFloatingLayer, isRtlElement, useCrispComponentDefaults, usePrefersReducedMotion, } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
+// #534: whether an element's own content is being cut off by its own box --
+// the same fact `.crisp-recordstable-th-label`'s CSS ellipsis is silently
+// applying, exported so the comparison itself (not layout) can be
+// mutation-tested without a real browser. Identical to DataTable's own
+// `isLabelTruncated` (components/datatable/datatable.tsx) -- not shared
+// because `product/` can depend on `components/` but not the other way, and
+// this file already duplicates DataTable's other measured header behaviour
+// rather than reach across that boundary.
+export function isLabelTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+/**
+ * The header label span: plain when it fits, wrapped in the shared `Tooltip`
+ * (full text, `asChild` so the wrapper never displaces the ellipsis CSS the
+ * span already carries -- see `Tooltip`'s own `asChild` doc) once it's
+ * actually cut off. Re-measures on mount and on resize (column drag,
+ * viewport change, label change) via `ResizeObserver`; SSR-safe the same way
+ * `MiddleTruncate` is -- the DOM is only touched inside an effect, so the
+ * server (and the first client paint) renders the plain span.
+ */
+function ThLabel({ label }) {
+    const ref = React.useRef(null);
+    const [overflowing, setOverflowing] = React.useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `label` isn't read in the body, but a rename (col.label changing with the column's own width unchanged) needs a re-measure a ResizeObserver on `el` won't fire for -- same reasoning as Tabs' own re-measure effect.
+    React.useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => setOverflowing(isLabelTruncated(el));
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [label]);
+    // `Tooltip` always wraps the SAME span (never swapped in/out of the tree
+    // based on `overflowing`) so the span's own DOM node identity survives
+    // every toggle -- a real-browser-only bug (happy-dom has no
+    // ResizeObserver, so the test suite never exercised this path): swapping
+    // between a bare `<span>` and `<Tooltip asChild><span/></Tooltip>` changes
+    // the element type at this position, so React unmounts the old span and
+    // mounts a new one; the effect above never re-runs (its deps are
+    // `[label]`, unchanged), so its ResizeObserver keeps watching the now
+    // -detached old node, whose deferred initial callback then reports 0x0 and
+    // flips `overflowing` straight back to false -- the tooltip would never
+    // actually show. `open={false}` when it fits keeps the Tooltip mounted
+    // (asChild costs no extra DOM either way) but pins it permanently closed,
+    // so hovering a non-overflowing header still opens nothing.
+    return (_jsx(Tooltip, { content: label, asChild: true, open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-recordstable-th-label", children: label }) }));
+}
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
 // types whose cell is an always-interactive picker (not double-click-to-edit)
 const PICKER = new Set(["status", "reference", "date", "tags"]);
@@ -100,6 +152,8 @@ export const recordsTableLabels = {
     setRecordPlaceholder: "Set a record…",
     noRecords: "No records yet",
     untitled: "Untitled",
+    importCsv: "Import CSV",
+    connectDataSource: "Connect data source",
     agg: {
         none: "None",
         count: "Count all",
@@ -111,6 +165,9 @@ export const recordsTableLabels = {
     },
     op: {
         contains: "contains",
+        doesnotcontain: "does not contain",
+        startswith: "starts with",
+        endswith: "ends with",
         is: "is",
         isnot: "is not",
         empty: "is empty",
@@ -137,8 +194,17 @@ const compact = new Intl.NumberFormat("en", {
 const CHECK_W = 40;
 const ADDCOL_W = 44;
 const colWidth = (col) => col.width ?? (col.type === "entity" ? 240 : 180);
-const OP_ORDER = ["contains", "is", "isnot", "empty", "notempty"];
-const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const OP_ORDER = [
+    "contains",
+    "doesnotcontain",
+    "startswith",
+    "endswith",
+    "is",
+    "isnot",
+    "empty",
+    "notempty",
+];
+const opNeedsValue = (op) => op !== "empty" && op !== "notempty";
 function matchesFilter(col, row, cond) {
     if (cond.op === "empty")
         return !isFilled(col, row);
@@ -152,6 +218,12 @@ function matchesFilter(col, row, cond) {
         return true;
     if (cond.op === "contains")
         return t.includes(v);
+    if (cond.op === "doesnotcontain")
+        return !t.includes(v);
+    if (cond.op === "startswith")
+        return t.startsWith(v);
+    if (cond.op === "endswith")
+        return t.endsWith(v);
     if (cond.op === "is")
         return t === v;
     return t !== v; // isnot
@@ -433,7 +505,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
  */
-export function RecordsTable({ labels, columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, ...rest }) {
+export function RecordsTable({ labels, columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", emptyStateExtra, className, ...rest }) {
     const [cols, setCols] = React.useState(columnsProp);
     const [data, setData] = React.useState(rowsProp);
     // The table owns `cols`/`data` so it can rename a column, edit a cell, or
@@ -1101,7 +1173,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-recordstable-th-label", children: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { label: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         createPortal(_jsxs("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "crisp-recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
@@ -1170,9 +1242,19 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-recordstable-sum-label", children: t.agg[a] }), _jsx("span", { className: "crisp-recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "crisp-recordstable-sum-label", children: t.calculate })) }), sumOpen &&
                                                             rootRef.current &&
                                                             createPortal(_jsx("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? (_jsx(Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), _jsx("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "crisp-recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
+                                        }), _jsx("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "crisp-recordstable-empty", children: _jsx(EmptyState
+                        // #603: the unfiltered zero-records state, when the consumer
+                        // opts into the extra CTAs, uses Attio's own larger measured
+                        // tile (Users/Workspaces, 138px) instead of the 45px
+                        // filtered-to-zero ring -- two different Attio surfaces.
+                        , { 
+                            // #603: the unfiltered zero-records state, when the consumer
+                            // opts into the extra CTAs, uses Attio's own larger measured
+                            // tile (Users/Workspaces, 138px) instead of the 45px
+                            // filtered-to-zero ring -- two different Attio surfaces.
+                            variant: !activeFilters && emptyStateExtra ? "records" : "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: !activeFilters && emptyStateExtra ? 40 : 18, strokeWidth: 1.25, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [_jsx(Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : (_jsxs("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 createPortal(_jsxs("div", { ref: ctxRef, className: "crisp-recordstable-menu crisp-recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 export const defaultColumns = [

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

@@ -40,7 +40,32 @@ const config = defineRecipe({
     & .crisp-rte-body h1 { font-size: ${c.text.xl}; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; margin-top: ${c.space["4"]}; }
     & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.2px; margin-top: ${c.space["3"]}; }
     & .crisp-rte-body h3 { font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.semibold}; margin-top: ${c.space["2.5"]}; }
-    & .crisp-rte-body ul, & .crisp-rte-body ol { padding-inline-start: ${c.space["5"]}; }
+    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped
+       ul, ol { list-style: none }, specificity 0,0,1) was winning every
+       list marker outright -- this rule set padding but never declared
+       list-style-type, so there was no higher-specificity value (this
+       selector is 0,1,1) to beat the reset with. Split into two
+       single-selector rules, each declaring its own marker type, rather
+       than the old single comma-joined rule ( .crisp-rte-body ul, &
+       .crisp-rte-body ol ) the issue flagged as malformed.
+       #611: padding-inline-start re-measured live once CRUD on the
+       measurement workspace was allowed (a "zz-parity" note with a
+       bulleted list, a nested bulleted list, and a numbered list) --
+       Attio's own <ul>/<ol> measures 36px (getComputedStyle,
+       ~36.1353px), not the 20px placeholder #575 shipped with no real
+       content to check against. 36px isn't in tokens/scale.ts (steps
+       stop at 24px, jump to 32px) and is a single component-intrinsic
+       value, so it stays a raw px per AUTHORING.md's golden rule 4b
+       rather than being rounded to an existing token or added to the
+       shared scale. Marker colour (currentColor via the already-measured
+       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) ==
+       #101112 exactly) and the ~4px li-to-li gap (the existing li
+       margin-top rule below) were re-checked at the same time and
+       already matched -- only the padding was wrong. Attio doesn't vary
+       marker type for a nested list either (nested <ul> is disc too,
+       not circle), which this already doesn't attempt. */
+    & .crisp-rte-body ul { list-style-type: disc; padding-inline-start: 36px; }
+    & .crisp-rte-body ol { list-style-type: decimal; padding-inline-start: 36px; }
     & .crisp-rte-body li { margin-top: ${c.space["1"]}; }
     & .crisp-rte-body blockquote { padding-inline-start: ${c.space["3"]}; border-inline-start: 2px solid ${c.borderDefault}; color: ${c.fgMuted}; }
     & .crisp-rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${c.text.md}; padding: 1px ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }

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

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