@crisp-ui-kit/crisp 0.54.2 → 0.54.3

package/dist/cjs/components/emptystate/emptystate.js

@@ -4,7 +4,8 @@ exports.EmptyState = EmptyState;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const emptystate_recipe_1 = require("./emptystate.recipe");
 /** A centred empty-state panel — icon, title, description, optional action. */
-function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, emptystate_recipe_1.emptystateRecipe)({ variant, className }), ...rest, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "crisp-emptystate-icon", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-desc", children: description })), action && (0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-action", children: action })] }));
+function EmptyState({ icon, title, description, action, learnMore, variant, className, ...rest }) {
+    const learnMoreInner = learnMore && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-emptystate-learnmore-icon", children: learnMore.icon }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-emptystate-learnmore-title", children: learnMore.title })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, emptystate_recipe_1.emptystateRecipe)({ variant, className }), ...rest, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "crisp-emptystate-icon", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-title", children: title }), description != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-desc", children: description })), action && (0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-action", children: action }), learnMore && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-emptystate-learnmore", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-emptystate-learnmore-label", children: learnMore.label ?? "Learn more" }), learnMore.href ? ((0, jsx_runtime_1.jsx)("a", { className: "crisp-emptystate-learnmore-card", href: learnMore.href, onClick: learnMore.onClick, children: learnMoreInner })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-emptystate-learnmore-card", onClick: learnMore.onClick, children: learnMoreInner }))] }))] }));
 }
 EmptyState.displayName = "EmptyState";

package/dist/cjs/components/emptystate/emptystate.recipe.js

@@ -10,7 +10,18 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); color: ${tokens_1.contract.fgMuted}; }
     & .crisp-emptystate-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-emptystate-desc { max-width: 320px; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
-    & .crisp-emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" --
+       inline-flex so one action (the common case) or several lay out the
+       same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: ${tokens_1.contract.space["2"]}; margin-top: ${tokens_1.contract.space["2"]}; }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: ${tokens_1.contract.space["2"]}; margin-top: ${tokens_1.contract.space["6"]}; text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; margin: 0; border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: 18px; background: ${tokens_1.contract.bgSurface}; font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: ${tokens_1.contract.radius.xl}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 2%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-emptystate-learnmore-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }`,
     variants: {
         variant: {
             // compact icon tile (default)
@@ -25,6 +36,20 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
     & .crisp-emptystate-action { margin-top: ${tokens_1.contract.space["2"]}; }`,
+            // #603: Attio's zero-*records* table state (Users/Workspaces with
+            // nothing imported) -- the same dotted-grid backdrop `illustrated`
+            // uses, at its own measured 138x138 square (illustrated's is a
+            // 132x96 rectangle; different surface, not the same number).
+            // Attio's own illustration also draws four small "+" tick marks at
+            // the tile's corners -- a single proprietary SVG asset (confirmed
+            // by inspecting the live DOM: one <svg> with no separately
+            // measurable sub-elements), so not reproduced here per AUTHORING's
+            // "never copy Attio's icon set" rule; the icon itself is supplied
+            // by the consumer via the existing `icon` prop, same as every
+            // other variant.
+            records: `& .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }`,
         },
     },
     defaultVariants: { variant: "default" },

package/dist/cjs/components/personchip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./personchip"), exports);

package/dist/cjs/components/personchip/personchip.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PersonChip = PersonChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tokens_1 = require("../../tokens");
+const avatar_1 = require("../avatar");
+const chip_1 = require("../chip");
+// The same five hashed avatar tones DataTable's own `avatarTone="hashed"`
+// picks from (datatable.tsx's private `TAG_TONES`, transcribed rather than
+// imported — DataTable owns its own file, and this is a one-line pure
+// function, not a visual value that could drift). `neutral`/`brand` are
+// left out: `neutral` is Avatar's own no-photo default (wrong here, every
+// name needs a colour to tell people apart) and `brand` is reserved for an
+// entity that IS the record a cell points at (`RecordChip`'s own tone),
+// which a person mention never is.
+const HASH_TONES = ["brand", "orange", "cyan", "purple", "green"];
+function hashTone(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) >>> 0;
+    return HASH_TONES[h % HASH_TONES.length];
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    return (parts[0][0] + (parts[1]?.[0] ?? "")).toUpperCase();
+}
+/**
+ * A person, as a chip: a small avatar (a photo, or hashed-colour initials)
+ * plus their name, truncating with an ellipsis when it doesn't fit — Attio's
+ * own actor chip (measured live on `techpartners`, Tasks page, "Assigned to"
+ * column): a 16px circular avatar in a neutral `Chip`, `gap: 3px` between
+ * avatar and name (now `Chip`'s own base — every multi-child `Chip` gets
+ * it). Every other value — the pill's height, padding, radius, ring and text
+ * — is already `Chip`'s, unchanged; `PersonChip` adds no recipe of its own.
+ *
+ * Ellipsis only, no `Tooltip` on hover (#623 — no Attio reference for one;
+ * a truncated cell there is revealed by its own click-to-expand, #579, a
+ * different, DataTable-specific interaction).
+ *
+ * Composes `Chip`'s `truncate` CSS directly rather than its string-only
+ * auto-wrap (children here is an avatar plus a name, not a single string),
+ * so the name gets its own `.crisp-chip-label` span while the avatar stays
+ * fixed-size.
+ */
+function PersonChip({ name, avatar, muted, className, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(chip_1.Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), children: avatar ? (0, jsx_runtime_1.jsx)("img", { src: avatar, alt: "" }) : initials(name) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-chip-label", style: muted ? { color: tokens_1.contract.fgNeutralMuted } : undefined, children: name })] }));
+}
+PersonChip.displayName = "PersonChip";

package/dist/cjs/components/table/table.js

@@ -48,11 +48,11 @@ exports.Table = React.forwardRef(({ interactive, surface, className, wrapperClas
 // on the root for the same reason as Textarea: the wrapper is the box a
 // consumer sees and the scroll container they want to size. Native
 // table attributes still reach the <table> below.
-style, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { className: (0, table_recipe_1.tableRecipe)({
+style, tableStyle, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { className: (0, table_recipe_1.tableRecipe)({
         interactive,
         surface,
         className: wrapperClassName,
-    }), style: style, children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), style: style, children: (0, jsx_runtime_1.jsx)("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: className, style: tableStyle, ...props, children: children }) }) })));
 exports.Table.displayName = "Table";
 exports.TableHeader = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("thead", { ref: ref, ...props }));
 exports.TableHeader.displayName = "TableHeader";

package/dist/cjs/components/tabs/tabs.js

@@ -44,7 +44,7 @@ const tabs_keyboard_1 = require("./tabs-keyboard");
  * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
+function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, fill, "aria-label": ariaLabel, ...rest }) {
     // Scoped to this instance: `tab-${value}` and `panel-${value}` are global,
     // so two tab bars sharing a value mint the same id twice and every
     // aria-labelledby resolves to the first one (#227).
@@ -83,7 +83,7 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, cla
         select,
         listRef,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ fill, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
                         return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "crisp-tabs-tab", onClick: () => select(t.value), children: [t.icon, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabs-indicator", style: {

package/dist/cjs/components/tabs/tabs.recipe.js

@@ -15,6 +15,22 @@ const tokens_1 = require("../../tokens");
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
 // gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+//
+// The panel's own `padding-top` (`c.space["8"]`, 32px) is measured
+// separately, live, on a company record page (Overview tab): the gap from
+// the tab row's own bottom to the content below it (the "Highlights"
+// heading) is a clean 32px with zero margin/padding contributed by either
+// boundary — not the 12px a GRC consumer had been carrying locally, which
+// turned out (checking its own history) to have been measured against that
+// app's own demo rendering, never against Attio itself.
+//
+// The panel is also `display: flex; flex-direction: column` (structural,
+// not measured): a consumer's own content — a table sizing itself to "the
+// rest of the space" — needs a flex-column ancestor with a real height to
+// grow into. A GRC consumer used to supply that itself, wrapping every
+// `children(active)` in its own `<div className="flex h-full min-h-0
+// flex-col">`; dropping that wrapper in favour of `fill` without this would
+// have silently broken every such table the moment the wrapper went away.
 const config = (0, core_1.defineRecipe)({
     name: "tabs",
     base: `
@@ -32,11 +48,22 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${tokens_1.contract.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: ${tokens_1.contract.space["8"]}; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // Opt-in: a `Tabs` dropped into a document-flow layout (a docs page, a
+        // demo) should size to its content like anything else. `fill` is for a
+        // consumer embedding it in a fixed-height shell — a record page, a full
+        // screen — matching the record page's own tab area, which visibly
+        // fills all available height (the same live check this file's panel
+        // measurement came from).
+        fill: {
+            true: `height: 100%;`,
+            false: "",
+        },
+    },
+    defaultVariants: { fill: false },
     compoundVariants: [],
 });
 exports.tabsRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });

package/dist/cjs/components/text/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textRecipe = exports.Text = void 0;
+var text_1 = require("./text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.Text; } });
+var text_recipe_1 = require("./text.recipe");
+Object.defineProperty(exports, "textRecipe", { enumerable: true, get: function () { return text_recipe_1.textRecipe; } });

package/dist/cjs/components/text/text.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const text_recipe_1 = require("./text.recipe");
+/**
+ * Plain coloured text — `tone="default"` (the app's primary text colour) or
+ * `"muted"` — for the runs of text that aren't a Badge, a Chip, a link, or
+ * any of crisp's other typed things: a cell's own yes/no, an empty-state
+ * caption, a secondary line under a heading. One component so every such
+ * spot reaches for crisp's own tokens instead of each hand-writing its own
+ * colour utility for the same two values.
+ *
+ * Renders a `<span>` (inherits its size/weight/line-height from context —
+ * see `text.recipe.ts`'s doc for why `Text` sets none of those itself).
+ */
+exports.Text = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, text_recipe_1.textRecipe)({ tone, className }), ...props, children: children }));
+});
+exports.Text.displayName = "Text";

package/dist/cjs/components/text/text.recipe.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.textRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// No new measurement — `tone` just names two colour tokens every other
+// component already carries (`fgPrimary`/`fgNeutralMuted`), for the plain
+// runs of text that aren't any of crisp's other typed things (a Badge, a
+// Chip, a link). Font size/weight/line-height are deliberately NOT set here:
+// unlike Badge or Chip, plain text has no single measured size across the
+// app (a table cell, a label, a caption are all different sizes) — `Text`
+// inherits type from its context, the same choice `MiddleTruncate` makes for
+// the same reason (see its own doc).
+const spec = (0, core_1.defineSpec)({
+    name: "text",
+    // `display: inline` -- a span's own default, stated rather than left
+    // implicit: an EMPTY base compiles to an empty string, and
+    // `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats that
+    // falsy string as "no base rule", which drops the `crisp-text` class
+    // itself, silently, from every instance (caught by this file's own
+    // tests going red on that exact class).
+    base: { display: "inline" },
+    variants: {
+        tone: {
+            default: { color: tokens_1.contract.fgPrimary },
+            muted: { color: tokens_1.contract.fgNeutralMuted },
+        },
+    },
+    defaultVariants: { tone: "default" },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.textRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

package/dist/cjs/index.js

@@ -53,6 +53,7 @@ __exportStar(require("./components/mentionchip"), exports);
 __exportStar(require("./components/menu"), exports);
 __exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
+__exportStar(require("./components/personchip"), exports);
 __exportStar(require("./components/popover"), exports);
 __exportStar(require("./components/progress"), exports);
 __exportStar(require("./components/quantitypicker"), exports);
@@ -70,6 +71,7 @@ __exportStar(require("./components/switch"), exports);
 __exportStar(require("./components/table"), exports);
 __exportStar(require("./components/tabletoolbar"), exports);
 __exportStar(require("./components/tabs"), exports);
+__exportStar(require("./components/text"), exports);
 __exportStar(require("./components/textarea"), exports);
 __exportStar(require("./components/textlink"), exports);
 __exportStar(require("./components/timepicker"), exports);

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

@@ -20,10 +20,18 @@ const tokens_1 = require("../../tokens");
 // `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 = (0, core_1.defineRecipe)({
     name: "headerbar",
     base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    &[data-bordered] { border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    &[data-bordered] { height: calc(${tokens_1.contract.size.header} + 1px); border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
     & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; min-width: 0; }
     & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; overflow: hidden; }
     & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; }`,

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

@@ -9,6 +9,14 @@ const tokens_1 = require("../../tokens");
 // 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 = (0, core_1.defineRecipe)({
     name: "recordpage",
     base: `
@@ -128,7 +136,8 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["5"]}; }
 
-    & .crisp-recordpage-panel { padding-top: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    /* no padding-top: Tabs' own panel supplies it now (#588) */
+    & .crisp-recordpage-panel { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
     & .crisp-recordpage-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
     & .crisp-recordpage-hl-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; overflow: hidden; }

package/dist/cjs/product/recordstable/recordstable.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultRows = exports.defaultColumns = exports.parseCellDate = exports.formatCellDate = exports.recordsTableLabels = void 0;
+exports.isLabelTruncated = isLabelTruncated;
 exports.tagTone = tagTone;
 exports.RecordsTable = RecordsTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -52,9 +53,61 @@ const menu_1 = require("../../components/menu");
 const multiselect_1 = require("../../components/multiselect");
 const select_1 = require("../../components/select");
 const switch_1 = require("../../components/switch");
+const tooltip_1 = require("../../components/tooltip");
 const core_1 = require("../../core");
 const company_logos_1 = require("./company-logos");
 const recordstable_recipe_1 = require("./recordstable.recipe");
+// #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.
+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 ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: label, asChild: true, open: overflowing ? undefined : false, children: (0, jsx_runtime_1.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"]);
@@ -138,6 +191,8 @@ exports.recordsTableLabels = {
     setRecordPlaceholder: "Set a record…",
     noRecords: "No records yet",
     untitled: "Untitled",
+    importCsv: "Import CSV",
+    connectDataSource: "Connect data source",
     agg: {
         none: "None",
         count: "Count all",
@@ -149,6 +204,9 @@ exports.recordsTableLabels = {
     },
     op: {
         contains: "contains",
+        doesnotcontain: "does not contain",
+        startswith: "starts with",
+        endswith: "ends with",
         is: "is",
         isnot: "is not",
         empty: "is empty",
@@ -175,8 +233,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);
@@ -190,6 +257,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
@@ -472,7 +545,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`.
  */
-function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, rows: rowsProp = exports.defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, ...rest }) {
+function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, rows: rowsProp = exports.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
@@ -1140,7 +1213,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)(ThLabel, { label: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
@@ -1209,9 +1282,19 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             }, children: res ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-label", children: t.agg[a] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-value", children: res.value })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-label", children: t.calculate })) }), sumOpen &&
                                                             rootRef.current &&
                                                             (0, react_dom_1.createPortal)((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), (0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState, { variant: "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
+                                        }), (0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.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 ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.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 &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [

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

@@ -43,7 +43,32 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-rte-body h1 { font-size: ${tokens_1.contract.text.xl}; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; margin-top: ${tokens_1.contract.space["4"]}; }
     & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; margin-top: ${tokens_1.contract.space["3"]}; }
     & .crisp-rte-body h3 { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; margin-top: ${tokens_1.contract.space["2.5"]}; }
-    & .crisp-rte-body ul, & .crisp-rte-body ol { padding-inline-start: ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; }
     & .crisp-rte-body blockquote { padding-inline-start: ${tokens_1.contract.space["3"]}; border-inline-start: 2px solid ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${tokens_1.contract.text.md}; padding: 1px ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }