@crispy-seed/data-table 0.8.0 → 0.10.0

package/dist/index.js

@@ -10,8 +10,8 @@ function __insertCSS(code) {
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useCallback, useMemo, useState, useRef, useEffect, createContext, useContext, useId } from 'react';
-import { dataAttr, elementProps, ariaAttr, mergeProps as mergeProps$1 } from '@seed-design/dom-utils';
+import React__default, { forwardRef, useCallback, useState, useMemo, useRef, useEffect, createContext, useContext, useId } from 'react';
+import { dataAttr, elementProps, ariaAttr, mergeProps as mergeProps$1, buttonProps } from '@seed-design/dom-utils';
 import { checkbox } from '@seed-design/css/recipes/checkbox';
 import { checkmark } from '@seed-design/css/recipes/checkmark';
 import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
@@ -34,6 +34,7 @@ import { textInput } from '@seed-design/css/recipes/text-input';
 import { Menu, useMenuContext, useMenuItemContext } from '@seed-design/react-menu';
 import { menu } from '@seed-design/css/recipes/menu';
 import { menuItem } from '@seed-design/css/recipes/menu-item';
+import { tabs } from '@seed-design/css/recipes/tabs';
 
 // src/IconArrowUpLine.tsx
 var Icon$h = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
@@ -205,36 +206,8 @@ var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
 var IconDot3HorizontalLine = /*#__PURE__*/ forwardRef(Icon$b);
 var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
 
-// src/IconEyeLine.tsx
-var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        "data-seed-icon": "true",
-        width: size,
-        height: size,
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsx("g", {
-            children: /* @__PURE__ */ jsxs("g", {
-                children: [
-                    /* @__PURE__ */ jsx("path", {
-                        d: "M1.68785 14.0027C2.21223 14.1751 2.77712 13.8901 2.94996 13.3659C3.07236 13.0089 3.23163 12.663 3.39915 12.3254C3.7229 11.6731 4.22663 10.8054 4.94433 9.94191C6.3729 8.22305 8.6137 6.55273 12.0003 6.55273C15.3868 6.55273 17.6276 8.22305 19.0562 9.94191C19.7739 10.8054 20.2776 11.6731 20.6014 12.3254C20.7627 12.6505 20.8778 12.9189 20.9513 13.1024C21.0036 13.233 21.0295 13.302 21.0509 13.3669C21.2241 13.8904 21.7886 14.175 22.3127 14.0027C22.8373 13.8301 23.1225 13.264 22.9499 12.7394C22.9158 12.6366 22.8793 12.5369 22.8078 12.3586C22.717 12.1319 22.5805 11.8144 22.3929 11.4363C22.0187 10.6824 21.435 9.67502 20.5943 8.66356C18.9062 6.63242 16.147 4.55273 12.0003 4.55273C7.8535 4.55273 5.09431 6.63242 3.40621 8.66356C2.56557 9.67502 1.9818 10.6824 1.60765 11.4363C1.42001 11.8144 1.28353 12.1319 1.1927 12.3586C1.12106 12.5374 1.08448 12.6372 1.05033 12.7403C0.877781 13.2649 1.16321 13.8301 1.68785 14.0027Z",
-                        fill: "currentColor"
-                    }),
-                    /* @__PURE__ */ jsx("path", {
-                        d: "M12.576 9.10187C12.7569 9.46282 12.7029 9.89712 12.4393 10.2029C12.0675 10.634 11.8429 11.1792 11.8429 11.7727C11.8429 13.0923 12.9123 14.1613 14.2263 14.1613C14.8331 14.1613 15.3926 13.9188 15.8177 13.522C16.1163 13.2434 16.5544 13.1743 16.9243 13.3476C17.2941 13.5209 17.5214 13.9017 17.4984 14.3095C17.3348 17.2106 15.0545 19.5498 12.0068 19.5498C8.94739 19.5498 6.5 16.9571 6.5 14.0363C6.5 11.1187 8.76722 8.75104 11.6123 8.55225C12.015 8.52411 12.3952 8.74091 12.576 9.10187Z",
-                        fill: "currentColor"
-                    })
-                ]
-            })
-        })
-    });
-var IconEyeLine = /*#__PURE__*/ forwardRef(Icon$a);
-var IconEyeLine_default = IconEyeLine;
-
 // src/IconMagnifyingglassLine.tsx
-var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -252,11 +225,11 @@ var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconMagnifyingglassLine = /*#__PURE__*/ forwardRef(Icon$9);
+var IconMagnifyingglassLine = /*#__PURE__*/ forwardRef(Icon$a);
 var IconMagnifyingglassLine_default = IconMagnifyingglassLine;
 
 // src/IconSlider2HorizontalLine.tsx
-var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -284,11 +257,11 @@ var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconSlider2HorizontalLine = /*#__PURE__*/ forwardRef(Icon$8);
+var IconSlider2HorizontalLine = /*#__PURE__*/ forwardRef(Icon$9);
 var IconSlider2HorizontalLine_default = IconSlider2HorizontalLine;
 
 // src/IconPersonCircleLine.tsx
-var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -316,11 +289,11 @@ var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconPersonCircleLine = /*#__PURE__*/ forwardRef(Icon$7);
+var IconPersonCircleLine = /*#__PURE__*/ forwardRef(Icon$8);
 var IconPersonCircleLine_default = IconPersonCircleLine;
 
 // src/IconPlusLine.tsx
-var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -336,11 +309,11 @@ var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconPlusLine = /*#__PURE__*/ forwardRef(Icon$6);
+var IconPlusLine = /*#__PURE__*/ forwardRef(Icon$7);
 var IconPlusLine_default = IconPlusLine;
 
 // src/IconMinusLine.tsx
-var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -356,11 +329,11 @@ var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconMinusLine = /*#__PURE__*/ forwardRef(Icon$5);
+var IconMinusLine = /*#__PURE__*/ forwardRef(Icon$6);
 var IconMinusLine_default = IconMinusLine;
 
 // src/IconXmarkLine.tsx
-var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -376,11 +349,11 @@ var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconXmarkLine = /*#__PURE__*/ forwardRef(Icon$4);
+var IconXmarkLine = /*#__PURE__*/ forwardRef(Icon$5);
 var IconXmarkLine_default = IconXmarkLine;
 
 // src/IconCheckmarkLine.tsx
-var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -398,9 +371,45 @@ var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
             })
         })
     });
-var IconCheckmarkLine = /*#__PURE__*/ forwardRef(Icon$3);
+var IconCheckmarkLine = /*#__PURE__*/ forwardRef(Icon$4);
 var IconCheckmarkLine_default = IconCheckmarkLine;
 
+// src/IconCorner4OutwardLine.tsx
+var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx("g", {
+            children: /* @__PURE__ */ jsxs("g", {
+                children: [
+                    /* @__PURE__ */ jsx("path", {
+                        d: "M4.99961 4.00001L8.5 4C9.05228 4 9.5 3.55228 9.5 3C9.5 2.44772 9.05228 2 8.5 2L4.99959 2.00001C3.3426 2.00003 2 3.34333 2 4.99993V8.5C2 9.05228 2.44772 9.5 3 9.5C3.55228 9.5 4 9.05228 4 8.5V4.99993C4 4.44751 4.44757 4.00002 4.99961 4.00001Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        d: "M15.5 2C14.9477 2 14.5 2.44772 14.5 3C14.5 3.55228 14.9477 4 15.5 4H19C19.5525 4 20 4.44762 20 4.99974V8.5C20 9.05228 20.4477 9.5 21 9.5C21.5523 9.5 22 9.05228 22 8.5V4.99974C22 3.34271 20.6567 2 19 2H15.5Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        d: "M3.00001 14.5C3.5523 14.5 4.00001 14.9477 4.00001 15.5L4 19.0002C3.99999 19.5523 4.44759 20 5.00007 20H8.49995C9.05223 20 9.49995 20.4477 9.49995 21C9.49995 21.5523 9.05223 22 8.49995 22H5.00007C3.34331 22 1.99998 20.6572 2 19.0001L2.00001 15.5C2.00001 14.9477 2.44773 14.5 3.00001 14.5Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        d: "M22 15.5C22 14.9477 21.5523 14.5 21 14.5C20.4477 14.5 20 14.9477 20 15.5V19.0003C20 19.5524 19.5525 20 19 20H15.5C14.9477 20 14.5 20.4477 14.5 21C14.5 21.5523 14.9477 22 15.5 22H19C20.6567 22 22 20.6573 22 19.0003V15.5Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconCorner4OutwardLine = /*#__PURE__*/ forwardRef(Icon$3);
+var IconCorner4OutwardLine_default = IconCorner4OutwardLine;
+
 // src/IconChevronDownSmallLine.tsx
 var Icon$2 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
         viewBox: "0 0 24 24",
@@ -443,8 +452,8 @@ var Icon$1 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
 var IconCheckmarkFatFill = /*#__PURE__*/ forwardRef(Icon$1);
 var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
 
-var __defProp$3 = Object.defineProperty;
-var __name$3 = (target, value)=>__defProp$3(target, "name", {
+var __defProp$5 = Object.defineProperty;
+var __name$5 = (target, value)=>__defProp$5(target, "name", {
         value,
         configurable: true
     });
@@ -455,7 +464,7 @@ function setRef(ref, value) {
         ref.current = value;
     }
 }
-__name$3(setRef, "setRef");
+__name$5(setRef, "setRef");
 function composeRefs(...refs) {
     return (node)=>{
         let hasCleanup = false;
@@ -480,14 +489,14 @@ function composeRefs(...refs) {
         }
     };
 }
-__name$3(composeRefs, "composeRefs");
+__name$5(composeRefs, "composeRefs");
 function useComposedRefs(...refs) {
     return React.useCallback(composeRefs(...refs), refs);
 }
-__name$3(useComposedRefs, "useComposedRefs");
+__name$5(useComposedRefs, "useComposedRefs");
 
-var __defProp$2 = Object.defineProperty;
-var __name$2 = (target, value)=>__defProp$2(target, "name", {
+var __defProp$4 = Object.defineProperty;
+var __name$4 = (target, value)=>__defProp$4(target, "name", {
         value,
         configurable: true
     });
@@ -541,18 +550,18 @@ function createSlot(ownerName) {
     Slot2.displayName = `${ownerName}.Slot`;
     return Slot2;
 }
-__name$2(createSlot, "createSlot");
+__name$4(createSlot, "createSlot");
 var Slot = /* @__PURE__ */ createSlot("Slot");
 var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
 // @__NO_SIDE_EFFECTS__
 function createSlottable(ownerName) {
-    const Slottable2 = /* @__PURE__ */ __name$2((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
+    const Slottable2 = /* @__PURE__ */ __name$4((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
     Slottable2.displayName = `${ownerName}.Slottable`;
     Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
     return Slottable2;
 }
-__name$2(createSlottable, "createSlottable");
-var getSlottableElementFromSlottable = /* @__PURE__ */ __name$2((slottable, child)=>{
+__name$4(createSlottable, "createSlottable");
+var getSlottableElementFromSlottable = /* @__PURE__ */ __name$4((slottable, child)=>{
     if ("child" in slottable.props) {
         const child2 = slottable.props.child;
         if (!/*#__PURE__*/ React.isValidElement(child2)) return null;
@@ -595,7 +604,7 @@ function mergeProps(slotProps, childProps) {
         ...overrideProps
     };
 }
-__name$2(mergeProps, "mergeProps");
+__name$4(mergeProps, "mergeProps");
 function getElementRef(element) {
     let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
     let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
@@ -609,24 +618,24 @@ function getElementRef(element) {
     }
     return element.props.ref || element.ref;
 }
-__name$2(getElementRef, "getElementRef");
+__name$4(getElementRef, "getElementRef");
 function isSlottable(child) {
     return /*#__PURE__*/ React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
-__name$2(isSlottable, "isSlottable");
+__name$4(isSlottable, "isSlottable");
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
 function isLazyComponent(element) {
     return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
 }
-__name$2(isLazyComponent, "isLazyComponent");
+__name$4(isLazyComponent, "isLazyComponent");
 function isPromiseLike(value) {
     return typeof value === "object" && value !== null && "then" in value;
 }
-__name$2(isPromiseLike, "isPromiseLike");
-var createSlotError = /* @__PURE__ */ __name$2((ownerName)=>{
+__name$4(isPromiseLike, "isPromiseLike");
+var createSlotError = /* @__PURE__ */ __name$4((ownerName)=>{
     return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
 }, "createSlotError");
-var createSlottableError = /* @__PURE__ */ __name$2((ownerName)=>{
+var createSlottableError = /* @__PURE__ */ __name$4((ownerName)=>{
     return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
 }, "createSlottableError");
 var use = React[" use ".trim().toString()];
@@ -873,6 +882,40 @@ function useDataTableColumnCalc(props) {
     };
 }
 
+function sameCell$1(a, id, key) {
+    return a !== null && a.id === id && a.key === key;
+}
+/**
+ * Tracks which single cell (if any) is showing its "show full content" overlay
+ * (DATATABLE-ATTIO-SPEC.md's cell-expand feature, #12) for the READ-ONLY case -- a
+ * non-`editable` column with truncated content, which has nothing to commit and so
+ * no reason to go through `useDataTableEdit`'s `editingCell`. An `editable` column's
+ * own truncated-cell overlay instead reuses `useDataTableEdit`'s `startEdit`/
+ * `editingCell` directly (the styled layer's `body-cells.tsx` picks which of the two
+ * a given activation opens) -- "for editable cells it's the editor" per the spec,
+ * not a second parallel state machine duplicating what editing already tracks.
+ *
+ * Only one cell can be peeked at a time, the same single-cell shape
+ * `useDataTableEdit`'s `editingCell` already uses -- this table has no multi-cell
+ * expand any more than it has multi-cell edit.
+ */ function useDataTableCellPeek() {
+    const [peekedCell, setPeekedCell] = useState(null);
+    const isPeeking = useCallback((id, key)=>sameCell$1(peekedCell, id, key), [
+        peekedCell
+    ]);
+    const openPeek = useCallback((id, key)=>setPeekedCell({
+            id,
+            key
+        }), []);
+    const closePeek = useCallback(()=>setPeekedCell(null), []);
+    return {
+        peekedCell,
+        isPeeking,
+        openPeek,
+        closePeek
+    };
+}
+
 // Select's `dom.ts` reads state off REAL rendered elements (aria-disabled, data-value)
 // because its options register asynchronously through a floating-ui list and the DOM
 // is the one thing always in sync with `elementsRef`. DataTable's selection has no
@@ -1888,6 +1931,11 @@ function useDataTable(props) {
     const columnCalc = useDataTableColumnCalc(props);
     const scroll = useDataTableScroll();
     const edit = useDataTableEdit(props);
+    // Feature C (#12) -- which single cell (if any) is showing its read-only "show
+    // full content" overlay. Independent of `edit` above -- see
+    // `useDataTableCellPeek.ts`'s own doc comment for why an `editable` column's
+    // truncated-cell overlay reuses `edit` instead of this.
+    const peek = useDataTableCellPeek();
     // Wired to `scroll`'s own scroll-container ref (not a fresh one of its own) so a
     // BOUNDED table's auto-load triggers off its own internal scroll, not the
     // browsing viewport -- see useDataTableInfiniteScroll.ts's own doc comment.
@@ -1905,6 +1953,7 @@ function useDataTable(props) {
         ...columnCalc,
         ...scroll,
         ...edit,
+        ...peek,
         ...infiniteScroll,
         rootProps: elementProps({
             role: "table"
@@ -2432,7 +2481,7 @@ function createRecipeContext(recipe) {
 }
 
 const { withContext: withGroupContext } = createRecipeContext(checkboxGroup);
-const { ClassNamesProvider: ClassNamesProvider$3, withContext: withContext$5 } = createSlotRecipeContext(checkbox);
+const { ClassNamesProvider: ClassNamesProvider$3, withContext: withContext$6 } = createSlotRecipeContext(checkbox);
 const { withProvider: withCheckmarkProvider, useClassNames: useCheckmarkClassNames, PropsProvider: CheckmarkPropsProvider } = createSlotRecipeContext(checkmark);
 const withStateProps$4 = createWithStateProps([
     useCheckboxContext
@@ -2486,14 +2535,14 @@ const CheckboxIndicator = /*#__PURE__*/ forwardRef(({ unchecked: uncheckedSvg, c
     return null;
 });
 CheckboxIndicator.displayName = "CheckboxIndicator";
-const CheckboxLabel = withContext$5(withStateProps$4(Primitive.span), "label");
+const CheckboxLabel = withContext$6(withStateProps$4(Primitive.span), "label");
 const CheckboxHiddenInput = Checkbox.HiddenInput;
 
-const { withProvider: withProvider$1, withContext: withContext$4 } = createSlotRecipeContext(avatar);
-const AvatarRoot = withProvider$1(Image.Root, "root");
-const AvatarImage = withContext$4(Image.Content, "image");
-const AvatarFallback = withContext$4(Image.Fallback, "fallback");
-withContext$4(Primitive.div, "badge");
+const { withProvider: withProvider$2, withContext: withContext$5 } = createSlotRecipeContext(avatar);
+const AvatarRoot = withProvider$2(Image.Root, "root");
+const AvatarImage = withContext$5(Image.Content, "image");
+const AvatarFallback = withContext$5(Image.Fallback, "fallback");
+withContext$5(Primitive.div, "badge");
 
 const Badge = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
     const [variantProps, restProps] = badge.splitVariantProps(props);
@@ -2545,6 +2594,41 @@ function toneFor(value) {
     }
     return BADGE_TONES[hash % BADGE_TONES.length];
 }
+// Feature A/B (#9/#8) -- Attio's own flat 12-swatch chip palette, ported from
+// crisp's `tokens/palette.ts` (`tagSwatch1..12`, measured live off Attio) rather
+// than seed's own 6-tone `Badge` (`BADGE_TONES` above): a swatch, unlike a Badge
+// tone, has no ring/border and its ink is a FLAT black on every swatch (crisp's own
+// `tagSwatchInk`, `#000000` -- every swatch background is already a pale tint, so
+// one dark foreground reads on all 12), not a per-tone contrast color. No seed token
+// lands on any of these 12 hex values, so -- same footnote as the qvism recipe's own
+// `ATTIO_BRAND_BLUE`/`RATING_FILLED` literals -- they stay literal here too.
+const CHIP_SWATCHES = [
+    "#fff3cc",
+    "#f4fbcb",
+    "#fdf7c4",
+    "#feecf3",
+    "#e0fced",
+    "#ddf7ff",
+    "#f6f7f7",
+    "#ffebeb",
+    "#feeee1",
+    "#e5eeff",
+    "#f5f0ff",
+    "#fdedff"
+];
+const CHIP_SWATCH_INK = "#000000";
+/** Same stable multiply-and-add hash `toneFor` above already uses over seed's 6
+ *  Badge tones, just over this file's own 12-swatch palette instead -- same value,
+ *  same swatch, every render (crisp's own `toneFor`, `datatable.tsx`). */ function swatchIndexFor(value) {
+    let hash = 0;
+    for(let index = 0; index < value.length; index++){
+        hash = hash * 31 + value.charCodeAt(index) >>> 0;
+    }
+    return hash % CHIP_SWATCHES.length;
+}
+function swatchColorFor(value) {
+    return CHIP_SWATCHES[swatchIndexFor(value)];
+}
 function initialsFor(name) {
     const parts = name.trim().split(/\s+/);
     return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
@@ -2628,7 +2712,7 @@ function EntityCell({ value, className, nameClassName, actionsClassName, actionC
                         event.stopPropagation();
                         column.onOpenPreview?.(row);
                     },
-                    children: /*#__PURE__*/ jsx(IconEyeLine_default, {
+                    children: /*#__PURE__*/ jsx(IconCorner4OutwardLine_default, {
                         size: 16
                     })
                 })
@@ -2659,11 +2743,89 @@ function StatusCell({ value }) {
         children: status
     });
 }
-function LinkCell({ column, value, className }) {
+/** One swatch chip -- `style` carries the per-value background/ink (computed by
+ *  `swatchColorFor`/`CHIP_SWATCH_INK` above) since neither is a recipe token, the
+ *  same "literal color as a computed prop" call `RatingCell`'s star fill already
+ *  makes. Shared by `ChipCell` (Feature A, single value) and `ChipListCell`/
+ *  editors.tsx's `ChipListEditor` (Feature B, multi value) so all three chip
+ *  renderings stay byte-identical. */ function SwatchChip({ value, className, children }) {
+    return /*#__PURE__*/ jsxs("span", {
+        className: className,
+        style: {
+            backgroundColor: swatchColorFor(value),
+            color: CHIP_SWATCH_INK
+        },
+        children: [
+            value,
+            children
+        ]
+    });
+}
+/** `type: "chip"` (Feature A, #9) -- a single value rendered as one colored chip,
+ *  the color derived deterministically from the value string (`swatchColorFor`):
+ *  same value, same color, every render, every column. For a column like provider/
+ *  tenant/vendor/status/select where a plain `Badge` (seed's 6-tone `status`/`tags`
+ *  types above) doesn't need to be color-STABLE per value -- this one does. */ function ChipCell({ value, className }) {
+    const text = value == null ? "" : String(value);
+    if (!text) return null;
+    return /*#__PURE__*/ jsx(SwatchChip, {
+        value: text,
+        className: className
+    });
+}
+/** `type: "chip-list"`, READ-ONLY (Feature B, #8) -- multiple swatch chips, no add/
+ *  remove affordances. The editable case is editors.tsx's `ChipListEditor`, an
+ *  always-live widget (interacting with it IS the commit, the same `switch`/
+ *  `rating`/`checkbox` shape `body-cells.tsx`'s `isAlwaysLiveEditable` already
+ *  covers) -- this component only ever renders the REST display. */ function ChipListCell({ value, className, chipClassName }) {
+    const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
+    if (!tags.length) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
+                value: tag,
+                className: chipClassName
+            }, tag))
+    });
+}
+/**
+ * Feature D (#13) -- generic text+affix composition: `suffix` (if given) renders as
+ * a `flex-shrink: 0` icon beside the text, and the TEXT itself (not the outer `<td>`)
+ * gets its own `flex: 1 1 0%; min-width: 0` + ellipsis, so a long value truncates
+ * while the affix stays visible instead of being squeezed out of the cell entirely
+ * (the bug: composing text+icon inside a plain truncating `<td>` lets the icon
+ * scroll/clip away with the text, since a flex child never inherits its PARENT's
+ * own `text-overflow`). `data-seed-truncate` on the text span is what `truncate.ts`'s
+ * `isCellTruncated` (Feature C's click-to-expand gate) measures instead of the
+ * `<td>` itself for exactly the same reason -- see that file's own comment.
+ * Any FUTURE cell composing a fixed leading/trailing glyph beside truncating text
+ * should render through this component rather than re-deriving the same three-slot
+ * flex shape.
+ */ function CellWithSuffix({ text, suffix, rowClassName, textClassName, suffixClassName }) {
+    if (!suffix) return /*#__PURE__*/ jsx(Fragment, {
+        children: text
+    });
+    return /*#__PURE__*/ jsxs("span", {
+        className: rowClassName,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: textClassName,
+                "data-seed-truncate": "",
+                children: text
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: suffixClassName,
+                children: suffix
+            })
+        ]
+    });
+}
+function LinkCell({ column, value, row, className, rowClassName, textClassName, suffixClassName }) {
     const text = value == null ? "" : String(value);
     if (!text) return null;
     const isUrl = column.type === "url";
     const href = isUrl ? /^https?:\/\//.test(text) ? text : `https://${text}` : `mailto:${text}`;
+    const suffix = column.suffixIcon?.(row);
     return /*#__PURE__*/ jsx("a", {
         className: className,
         href: href,
@@ -2672,7 +2834,13 @@ function LinkCell({ column, value, className }) {
         // A link cell points somewhere other than "select this row" -- its own
         // navigation must not also fire a row click handler.
         onClick: (event)=>event.stopPropagation(),
-        children: text
+        children: /*#__PURE__*/ jsx(CellWithSuffix, {
+            text: text,
+            suffix: suffix,
+            rowClassName: rowClassName,
+            textClassName: textClassName,
+            suffixClassName: suffixClassName
+        })
     });
 }
 // Attio's own measured 5-point star path (crisp's `RATING_STAR_D`, traced from the
@@ -2698,8 +2866,7 @@ function RatingCell({ value, maxRating = 5 }) {
         },
         children: Array.from({
             length: maxRating
-        }, (_, index)=>// biome-ignore lint/suspicious/noArrayIndexKey: a fixed-length star row has no other identity
-            /*#__PURE__*/ jsx("svg", {
+        }, (_, index)=>/*#__PURE__*/ jsx("svg", {
                 width: 16,
                 height: 16,
                 viewBox: "0 0 16 16",
@@ -3063,7 +3230,7 @@ const SelectHiddenSelect = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 });
 SelectHiddenSelect.displayName = "SelectHiddenSelect";
 
-const { withContext: withContext$3, ClassNamesProvider: ClassNamesProvider$2 } = createSlotRecipeContext(switchStyle);
+const { withContext: withContext$4, ClassNamesProvider: ClassNamesProvider$2 } = createSlotRecipeContext(switchStyle);
 const { withContext: withControlContext, PropsProvider: ControlPropsProvider, withProvider: withControlProvider } = createSlotRecipeContext(switchmark);
 const withStateProps$2 = createWithStateProps([
     useSwitchContext
@@ -3089,13 +3256,13 @@ const SwitchRoot = /*#__PURE__*/ React__default.forwardRef(({ className, ...prop
 SwitchRoot.displayName = "SwitchRoot";
 const SwitchControl = withScaleFeedback(withControlProvider(Switch.Control, "root"));
 const SwitchThumb = withControlContext(Switch.Thumb, "thumb");
-withContext$3(withStateProps$2(Primitive.span), "label");
+withContext$4(withStateProps$2(Primitive.span), "label");
 const SwitchHiddenInput = Switch.HiddenInput;
 
 // src/use-layout-effect.tsx
 var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : ()=>{};
 
-const { withProvider, withContext: withContext$2, useClassNames: useClassNames$2 } = createSlotRecipeContext(textInput);
+const { withProvider: withProvider$1, withContext: withContext$3, useClassNames: useClassNames$2 } = createSlotRecipeContext(textInput);
 const withFieldStateProps = createWithStateProps([
     {
         useContext: useFieldContext,
@@ -3109,11 +3276,11 @@ const withStateProps$1 = createWithStateProps([
         strict: false
     }
 ]);
-const TextFieldRoot = withProvider(withFieldStateProps(TextField.Root), "root");
-withContext$2(withStateProps$1(InternalIcon), "prefixIcon");
-withContext$2(withStateProps$1(Primitive.span), "prefixText");
-withContext$2(withStateProps$1(InternalIcon), "suffixIcon");
-withContext$2(withStateProps$1(Primitive.span), "suffixText");
+const TextFieldRoot = withProvider$1(withFieldStateProps(TextField.Root), "root");
+withContext$3(withStateProps$1(InternalIcon), "prefixIcon");
+withContext$3(withStateProps$1(Primitive.span), "prefixText");
+withContext$3(withStateProps$1(InternalIcon), "suffixIcon");
+withContext$3(withStateProps$1(Primitive.span), "suffixText");
 const TextFieldInput = /*#__PURE__*/ forwardRef(({ className, ...otherProps }, ref)=>{
     const classNames = useClassNames$2();
     const textFieldContext = useTextFieldContext();
@@ -3190,7 +3357,7 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0}.seed-data-table__entityActions:focus-within,tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:0;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:22px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:var(--seed-radius-r5);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak),var(--seed-shadow-s3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -3285,6 +3452,42 @@ const dataTableSlotNames = [
         "link",
         "seed-data-table__link"
     ],
+    [
+        "chip",
+        "seed-data-table__chip"
+    ],
+    [
+        "chipList",
+        "seed-data-table__chipList"
+    ],
+    [
+        "chipRemove",
+        "seed-data-table__chipRemove"
+    ],
+    [
+        "chipInput",
+        "seed-data-table__chipInput"
+    ],
+    [
+        "expandOverlay",
+        "seed-data-table__expandOverlay"
+    ],
+    [
+        "expandOverlayText",
+        "seed-data-table__expandOverlayText"
+    ],
+    [
+        "cellSuffixRow",
+        "seed-data-table__cellSuffixRow"
+    ],
+    [
+        "cellSuffixText",
+        "seed-data-table__cellSuffixText"
+    ],
+    [
+        "cellSuffixIcon",
+        "seed-data-table__cellSuffixIcon"
+    ],
     [
         "entityActions",
         "seed-data-table__entityActions"
@@ -3377,7 +3580,7 @@ Object.assign(dataTable, {
 // other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
 // `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
 // than re-deriving its own.
-const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
+const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$2, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
 
 /**
  * The pure filter itself, split out of `useSelectSearch` below so it can be
@@ -3859,6 +4062,103 @@ function RatingEditor({ column, value, pending, onCommit }) {
         ]
     });
 }
+////////////////////////////////////////////////////////////////////////////////////
+// -- editable: "chip-list" (Feature B, #8) -- always-live, the same shape
+//    `SwitchEditor`/`CheckboxEditor`/`RatingEditor` above already establish
+//    (interacting with the widget IS the commit, no double-click gate, no separate
+//    rest display -- `body-cells.tsx`'s `isAlwaysLiveEditable` covers it alongside
+//    them). A gated open/close state (like `SelectEditor`'s) would fight adding
+//    MULTIPLE tags in one sitting: `useDataTableEdit`'s `commitEdit` closes editing
+//    the instant a SYNC commit resolves, so a gated chip editor would close itself
+//    after the very first tag. Always-live sidesteps that entirely -- there is no
+//    `editingCell` to close, the widget is simply always the cell's own content.
+//    Every add/remove commits the FULL next array through the same one-string
+//    contract every other editor already uses (`useDataTableEdit`'s own doc
+//    comment): `JSON.stringify(nextTags)`, which the consumer's `onEdit` parses
+//    back -- crisp/GRC's contract stays "one string in, no typed union", not a
+//    second commit shape invented for just this column.
+function ChipListEditor({ column, value, pending, onCommit, classNames }) {
+    const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
+    const [draft, setDraft] = React.useState("");
+    function commitTags(next) {
+        onCommit(JSON.stringify(next));
+    }
+    function addTag() {
+        const tag = draft.trim();
+        setDraft("");
+        if (!tag || tags.includes(tag)) return;
+        commitTags([
+            ...tags,
+            tag
+        ]);
+    }
+    function removeTag(tag) {
+        commitTags(tags.filter((existing)=>existing !== tag));
+    }
+    return(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this span never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the remove buttons, the add-tag input). No role fits it because it isn't a control.
+    /*#__PURE__*/ jsxs("span", {
+        className: classNames.chipList,
+        onClick: (event)=>event.stopPropagation(),
+        children: [
+            tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
+                    value: tag,
+                    className: classNames.chip,
+                    children: /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: pending,
+                        "aria-label": `Remove ${tag}`,
+                        className: classNames.chipRemove,
+                        onClick: ()=>removeTag(tag),
+                        children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
+                            size: 10
+                        })
+                    })
+                }, tag)),
+            /*#__PURE__*/ jsx("input", {
+                className: classNames.chipInput,
+                value: draft,
+                disabled: pending,
+                placeholder: tags.length ? "" : "Add…",
+                "aria-label": `Add tag to ${column.key}`,
+                onChange: (event)=>setDraft(event.target.value),
+                onKeyDown: (event)=>{
+                    event.stopPropagation();
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        addTag();
+                    } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+                        removeTag(tags[tags.length - 1]);
+                    } else if (event.key === "Escape") {
+                        setDraft("");
+                    }
+                }
+            }),
+            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
+        ]
+    }));
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- Feature C (#12): cell-expand "show full content" overlay -- an anchored box
+//    (position:absolute over the cell it belongs to, grows in HEIGHT, elevated)
+//    that wraps whatever a truncated cell would otherwise show inline: an editable
+//    column's OWN editor node (unchanged, just relocated into this box instead of
+//    rendered flush in the 36px row) for the editable case, or the plain full value
+//    for a read-only one. `body-cells.tsx` decides WHEN to render this (a click on a
+//    cell whose content is actually truncated, `truncate.ts`'s `isCellTruncated`);
+//    this component only supplies the box.
+function CellExpandOverlay({ className, children }) {
+    return(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
+    // a click anywhere inside it must never ALSO fire the row's own `onRowClick`,
+    // the same guard every other interactive cell affordance in this directory
+    // already applies (`LinkCell`, `EntityCell`'s preview button, editors.tsx's
+    // `TextEditor` root).
+    // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this div never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the editor/text it wraps). No role fits it because it isn't a control.
+    /*#__PURE__*/ jsx("div", {
+        className: className,
+        onClick: (event)=>event.stopPropagation(),
+        children: children
+    }));
+}
 
 // Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
 // cells.tsx splits out cell-type rendering: a self-contained, independently testable
@@ -3898,49 +4198,167 @@ function RatingEditor({ column, value, pending, onCommit }) {
     return data.filter((row)=>searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query)));
 }
 
+// Feature C (#12) -- the click-to-expand gate: measures whether a cell's rendered
+// content is ACTUALLY truncated right now, so a single click only opens the
+// anchored overlay (editors.tsx's `CellExpandOverlay`) when there's real hidden
+// content to show, never on a short value that already fits. Isolated out of
+// body-cells.tsx the same way select-search.tsx/filtering.ts already split their own
+// concerns out of the styled layer, so this one pure DOM read is unit-testable on
+// its own (a plain `<td>`'s own truncate CSS vs. a suffix-icon cell's nested flex
+// child need two different elements measured -- see below).
+//
+// This one genuinely reads a real, laid-out DOM element (`scrollWidth`/
+// `clientWidth`), unlike react-headless/data-table/src/dom.ts's own helpers (plain
+// data in, plain data out) -- it lives in the REACT (styled) package rather than
+// react-headless for that reason: measuring actual layout is a rendering concern,
+// not table state.
+function isCellTruncated(cell) {
+    // The common case: a plain cell's own `white-space: nowrap; overflow: clip` (the
+    // `cell` recipe slot) makes the `<td>` ITSELF overflow once its text is longer
+    // than the column is wide.
+    if (cell.scrollWidth > cell.clientWidth) return true;
+    // A cell composing a suffix icon beside its text (cells.tsx's `CellWithSuffix`,
+    // Feature D) wraps the text in its OWN `flex: 1 1 0%; min-width: 0` child instead
+    // -- that flex child never lets the `<td>` itself overflow (it's constrained to
+    // the remaining row width by construction), so the truncating element to measure
+    // is the flex child, marked `data-seed-truncate` by whichever cell renderer
+    // applies its own ellipsis (`CellWithSuffix`'s text span today; any future
+    // truncating inner element should carry the same marker).
+    const targets = cell.querySelectorAll("[data-seed-truncate]");
+    for (const target of targets){
+        if (target.scrollWidth > target.clientWidth) return true;
+    }
+    return false;
+}
+
 /** `editable` + one of these shapes needs no double-click gate and no separate rest
  *  display -- interacting with the widget itself IS the commit gesture (crisp's own
  *  #453/#760/#761: `switch`/`rating`/`checkbox` never had a meaningfully different
- *  "rest" state to show). Every other `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
+ *  "rest" state to show). `chip-list` (Feature B, #8) joins them for a different
+ *  reason -- see `ChipListEditor`'s own doc comment (editors.tsx): a GATED chip
+ *  editor would close itself the instant the first tag committed. Every other
+ *  `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
     if (!column.editable) return false;
-    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
+    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox" || column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
     const effective = useEffectiveColumns(columns, {
         selectable,
         stickyFirst
     });
-    const { startEdit } = useDataTableContext();
     return /*#__PURE__*/ jsx(Fragment, {
         children: effective.map((entry, index)=>{
             const { column } = entry;
             const isLast = index === effective.length - 1;
             const sticky = pinnedCellProps(entry, stickyLast, isLast);
-            // A gated `editable` column (everything except the always-live widgets)
-            // opens on double-click -- Attio's own measured gesture (crisp's #411),
-            // matched here rather than a single click, which stays "select this cell"
-            // in crisp's own spreadsheet model and would otherwise be indistinguishable
-            // from this table's plain row click.
-            const gated = column.editable && !isAlwaysLiveEditable(column);
-            return /*#__PURE__*/ jsx(DataTableCell, {
-                "data-numeric": dataAttr(column.type === "number" || column.type === "currency"),
-                "data-editable": dataAttr(!!column.editable),
-                "data-sticky": sticky["data-sticky"],
-                "data-sticky-edge": sticky["data-sticky-edge"],
-                "data-sticky-edge-end": sticky["data-sticky-edge-end"],
-                style: sticky.style,
-                onDoubleClick: gated ? ()=>startEdit(row.id, column.key) : undefined,
-                children: /*#__PURE__*/ jsx(CellContent, {
-                    column: column,
-                    row: row,
-                    rowId: row.id,
-                    classNames: classNames,
-                    locale: locale
-                })
+            return /*#__PURE__*/ jsx(DataTableBodyCell, {
+                column: column,
+                row: row,
+                classNames: classNames,
+                locale: locale,
+                sticky: sticky
             }, column.key);
         })
     });
 }
+/**
+ * One `<td>` -- split out of `ColumnBodyCells`'s own map (which now only computes
+ * per-column LAYOUT, `pinnedCellProps`) so this component can own its own per-cell
+ * "is the Feature C overlay open" local state (`overlayOpen`) without re-deriving it
+ * on every row's render. React keeps this instance stable across re-renders because
+ * `ColumnBodyCells` keys it by `column.key` the same way it always keyed the bare
+ * `<DataTableCell>` before this split.
+ */ function DataTableBodyCell({ column, row, classNames, locale, sticky }) {
+    const { startEdit, isEditing, isPeeking, openPeek, closePeek } = useDataTableContext();
+    const cellRef = React.useRef(null);
+    // Feature C (#12) -- whether THIS activation (click or double-click) should
+    // render as the anchored overlay rather than plain inline. Frozen at the moment
+    // of activation (re-measured every time, never left stale) rather than derived
+    // from `isEditing`/`isPeeking` alone, because those two states don't carry "was
+    // the content actually truncated when this opened" on their own -- a SHORT
+    // editable cell's existing double-click-to-edit (tranche 5, unchanged) must keep
+    // rendering exactly as it always has, not suddenly gain overlay chrome.
+    const [overlayOpen, setOverlayOpen] = React.useState(false);
+    const alwaysLive = isAlwaysLiveEditable(column);
+    // A gated `editable` column (everything except the always-live widgets) opens on
+    // double-click -- Attio's own measured gesture (crisp's #411), matched here
+    // rather than a single click, which stays "select this cell" in crisp's own
+    // spreadsheet model and would otherwise be indistinguishable from this table's
+    // plain row click. Feature C ADDS a single click as a SECOND way in, but only
+    // when the cell's content is actually truncated (see `handleClick` below) --
+    // double-click keeps working unconditionally, same as before this feature.
+    const gated = column.editable && !alwaysLive;
+    function handleDoubleClick(event) {
+        if (!gated) return;
+        setOverlayOpen(isCellTruncated(event.currentTarget));
+        startEdit(row.id, column.key);
+    }
+    function handleClick(event) {
+        if (!isCellTruncated(event.currentTarget)) return;
+        if (gated) {
+            setOverlayOpen(true);
+            startEdit(row.id, column.key);
+        } else if (alwaysLive) {
+            // No separate open/edit state to start -- the always-live widget already
+            // renders unconditionally; this only switches ITS OWN box to the anchored
+            // overlay so a long chip list (etc.) gets room to show every chip.
+            setOverlayOpen(true);
+        } else {
+            setOverlayOpen(true);
+            openPeek(row.id, column.key);
+        }
+    }
+    // Closes the overlay on Escape or an outside click/pointerdown -- a gated
+    // editor's OWN Escape/blur handling already ends `isEditing` on its own (see
+    // `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
+    // alone is enough to hide a GATED cell's overlay (its render below is gated on
+    // `isEditing` too); this listener is what the PEEK and ALWAYS-LIVE cases need,
+    // since neither has any other mechanism that ever calls `closePeek`/resets
+    // `overlayOpen` on its own.
+    React.useEffect(()=>{
+        if (!overlayOpen) return;
+        function handlePointerDown(event) {
+            if (cellRef.current && !cellRef.current.contains(event.target)) {
+                setOverlayOpen(false);
+                closePeek();
+            }
+        }
+        function handleKeyDown(event) {
+            if (event.key !== "Escape") return;
+            setOverlayOpen(false);
+            closePeek();
+        }
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        overlayOpen,
+        closePeek
+    ]);
+    const overlayActive = overlayOpen && (alwaysLive || isEditing(row.id, column.key) || isPeeking(row.id, column.key));
+    return /*#__PURE__*/ jsx(DataTableCell, {
+        ref: cellRef,
+        "data-numeric": dataAttr(column.type === "number" || column.type === "currency"),
+        "data-editable": dataAttr(!!column.editable),
+        "data-sticky": sticky["data-sticky"],
+        "data-sticky-edge": sticky["data-sticky-edge"],
+        "data-sticky-edge-end": sticky["data-sticky-edge-end"],
+        style: sticky.style,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick,
+        children: /*#__PURE__*/ jsx(CellContent, {
+            column: column,
+            row: row,
+            rowId: row.id,
+            classNames: classNames,
+            locale: locale,
+            overlayActive: overlayActive
+        })
+    });
+}
 /**
  * Dispatches to whichever of cells.tsx's static renderers or editors.tsx's live
  * editors applies to THIS column/row right now -- always-live first (no rest state to
@@ -3948,7 +4366,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * display (a custom `render` wins there, same as before `editable` existed; it never
  * overrides an actual editing/always-live state, matching crisp's own split between
  * `renderTyped`'s rest-state branch and the editing branches above it).
- */ function CellContent({ column, row, rowId, classNames, locale }) {
+ */ function CellContent({ column, row, rowId, classNames, locale, overlayActive }) {
     const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
     const rawValue = getColumnValue(column, row);
     const pending = isPending(rowId, column.key);
@@ -3977,6 +4395,14 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             pending: pending,
             onCommit: commit
         });
+    } else if (column.editable && column.type === "chip-list") {
+        node = /*#__PURE__*/ jsx(ChipListEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit,
+            classNames: classNames
+        });
     } else if (column.editable && isEditing(rowId, column.key)) {
         if (column.editor === "select") {
             node = /*#__PURE__*/ jsx(SelectEditor, {
@@ -4012,6 +4438,10 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             });
         }
     } else {
+        // Feature C (#12), read-only case: `DataTableBodyCell`'s own `isPeeking` already
+        // decided whether the overlay should be open (folded into `overlayActive`
+        // below) -- this branch always renders the SAME `DisplayCellContent` either
+        // way, just possibly relocated into the overlay box.
         node = /*#__PURE__*/ jsx(DisplayCellContent, {
             column: column,
             row: row,
@@ -4022,7 +4452,13 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            node,
+            overlayActive ? /*#__PURE__*/ jsx(CellExpandOverlay, {
+                className: classNames.expandOverlay,
+                children: column.editable ? node : /*#__PURE__*/ jsx("span", {
+                    className: classNames.expandOverlayText,
+                    children: node
+                })
+            }) : node,
             error && /*#__PURE__*/ jsx(EditError, {
                 message: error
             })
@@ -4053,7 +4489,11 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
             return /*#__PURE__*/ jsx(LinkCell, {
                 column: column,
                 value: value,
-                className: classNames.link
+                row: row,
+                className: classNames.link,
+                rowClassName: classNames.cellSuffixRow,
+                textClassName: classNames.cellSuffixText,
+                suffixClassName: classNames.cellSuffixIcon
             });
         case "tags":
             return /*#__PURE__*/ jsx(TagsCell, {
@@ -4064,6 +4504,17 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
             return /*#__PURE__*/ jsx(StatusCell, {
                 value: value
             });
+        case "chip":
+            return /*#__PURE__*/ jsx(ChipCell, {
+                value: value,
+                className: classNames.chip
+            });
+        case "chip-list":
+            return /*#__PURE__*/ jsx(ChipListCell, {
+                value: value,
+                className: classNames.chipList,
+                chipClassName: classNames.chip
+            });
         case "number":
             return /*#__PURE__*/ jsx(Fragment, {
                 children: formatNumberCell(value, locale)
@@ -4090,13 +4541,27 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
                 value: value
             });
         default:
-            return /*#__PURE__*/ jsx(Fragment, {
-                children: value == null ? null : String(value)
-            });
+            {
+                const text = value == null ? null : String(value);
+                const suffix = column.suffixIcon?.(row);
+                // Feature D (#13) -- a plain text column carrying a `suffixIcon` (e.g. a
+                // location column's pin glyph) composes through the same `CellWithSuffix`
+                // LinkCell already uses, so the icon never gets squeezed out by a long value.
+                if (!suffix || text == null) return /*#__PURE__*/ jsx(Fragment, {
+                    children: text
+                });
+                return /*#__PURE__*/ jsx(CellWithSuffix, {
+                    text: text,
+                    suffix: suffix,
+                    rowClassName: classNames.cellSuffixRow,
+                    textClassName: classNames.cellSuffixText,
+                    suffixClassName: classNames.cellSuffixIcon
+                });
+            }
     }
 }
 
-const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
+const { ClassNamesProvider, withContext: withContext$1, useClassNames } = createSlotRecipeContext(menu);
 const { PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, ClassNamesProvider: ItemClassNamesProvider } = createSlotRecipeContext(menuItem);
 const withStateProps = createWithStateProps([
     useMenuContext
@@ -4130,10 +4595,10 @@ const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props },
     });
 });
 MenuPositioner.displayName = "MenuPositioner";
-const MenuContent = withContext(Menu.Content, "content");
-const MenuScrollArea = withContext(withStateProps(Primitive.div), "scrollArea");
-withContext(Menu.Group, "group");
-withContext(Menu.GroupLabel, "groupLabel");
+const MenuContent = withContext$1(Menu.Content, "content");
+const MenuScrollArea = withContext$1(withStateProps(Primitive.div), "scrollArea");
+withContext$1(Menu.Group, "group");
+withContext$1(Menu.GroupLabel, "groupLabel");
 const MenuItem = /*#__PURE__*/ React.forwardRef(({ className: propClassName, ...props }, ref)=>{
     const [variantProps, otherProps] = menuItem.splitVariantProps(props);
     const parentProps = useItemProps();
@@ -5898,8 +6363,8 @@ Object.assign(datePicker, {
     splitVariantProps: (props)=>splitVariantProps(props, datePickerVariantMap)
 }); // @recipe(seed): date-picker
 
-var __defProp$1 = Object.defineProperty;
-var __name$1 = (target, value)=>__defProp$1(target, "name", {
+var __defProp$3 = Object.defineProperty;
+var __name$3 = (target, value)=>__defProp$3(target, "name", {
         value,
         configurable: true
     });
@@ -5923,15 +6388,15 @@ function useEffectEvent(callback) {
     }
     return React.useMemo(()=>(...args)=>ref.current?.(...args), []);
 }
-__name$1(useEffectEvent, "useEffectEvent");
+__name$3(useEffectEvent, "useEffectEvent");
 
-var __defProp = Object.defineProperty;
-var __name = (target, value)=>__defProp(target, "name", {
+var __defProp$2 = Object.defineProperty;
+var __name$2 = (target, value)=>__defProp$2(target, "name", {
         value,
         configurable: true
     });
 var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
-function useControllableState({ prop, defaultProp, onChange = /* @__PURE__ */ __name(()=>{}, "onChange"), caller }) {
+function useControllableState({ prop, defaultProp, onChange = /* @__PURE__ */ __name$2(()=>{}, "onChange"), caller }) {
     const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
         defaultProp,
         onChange
@@ -5958,7 +6423,7 @@ function useControllableState({ prop, defaultProp, onChange = /* @__PURE__ */ __
         setValue
     ];
 }
-__name(useControllableState, "useControllableState");
+__name$2(useControllableState, "useControllableState");
 function useUncontrolledState({ defaultProp, onChange }) {
     const [value, setValue] = React.useState(defaultProp);
     const prevValueRef = React.useRef(value);
@@ -5983,11 +6448,11 @@ function useUncontrolledState({ defaultProp, onChange }) {
         onChangeRef
     ];
 }
-__name(useUncontrolledState, "useUncontrolledState");
+__name$2(useUncontrolledState, "useUncontrolledState");
 function isFunction(value) {
     return typeof value === "function";
 }
-__name(isFunction, "isFunction");
+__name$2(isFunction, "isFunction");
 var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 function useControllableStateReducer(reducer, userArgs, initialArg, init) {
     const { prop: controlledState, defaultProp, onChange: onChangeProp, caller } = userArgs;
@@ -6059,7 +6524,7 @@ function useControllableStateReducer(reducer, userArgs, initialArg, init) {
         dispatch
     ];
 }
-__name(useControllableStateReducer, "useControllableStateReducer");
+__name$2(useControllableStateReducer, "useControllableStateReducer");
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -10265,8 +10730,8 @@ const formatFilterDate = (iso)=>{
     });
 }
 
-const DataTableToolbar = withContext$1(Primitive.div, "toolbar");
-const DataTableCount = withContext$1(Primitive.span, "count");
+const DataTableToolbar = withContext$2(Primitive.div, "toolbar");
+const DataTableCount = withContext$2(Primitive.span, "count");
 /**
  * The toolbar's own right-hand group -- `count`'s `marginInlineStart: auto` moved
  * here (off the `<span>` itself) so a consumer's `toolbarActions` and the row count
@@ -10277,7 +10742,7 @@ const DataTableCount = withContext$1(Primitive.span, "count");
  * it. `DataTable.tsx` always renders this wrapper once either `toolbarActions` or
  * `showCount` is on, so it degrades to exactly the old single-count layout when no
  * `toolbarActions` is passed.
- */ const DataTableToolbarEnd = withContext$1(Primitive.div, "toolbarEnd");
+ */ const DataTableToolbarEnd = withContext$2(Primitive.div, "toolbarEnd");
 /**
  * A compact, borderless search box -- crisp's own measured `.crisp-datatable-search`
  * (32px, `bgSurface` background, a leading icon, a soft rest-state shadow, a 1px brand
@@ -10699,7 +11164,7 @@ DataTableInner.displayName = "DataTable";
 // is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
 // rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
 // child without the HTML parser foster-parenting it back out.
-const DataTableTable = withContext$1(DataTableTable$1, "table");
+const DataTableTable = withContext$2(DataTableTable$1, "table");
 /** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
  *  SINGLE place a column's width is ever set now. Every row's header/body/footer cell
  *  reads its own width off this shared `<colgroup>` by construction (native table
@@ -10736,15 +11201,15 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
         ]
     });
 }
-const DataTableHeader = withContext$1(DataTableHeader$1, "header");
-const DataTableHeaderCell = withContext$1(DataTableHeaderCell$1, "headerCell");
+const DataTableHeader = withContext$2(DataTableHeader$1, "header");
+const DataTableHeaderCell = withContext$2(DataTableHeaderCell$1, "headerCell");
 // `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
 // sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
 // for why this lives one level below the cell itself rather than on it.
-const DataTableHeaderCellInner = withContext$1(Primitive.div, "headerCellInner");
+const DataTableHeaderCellInner = withContext$2(Primitive.div, "headerCellInner");
 /** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
  *  truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
- *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$1(Primitive.span, "headerCellLabel");
+ *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$2(Primitive.span, "headerCellLabel");
 /**
  * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
  * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
@@ -10766,12 +11231,12 @@ const DataTableHeaderCellInner = withContext$1(Primitive.div, "headerCellInner")
     return StyledComponent;
 }
 const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
-const DataTableHeaderCellIcon = withContext$1(Primitive.span, "headerCellIcon");
+const DataTableHeaderCellIcon = withContext$2(Primitive.span, "headerCellIcon");
 // body has no CSS slot of its own in the rootage spec -- it is a plain structural
 // `<tbody>`, so it is not wrapped in `withContext`.
 const DataTableBody = DataTableBody$1;
-const DataTableRow = withContext$1(DataTableRow$1, "row");
-const DataTableCell = withContext$1(DataTableCell$1, "cell");
+const DataTableRow = withContext$2(DataTableRow$1, "row");
+const DataTableCell = withContext$2(DataTableCell$1, "cell");
 const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
 // wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
@@ -10781,7 +11246,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // stays out of this slot's own base css (nothing here has a bounded height of its own
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
-const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
+const DataTableScrollBodyBase = withContext$2(Primitive.div, "scrollArea");
 function DataTableScrollBody({ children, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
@@ -10796,7 +11261,7 @@ function DataTableScrollBody({ children, scrollProps }) {
         children: children
     });
 }
-const DataTableFooterBase = withContext$1(Primitive.tfoot, "footer");
+const DataTableFooterBase = withContext$2(Primitive.tfoot, "footer");
 function DataTableFooter({ children, ...props }) {
     return /*#__PURE__*/ jsx(DataTableFooterBase, {
         ...props,
@@ -10805,7 +11270,7 @@ function DataTableFooter({ children, ...props }) {
         })
     });
 }
-const DataTableFooterCell = withContext$1(Primitive.td, "footerCell");
+const DataTableFooterCell = withContext$2(Primitive.td, "footerCell");
 // The selection column's OWN sticky wrappers -- one each for header/body/footer,
 // reading the live pinned set via `useSelectionStickyFirst` (column-layout.ts) instead
 // of the `stickyFirst` PROP alone, so the checkbox column sticks the moment ANY column
@@ -11157,7 +11622,7 @@ DataTableViewsControl.displayName = "DataTableViewsControl";
     });
 }
 
-__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:absolute;top:8px;bottom:8px;z-index:20;border-inline-end:none;border-inline-start:none;border-radius:12px;box-shadow:0 0 0 1px rgba(28,40,64,.04),0 4px 8px -4px rgba(28,40,64,.12),0 4px 12px -2px rgba(24,41,75,.16);transform:none;opacity:1}.seed-resizable-panel__panel[data-floating=true][data-side=left]{left:8px}.seed-resizable-panel__panel[data-floating=true][data-side=right]{right:8px}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:calc(-100% - 8px);--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:calc(-100% - 8px);--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:calc(100% + 8px);--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:calc(100% + 8px);--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__inner{height:100%}.seed-resizable-panel__handle{position:absolute;top:0;width:10px;height:100%;z-index:2;cursor:col-resize;background:0 0;touch-action:none}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
+__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__root[data-floating=true]{position:absolute;inset:0;display:block;height:auto;pointer-events:none}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:absolute;top:0;bottom:0;z-index:20;pointer-events:auto;border-inline-end:none;border-inline-start:none;transform:none;opacity:1}.seed-resizable-panel__panel[data-floating=true][data-side=left]{left:0;border-top-right-radius:12px;border-bottom-right-radius:12px;box-shadow:1px 0 0 rgba(28,40,64,.04),8px 0 16px -6px rgba(28,40,64,.12),8px 0 24px -4px rgba(24,41,75,.16)}.seed-resizable-panel__panel[data-floating=true][data-side=right]{right:0;border-top-left-radius:12px;border-bottom-left-radius:12px;box-shadow:-1px 0 0 rgba(28,40,64,.04),-8px 0 16px -6px rgba(28,40,64,.12),-8px 0 24px -4px rgba(24,41,75,.16)}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:-100%;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:-100%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:100%;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:100%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__inner{height:100%}.seed-resizable-panel__backdrop{position:absolute;inset:0;z-index:19;pointer-events:auto;background:rgba(15,19,32,.32);opacity:0;transition:opacity .16s cubic-bezier(.4, 0, 1, 1)}.seed-resizable-panel__backdrop[data-state=open]{opacity:1;transition-timing-function:cubic-bezier(0.16,1,0.3,1)}.seed-resizable-panel__backdrop[data-state=closed]{opacity:0}.seed-resizable-panel__handle{position:absolute;top:0;width:10px;height:100%;z-index:2;cursor:col-resize;background:0 0;touch-action:none}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
 
 const resizablePanelSlotNames = [
     [
@@ -11183,6 +11648,10 @@ const resizablePanelSlotNames = [
     [
         "handleInner",
         "seed-resizable-panel__handleInner"
+    ],
+    [
+        "backdrop",
+        "seed-resizable-panel__backdrop"
     ]
 ];
 const defaultVariant$1 = {};
@@ -11361,26 +11830,20 @@ Object.assign(resizablePanel, {
 // selector), so this component and that recipe stay in lockstep without a
 // second source of truth for the string.
 const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
-// Kept in lock-step with `resizable-panel.ts`'s own `FLOATING_GUTTER` (a
-// literal there too, for the same reason) -- the floating/inset-card variant
-// needs an outward-facing gutter that DOCKED never reserves. Read on at
-// `spacer`'s own render below for why this can't just be one more CSS rule.
-const FLOATING_GUTTER_PX = 8;
 /**
- * An adjustable-panel primitive: a spacer that reserves layout width plus a
- * panel that overlays it, so it can resize (or animate open/closed) without
- * a reflow glitch on the rest of the layout -- the spacer always reserves
- * the panel's real width, in BOTH the docked and floating visual variants
- * (floating changes only the panel's own look -- gutter, radius, shadow --
- * never its `position`, so a consumer laying this out as a row-flex sibling
- * of e.g. a table sees that table genuinely shrink to make room, matching
- * Attio's own measured peek). Drag the edge handle to resize; constraints
- * are CSS `min-width`/`max-width`, never re-clamped in JS. Ported from
- * your-moon/crisp's `ResizablePanel` (`components/resizablepanel/`);
- * state/drag behavior lives in `useResizablePanel`
- * (`@seed-design/react-resizable-panel`), this component owns the DOM +
- * recipe classes on top of it.
- */ const ResizablePanel = /*#__PURE__*/ forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, animationState, panelElementRef, className, children, ...rest }, forwardedRef)=>{
+ * An adjustable-panel primitive with two layout models (`floating`'s own doc
+ * comment above has the full contrast). Docked: a `spacer` reserves layout
+ * width and the panel overlays exactly that reservation, so a resize drag
+ * never causes a reflow glitch on the rest of the layout. Floating: no
+ * spacer at all -- this component's own outer element becomes a
+ * `position: absolute; inset: 0` overlay reserving zero width, with the
+ * panel itself pinned to one edge and spanning the full height of that box.
+ * Drag the edge handle to resize; constraints are CSS `min-width`/
+ * `max-width`, never re-clamped in JS. Ported from your-moon/crisp's
+ * `ResizablePanel` (`components/resizablepanel/`); state/drag behavior
+ * lives in `useResizablePanel` (`@seed-design/react-resizable-panel`), this
+ * component owns the DOM + recipe classes on top of it.
+ */ const ResizablePanel = /*#__PURE__*/ forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, backdrop = false, onBackdropClick, handleVariant = "panel", resizable = true, storageKey, animationState, panelElementRef, className, children, ...rest }, forwardedRef)=>{
     const { width, dragging, containerRef, panelRef, handleHandlers } = useResizablePanel({
         side,
         size: sizeProp,
@@ -11390,27 +11853,12 @@ const FLOATING_GUTTER_PX = 8;
     });
     const composedPanelRef = useComposedRefs(panelRef, panelElementRef);
     const classNames = resizablePanel();
-    // The floating/inset-card variant sits INSET from `root`'s own outward
-    // edge by `FLOATING_GUTTER_PX`, flush against the inward edge (Attio's
-    // own peek: no gap on the side facing the table it shrinks). `width`
-    // (the prop a consumer sets, e.g. `RecordPreview`'s own 497px default)
-    // is the RESERVED FOOTPRINT -- what the table beside it actually gives
-    // up -- so the panel's own rendered card shrinks by the gutter INSIDE
-    // that footprint, rather than the footprint growing past it: reserving
-    // the panel's full width AND adding an outward gutter on top of it
-    // over-claims space the surrounding layout was never asked for --
-    // confirmed live, it pushed the whole page 8px into horizontal
-    // overflow. Docked (no gutter) keeps `width` as both the reservation
-    // and the render, as before.
-    const panelGutter = floating ? FLOATING_GUTTER_PX : 0;
+    // Floating spans its full container edge to edge -- no gutter, no
+    // shrink -- so the panel's own size style is the SAME reservation a
+    // docked spacer would use; only whether `spacer` itself renders differs
+    // below.
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
-    const panelMaxStyle = panelGutter === 0 || maxStyle == null ? maxStyle : `calc(${maxStyle} - ${panelGutter}px)`;
     const panelSizeStyle = {
-        width: width - panelGutter,
-        minWidth: min - panelGutter,
-        maxWidth: panelMaxStyle
-    };
-    const spacerSizeStyle = {
         width,
         minWidth: min,
         maxWidth: maxStyle
@@ -11422,11 +11870,21 @@ const FLOATING_GUTTER_PX = 8;
             else if (forwardedRef) forwardedRef.current = node;
         },
         className: clsx(classNames.root, className),
+        "data-floating": floating ? "true" : "false",
         ...rest,
         children: [
-            /*#__PURE__*/ jsx(Primitive.div, {
+            !floating && /*#__PURE__*/ jsx(Primitive.div, {
                 className: classNames.spacer,
-                style: spacerSizeStyle
+                style: {
+                    width,
+                    minWidth: min,
+                    maxWidth: maxStyle
+                }
+            }),
+            floating && backdrop && /*#__PURE__*/ jsx(Primitive.div, {
+                className: classNames.backdrop,
+                "data-state": animationState,
+                onClick: onBackdropClick
             }),
             /*#__PURE__*/ jsxs(Primitive.div, {
                 ref: composedPanelRef,
@@ -11458,7 +11916,7 @@ const FLOATING_GUTTER_PX = 8;
 });
 ResizablePanel.displayName = "ResizablePanel";
 
-__insertCSS(".seed-record-preview__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-preview__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__toolbarSpacer{flex:1}.seed-record-preview__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-preview__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-preview__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-preview__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-preview__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-preview__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-preview__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-preview__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-preview__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-preview__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__section{padding:8px 4px 0}.seed-record-preview__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-preview__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-preview__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-preview__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-preview__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-preview__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-preview__activity{font-size:14px}.seed-record-preview__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-preview__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-preview__sectionTrigger[data-inert]{cursor:default}.seed-record-preview__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-preview__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-preview__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-preview__sectionContent{padding:8px 8px 8px 12px}.seed-record-preview__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}");
+__insertCSS(".seed-record-preview__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-preview__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__toolbarSpacer{flex:1}.seed-record-preview__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-preview__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-preview__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-preview__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-preview__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-preview__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-preview__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-preview__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-preview__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-preview__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__section{padding:8px 4px 0}.seed-record-preview__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-preview__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-preview__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-preview__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-preview__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-preview__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-preview__activity{font-size:14px}.seed-record-preview__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-preview__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-preview__sectionTrigger[data-inert]{cursor:default}.seed-record-preview__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-preview__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-preview__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-preview__sectionContent{padding:8px 8px 8px 12px}.seed-record-preview__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__tabsRoot{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.seed-record-preview__tabPanel{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__tabBadge{margin-inline-start:6px}");
 
 const recordPreviewSlotNames = [
     [
@@ -11568,6 +12026,18 @@ const recordPreviewSlotNames = [
     [
         "footer",
         "seed-record-preview__footer"
+    ],
+    [
+        "tabsRoot",
+        "seed-record-preview__tabsRoot"
+    ],
+    [
+        "tabPanel",
+        "seed-record-preview__tabPanel"
+    ],
+    [
+        "tabBadge",
+        "seed-record-preview__tabBadge"
     ]
 ];
 const defaultVariant = {};
@@ -11729,30 +12199,2684 @@ function useStateMachine(initialState, machine) {
 const PresenceContext = /*#__PURE__*/ createContext(null);
 PresenceContext.Provider;
 
-const RESIZE_MIN_WIDTH = 360;
-const RESIZE_MAX_WIDTH = 720;
-/**
- * Right-side record peek panel -- Attio's own peek shows a Highlights card
- * area and an Activity feed (measured live). Ported from your-moon/crisp's
- * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
- * (`side="right" floating`) rather than crisp's own duplicate absolute-
- * positioning/slide-in/resize-handle implementation -- the outer shell (the
- * enter/exit keyframe animation, the floating elevation, the drag handle
- * itself) all come from that primitive; this component only renders the
- * CONTENT inside it.
- *
- * Enter/exit: closing this panel is a state change (`open` -> false) that
- * typically clears `record` in the SAME update (see the DataTable story's
- * own `onClose={() => setPreviewRow(null)}`), so by the time an exit
- * animation should play, the values this component would render are
- * already gone. `usePresence` (`@seed-design/react-presence`, the same
- * idiom Dialog/Drawer already use for their own floating layers) keeps the
- * tree mounted for exactly the exit animation's duration; the snapshot
- * below keeps the LAST visible props around for that same window, since
- * without it the panel would animate out empty.
- */ function RecordPreview(props) {
-    const shouldRender = props.open && props.record != null;
-    const { isPresent, ref: panelElementRef } = usePresence(shouldRender);
+var __defProp$1 = Object.defineProperty;
+var __name$1 = (target, value)=>__defProp$1(target, "name", {
+        value,
+        configurable: true
+    });
+function useSize(element) {
+    const [size, setSize] = React.useState(void 0);
+    useLayoutEffect2(()=>{
+        if (element) {
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) {
+                    return;
+                }
+                if (!entries.length) {
+                    return;
+                }
+                const entry = entries[0];
+                let width;
+                let height;
+                if ("borderBoxSize" in entry) {
+                    const borderSizeEntry = entry["borderBoxSize"];
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize["inlineSize"];
+                    height = borderSize["blockSize"];
+                } else {
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width,
+                    height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: "border-box"
+            });
+            return ()=>resizeObserver.unobserve(element);
+        } else {
+            setSize(void 0);
+        }
+    }, [
+        element
+    ]);
+    return size;
+}
+__name$1(useSize, "useSize");
+
+function useSupports(selector) {
+    const [isSupported, setIsSupported] = useState(null);
+    useEffect(()=>{
+        setIsSupported(CSS.supports(selector));
+    }, [
+        selector
+    ]);
+    return isSupported;
+}
+
+var __defProp = Object.defineProperty;
+var __name = (target, value)=>__defProp(target, "name", {
+        value,
+        configurable: true
+    });
+function useCallbackRef(callback) {
+    const callbackRef = React.useRef(callback);
+    React.useEffect(()=>{
+        callbackRef.current = callback;
+    });
+    return React.useMemo(()=>(...args)=>callbackRef.current?.(...args), []);
+}
+__name(useCallbackRef, "useCallbackRef");
+
+function AutoHeight(userOptions = {}) {
+    let emblaApi;
+    let slideHeights = [];
+    const heightEvents = [
+        'select',
+        'slideFocus'
+    ];
+    function init(emblaApiInstance) {
+        emblaApi = emblaApiInstance;
+        const { options: { axis }, slideRects } = emblaApi.internalEngine();
+        if (axis === 'y') return;
+        slideHeights = slideRects.map((slideRect)=>slideRect.height);
+        heightEvents.forEach((evt)=>emblaApi.on(evt, setContainerHeight));
+        setContainerHeight();
+    }
+    function destroy() {
+        heightEvents.forEach((evt)=>emblaApi.off(evt, setContainerHeight));
+        const container = emblaApi.containerNode();
+        container.style.height = '';
+        if (!container.getAttribute('style')) container.removeAttribute('style');
+    }
+    function highestInView() {
+        const { slideRegistry } = emblaApi.internalEngine();
+        const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+        if (!selectedIndexes) return null;
+        return selectedIndexes.map((index)=>slideHeights[index]).reduce((a, b)=>Math.max(a, b), 0);
+    }
+    function setContainerHeight() {
+        const height = highestInView();
+        if (height === null) return;
+        emblaApi.containerNode().style.height = `${highestInView()}px`;
+    }
+    const self = {
+        name: 'autoHeight',
+        options: userOptions,
+        init,
+        destroy
+    };
+    return self;
+}
+AutoHeight.globalOptions = undefined;
+
+function isObject$1(subject) {
+    return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function isRecord(subject) {
+    return isObject$1(subject) || Array.isArray(subject);
+}
+function canUseDOM() {
+    return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function areOptionsEqual(optionsA, optionsB) {
+    const optionsAKeys = Object.keys(optionsA);
+    const optionsBKeys = Object.keys(optionsB);
+    if (optionsAKeys.length !== optionsBKeys.length) return false;
+    const breakpointsA = JSON.stringify(Object.keys(optionsA.breakpoints || {}));
+    const breakpointsB = JSON.stringify(Object.keys(optionsB.breakpoints || {}));
+    if (breakpointsA !== breakpointsB) return false;
+    return optionsAKeys.every((key)=>{
+        const valueA = optionsA[key];
+        const valueB = optionsB[key];
+        if (typeof valueA === 'function') return `${valueA}` === `${valueB}`;
+        if (!isRecord(valueA) || !isRecord(valueB)) return valueA === valueB;
+        return areOptionsEqual(valueA, valueB);
+    });
+}
+function sortAndMapPluginToOptions(plugins) {
+    return plugins.concat().sort((a, b)=>a.name > b.name ? 1 : -1).map((plugin)=>plugin.options);
+}
+function arePluginsEqual(pluginsA, pluginsB) {
+    if (pluginsA.length !== pluginsB.length) return false;
+    const optionsA = sortAndMapPluginToOptions(pluginsA);
+    const optionsB = sortAndMapPluginToOptions(pluginsB);
+    return optionsA.every((optionA, index)=>{
+        const optionB = optionsB[index];
+        return areOptionsEqual(optionA, optionB);
+    });
+}
+
+function isNumber(subject) {
+    return typeof subject === 'number';
+}
+function isString(subject) {
+    return typeof subject === 'string';
+}
+function isBoolean(subject) {
+    return typeof subject === 'boolean';
+}
+function isObject(subject) {
+    return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function mathAbs(n) {
+    return Math.abs(n);
+}
+function mathSign(n) {
+    return Math.sign(n);
+}
+function deltaAbs(valueB, valueA) {
+    return mathAbs(valueB - valueA);
+}
+function factorAbs(valueB, valueA) {
+    if (valueB === 0 || valueA === 0) return 0;
+    if (mathAbs(valueB) <= mathAbs(valueA)) return 0;
+    const diff = deltaAbs(mathAbs(valueB), mathAbs(valueA));
+    return mathAbs(diff / valueB);
+}
+function roundToTwoDecimals(num) {
+    return Math.round(num * 100) / 100;
+}
+function arrayKeys(array) {
+    return objectKeys(array).map(Number);
+}
+function arrayLast(array) {
+    return array[arrayLastIndex(array)];
+}
+function arrayLastIndex(array) {
+    return Math.max(0, array.length - 1);
+}
+function arrayIsLastIndex(array, index) {
+    return index === arrayLastIndex(array);
+}
+function arrayFromNumber(n, startAt = 0) {
+    return Array.from(Array(n), (_, i)=>startAt + i);
+}
+function objectKeys(object) {
+    return Object.keys(object);
+}
+function objectsMergeDeep(objectA, objectB) {
+    return [
+        objectA,
+        objectB
+    ].reduce((mergedObjects, currentObject)=>{
+        objectKeys(currentObject).forEach((key)=>{
+            const valueA = mergedObjects[key];
+            const valueB = currentObject[key];
+            const areObjects = isObject(valueA) && isObject(valueB);
+            mergedObjects[key] = areObjects ? objectsMergeDeep(valueA, valueB) : valueB;
+        });
+        return mergedObjects;
+    }, {});
+}
+function isMouseEvent(evt, ownerWindow) {
+    return typeof ownerWindow.MouseEvent !== 'undefined' && evt instanceof ownerWindow.MouseEvent;
+}
+function Alignment(align, viewSize) {
+    const predefined = {
+        start,
+        center,
+        end
+    };
+    function start() {
+        return 0;
+    }
+    function center(n) {
+        return end(n) / 2;
+    }
+    function end(n) {
+        return viewSize - n;
+    }
+    function measure(n, index) {
+        if (isString(align)) return predefined[align](n);
+        return align(viewSize, n, index);
+    }
+    const self = {
+        measure
+    };
+    return self;
+}
+function EventStore() {
+    let listeners = [];
+    function add(node, type, handler, options = {
+        passive: true
+    }) {
+        let removeListener;
+        if ('addEventListener' in node) {
+            node.addEventListener(type, handler, options);
+            removeListener = ()=>node.removeEventListener(type, handler, options);
+        } else {
+            const legacyMediaQueryList = node;
+            legacyMediaQueryList.addListener(handler);
+            removeListener = ()=>legacyMediaQueryList.removeListener(handler);
+        }
+        listeners.push(removeListener);
+        return self;
+    }
+    function clear() {
+        listeners = listeners.filter((remove)=>remove());
+    }
+    const self = {
+        add,
+        clear
+    };
+    return self;
+}
+function Animations(ownerDocument, ownerWindow, update, render) {
+    const documentVisibleHandler = EventStore();
+    const fixedTimeStep = 1000 / 60;
+    let lastTimeStamp = null;
+    let accumulatedTime = 0;
+    let animationId = 0;
+    function init() {
+        documentVisibleHandler.add(ownerDocument, 'visibilitychange', ()=>{
+            if (ownerDocument.hidden) reset();
+        });
+    }
+    function destroy() {
+        stop();
+        documentVisibleHandler.clear();
+    }
+    function animate(timeStamp) {
+        if (!animationId) return;
+        if (!lastTimeStamp) {
+            lastTimeStamp = timeStamp;
+            update();
+            update();
+        }
+        const timeElapsed = timeStamp - lastTimeStamp;
+        lastTimeStamp = timeStamp;
+        accumulatedTime += timeElapsed;
+        while(accumulatedTime >= fixedTimeStep){
+            update();
+            accumulatedTime -= fixedTimeStep;
+        }
+        const alpha = accumulatedTime / fixedTimeStep;
+        render(alpha);
+        if (animationId) {
+            animationId = ownerWindow.requestAnimationFrame(animate);
+        }
+    }
+    function start() {
+        if (animationId) return;
+        animationId = ownerWindow.requestAnimationFrame(animate);
+    }
+    function stop() {
+        ownerWindow.cancelAnimationFrame(animationId);
+        lastTimeStamp = null;
+        accumulatedTime = 0;
+        animationId = 0;
+    }
+    function reset() {
+        lastTimeStamp = null;
+        accumulatedTime = 0;
+    }
+    const self = {
+        init,
+        destroy,
+        start,
+        stop,
+        update,
+        render
+    };
+    return self;
+}
+function Axis(axis, contentDirection) {
+    const isRightToLeft = contentDirection === 'rtl';
+    const isVertical = axis === 'y';
+    const scroll = isVertical ? 'y' : 'x';
+    const cross = isVertical ? 'x' : 'y';
+    const sign = !isVertical && isRightToLeft ? -1 : 1;
+    const startEdge = getStartEdge();
+    const endEdge = getEndEdge();
+    function measureSize(nodeRect) {
+        const { height, width } = nodeRect;
+        return isVertical ? height : width;
+    }
+    function getStartEdge() {
+        if (isVertical) return 'top';
+        return isRightToLeft ? 'right' : 'left';
+    }
+    function getEndEdge() {
+        if (isVertical) return 'bottom';
+        return isRightToLeft ? 'left' : 'right';
+    }
+    function direction(n) {
+        return n * sign;
+    }
+    const self = {
+        scroll,
+        cross,
+        startEdge,
+        endEdge,
+        measureSize,
+        direction
+    };
+    return self;
+}
+function Limit(min = 0, max = 0) {
+    const length = mathAbs(min - max);
+    function reachedMin(n) {
+        return n < min;
+    }
+    function reachedMax(n) {
+        return n > max;
+    }
+    function reachedAny(n) {
+        return reachedMin(n) || reachedMax(n);
+    }
+    function constrain(n) {
+        if (!reachedAny(n)) return n;
+        return reachedMin(n) ? min : max;
+    }
+    function removeOffset(n) {
+        if (!length) return n;
+        return n - length * Math.ceil((n - max) / length);
+    }
+    const self = {
+        length,
+        max,
+        min,
+        constrain,
+        reachedAny,
+        reachedMax,
+        reachedMin,
+        removeOffset
+    };
+    return self;
+}
+function Counter(max, start, loop) {
+    const { constrain } = Limit(0, max);
+    const loopEnd = max + 1;
+    let counter = withinLimit(start);
+    function withinLimit(n) {
+        return !loop ? constrain(n) : mathAbs((loopEnd + n) % loopEnd);
+    }
+    function get() {
+        return counter;
+    }
+    function set(n) {
+        counter = withinLimit(n);
+        return self;
+    }
+    function add(n) {
+        return clone().set(get() + n);
+    }
+    function clone() {
+        return Counter(max, get(), loop);
+    }
+    const self = {
+        get,
+        set,
+        add,
+        clone
+    };
+    return self;
+}
+function DragHandler(axis, rootNode, ownerDocument, ownerWindow, target, dragTracker, location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, baseFriction, watchDrag) {
+    const { cross: crossAxis, direction } = axis;
+    const focusNodes = [
+        'INPUT',
+        'SELECT',
+        'TEXTAREA'
+    ];
+    const nonPassiveEvent = {
+        passive: false
+    };
+    const initEvents = EventStore();
+    const dragEvents = EventStore();
+    const goToNextThreshold = Limit(50, 225).constrain(percentOfView.measure(20));
+    const snapForceBoost = {
+        mouse: 300,
+        touch: 400
+    };
+    const freeForceBoost = {
+        mouse: 500,
+        touch: 600
+    };
+    const baseSpeed = dragFree ? 43 : 25;
+    let isMoving = false;
+    let startScroll = 0;
+    let startCross = 0;
+    let pointerIsDown = false;
+    let preventScroll = false;
+    let preventClick = false;
+    let isMouse = false;
+    function init(emblaApi) {
+        if (!watchDrag) return;
+        function downIfAllowed(evt) {
+            if (isBoolean(watchDrag) || watchDrag(emblaApi, evt)) down(evt);
+        }
+        const node = rootNode;
+        initEvents.add(node, 'dragstart', (evt)=>evt.preventDefault(), nonPassiveEvent).add(node, 'touchmove', ()=>undefined, nonPassiveEvent).add(node, 'touchend', ()=>undefined).add(node, 'touchstart', downIfAllowed).add(node, 'mousedown', downIfAllowed).add(node, 'touchcancel', up).add(node, 'contextmenu', up).add(node, 'click', click, true);
+    }
+    function destroy() {
+        initEvents.clear();
+        dragEvents.clear();
+    }
+    function addDragEvents() {
+        const node = isMouse ? ownerDocument : rootNode;
+        dragEvents.add(node, 'touchmove', move, nonPassiveEvent).add(node, 'touchend', up).add(node, 'mousemove', move, nonPassiveEvent).add(node, 'mouseup', up);
+    }
+    function isFocusNode(node) {
+        const nodeName = node.nodeName || '';
+        return focusNodes.includes(nodeName);
+    }
+    function forceBoost() {
+        const boost = dragFree ? freeForceBoost : snapForceBoost;
+        const type = isMouse ? 'mouse' : 'touch';
+        return boost[type];
+    }
+    function allowedForce(force, targetChanged) {
+        const next = index.add(mathSign(force) * -1);
+        const baseForce = scrollTarget.byDistance(force, !dragFree).distance;
+        if (dragFree || mathAbs(force) < goToNextThreshold) return baseForce;
+        if (skipSnaps && targetChanged) return baseForce * 0.5;
+        return scrollTarget.byIndex(next.get(), 0).distance;
+    }
+    function down(evt) {
+        const isMouseEvt = isMouseEvent(evt, ownerWindow);
+        isMouse = isMouseEvt;
+        preventClick = dragFree && isMouseEvt && !evt.buttons && isMoving;
+        isMoving = deltaAbs(target.get(), location.get()) >= 2;
+        if (isMouseEvt && evt.button !== 0) return;
+        if (isFocusNode(evt.target)) return;
+        pointerIsDown = true;
+        dragTracker.pointerDown(evt);
+        scrollBody.useFriction(0).useDuration(0);
+        target.set(location);
+        addDragEvents();
+        startScroll = dragTracker.readPoint(evt);
+        startCross = dragTracker.readPoint(evt, crossAxis);
+        eventHandler.emit('pointerDown');
+    }
+    function move(evt) {
+        const isTouchEvt = !isMouseEvent(evt, ownerWindow);
+        if (isTouchEvt && evt.touches.length >= 2) return up(evt);
+        const lastScroll = dragTracker.readPoint(evt);
+        const lastCross = dragTracker.readPoint(evt, crossAxis);
+        const diffScroll = deltaAbs(lastScroll, startScroll);
+        const diffCross = deltaAbs(lastCross, startCross);
+        if (!preventScroll && !isMouse) {
+            if (!evt.cancelable) return up(evt);
+            preventScroll = diffScroll > diffCross;
+            if (!preventScroll) return up(evt);
+        }
+        const diff = dragTracker.pointerMove(evt);
+        if (diffScroll > dragThreshold) preventClick = true;
+        scrollBody.useFriction(0.3).useDuration(0.75);
+        animation.start();
+        target.add(direction(diff));
+        evt.preventDefault();
+    }
+    function up(evt) {
+        const currentLocation = scrollTarget.byDistance(0, false);
+        const targetChanged = currentLocation.index !== index.get();
+        const rawForce = dragTracker.pointerUp(evt) * forceBoost();
+        const force = allowedForce(direction(rawForce), targetChanged);
+        const forceFactor = factorAbs(rawForce, force);
+        const speed = baseSpeed - 10 * forceFactor;
+        const friction = baseFriction + forceFactor / 50;
+        preventScroll = false;
+        pointerIsDown = false;
+        dragEvents.clear();
+        scrollBody.useDuration(speed).useFriction(friction);
+        scrollTo.distance(force, !dragFree);
+        isMouse = false;
+        eventHandler.emit('pointerUp');
+    }
+    function click(evt) {
+        if (preventClick) {
+            evt.stopPropagation();
+            evt.preventDefault();
+            preventClick = false;
+        }
+    }
+    function pointerDown() {
+        return pointerIsDown;
+    }
+    const self = {
+        init,
+        destroy,
+        pointerDown
+    };
+    return self;
+}
+function DragTracker(axis, ownerWindow) {
+    const logInterval = 170;
+    let startEvent;
+    let lastEvent;
+    function readTime(evt) {
+        return evt.timeStamp;
+    }
+    function readPoint(evt, evtAxis) {
+        const property = evtAxis || axis.scroll;
+        const coord = `client${property === 'x' ? 'X' : 'Y'}`;
+        return (isMouseEvent(evt, ownerWindow) ? evt : evt.touches[0])[coord];
+    }
+    function pointerDown(evt) {
+        startEvent = evt;
+        lastEvent = evt;
+        return readPoint(evt);
+    }
+    function pointerMove(evt) {
+        const diff = readPoint(evt) - readPoint(lastEvent);
+        const expired = readTime(evt) - readTime(startEvent) > logInterval;
+        lastEvent = evt;
+        if (expired) startEvent = evt;
+        return diff;
+    }
+    function pointerUp(evt) {
+        if (!startEvent || !lastEvent) return 0;
+        const diffDrag = readPoint(lastEvent) - readPoint(startEvent);
+        const diffTime = readTime(evt) - readTime(startEvent);
+        const expired = readTime(evt) - readTime(lastEvent) > logInterval;
+        const force = diffDrag / diffTime;
+        const isFlick = diffTime && !expired && mathAbs(force) > 0.1;
+        return isFlick ? force : 0;
+    }
+    const self = {
+        pointerDown,
+        pointerMove,
+        pointerUp,
+        readPoint
+    };
+    return self;
+}
+function NodeRects() {
+    function measure(node) {
+        const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node;
+        const offset = {
+            top: offsetTop,
+            right: offsetLeft + offsetWidth,
+            bottom: offsetTop + offsetHeight,
+            left: offsetLeft,
+            width: offsetWidth,
+            height: offsetHeight
+        };
+        return offset;
+    }
+    const self = {
+        measure
+    };
+    return self;
+}
+function PercentOfView(viewSize) {
+    function measure(n) {
+        return viewSize * (n / 100);
+    }
+    const self = {
+        measure
+    };
+    return self;
+}
+function ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects) {
+    const observeNodes = [
+        container
+    ].concat(slides);
+    let resizeObserver;
+    let containerSize;
+    let slideSizes = [];
+    let destroyed = false;
+    function readSize(node) {
+        return axis.measureSize(nodeRects.measure(node));
+    }
+    function init(emblaApi) {
+        if (!watchResize) return;
+        containerSize = readSize(container);
+        slideSizes = slides.map(readSize);
+        function defaultCallback(entries) {
+            for (const entry of entries){
+                if (destroyed) return;
+                const isContainer = entry.target === container;
+                const slideIndex = slides.indexOf(entry.target);
+                const lastSize = isContainer ? containerSize : slideSizes[slideIndex];
+                const newSize = readSize(isContainer ? container : slides[slideIndex]);
+                const diffSize = mathAbs(newSize - lastSize);
+                if (diffSize >= 0.5) {
+                    emblaApi.reInit();
+                    eventHandler.emit('resize');
+                    break;
+                }
+            }
+        }
+        resizeObserver = new ResizeObserver((entries)=>{
+            if (isBoolean(watchResize) || watchResize(emblaApi, entries)) {
+                defaultCallback(entries);
+            }
+        });
+        ownerWindow.requestAnimationFrame(()=>{
+            observeNodes.forEach((node)=>resizeObserver.observe(node));
+        });
+    }
+    function destroy() {
+        destroyed = true;
+        if (resizeObserver) resizeObserver.disconnect();
+    }
+    const self = {
+        init,
+        destroy
+    };
+    return self;
+}
+function ScrollBody(location, offsetLocation, previousLocation, target, baseDuration, baseFriction) {
+    let scrollVelocity = 0;
+    let scrollDirection = 0;
+    let scrollDuration = baseDuration;
+    let scrollFriction = baseFriction;
+    let rawLocation = location.get();
+    let rawLocationPrevious = 0;
+    function seek() {
+        const displacement = target.get() - location.get();
+        const isInstant = !scrollDuration;
+        let scrollDistance = 0;
+        if (isInstant) {
+            scrollVelocity = 0;
+            previousLocation.set(target);
+            location.set(target);
+            scrollDistance = displacement;
+        } else {
+            previousLocation.set(location);
+            scrollVelocity += displacement / scrollDuration;
+            scrollVelocity *= scrollFriction;
+            rawLocation += scrollVelocity;
+            location.add(scrollVelocity);
+            scrollDistance = rawLocation - rawLocationPrevious;
+        }
+        scrollDirection = mathSign(scrollDistance);
+        rawLocationPrevious = rawLocation;
+        return self;
+    }
+    function settled() {
+        const diff = target.get() - offsetLocation.get();
+        return mathAbs(diff) < 0.001;
+    }
+    function duration() {
+        return scrollDuration;
+    }
+    function direction() {
+        return scrollDirection;
+    }
+    function velocity() {
+        return scrollVelocity;
+    }
+    function useBaseDuration() {
+        return useDuration(baseDuration);
+    }
+    function useBaseFriction() {
+        return useFriction(baseFriction);
+    }
+    function useDuration(n) {
+        scrollDuration = n;
+        return self;
+    }
+    function useFriction(n) {
+        scrollFriction = n;
+        return self;
+    }
+    const self = {
+        direction,
+        duration,
+        velocity,
+        seek,
+        settled,
+        useBaseFriction,
+        useBaseDuration,
+        useFriction,
+        useDuration
+    };
+    return self;
+}
+function ScrollBounds(limit, location, target, scrollBody, percentOfView) {
+    const pullBackThreshold = percentOfView.measure(10);
+    const edgeOffsetTolerance = percentOfView.measure(50);
+    const frictionLimit = Limit(0.1, 0.99);
+    let disabled = false;
+    function shouldConstrain() {
+        if (disabled) return false;
+        if (!limit.reachedAny(target.get())) return false;
+        if (!limit.reachedAny(location.get())) return false;
+        return true;
+    }
+    function constrain(pointerDown) {
+        if (!shouldConstrain()) return;
+        const edge = limit.reachedMin(location.get()) ? 'min' : 'max';
+        const diffToEdge = mathAbs(limit[edge] - location.get());
+        const diffToTarget = target.get() - location.get();
+        const friction = frictionLimit.constrain(diffToEdge / edgeOffsetTolerance);
+        target.subtract(diffToTarget * friction);
+        if (!pointerDown && mathAbs(diffToTarget) < pullBackThreshold) {
+            target.set(limit.constrain(target.get()));
+            scrollBody.useDuration(25).useBaseFriction();
+        }
+    }
+    function toggleActive(active) {
+        disabled = !active;
+    }
+    const self = {
+        shouldConstrain,
+        constrain,
+        toggleActive
+    };
+    return self;
+}
+function ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance) {
+    const scrollBounds = Limit(-contentSize + viewSize, 0);
+    const snapsBounded = measureBounded();
+    const scrollContainLimit = findScrollContainLimit();
+    const snapsContained = measureContained();
+    function usePixelTolerance(bound, snap) {
+        return deltaAbs(bound, snap) <= 1;
+    }
+    function findScrollContainLimit() {
+        const startSnap = snapsBounded[0];
+        const endSnap = arrayLast(snapsBounded);
+        const min = snapsBounded.lastIndexOf(startSnap);
+        const max = snapsBounded.indexOf(endSnap) + 1;
+        return Limit(min, max);
+    }
+    function measureBounded() {
+        return snapsAligned.map((snapAligned, index)=>{
+            const { min, max } = scrollBounds;
+            const snap = scrollBounds.constrain(snapAligned);
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(snapsAligned, index);
+            if (isFirst) return max;
+            if (isLast) return min;
+            if (usePixelTolerance(min, snap)) return min;
+            if (usePixelTolerance(max, snap)) return max;
+            return snap;
+        }).map((scrollBound)=>parseFloat(scrollBound.toFixed(3)));
+    }
+    function measureContained() {
+        if (contentSize <= viewSize + pixelTolerance) return [
+            scrollBounds.max
+        ];
+        if (containScroll === 'keepSnaps') return snapsBounded;
+        const { min, max } = scrollContainLimit;
+        return snapsBounded.slice(min, max);
+    }
+    const self = {
+        snapsContained,
+        scrollContainLimit
+    };
+    return self;
+}
+function ScrollLimit(contentSize, scrollSnaps, loop) {
+    const max = scrollSnaps[0];
+    const min = loop ? max - contentSize : arrayLast(scrollSnaps);
+    const limit = Limit(min, max);
+    const self = {
+        limit
+    };
+    return self;
+}
+function ScrollLooper(contentSize, limit, location, vectors) {
+    const jointSafety = 0.1;
+    const min = limit.min + jointSafety;
+    const max = limit.max + jointSafety;
+    const { reachedMin, reachedMax } = Limit(min, max);
+    function shouldLoop(direction) {
+        if (direction === 1) return reachedMax(location.get());
+        if (direction === -1) return reachedMin(location.get());
+        return false;
+    }
+    function loop(direction) {
+        if (!shouldLoop(direction)) return;
+        const loopDistance = contentSize * (direction * -1);
+        vectors.forEach((v)=>v.add(loopDistance));
+    }
+    const self = {
+        loop
+    };
+    return self;
+}
+function ScrollProgress(limit) {
+    const { max, length } = limit;
+    function get(n) {
+        const currentLocation = n - max;
+        return length ? currentLocation / -length : 0;
+    }
+    const self = {
+        get
+    };
+    return self;
+}
+function ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll) {
+    const { startEdge, endEdge } = axis;
+    const { groupSlides } = slidesToScroll;
+    const alignments = measureSizes().map(alignment.measure);
+    const snaps = measureUnaligned();
+    const snapsAligned = measureAligned();
+    function measureSizes() {
+        return groupSlides(slideRects).map((rects)=>arrayLast(rects)[endEdge] - rects[0][startEdge]).map(mathAbs);
+    }
+    function measureUnaligned() {
+        return slideRects.map((rect)=>containerRect[startEdge] - rect[startEdge]).map((snap)=>-mathAbs(snap));
+    }
+    function measureAligned() {
+        return groupSlides(snaps).map((g)=>g[0]).map((snap, index)=>snap + alignments[index]);
+    }
+    const self = {
+        snaps,
+        snapsAligned
+    };
+    return self;
+}
+function SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes) {
+    const { groupSlides } = slidesToScroll;
+    const { min, max } = scrollContainLimit;
+    const slideRegistry = createSlideRegistry();
+    function createSlideRegistry() {
+        const groupedSlideIndexes = groupSlides(slideIndexes);
+        const doNotContain = !containSnaps || containScroll === 'keepSnaps';
+        if (scrollSnaps.length === 1) return [
+            slideIndexes
+        ];
+        if (doNotContain) return groupedSlideIndexes;
+        return groupedSlideIndexes.slice(min, max).map((group, index, groups)=>{
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(groups, index);
+            if (isFirst) {
+                const range = arrayLast(groups[0]) + 1;
+                return arrayFromNumber(range);
+            }
+            if (isLast) {
+                const range = arrayLastIndex(slideIndexes) - arrayLast(groups)[0] + 1;
+                return arrayFromNumber(range, arrayLast(groups)[0]);
+            }
+            return group;
+        });
+    }
+    const self = {
+        slideRegistry
+    };
+    return self;
+}
+function ScrollTarget(loop, scrollSnaps, contentSize, limit, targetVector) {
+    const { reachedAny, removeOffset, constrain } = limit;
+    function minDistance(distances) {
+        return distances.concat().sort((a, b)=>mathAbs(a) - mathAbs(b))[0];
+    }
+    function findTargetSnap(target) {
+        const distance = loop ? removeOffset(target) : constrain(target);
+        const ascDiffsToSnaps = scrollSnaps.map((snap, index)=>({
+                diff: shortcut(snap - distance, 0),
+                index
+            })).sort((d1, d2)=>mathAbs(d1.diff) - mathAbs(d2.diff));
+        const { index } = ascDiffsToSnaps[0];
+        return {
+            index,
+            distance
+        };
+    }
+    function shortcut(target, direction) {
+        const targets = [
+            target,
+            target + contentSize,
+            target - contentSize
+        ];
+        if (!loop) return target;
+        if (!direction) return minDistance(targets);
+        const matchingTargets = targets.filter((t)=>mathSign(t) === direction);
+        if (matchingTargets.length) return minDistance(matchingTargets);
+        return arrayLast(targets) - contentSize;
+    }
+    function byIndex(index, direction) {
+        const diffToSnap = scrollSnaps[index] - targetVector.get();
+        const distance = shortcut(diffToSnap, direction);
+        return {
+            index,
+            distance
+        };
+    }
+    function byDistance(distance, snap) {
+        const target = targetVector.get() + distance;
+        const { index, distance: targetSnapDistance } = findTargetSnap(target);
+        const reachedBound = !loop && reachedAny(target);
+        if (!snap || reachedBound) return {
+            index,
+            distance
+        };
+        const diffToSnap = scrollSnaps[index] - targetSnapDistance;
+        const snapDistance = distance + shortcut(diffToSnap, 0);
+        return {
+            index,
+            distance: snapDistance
+        };
+    }
+    const self = {
+        byDistance,
+        byIndex,
+        shortcut
+    };
+    return self;
+}
+function ScrollTo(animation, indexCurrent, indexPrevious, scrollBody, scrollTarget, targetVector, eventHandler) {
+    function scrollTo(target) {
+        const distanceDiff = target.distance;
+        const indexDiff = target.index !== indexCurrent.get();
+        targetVector.add(distanceDiff);
+        if (distanceDiff) {
+            if (scrollBody.duration()) {
+                animation.start();
+            } else {
+                animation.update();
+                animation.render(1);
+                animation.update();
+            }
+        }
+        if (indexDiff) {
+            indexPrevious.set(indexCurrent.get());
+            indexCurrent.set(target.index);
+            eventHandler.emit('select');
+        }
+    }
+    function distance(n, snap) {
+        const target = scrollTarget.byDistance(n, snap);
+        scrollTo(target);
+    }
+    function index(n, direction) {
+        const targetIndex = indexCurrent.clone().set(n);
+        const target = scrollTarget.byIndex(targetIndex.get(), direction);
+        scrollTo(target);
+    }
+    const self = {
+        distance,
+        index
+    };
+    return self;
+}
+function SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus) {
+    const focusListenerOptions = {
+        passive: true,
+        capture: true
+    };
+    let lastTabPressTime = 0;
+    function init(emblaApi) {
+        if (!watchFocus) return;
+        function defaultCallback(index) {
+            const nowTime = new Date().getTime();
+            const diffTime = nowTime - lastTabPressTime;
+            if (diffTime > 10) return;
+            eventHandler.emit('slideFocusStart');
+            root.scrollLeft = 0;
+            const group = slideRegistry.findIndex((group)=>group.includes(index));
+            if (!isNumber(group)) return;
+            scrollBody.useDuration(0);
+            scrollTo.index(group, 0);
+            eventHandler.emit('slideFocus');
+        }
+        eventStore.add(document, 'keydown', registerTabPress, false);
+        slides.forEach((slide, slideIndex)=>{
+            eventStore.add(slide, 'focus', (evt)=>{
+                if (isBoolean(watchFocus) || watchFocus(emblaApi, evt)) {
+                    defaultCallback(slideIndex);
+                }
+            }, focusListenerOptions);
+        });
+    }
+    function registerTabPress(event) {
+        if (event.code === 'Tab') lastTabPressTime = new Date().getTime();
+    }
+    const self = {
+        init
+    };
+    return self;
+}
+function Vector1D(initialValue) {
+    let value = initialValue;
+    function get() {
+        return value;
+    }
+    function set(n) {
+        value = normalizeInput(n);
+    }
+    function add(n) {
+        value += normalizeInput(n);
+    }
+    function subtract(n) {
+        value -= normalizeInput(n);
+    }
+    function normalizeInput(n) {
+        return isNumber(n) ? n : n.get();
+    }
+    const self = {
+        get,
+        set,
+        add,
+        subtract
+    };
+    return self;
+}
+function Translate(axis, container) {
+    const translate = axis.scroll === 'x' ? x : y;
+    const containerStyle = container.style;
+    let previousTarget = null;
+    let disabled = false;
+    function x(n) {
+        return `translate3d(${n}px,0px,0px)`;
+    }
+    function y(n) {
+        return `translate3d(0px,${n}px,0px)`;
+    }
+    function to(target) {
+        if (disabled) return;
+        const newTarget = roundToTwoDecimals(axis.direction(target));
+        if (newTarget === previousTarget) return;
+        containerStyle.transform = translate(newTarget);
+        previousTarget = newTarget;
+    }
+    function toggleActive(active) {
+        disabled = !active;
+    }
+    function clear() {
+        if (disabled) return;
+        containerStyle.transform = '';
+        if (!container.getAttribute('style')) container.removeAttribute('style');
+    }
+    const self = {
+        clear,
+        to,
+        toggleActive
+    };
+    return self;
+}
+function SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, location, slides) {
+    const roundingSafety = 0.5;
+    const ascItems = arrayKeys(slideSizesWithGaps);
+    const descItems = arrayKeys(slideSizesWithGaps).reverse();
+    const loopPoints = startPoints().concat(endPoints());
+    function removeSlideSizes(indexes, from) {
+        return indexes.reduce((a, i)=>{
+            return a - slideSizesWithGaps[i];
+        }, from);
+    }
+    function slidesInGap(indexes, gap) {
+        return indexes.reduce((a, i)=>{
+            const remainingGap = removeSlideSizes(a, gap);
+            return remainingGap > 0 ? a.concat([
+                i
+            ]) : a;
+        }, []);
+    }
+    function findSlideBounds(offset) {
+        return snaps.map((snap, index)=>({
+                start: snap - slideSizes[index] + roundingSafety + offset,
+                end: snap + viewSize - roundingSafety + offset
+            }));
+    }
+    function findLoopPoints(indexes, offset, isEndEdge) {
+        const slideBounds = findSlideBounds(offset);
+        return indexes.map((index)=>{
+            const initial = isEndEdge ? 0 : -contentSize;
+            const altered = isEndEdge ? contentSize : 0;
+            const boundEdge = isEndEdge ? 'end' : 'start';
+            const loopPoint = slideBounds[index][boundEdge];
+            return {
+                index,
+                loopPoint,
+                slideLocation: Vector1D(-1),
+                translate: Translate(axis, slides[index]),
+                target: ()=>location.get() > loopPoint ? initial : altered
+            };
+        });
+    }
+    function startPoints() {
+        const gap = scrollSnaps[0];
+        const indexes = slidesInGap(descItems, gap);
+        return findLoopPoints(indexes, contentSize, false);
+    }
+    function endPoints() {
+        const gap = viewSize - scrollSnaps[0] - 1;
+        const indexes = slidesInGap(ascItems, gap);
+        return findLoopPoints(indexes, -contentSize, true);
+    }
+    function canLoop() {
+        return loopPoints.every(({ index })=>{
+            const otherIndexes = ascItems.filter((i)=>i !== index);
+            return removeSlideSizes(otherIndexes, viewSize) <= 0.1;
+        });
+    }
+    function loop() {
+        loopPoints.forEach((loopPoint)=>{
+            const { target, translate, slideLocation } = loopPoint;
+            const shiftLocation = target();
+            if (shiftLocation === slideLocation.get()) return;
+            translate.to(shiftLocation);
+            slideLocation.set(shiftLocation);
+        });
+    }
+    function clear() {
+        loopPoints.forEach((loopPoint)=>loopPoint.translate.clear());
+    }
+    const self = {
+        canLoop,
+        clear,
+        loop,
+        loopPoints
+    };
+    return self;
+}
+function SlidesHandler(container, eventHandler, watchSlides) {
+    let mutationObserver;
+    let destroyed = false;
+    function init(emblaApi) {
+        if (!watchSlides) return;
+        function defaultCallback(mutations) {
+            for (const mutation of mutations){
+                if (mutation.type === 'childList') {
+                    emblaApi.reInit();
+                    eventHandler.emit('slidesChanged');
+                    break;
+                }
+            }
+        }
+        mutationObserver = new MutationObserver((mutations)=>{
+            if (destroyed) return;
+            if (isBoolean(watchSlides) || watchSlides(emblaApi, mutations)) {
+                defaultCallback(mutations);
+            }
+        });
+        mutationObserver.observe(container, {
+            childList: true
+        });
+    }
+    function destroy() {
+        if (mutationObserver) mutationObserver.disconnect();
+        destroyed = true;
+    }
+    const self = {
+        init,
+        destroy
+    };
+    return self;
+}
+function SlidesInView(container, slides, eventHandler, threshold) {
+    const intersectionEntryMap = {};
+    let inViewCache = null;
+    let notInViewCache = null;
+    let intersectionObserver;
+    let destroyed = false;
+    function init() {
+        intersectionObserver = new IntersectionObserver((entries)=>{
+            if (destroyed) return;
+            entries.forEach((entry)=>{
+                const index = slides.indexOf(entry.target);
+                intersectionEntryMap[index] = entry;
+            });
+            inViewCache = null;
+            notInViewCache = null;
+            eventHandler.emit('slidesInView');
+        }, {
+            root: container.parentElement,
+            threshold
+        });
+        slides.forEach((slide)=>intersectionObserver.observe(slide));
+    }
+    function destroy() {
+        if (intersectionObserver) intersectionObserver.disconnect();
+        destroyed = true;
+    }
+    function createInViewList(inView) {
+        return objectKeys(intersectionEntryMap).reduce((list, slideIndex)=>{
+            const index = parseInt(slideIndex);
+            const { isIntersecting } = intersectionEntryMap[index];
+            const inViewMatch = inView && isIntersecting;
+            const notInViewMatch = !inView && !isIntersecting;
+            if (inViewMatch || notInViewMatch) list.push(index);
+            return list;
+        }, []);
+    }
+    function get(inView = true) {
+        if (inView && inViewCache) return inViewCache;
+        if (!inView && notInViewCache) return notInViewCache;
+        const slideIndexes = createInViewList(inView);
+        if (inView) inViewCache = slideIndexes;
+        if (!inView) notInViewCache = slideIndexes;
+        return slideIndexes;
+    }
+    const self = {
+        init,
+        destroy,
+        get
+    };
+    return self;
+}
+function SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow) {
+    const { measureSize, startEdge, endEdge } = axis;
+    const withEdgeGap = slideRects[0] && readEdgeGap;
+    const startGap = measureStartGap();
+    const endGap = measureEndGap();
+    const slideSizes = slideRects.map(measureSize);
+    const slideSizesWithGaps = measureWithGaps();
+    function measureStartGap() {
+        if (!withEdgeGap) return 0;
+        const slideRect = slideRects[0];
+        return mathAbs(containerRect[startEdge] - slideRect[startEdge]);
+    }
+    function measureEndGap() {
+        if (!withEdgeGap) return 0;
+        const style = ownerWindow.getComputedStyle(arrayLast(slides));
+        return parseFloat(style.getPropertyValue(`margin-${endEdge}`));
+    }
+    function measureWithGaps() {
+        return slideRects.map((rect, index, rects)=>{
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(rects, index);
+            if (isFirst) return slideSizes[index] + startGap;
+            if (isLast) return slideSizes[index] + endGap;
+            return rects[index + 1][startEdge] - rect[startEdge];
+        }).map(mathAbs);
+    }
+    const self = {
+        slideSizes,
+        slideSizesWithGaps,
+        startGap,
+        endGap
+    };
+    return self;
+}
+function SlidesToScroll(axis, viewSize, slidesToScroll, loop, containerRect, slideRects, startGap, endGap, pixelTolerance) {
+    const { startEdge, endEdge, direction } = axis;
+    const groupByNumber = isNumber(slidesToScroll);
+    function byNumber(array, groupSize) {
+        return arrayKeys(array).filter((i)=>i % groupSize === 0).map((i)=>array.slice(i, i + groupSize));
+    }
+    function bySize(array) {
+        if (!array.length) return [];
+        return arrayKeys(array).reduce((groups, rectB, index)=>{
+            const rectA = arrayLast(groups) || 0;
+            const isFirst = rectA === 0;
+            const isLast = rectB === arrayLastIndex(array);
+            const edgeA = containerRect[startEdge] - slideRects[rectA][startEdge];
+            const edgeB = containerRect[startEdge] - slideRects[rectB][endEdge];
+            const gapA = !loop && isFirst ? direction(startGap) : 0;
+            const gapB = !loop && isLast ? direction(endGap) : 0;
+            const chunkSize = mathAbs(edgeB - gapB - (edgeA + gapA));
+            if (index && chunkSize > viewSize + pixelTolerance) groups.push(rectB);
+            if (isLast) groups.push(array.length);
+            return groups;
+        }, []).map((currentSize, index, groups)=>{
+            const previousSize = Math.max(groups[index - 1] || 0);
+            return array.slice(previousSize, currentSize);
+        });
+    }
+    function groupSlides(array) {
+        return groupByNumber ? byNumber(array, slidesToScroll) : bySize(array);
+    }
+    const self = {
+        groupSlides
+    };
+    return self;
+}
+function Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler) {
+    // Options
+    const { align, axis: scrollAxis, direction, startIndex, loop, duration, dragFree, dragThreshold, inViewThreshold, slidesToScroll: groupSlides, skipSnaps, containScroll, watchResize, watchSlides, watchDrag, watchFocus } = options;
+    // Measurements
+    const pixelTolerance = 2;
+    const nodeRects = NodeRects();
+    const containerRect = nodeRects.measure(container);
+    const slideRects = slides.map(nodeRects.measure);
+    const axis = Axis(scrollAxis, direction);
+    const viewSize = axis.measureSize(containerRect);
+    const percentOfView = PercentOfView(viewSize);
+    const alignment = Alignment(align, viewSize);
+    const containSnaps = !loop && !!containScroll;
+    const readEdgeGap = loop || !!containScroll;
+    const { slideSizes, slideSizesWithGaps, startGap, endGap } = SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow);
+    const slidesToScroll = SlidesToScroll(axis, viewSize, groupSlides, loop, containerRect, slideRects, startGap, endGap, pixelTolerance);
+    const { snaps, snapsAligned } = ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll);
+    const contentSize = -arrayLast(snaps) + arrayLast(slideSizesWithGaps);
+    const { snapsContained, scrollContainLimit } = ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance);
+    const scrollSnaps = containSnaps ? snapsContained : snapsAligned;
+    const { limit } = ScrollLimit(contentSize, scrollSnaps, loop);
+    // Indexes
+    const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop);
+    const indexPrevious = index.clone();
+    const slideIndexes = arrayKeys(slides);
+    // Animation
+    const update = ({ dragHandler, scrollBody, scrollBounds, options: { loop } })=>{
+        if (!loop) scrollBounds.constrain(dragHandler.pointerDown());
+        scrollBody.seek();
+    };
+    const render = ({ scrollBody, translate, location, offsetLocation, previousLocation, scrollLooper, slideLooper, dragHandler, animation, eventHandler, scrollBounds, options: { loop } }, alpha)=>{
+        const shouldSettle = scrollBody.settled();
+        const withinBounds = !scrollBounds.shouldConstrain();
+        const hasSettled = loop ? shouldSettle : shouldSettle && withinBounds;
+        const hasSettledAndIdle = hasSettled && !dragHandler.pointerDown();
+        if (hasSettledAndIdle) animation.stop();
+        const interpolatedLocation = location.get() * alpha + previousLocation.get() * (1 - alpha);
+        offsetLocation.set(interpolatedLocation);
+        if (loop) {
+            scrollLooper.loop(scrollBody.direction());
+            slideLooper.loop();
+        }
+        translate.to(offsetLocation.get());
+        if (hasSettledAndIdle) eventHandler.emit('settle');
+        if (!hasSettled) eventHandler.emit('scroll');
+    };
+    const animation = Animations(ownerDocument, ownerWindow, ()=>update(engine), (alpha)=>render(engine, alpha));
+    // Shared
+    const friction = 0.68;
+    const startLocation = scrollSnaps[index.get()];
+    const location = Vector1D(startLocation);
+    const previousLocation = Vector1D(startLocation);
+    const offsetLocation = Vector1D(startLocation);
+    const target = Vector1D(startLocation);
+    const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
+    const scrollTarget = ScrollTarget(loop, scrollSnaps, contentSize, limit, target);
+    const scrollTo = ScrollTo(animation, index, indexPrevious, scrollBody, scrollTarget, target, eventHandler);
+    const scrollProgress = ScrollProgress(limit);
+    const eventStore = EventStore();
+    const slidesInView = SlidesInView(container, slides, eventHandler, inViewThreshold);
+    const { slideRegistry } = SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes);
+    const slideFocus = SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus);
+    // Engine
+    const engine = {
+        ownerDocument,
+        ownerWindow,
+        eventHandler,
+        containerRect,
+        slideRects,
+        animation,
+        axis,
+        dragHandler: DragHandler(axis, root, ownerDocument, ownerWindow, target, DragTracker(axis, ownerWindow), location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, friction, watchDrag),
+        eventStore,
+        percentOfView,
+        index,
+        indexPrevious,
+        limit,
+        location,
+        offsetLocation,
+        previousLocation,
+        options,
+        resizeHandler: ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects),
+        scrollBody,
+        scrollBounds: ScrollBounds(limit, offsetLocation, target, scrollBody, percentOfView),
+        scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [
+            location,
+            offsetLocation,
+            previousLocation,
+            target
+        ]),
+        scrollProgress,
+        scrollSnapList: scrollSnaps.map(scrollProgress.get),
+        scrollSnaps,
+        scrollTarget,
+        scrollTo,
+        slideLooper: SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, offsetLocation, slides),
+        slideFocus,
+        slidesHandler: SlidesHandler(container, eventHandler, watchSlides),
+        slidesInView,
+        slideIndexes,
+        slideRegistry,
+        slidesToScroll,
+        target,
+        translate: Translate(axis, container)
+    };
+    return engine;
+}
+function EventHandler() {
+    let listeners = {};
+    let api;
+    function init(emblaApi) {
+        api = emblaApi;
+    }
+    function getListeners(evt) {
+        return listeners[evt] || [];
+    }
+    function emit(evt) {
+        getListeners(evt).forEach((e)=>e(api, evt));
+        return self;
+    }
+    function on(evt, cb) {
+        listeners[evt] = getListeners(evt).concat([
+            cb
+        ]);
+        return self;
+    }
+    function off(evt, cb) {
+        listeners[evt] = getListeners(evt).filter((e)=>e !== cb);
+        return self;
+    }
+    function clear() {
+        listeners = {};
+    }
+    const self = {
+        init,
+        emit,
+        off,
+        on,
+        clear
+    };
+    return self;
+}
+const defaultOptions = {
+    align: 'center',
+    axis: 'x',
+    container: null,
+    slides: null,
+    containScroll: 'trimSnaps',
+    direction: 'ltr',
+    slidesToScroll: 1,
+    inViewThreshold: 0,
+    breakpoints: {},
+    dragFree: false,
+    dragThreshold: 10,
+    loop: false,
+    skipSnaps: false,
+    duration: 25,
+    startIndex: 0,
+    active: true,
+    watchDrag: true,
+    watchResize: true,
+    watchSlides: true,
+    watchFocus: true
+};
+function OptionsHandler(ownerWindow) {
+    function mergeOptions(optionsA, optionsB) {
+        return objectsMergeDeep(optionsA, optionsB || {});
+    }
+    function optionsAtMedia(options) {
+        const optionsAtMedia = options.breakpoints || {};
+        const matchedMediaOptions = objectKeys(optionsAtMedia).filter((media)=>ownerWindow.matchMedia(media).matches).map((media)=>optionsAtMedia[media]).reduce((a, mediaOption)=>mergeOptions(a, mediaOption), {});
+        return mergeOptions(options, matchedMediaOptions);
+    }
+    function optionsMediaQueries(optionsList) {
+        return optionsList.map((options)=>objectKeys(options.breakpoints || {})).reduce((acc, mediaQueries)=>acc.concat(mediaQueries), []).map(ownerWindow.matchMedia);
+    }
+    const self = {
+        mergeOptions,
+        optionsAtMedia,
+        optionsMediaQueries
+    };
+    return self;
+}
+function PluginsHandler(optionsHandler) {
+    let activePlugins = [];
+    function init(emblaApi, plugins) {
+        activePlugins = plugins.filter(({ options })=>optionsHandler.optionsAtMedia(options).active !== false);
+        activePlugins.forEach((plugin)=>plugin.init(emblaApi, optionsHandler));
+        return plugins.reduce((map, plugin)=>Object.assign(map, {
+                [plugin.name]: plugin
+            }), {});
+    }
+    function destroy() {
+        activePlugins = activePlugins.filter((plugin)=>plugin.destroy());
+    }
+    const self = {
+        init,
+        destroy
+    };
+    return self;
+}
+function EmblaCarousel(root, userOptions, userPlugins) {
+    const ownerDocument = root.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    const optionsHandler = OptionsHandler(ownerWindow);
+    const pluginsHandler = PluginsHandler(optionsHandler);
+    const mediaHandlers = EventStore();
+    const eventHandler = EventHandler();
+    const { mergeOptions, optionsAtMedia, optionsMediaQueries } = optionsHandler;
+    const { on, off, emit } = eventHandler;
+    const reInit = reActivate;
+    let destroyed = false;
+    let engine;
+    let optionsBase = mergeOptions(defaultOptions, EmblaCarousel.globalOptions);
+    let options = mergeOptions(optionsBase);
+    let pluginList = [];
+    let pluginApis;
+    let container;
+    let slides;
+    function storeElements() {
+        const { container: userContainer, slides: userSlides } = options;
+        const customContainer = isString(userContainer) ? root.querySelector(userContainer) : userContainer;
+        container = customContainer || root.children[0];
+        const customSlides = isString(userSlides) ? container.querySelectorAll(userSlides) : userSlides;
+        slides = [].slice.call(customSlides || container.children);
+    }
+    function createEngine(options) {
+        const engine = Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler);
+        if (options.loop && !engine.slideLooper.canLoop()) {
+            const optionsWithoutLoop = Object.assign({}, options, {
+                loop: false
+            });
+            return createEngine(optionsWithoutLoop);
+        }
+        return engine;
+    }
+    function activate(withOptions, withPlugins) {
+        if (destroyed) return;
+        optionsBase = mergeOptions(optionsBase, withOptions);
+        options = optionsAtMedia(optionsBase);
+        pluginList = withPlugins || pluginList;
+        storeElements();
+        engine = createEngine(options);
+        optionsMediaQueries([
+            optionsBase,
+            ...pluginList.map(({ options })=>options)
+        ]).forEach((query)=>mediaHandlers.add(query, 'change', reActivate));
+        if (!options.active) return;
+        engine.translate.to(engine.location.get());
+        engine.animation.init();
+        engine.slidesInView.init();
+        engine.slideFocus.init(self);
+        engine.eventHandler.init(self);
+        engine.resizeHandler.init(self);
+        engine.slidesHandler.init(self);
+        if (engine.options.loop) engine.slideLooper.loop();
+        if (container.offsetParent && slides.length) engine.dragHandler.init(self);
+        pluginApis = pluginsHandler.init(self, pluginList);
+    }
+    function reActivate(withOptions, withPlugins) {
+        const startIndex = selectedScrollSnap();
+        deActivate();
+        activate(mergeOptions({
+            startIndex
+        }, withOptions), withPlugins);
+        eventHandler.emit('reInit');
+    }
+    function deActivate() {
+        engine.dragHandler.destroy();
+        engine.eventStore.clear();
+        engine.translate.clear();
+        engine.slideLooper.clear();
+        engine.resizeHandler.destroy();
+        engine.slidesHandler.destroy();
+        engine.slidesInView.destroy();
+        engine.animation.destroy();
+        pluginsHandler.destroy();
+        mediaHandlers.clear();
+    }
+    function destroy() {
+        if (destroyed) return;
+        destroyed = true;
+        mediaHandlers.clear();
+        deActivate();
+        eventHandler.emit('destroy');
+        eventHandler.clear();
+    }
+    function scrollTo(index, jump, direction) {
+        if (!options.active || destroyed) return;
+        engine.scrollBody.useBaseFriction().useDuration(jump === true ? 0 : options.duration);
+        engine.scrollTo.index(index, direction || 0);
+    }
+    function scrollNext(jump) {
+        const next = engine.index.add(1).get();
+        scrollTo(next, jump, -1);
+    }
+    function scrollPrev(jump) {
+        const prev = engine.index.add(-1).get();
+        scrollTo(prev, jump, 1);
+    }
+    function canScrollNext() {
+        const next = engine.index.add(1).get();
+        return next !== selectedScrollSnap();
+    }
+    function canScrollPrev() {
+        const prev = engine.index.add(-1).get();
+        return prev !== selectedScrollSnap();
+    }
+    function scrollSnapList() {
+        return engine.scrollSnapList;
+    }
+    function scrollProgress() {
+        return engine.scrollProgress.get(engine.offsetLocation.get());
+    }
+    function selectedScrollSnap() {
+        return engine.index.get();
+    }
+    function previousScrollSnap() {
+        return engine.indexPrevious.get();
+    }
+    function slidesInView() {
+        return engine.slidesInView.get();
+    }
+    function slidesNotInView() {
+        return engine.slidesInView.get(false);
+    }
+    function plugins() {
+        return pluginApis;
+    }
+    function internalEngine() {
+        return engine;
+    }
+    function rootNode() {
+        return root;
+    }
+    function containerNode() {
+        return container;
+    }
+    function slideNodes() {
+        return slides;
+    }
+    const self = {
+        canScrollNext,
+        canScrollPrev,
+        containerNode,
+        internalEngine,
+        destroy,
+        off,
+        on,
+        emit,
+        plugins,
+        previousScrollSnap,
+        reInit,
+        rootNode,
+        scrollNext,
+        scrollPrev,
+        scrollProgress,
+        scrollSnapList,
+        scrollTo,
+        selectedScrollSnap,
+        slideNodes,
+        slidesInView,
+        slidesNotInView
+    };
+    activate(userOptions, userPlugins);
+    setTimeout(()=>eventHandler.emit('init'), 0);
+    return self;
+}
+EmblaCarousel.globalOptions = undefined;
+
+function useEmblaCarousel(options = {}, plugins = []) {
+    const storedOptions = useRef(options);
+    const storedPlugins = useRef(plugins);
+    const [emblaApi, setEmblaApi] = useState();
+    const [viewport, setViewport] = useState();
+    const reInit = useCallback(()=>{
+        if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current);
+    }, [
+        emblaApi
+    ]);
+    useEffect(()=>{
+        if (areOptionsEqual(storedOptions.current, options)) return;
+        storedOptions.current = options;
+        reInit();
+    }, [
+        options,
+        reInit
+    ]);
+    useEffect(()=>{
+        if (arePluginsEqual(storedPlugins.current, plugins)) return;
+        storedPlugins.current = plugins;
+        reInit();
+    }, [
+        plugins,
+        reInit
+    ]);
+    useEffect(()=>{
+        if (canUseDOM() && viewport) {
+            EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions;
+            const newEmblaApi = EmblaCarousel(viewport, storedOptions.current, storedPlugins.current);
+            setEmblaApi(newEmblaApi);
+            return ()=>newEmblaApi.destroy();
+        } else {
+            setEmblaApi(undefined);
+        }
+    }, [
+        viewport,
+        setEmblaApi
+    ]);
+    return [
+        setViewport,
+        emblaApi
+    ];
+}
+useEmblaCarousel.globalOptions = undefined;
+
+function useRenderStrategy(props) {
+    const wasEverPresent = useRef(false);
+    if (props.present) {
+        wasEverPresent.current = true;
+    }
+    return {
+        unmounted: !props.present && !wasEverPresent.current && props.lazyMount || props.unmountOnExit && !props.present && wasEverPresent.current
+    };
+}
+const RenderStrategyPropsContext = /*#__PURE__*/ createContext(null);
+const RenderStrategyPropsProvider = RenderStrategyPropsContext.Provider;
+function useRenderStrategyPropsContext({ strict = true } = {}) {
+    const context = useContext(RenderStrategyPropsContext);
+    if (!context && strict) {
+        throw new Error("useRenderStrategyPropsContext must be used within a RenderStrategyPropsProvider");
+    }
+    return context;
+}
+/* ID -----------------------------------------------------------------------
+-------------------------------------------------------------------------------- */ const getTriggerId = (value, id)=>`tabs:${value}:${id}:trigger-root`;
+const getListId = (id)=>`tabs:${id}:list`;
+const getContentId = (value, id)=>`tabs:${value}:${id}:content`;
+/* Query -----------------------------------------------------------------------
+-------------------------------------------------------------------------------- */ const getTriggerByValue = (listEl, value)=>{
+    return listEl.querySelector(`[data-value="${value}"]`);
+};
+const getEnabledValues = (el)=>{
+    if (!el) return [];
+    return Array.from(el.children).filter((child)=>!child.hasAttribute("aria-disabled")).map((child)=>child.getAttribute("data-value")).filter(Boolean);
+};
+/* Prevent Drag -----------------------------------------------------------------------
+-------------------------------------------------------------------------------- */ const PREVENT_DRAG_ATTRIBUTE = "data-embla-prevent-drag";
+const isDragPrevented = (el)=>{
+    return el.closest(`[${PREVENT_DRAG_ATTRIBUTE}]`) != null;
+};
+function getPrevIndex(index, length) {
+    if (length <= 0) {
+        throw new Error("Length must be a positive number.");
+    }
+    return (index - 1 + length) % length;
+}
+function getNextIndex(index, length) {
+    if (length <= 0) {
+        throw new Error("Length must be a positive number.");
+    }
+    return (index + 1) % length;
+}
+// Helper function to scroll tab into view
+function scrollTabIntoView(tabElement, listElement, options) {
+    const isHorizontal = listElement.getAttribute("aria-orientation") !== "vertical";
+    // Default padding is 16px if not specified
+    const scrollPadding = options?.scrollPadding;
+    if (isHorizontal) {
+        const tabLeft = tabElement.offsetLeft;
+        const tabRight = tabLeft + tabElement.offsetWidth;
+        const listScrollLeft = listElement.scrollLeft;
+        const listWidth = listElement.clientWidth;
+        const listRight = listScrollLeft + listWidth;
+        if (tabLeft < listScrollLeft) {
+            // Tab is to the left of the visible area - scroll a bit more to the left
+            listElement.scrollTo({
+                left: Math.max(0, tabLeft - scrollPadding),
+                behavior: "smooth"
+            });
+        } else if (tabRight > listRight) {
+            // Tab is to the right of the visible area - scroll a bit more to the right
+            listElement.scrollTo({
+                left: tabRight - listWidth + scrollPadding,
+                behavior: "smooth"
+            });
+        }
+    } else {
+        const tabTop = tabElement.offsetTop;
+        const tabBottom = tabTop + tabElement.offsetHeight;
+        const listScrollTop = listElement.scrollTop;
+        const listHeight = listElement.clientHeight;
+        const listBottom = listScrollTop + listHeight;
+        if (tabTop < listScrollTop) {
+            // Tab is above the visible area - scroll a bit more up
+            listElement.scrollTo({
+                top: Math.max(0, tabTop - scrollPadding),
+                behavior: "smooth"
+            });
+        } else if (tabBottom > listBottom) {
+            // Tab is below the visible area - scroll a bit more down
+            listElement.scrollTo({
+                top: tabBottom - listHeight + scrollPadding,
+                behavior: "smooth"
+            });
+        }
+    }
+}
+function useIsSSR() {
+    const [isSSR, setIsSSR] = useState(true);
+    useEffect(()=>{
+        setIsSSR(false);
+    }, []);
+    return isSSR;
+}
+function useTabsState(props) {
+    const [interactionState, setInteractionState] = useState("idle");
+    const [value, setValue] = useControllableState$1({
+        prop: props.value,
+        defaultProp: props.defaultValue ?? undefined,
+        onChange: props.onValueChange
+    });
+    const [focusedValue, setFocusedValue] = useState(null);
+    const [isFocusVisible, setIsFocusVisible] = useState(false);
+    const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
+    const [listEl, listRef] = useState(null);
+    const [selectedTriggerEl, setSelectedTriggerEl] = useState(null);
+    const selectedTriggerSize = useSize(selectedTriggerEl);
+    const enabledValues = useMemo(()=>listEl ? getEnabledValues(listEl) : [], [
+        listEl
+    ]);
+    const contentIndex = value ? enabledValues.indexOf(value) : -1;
+    const prevIndex = contentIndex >= 0 ? getPrevIndex(contentIndex, enabledValues.length) : -1;
+    const nextIndex = contentIndex >= 0 ? getNextIndex(contentIndex, enabledValues.length) : -1;
+    // Scroll selected tab into view when it changes
+    // TODO: this implementation is temporary, we should create some sort of hook or plugin system
+    //       to allow users to customize the scroll behavior.
+    useEffect(()=>{
+        if (selectedTriggerEl && listEl) {
+            scrollTabIntoView(selectedTriggerEl, listEl, {
+                scrollPadding: 16
+            });
+        }
+    }, [
+        selectedTriggerEl,
+        listEl
+    ]);
+    const focusTriggerByValue = useCallback((value)=>{
+        if (listEl) {
+            getTriggerByValue(listEl, value)?.focus();
+        }
+    }, [
+        listEl
+    ]);
+    const selectPrevAction = useCallback(()=>{
+        const prevValue = enabledValues[prevIndex];
+        if (!prevValue) return;
+        setValue(prevValue);
+    }, [
+        enabledValues,
+        prevIndex,
+        setValue
+    ]);
+    const selectNextAction = useCallback(()=>{
+        const nextValue = enabledValues[nextIndex];
+        if (!nextValue) return;
+        setValue(nextValue);
+    }, [
+        enabledValues,
+        nextIndex,
+        setValue
+    ]);
+    const selectFirstAction = useCallback(()=>{
+        const firstValue = enabledValues[0];
+        if (!firstValue) return;
+        setValue(firstValue);
+    }, [
+        enabledValues,
+        setValue
+    ]);
+    const selectLastAction = useCallback(()=>{
+        const lastValue = enabledValues[enabledValues.length - 1];
+        if (!lastValue) return;
+        setValue(lastValue);
+    }, [
+        enabledValues,
+        setValue
+    ]);
+    const setFocusedValueAction = useCallback((value)=>{
+        setFocusedValue(value);
+    }, []);
+    const clearFocusedValueAction = useCallback(()=>{
+        setFocusedValue(null);
+    }, []);
+    const setValueAction = useCallback((value)=>{
+        setValue(value);
+    }, [
+        setValue
+    ]);
+    const actions = {
+        selectPrev: selectPrevAction,
+        selectNext: selectNextAction,
+        selectFirst: selectFirstAction,
+        selectLast: selectLastAction,
+        setFocusedValue: setFocusedValueAction,
+        clearFocusedValue: clearFocusedValueAction,
+        setValue: setValueAction
+    };
+    const arrowPrevEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectPrev();
+            focusTriggerByValue(enabledValues[prevIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectPrev,
+        focusTriggerByValue,
+        enabledValues,
+        prevIndex,
+        isFocusVisibleSupported
+    ]);
+    const arrowNextEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectNext();
+            focusTriggerByValue(enabledValues[nextIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectNext,
+        focusTriggerByValue,
+        enabledValues,
+        nextIndex,
+        isFocusVisibleSupported
+    ]);
+    const arrowUpEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectPrev();
+            focusTriggerByValue(enabledValues[prevIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectPrev,
+        focusTriggerByValue,
+        enabledValues,
+        prevIndex,
+        isFocusVisibleSupported
+    ]);
+    const arrowDownEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectNext();
+            focusTriggerByValue(enabledValues[nextIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectNext,
+        focusTriggerByValue,
+        enabledValues,
+        nextIndex,
+        isFocusVisibleSupported
+    ]);
+    const homeEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectFirst();
+            focusTriggerByValue(enabledValues[0] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectFirst,
+        focusTriggerByValue,
+        enabledValues,
+        isFocusVisibleSupported
+    ]);
+    const endEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectLast();
+            focusTriggerByValue(enabledValues[enabledValues.length - 1] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectLast,
+        focusTriggerByValue,
+        enabledValues,
+        isFocusVisibleSupported
+    ]);
+    const tabFocusEvent = useCallback((value)=>{
+        actions.setFocusedValue(value);
+        if (interactionState === "idle") {
+            setInteractionState("focused");
+        }
+    }, [
+        interactionState,
+        actions.setFocusedValue
+    ]);
+    const tabBlurEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.clearFocusedValue();
+            setInteractionState("idle");
+        }
+    }, [
+        interactionState,
+        actions.clearFocusedValue
+    ]);
+    const tabClickEvent = useCallback((value)=>{
+        actions.setValue(value);
+        if (interactionState === "idle") {
+            setInteractionState("focused");
+        }
+    }, [
+        interactionState,
+        actions.setValue
+    ]);
+    const setValueEvent = useCallback((value)=>{
+        actions.setValue(value);
+    }, [
+        actions.setValue
+    ]);
+    const selectNextEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectNext();
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectNext,
+        isFocusVisibleSupported
+    ]);
+    const selectPrevEvent = useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectPrev();
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectPrev,
+        isFocusVisibleSupported
+    ]);
+    const setContentIndexEvent = useCallback((index)=>{
+        const valueFromIndex = enabledValues[index];
+        if (!valueFromIndex) return;
+        actions.setValue(valueFromIndex);
+    }, [
+        actions.setValue,
+        enabledValues
+    ]);
+    const setIsFocusVisibleEvent = useCallback((isFocusVisible)=>{
+        setIsFocusVisible(isFocusVisible);
+    }, []);
+    const setSelectedTriggerElEvent = useCallback((element)=>{
+        setSelectedTriggerEl(element);
+    }, []);
+    const events = {
+        arrowPrev: arrowPrevEvent,
+        arrowNext: arrowNextEvent,
+        arrowUp: arrowUpEvent,
+        arrowDown: arrowDownEvent,
+        home: homeEvent,
+        end: endEvent,
+        tabFocus: tabFocusEvent,
+        tabBlur: tabBlurEvent,
+        tabClick: tabClickEvent,
+        setValue: setValueEvent,
+        selectNext: selectNextEvent,
+        selectPrev: selectPrevEvent,
+        setContentIndex: setContentIndexEvent,
+        setIsFocusVisible: setIsFocusVisibleEvent,
+        setSelectedTriggerEl: setSelectedTriggerElEvent
+    };
+    const refs = useMemo(()=>({
+            list: listRef
+        }), []);
+    const triggerRect = useMemo(()=>({
+            width: selectedTriggerSize?.width ?? selectedTriggerEl?.offsetWidth ?? 0,
+            left: selectedTriggerEl?.offsetLeft ?? 0
+        }), [
+        selectedTriggerSize,
+        selectedTriggerEl
+    ]);
+    const isSSR = useIsSSR();
+    return {
+        refs,
+        interactionState,
+        value,
+        isSSR,
+        triggerRect,
+        focusedValue,
+        isFocusVisible,
+        contentIndex,
+        events,
+        isFocusVisibleSupported
+    };
+}
+function useTabs(props) {
+    const autoId = useId();
+    const { refs, interactionState, value, isSSR, events, triggerRect, focusedValue, isFocusVisible, contentIndex, isFocusVisibleSupported } = useTabsState(props);
+    const { orientation = "horizontal" } = props;
+    const focused = interactionState === "focused";
+    const stateProps = useMemo(()=>elementProps({
+            "data-orientation": orientation,
+            "data-focus": dataAttr(focused),
+            "data-ssr": dataAttr(isSSR)
+        }), [
+        orientation,
+        focused,
+        isSSR
+    ]);
+    return {
+        refs,
+        value,
+        contentIndex,
+        triggerRect,
+        selectNext: events.selectNext,
+        selectPrev: events.selectPrev,
+        setValue: events.setValue,
+        setContentIndex: events.setContentIndex,
+        stateProps,
+        rootProps: elementProps({
+            ...stateProps,
+            style: {
+                "--indicator-left": `${triggerRect.left}px`,
+                "--indicator-width": `${triggerRect.width}px`
+            }
+        }),
+        listProps: elementProps({
+            id: getListId(autoId),
+            role: "tablist",
+            "aria-orientation": orientation,
+            ...stateProps,
+            onKeyDown (event) {
+                if (event.defaultPrevented) return;
+                if (event.nativeEvent.isComposing) return;
+                // TODO: support activationMode="manual"
+                switch(event.key){
+                    case "ArrowLeft":
+                        if (orientation !== "horizontal") return;
+                        event.preventDefault();
+                        events.arrowPrev();
+                        break;
+                    case "ArrowRight":
+                        if (orientation !== "horizontal") return;
+                        event.preventDefault();
+                        events.arrowNext();
+                        break;
+                    case "ArrowUp":
+                        if (orientation !== "vertical") return;
+                        event.preventDefault();
+                        events.arrowPrev();
+                        break;
+                    case "ArrowDown":
+                        if (orientation !== "vertical") return;
+                        event.preventDefault();
+                        events.arrowNext();
+                        break;
+                    case "Home":
+                        {
+                            event.preventDefault();
+                            events.home();
+                            break;
+                        }
+                    case "End":
+                        {
+                            event.preventDefault();
+                            events.end();
+                            break;
+                        }
+                }
+            }
+        }),
+        getTriggerProps: (props)=>{
+            const { disabled: isDisabled, value: triggerValue } = props;
+            const itemState = {
+                isDisabled,
+                isSelected: value === triggerValue,
+                isFocused: focusedValue === triggerValue
+            };
+            const itemStateProps = {
+                "data-focus": dataAttr(itemState.isFocused),
+                "data-focus-visible": dataAttr(itemState.isFocused && isFocusVisible),
+                "data-selected": dataAttr(itemState.isSelected),
+                "data-disabled": dataAttr(itemState.isDisabled),
+                "data-ssr": dataAttr(isSSR),
+                "aria-disabled": ariaAttr(itemState.isDisabled),
+                "aria-selected": ariaAttr(itemState.isSelected)
+            };
+            const ref = (element)=>{
+                if (element && triggerValue === value) {
+                    events.setSelectedTriggerEl(element);
+                }
+            };
+            return {
+                ...itemState,
+                refs: {
+                    root: ref
+                },
+                stateProps: itemStateProps,
+                rootProps: buttonProps({
+                    id: getTriggerId(triggerValue, autoId),
+                    role: "tab",
+                    type: "button",
+                    disabled: isDisabled,
+                    tabIndex: itemState.isSelected ? 0 : -1,
+                    ...itemStateProps,
+                    "data-value": triggerValue,
+                    "data-orientation": orientation,
+                    "data-ownedby": getListId(autoId),
+                    "aria-controls": getContentId(triggerValue, autoId),
+                    onClick (event) {
+                        if (itemState.isDisabled) return;
+                        if (event.defaultPrevented) return;
+                        events.tabClick(triggerValue);
+                    },
+                    onFocus (event) {
+                        events.tabFocus(props.value);
+                        if (isFocusVisibleSupported) {
+                            events.setIsFocusVisible(event.target.matches(":focus-visible"));
+                        }
+                    },
+                    onBlur (event) {
+                        const target = event.relatedTarget;
+                        if (target?.getAttribute("role") !== "tab") {
+                            events.tabBlur();
+                        }
+                        if (isFocusVisibleSupported) {
+                            events.setIsFocusVisible(false);
+                        }
+                    }
+                })
+            };
+        },
+        getContentProps: (props)=>{
+            const { value: contentValue } = props;
+            const triggerId = getTriggerId(contentValue, autoId);
+            const isSelected = value === contentValue;
+            return elementProps({
+                id: getContentId(contentValue, autoId),
+                tabIndex: -1,
+                role: "tabpanel",
+                "aria-labelledby": triggerId,
+                "aria-selected": ariaAttr(isSelected),
+                "aria-hidden": !isSelected,
+                "data-selected": dataAttr(isSelected),
+                "data-orientation": orientation,
+                "data-ownedby": getListId(autoId),
+                "data-ssr": dataAttr(isSSR)
+            });
+        },
+        indicatorProps: elementProps({
+            ...stateProps
+        })
+    };
+}
+const TabsContext = /*#__PURE__*/ createContext(null);
+const TabsProvider = TabsContext.Provider;
+function useTabsContext({ strict = true } = {}) {
+    const context = useContext(TabsContext);
+    if (!context && strict) {
+        throw new Error("useTabsContext must be used within a Tabs");
+    }
+    return context;
+}
+const autoHeight = AutoHeight();
+const plugins = [
+    autoHeight
+];
+const useTabsCarouselState = (props)=>{
+    const api = useTabsContext();
+    const slideHeights = useRef(new WeakMap());
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: props.loop,
+        dragThreshold: props.dragThreshold,
+        duration: 20,
+        watchDrag: (_, event)=>{
+            if (event.target instanceof HTMLElement) {
+                if (isDragPrevented(event.target)) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        // Workaround for Embla v8 AutoHeight plugin not detecting lazy-loaded content height changes.
+        // ref: https://github.com/davidjerleke/embla-carousel/discussions/1142
+        // Embla's default resize handler only reInits on axis-size (width, for a horizontal carousel)
+        // changes, so a slide growing taller (e.g. after lazy mount) never triggers a recalculation.
+        // We reInit manually, but ONLY when a slide's *height* actually changes — reInit-ing on every
+        // slide resize (including width fluctuations during horizontal scroll) re-applies Embla's
+        // translate3d mid-scroll and breaks momentum scrolling in WKWebView/Safari.
+        watchResize: (emblaApi, entries)=>{
+            const heights = slideHeights.current;
+            const slides = emblaApi.slideNodes();
+            for (const entry of entries){
+                const slide = slides.find((node)=>node === entry.target);
+                if (!slide) continue;
+                const newHeight = slide.offsetHeight;
+                const prevHeight = heights.get(slide);
+                heights.set(slide, newHeight);
+                if (prevHeight !== undefined && newHeight !== prevHeight) {
+                    emblaApi.reInit();
+                    return false;
+                }
+            }
+            return true;
+        }
+    }, plugins);
+    const onSettle = useCallbackRef(props.onSettle);
+    const onSwipeStart = useCallbackRef(props.onSwipeStart);
+    const onSwipeEnd = useCallbackRef(props.onSwipeEnd);
+    useEffect(()=>{
+        const select = emblaApi?.on("select", ()=>{
+            const contentIndex = emblaApi.selectedScrollSnap();
+            api.setContentIndex(contentIndex);
+        });
+        const settle = emblaApi?.on("settle", ()=>{
+            onSettle?.();
+        });
+        const pointerDown = emblaApi?.on("pointerDown", ()=>{
+            onSwipeStart?.();
+        });
+        const pointerUp = emblaApi?.on("pointerUp", ()=>{
+            onSwipeEnd?.();
+        });
+        return ()=>{
+            select?.clear();
+            settle?.clear();
+            pointerDown?.clear();
+            pointerUp?.clear();
+        };
+    }, [
+        emblaApi,
+        api.setContentIndex,
+        onSettle,
+        onSwipeStart,
+        onSwipeEnd
+    ]);
+    const getContentIndex = useCallbackRef(()=>api.contentIndex);
+    useEffect(()=>{
+        const reInit = emblaApi?.on("reInit", ()=>{
+            emblaApi?.scrollTo(getContentIndex(), true);
+        });
+        return ()=>{
+            reInit?.clear();
+        };
+    }, [
+        getContentIndex,
+        emblaApi
+    ]);
+    useEffect(()=>{
+        if (!emblaApi) return;
+        const { dragHandler } = emblaApi.internalEngine();
+        if (props.swipeable) {
+            dragHandler.init(emblaApi);
+        } else {
+            dragHandler.destroy();
+        }
+    }, [
+        emblaApi,
+        props.swipeable
+    ]);
+    const isInitialScroll = useRef(true);
+    useEffect(()=>{
+        if (emblaApi && api.contentIndex !== emblaApi.selectedScrollSnap()) {
+            const engine = emblaApi.internalEngine();
+            /**
+       * We want the content to quickly snap into place when a tab changes.
+       * However, using a very small duration can result in an underdamped spring, which produces a rubber-band (oscillatory) effect.
+       *
+       * To avoid that, we intentionally use a low duration and friction so that the motion feels fast (snappy)
+       * without overshooting. The underlying idea is to map our parameters to a physical spring model—a damped harmonic oscillator—
+       * so we can control the dynamics in a physically intuitive way.
+       *
+       * In embla, the acceleration is modeled as:
+       *   a = (displacement * friction) / duration - velocity * (1 - friction)
+       *
+       * In a classical damped harmonic oscillator (assuming unit mass, m = 1), the acceleration is:
+       *   a = (stiffness * displacement - damping * velocity)
+       *
+       * By comparing the two equations, we can equate the coefficients for displacement and velocity:
+       *
+       *   For the displacement term:
+       *     stiffness = friction / duration
+       *
+       *   For the velocity term:
+       *     damping = 1 - friction
+       *
+       * Additionally, the damping ratio (zeta) for a damped oscillator is defined as:
+       *   zeta = damping / (2 * sqrt(stiffness))
+       *
+       * Substituting the derived expressions for stiffness and damping gives:
+       *   zeta = (1 - friction) / (2 * sqrt(friction / duration))
+       *
+       * This damping ratio (zeta) tells us the nature of the response:
+       *   - zeta < 1: Underdamped (oscillatory, rubber-band effect)
+       *   - zeta = 1: Critically damped (fast snap without overshoot)
+       *   - zeta > 1: Overdamped (slow response)
+       *
+       * For our current configuration, we use:
+       *
+       *     duration = 4
+       *     friction = 0.4
+       *
+       * Which gives:
+       *
+       *     stiffness = 0.4 / 4 = 0.1
+       *     damping   = 1 - 0.4 = 0.6
+       *
+       * And the damping ratio becomes:
+       *
+       *     zeta = 0.6 / (2 * sqrt(0.1))
+       *       = 0.6 / (2 * 0.31623...)
+       *       = 0.6 / 0.63246...
+       *       = 0.94868...
+       *
+       * Since zeta is close to 1, this spring is nearly critically damped. This is enough for our usage,
+       * ensuring that the animation snaps quickly without overshooting (avoiding the rubber-band effect)
+       * when switching tabs.
+       */ if (isInitialScroll.current) {
+                engine.scrollBody.useDuration(0);
+                isInitialScroll.current = false;
+            } else {
+                engine.scrollBody.useDuration(4).useFriction(0.4);
+            }
+            engine.scrollTo.index(api.contentIndex, 0);
+        }
+    }, [
+        emblaApi,
+        api.contentIndex
+    ]);
+    return {
+        refs: {
+            root: emblaRef
+        },
+        autoHeight: props.autoHeight
+    };
+};
+const useTabsCarousel = (props)=>{
+    const { refs, autoHeight } = useTabsCarouselState(props);
+    const stateProps = elementProps({
+        "data-carousel": "",
+        "data-auto-height": dataAttr(autoHeight)
+    });
+    return {
+        refs,
+        stateProps,
+        rootProps: elementProps({
+            ...stateProps
+        }),
+        cameraProps: elementProps({
+            ...stateProps
+        })
+    };
+};
+const TabsCarouselContext = /*#__PURE__*/ createContext(null);
+const TabsCarouselProvider = TabsCarouselContext.Provider;
+function useTabsCarouselContext({ strict = true } = {}) {
+    const context = useContext(TabsCarouselContext);
+    if (!context && strict) {
+        throw new Error("useTabsCarouselContext must be used within a TabsCarousel");
+    }
+    return context;
+}
+const TabsTriggerContext = /*#__PURE__*/ createContext(null);
+const TabsTriggerProvider = TabsTriggerContext.Provider;
+const TabsRoot$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { defaultValue, value, onValueChange, orientation, lazyMount, unmountOnExit, ...otherProps } = props;
+    const api = useTabs({
+        defaultValue,
+        value,
+        onValueChange,
+        orientation
+    });
+    return /*#__PURE__*/ jsx(TabsProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(RenderStrategyPropsProvider, {
+            value: useMemo(()=>({
+                    lazyMount,
+                    unmountOnExit
+                }), [
+                lazyMount,
+                unmountOnExit
+            ]),
+            children: /*#__PURE__*/ jsx(Primitive.div, {
+                ref: ref,
+                ...mergeProps$1(api.rootProps, otherProps)
+            })
+        })
+    });
+});
+TabsRoot$1.displayName = "TabsRoot";
+const TabsList$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useTabsContext();
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: composeRefs(api.refs.list, ref),
+        ...mergeProps$1(api.listProps, props)
+    });
+});
+TabsList$1.displayName = "TabsList";
+const TabsTrigger$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value, disabled, ...otherProps } = props;
+    const api = useTabsContext();
+    const triggerApi = api.getTriggerProps({
+        value,
+        disabled
+    });
+    return /*#__PURE__*/ jsx(TabsTriggerProvider, {
+        value: triggerApi,
+        children: /*#__PURE__*/ jsx(Primitive.button, {
+            ref: composeRefs(triggerApi.refs.root, ref),
+            ...mergeProps$1(triggerApi.rootProps, otherProps)
+        })
+    });
+});
+TabsTrigger$1.displayName = "TabsTrigger";
+const TabsContent$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value, children, ...otherProps } = props;
+    const api = useTabsContext();
+    const carouselApi = useTabsCarouselContext({
+        strict: false
+    });
+    const inCarousel = carouselApi != null;
+    const renderStrategyProps = useRenderStrategyPropsContext();
+    const { unmounted } = useRenderStrategy({
+        ...renderStrategyProps,
+        present: api.value === value
+    });
+    // Outside a carousel, an unmounted tab renders nothing at all.
+    // Inside a carousel, every tab must keep its slide slot even while unmounted:
+    // the carousel syncs by numeric index, so collapsing the slide set (returning
+    // null for lazy/exited tabs) makes embla's snap index drift from the tab's
+    // logical index, and clicking/swiping to a far tab lands on the wrong one.
+    // We keep the slot but still honor lazyMount/unmountOnExit for the children,
+    // so expensive content stays lazy — only the empty slide wrapper persists.
+    if (unmounted && !inCarousel) return null;
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergeProps$1(api.getContentProps({
+            value
+        }), carouselApi?.stateProps ?? {}, otherProps),
+        children: unmounted ? null : children
+    });
+});
+TabsContent$1.displayName = "TabsContent";
+const TabsIndicator$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useTabsContext();
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergeProps$1(api.indicatorProps, props)
+    });
+});
+const TabsCarousel = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { dragThreshold, loop, swipeable, autoHeight, onSettle, onSwipeStart, onSwipeEnd, ...otherProps } = props;
+    const api = useTabsCarousel({
+        dragThreshold,
+        loop,
+        swipeable,
+        onSettle,
+        autoHeight,
+        onSwipeStart,
+        onSwipeEnd
+    });
+    return /*#__PURE__*/ jsx(TabsCarouselProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: composeRefs(api.refs.root, ref),
+            ...mergeProps$1(api.rootProps, otherProps),
+            children: props.children
+        })
+    });
+});
+TabsCarousel.displayName = "TabsCarousel";
+const TabsCarouselCamera = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useTabsCarouselContext();
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergeProps$1(api.cameraProps, props)
+    });
+});
+TabsCarouselCamera.displayName = "TabsCarouselCamera";
+
+var Tabs_namespace = {
+    __proto__: null,
+    Carousel: TabsCarousel,
+    CarouselCamera: TabsCarouselCamera,
+    Content: TabsContent$1,
+    Indicator: TabsIndicator$1,
+    List: TabsList$1,
+    Root: TabsRoot$1,
+    Trigger: TabsTrigger$1};
+
+const { withProvider, withContext } = createSlotRecipeContext(tabs);
+const TabsRoot = withProvider(Tabs_namespace.Root, "root");
+const TabsList = withContext(Tabs_namespace.List, "list");
+const TabsTrigger = withScaleFeedback(withContext(Tabs_namespace.Trigger, "trigger"));
+const TabsIndicator = withContext(Tabs_namespace.Indicator, "indicator");
+const TabsContent = withContext(Tabs_namespace.Content, "content");
+withContext(Tabs_namespace.Carousel, "carousel");
+withContext(Tabs_namespace.CarouselCamera, "carouselCamera");
+
+const RESIZE_MIN_WIDTH = 360;
+const RESIZE_MAX_WIDTH = 720;
+/**
+ * Right-side record peek panel -- Attio's own peek shows a Highlights card
+ * area and an Activity feed (measured live). Ported from your-moon/crisp's
+ * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
+ * (`side="right" floating`) rather than crisp's own duplicate absolute-
+ * positioning/slide-in/resize-handle implementation -- the outer shell (the
+ * enter/exit keyframe animation, the full-height overlay, the drag handle
+ * itself) all come from that primitive; this component only renders the
+ * CONTENT inside it.
+ *
+ * OVERLAY, not docked: `floating` (on the `ResizablePanel` this is built on)
+ * now means a real `position: absolute` overlay that reserves ZERO layout
+ * width -- opening this panel never shrinks or reflows a table beside it
+ * (your-moon/crisp#448 reversed an earlier in-flow/docked attempt at this
+ * exact spot, reported live as "table's action buttons moving"). Because of
+ * that, THIS COMPONENT OWNS ITS OWN POSITIONING -- a consumer does not wrap
+ * it in a flex row with the table; it renders `<RecordPreview>` as an
+ * ordinary sibling of the table. The one requirement: the shared parent
+ * (the table region's own wrapper) must itself be a positioned element
+ * (typically `position: relative`) with a real height, since that's the
+ * containing block this panel's `inset: 0` resolves against. See
+ * `DataTable.stories.tsx`'s own Showcase for the pattern:
+ *
+ * ```tsx
+ * <div style={{ position: "relative", flex: 1, minHeight: 0 }}>
+ *   <DataTable style={{ width: "100%", height: "100%" }} ... />
+ *   <RecordPreview open={open} record={record} onClose={onClose} ... />
+ * </div>
+ * ```
+ *
+ * Enter/exit: closing this panel is a state change (`open` -> false) that
+ * typically clears `record` in the SAME update (see the DataTable story's
+ * own `onClose={() => setPreviewRow(null)}`), so by the time an exit
+ * animation should play, the values this component would render are
+ * already gone. `usePresence` (`@seed-design/react-presence`, the same
+ * idiom Dialog/Drawer already use for their own floating layers) keeps the
+ * tree mounted for exactly the exit animation's duration; the snapshot
+ * below keeps the LAST visible props around for that same window, since
+ * without it the panel would animate out empty.
+ */ function RecordPreview(props) {
+    const shouldRender = props.open && props.record != null;
+    const { isPresent, ref: panelElementRef } = usePresence(shouldRender);
     const lastVisiblePropsRef = useRef(props);
     if (shouldRender) lastVisiblePropsRef.current = props;
     if (!isPresent) return null;
@@ -11763,7 +14887,7 @@ const RESIZE_MAX_WIDTH = 720;
     });
 }
 RecordPreview.displayName = "RecordPreview";
-function RecordPreviewPanel({ open: _open, record, onClose, className, animationState, panelElementRef, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 497, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
+function RecordPreviewPanel({ open: _open, record, onClose, className, animationState, panelElementRef, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 497, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, tabs, activeTab, defaultActiveTab, onTabChange, overviewTabLabel = "Overview", footer, backdrop = false, ...rest }) {
     const titleId = useId();
     const classNames = recordPreview();
     // Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
@@ -11803,9 +14927,143 @@ function RecordPreviewPanel({ open: _open, record, onClose, className, animation
     // Defensive only -- `RecordPreview` never mounts this without a record.
     if (!record) return null;
     const heading = title ?? record.name ?? "Record";
+    // The plain (non-tabs) layout -- unchanged from before `tabs` existed.
+    // Extracted so it can ALSO become the synthesized "Overview" tab's own
+    // content below, rather than being re-authored as JSX twice.
+    const overviewContent = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            highlights && highlights.length > 0 && /*#__PURE__*/ jsxs(Primitive.div, {
+                className: classNames.section,
+                children: [
+                    /*#__PURE__*/ jsx(Primitive.div, {
+                        className: classNames.sectionHead,
+                        children: /*#__PURE__*/ jsx(Primitive.span, {
+                            className: classNames.sectionLabel,
+                            children: highlightsLabel
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Primitive.div, {
+                        className: classNames.highlights,
+                        children: highlights.map((h)=>/*#__PURE__*/ jsxs(Primitive.div, {
+                                className: classNames.highlight,
+                                children: [
+                                    /*#__PURE__*/ jsxs(Primitive.span, {
+                                        className: classNames.highlightLabel,
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                children: h.label
+                                            }),
+                                            h.icon ? /*#__PURE__*/ jsx(h.icon, {
+                                                size: 16
+                                            }) : null
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Primitive.span, {
+                                        className: classNames.highlightValue,
+                                        children: h.value
+                                    })
+                                ]
+                            }, h.key))
+                    })
+                ]
+            }),
+            activity != null && /*#__PURE__*/ jsxs(Primitive.div, {
+                className: classNames.section,
+                children: [
+                    /*#__PURE__*/ jsxs(Primitive.div, {
+                        className: classNames.sectionHead,
+                        children: [
+                            /*#__PURE__*/ jsx(Primitive.span, {
+                                className: classNames.sectionLabel,
+                                children: activityLabel
+                            }),
+                            onViewAllActivity && /*#__PURE__*/ jsx(Primitive.button, {
+                                type: "button",
+                                className: classNames.sectionAction,
+                                onClick: onViewAllActivity,
+                                children: viewAllActivityLabel
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Primitive.div, {
+                        className: classNames.activity,
+                        children: activity
+                    })
+                ]
+            }),
+            sections && sections.length > 0 && /*#__PURE__*/ jsx(Primitive.div, {
+                className: classNames.sections,
+                children: sections.map((s)=>{
+                    const isOpen = openSections.has(s.key);
+                    const panelId = `${titleId}-section-${s.key}`;
+                    return /*#__PURE__*/ jsxs("div", {
+                        children: [
+                            s.content ? /*#__PURE__*/ jsxs(Primitive.button, {
+                                type: "button",
+                                className: classNames.sectionTrigger,
+                                "aria-expanded": isOpen,
+                                "aria-controls": panelId,
+                                onClick: ()=>toggleSection(s.key),
+                                children: [
+                                    /*#__PURE__*/ jsx(Primitive.span, {
+                                        className: classNames.sectionRowLabel,
+                                        children: s.label
+                                    }),
+                                    /*#__PURE__*/ jsx(Primitive.span, {
+                                        className: classNames.sectionRowCount,
+                                        children: s.count
+                                    }),
+                                    /*#__PURE__*/ jsx(IconChevronDownLine_default, {
+                                        className: classNames.sectionChevron,
+                                        size: 14,
+                                        "data-open": isOpen ? "" : undefined,
+                                        "aria-hidden": "true"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxs(Primitive.div, {
+                                className: classNames.sectionTrigger,
+                                "data-inert": "",
+                                children: [
+                                    /*#__PURE__*/ jsx(Primitive.span, {
+                                        className: classNames.sectionRowLabel,
+                                        children: s.label
+                                    }),
+                                    /*#__PURE__*/ jsx(Primitive.span, {
+                                        className: classNames.sectionRowCount,
+                                        children: s.count
+                                    })
+                                ]
+                            }),
+                            s.content && isOpen && /*#__PURE__*/ jsx(Primitive.div, {
+                                id: panelId,
+                                className: classNames.sectionContent,
+                                children: s.content
+                            })
+                        ]
+                    }, s.key);
+                })
+            })
+        ]
+    });
+    // Combine (`tabs`'s own doc comment): when there's ALSO plain overview
+    // content given alongside `tabs`, prepend a synthesized tab carrying it,
+    // ahead of the consumer's own tabs -- so `tabs` and the simpler Highlights/
+    // Activity/sections props stay usable TOGETHER rather than one silently
+    // replacing the other.
+    const hasOverviewContent = highlights && highlights.length > 0 || activity != null || sections && sections.length > 0;
+    const allTabs = tabs && hasOverviewContent ? [
+        {
+            key: "__overview",
+            label: overviewTabLabel,
+            content: overviewContent
+        },
+        ...tabs
+    ] : tabs ?? [];
     return /*#__PURE__*/ jsx(ResizablePanel, {
         side: "right",
         floating: true,
+        backdrop: backdrop,
+        onBackdropClick: onClose,
         animationState: animationState,
         panelElementRef: panelElementRef,
         resizable: resizable,
@@ -11895,121 +15153,49 @@ function RecordPreviewPanel({ open: _open, record, onClose, className, animation
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsxs(Primitive.div, {
-                    className: classNames.body,
-                    children: [
-                        highlights && highlights.length > 0 && /*#__PURE__*/ jsxs(Primitive.div, {
-                            className: classNames.section,
-                            children: [
-                                /*#__PURE__*/ jsx(Primitive.div, {
-                                    className: classNames.sectionHead,
-                                    children: /*#__PURE__*/ jsx(Primitive.span, {
-                                        className: classNames.sectionLabel,
-                                        children: highlightsLabel
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Primitive.div, {
-                                    className: classNames.highlights,
-                                    children: highlights.map((h)=>/*#__PURE__*/ jsxs(Primitive.div, {
-                                            className: classNames.highlight,
-                                            children: [
-                                                /*#__PURE__*/ jsxs(Primitive.span, {
-                                                    className: classNames.highlightLabel,
-                                                    children: [
-                                                        /*#__PURE__*/ jsx("span", {
-                                                            children: h.label
-                                                        }),
-                                                        h.icon ? /*#__PURE__*/ jsx(h.icon, {
-                                                            size: 16
-                                                        }) : null
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ jsx(Primitive.span, {
-                                                    className: classNames.highlightValue,
-                                                    children: h.value
-                                                })
-                                            ]
-                                        }, h.key))
-                                })
-                            ]
-                        }),
-                        activity != null && /*#__PURE__*/ jsxs(Primitive.div, {
-                            className: classNames.section,
-                            children: [
-                                /*#__PURE__*/ jsxs(Primitive.div, {
-                                    className: classNames.sectionHead,
-                                    children: [
-                                        /*#__PURE__*/ jsx(Primitive.span, {
-                                            className: classNames.sectionLabel,
-                                            children: activityLabel
-                                        }),
-                                        onViewAllActivity && /*#__PURE__*/ jsx(Primitive.button, {
-                                            type: "button",
-                                            className: classNames.sectionAction,
-                                            onClick: onViewAllActivity,
-                                            children: viewAllActivityLabel
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsx(Primitive.div, {
-                                    className: classNames.activity,
-                                    children: activity
-                                })
-                            ]
-                        }),
-                        sections && sections.length > 0 && /*#__PURE__*/ jsx(Primitive.div, {
-                            className: classNames.sections,
-                            children: sections.map((s)=>{
-                                const isOpen = openSections.has(s.key);
-                                const panelId = `${titleId}-section-${s.key}`;
-                                return /*#__PURE__*/ jsxs("div", {
-                                    children: [
-                                        s.content ? /*#__PURE__*/ jsxs(Primitive.button, {
-                                            type: "button",
-                                            className: classNames.sectionTrigger,
-                                            "aria-expanded": isOpen,
-                                            "aria-controls": panelId,
-                                            onClick: ()=>toggleSection(s.key),
-                                            children: [
-                                                /*#__PURE__*/ jsx(Primitive.span, {
-                                                    className: classNames.sectionRowLabel,
-                                                    children: s.label
-                                                }),
-                                                /*#__PURE__*/ jsx(Primitive.span, {
-                                                    className: classNames.sectionRowCount,
-                                                    children: s.count
-                                                }),
-                                                /*#__PURE__*/ jsx(IconChevronDownLine_default, {
-                                                    className: classNames.sectionChevron,
-                                                    size: 14,
-                                                    "data-open": isOpen ? "" : undefined,
-                                                    "aria-hidden": "true"
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ jsxs(Primitive.div, {
-                                            className: classNames.sectionTrigger,
-                                            "data-inert": "",
+                tabs && tabs.length > 0 ? /*#__PURE__*/ jsx(Primitive.div, {
+                    className: classNames.tabsRoot,
+                    children: /*#__PURE__*/ jsxs(TabsRoot, {
+                        value: activeTab,
+                        defaultValue: defaultActiveTab ?? allTabs[0]?.key,
+                        onValueChange: onTabChange,
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: "1 1 auto",
+                            minHeight: 0,
+                            overflow: "hidden"
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxs(TabsList, {
+                                children: [
+                                    allTabs.map((tab)=>/*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: tab.key,
                                             children: [
-                                                /*#__PURE__*/ jsx(Primitive.span, {
-                                                    className: classNames.sectionRowLabel,
-                                                    children: s.label
-                                                }),
-                                                /*#__PURE__*/ jsx(Primitive.span, {
-                                                    className: classNames.sectionRowCount,
-                                                    children: s.count
+                                                tab.label,
+                                                tab.badge != null && /*#__PURE__*/ jsx(Primitive.span, {
+                                                    className: classNames.tabBadge,
+                                                    children: tab.badge
                                                 })
                                             ]
-                                        }),
-                                        s.content && isOpen && /*#__PURE__*/ jsx(Primitive.div, {
-                                            id: panelId,
-                                            className: classNames.sectionContent,
-                                            children: s.content
-                                        })
-                                    ]
-                                }, s.key);
-                            })
-                        })
-                    ]
+                                        }, tab.key)),
+                                    /*#__PURE__*/ jsx(TabsIndicator, {})
+                                ]
+                            }),
+                            allTabs.map((tab)=>/*#__PURE__*/ jsx(TabsContent, {
+                                    value: tab.key,
+                                    className: classNames.tabPanel,
+                                    style: {
+                                        flex: "1 1 auto",
+                                        minHeight: 0
+                                    },
+                                    children: tab.content
+                                }, tab.key))
+                        ]
+                    })
+                }) : /*#__PURE__*/ jsx(Primitive.div, {
+                    className: classNames.body,
+                    children: overviewContent
                 }),
                 footer != null && /*#__PURE__*/ jsx(Primitive.div, {
                     className: classNames.footer,