@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -0,0 +1,43 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The entity-list page shell — measured from Attio's Reports / Sequences / Tasks
+// / Notes list views: a view-bar toolbar (leading Sort/Filter, trailing view
+// toggle / settings / New, and a record count), an optional dashed "Favorites"
+// region, then a list with column headers and time-grouped 52px rows.
+const config = defineRecipe({
+    name: "listpage",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
+    & .listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .listpage-count + .listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
+
+    & .listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }
+
+    & .listpage-section-label { padding: ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .listpage-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${c.space["6"]}; border-radius: ${c.radius.xl};
+      background: repeating-linear-gradient(0deg, transparent, transparent) padding-box,
+        border-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }
+    & .listpage-favorites[data-dashed] { box-shadow: none; border: 1px dashed color-mix(in srgb, ${c.fgPrimary} 14%, transparent); }
+
+    & .listpage-colhead { display: flex; align-items: center; gap: ${c.space["2.5"]}; height: 40px; padding: 0 ${c.space["2"]}; box-shadow: inset 0 -1px 0 ${c.borderSubtle}; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .listpage-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
+
+    & .listpage-group { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 36px; padding: 0 ${c.space["2"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .listpage-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; color: ${c.fgMuted}; }
+
+    & .listpage-row { display: flex; align-items: center; gap: ${c.space["2.5"]}; width: 100%; height: 52px; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-top: 1px solid ${c.borderSubtle}; background: none; font-family: inherit; color: inherit; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .listpage-row:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; }
+    & .listpage-row:hover { background: color-mix(in srgb, ${c.fgPrimary} 3%, transparent); }
+    & .listpage-row-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+
+    & .listpage-empty { padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const listpageRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1 @@
+export { NavItem } from "./navitem.js";

package/dist/esm/product/navitem/navitem.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { navitemRecipe } from "./navitem.recipe.js";
+export const NavItem = React.forwardRef(({ active, icon, trailing, className, children, ...props }, ref) => {
+    return (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "navitem-label", children: children }), trailing != null && (_jsx("span", { className: "navitem-trailing", children: trailing }))] }));
+});
+NavItem.displayName = "NavItem";

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

@@ -0,0 +1,33 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "navitem",
+    base: `box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}
+  ; height: 28px; padding-inline: ${c.space["2"]}
+  ; padding-inline-end: ${c.space["1"]}
+  ; border-radius: ${c.radius.lg}
+  ; font-family: ${c.font.sans}
+  ; font-size: ${c.text.lg}
+  ; font-weight: ${c.weight.medium}
+  ; letter-spacing: -0.14px; line-height: 20px; color: ${c.fgPrimary}
+  ; text-decoration: none; cursor: pointer; user-select: none; width: 100%; transition: background-color 0.16s; & .navitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .navitem-trailing { margin-inline-start: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
+  &:hover { background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); }
+  &[data-active] { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const navitemRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        row: {
+            height: "28px",
+            borderRadius: "9px",
+            fontSize: "14px",
+            fontWeight: "500",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { OnboardingChecklist, } from "./onboarding.js";
+export { onboardingRecipe } from "./onboarding.recipe.js";

package/dist/esm/product/onboarding/onboarding.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, MoreHorizontal } from "lucide-react";
+import { onboardingRecipe } from "./onboarding.recipe.js";
+/**
+ * An onboarding checklist card — measured from Attio's floating "Getting
+ * started" widget. Title + optional menu/minimize, a segmented progress bar,
+ * and step rows (completed rows strike through with a brand check).
+ */
+export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
+    const total = steps.length;
+    const done = steps.filter((s) => s.done).length;
+    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+}
+OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -0,0 +1,41 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// An onboarding checklist card — measured from Attio's floating "Getting started"
+// widget: a title + menu/minimize header, a "N/total steps" subtitle, a
+// segmented progress bar (filled pills brand, rest 4% ink), then step rows with
+// an icon + label; completed rows strike through and show a brand check.
+const config = defineRecipe({
+    name: "onboarding",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 272px; padding: ${c.space["3"]}; gap: ${c.space["2"]};
+    border-radius: ${c.radius.xl}; background: ${c.bgSurface}; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
+
+    & .onboarding-head { display: flex; align-items: center; gap: ${c.space["1"]}; }
+    & .onboarding-title { flex: 1; min-width: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .onboarding-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: ${c.size.chip}; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .onboarding-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    & .onboarding-sub { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .onboarding-sub b { font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+
+    & .onboarding-progress { display: flex; gap: ${c.space["1"]}; margin: ${c.space["0.5"]} 0 ${c.space["1"]}; }
+    & .onboarding-seg { flex: 1; height: 4px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); transition: background-color .2s ease; }
+    & .onboarding-seg[data-done] { background: ${c.bgBrandSolid}; }
+
+    & .onboarding-steps { display: flex; flex-direction: column; }
+    & .onboarding-step { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; transition: background-color .12s; }
+    & .onboarding-step:hover { background: ${c.bgRaised}; }
+    & .onboarding-step-icon { display: inline-flex; flex-shrink: 0; color: ${c.fgMuted}; }
+    & .onboarding-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .onboarding-step-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: ${c.radius.full}; color: transparent; }
+    & .onboarding-step[data-done] { cursor: default; }
+    & .onboarding-step[data-done] .onboarding-step-icon, & .onboarding-step[data-done] .onboarding-step-label { color: ${c.fgMuted}; text-decoration: line-through; }
+    & .onboarding-step[data-done]:hover { background: none; }
+    & .onboarding-step[data-done] .onboarding-step-check { background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const onboardingRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { RecordPage } from "./recordpage.js";
+export { recordpageRecipe } from "./recordpage.recipe.js";

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

@@ -0,0 +1,372 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Share2, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, X, Zap, } from "lucide-react";
+import * as React from "react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Checkbox } from "../../components/checkbox/index.js";
+import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
+import { Tabs } from "../../components/tabs/index.js";
+import { tagTone, } from "../recordstable/index.js";
+import { recordpageRecipe } from "./recordpage.recipe.js";
+function valueEmpty(v) {
+    return v == null || v === "" || (Array.isArray(v) && v.length === 0);
+}
+export const recordPageLabels = {
+    breadcrumb: "Breadcrumb",
+    editRecord: "Edit record",
+    recordActions: "Record actions",
+    addToFavourites: "Add to favourites",
+    removeFromFavourites: "Remove from favourites",
+    copyRecordLink: "Copy record link",
+    deleteRecord: "Delete record",
+    linkRecords: "Link records",
+    logANote: "Log a note",
+    createATask: "Create a task",
+    fullScreen: "Full screen",
+    exitFullScreen: "Exit full screen",
+    resizeDetails: "Resize details column",
+    composeEmail: "Compose email",
+    askAttio: "Ask Attio",
+    addToList: "Add to list",
+    highlights: "Highlights",
+    recordDetails: "Record Details",
+    searchFields: "Search fields",
+    closeSearch: "Close search",
+    searchPlaceholder: "Search…",
+    viewAllValues: "View all values",
+    setAValue: "Set a value…",
+    viewAll: "View all",
+    showLess: "Show less",
+    viewLess: "View less",
+    newNote: "New note",
+    newTask: "New task",
+    cancel: "Cancel",
+    noNotesYet: "No notes yet.",
+    noTasksYet: "No tasks yet.",
+    nothingHereYet: "Nothing here yet.",
+    you: "You",
+    justNow: "Just now",
+    tabs: {
+        overview: "Overview",
+        activity: "Activity",
+        emails: "Emails",
+        calls: "Calls",
+        team: "Team",
+        lists: "Lists",
+        notes: "Notes",
+        tasks: "Tasks",
+        files: "Files",
+    },
+    highlightLabels: {
+        connectionStrength: "Connection strength",
+        nextInteraction: "Next calendar interaction",
+        team: "Team",
+        estimatedArr: "Estimated ARR",
+        fundingRaised: "Funding raised",
+        employeeRange: "Employee range",
+        associatedDeals: "Associated deals",
+    },
+    highlightEmpty: {
+        connectionStrength: "No connection",
+        nextInteraction: "No interaction",
+        team: "No team",
+        estimatedArr: "No ARR",
+        fundingRaised: "No funding raised",
+        employeeRange: "No range",
+        associatedDeals: "No deals",
+    },
+    domainSetTo: (value) => (_jsxs(_Fragment, { children: ["Domain set to ", _jsx("b", { children: value })] })),
+    taggedCategories: (count) => (_jsxs(_Fragment, { children: ["Tagged ", _jsx("b", { children: count }), " categories"] })),
+};
+function TagsValue({ values }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const overflow = values.length - 1;
+    const shown = expanded ? values : values.slice(0, 1);
+    return (_jsxs(_Fragment, { children: [shown.map((t) => (_jsx("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))), !expanded && overflow > 0 && (_jsxs("button", { type: "button", className: "recordpage-morevalues", onClick: () => setExpanded(true), children: ["+", overflow] }))] }));
+}
+function FieldValue({ col, row, labels, }) {
+    const v = row[col.key];
+    if (valueEmpty(v))
+        return _jsx("span", { className: "recordpage-empty", children: labels.setAValue });
+    switch (col.type) {
+        case "tags":
+            return _jsx(TagsValue, { values: v });
+        case "number":
+            return _jsx(_Fragment, { children: typeof v === "number" ? v.toLocaleString() : v });
+        case "url":
+            return (_jsx("a", { className: "recordpage-link", href: `https://${v}`, target: "_blank", rel: "noreferrer", children: String(v) }));
+        default:
+            return _jsx(_Fragment, { children: String(v) });
+    }
+}
+function SectionHead({ title, count, action, }) {
+    return (_jsxs("div", { className: "recordpage-section-head", children: [_jsx("span", { className: "recordpage-section-title", children: title }), count != null && (_jsx("span", { className: "recordpage-section-count", children: count })), _jsx("span", { className: "recordpage-section-spacer" }), action] }));
+}
+// A note/task composer: a textarea (or input) with Cancel / submit actions.
+function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, labels, }) {
+    const [text, setText] = React.useState("");
+    const commit = () => {
+        const t = text.trim();
+        if (t)
+            onSubmit(t);
+    };
+    return (_jsxs("div", { className: "recordpage-composer", children: [_jsx("textarea", { 
+                // biome-ignore lint/a11y/noAutofocus: focusing the just-opened composer is expected
+                autoFocus: true, placeholder: placeholder, value: text, rows: multiline ? 3 : 1, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter" && (!multiline || e.metaKey)) {
+                        e.preventDefault();
+                        commit();
+                    }
+                    if (e.key === "Escape")
+                        onCancel();
+                } }), _jsxs("div", { className: "recordpage-composer-actions", children: [_jsx("button", { type: "button", className: "recordpage-btn", onClick: onCancel, children: labels.cancel }), _jsx("button", { type: "button", className: "recordpage-btn recordpage-btn--primary", disabled: !text.trim(), onClick: commit, children: submitLabel })] })] }));
+}
+function NotesSection({ notes, onAdd, labels, }) {
+    const [open, setOpen] = React.useState(false);
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_jsx(Composer, { labels: labels, multiline: true, placeholder: "Write a note\u2026  (\u2318\u21B5 to save)", submitLabel: "Save note", onCancel: () => setOpen(false), onSubmit: (t) => {
+                    onAdd(t);
+                    setOpen(false);
+                } })), notes.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => (_jsxs("div", { className: "recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "recordpage-note-body", children: [_jsxs("div", { className: "recordpage-note-head", children: [_jsx("span", { className: "recordpage-note-author", children: labels.you }), _jsx("span", { className: "recordpage-note-time", children: n.time })] }), _jsx("div", { className: "recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+}
+function TasksSection({ tasks, onAdd, onToggle, labels, }) {
+    const [open, setOpen] = React.useState(false);
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && (_jsx(Composer, { labels: labels, placeholder: "Task name\u2026  (\u21B5 to add)", submitLabel: "Add task", onCancel: () => setOpen(false), onSubmit: (t) => {
+                    onAdd(t);
+                    setOpen(false);
+                } })), tasks.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => (_jsxs("div", { className: "recordpage-task", "data-done": t.done ? "" : undefined, children: [_jsx(Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), _jsx("span", { className: "recordpage-task-text", children: t.text })] }, t.id))))] }));
+}
+function EmptyCard({ icon, children, }) {
+    return (_jsxs("div", { className: "recordpage-emptycard", children: [icon, children] }));
+}
+/**
+ * The full-page company record view — the page Attio opens when you click into a
+ * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
+ * favourite/edit/compose/… actions, a 320px left attribute column, and a tabbed
+ * main area: Overview stacks Highlights, an Activity feed, and Notes / Tasks /
+ * Emails sections (Notes & Tasks are live — add and check things off). Drop it
+ * into the app's main content area.
+ */
+export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, }) {
+    const t = React.useMemo(() => ({
+        ...recordPageLabels,
+        ...labels,
+        tabs: { ...recordPageLabels.tabs, ...labels?.tabs },
+        highlightLabels: {
+            ...recordPageLabels.highlightLabels,
+            ...labels?.highlightLabels,
+        },
+        highlightEmpty: {
+            ...recordPageLabels.highlightEmpty,
+            ...labels?.highlightEmpty,
+        },
+    }), [labels]);
+    const [favorite, setFavorite] = React.useState(false);
+    const [notes, setNotes] = React.useState([]);
+    const [tasks, setTasks] = React.useState([]);
+    const [showAllActivity, setShowAllActivity] = React.useState(false);
+    // Collapsible + searchable Record Details, like Attio.
+    const [detailsOpen, setDetailsOpen] = React.useState(true);
+    const [searchOpen, setSearchOpen] = React.useState(false);
+    const [fieldQuery, setFieldQuery] = React.useState("");
+    const [showAllValues, setShowAllValues] = React.useState(false);
+    // Drag-resizable left details column, like Attio.
+    const [detailsW, setDetailsW] = React.useState(320);
+    const [resizing, setResizing] = React.useState(false);
+    const dragRef = React.useRef(null);
+    const onResizeDown = (e) => {
+        dragRef.current = { x: e.clientX, w: detailsW };
+        setResizing(true);
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onResizeMove = (e) => {
+        if (!dragRef.current)
+            return;
+        const next = dragRef.current.w + (e.clientX - dragRef.current.x);
+        setDetailsW(Math.max(300, Math.min(560, next)));
+    };
+    const onResizeUp = (e) => {
+        dragRef.current = null;
+        setResizing(false);
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    };
+    const idRef = React.useRef(0);
+    const nextId = () => {
+        idRef.current += 1;
+        return `n${idRef.current}`;
+    };
+    const entityCol = columns.find((col) => col.type === "entity");
+    const entity = entityCol
+        ? record[entityCol.key]
+        : undefined;
+    const name = entity?.name ?? "Record";
+    const fields = columns.filter((col) => col.type !== "entity");
+    const q = fieldQuery.trim().toLowerCase();
+    const matchedFields = q
+        ? fields.filter((col) => col.label.toLowerCase().includes(q))
+        : fields;
+    // Attio shows the first 5 fields; "View all values" reveals the rest.
+    const FIELD_LIMIT = 5;
+    const canRevealFields = !q && matchedFields.length > FIELD_LIMIT;
+    const shownFields = canRevealFields && !showAllValues
+        ? matchedFields.slice(0, FIELD_LIMIT)
+        : matchedFields;
+    const byKey = React.useMemo(() => new Map(columns.map((col) => [col.key, col])), [columns]);
+    // Attio's Overview "Highlights" — a fixed set of enrichment stats (measured
+    // from the live app), a couple derived from the record, the rest empty.
+    const arrVal = record.arr;
+    const empVal = record.employees;
+    const compactUsd = (n) => n >= 1e9
+        ? `$${Math.round(n / 1e9)}B`
+        : n >= 1e6
+            ? `$${Math.round(n / 1e6)}M`
+            : `$${n.toLocaleString()}`;
+    const empRange = (n) => n >= 100000
+        ? "100K+"
+        : n >= 10000
+            ? "10K–100K"
+            : n >= 1000
+                ? "1K–10K"
+                : "<1K";
+    const highlights = [
+        {
+            label: t.highlightLabels.connectionStrength,
+            icon: Zap,
+            value: null,
+            empty: t.highlightEmpty.connectionStrength,
+        },
+        {
+            label: t.highlightLabels.nextInteraction,
+            icon: CalendarClock,
+            value: null,
+            empty: t.highlightEmpty.nextInteraction,
+        },
+        {
+            label: t.highlightLabels.team,
+            icon: Users,
+            value: null,
+            empty: t.highlightEmpty.team,
+        },
+        {
+            label: t.highlightLabels.estimatedArr,
+            icon: DollarSign,
+            value: typeof arrVal === "number" ? compactUsd(arrVal) : null,
+            empty: t.highlightEmpty.estimatedArr,
+        },
+        {
+            label: t.highlightLabels.fundingRaised,
+            icon: Landmark,
+            value: null,
+            empty: t.highlightEmpty.fundingRaised,
+        },
+        {
+            label: t.highlightLabels.employeeRange,
+            icon: UsersRound,
+            value: typeof empVal === "number" ? empRange(empVal) : null,
+            empty: t.highlightEmpty.employeeRange,
+        },
+    ];
+    const ti = { size: 15, strokeWidth: 1.75 };
+    const tabs = [
+        { value: "overview", label: t.tabs.overview, icon: _jsx(LayoutGrid, { ...ti }) },
+        {
+            value: "activity",
+            label: t.tabs.activity,
+            icon: _jsx(ActivityIcon, { ...ti }),
+        },
+        { value: "emails", label: t.tabs.emails, icon: _jsx(Mail, { ...ti }), badge: 0 },
+        { value: "calls", label: t.tabs.calls, icon: _jsx(Phone, { ...ti }), badge: 0 },
+        { value: "team", label: t.tabs.team, icon: _jsx(Users, { ...ti }), badge: 0 },
+        {
+            value: "notes",
+            label: t.tabs.notes,
+            icon: _jsx(FileText, { ...ti }),
+            badge: notes.length,
+        },
+        {
+            value: "tasks",
+            label: t.tabs.tasks,
+            icon: _jsx(SquareCheck, { ...ti }),
+            badge: tasks.length,
+        },
+        { value: "files", label: t.tabs.files, icon: _jsx(Folder, { ...ti }) },
+        {
+            value: "deals",
+            label: t.highlightLabels.associatedDeals,
+            icon: _jsx(CircleDollarSign, { ...ti }),
+            badge: 0,
+        },
+    ];
+    const addNote = (text) => setNotes((n) => [{ id: nextId(), text, time: t.justNow }, ...n]);
+    const addTask = (text) => setTasks((t) => [{ id: nextId(), text, done: false }, ...t]);
+    const toggleTask = (id) => setTasks((t) => t.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
+    // A small, plausible activity feed derived from the record's own fields.
+    const domain = byKey.get("domain");
+    const cats = byKey.get("categories");
+    const activity = [
+        domain && !valueEmpty(record[domain.key])
+            ? {
+                id: "domain",
+                text: _jsx(_Fragment, { children: t.domainSetTo(String(record[domain.key])) }),
+                time: "2 hours ago",
+            }
+            : null,
+        cats && !valueEmpty(record[cats.key])
+            ? {
+                id: "cats",
+                text: t.taggedCategories(record[cats.key].length),
+                time: "1 day ago",
+            }
+            : null,
+        {
+            id: "created",
+            text: (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
+            time: "1 day ago",
+        },
+    ].filter(Boolean);
+    const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
+    const activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), _jsx("div", { className: "recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "recordpage-feed-item", children: [_jsx("span", { className: "recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "recordpage-feed-body", children: [a.text, _jsx("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
+    const emailsEmpty = (_jsxs(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: ["No emails logged with ", name, " yet."] }));
+    const panel = (active) => {
+        switch (active) {
+            case "overview":
+                return (_jsxs("div", { className: "recordpage-panel", children: [_jsxs("section", { children: [_jsx("div", { className: "recordpage-section-title", children: t.highlights }), _jsx("div", { className: "recordpage-hl-card", children: _jsx("div", { className: "recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "recordpage-hl-cell", children: [_jsx(h.icon, { className: "recordpage-hl-icon", size: 15, strokeWidth: 1.75 }), _jsx("div", { className: "recordpage-hl-label", children: h.label }), _jsx("div", { className: "recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] }), activityFeed, _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }), _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
+            case "activity":
+                return _jsx("div", { className: "recordpage-panel", children: activityFeed });
+            case "notes":
+                return (_jsx("div", { className: "recordpage-panel", children: _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
+            case "tasks":
+                return (_jsx("div", { className: "recordpage-panel", children: _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
+            case "emails":
+                return _jsx("div", { className: "recordpage-panel", children: emailsEmpty });
+            default:
+                return (_jsx("div", { className: "recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
+        }
+    };
+    return (_jsxs("div", { className: recordpageRecipe({ className }), children: [_jsxs("div", { className: "recordpage-topbar", children: [_jsxs("nav", { className: "recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "recordpage-actions", children: [_jsxs("button", { type: "button", className: "recordpage-action recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "recordpage-action recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "recordpage-action recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "recordpage-body", children: [_jsxs("aside", { className: "recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.copyRecordLink, children: _jsx(Copy, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.logANote, children: _jsx(FileText, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.linkRecords, children: _jsx(Share2, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "recordpage-quickbtn", "aria-label": t.createATask, children: _jsx(SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "recordpage-section", children: [_jsxs("div", { className: "recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
+                                                // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
+                                                autoFocus: true, type: "text", className: "recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
+                                                    if (e.key === "Escape") {
+                                                        setSearchOpen(false);
+                                                        setFieldQuery("");
+                                                    }
+                                                } })) : (_jsxs("button", { type: "button", className: "recordpage-collapse", "data-collapsed": detailsOpen ? undefined : "", "aria-expanded": detailsOpen, onClick: () => setDetailsOpen((o) => !o), children: [t.recordDetails, _jsx(ChevronDown, { className: "recordpage-chev", size: 12, strokeWidth: 2.5 })] })), _jsx("button", { type: "button", className: "recordpage-detailsearch", "data-active": searchOpen ? "" : undefined, "aria-label": searchOpen ? t.closeSearch : t.searchFields, "aria-pressed": searchOpen, onClick: () => {
+                                                    setSearchOpen((s) => !s);
+                                                    setFieldQuery("");
+                                                    if (!searchOpen)
+                                                        setDetailsOpen(true);
+                                                }, children: searchOpen ? (_jsx(X, { size: 14, strokeWidth: 1.75 })) : (_jsx(Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
+                                        (shownFields.length > 0 ? (_jsxs(_Fragment, { children: [shownFields.map((col) => (_jsxs("div", { className: "recordpage-field", children: [_jsxs("span", { className: "recordpage-field-label", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, _jsx("span", { className: "recordpage-field-label-text", children: col.label })] }), _jsx("span", { className: "recordpage-field-value", children: _jsx(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--section", onClick: () => {
+                                                        // Attio: revealing all fields also opens the (focused)
+                                                        // field search; collapsing closes it.
+                                                        const next = !showAllValues;
+                                                        setShowAllValues(next);
+                                                        setSearchOpen(next);
+                                                        if (!next)
+                                                            setFieldQuery("");
+                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "recordpage-emptystate", children: "This record has not been added to any lists." })] })] }), _jsx("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+                            if (e.key === "ArrowLeft")
+                                setDetailsW((w) => Math.max(300, w - 16));
+                            else if (e.key === "ArrowRight")
+                                setDetailsW((w) => Math.min(560, w + 16));
+                        } }), _jsx("main", { className: "recordpage-main", children: _jsx(Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
+}
+RecordPage.displayName = "RecordPage";