@crispy-seed/data-table 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 function __insertCSS(code) {
   if (!code || typeof document == 'undefined') return
   let head = document.head || document.getElementsByTagName('head')[0]
@@ -7,4 +8,4549 @@ function __insertCSS(code) {
   ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
 }
 
-export { E as DataTable } from './DataTable-12s-Bd20OuMs.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { forwardRef, useCallback, useMemo, useState, useRef, useEffect, createContext, useContext } from 'react';
+import { dataAttr, elementProps, ariaAttr, mergeProps as mergeProps$1 } 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';
+import { useScaleFeedback } from '@seed-design/react-scale-feedback';
+import { checkboxGroup } from '@seed-design/css/recipes/checkbox-group';
+import { Image } from '@seed-design/react-image';
+import { avatar } from '@seed-design/css/recipes/avatar';
+import '@seed-design/css/recipes/avatar-stack';
+import { badge } from '@seed-design/css/recipes/badge';
+import { Select, useSelectContext, useSelectItemContext } from '@seed-design/react-select';
+import { useFieldContext } from '@seed-design/react-field';
+import { select } from '@seed-design/css/recipes/select';
+import { selectTrigger } from '@seed-design/css/recipes/select-trigger';
+import { selectItem } from '@seed-design/css/recipes/select-item';
+import { Switch, useSwitchContext } from '@seed-design/react-switch';
+import { switchStyle } from '@seed-design/css/recipes/switch';
+import { switchmark } from '@seed-design/css/recipes/switchmark';
+import { TextField, useTextFieldContext } from '@seed-design/react-text-field';
+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 { segmentedControl } from '@seed-design/css/recipes/segmented-control';
+import { SegmentedControl } from '@seed-design/react-segmented-control';
+
+// src/IconChevronDownLine.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__ */ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M21.2612 7.27589C20.8613 6.89499 20.2283 6.9104 19.8474 7.31032L11.9996 15.55L4.15284 7.31037C3.77196 6.91043 3.13899 6.89497 2.73904 7.27584C2.3391 7.65671 2.32364 8.28969 2.70451 8.68963L11.2754 17.6896C11.4641 17.8878 11.7258 18 11.9995 18C12.2732 18 12.5349 17.8879 12.7236 17.6897L21.2956 8.68968C21.6765 8.28976 21.6611 7.65679 21.2612 7.27589Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconChevronDownLine = /*#__PURE__*/ forwardRef(Icon$a);
+var IconChevronDownLine_default = IconChevronDownLine;
+
+// src/IconChevronUpLine.tsx
+var Icon$9 = ({ 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__ */ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M21.2612 16.7241C20.8613 17.105 20.2283 17.0896 19.8474 16.6897L11.9996 8.45L4.15284 16.6896C3.77196 17.0896 3.13899 17.105 2.73904 16.7242C2.3391 16.3433 2.32364 15.7103 2.70451 15.3104L11.2754 6.31037C11.4641 6.11218 11.7258 6.00001 11.9995 6C12.2732 5.99999 12.5349 6.11215 12.7236 6.31032L21.2956 15.3103C21.6765 15.7102 21.6611 16.3432 21.2612 16.7241Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconChevronUpLine = /*#__PURE__*/ forwardRef(Icon$9);
+var IconChevronUpLine_default = IconChevronUpLine;
+
+// src/IconDot3HorizontalLine.tsx
+var Icon$8 = ({ 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.625 10.375C3.72754 10.375 3 11.1025 3 12C3 12.8975 3.72754 13.625 4.625 13.625C5.52246 13.625 6.25 12.8975 6.25 12C6.25 11.1025 5.52246 10.375 4.625 10.375Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        d: "M12.075 10.375C11.1775 10.375 10.45 11.1025 10.45 12C10.45 12.8975 11.1775 13.625 12.075 13.625C12.9724 13.625 13.7 12.8975 13.7 12C13.7 11.1025 12.9724 10.375 12.075 10.375Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        d: "M19.375 10.375C18.4775 10.375 17.75 11.1025 17.75 12C17.75 12.8975 18.4775 13.625 19.375 13.625C20.2725 13.625 21 12.8975 21 12C21 11.1025 20.2725 10.375 19.375 10.375Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconDot3HorizontalLine = /*#__PURE__*/ forwardRef(Icon$8);
+var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
+
+// src/IconMagnifyingglassLine.tsx
+var Icon$7 = ({ 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__ */ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M11.3111 1.2002C6.00313 1.2002 1.69995 5.49902 1.69995 10.8048V10.8178C1.69995 16.1236 6.00313 20.4224 11.3111 20.4224C13.5994 20.4224 15.711 19.6233 17.3631 18.2785L21.493 22.4083C21.8835 22.7988 22.5167 22.7988 22.9072 22.4083C23.2977 22.0177 23.2977 21.3846 22.9072 20.9941L18.777 16.864C20.1196 15.2095 20.9222 13.0996 20.9222 10.8048C20.9222 5.49902 16.619 1.2002 11.3111 1.2002ZM3.69995 10.8048C3.69995 6.60502 7.10627 3.2002 11.3111 3.2002C15.5159 3.2002 18.9222 6.60502 18.9222 10.8048C18.9222 13.0794 17.9298 15.1209 16.3465 16.5182L16.3446 16.52C15.0067 17.707 13.2419 18.4224 11.3111 18.4224C7.10627 18.4224 3.69995 15.0176 3.69995 10.8178V10.8048Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconMagnifyingglassLine = /*#__PURE__*/ forwardRef(Icon$7);
+var IconMagnifyingglassLine_default = IconMagnifyingglassLine;
+
+// src/IconSlider2HorizontalLine.tsx
+var Icon$6 = ({ 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", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M9.99331 7.24609H3C2.44772 7.24609 2 6.79838 2 6.24609C2 5.69381 2.44772 5.24609 3 5.24609H9.99331C10.443 3.38141 12.1222 1.99609 14.125 1.99609C16.1278 1.99609 17.807 3.38141 18.2567 5.24609H21C21.5523 5.24609 22 5.69381 22 6.24609C22 6.79838 21.5523 7.24609 21 7.24609H18.2567C17.807 9.11078 16.1278 10.4961 14.125 10.4961C12.1222 10.4961 10.443 9.11078 9.99331 7.24609ZM11.875 6.24609C11.875 5.00345 12.8824 3.99609 14.125 3.99609C15.3676 3.99609 16.375 5.00345 16.375 6.24609C16.375 7.48873 15.3676 8.49609 14.125 8.49609C12.8824 8.49609 11.875 7.48873 11.875 6.24609Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M6.25 13.4956C3.90279 13.4956 2 15.3984 2 17.7456C2 20.0928 3.90279 21.9956 6.25 21.9956C8.25016 21.9956 9.92761 20.6139 10.3799 18.7529L20.9996 18.7456C21.5518 18.7452 21.9993 18.2972 21.9989 17.7449C21.9985 17.1926 21.5505 16.7452 20.9982 16.7456L10.3834 16.7529C9.93635 14.8845 8.25537 13.4956 6.25 13.4956ZM4 17.7456C4 16.503 5.00736 15.4956 6.25 15.4956C7.49264 15.4956 8.5 16.503 8.5 17.7456C8.5 18.9882 7.49264 19.9956 6.25 19.9956C5.00736 19.9956 4 18.9882 4 17.7456Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconSlider2HorizontalLine = /*#__PURE__*/ forwardRef(Icon$6);
+var IconSlider2HorizontalLine_default = IconSlider2HorizontalLine;
+
+// src/IconPersonCircleLine.tsx
+var Icon$5 = ({ 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", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M12 5.5C9.79172 5.5 8 7.29172 8 9.5C8 11.7083 9.79172 13.5 12 13.5C14.2083 13.5 16 11.7083 16 9.5C16 7.29172 14.2083 5.5 12 5.5ZM10 9.5C10 8.39628 10.8963 7.5 12 7.5C13.1037 7.5 14 8.39628 14 9.5C14 10.6037 13.1037 11.5 12 11.5C10.8963 11.5 10 10.6037 10 9.5Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M1 12C1 5.92772 5.92772 1 12 1C18.0723 1 23 5.92772 23 12C23 18.0723 18.0723 23 12 23C5.92772 23 1 18.0723 1 12ZM12 3C7.03229 3 3 7.03229 3 12C3 14.3609 3.91073 16.5105 5.39977 18.1164C5.87422 17.4277 6.5536 16.8564 7.3236 16.4211C8.60413 15.6971 10.2434 15.2793 12.0002 15.2793C13.757 15.2793 15.3962 15.6971 16.6768 16.4211C17.4467 16.8564 18.126 17.4276 18.6004 18.1162C20.0894 16.5103 21 14.3608 21 12C21 7.03229 16.9677 3 12 3ZM12 21C10.1211 21 8.3761 20.4232 6.93241 19.4372C7.17777 18.9952 7.62665 18.5473 8.30791 18.1621C9.25286 17.6279 10.5454 17.2793 12.0002 17.2793C13.455 17.2793 14.7475 17.6279 15.6925 18.1621C16.3736 18.5472 16.8225 18.9951 17.0679 19.437C15.6241 20.4231 13.879 21 12 21Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconPersonCircleLine = /*#__PURE__*/ forwardRef(Icon$5);
+var IconPersonCircleLine_default = IconPersonCircleLine;
+
+// src/IconPlusLine.tsx
+var Icon$4 = ({ 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__ */ jsx("path", {
+                d: "M4 13H11V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20V13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H13V4C13 3.45 12.55 3 12 3C11.45 3 11 3.45 11 4V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconPlusLine = /*#__PURE__*/ forwardRef(Icon$4);
+var IconPlusLine_default = IconPlusLine;
+
+// src/IconMinusLine.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__ */ jsx("path", {
+                d: "M4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconMinusLine = /*#__PURE__*/ forwardRef(Icon$3);
+var IconMinusLine_default = IconMinusLine;
+
+// src/IconCheckmarkLine.tsx
+var Icon$2 = ({ 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__ */ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M22.1186 3.71436C22.5526 4.05602 22.6273 4.68476 22.2857 5.11868L10.4749 20.1187C10.2958 20.3461 10.0269 20.4848 9.73779 20.4989C9.44865 20.5129 9.1676 20.401 8.96728 20.192L1.77809 12.692C1.39592 12.2933 1.40931 11.6603 1.80801 11.2781C2.20671 10.896 2.83973 10.9094 3.22191 11.3081L9.61511 17.9777L20.7143 3.88141C21.056 3.44749 21.6847 3.3727 22.1186 3.71436Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconCheckmarkLine = /*#__PURE__*/ forwardRef(Icon$2);
+var IconCheckmarkLine_default = IconCheckmarkLine;
+
+// src/IconChevronDownSmallLine.tsx
+var Icon$1 = ({ 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__ */ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M6.29436 9.29143C6.68569 8.90171 7.31886 8.90303 7.70857 9.29436L11.9848 13.5884L16.297 9.3256C16.6897 8.93733 17.3229 8.94097 17.7112 9.33374C18.0994 9.7265 18.0958 10.3597 17.703 10.7479L12.6823 15.7112C12.2906 16.0984 11.6594 16.096 11.2707 15.7056L6.29143 10.7056C5.90171 10.3143 5.90303 9.68114 6.29436 9.29143Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconChevronDownSmallLine = /*#__PURE__*/ forwardRef(Icon$1);
+var IconChevronDownSmallLine_default = IconChevronDownSmallLine;
+
+// src/IconCheckmarkFatFill.tsx
+var Icon = ({ 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__ */ jsx("path", {
+                d: "M22.5517 3.16422C21.8141 2.5834 20.7452 2.71054 20.1644 3.4482L9.56331 16.9118L3.72729 10.8235C3.07759 10.1457 2.00145 10.1229 1.32367 10.7726C0.645881 11.4223 0.623111 12.4985 1.27281 13.1763L8.462 20.6763C8.80254 21.0315 9.28032 21.2218 9.77186 21.1979C10.2634 21.174 10.7205 20.9382 11.0249 20.5516L22.8357 5.55155C23.4165 4.81389 23.2894 3.74505 22.5517 3.16422Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconCheckmarkFatFill = /*#__PURE__*/ forwardRef(Icon);
+var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
+
+var __defProp$1 = Object.defineProperty;
+var __name$1 = (target, value)=>__defProp$1(target, "name", {
+        value,
+        configurable: true
+    });
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        return ref(value);
+    } else if (ref !== null && ref !== void 0) {
+        ref.current = value;
+    }
+}
+__name$1(setRef, "setRef");
+function composeRefs(...refs) {
+    return (node)=>{
+        let hasCleanup = false;
+        const cleanups = refs.map((ref)=>{
+            const cleanup = setRef(ref, node);
+            if (!hasCleanup && typeof cleanup == "function") {
+                hasCleanup = true;
+            }
+            return cleanup;
+        });
+        if (hasCleanup) {
+            return ()=>{
+                for(let i = 0; i < cleanups.length; i++){
+                    const cleanup = cleanups[i];
+                    if (typeof cleanup == "function") {
+                        cleanup();
+                    } else {
+                        setRef(refs[i], null);
+                    }
+                }
+            };
+        }
+    };
+}
+__name$1(composeRefs, "composeRefs");
+function useComposedRefs(...refs) {
+    return React.useCallback(composeRefs(...refs), refs);
+}
+__name$1(useComposedRefs, "useComposedRefs");
+
+var __defProp = Object.defineProperty;
+var __name = (target, value)=>__defProp(target, "name", {
+        value,
+        configurable: true
+    });
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+    const Slot2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+        let { children, ...slotProps } = props;
+        let slottableElement = null;
+        let hasSlottable = false;
+        const newChildren = [];
+        if (isLazyComponent(children) && typeof use === "function") {
+            children = use(children._payload);
+        }
+        React.Children.forEach(children, (maybeSlottable)=>{
+            if (isSlottable(maybeSlottable)) {
+                hasSlottable = true;
+                const slottable = maybeSlottable;
+                let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+                if (isLazyComponent(child) && typeof use === "function") {
+                    child = use(child._payload);
+                }
+                slottableElement = getSlottableElementFromSlottable(slottable, child);
+                newChildren.push(slottableElement?.props?.children);
+            } else {
+                newChildren.push(maybeSlottable);
+            }
+        });
+        if (slottableElement) {
+            slottableElement = /*#__PURE__*/ React.cloneElement(slottableElement, void 0, newChildren);
+        } else if (// A `Slottable` was found but it didn't resolve to a single element (e.g.
+        // it wrapped multiple elements, text, or a render-prop `child` that
+        // wasn't an element). Don't fall back to treating the `Slottable` wrapper
+        // itself as the slot target — throw a descriptive error below instead.
+        !hasSlottable && React.Children.count(children) === 1 && /*#__PURE__*/ React.isValidElement(children)) {
+            slottableElement = children;
+        }
+        const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+        const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+        if (!slottableElement) {
+            if (children || children === 0) {
+                throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
+            }
+            return children;
+        }
+        const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+        if (slottableElement.type !== React.Fragment) {
+            mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+        }
+        return /*#__PURE__*/ React.cloneElement(slottableElement, mergedProps);
+    });
+    Slot2.displayName = `${ownerName}.Slot`;
+    return Slot2;
+}
+__name(createSlot, "createSlot");
+var Slot = /* @__PURE__ */ createSlot("Slot");
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+    const Slottable2 = /* @__PURE__ */ __name((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
+    Slottable2.displayName = `${ownerName}.Slottable`;
+    Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
+    return Slottable2;
+}
+__name(createSlottable, "createSlottable");
+var getSlottableElementFromSlottable = /* @__PURE__ */ __name((slottable, child)=>{
+    if ("child" in slottable.props) {
+        const child2 = slottable.props.child;
+        if (!/*#__PURE__*/ React.isValidElement(child2)) return null;
+        return /*#__PURE__*/ React.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    }
+    return /*#__PURE__*/ React.isValidElement(child) ? child : null;
+}, "getSlottableElementFromSlottable");
+function mergeProps(slotProps, childProps) {
+    const overrideProps = {
+        ...childProps
+    };
+    for(const propName in childProps){
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            if (slotPropValue && childPropValue) {
+                overrideProps[propName] = (...args)=>{
+                    const result = childPropValue(...args);
+                    slotPropValue(...args);
+                    return result;
+                };
+            } else if (slotPropValue) {
+                overrideProps[propName] = slotPropValue;
+            }
+        } else if (propName === "style") {
+            overrideProps[propName] = {
+                ...slotPropValue,
+                ...childPropValue
+            };
+        } else if (propName === "className") {
+            overrideProps[propName] = [
+                slotPropValue,
+                childPropValue
+            ].filter(Boolean).join(" ");
+        }
+    }
+    return {
+        ...slotProps,
+        ...overrideProps
+    };
+}
+__name(mergeProps, "mergeProps");
+function getElementRef(element) {
+    let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+    let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+    if (mayWarn) {
+        return element.ref;
+    }
+    getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+    mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+    if (mayWarn) {
+        return element.props.ref;
+    }
+    return element.props.ref || element.ref;
+}
+__name(getElementRef, "getElementRef");
+function isSlottable(child) {
+    return /*#__PURE__*/ React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+__name(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(isLazyComponent, "isLazyComponent");
+function isPromiseLike(value) {
+    return typeof value === "object" && value !== null && "then" in value;
+}
+__name(isPromiseLike, "isPromiseLike");
+var createSlotError = /* @__PURE__ */ __name((ownerName)=>{
+    return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+}, "createSlotError");
+var createSlottableError = /* @__PURE__ */ __name((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()];
+
+function createPrimitive(node) {
+    const Node = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+        const { asChild, ...primitiveProps } = props;
+        const Comp = asChild ? Slot : node;
+        return /*#__PURE__*/ jsx(Comp, {
+            ...primitiveProps,
+            ref: ref
+        });
+    });
+    Node.displayName = `Primitive.${node}`;
+    return Node;
+}
+const Primitive = {
+    div: createPrimitive("div"),
+    span: createPrimitive("span"),
+    img: createPrimitive("img"),
+    button: createPrimitive("button"),
+    label: createPrimitive("label"),
+    input: createPrimitive("input"),
+    textarea: createPrimitive("textarea"),
+    a: createPrimitive("a"),
+    p: createPrimitive("p"),
+    h2: createPrimitive("h2"),
+    ul: createPrimitive("ul"),
+    li: createPrimitive("li"),
+    nav: createPrimitive("nav"),
+    svg: createPrimitive("svg"),
+    circle: createPrimitive("circle"),
+    // Native table elements -- DataTable's own rendering (crispy-seed's addition, not
+    // upstream seed-design) needs these for a real `<table>` grid rather than a
+    // `display: flex` div grid faked with ARIA roles.
+    table: createPrimitive("table"),
+    thead: createPrimitive("thead"),
+    tbody: createPrimitive("tbody"),
+    tfoot: createPrimitive("tfoot"),
+    tr: createPrimitive("tr"),
+    th: createPrimitive("th"),
+    td: createPrimitive("td"),
+    colgroup: createPrimitive("colgroup"),
+    col: createPrimitive("col")
+};
+
+// packages/react/use-layout-effect/src/use-layout-effect.tsx
+var useLayoutEffect2$1 = globalThis?.document ? React.useLayoutEffect : ()=>{};
+
+// src/use-controllable-state.tsx
+var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2$1;
+function useControllableState({ prop, defaultProp, onChange = ()=>{}, caller }) {
+    const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+        defaultProp,
+        onChange
+    });
+    const isControlled = prop !== void 0;
+    const value = isControlled ? prop : uncontrolledProp;
+    {
+        const isControlledRef = React.useRef(prop !== void 0);
+        React.useEffect(()=>{
+            const wasControlled = isControlledRef.current;
+            if (wasControlled !== isControlled) {
+                const from = wasControlled ? "controlled" : "uncontrolled";
+                const to = isControlled ? "controlled" : "uncontrolled";
+                console.warn(`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+            }
+            isControlledRef.current = isControlled;
+        }, [
+            isControlled,
+            caller
+        ]);
+    }
+    const setValue = React.useCallback((nextValue)=>{
+        if (isControlled) {
+            const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+            if (value2 !== prop) {
+                onChangeRef.current?.(value2);
+            }
+        } else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        onChangeRef
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+    const [value, setValue] = React.useState(defaultProp);
+    const prevValueRef = React.useRef(value);
+    const onChangeRef = React.useRef(onChange);
+    useInsertionEffect(()=>{
+        onChangeRef.current = onChange;
+    }, [
+        onChange
+    ]);
+    React.useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            onChangeRef.current?.(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef
+    ]);
+    return [
+        value,
+        setValue,
+        onChangeRef
+    ];
+}
+function isFunction(value) {
+    return typeof value === "function";
+}
+
+const DATA_TABLE_UNIVERSAL_CALC_OPS = [
+    "count",
+    "countFilled"
+];
+const DATA_TABLE_NUMERIC_CALC_OPS = [
+    "sum",
+    "average",
+    "min",
+    "max"
+];
+const DATA_TABLE_CALC_LABEL = {
+    count: "Count",
+    countFilled: "Count filled",
+    sum: "Sum",
+    average: "Average",
+    min: "Min",
+    max: "Max"
+};
+/** A value counts as empty when it is null/undefined, an empty string, or an empty
+ *  array -- crisp's own `isEmptyValue` (columncalc.tsx), reused verbatim. */ function isEmptyValueForCalc(value) {
+    if (value == null) return true;
+    if (typeof value === "string") return value.trim() === "";
+    if (Array.isArray(value)) return value.length === 0;
+    return false;
+}
+/**
+ * Pure so the arithmetic is independently (and mutation-) testable without rendering a
+ * table at all. `sum`/`average`/`min`/`max` skip empty values and non-numeric ones
+ * (coerced via `Number`, dropping `NaN`); they return `null` -- render nothing, not a
+ * misleading 0 -- when there is nothing numeric left to reduce over.
+ */ function computeColumnCalc(values, op) {
+    switch(op){
+        case "count":
+            return values.length;
+        case "countFilled":
+            return values.filter((value)=>!isEmptyValueForCalc(value)).length;
+    }
+    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value));
+    if (numbers.length === 0) return null;
+    switch(op){
+        case "sum":
+            return numbers.reduce((total, value)=>total + value, 0);
+        case "average":
+            return numbers.reduce((total, value)=>total + value, 0) / numbers.length;
+        case "min":
+            return Math.min(...numbers);
+        case "max":
+            return Math.max(...numbers);
+        default:
+            return null;
+    }
+}
+const EMPTY_OPS = {};
+// Owns which aggregation (if any) each column's ColumnCalc footer cell currently
+// shows -- the way useDataTableFilter owns one filter per column key. The actual
+// REDUCE over row values needs `TRow` (a type this headless package never sees), so
+// -- same split as sort/search/filter -- this hook only tracks WHICH op is active per
+// column; the styled layer (DataTable.tsx's `ColumnCalcCell`) calls `computeColumnCalc`
+// with the column's own resolved values.
+function useDataTableColumnCalc(props) {
+    const { columnCalcOps: opsProp, defaultColumnCalcOps = EMPTY_OPS, onColumnCalcOpsChange } = props;
+    const [columnCalcOps = EMPTY_OPS, setColumnCalcOps] = useControllableState({
+        prop: opsProp,
+        defaultProp: defaultColumnCalcOps,
+        onChange: onColumnCalcOpsChange
+    });
+    const getColumnCalcOp = useCallback((columnKey)=>columnCalcOps[columnKey], [
+        columnCalcOps
+    ]);
+    const setColumnCalcOp = useCallback((columnKey, op)=>{
+        setColumnCalcOps((current = EMPTY_OPS)=>{
+            if (op === undefined) {
+                if (!(columnKey in current)) return current;
+                const next = {
+                    ...current
+                };
+                delete next[columnKey];
+                return next;
+            }
+            return {
+                ...current,
+                [columnKey]: op
+            };
+        });
+    }, [
+        setColumnCalcOps
+    ]);
+    return {
+        columnCalcOps,
+        getColumnCalcOp,
+        setColumnCalcOp
+    };
+}
+
+// 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
+// such registry -- it is two plain id arrays (`rowIds`, `selectedIds`) the root already
+// holds -- so there is nothing to inspect on an element. What's isolated here instead is
+// the same KIND of thing Select isolates: small pure functions the state hooks would
+// otherwise inline, kept out of the hooks so they can be unit-tested (and mutation-
+// tested) on their own.
+/**
+ * Tri-state selection summary of `selectedIds` against the CURRENTLY RENDERED
+ * `rowIds` -- never against `selectedIds` alone, so a stale id that scrolled out of a
+ * filtered/sorted view can't quietly count toward "all" or "some".
+ */ function computeSelectionState(rowIds, selectedIds) {
+    if (rowIds.length === 0) return "none";
+    const selectedIdSet = new Set(selectedIds);
+    const selectedRowCount = rowIds.filter((id)=>selectedIdSet.has(id)).length;
+    if (selectedRowCount === 0) return "none";
+    return selectedRowCount === rowIds.length ? "all" : "some";
+}
+/** Adds `id` if absent, removes it if present. Never mutates `ids`. */ function toggleMembership(ids, id) {
+    return ids.includes(id) ? ids.filter((existing)=>existing !== id) : [
+        ...ids,
+        id
+    ];
+}
+/**
+ * Reconciles a persisted/controlled column ORDER against the table's current column
+ * KEYS -- used by useDataTableColumns so a consumer's `columnOrder` never silently drops
+ * a column the table actually renders (a key added to `columns` after the order was
+ * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
+ * their position from `order`; any key in `keys` missing from `order` is appended, in
+ * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
+ */ function reconcileColumnOrder(order, keys) {
+    const keySet = new Set(keys);
+    const known = order.filter((key)=>keySet.has(key));
+    const knownSet = new Set(known);
+    const added = keys.filter((key)=>!knownSet.has(key));
+    return [
+        ...known,
+        ...added
+    ];
+}
+/**
+ * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
+ * an equal-valued copy) at the edge it would otherwise walk off. Column-menu's
+ * "Move left"/"Move right" (DATATABLE-ATTIO-SPEC.md's column menu) is one call of
+ * this per click; drag-to-reorder is `reorderColumn` below instead, which can jump
+ * more than one position in a single move.
+ */ function moveColumnKey(order, key, direction) {
+    const index = order.indexOf(key);
+    if (index === -1) return [
+        ...order
+    ];
+    const targetIndex = direction === "left" ? index - 1 : index + 1;
+    if (targetIndex < 0 || targetIndex >= order.length) return [
+        ...order
+    ];
+    const next = [
+        ...order
+    ];
+    [next[index], next[targetIndex]] = [
+        next[targetIndex],
+        next[index]
+    ];
+    return next;
+}
+/**
+ * Drag-to-reorder: removes `dragKey` from `order` and reinserts it immediately before
+ * `dropKey`'s CURRENT position (i.e. its position after the removal, so dropping a
+ * column just after its own old slot doesn't appear to do nothing). A no-op (an
+ * equal-valued copy) when either key is missing or they're the same key.
+ */ function reorderColumnKey(order, dragKey, dropKey) {
+    if (dragKey === dropKey || !order.includes(dragKey) || !order.includes(dropKey)) {
+        return [
+            ...order
+        ];
+    }
+    const withoutDrag = order.filter((key)=>key !== dragKey);
+    const dropIndex = withoutDrag.indexOf(dropKey);
+    return [
+        ...withoutDrag.slice(0, dropIndex),
+        dragKey,
+        ...withoutDrag.slice(dropIndex)
+    ];
+}
+/** Clamps a drag-resized column width to a sane range -- crisp's own datatable.tsx
+ *  resize handler clamps the same way (a column can neither collapse to unreadable
+ *  nor balloon past a sane cap from one fast mouse move). */ function clampColumnWidth(width, min = 80, max = 640) {
+    return Math.min(max, Math.max(min, width));
+}
+/**
+ * Infinite scroll's own gate: fire `onLoadMore` only when the sentinel is ACTUALLY
+ * intersecting (not e.g. an observer's initial `false` callback, which fires once on
+ * `observe()` before any real intersection), there IS a next page (`hasMore`), and no
+ * fetch is already in flight (`loadingMore`) -- either of the latter two alone must
+ * suppress a trigger, which is why this is a pure `&&` rather than three separate
+ * call sites that could each drift. Isolated the same way `computeSelectionState`/
+ * `toggleMembership` are: the real IntersectionObserver callback (useDataTable
+ * InfiniteScroll.ts) is unit-testable only through a live browser API, but the
+ * DECISION it makes on every callback is plain data in, boolean out.
+ */ function shouldTriggerLoadMore(isIntersecting, hasMore, loadingMore) {
+    return hasMore && !loadingMore;
+}
+const EMPTY_STRINGS = [];
+const EMPTY_RECORD = {};
+/**
+ * Owns everything DATATABLE-ATTIO-SPEC.md's column menu + reorder + resize tranche
+ * needs -- order, visibility, a per-column label override, and a per-column width --
+ * the way useDataTableSelection owns the one selected-id SET rather than one hook per
+ * row. All four are "one value per column key" maps/lists a consumer may want to
+ * persist (a saved view), so they share this hook instead of splitting into four
+ * separate ones; drag-to-reorder and drag-to-resize (below) are the two INTERACTIONS
+ * built on top of the order/width state this hook already owns, not independent state
+ * of their own.
+ */ function useDataTableColumns(props) {
+    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange } = props;
+    const [rawOrder, setRawOrder] = useControllableState({
+        prop: columnOrderProp,
+        defaultProp: defaultColumnOrder ?? columnKeys,
+        onChange: onColumnOrderChange
+    });
+    // Reconciled EVERY render against the table's current `columnKeys` (dom.ts's
+    // `reconcileColumnOrder`), not just once at mount -- a controlled `columnOrder` a
+    // consumer persisted before a new column existed must still show that new column
+    // (appended), and one holding a column that got removed from `columns` must not
+    // render a ghost header for it.
+    const columnOrder = useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+        rawOrder,
+        columnKeys
+    ]);
+    const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useControllableState({
+        prop: hiddenProp,
+        defaultProp: defaultHiddenColumnKeys,
+        onChange: onHiddenColumnKeysChange
+    });
+    const hiddenSet = useMemo(()=>new Set(hiddenColumnKeys), [
+        hiddenColumnKeys
+    ]);
+    const [columnWidths = EMPTY_RECORD, setColumnWidths] = useControllableState({
+        prop: widthsProp,
+        defaultProp: defaultColumnWidths,
+        onChange: onColumnWidthsChange
+    });
+    const [columnLabels = EMPTY_RECORD, setColumnLabels] = useControllableState({
+        prop: labelsProp,
+        defaultProp: defaultColumnLabels,
+        onChange: onColumnLabelsChange
+    });
+    const visibleColumnOrder = useMemo(()=>columnOrder.filter((key)=>!hiddenSet.has(key)), [
+        columnOrder,
+        hiddenSet
+    ]);
+    const isColumnHidden = useCallback((key)=>hiddenSet.has(key), [
+        hiddenSet
+    ]);
+    const hideColumn = useCallback((key)=>setHiddenColumnKeys((current = EMPTY_STRINGS)=>[
+                ...current,
+                key
+            ]), [
+        setHiddenColumnKeys
+    ]);
+    const showColumn = useCallback((key)=>setHiddenColumnKeys((current = EMPTY_STRINGS)=>current.filter((existing)=>existing !== key)), [
+        setHiddenColumnKeys
+    ]);
+    const toggleColumnVisibility = useCallback((key)=>isColumnHidden(key) ? showColumn(key) : hideColumn(key), [
+        isColumnHidden,
+        showColumn,
+        hideColumn
+    ]);
+    const getColumnLabel = useCallback((key, fallback)=>columnLabels[key] ?? fallback, [
+        columnLabels
+    ]);
+    const renameColumn = useCallback((key, label)=>setColumnLabels((current = EMPTY_RECORD)=>({
+                ...current,
+                [key]: label
+            })), [
+        setColumnLabels
+    ]);
+    const getColumnWidth = useCallback((key)=>columnWidths[key], [
+        columnWidths
+    ]);
+    const setColumnWidth = useCallback((key, width)=>setColumnWidths((current = EMPTY_RECORD)=>({
+                ...current,
+                [key]: clampColumnWidth(width)
+            })), [
+        setColumnWidths
+    ]);
+    const moveColumn = useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(current ?? columnKeys, key, direction)), [
+        setRawOrder,
+        columnKeys
+    ]);
+    const reorderColumn = useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(current ?? columnKeys, dragKey, dropKey)), [
+        setRawOrder,
+        columnKeys
+    ]);
+    // -- drag-to-reorder ---------------------------------------------------------------
+    // Live state only (which column is currently being dragged) -- the styled layer
+    // drives it by calling `dragOverColumn` as the pointer crosses OTHER header cells
+    // (via `document.elementFromPoint`, since a captured pointer stops native
+    // `pointerenter` from firing on siblings), which reorders immediately rather than
+    // waiting for a drop. That is exactly what Attio's own header drag does (the column
+    // being passed visibly swaps live), and it means `endColumnDrag` never has to also
+    // commit a move -- there is nothing left to commit.
+    const [draggingColumnKey, setDraggingColumnKey] = useState(null);
+    const beginColumnDrag = useCallback((key)=>setDraggingColumnKey(key), []);
+    const dragOverColumn = useCallback((hoverKey)=>{
+        setDraggingColumnKey((current)=>{
+            if (!current || current === hoverKey) return current;
+            reorderColumn(current, hoverKey);
+            return current;
+        });
+    }, [
+        reorderColumn
+    ]);
+    const endColumnDrag = useCallback(()=>setDraggingColumnKey(null), []);
+    // -- drag-to-resize ------------------------------------------------------------------
+    // `resizeStartRef` holds the ONE thing that must survive across pointermove events
+    // without triggering a re-render on every pixel (the drag's origin) -- state
+    // (`resizingColumnKey`) is only for what the render actually needs: which column's
+    // handle should show its active/dragging look.
+    const resizeStartRef = useRef(null);
+    const [resizingColumnKey, setResizingColumnKey] = useState(null);
+    const beginColumnResize = useCallback((key, clientX, currentWidth)=>{
+        resizeStartRef.current = {
+            key,
+            startX: clientX,
+            startWidth: currentWidth
+        };
+        setResizingColumnKey(key);
+    }, []);
+    const updateColumnResize = useCallback((clientX)=>{
+        const start = resizeStartRef.current;
+        if (!start) return;
+        setColumnWidth(start.key, start.startWidth + (clientX - start.startX));
+    }, [
+        setColumnWidth
+    ]);
+    const endColumnResize = useCallback(()=>{
+        resizeStartRef.current = null;
+        setResizingColumnKey(null);
+    }, []);
+    return {
+        columnOrder,
+        visibleColumnOrder,
+        hiddenColumnKeys,
+        columnWidths,
+        columnLabels,
+        isColumnHidden,
+        hideColumn,
+        showColumn,
+        toggleColumnVisibility,
+        getColumnLabel,
+        renameColumn,
+        getColumnWidth,
+        setColumnWidth,
+        moveColumn,
+        reorderColumn,
+        draggingColumnKey,
+        beginColumnDrag,
+        dragOverColumn,
+        endColumnDrag,
+        resizingColumnKey,
+        beginColumnResize,
+        updateColumnResize,
+        endColumnResize,
+        // Exposed for the styled layer's header cell -- `data-dragging`/`data-resizing`
+        // read directly off state above already cover most of it; `dataAttr` re-exported
+        // via this hook's own module keeps every other sub-hook's habit of building its
+        // own data-attribute values rather than the styled layer re-deriving booleans.
+        isColumnDragging: (key)=>dataAttr(draggingColumnKey === key),
+        isColumnResizing: (key)=>dataAttr(resizingColumnKey === key)
+    };
+}
+
+function sameCell(a, id, key) {
+    return a !== null && a.id === id && a.key === key;
+}
+/**
+ * Owns which single cell is mid-edit, which one (if any) has a commit in flight, and
+ * which one last failed -- the way useDataTableColumnCalc owns which op is active per
+ * column. This hook never touches `TRow` or renders an editor itself; it only tracks
+ * WHICH cell is in which of those three states and orchestrates the async commit
+ * (crisp's own `commitEdit`, `datatable.tsx`) -- the styled layer (react/DataTable's
+ * `editors.tsx`) reads `isEditing`/`isPending`/`getEditError` to decide what to render
+ * for a given `(id, key)` and calls `startEdit`/`cancelEdit`/`commitEdit` in response
+ * to a double-click, Escape, Enter/blur, or an always-live widget's own change event.
+ *
+ * Only one cell can be mid-edit at a time (`editingCell`, not a set) -- matching
+ * crisp's own single `editing` state and this table's spec (no multi-cell/range
+ * editing is in scope here).
+ */ function useDataTableEdit(props) {
+    const { onEdit } = props;
+    const [editingCell, setEditingCell] = useState(null);
+    const [pendingCell, setPendingCell] = useState(null);
+    const [editError, setEditError] = useState(null);
+    const isEditing = useCallback((id, key)=>sameCell(editingCell, id, key), [
+        editingCell
+    ]);
+    const isPending = useCallback((id, key)=>sameCell(pendingCell, id, key), [
+        pendingCell
+    ]);
+    const getEditError = useCallback((id, key)=>editError && editError.id === id && editError.key === key ? editError.message : null, [
+        editError
+    ]);
+    const startEdit = useCallback((id, key)=>{
+        // Opening a cell's editor also clears any stale error left over from a PREVIOUS
+        // failed commit on it (crisp/#385 comment) -- otherwise a rejection from three
+        // edits ago would still read under a freshly-reopened editor.
+        setEditError(null);
+        setEditingCell({
+            id,
+            key
+        });
+    }, []);
+    const cancelEdit = useCallback(()=>setEditingCell(null), []);
+    // Async-aware (crisp/#385): a sync `onEdit` (returns undefined) commits exactly as
+    // before -- close the editor immediately. A Promise-returning `onEdit` keeps the
+    // editor open with a pending state while it settles, then either closes it
+    // (resolve) or closes it AND reverts to the last-known-good value while showing the
+    // rejection's message beside the cell (reject). The revert needs no extra code:
+    // neither this hook nor the styled layer ever mutates the caller's own row data, so
+    // once `editingCell` clears, the cell simply shows that data again.
+    const commitEdit = useCallback((id, key, value)=>{
+        setEditError(null);
+        const result = onEdit?.(id, key, value);
+        if (result && typeof result.then === "function") {
+            setPendingCell({
+                id,
+                key
+            });
+            result.then(()=>{
+                setPendingCell(null);
+                setEditingCell(null);
+            }, (err)=>{
+                setPendingCell(null);
+                setEditingCell(null);
+                setEditError({
+                    id,
+                    key,
+                    message: err instanceof Error ? err.message : typeof err === "string" ? err : "Could not save"
+                });
+            });
+            return;
+        }
+        setEditingCell(null);
+    }, [
+        onEdit
+    ]);
+    return {
+        editingCell,
+        isEditing,
+        isPending,
+        getEditError,
+        startEdit,
+        cancelEdit,
+        commitEdit
+    };
+}
+
+const EMPTY_FILTERS = {};
+// Owns one filter per column key -- the way useDataTableSelection owns one selected-id
+// SET rather than one boolean per row. Applying a column's filter to `data` needs
+// `TRow` (a type this headless package never sees), so -- same split as search/sort --
+// this hook only tracks which mode/values are checked per column; the styled layer
+// (DataTable.tsx's `getVisibleRows`) reads it to actually narrow rows.
+function useDataTableFilter(props) {
+    const { filters: filtersProp, defaultFilters = EMPTY_FILTERS, onFiltersChange } = props;
+    const [filters = EMPTY_FILTERS, setFilters] = useControllableState({
+        prop: filtersProp,
+        defaultProp: defaultFilters,
+        onChange: onFiltersChange
+    });
+    const setFilterMode = useCallback((columnKey, mode)=>{
+        setFilters((current = EMPTY_FILTERS)=>({
+                ...current,
+                [columnKey]: {
+                    mode,
+                    values: current[columnKey]?.values ?? []
+                }
+            }));
+    }, [
+        setFilters
+    ]);
+    const toggleFilterValue = useCallback((columnKey, value)=>{
+        setFilters((current = EMPTY_FILTERS)=>({
+                ...current,
+                [columnKey]: {
+                    mode: current[columnKey]?.mode ?? "is",
+                    values: toggleMembership(current[columnKey]?.values ?? [], value)
+                }
+            }));
+    }, [
+        setFilters
+    ]);
+    const clearFilter = useCallback((columnKey)=>{
+        setFilters((current = EMPTY_FILTERS)=>{
+            if (!(columnKey in current)) return current;
+            const next = {
+                ...current
+            };
+            delete next[columnKey];
+            return next;
+        });
+    }, [
+        setFilters
+    ]);
+    const isFilterActive = useCallback((columnKey)=>(filters[columnKey]?.values.length ?? 0) > 0, [
+        filters
+    ]);
+    return {
+        filters,
+        setFilterMode,
+        toggleFilterValue,
+        clearFilter,
+        isFilterActive
+    };
+}
+
+// Triggers before the sentinel is actually on-screen -- Attio's own list prefetches
+// a page ahead of the visible edge so the next batch of rows is already there by the
+// time a fast scroll reaches them, rather than the user briefly out-running the data.
+const ROOT_MARGIN = "160px";
+/**
+ * Owns the "is the user close enough to the bottom to load more" concern -- the way
+ * useDataTableScroll owns the horizontal scroll-shadow edge state. An
+ * IntersectionObserver watching a single sentinel row the styled layer renders as the
+ * last child of `<tbody>` while `hasMore` is true (DataTable.tsx's own
+ * `InfiniteScrollRow`), observed against `scrollRootRef`'s element (useDataTable.ts
+ * wires this to useDataTableScroll's own scroll container) so a BOUNDED table
+ * triggers off its own internal scroll, not the browsing viewport.
+ */ function useDataTableInfiniteScroll(props) {
+    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef } = props;
+    const [internalLoadingMore, setInternalLoadingMore] = useState(false);
+    const loadingMore = loadingMoreProp ?? internalLoadingMore;
+    // Mirrors the latest props into a ref the observer callback reads -- the callback
+    // is registered once per sentinel element (see the effect below) and must not
+    // recreate the whole IntersectionObserver on every render just because a fresh
+    // `onLoadMore` closure came in, the same "ref mirrors the latest value" shape a
+    // debounced/throttled handler needs.
+    const latest = useRef({
+        onLoadMore,
+        hasMore,
+        loadingMore
+    });
+    latest.current = {
+        onLoadMore,
+        hasMore,
+        loadingMore
+    };
+    const triggerLoadMore = useCallback(()=>{
+        const { onLoadMore: fn, hasMore: has, loadingMore: busy } = latest.current;
+        if (!shouldTriggerLoadMore(true, has, busy) || !fn) return;
+        const result = fn();
+        // Only a THENABLE result puts this hook in charge of `loadingMore` -- a
+        // synchronous `onLoadMore` (already-fetched data, a local page) commits
+        // immediately and never becomes "busy" at all, matching `loadingMoreProp`'s own
+        // controlled shape: nothing to suppress a very next scroll-triggered call with.
+        if (result && typeof result.then === "function") {
+            if (loadingMoreProp === undefined) setInternalLoadingMore(true);
+            result.finally(()=>{
+                if (loadingMoreProp === undefined) setInternalLoadingMore(false);
+            });
+        }
+    }, [
+        loadingMoreProp
+    ]);
+    // A state slot (not a plain ref) so attaching the sentinel re-runs the effect below
+    // -- a callback ref's own node can't be an effect dependency otherwise.
+    const [sentinelNode, setSentinelNode] = useState(null);
+    const sentinelRef = useCallback((node)=>setSentinelNode(node), []);
+    useEffect(()=>{
+        if (!sentinelNode || !onLoadMore || typeof IntersectionObserver === "undefined") return;
+        // Effects run after every ref callback of the SAME commit (including
+        // `scrollRootRef`'s own, set by useDataTableScroll's `scrollAreaRef`) regardless
+        // of sibling ref attach order, so `scrollRootRef.current` is already populated
+        // here even on the very first render that mounts both elements at once. `null`
+        // (no scroll container yet, or none supplied) falls back to the browsing
+        // viewport, IntersectionObserver's own default.
+        const root = scrollRootRef?.current ?? null;
+        const observer = new IntersectionObserver((entries)=>{
+            if (entries.some((entry)=>entry.isIntersecting)) triggerLoadMore();
+        }, {
+            root,
+            rootMargin: ROOT_MARGIN
+        });
+        observer.observe(sentinelNode);
+        return ()=>observer.disconnect();
+    }, [
+        sentinelNode,
+        onLoadMore,
+        scrollRootRef,
+        triggerLoadMore
+    ]);
+    return {
+        /** Attach to the sentinel row's DOM node (a ref callback, `DataTable.tsx`'s own
+     *  `InfiniteScrollRow`). A no-op (no observer ever created) when `onLoadMore` is
+     *  omitted -- the styled layer still shouldn't render the sentinel at all in that
+     *  case (nothing to load more OF), this is just the inert fallback. */ sentinelRef,
+        /** Whether to keep rendering the sentinel row at all. */ hasMore,
+        /** A fetch is in flight -- shows the loading-more spinner row and gates further
+     *  triggers, whichever side (controlled or internal) reports it. */ loadingMore,
+        /** Fires `onLoadMore` directly, subject to the same `hasMore`/`loadingMore` gate
+     *  the observer itself uses -- exposed for a consumer that wants a manual retry
+     *  affordance (e.g. after a failed load) rather than only the observer's own
+     *  scroll trigger. */ triggerLoadMore
+    };
+}
+
+/**
+ * Tracks a horizontally-scrolling element's edge state for the sticky-column scroll
+ * shadow (DATATABLE-ATTIO-SPEC.md's `stickyFirst`/`stickyLast`) -- crisp's own
+ * `.crisp-table-scroll[data-scrolled-x]`/`[data-scrolled-x-end]`. Owns the DOM
+ * measurement the way `useSelectFloating` owns floating-ui's own DOM measurement: a
+ * real ref to a real scrollable element, re-measured on every scroll (and whenever the
+ * styled layer calls `remeasure`, e.g. after a column resize/reorder changes the
+ * scrollable width without the element itself ever firing a `scroll` event).
+ */ function useDataTableScroll() {
+    const elementRef = useRef(null);
+    const [scrolledStart, setScrolledStart] = useState(false);
+    const [scrolledEnd, setScrolledEnd] = useState(false);
+    const remeasure = useCallback(()=>{
+        const element = elementRef.current;
+        if (!element) return;
+        setScrolledStart(element.scrollLeft > 0);
+        // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
+        // short of `scrollWidth` even when fully scrolled, which would otherwise leave
+        // the trailing shadow stuck on forever.
+        setScrolledEnd(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
+    }, []);
+    const scrollAreaRef = useCallback((node)=>{
+        elementRef.current = node;
+        if (node) remeasure();
+    }, [
+        remeasure
+    ]);
+    const onScroll = useCallback(()=>remeasure(), [
+        remeasure
+    ]);
+    return {
+        scrollAreaRef,
+        scrolledStart,
+        scrolledEnd,
+        onScroll,
+        remeasure,
+        // The raw ref object itself (not just the callback ref above) -- useDataTable.ts
+        // hands this to useDataTableInfiniteScroll as the IntersectionObserver `root` for
+        // its sentinel row, so a scrolled/bounded table (DATATABLE-ATTIO-SPEC.md's
+        // full-body-height feature) auto-loads against ITS OWN scroll boundary rather
+        // than the browsing viewport. A stable object identity (a plain ref, not state):
+        // useDataTableInfiniteScroll reads `.current` inside an effect, which always runs
+        // after every ref callback of the same commit (including this one), so the
+        // element is never read before it's attached regardless of sibling ref order.
+        elementRef
+    };
+}
+
+// Owns the toolbar's single free-text query -- the way useDataTableSort owns the single
+// active sort column. It has no idea which columns are searchable or how a row's value
+// is read off them (that needs `TRow`, a type this headless package never sees), so
+// narrowing `data` against the query is the styled layer's job (DataTable.tsx's
+// `getVisibleRows`) -- the same split sort already draws: this hook tracks WHICH state
+// is active, the styled layer decides what that state does to the rows.
+function useDataTableSearch(props) {
+    const { query: queryProp, defaultQuery = "", onQueryChange } = props;
+    const [query = "", setQuery] = useControllableState({
+        prop: queryProp,
+        defaultProp: defaultQuery,
+        onChange: onQueryChange
+    });
+    const clearQuery = useCallback(()=>setQuery(""), [
+        setQuery
+    ]);
+    return {
+        query,
+        setQuery,
+        clearQuery
+    };
+}
+
+// Owns the selected-id set and its two shapes of toggle (one row, select-all) --
+// the way useSelectOptions owns the selected VALUE. `selectionState` and `toggleAll`
+// are always computed against `rowIds` (the currently rendered order), never against
+// `selectedIds` alone -- see dom.ts's `computeSelectionState` doc comment.
+function useDataTableSelection(props) {
+    const { rowIds = [], selectable = false, selectedIds: selectedIdsProp, defaultSelectedIds = [], onSelectionChange } = props;
+    const [selectedIds = [], setSelectedIds] = useControllableState({
+        prop: selectedIdsProp,
+        defaultProp: defaultSelectedIds,
+        onChange: onSelectionChange
+    });
+    const selectedIdSet = useMemo(()=>new Set(selectedIds), [
+        selectedIds
+    ]);
+    const isSelected = useCallback((id)=>selectedIdSet.has(id), [
+        selectedIdSet
+    ]);
+    const toggleRow = useCallback((id)=>{
+        setSelectedIds((current = [])=>toggleMembership(current, id));
+    }, [
+        setSelectedIds
+    ]);
+    const selectionState = useMemo(()=>computeSelectionState(rowIds, selectedIds), [
+        rowIds,
+        selectedIds
+    ]);
+    const toggleAll = useCallback(()=>{
+        setSelectedIds(selectionState === "all" ? [] : rowIds);
+    }, [
+        selectionState,
+        rowIds,
+        setSelectedIds
+    ]);
+    const getRowProps = useCallback((rowId)=>{
+        const isRowSelected = isSelected(rowId);
+        return elementProps({
+            role: "row",
+            "aria-selected": ariaAttr(isRowSelected),
+            "data-selected": dataAttr(isRowSelected)
+        });
+    }, [
+        isSelected
+    ]);
+    return {
+        selectable,
+        rowIds,
+        selectedIds,
+        selectionState,
+        isSelected,
+        toggleRow,
+        toggleAll,
+        getRowProps
+    };
+}
+
+// Owns the single active sort column/direction and the click/keyboard toggle that
+// cycles it -- the way useSelectHighlight owns the single active index. A header
+// cell's full prop set (aria-sort, data-sortable/data-sorted, the click and
+// Enter/Space handlers) is built here too, beside the state it reads, rather than
+// re-derived in the styled layer or the root primitive.
+function useDataTableSort(props) {
+    const { sort: sortProp, defaultSort, onSortChange } = props;
+    const [sort, setSort] = useControllableState({
+        prop: sortProp,
+        defaultProp: defaultSort,
+        onChange: (nextSort)=>{
+            // `toggleSort` never sets `sort` back to `undefined`, but the underlying state is
+            // typed as possibly-undefined so an uncontrolled table can start with no sort at all.
+            if (nextSort) onSortChange?.(nextSort);
+        }
+    });
+    const toggleSort = useCallback((key)=>{
+        setSort((current)=>{
+            if (!current || current.key !== key) return {
+                key,
+                dir: "asc"
+            };
+            return {
+                key,
+                dir: current.dir === "asc" ? "desc" : "asc"
+            };
+        });
+    }, [
+        setSort
+    ]);
+    const getHeaderCellProps = useCallback((columnKey, sortable)=>{
+        const isSorted = Boolean(columnKey) && sort?.key === columnKey;
+        const canSort = Boolean(sortable && columnKey);
+        return elementProps({
+            role: "columnheader",
+            "aria-sort": canSort ? isSorted ? sort?.dir === "asc" ? "ascending" : "descending" : "none" : undefined,
+            tabIndex: canSort ? 0 : undefined,
+            "data-sortable": dataAttr(canSort),
+            "data-sorted": dataAttr(isSorted),
+            "data-sort-direction": isSorted ? sort?.dir : undefined,
+            onClick (event) {
+                if (event.defaultPrevented || !canSort || !columnKey) return;
+                toggleSort(columnKey);
+            },
+            onKeyDown (event) {
+                if (event.defaultPrevented || !canSort || !columnKey) return;
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    toggleSort(columnKey);
+                }
+            }
+        });
+    }, [
+        sort,
+        toggleSort
+    ]);
+    return {
+        sort,
+        toggleSort,
+        getHeaderCellProps
+    };
+}
+
+// Composes the eight independent concerns a table root owns -- which column is
+// sorted, which rows are selected, the toolbar's free-text query, each column's own
+// filter, column order/visibility/width/label, each column's ColumnCalc footer op, the
+// horizontal scroll-shadow edge state, and which single cell is mid-edit/pending/
+// erroring -- the way useSelect composes useSelectHighlight + useSelectOptions. No
+// sub-hook knows about any other; a future concern (row grouping) is a ninth sibling
+// call here, not a branch inside an existing one.
+function useDataTable(props) {
+    const sort = useDataTableSort(props);
+    const selection = useDataTableSelection(props);
+    const search = useDataTableSearch(props);
+    const filter = useDataTableFilter(props);
+    const columns = useDataTableColumns(props);
+    const columnCalc = useDataTableColumnCalc(props);
+    const scroll = useDataTableScroll();
+    const edit = useDataTableEdit(props);
+    // 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.
+    const infiniteScroll = useDataTableInfiniteScroll({
+        ...props,
+        scrollRootRef: scroll.elementRef
+    });
+    return {
+        ...sort,
+        ...selection,
+        ...search,
+        ...filter,
+        ...columns,
+        ...columnCalc,
+        ...scroll,
+        ...edit,
+        ...infiniteScroll,
+        rootProps: elementProps({
+            role: "table"
+        })
+    };
+}
+
+// Per-row read of the root's selection state -- the way useSelectItem reads
+// `getItemProps` off the root for one option. Kept as its own hook (rather than
+// inlined into the styled `DataTableRow`) so `DataTableCell`/`DataTableSelectionCell`
+// can read the SAME row's `isSelected`/`toggleRow` through `useDataTableRowContext`
+// without either subscribing to the whole table's context or being handed `rowId`
+// again as a prop.
+function useDataTableRow(props) {
+    const { rowId } = props;
+    const { isSelected, toggleRow, getRowProps } = useDataTableContext();
+    return {
+        rowId,
+        isSelected: isSelected(rowId),
+        toggleRow: ()=>toggleRow(rowId),
+        rootProps: getRowProps(rowId)
+    };
+}
+
+const DataTableContext = /*#__PURE__*/ createContext(null);
+const DataTableProvider = DataTableContext.Provider;
+function useDataTableContext({ strict = true } = {}) {
+    const context = useContext(DataTableContext);
+    if (!context && strict) {
+        throw new Error("useDataTableContext must be used within a DataTable");
+    }
+    return context;
+}
+const DataTableRowContext = /*#__PURE__*/ createContext(null);
+const DataTableRowProvider = DataTableRowContext.Provider;
+function useDataTableRowContext({ strict = true } = {}) {
+    const context = useContext(DataTableRowContext);
+    if (!context && strict) {
+        throw new Error("useDataTableRowContext must be used within a DataTableRow");
+    }
+    return context;
+}
+const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, filters, defaultFilters, onFiltersChange, columnKeys, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
+    const api = useDataTable({
+        sort,
+        defaultSort,
+        onSortChange,
+        rowIds,
+        selectable,
+        selectedIds,
+        defaultSelectedIds,
+        onSelectionChange,
+        query,
+        defaultQuery,
+        onQueryChange,
+        filters,
+        defaultFilters,
+        onFiltersChange,
+        columnKeys,
+        columnOrder,
+        defaultColumnOrder,
+        onColumnOrderChange,
+        hiddenColumnKeys,
+        defaultHiddenColumnKeys,
+        onHiddenColumnKeysChange,
+        columnWidths,
+        defaultColumnWidths,
+        onColumnWidthsChange,
+        columnLabels,
+        defaultColumnLabels,
+        onColumnLabelsChange,
+        columnCalcOps,
+        defaultColumnCalcOps,
+        onColumnCalcOpsChange,
+        onEdit,
+        onLoadMore,
+        hasMore,
+        loadingMore
+    });
+    return /*#__PURE__*/ jsx(DataTableProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: ref,
+            ...otherProps
+        })
+    });
+});
+DataTableRoot.displayName = "DataTableRoot";
+/**
+ * The real `<table>` -- everything a native table gets for free (columns that line up
+ * by construction across `<thead>`/`<tbody>`/`<tfoot>`, `<th scope="col">` semantics,
+ * sticky `th`/`td` that actually work under horizontal scroll) that a `display: flex`
+ * div grid faked with ARIA and broke on. `rootProps` (just `role: "table"`, which a
+ * real `<table>` already implies) comes off context rather than being computed here --
+ * `useDataTable()` runs once, in `DataTableRoot` above, not per render of this sibling.
+ */ const DataTableTable$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { rootProps } = useDataTableContext();
+    const mergedProps = mergeProps$1(rootProps, props);
+    return /*#__PURE__*/ jsx(Primitive.table, {
+        ref: ref,
+        ...mergedProps
+    });
+});
+DataTableTable$1.displayName = "DataTableTable";
+/**
+ * `<thead>`, wrapping its own children in a single `<tr>` -- the styled layer still
+ * renders every header cell as a flat child of `DataTableHeader` (one header row is
+ * the only shape this table supports), so that `<tr>` is supplied HERE rather than
+ * asking every call site to add it.
+ */ const DataTableHeader$1 = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>{
+    return /*#__PURE__*/ jsx(Primitive.thead, {
+        ref: ref,
+        ...otherProps,
+        children: /*#__PURE__*/ jsx("tr", {
+            children: children
+        })
+    });
+});
+DataTableHeader$1.displayName = "DataTableHeader";
+const DataTableHeaderCell$1 = /*#__PURE__*/ forwardRef(({ columnKey, sortable, ...otherProps }, ref)=>{
+    const { getHeaderCellProps } = useDataTableContext();
+    const mergedProps = mergeProps$1(getHeaderCellProps(columnKey, sortable), otherProps);
+    return /*#__PURE__*/ jsx(Primitive.th, {
+        scope: "col",
+        ref: ref,
+        ...mergedProps
+    });
+});
+DataTableHeaderCell$1.displayName = "DataTableHeaderCell";
+const DataTableBody$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ jsx(Primitive.tbody, {
+        ref: ref,
+        ...props
+    });
+});
+DataTableBody$1.displayName = "DataTableBody";
+const DataTableRow$1 = /*#__PURE__*/ forwardRef(({ rowId, ...otherProps }, ref)=>{
+    const row = useDataTableRow({
+        rowId
+    });
+    const mergedProps = mergeProps$1(row.rootProps, otherProps);
+    return /*#__PURE__*/ jsx(DataTableRowProvider, {
+        value: row,
+        children: /*#__PURE__*/ jsx(Primitive.tr, {
+            ref: ref,
+            ...mergedProps
+        })
+    });
+});
+DataTableRow$1.displayName = "DataTableRow";
+const DataTableCell$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ jsx(Primitive.td, {
+        ref: ref,
+        ...props
+    });
+});
+DataTableCell$1.displayName = "DataTableCell";
+
+function r(e) {
+    var t, f, n = "";
+    if ("string" == typeof e || "number" == typeof e) n += e;
+    else if ("object" == typeof e) if (Array.isArray(e)) {
+        var o = e.length;
+        for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else for(f in e)e[f] && (n && (n += " "), n += f);
+    return n;
+}
+function clsx() {
+    for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+    return n;
+}
+
+function splitMultipleVariantsProps(props, recipesMap) {
+    const multipleVariantsProps = {};
+    const extractedKeys = new Set();
+    for(const recipeKey in recipesMap){
+        const recipe = recipesMap[recipeKey];
+        const [variantProps] = recipe.splitVariantProps(props);
+        multipleVariantsProps[recipeKey] = variantProps;
+        for(const variantPropKey in variantProps){
+            extractedKeys.add(variantPropKey);
+        }
+    }
+    const remainingProps = {};
+    for(const propKey in props){
+        if (extractedKeys.has(propKey)) continue;
+        remainingProps[propKey] = props[propKey];
+    }
+    return [
+        multipleVariantsProps,
+        remainingProps
+    ];
+}
+
+/** Restores defaults overwritten by explicitly passed undefined values. */ function restoreDefaultProps(props, defaultProps) {
+    if (!defaultProps) return;
+    for (const key of Object.keys(defaultProps)){
+        if (props[key] === undefined) {
+            props[key] = defaultProps[key];
+        }
+    }
+}
+
+function createSlotRecipeContext(recipe) {
+    const ClassNamesContext = /*#__PURE__*/ createContext(null);
+    const PropsContext = /*#__PURE__*/ createContext(null);
+    const ClassNamesProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsx(ClassNamesContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    const PropsProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsx(PropsContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    function useClassNames() {
+        const context = useContext(ClassNamesContext);
+        if (context === null) {
+            throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
+        }
+        return context;
+    }
+    function useProps() {
+        return useContext(PropsContext);
+    }
+    const withRootProvider = (Component, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = (innerProps)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const classNames = recipe(variantProps); // TODO: should we memoize this?
+            return /*#__PURE__*/ jsx(ClassNamesProvider, {
+                value: classNames,
+                children: /*#__PURE__*/ jsx(Component, {
+                    ...otherProps
+                })
+            });
+        };
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withProvider = (Component, slot, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = /*#__PURE__*/ forwardRef((innerProps, ref)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const classNames = recipe(variantProps); // TODO: should we memoize this?
+            const className = classNames[slot];
+            return /*#__PURE__*/ jsx(ClassNamesProvider, {
+                value: classNames,
+                children: /*#__PURE__*/ jsx(Component, {
+                    ref: ref,
+                    ...otherProps,
+                    className: clsx(className, props.className)
+                })
+            });
+        });
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withContext = (Component, slot)=>{
+        const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+            const classNames = useClassNames();
+            const className = classNames?.[slot];
+            return /*#__PURE__*/ jsx(Component, {
+                ref: ref,
+                ...props,
+                className: clsx(className, props.className)
+            });
+        });
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    return {
+        ClassNamesProvider,
+        PropsProvider,
+        useClassNames,
+        useProps,
+        withRootProvider,
+        withProvider,
+        withContext
+    };
+}
+
+function createWithStateProps(useContexts) {
+    return function withStateProps(Component) {
+        const Node = /*#__PURE__*/ forwardRef((props, ref)=>{
+            const stateProps = {};
+            for (const contextConfig of useContexts){
+                if (typeof contextConfig === "function") {
+                    Object.assign(stateProps, contextConfig({
+                        strict: true
+                    })?.stateProps);
+                } else {
+                    const { useContext, strict = false } = contextConfig;
+                    Object.assign(stateProps, useContext({
+                        strict
+                    })?.stateProps);
+                }
+            }
+            // @ts-ignore
+            return /*#__PURE__*/ jsx(Component, {
+                ref: ref,
+                ...stateProps,
+                ...props
+            });
+        });
+        Node.displayName = Component.displayName || Component.name;
+        return Node;
+    };
+}
+
+function withScaleFeedback(Component) {
+    const Pressable = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+        const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+        const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+        return /*#__PURE__*/ jsx(Component, {
+            ...props,
+            ref: composedRef,
+            className: clsx(scaleFeedbackClassName, props.className)
+        });
+    });
+    Pressable.displayName = Component.displayName;
+    return Pressable;
+}
+
+const InternalIcon = /*#__PURE__*/ forwardRef(({ svg, ...otherProps }, ref)=>{
+    return /*#__PURE__*/ jsx(Slot, {
+        ref: ref,
+        "aria-hidden": true,
+        ...otherProps,
+        children: svg
+    });
+});
+
+function createRecipeContext(recipe) {
+    const PropsContext = /*#__PURE__*/ createContext(null);
+    const PropsProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsx(PropsContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    function useProps() {
+        return useContext(PropsContext);
+    }
+    const withContext = (Component, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = /*#__PURE__*/ forwardRef((innerProps, ref)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const className = recipe(variantProps); // TODO: should we memoize this?
+            return /*#__PURE__*/ jsx(Component, {
+                ref: ref,
+                ...otherProps,
+                className: clsx(className, props.className)
+            });
+        });
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    function withPropsProvider() {
+        return PropsProvider;
+    }
+    return {
+        PropsProvider,
+        useProps,
+        withContext,
+        withPropsProvider
+    };
+}
+
+const { withContext: withGroupContext } = createRecipeContext(checkboxGroup);
+const { ClassNamesProvider: ClassNamesProvider$3, withContext: withContext$6 } = createSlotRecipeContext(checkbox);
+const { withProvider: withCheckmarkProvider, useClassNames: useCheckmarkClassNames, PropsProvider: CheckmarkPropsProvider } = createSlotRecipeContext(checkmark);
+const withStateProps$4 = createWithStateProps([
+    useCheckboxContext
+]);
+withGroupContext(Primitive.div);
+const CheckboxRoot = Object.assign(/*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
+        checkbox,
+        checkmark
+    });
+    const classNames = checkbox(checkboxVariantProps);
+    return /*#__PURE__*/ jsx(CheckmarkPropsProvider, {
+        value: checkmarkVariantProps,
+        children: /*#__PURE__*/ jsx(ClassNamesProvider$3, {
+            value: classNames,
+            children: /*#__PURE__*/ jsx(Checkbox.Root, {
+                ref: ref,
+                className: clsx(classNames.root, className),
+                ...otherProps
+            })
+        })
+    });
+}), {
+    Primitive: Checkbox.Root
+});
+const CheckboxControl = withScaleFeedback(withCheckmarkProvider(Checkbox.Control, "root"));
+const CheckboxIndicator = /*#__PURE__*/ forwardRef(({ unchecked: uncheckedSvg, checked: checkedSvg, indeterminate: indeterminateSvg, ...otherProps }, ref)=>{
+    const { stateProps, checked, indeterminate } = useCheckboxContext();
+    const classNames = useCheckmarkClassNames();
+    const mergedProps = mergeProps$1(stateProps, {
+        className: classNames.icon
+    }, otherProps);
+    if (indeterminate && !indeterminateSvg) {
+        console.warn("CheckboxIndicator: the `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
+    }
+    if (indeterminate) return /*#__PURE__*/ jsx(InternalIcon, {
+        ref: ref,
+        svg: indeterminateSvg,
+        ...mergedProps
+    });
+    if (checked) return /*#__PURE__*/ jsx(InternalIcon, {
+        ref: ref,
+        svg: checkedSvg,
+        ...mergedProps
+    });
+    if (uncheckedSvg) return /*#__PURE__*/ jsx(InternalIcon, {
+        ref: ref,
+        svg: uncheckedSvg,
+        ...mergedProps
+    });
+    return null;
+});
+CheckboxIndicator.displayName = "CheckboxIndicator";
+const CheckboxLabel = withContext$6(withStateProps$4(Primitive.span), "label");
+const CheckboxHiddenInput = Checkbox.HiddenInput;
+
+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);
+    const { root, label } = badge(variantProps);
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        className: clsx(root, className),
+        ...restProps,
+        ref: ref,
+        children: /*#__PURE__*/ jsx(Primitive.span, {
+            className: label,
+            children: children
+        })
+    });
+});
+Badge.displayName = "Badge";
+
+// Attio cell-type renderers, built from seed's own components -- not exported from
+// the package's public surface (kept alongside DataTable.tsx as an implementation
+// detail, the way Select keeps `InternalIcon` under `components/private`). Each
+// renderer takes the raw column value and the table's resolved recipe classNames,
+// and returns `null` for an empty value: Attio's own empty cell is genuinely blank,
+// no placeholder character, for any type (crisp's datatable.tsx, #412).
+// seed's `CheckboxIndicator` renders exactly what its `checked` prop is -- it does not
+// supply a checkmark on its own. `checked={null}` (this file's own pre-fix state)
+// therefore rendered an empty box even once the value WAS true; every read-only/
+// editable checkbox cell in this component needs a real icon here, the same one the
+// row-selection checkbox already uses (`DataTable.tsx`'s `SELECTION_ICON_SIZE`, 12px).
+const CHECKBOX_CELL_CHECKED_ICON = /*#__PURE__*/ jsx(IconCheckmarkLine_default, {
+    size: 12
+});
+// The 6 tones Badge ships (`@seed-design/css/recipes/badge`) -- not Attio's own
+// wider palette (crisp's tag/status cells hash across a measured 7- or 12-colour
+// set it defines itself), because this component builds cell chrome ONLY from
+// seed's already-shipped primitives rather than adding a parallel palette. Same
+// stable-hash approach as crisp's own `toneFor` (multiply-and-add over char codes),
+// just over seed's tone list instead of crisp's.
+const BADGE_TONES = [
+    "neutral",
+    "brand",
+    "informative",
+    "positive",
+    "warning",
+    "critical"
+];
+function toneFor(value) {
+    let hash = 0;
+    for(let index = 0; index < value.length; index++){
+        hash = hash * 31 + value.charCodeAt(index) >>> 0;
+    }
+    return BADGE_TONES[hash % BADGE_TONES.length];
+}
+function initialsFor(name) {
+    const parts = name.trim().split(/\s+/);
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
+}
+function formatNumberCell(value, locale) {
+    return typeof value === "number" ? value.toLocaleString(locale) : null;
+}
+function formatCurrencyCell(value, symbol, locale) {
+    return typeof value === "number" ? `${symbol}${value.toLocaleString(locale)}` : null;
+}
+function toDate(value) {
+    const date = value instanceof Date ? value : typeof value === "string" ? new Date(value) : null;
+    return date && !Number.isNaN(date.getTime()) ? date : null;
+}
+/** `<input type="date">`'s own value shape (`yyyy-mm-dd`) -- editors.tsx's plain
+ *  `cellType: "date"` inline editor reads/writes exactly this string, native to the
+ *  browser's own date input, so no separate parse/format step is needed on commit. */ function toDateInputValue(value) {
+    const date = toDate(value);
+    if (!date) return "";
+    const pad = (n)=>String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+/** `<input type="datetime-local">`'s own value shape (`yyyy-mm-ddThh:mm`) -- same
+ *  reasoning as `toDateInputValue` above, one input type over. */ function toDateTimeInputValue(value) {
+    const date = toDate(value);
+    if (!date) return "";
+    const pad = (n)=>String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function formatDateCell(value, locale) {
+    const date = toDate(value);
+    if (!date) return null;
+    return new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+    }).format(date);
+}
+function formatDateTimeCell(value, locale) {
+    const date = toDate(value);
+    if (!date) return null;
+    return new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit"
+    }).format(date);
+}
+function EntityCell({ value, className, nameClassName }) {
+    const entity = typeof value === "object" && value !== null ? value : {
+        name: String(value ?? "")
+    };
+    if (!entity.name) return null;
+    return /*#__PURE__*/ jsxs("span", {
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(AvatarRoot, {
+                size: "20",
+                children: [
+                    entity.avatar && /*#__PURE__*/ jsx(AvatarImage, {
+                        src: entity.avatar,
+                        alt: ""
+                    }),
+                    /*#__PURE__*/ jsx(AvatarFallback, {
+                        children: initialsFor(entity.name)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: nameClassName,
+                children: entity.name
+            })
+        ]
+    });
+}
+function TagsCell({ value, className }) {
+    const tags = Array.isArray(value) ? value : [];
+    if (!tags.length) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: tags.map((tag)=>/*#__PURE__*/ jsx(Badge, {
+                tone: toneFor(tag),
+                variant: "weak",
+                size: "medium",
+                children: tag
+            }, tag))
+    });
+}
+function StatusCell({ value }) {
+    const status = value == null ? "" : String(value);
+    if (!status) return null;
+    return /*#__PURE__*/ jsx(Badge, {
+        tone: toneFor(status),
+        variant: "weak",
+        size: "medium",
+        children: status
+    });
+}
+function LinkCell({ column, value, className }) {
+    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}`;
+    return /*#__PURE__*/ jsx("a", {
+        className: className,
+        href: href,
+        target: isUrl ? "_blank" : undefined,
+        rel: isUrl ? "noreferrer" : undefined,
+        // 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
+    });
+}
+// Attio's own measured 5-point star path (crisp's `RATING_STAR_D`, traced from the
+// live widget's SVG) -- reused verbatim rather than a generic star glyph, so a
+// rating cell's silhouette matches Attio exactly instead of approximating it. Exported
+// so editors.tsx's interactive `RatingEditor` (an `editable` rating column, clicking a
+// star commits) draws the identical silhouette rather than a second, slightly
+// different one.
+const RATING_STAR_D = "M7.32203 2.81085C7.65793 1.97438 8.84207 1.97438 9.17797 2.81085L10.0851 5.06967C10.2281 5.42587 10.5624 5.66876 10.9454 5.69473L13.3739 5.8594C14.2733 5.92038 14.6392 7.04656 13.9475 7.62451L12.0795 9.18521C11.7849 9.43132 11.6572 9.82433 11.7509 10.1966L12.3447 12.5572C12.5647 13.4313 11.6067 14.1273 10.8433 13.6481L8.78171 12.3538C8.45661 12.1497 8.04339 12.1497 7.71829 12.3538L5.65675 13.6481C4.89333 14.1273 3.93534 13.4313 4.15526 12.5572L4.74911 10.1966C4.84276 9.82433 4.71507 9.43132 4.4205 9.18521L2.55254 7.62451C1.86081 7.04656 2.22673 5.92038 3.12606 5.8594L5.55463 5.69473C5.9376 5.66876 6.27191 5.42587 6.41495 5.06967L7.32203 2.81085Z";
+// Filled = the same measured Attio brand blue the selected-row tint uses
+// (`data-table.ts`'s `ATTIO_BRAND_BLUE`); empty = crisp's own measured
+// `rgba(0,0,0,0.1)`. Literal, not a recipe token -- see that file's comment on why.
+const RATING_FILLED = "#0298d9";
+const RATING_EMPTY = "rgba(0, 0, 0, 0.1)";
+function RatingCell({ value, maxRating = 5 }) {
+    const rating = typeof value === "number" ? value : Number(value);
+    if (!rating || Number.isNaN(rating)) return null;
+    return /*#__PURE__*/ jsx("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2
+        },
+        children: Array.from({
+            length: maxRating
+        }, (_, index)=>// biome-ignore lint/suspicious/noArrayIndexKey: a fixed-length star row has no other identity
+            /*#__PURE__*/ jsx("svg", {
+                width: 16,
+                height: 16,
+                viewBox: "0 0 16 16",
+                fill: "none",
+                role: "presentation",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: RATING_STAR_D,
+                    fill: index < rating ? RATING_FILLED : RATING_EMPTY
+                })
+            }, index))
+    });
+}
+/** `type: "checkbox"`'s READ-ONLY display -- a disabled seed `Checkbox` reflecting
+ *  the raw boolean, so a non-`editable` checkbox column still reads as a checkbox
+ *  (crisp's own measured shape, distinct from `switch`/`rating`'s toggle/star), not a
+ *  bare "true"/"false" string. The `editable` case (a live, clickable checkbox) is
+ *  `editors.tsx`'s `CheckboxEditor` -- this renderer never handles a click. */ function CheckboxCell({ value }) {
+    const checked = value === true || value === "true";
+    return /*#__PURE__*/ jsxs(CheckboxRoot, {
+        checked: checked,
+        disabled: true,
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsx(CheckboxControl, {
+                children: /*#__PURE__*/ jsx(CheckboxIndicator, {
+                    checked: CHECKBOX_CELL_CHECKED_ICON
+                })
+            }),
+            /*#__PURE__*/ jsx(CheckboxHiddenInput, {
+                "aria-label": "Value"
+            })
+        ]
+    });
+}
+
+/** The subset of `useDataTableContext()` every "resolve which columns to actually
+ *  render, in what order, under what label/width" helper below needs -- narrowed so
+ *  each helper's own signature documents exactly what it reads, rather than the whole
+ *  table API. */ function useEffectiveColumns(columns) {
+    const { visibleColumnOrder, getColumnLabel, getColumnWidth } = useDataTableContext();
+    return React.useMemo(()=>{
+        const byKey = new Map(columns.map((column)=>[
+                column.key,
+                column
+            ]));
+        return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
+                column,
+                label: getColumnLabel(column.key, column.header),
+                width: getColumnWidth(column.key) ?? column.width
+            }));
+    }, [
+        columns,
+        visibleColumnOrder,
+        getColumnLabel,
+        getColumnWidth
+    ]);
+}
+/** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
+ *  footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
+ *  first data column; `stickyLast` always pins the last VISIBLE data column. Only the
+ *  OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
+ *  whose shadow should reveal on scroll, not every sticky cell.
+ *
+ *  When both a selection column and a sticky first data column are present, the edge
+ *  is the data column (e.g. Company), not the 40px selection cell: the data column is
+ *  ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
+ *  selection cell's trailing edge would render directly underneath that opaque sticky
+ *  cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
+ *  sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
+ *  whole pinned group, not between two members of it. */ function stickyProps(options) {
+    const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
+    if (stickyFirst && isSelectionCell) {
+        // Still sticky either way. The edge marker only belongs here when there is no
+        // sticky first DATA column to hand it to instead (i.e. no columns at all) --
+        // otherwise that data column is the true trailing edge of the pinned group.
+        return selectable ? {
+            "data-sticky": "",
+            style: {
+                insetInlineStart: 0
+            }
+        } : {
+            "data-sticky": "",
+            "data-sticky-edge": "",
+            style: {
+                insetInlineStart: 0
+            }
+        };
+    }
+    if (stickyFirst && isFirst && !selectable) {
+        return {
+            "data-sticky": "",
+            "data-sticky-edge": "",
+            style: {
+                insetInlineStart: 0
+            }
+        };
+    }
+    if (stickyFirst && isFirst && selectable) {
+        // The trailing edge of the pinned group -- past the 40px selection cell, so this
+        // is where the scroll shadow actually renders unobstructed.
+        return {
+            "data-sticky": "",
+            "data-sticky-edge": "",
+            style: {
+                insetInlineStart: 40
+            }
+        };
+    }
+    if (stickyLast && isLast) {
+        return {
+            "data-sticky": "",
+            "data-sticky-edge-end": "",
+            style: {
+                insetInlineEnd: 0
+            }
+        };
+    }
+    return {};
+}
+
+// A select-only combobox spans three specs — the trigger, the floating listbox
+// container, and the option rows — each with its own independent states and its own
+// variant map. `SelectRoot` seeds defaults for all three, but only the container
+// resolves there, since its slots are spread across the portal subtree with no
+// single element to own them. The trigger and each option row resolve their own
+// recipe, so a per-instance variant can override the root's default.
+const { ClassNamesProvider: TriggerClassNamesProvider, PropsProvider: TriggerPropsProvider, useProps: useTriggerProps, withContext: withTriggerContext, useClassNames: useTriggerClassNames } = createSlotRecipeContext(selectTrigger);
+const { ClassNamesProvider: ContentClassNamesProvider, withContext: withContentContext, useClassNames: useContentClassNames } = createSlotRecipeContext(select);
+const { ClassNamesProvider: ItemClassNamesProvider$1, PropsProvider: ItemPropsProvider$1, useProps: useItemProps$1, withContext: withItemContext$1, useClassNames: useItemClassNames } = createSlotRecipeContext(selectItem);
+const withStateProps$3 = createWithStateProps([
+    useSelectContext
+]);
+const withItemStateProps$1 = createWithStateProps([
+    useSelectItemContext
+]);
+// NOTE: `gutter` and `overflowPadding` are specified in Rootage (`select.yaml`,
+// both `$dimension.x2`) and generated into `@seed-design/css`, but nothing reads
+// them: floating-ui's `offset`/`shift` take numbers, not CSS custom properties,
+// so the headless layer falls back to its own `8`. That default stays
+// design-system-agnostic on purpose — this layer is the one that owns the
+// Rootage binding, so seed the spec values from here when they need to win,
+// the way `HelpBubbleRoot` passes `gutter` through `defaultProps`.
+const SelectRoot = (props)=>{
+    const [{ select: contentVariantProps, selectTrigger: triggerVariantProps, selectItem: itemVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
+        select,
+        selectTrigger,
+        selectItem
+    });
+    const contentClassNames = select(contentVariantProps);
+    return /*#__PURE__*/ jsx(ContentClassNamesProvider, {
+        value: contentClassNames,
+        children: /*#__PURE__*/ jsx(TriggerPropsProvider, {
+            value: triggerVariantProps,
+            children: /*#__PURE__*/ jsx(ItemPropsProvider$1, {
+                value: itemVariantProps,
+                children: /*#__PURE__*/ jsx(Select.Root, {
+                    ...otherProps
+                })
+            })
+        })
+    });
+};
+const SelectTrigger = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const [variantProps, otherProps] = selectTrigger.splitVariantProps(props);
+    const rootProps = useTriggerProps();
+    const classNames = selectTrigger({
+        ...rootProps,
+        ...variantProps
+    });
+    const fieldContext = useFieldContext({
+        strict: false
+    });
+    // Pull only the field's labelledby/describedby: `useSelect` owns the
+    // combobox's aria-invalid/required and native disabled, so we don't merge
+    // those from the field (avoids duplicate ownership and aria-disabled on top
+    // of the native disabled button).
+    const mergedProps = mergeProps$1(fieldContext ? {
+        "aria-labelledby": fieldContext.inputAriaAttributes["aria-labelledby"],
+        "aria-describedby": fieldContext.inputAriaAttributes["aria-describedby"]
+    } : {}, otherProps);
+    if (process.env.NODE_ENV !== "production" && !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
+        console.warn("SelectTrigger: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `SelectTrigger` inside a `Field` where a `FieldLabel` is provided.");
+    }
+    return /*#__PURE__*/ jsx(TriggerClassNamesProvider, {
+        value: classNames,
+        children: /*#__PURE__*/ jsx(Select.Trigger, {
+            ref: ref,
+            className: clsx(classNames.root, className),
+            ...mergedProps
+        })
+    });
+});
+SelectTrigger.displayName = "SelectTrigger";
+const SelectValue = withTriggerContext(withStateProps$3(Select.Value), "value");
+const SelectPlaceholder = withTriggerContext(withStateProps$3(Select.Placeholder), "placeholder");
+const SelectPrefixIcon = /*#__PURE__*/ React.forwardRef(({ fallback, className, ...otherProps }, ref)=>{
+    const { selectedItem, stateProps } = useSelectContext();
+    const classNames = useTriggerClassNames();
+    const svg = selectedItem?.icon ?? fallback;
+    if (!svg) return null;
+    return /*#__PURE__*/ jsx(InternalIcon, {
+        ref: ref,
+        svg: svg,
+        className: clsx(classNames.prefixIcon, className),
+        ...stateProps,
+        ...otherProps
+    });
+});
+SelectPrefixIcon.displayName = "SelectPrefixIcon";
+const SelectSuffixIcon = withTriggerContext(withStateProps$3(InternalIcon), "suffixIcon");
+const SelectPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const classNames = useContentClassNames();
+    return /*#__PURE__*/ jsx(Select.Positioner, {
+        ref: ref,
+        className: clsx(classNames.positioner, className),
+        ...props
+    });
+});
+SelectPositioner.displayName = "SelectPositioner";
+const SelectContent = /*#__PURE__*/ React.forwardRef(({ className, ...otherProps }, ref)=>{
+    const classNames = useContentClassNames();
+    const fieldContext = useFieldContext({
+        strict: false
+    });
+    // Label the listbox popup with the same field label (APG combobox pattern).
+    const mergedProps = mergeProps$1(fieldContext ? {
+        "aria-labelledby": fieldContext.inputAriaAttributes["aria-labelledby"]
+    } : {}, otherProps);
+    return /*#__PURE__*/ jsx(Select.Content, {
+        ref: ref,
+        className: clsx(classNames.content, className),
+        ...mergedProps
+    });
+});
+SelectContent.displayName = "SelectContent";
+const SelectScrollArea = withContentContext(Primitive.div, "scrollArea");
+withContentContext(Select.Group, "group");
+withContentContext(Select.GroupLabel, "groupLabel");
+const SelectItem = /*#__PURE__*/ React.forwardRef(({ prefixIcon, className, ...props }, ref)=>{
+    const [variantProps, otherProps] = selectItem.splitVariantProps(props);
+    const rootProps = useItemProps$1();
+    const classNames = selectItem({
+        ...rootProps,
+        ...variantProps
+    });
+    return /*#__PURE__*/ jsx(ItemClassNamesProvider$1, {
+        value: classNames,
+        children: /*#__PURE__*/ jsx(Select.Item, {
+            ref: ref,
+            icon: prefixIcon,
+            ...otherProps,
+            className: clsx(classNames.root, className)
+        })
+    });
+});
+SelectItem.displayName = "SelectItem";
+const SelectItemPrefixIcon = /*#__PURE__*/ React.forwardRef(({ svg: svgOverride, className, ...otherProps }, ref)=>{
+    const { icon, stateProps } = useSelectItemContext();
+    const classNames = useItemClassNames();
+    const svg = svgOverride ?? icon;
+    if (!svg) return null;
+    return /*#__PURE__*/ jsx(InternalIcon, {
+        ref: ref,
+        svg: svg,
+        className: clsx(classNames.prefixIcon, className),
+        ...stateProps,
+        ...otherProps
+    });
+});
+SelectItemPrefixIcon.displayName = "SelectItemPrefixIcon";
+const SelectItemBody = withItemContext$1(withItemStateProps$1(Primitive.div), "body");
+const SelectItemLabel = /*#__PURE__*/ React.forwardRef(({ children, className, ...otherProps }, ref)=>{
+    const { label, stateProps } = useSelectItemContext();
+    const classNames = useItemClassNames();
+    // stateProps stays because the label's disabled style targets its own
+    // `data-disabled`.
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        ref: ref,
+        className: clsx(classNames.label, className),
+        ...stateProps,
+        ...otherProps,
+        children: children ?? label
+    });
+});
+SelectItemLabel.displayName = "SelectItemLabel";
+withItemContext$1(withItemStateProps$1(Primitive.span), "description");
+const SelectItemIndicator = /*#__PURE__*/ React.forwardRef(({ selected: selectedSvg, unselected: unselectedSvg, className, ...otherProps }, ref)=>{
+    const { isSelected, stateProps } = useSelectItemContext();
+    const classNames = useItemClassNames();
+    const svg = isSelected ? selectedSvg : unselectedSvg;
+    if (!svg) return null;
+    return /*#__PURE__*/ jsx(InternalIcon, {
+        ref: ref,
+        svg: svg,
+        className: clsx(classNames.indicator, className),
+        ...stateProps,
+        ...otherProps
+    });
+});
+SelectItemIndicator.displayName = "SelectItemIndicator";
+const SelectHiddenSelect = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const fieldContext = useFieldContext({
+        strict: false
+    });
+    // The field label's `htmlFor` targets the field input id. Carrying that id on
+    // the hidden native select — a labelable element whose label activation only
+    // focuses, never opens anything — makes label clicks reach the trigger through
+    // the hidden select's focus redirect. Associating the label with the trigger
+    // button instead would forward label clicks as activation and open the listbox.
+    return /*#__PURE__*/ jsx(Select.HiddenSelect, {
+        ref: ref,
+        id: fieldContext?.inputProps.id,
+        ...props
+    });
+});
+SelectHiddenSelect.displayName = "SelectHiddenSelect";
+
+const { withContext: withContext$4, ClassNamesProvider: ClassNamesProvider$2 } = createSlotRecipeContext(switchStyle);
+const { withContext: withControlContext, PropsProvider: ControlPropsProvider, withProvider: withControlProvider } = createSlotRecipeContext(switchmark);
+const withStateProps$2 = createWithStateProps([
+    useSwitchContext
+]);
+const SwitchRoot = /*#__PURE__*/ React__default.forwardRef(({ className, ...props }, ref)=>{
+    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
+        switchmark,
+        switch: switchStyle
+    });
+    const classNames = switchStyle(switchVariantProps);
+    return /*#__PURE__*/ jsx(ControlPropsProvider, {
+        value: switchmarkVariantProps,
+        children: /*#__PURE__*/ jsx(ClassNamesProvider$2, {
+            value: classNames,
+            children: /*#__PURE__*/ jsx(Switch.Root, {
+                ref: ref,
+                className: clsx(classNames.root, className),
+                ...otherProps
+            })
+        })
+    });
+});
+SwitchRoot.displayName = "SwitchRoot";
+const SwitchControl = withScaleFeedback(withControlProvider(Switch.Control, "root"));
+const SwitchThumb = withControlContext(Switch.Thumb, "thumb");
+withContext$4(withStateProps$2(Primitive.span), "label");
+const SwitchHiddenInput = Switch.HiddenInput;
+
+// src/use-layout-effect.tsx
+var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : ()=>{};
+
+const { withProvider: withProvider$1, withContext: withContext$3, useClassNames: useClassNames$2 } = createSlotRecipeContext(textInput);
+const withFieldStateProps = createWithStateProps([
+    {
+        useContext: useFieldContext,
+        strict: false
+    }
+]);
+const withStateProps$1 = createWithStateProps([
+    useTextFieldContext,
+    {
+        useContext: useFieldContext,
+        strict: false
+    }
+]);
+const TextFieldRoot = withProvider$1(withFieldStateProps(TextField.Root), "root");
+const TextFieldPrefixIcon = 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();
+    const fieldContext = useFieldContext({
+        strict: false
+    });
+    const mergedProps = mergeProps$1(fieldContext ? fieldContext.stateProps : {}, fieldContext ? fieldContext.inputAriaAttributes : {}, textFieldContext.inputProps, fieldContext ? fieldContext.inputProps : {}, otherProps);
+    if (// if not in field, then must have aria-label or aria-labelledby
+    !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
+        console.warn("TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided.");
+    }
+    return /*#__PURE__*/ jsx(TextField.Input, {
+        ref: ref,
+        ...mergedProps,
+        className: clsx(classNames.value, className)
+    });
+});
+TextFieldInput.displayName = "TextFieldInput";
+const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = true, ...otherProps }, ref)=>{
+    const classNames = useClassNames$2();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({
+        strict: false
+    });
+    const mergedProps = mergeProps$1(fieldContext ? fieldContext.stateProps : {}, fieldContext ? fieldContext.inputAriaAttributes : {}, textFieldContext.inputProps, fieldContext ? fieldContext.inputProps : {}, otherProps);
+    if (// if not in field, then must have aria-label or aria-labelledby
+    !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
+        console.warn("TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided.");
+    }
+    // referenced from React Spectrum
+    const inputRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intended
+    const onHeightChange = useCallback(()=>{
+        if (!inputRef.current) return;
+        if (otherProps.style?.height) return;
+        if (!autoresize) return;
+        // Quiet textareas always grow based on their text content.
+        // Standard textareas also grow by default, unless an explicit height is set.
+        const input = inputRef.current;
+        const prevAlignment = input.style.alignSelf;
+        const prevOverflow = input.style.overflow;
+        // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
+        // The measure/applied height is also incorrect/reset if we turn on and off
+        // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
+        const isFirefox = "MozAppearance" in input.style;
+        if (!isFirefox) {
+            input.style.overflow = "hidden";
+        }
+        input.style.alignSelf = "start";
+        input.style.height = "auto";
+        // offsetHeight - clientHeight accounts for the border/padding.
+        input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+        input.style.overflow = prevOverflow;
+        input.style.alignSelf = prevAlignment;
+    }, [
+        inputRef,
+        otherProps.style?.height,
+        autoresize
+    ]);
+    useLayoutEffect2(()=>{
+        if (inputRef.current) {
+            onHeightChange();
+        }
+    }, [
+        onHeightChange,
+        textFieldContext.value,
+        inputRef
+    ]);
+    return /*#__PURE__*/ jsx(TextField.Textarea, {
+        ref: composeRefs(inputRef, ref),
+        ...mergedProps,
+        className: clsx(classNames.value, className)
+    });
+});
+TextFieldTextarea.displayName = "TextFieldTextarea";
+
+/** The raw value a live editor reads, distinct from `DataTableColumn.value` (the
+ *  accessor sort/search/filter/export share): `editValue` returns whatever TYPE the
+ *  editor itself expects -- a real `boolean` for `editor: "switch"`/`type:
+ *  "checkbox"`, a `number` for `type: "rating"`, the option's own string for `select`/
+ *  `reference`/`actor` -- where `value`/`render` may format that same field for
+ *  display. Falls back to the table's own accessor when the column supplies none. */ function resolveEditValue(column, row, fallback) {
+    return column.editValue ? column.editValue(row) : fallback;
+}
+function EditPendingIndicator() {
+    return /*#__PURE__*/ jsxs("svg", {
+        className: "seed-data-table-edit-pending",
+        width: 14,
+        height: 14,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        role: "presentation",
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: 8,
+                cy: 8,
+                r: 6.5,
+                stroke: "currentColor",
+                strokeOpacity: 0.25,
+                strokeWidth: 2
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+function EditError({ message }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: "seed-data-table-edit-error",
+        children: message
+    });
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- plain editable: text/number (seed TextField) and date/datetime (a native input,
+//    styled the same way, per `cellType`) -- both double-click gated, Enter/blur
+//    commits, Escape cancels. -------------------------------------------------------
+function TextEditor({ column, value, pending, onCommit, onCancel }) {
+    const [draft, setDraft] = React.useState(()=>value == null ? "" : String(value));
+    return(// `size="medium"` (seed's smallest fixed `TextField` size, 40px min-height,
+    // `text-input.ts`'s own token) -- the default `size="large"` overflowed a 36px
+    // table row (same class of fix as `toolbar.tsx`'s `SearchBox`, which made the
+    // same call for its own 32px-ish search box).
+    /*#__PURE__*/ jsx(TextFieldRoot, {
+        size: "medium",
+        style: {
+            width: "100%"
+        },
+        onClick: (event)=>event.stopPropagation(),
+        onKeyDown: (event)=>event.stopPropagation(),
+        children: /*#__PURE__*/ jsx(TextFieldInput, {
+            autoFocus: true,
+            type: column.cellType === "number" ? "number" : "text",
+            "aria-label": `Edit ${column.key}`,
+            value: draft,
+            disabled: pending,
+            onChange: (event)=>setDraft(event.target.value),
+            onBlur: ()=>onCommit(draft),
+            onKeyDown: (event)=>{
+                if (event.key === "Enter") onCommit(draft);
+                else if (event.key === "Escape") onCancel();
+            }
+        })
+    }));
+}
+function DateEditor({ column, value, pending, onCommit, onCancel }) {
+    const isDateTime = column.cellType === "datetime";
+    const [draft, setDraft] = React.useState(()=>isDateTime ? toDateTimeInputValue(value) : toDateInputValue(value));
+    return(// See `TextEditor`'s own comment above -- same `size="medium"` fix.
+    /*#__PURE__*/ jsx(TextFieldRoot, {
+        size: "medium",
+        style: {
+            width: "100%"
+        },
+        onClick: (event)=>event.stopPropagation(),
+        onKeyDown: (event)=>event.stopPropagation(),
+        children: /*#__PURE__*/ jsx(TextFieldInput, {
+            autoFocus: true,
+            type: isDateTime ? "datetime-local" : "date",
+            "aria-label": `Edit ${column.key}`,
+            value: draft,
+            disabled: pending,
+            onChange: (event)=>setDraft(event.target.value),
+            onBlur: ()=>onCommit(draft),
+            onKeyDown: (event)=>{
+                if (event.key === "Enter") onCommit(draft);
+                else if (event.key === "Escape") onCancel();
+            }
+        })
+    }));
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- editor: "select" -- double-click opens seed's own Select, auto-opened (seed's
+//    `SelectRoot` takes `defaultOpen` directly -- unlike crisp's closed-API `Select`,
+//    which needs a synthetic click on its own trigger to start open). -------------
+function SelectEditor({ column, value, pending, onCommit, onCancel }) {
+    const options = column.options ?? [];
+    const current = value == null ? "" : String(value);
+    return /*#__PURE__*/ jsxs(SelectRoot, {
+        // Controlled open, per docs/examples/react/select/controlled-open.tsx --
+        // this editor is only ever mounted while the cell IS editing, so it always
+        // wants to start (and stay) open; `onOpenChange(false)` is what tells us
+        // the popover wants to close for ANY reason (Escape, an outside click, OR
+        // the internal auto-close a single-select commit already triggers), so
+        // `onCancel` alone now covers the Escape gap the old raw `document`
+        // listener existed for, without a second, independent listener.
+        open: true,
+        onOpenChange: (next)=>{
+            if (!next) onCancel();
+        },
+        disabled: pending,
+        value: current ? [
+            current
+        ] : [],
+        onValueChange: (next)=>onCommit(next[0] ?? ""),
+        children: [
+            /*#__PURE__*/ jsxs(SelectTrigger, {
+                "aria-label": `Edit ${column.key}`,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {}),
+                    /*#__PURE__*/ jsx(SelectPlaceholder, {
+                        children: "Select…"
+                    }),
+                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
+                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(SelectPositioner, {
+                children: /*#__PURE__*/ jsx(SelectContent, {
+                    children: /*#__PURE__*/ jsx(SelectScrollArea, {
+                        children: options.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
+                                value: option.value,
+                                label: option.label,
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectItemBody, {
+                                        children: /*#__PURE__*/ jsx(SelectItemLabel, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectItemIndicator, {
+                                        selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
+                                    })
+                                ]
+                            }, option.value))
+                    })
+                })
+            })
+        ]
+    });
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- editor: "reference" / "actor" -- same picker, search-enabled, each option
+//    carrying a small avatar (a photo for a real one, a generic person glyph for
+//    none) -- `actor` is `reference` over people specifically (crisp's own #449/
+//    #432 `ReferenceCell` shape), so the two share one component; only the search
+//    placeholder differs. Seed's `Select` has no built-in search combobox (unlike
+//    crisp's own `Select`), so this filters `refOptions` itself against a small
+//    `TextField` rendered as the content's own first row. --------------------------
+function ReferenceEditor({ column, value, pending, onCommit, onCancel }) {
+    const [query, setQuery] = React.useState("");
+    const options = column.refOptions ?? [];
+    const filtered = query.trim() ? options.filter((option)=>option.label.toLowerCase().includes(query.trim().toLowerCase())) : options;
+    const current = value == null ? "" : String(value);
+    const isActor = column.editor === "actor";
+    return /*#__PURE__*/ jsxs(SelectRoot, {
+        // See `SelectEditor`'s own comment above -- same controlled-open wiring.
+        open: true,
+        onOpenChange: (next)=>{
+            if (!next) onCancel();
+        },
+        disabled: pending,
+        value: current ? [
+            current
+        ] : [],
+        onValueChange: (next)=>onCommit(next[0] ?? ""),
+        children: [
+            /*#__PURE__*/ jsxs(SelectTrigger, {
+                "aria-label": `Edit ${column.key}`,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {}),
+                    /*#__PURE__*/ jsx(SelectPlaceholder, {
+                        children: isActor ? "Assign…" : "Select…"
+                    }),
+                    /*#__PURE__*/ jsx(SelectSuffixIcon, {
+                        svg: /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(SelectPositioner, {
+                children: /*#__PURE__*/ jsxs(SelectContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(TextFieldRoot, {
+                            size: "medium",
+                            style: {
+                                margin: 4
+                            },
+                            onKeyDown: (event)=>{
+                                // The listbox's own typeahead/arrow handling lives on THIS field's
+                                // sibling items, not on the field itself -- stop everything except
+                                // Escape from also driving the listbox's own keyboard nav. Escape
+                                // itself needs no special-casing to "reach" anything any more: it's
+                                // SelectContent's own `DismissibleLayer` (Select.tsx) that closes the
+                                // listbox, and that dismissal is a document-level listener outside
+                                // this React subtree entirely -- a synthetic `stopPropagation` here
+                                // was never able to block it either way, so the controlled `open`
+                                // above (via `onOpenChange`) is what actually ends this cell's edit.
+                                if (event.key !== "Escape") event.stopPropagation();
+                            },
+                            children: /*#__PURE__*/ jsx(TextFieldInput, {
+                                autoFocus: true,
+                                "aria-label": isActor ? "Search people" : `Search ${column.key}`,
+                                placeholder: isActor ? "Search people…" : "Search…",
+                                value: query,
+                                onChange: (event)=>setQuery(event.target.value)
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(SelectScrollArea, {
+                            children: [
+                                filtered.length === 0 && /*#__PURE__*/ jsx("div", {
+                                    style: {
+                                        padding: "6px 12px",
+                                        opacity: 0.63,
+                                        fontSize: 13
+                                    },
+                                    children: isActor ? "No users" : "No results"
+                                }),
+                                filtered.map((option)=>/*#__PURE__*/ jsxs(SelectItem, {
+                                        value: option.value,
+                                        label: option.label,
+                                        children: [
+                                            /*#__PURE__*/ jsxs(SelectItemBody, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(ReferenceAvatar, {
+                                                        avatar: option.avatar
+                                                    }),
+                                                    /*#__PURE__*/ jsx(SelectItemLabel, {})
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItemIndicator, {
+                                                selected: /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {})
+                                            })
+                                        ]
+                                    }, option.value))
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function ReferenceAvatar({ avatar }) {
+    return /*#__PURE__*/ jsxs(AvatarRoot, {
+        size: "20",
+        children: [
+            avatar && /*#__PURE__*/ jsx(AvatarImage, {
+                src: avatar,
+                alt: ""
+            }),
+            /*#__PURE__*/ jsx(AvatarFallback, {
+                children: /*#__PURE__*/ jsx(IconPersonCircleLine_default, {})
+            })
+        ]
+    });
+}
+////////////////////////////////////////////////////////////////////////////////////
+// -- always-live editors: no double-click gate, no separate rest/edit state --
+//    interacting with the widget IS the commit gesture (crisp's own #453/#760/#761).
+function SwitchEditor({ column, value, pending, onCommit }) {
+    const checked = value === true || value === "true";
+    return /*#__PURE__*/ jsxs("span", {
+        className: "seed-data-table-edit-picker",
+        children: [
+            /*#__PURE__*/ jsxs(SwitchRoot, {
+                size: "16",
+                checked: checked,
+                disabled: pending,
+                onCheckedChange: (next)=>onCommit(String(next)),
+                children: [
+                    /*#__PURE__*/ jsx(SwitchControl, {
+                        children: /*#__PURE__*/ jsx(SwitchThumb, {})
+                    }),
+                    /*#__PURE__*/ jsx(SwitchHiddenInput, {
+                        "aria-label": `Edit ${column.key}`
+                    })
+                ]
+            }),
+            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
+        ]
+    });
+}
+function CheckboxEditor({ column, value, pending, onCommit }) {
+    const checked = value === true || value === "true";
+    return /*#__PURE__*/ jsxs("span", {
+        className: "seed-data-table-edit-picker",
+        children: [
+            /*#__PURE__*/ jsxs(CheckboxRoot, {
+                checked: checked,
+                disabled: pending,
+                onCheckedChange: (next)=>onCommit(String(next)),
+                children: [
+                    /*#__PURE__*/ jsx(CheckboxControl, {
+                        children: /*#__PURE__*/ jsx(CheckboxIndicator, {
+                            checked: CHECKBOX_CELL_CHECKED_ICON
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CheckboxHiddenInput, {
+                        "aria-label": `Edit ${column.key}`
+                    })
+                ]
+            }),
+            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
+        ]
+    });
+}
+function RatingEditor({ column, value, pending, onCommit }) {
+    const maxRating = column.maxRating ?? 5;
+    const rating = typeof value === "number" ? value : Number(value) || 0;
+    return /*#__PURE__*/ jsxs("span", {
+        className: "seed-data-table-edit-picker",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                role: "group",
+                "aria-label": `Edit ${column.key}`,
+                style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 2
+                },
+                children: Array.from({
+                    length: maxRating
+                }, (_, index)=>{
+                    const starValue = index + 1;
+                    return /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: pending,
+                        "aria-label": `Set ${starValue} out of ${maxRating}`,
+                        "aria-pressed": starValue <= rating,
+                        onClick: ()=>onCommit(String(starValue)),
+                        style: {
+                            border: "none",
+                            background: "none",
+                            padding: 0,
+                            cursor: "pointer",
+                            lineHeight: 0
+                        },
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: 16,
+                            height: 16,
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: RATING_STAR_D,
+                                fill: starValue <= rating ? RATING_FILLED : RATING_EMPTY
+                            })
+                        })
+                    }, index);
+                })
+            }),
+            pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
+        ]
+    });
+}
+
+// Row-narrowing for the toolbar's search box and each column's filter picker -- split
+// out of DataTable.tsx the way cells.tsx splits out cell-type rendering: both are a
+// self-contained, independently testable concern DataTable.tsx just calls, rather than
+// inline `.filter()`/`.sort()` calls piling up in the same component that also owns
+// markup.
+/**
+ * A column's `value(row)` if it supplies one, else the raw field at `column.key` --
+ * the single accessor sort/search/filter/export all read through
+ * (DATATABLE-ATTIO-SPEC.md's Column API), so a consumer only teaches the table how to
+ * read a value ONCE rather than once per feature.
+ */ function getColumnValue(column, row) {
+    return column.value ? column.value(row) : row[column.key];
+}
+/**
+ * Case-insensitive substring match against a row's stringified value -- crisp's own
+ * `applyFilters` "contains" semantics (`tabletoolbar.tsx`), reused here for the
+ * toolbar's single free-text query rather than a per-column condition. `null`/
+ * `undefined` never match a non-empty query -- there is no text to search.
+ */ function matchesSearch(value, query) {
+    if (!query) return true;
+    if (value == null) return false;
+    return String(value).toLowerCase().includes(query.toLowerCase());
+}
+/**
+ * A column's own filter predicate -- "is"/"is not" against a SET of checked values.
+ * One checked value reads as "is X", several as crisp's "is any of X, Y": the exact
+ * same predicate, just more values in the set (crisp's own `applyFilters`,
+ * `tabletoolbar.tsx`: `isanyof` is membership-in-`values`, `is`/`isnot` is equality --
+ * both compare the stringified value, case-insensitively, never a substring). An empty
+ * `values` (the picker is open, nothing checked yet) matches every row -- crisp's own
+ * `applyFilters` drops an operator with nothing to compare against from its "active"
+ * set the same way, rather than treating "nothing checked" as "match nothing".
+ */ function matchesFilter(value, filter) {
+    if (filter.values.length === 0) return true;
+    const text = value == null ? "" : String(value).toLowerCase();
+    const isIncluded = filter.values.some((candidate)=>candidate.toLowerCase() === text);
+    return filter.mode === "isnot" ? !isIncluded : isIncluded;
+}
+/**
+ * The toolbar's search query (an OR across `searchable` columns, matching GRC's own
+ * `useFilteredRows`) THEN every column's own filter (an AND across active filters,
+ * matching crisp's `applyFilters`) -- in that order, since a filter chip narrows what
+ * the search box already found, not the other way round. A column with no active
+ * filter (absent from `filters`, or present with an empty `values`) is skipped
+ * entirely rather than treated as "filter out everything".
+ */ function getVisibleRows(data, columns, query, filters) {
+    const searchableColumns = columns.filter((column)=>column.searchable);
+    const activeFilters = Object.entries(filters).filter(([, filter])=>filter.values.length > 0);
+    if (!query && activeFilters.length === 0) return data;
+    return data.filter((row)=>{
+        if (query) {
+            const matchesQuery = searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query));
+            if (!matchesQuery) return false;
+        }
+        return activeFilters.every(([columnKey, filter])=>{
+            const column = columns.find((candidate)=>candidate.key === columnKey);
+            if (!column) return true;
+            return matchesFilter(getColumnValue(column, row), filter);
+        });
+    });
+}
+
+/** `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) {
+    if (!column.editable) return false;
+    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
+}
+function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
+    const effective = useEffectiveColumns(columns);
+    const { startEdit } = useDataTableContext();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: effective.map(({ column }, index)=>{
+            const isFirst = index === 0;
+            const isLast = index === effective.length - 1;
+            const sticky = stickyProps({
+                selectable,
+                stickyFirst,
+                stickyLast,
+                isSelectionCell: false,
+                isFirst,
+                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
+                })
+            }, column.key);
+        })
+    });
+}
+/**
+ * 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
+ * fall back to), then a gated editor while the cell is mid-edit, else the plain
+ * 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 }) {
+    const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
+    const rawValue = getColumnValue(column, row);
+    const pending = isPending(rowId, column.key);
+    const error = column.editable ? getEditError(rowId, column.key) : null;
+    const commit = (value)=>commitEdit(rowId, column.key, value);
+    const cancel = ()=>cancelEdit();
+    let node;
+    if (column.editable && column.editor === "switch") {
+        node = /*#__PURE__*/ jsx(SwitchEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit
+        });
+    } else if (column.editable && column.type === "rating") {
+        node = /*#__PURE__*/ jsx(RatingEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit
+        });
+    } else if (column.editable && column.type === "checkbox") {
+        node = /*#__PURE__*/ jsx(CheckboxEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit
+        });
+    } else if (column.editable && isEditing(rowId, column.key)) {
+        if (column.editor === "select") {
+            node = /*#__PURE__*/ jsx(SelectEditor, {
+                column: column,
+                value: resolveEditValue(column, row, rawValue),
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        } else if (column.editor === "reference" || column.editor === "actor") {
+            node = /*#__PURE__*/ jsx(ReferenceEditor, {
+                column: column,
+                value: resolveEditValue(column, row, rawValue),
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        } else if (column.cellType === "date" || column.cellType === "datetime") {
+            node = /*#__PURE__*/ jsx(DateEditor, {
+                column: column,
+                value: rawValue,
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        } else {
+            node = /*#__PURE__*/ jsx(TextEditor, {
+                column: column,
+                value: rawValue,
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        }
+    } else {
+        node = /*#__PURE__*/ jsx(DisplayCellContent, {
+            column: column,
+            row: row,
+            value: rawValue,
+            classNames: classNames,
+            locale: locale
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            node,
+            error && /*#__PURE__*/ jsx(EditError, {
+                message: error
+            })
+        ]
+    });
+}
+// The plain (non-editing) Attio cell-type renderer -- unchanged from before this
+// table grew inline editing, just renamed (it used to be the whole of `CellContent`)
+// since that name now belongs to the dispatcher above.
+function DisplayCellContent({ column, row, value, classNames, locale }) {
+    if (column.render) return /*#__PURE__*/ jsx(Fragment, {
+        children: column.render(row)
+    });
+    switch(column.type){
+        case "entity":
+            return /*#__PURE__*/ jsx(EntityCell, {
+                value: value,
+                className: classNames.entity,
+                nameClassName: classNames.entityName
+            });
+        case "url":
+        case "email":
+            return /*#__PURE__*/ jsx(LinkCell, {
+                column: column,
+                value: value,
+                className: classNames.link
+            });
+        case "tags":
+            return /*#__PURE__*/ jsx(TagsCell, {
+                value: value,
+                className: classNames.tagList
+            });
+        case "status":
+            return /*#__PURE__*/ jsx(StatusCell, {
+                value: value
+            });
+        case "number":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatNumberCell(value, locale)
+            });
+        case "currency":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatCurrencyCell(value, column.symbol ?? "$", locale)
+            });
+        case "date":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatDateCell(value, locale)
+            });
+        case "datetime":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatDateTimeCell(value, locale)
+            });
+        case "rating":
+            return /*#__PURE__*/ jsx(RatingCell, {
+                value: value,
+                maxRating: column.maxRating
+            });
+        case "checkbox":
+            return /*#__PURE__*/ jsx(CheckboxCell, {
+                value: value
+            });
+        default:
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: value == null ? null : String(value)
+            });
+    }
+}
+
+const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$2, useClassNames: useClassNames$1 } = createSlotRecipeContext(menu);
+const { PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, ClassNamesProvider: ItemClassNamesProvider } = createSlotRecipeContext(menuItem);
+const withStateProps = createWithStateProps([
+    useMenuContext
+]);
+const withItemStateProps = createWithStateProps([
+    useMenuItemContext
+]);
+const MenuRoot = (props)=>{
+    const [variantProps, otherProps] = menu.splitVariantProps(props);
+    const classNames = menu(variantProps);
+    return /*#__PURE__*/ jsx(ClassNamesProvider$1, {
+        value: classNames,
+        children: /*#__PURE__*/ jsx(ItemPropsProvider, {
+            value: {
+                size: variantProps.size
+            },
+            children: /*#__PURE__*/ jsx(Menu.Root, {
+                ...otherProps
+            })
+        })
+    });
+};
+Menu.Anchor;
+const MenuTrigger = Menu.Trigger;
+const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const classNames = useClassNames$1();
+    return /*#__PURE__*/ jsx(Menu.Positioner, {
+        ref: ref,
+        className: clsx(classNames.positioner, className),
+        ...props
+    });
+});
+MenuPositioner.displayName = "MenuPositioner";
+const MenuContent = withContext$2(Menu.Content, "content");
+const MenuScrollArea = withContext$2(withStateProps(Primitive.div), "scrollArea");
+withContext$2(Menu.Group, "group");
+withContext$2(Menu.GroupLabel, "groupLabel");
+const MenuItem = /*#__PURE__*/ React.forwardRef(({ className: propClassName, ...props }, ref)=>{
+    const [variantProps, otherProps] = menuItem.splitVariantProps(props);
+    const parentProps = useItemProps();
+    const classNames = menuItem({
+        ...parentProps,
+        ...variantProps
+    });
+    return /*#__PURE__*/ jsx(ItemClassNamesProvider, {
+        value: classNames,
+        children: /*#__PURE__*/ jsx(Menu.Item, {
+            ref: ref,
+            className: clsx(classNames.root, propClassName),
+            ...otherProps
+        })
+    });
+});
+MenuItem.displayName = "MenuItem";
+withItemContext(withItemStateProps(Primitive.div), "body");
+const MenuItemLabel = withItemContext(withItemStateProps(Primitive.span), "label");
+withItemContext(withItemStateProps(Primitive.span), "description");
+
+function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast }) {
+    const effective = useEffectiveColumns(columns);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: effective.map(({ column }, index)=>{
+            const isFirst = index === 0;
+            const isLast = index === effective.length - 1;
+            const sticky = stickyProps({
+                selectable,
+                stickyFirst,
+                stickyLast,
+                isSelectionCell: false,
+                isFirst,
+                isLast
+            });
+            return /*#__PURE__*/ jsx(DataTableFooterCell, {
+                "data-sticky": sticky["data-sticky"],
+                "data-sticky-edge": sticky["data-sticky-edge"],
+                "data-sticky-edge-end": sticky["data-sticky-edge-end"],
+                style: sticky.style,
+                children: column.summary && /*#__PURE__*/ jsx(ColumnCalcCell, {
+                    column: column,
+                    rows: rows,
+                    numeric: column.type === "number" || column.type === "currency",
+                    align: column.type === "number" || column.type === "currency" ? "right" : "left"
+                })
+            }, column.key);
+        })
+    });
+}
+function formatCalcValue(value) {
+    return value.toLocaleString(undefined, {
+        maximumFractionDigits: 2
+    });
+}
+/**
+ * One ColumnCalc footer cell -- a click-anywhere-in-the-cell trigger (crisp's own
+ * measured 246x36 hit target, `columncalc.recipe.ts`) that reads "Add calculation"
+ * until an op is picked, then shows the computed value with its operation name beside
+ * it. The math itself (`computeColumnCalc`) is headless and independently tested;
+ * this component only resolves this column's own values and renders.
+ */ function ColumnCalcCell({ column, rows, numeric, align }) {
+    const { getColumnCalcOp, setColumnCalcOp } = useDataTableContext();
+    const op = getColumnCalcOp(column.key) ?? column.summaryDefaultOp;
+    const values = React.useMemo(()=>rows.map((row)=>getColumnValue(column, row)), [
+        rows,
+        column
+    ]);
+    const result = React.useMemo(()=>op ? computeColumnCalc(values, op) : null, [
+        values,
+        op
+    ]);
+    const ops = [
+        ...DATA_TABLE_UNIVERSAL_CALC_OPS,
+        ...numeric ? DATA_TABLE_NUMERIC_CALC_OPS : []
+    ];
+    return /*#__PURE__*/ jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsx(MenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: "seed-data-table-column-calc-trigger",
+                    "data-align": align === "right" ? "right" : undefined,
+                    children: op && result !== null ? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "seed-data-table-column-calc-value",
+                                children: formatCalcValue(result)
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "seed-data-table-column-calc-op",
+                                children: DATA_TABLE_CALC_LABEL[op]
+                            }),
+                            /*#__PURE__*/ jsx(IconChevronDownLine_default, {
+                                size: 14
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx("span", {
+                        className: "seed-data-table-column-calc-placeholder",
+                        children: "Add calculation"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsx(MenuContent, {
+                    style: {
+                        minWidth: 160
+                    },
+                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
+                        children: [
+                            ops.map((candidate)=>/*#__PURE__*/ jsx(MenuItem, {
+                                    onClick: ()=>setColumnCalcOp(column.key, candidate),
+                                    children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                        children: DATA_TABLE_CALC_LABEL[candidate]
+                                    })
+                                }, candidate)),
+                            op && /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>setColumnCalcOp(column.key, undefined),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Clear"
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
+const { withProvider, withContext: withContext$1 } = createSlotRecipeContext(segmentedControl);
+const SegmentedControlRoot = withProvider(SegmentedControl.Root, "root");
+const SegmentedControlIndicator = withContext$1(Primitive.div, "indicator");
+const SegmentedControlItem = withContext$1(SegmentedControl.Item, "item");
+const SegmentedControlItemHiddenInput = SegmentedControl.ItemHiddenInput;
+
+/**
+ * The column-edge resize grip -- geometry ported from crisp's `resizablepanel`
+ * recipe's "column" variant (`resizablepanel.recipe.ts`): a 7px hit target straddling
+ * the 1px grid line (not a 1px target of its own -- far too thin to reliably grab),
+ * its 3px inner bar invisible at rest and brand-solid on hover/drag. Uses native
+ * Pointer Capture (`setPointerCapture`) rather than a `window`-level listener pair:
+ * once captured, this SAME element keeps receiving `pointermove`/`pointerup` even
+ * after the cursor leaves it, so the drag math can live entirely in this one
+ * handler set with no effect/cleanup to get wrong.
+ */ function ColumnResizeHandle({ columnKey, width }) {
+    const { beginColumnResize, updateColumnResize, endColumnResize, isColumnResizing } = useDataTableContext();
+    return /*#__PURE__*/ jsx("span", {
+        // Mouse/pointer-drag only for now (no keyboard equivalent yet) -- `aria-hidden`
+        // rather than `role="separator"` + `aria-label`, which would otherwise fold
+        // "Resize column" into the OWNING header cell's own accessible name (a
+        // columnheader's name is the concatenation of its own text plus every
+        // descendant's), turning "Name" into "Name Resize column" for anyone using an
+        // accessible-name query -- including this file's own tests.
+        "aria-hidden": "true",
+        className: "seed-data-table-resize-handle",
+        "data-resizing": isColumnResizing(columnKey),
+        draggable: false,
+        onPointerDown: (event)=>{
+            event.stopPropagation();
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            const startWidth = width ?? event.currentTarget.closest('[role="columnheader"]')?.getBoundingClientRect().width ?? 150;
+            beginColumnResize(columnKey, event.clientX, startWidth);
+        },
+        onPointerMove: (event)=>{
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                updateColumnResize(event.clientX);
+            }
+        },
+        onPointerUp: (event)=>{
+            event.currentTarget.releasePointerCapture(event.pointerId);
+            endColumnResize();
+        },
+        children: /*#__PURE__*/ jsx("span", {
+            className: "seed-data-table-resize-handle-inner"
+        })
+    });
+}
+
+// Same fix as cells.tsx's `CheckboxCell`/editors.tsx's `CheckboxEditor` -- seed's
+// `CheckboxIndicator` needs a real icon for its `checked` prop (it renders exactly
+// what's passed there, nothing automatically); `checked={null}` here used to render an
+// empty box even once a value was actually checked. 12px, matching the row-selection
+// checkbox's own already-correct icon size (`DataTable.tsx`'s `SELECTION_ICON_SIZE`).
+const FILTER_CHECKED_ICON = /*#__PURE__*/ jsx(IconCheckmarkLine_default, {
+    size: 12
+});
+// Fix (bug report): karrot icons default to a 24px intrinsic `width`/`height`
+// SVG ATTRIBUTE (not CSS) -- inside a fixed 16px `headerCellIcon` box (a flex
+// item), flexbox only auto-shrinks the MAIN axis (width) to fit, leaving the
+// CROSS axis (height) at its full 24px intrinsic size, so the glyph rendered
+// visibly oversized/non-square and spilled out of its slot (measured live:
+// 16×24, not 16×16). Passing `size` sets both attributes directly, sidestepping
+// the mismatch entirely rather than fighting it with more CSS. Matches crisp's
+// own measured `.crisp-datatable-chevron` size (14px).
+const SORT_ICON_SIZE = 14;
+const DEFAULT_SORT_ICON = {
+    idle: /*#__PURE__*/ jsx(IconChevronDownLine_default, {
+        size: SORT_ICON_SIZE
+    }),
+    asc: /*#__PURE__*/ jsx(IconChevronUpLine_default, {
+        size: SORT_ICON_SIZE
+    }),
+    desc: /*#__PURE__*/ jsx(IconChevronDownLine_default, {
+        size: SORT_ICON_SIZE
+    })
+};
+/**
+ * Rendered for EVERY sortable column, sorted or not -- unlike a naive "only show the
+ * active column's arrow", Attio reveals a neutral chevron on ANY sortable header on
+ * hover (`data-chevron`'s own CSS in `data-table.ts` owns the opacity: 0 at rest, 0.6
+ * on header hover, 1 + full foreground once sorted). Conditionally rendering only the
+ * sorted state, the way this component used to, has nothing for that hover state to
+ * reveal.
+ */ function SortIndicator({ columnKey, icon }) {
+    const { sort } = useDataTableContext();
+    const isSorted = sort?.key === columnKey;
+    const resolved = isSorted ? sort?.dir === "asc" ? icon?.asc ?? DEFAULT_SORT_ICON.asc : icon?.desc ?? DEFAULT_SORT_ICON.desc : icon?.idle ?? DEFAULT_SORT_ICON.idle;
+    return /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
+        "aria-hidden": true,
+        "data-chevron": "",
+        draggable: false,
+        children: resolved
+    });
+}
+/** Attio's own condition word: "Is"/"Is not" alone with zero or one value checked,
+ *  "Is any of"/"Is not any of" once a second value joins the set -- the underlying
+ *  predicate never changes (`useDataTableFilter.ts`'s own comment: membership in a
+ *  set of one IS "is X"), only the word describing it does. */ function filterConditionLabel(mode, hasMultipleValues) {
+    if (mode === "isnot") return hasMultipleValues ? "Is not any of" : "Is not";
+    return hasMultipleValues ? "Is any of" : "Is";
+}
+/**
+ * A column's "is / is not / is any of" checkbox filter picker (DATATABLE-ATTIO-
+ * SPEC.md's Feature contract), Attio's own chrome: a two-way condition control above a
+ * checkbox value list, both built from seed's own documented components -- `Menu` for
+ * the popover shell (`MenuRoot`/`Trigger`/`Positioner`/`Content`, unchanged), seed's
+ * `SegmentedControl` (docs/content/react/components/segmented-control.mdx) for the
+ * is/is-not toggle in place of the two hand-styled buttons (hardcoded hex, no seed
+ * token) this used to be, and plain `<label>` + `CheckboxRoot` rows for the value
+ * list -- NOT `MenuItem` there either: `MenuItem`'s own `getItemProps` (`useMenu.ts`)
+ * closes the menu unconditionally after every click, which is correct for a normal
+ * command menu but would close this ENTIRE popover after a single condition pick or a
+ * single checked value -- exactly wrong for a control meant to stay open while the
+ * condition changes and several boxes get checked. `SegmentedControl` has no such
+ * auto-close (it's a plain controlled radio group, not a menu), which is exactly why
+ * it -- not `MenuItem` -- is the documented component that fits here.
+ */ function FilterMenu({ column }) {
+    const { filters, toggleFilterValue, setFilterMode } = useDataTableContext();
+    const values = column.filterValues ?? [];
+    const current = filters[column.key];
+    const mode = current?.mode ?? "is";
+    const checkedValues = current?.values ?? [];
+    const hasMultipleValues = checkedValues.length > 1;
+    const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    // A filter trigger lives INSIDE a (possibly sortable) header cell, whose own
+    // onClick/onKeyDown toggle sort -- stop the event here so opening the filter
+    // picker never also reorders the rows out from under it.
+    const stopPropagation = (event)=>event.stopPropagation();
+    return /*#__PURE__*/ jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
+                asChild: true,
+                onClick: stopPropagation,
+                onKeyDown: stopPropagation,
+                draggable: false,
+                children: /*#__PURE__*/ jsx(MenuTrigger, {
+                    "aria-label": `Filter ${columnLabel}`,
+                    "data-active": dataAttr(checkedValues.length > 0),
+                    children: /*#__PURE__*/ jsx(IconSlider2HorizontalLine_default, {
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsx(MenuContent, {
+                    style: {
+                        minWidth: 180
+                    },
+                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    padding: "0 8px"
+                                },
+                                children: /*#__PURE__*/ jsxs(SegmentedControlRoot, {
+                                    "aria-label": `${columnLabel} filter condition`,
+                                    value: mode,
+                                    onValueChange: (next)=>setFilterMode(column.key, next),
+                                    style: {
+                                        width: "100%"
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsxs(SegmentedControlItem, {
+                                            value: "is",
+                                            children: [
+                                                /*#__PURE__*/ jsx(SegmentedControlItemHiddenInput, {}),
+                                                filterConditionLabel("is", hasMultipleValues)
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(SegmentedControlItem, {
+                                            value: "isnot",
+                                            children: [
+                                                /*#__PURE__*/ jsx(SegmentedControlItemHiddenInput, {}),
+                                                filterConditionLabel("isnot", hasMultipleValues)
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(SegmentedControlIndicator, {})
+                                    ]
+                                })
+                            }),
+                            values.map((value)=>// `CheckboxRoot` is ALREADY a `<label>` (`Checkbox.tsx`'s own
+                                // `Primitive.label`) wrapping the hidden input + `CheckboxLabel` text --
+                                // wrapping it in a SECOND `<label>` here used to nest one label inside
+                                // another, which is invalid HTML and made a click on the row's own text
+                                // reach the checkbox's native activation twice (once via each label),
+                                // toggling it on then immediately back off. `CheckboxRoot` takes the
+                                // row's own layout via `style` directly instead.
+                                /*#__PURE__*/ jsxs(CheckboxRoot, {
+                                    checked: checkedValues.includes(value),
+                                    onCheckedChange: ()=>toggleFilterValue(column.key, value),
+                                    style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "4px 8px",
+                                        cursor: "pointer"
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx(CheckboxControl, {
+                                            children: /*#__PURE__*/ jsx(CheckboxIndicator, {
+                                                checked: FILTER_CHECKED_ICON
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(CheckboxLabel, {
+                                            children: value
+                                        }),
+                                        /*#__PURE__*/ jsx(CheckboxHiddenInput, {
+                                            "aria-label": value
+                                        })
+                                    ]
+                                }, value))
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+/** Every header cell, in the effective (ordered, visible) order -- a standalone
+ *  component (not inlined in `DataTableInner`'s render) so it alone re-renders when
+ *  `visibleColumnOrder`/labels/widths change, without also re-deriving `sortedData`'s
+ *  render above it. */ function ColumnHeaderCells({ columns, columnMenu, reorderable, resizable, sortIcon, selectable, stickyFirst, stickyLast }) {
+    const { draggingColumnKey, beginColumnDrag, dragOverColumn, endColumnDrag } = useDataTableContext();
+    const effective = useEffectiveColumns(columns);
+    const [renamingKey, setRenamingKey] = React.useState(null);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: effective.map(({ column, label, width }, index)=>{
+            const isFirst = index === 0;
+            const isLast = index === effective.length - 1;
+            const sticky = stickyProps({
+                selectable,
+                stickyFirst,
+                stickyLast,
+                isSelectionCell: false,
+                isFirst,
+                isLast
+            });
+            return /*#__PURE__*/ jsxs(DataTableHeaderCell, {
+                columnKey: column.key,
+                sortable: column.sortable,
+                "data-column-key": column.key,
+                draggable: reorderable && renamingKey !== column.key,
+                onDragStart: (event)=>{
+                    event.dataTransfer.effectAllowed = "move";
+                    beginColumnDrag(column.key);
+                },
+                onDragOver: (event)=>{
+                    event.preventDefault();
+                    if (draggingColumnKey && draggingColumnKey !== column.key) dragOverColumn(column.key);
+                },
+                onDrop: (event)=>event.preventDefault(),
+                onDragEnd: endColumnDrag,
+                "data-dragging": dataAttr(draggingColumnKey === column.key),
+                style: sticky.style,
+                "data-sticky": sticky["data-sticky"],
+                "data-sticky-edge": sticky["data-sticky-edge"],
+                "data-sticky-edge-end": sticky["data-sticky-edge-end"],
+                children: [
+                    /*#__PURE__*/ jsx(DataTableHeaderCellInner, {
+                        children: renamingKey === column.key ? /*#__PURE__*/ jsx(ColumnRenameInput, {
+                            column: column,
+                            initialLabel: typeof label === "string" ? label : column.key,
+                            onDone: ()=>setRenamingKey(null)
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(DataTableHeaderCellLabel, {
+                                    children: label
+                                }),
+                                column.filterValues && column.filterValues.length > 0 && /*#__PURE__*/ jsx(FilterMenu, {
+                                    column: column
+                                }),
+                                column.sortable && /*#__PURE__*/ jsx(SortIndicator, {
+                                    columnKey: column.key,
+                                    icon: sortIcon
+                                }),
+                                columnMenu && /*#__PURE__*/ jsx(ColumnMenu, {
+                                    column: column,
+                                    onRename: ()=>setRenamingKey(column.key)
+                                })
+                            ]
+                        })
+                    }),
+                    resizable && column.resizable !== false && /*#__PURE__*/ jsx(ColumnResizeHandle, {
+                        columnKey: column.key,
+                        width: width
+                    })
+                ]
+            }, column.key);
+        })
+    });
+}
+function ColumnRenameInput({ column, initialLabel, onDone }) {
+    const { renameColumn } = useDataTableContext();
+    const [value, setValue] = React.useState(initialLabel);
+    // Opening this input is ITSELF the result of clicking a `MenuItem` -- the menu's own
+    // close (which happens on that same click) restores focus to its trigger a beat
+    // later, and that focus move fires as a `blur` on this input the instant it mounts
+    // with `autoFocus`. Committing on THAT blur would silently re-close the editor
+    // before anyone saw it (found writing this file's own rename test, which failed
+    // with the header reverting to its plain label with no visible input in between).
+    // `ready` flips true one frame after mount, so only a blur after that -- an actual
+    // click/tab away -- commits.
+    const readyRef = React.useRef(false);
+    const inputRef = React.useRef(null);
+    React.useEffect(()=>{
+        // The menu's close restores focus to its trigger one frame after this input
+        // mounts, stealing focus from `autoFocus`. Re-grab it in the SAME frame (after
+        // the restore) and select the text, so the user can type/replace immediately.
+        const frame = requestAnimationFrame(()=>{
+            readyRef.current = true;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        });
+        return ()=>cancelAnimationFrame(frame);
+    }, []);
+    const commit = ()=>{
+        if (value.trim()) renameColumn(column.key, value.trim());
+        onDone();
+    };
+    return(// A bare, minimal input -- NOT seed's `TextField` (its labeled root measures
+    // ~52px tall, per DATATABLE-ATTIO-SPEC.md's own note; this has to fit a 40px
+    // header cell with no label/description chrome of its own). Seed has no lighter
+    // input primitive at this level, so this follows crisp's own measured
+    // `.crisp-datatable-th-rename` (`datatable.recipe.ts`) instead: full-width,
+    // header-row height, a small inset, no border (an inset brand-solid box-shadow
+    // stands in for a focus ring), the header's own font weight/size inherited
+    // rather than a new size introduced for one input.
+    /*#__PURE__*/ jsx("input", {
+        ref: inputRef,
+        // biome-ignore lint/a11y/noAutofocus: opening this input IS the user's own click a moment earlier (crisp's `.crisp-datatable-th-rename` does the same), not an unannounced page-load autofocus.
+        autoFocus: true,
+        "aria-label": `Rename ${initialLabel}`,
+        value: value,
+        onClick: (event)=>event.stopPropagation(),
+        onChange: (event)=>setValue(event.target.value),
+        onBlur: ()=>{
+            if (readyRef.current) commit();
+        },
+        onKeyDown: (event)=>{
+            event.stopPropagation();
+            if (event.key === "Enter") commit();
+            if (event.key === "Escape") onDone();
+        },
+        // Bare inline input: no border/ring/background/radius -- it reads as the
+        // header label made editable in place, not a boxed field.
+        style: {
+            width: "100%",
+            minWidth: 0,
+            height: "100%",
+            margin: 0,
+            padding: 0,
+            border: "none",
+            borderRadius: 0,
+            background: "transparent",
+            boxShadow: "none",
+            font: "inherit",
+            fontWeight: "var(--seed-font-weight-medium)",
+            color: "var(--seed-color-fg-neutral)",
+            outline: "none"
+        }
+    }));
+}
+/** The per-column header menu (rename / hide / move left / move right) -- seed
+ *  `Menu`, opened from the same `headerCellIcon` slot the filter trigger and sort
+ *  chevron already share. Hover/focus-reveal (`data-column-menu`'s own CSS in
+ *  `data-table.ts`) -- crisp's own header shows the trigger only on hover, not
+ *  permanently, so this one carries its own marker attribute distinct from that
+ *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
+ *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
+    const { moveColumn, hideColumn } = useDataTableContext();
+    const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    const stopPropagation = (event)=>event.stopPropagation();
+    return /*#__PURE__*/ jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsx(DataTableHeaderCellIcon, {
+                asChild: true,
+                "data-column-menu": "",
+                onClick: stopPropagation,
+                onKeyDown: stopPropagation,
+                draggable: false,
+                children: /*#__PURE__*/ jsx(MenuTrigger, {
+                    "aria-label": `${columnLabel} column menu`,
+                    children: /*#__PURE__*/ jsx(IconDot3HorizontalLine_default, {
+                        size: 16
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsx(MenuContent, {
+                    style: {
+                        minWidth: 160
+                    },
+                    children: /*#__PURE__*/ jsxs(MenuScrollArea, {
+                        children: [
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: onRename,
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Rename"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>moveColumn(column.key, "left"),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Move left"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>moveColumn(column.key, "right"),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Move right"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>hideColumn(column.key),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: "Hide column"
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
+__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__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{flex:1 1 0%;max-width:280px}.seed-data-table__count{flex-shrink:0;margin-inline-start:auto;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.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);
+    const variantValues = variantKeys.map((key)=>variants[key]);
+    const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
+    const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
+            return `${key}_${compoundVariant[key]}`;
+        }).join("-")}`).join(" ");
+    return [
+        className,
+        variantClassName,
+        compountVariantClassName
+    ].filter(Boolean).join(" ");
+};
+function mergeVariants(a, b) {
+    const result = {
+        ...a
+    };
+    for(const k in b){
+        if (b[k] != null) {
+            result[k] = b[k];
+        }
+    }
+    return result;
+}
+function splitVariantProps(props, variantMap) {
+    const variantProps = {};
+    const otherProps = {};
+    for(const key in props){
+        if (variantMap[key] != null) {
+            variantProps[key] = props[key];
+        } else {
+            otherProps[key] = props[key];
+        }
+    }
+    return [
+        variantProps,
+        otherProps
+    ];
+}
+
+const dataTableSlotNames = [
+    [
+        "root",
+        "seed-data-table__root"
+    ],
+    [
+        "table",
+        "seed-data-table__table"
+    ],
+    [
+        "header",
+        "seed-data-table__header"
+    ],
+    [
+        "headerCell",
+        "seed-data-table__headerCell"
+    ],
+    [
+        "headerCellInner",
+        "seed-data-table__headerCellInner"
+    ],
+    [
+        "headerCellLabel",
+        "seed-data-table__headerCellLabel"
+    ],
+    [
+        "headerCellIcon",
+        "seed-data-table__headerCellIcon"
+    ],
+    [
+        "row",
+        "seed-data-table__row"
+    ],
+    [
+        "cell",
+        "seed-data-table__cell"
+    ],
+    [
+        "entity",
+        "seed-data-table__entity"
+    ],
+    [
+        "entityName",
+        "seed-data-table__entityName"
+    ],
+    [
+        "tagList",
+        "seed-data-table__tagList"
+    ],
+    [
+        "link",
+        "seed-data-table__link"
+    ],
+    [
+        "toolbar",
+        "seed-data-table__toolbar"
+    ],
+    [
+        "search",
+        "seed-data-table__search"
+    ],
+    [
+        "count",
+        "seed-data-table__count"
+    ],
+    [
+        "scrollArea",
+        "seed-data-table__scrollArea"
+    ],
+    [
+        "footer",
+        "seed-data-table__footer"
+    ],
+    [
+        "footerCell",
+        "seed-data-table__footerCell"
+    ],
+    [
+        "emptyState",
+        "seed-data-table__emptyState"
+    ],
+    [
+        "loadingState",
+        "seed-data-table__loadingState"
+    ],
+    [
+        "addRow",
+        "seed-data-table__addRow"
+    ],
+    [
+        "addRowCell",
+        "seed-data-table__addRowCell"
+    ],
+    [
+        "selectionCell",
+        "seed-data-table__selectionCell"
+    ]
+];
+const defaultVariant = {
+    "surface": "card",
+    "interactive": false
+};
+const compoundVariants = [];
+const dataTableVariantMap = {
+    "surface": [
+        "card",
+        "bleed"
+    ],
+    "interactive": [
+        true,
+        false
+    ]
+};
+function dataTable(props) {
+    return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
+        return [
+            slot,
+            createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
+        ];
+    }));
+}
+Object.assign(dataTable, {
+    splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
+}); // @recipe(seed): data-table
+
+// The one `createSlotRecipeContext(dataTable)` call every sibling file in this
+// directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
+// binding everywhere (a slot component built from a second, independent call would
+// read a DIFFERENT React context and never see the classNames `DataTableInner`
+// provides), so this is the one place that calls `createSlotRecipeContext`, and every
+// 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, withContext, useClassNames } = createSlotRecipeContext(dataTable);
+
+/**
+ * A small inline spinner, not seed's own `ProgressCircle` -- that component's
+ * smallest size (24px) is already bigger than crisp's own measured 16px loading
+ * icon, the same gap `editors.tsx`'s `EditPendingIndicator` already works around for
+ * its own (smaller still, 14px) in-cell pending spinner. Same shape, one size up,
+ * reusing the SAME global `rotate` keyframe (this file's own qvism recipe slot
+ * nests `.seed-data-table-loading-spinner` under it) rather than a third near-
+ * identical spinner.
+ */ function LoadingSpinner() {
+    return /*#__PURE__*/ jsxs("svg", {
+        className: "seed-data-table-loading-spinner",
+        width: 16,
+        height: 16,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        role: "presentation",
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                cx: 8,
+                cy: 8,
+                r: 6.5,
+                stroke: "currentColor",
+                strokeOpacity: 0.25,
+                strokeWidth: 2
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+/** The full-body empty/error row's own content -- one `<tr>`/`<td colSpan>` wrapping
+ *  this, rendered by `DataTable.tsx` itself (it already owns `totalCols`). Shared by
+ *  `empty` and `error` alike, matching crisp's own single `.crisp-datatable-empty`
+ *  class doing double duty for both. */ function EmptyStateContent({ children, classNames }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: classNames.emptyState,
+        children: children
+    });
+}
+/** The full-body loading row's own content (spinner + `loadingLabel`). */ function LoadingStateContent({ label, classNames }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classNames.loadingState,
+        children: [
+            /*#__PURE__*/ jsx(LoadingSpinner, {}),
+            label
+        ]
+    });
+}
+/**
+ * Infinite scroll's own sentinel + "loading more" row -- the LAST child of
+ * `<tbody>` while `hasMore` (the headless `useDataTableInfiniteScroll`'s own
+ * return, read off context the same way `SelectAllCheckbox` reads `selectionState`).
+ * Renders nothing once `hasMore` is false -- there is no manual pagination
+ * fallback, matching DATATABLE-ATTIO-SPEC.md's auto-load-only contract. While a
+ * fetch is in flight (`loadingMore`) the SAME row shows the compact spinner
+ * (`loadingState`'s own `[data-inline]` modifier, a normal 36px row); at rest it's
+ * an empty sentinel row the IntersectionObserver watches.
+ */ function InfiniteScrollRow({ colSpan, classNames, loadingLabel }) {
+    const { sentinelRef, hasMore, loadingMore } = useDataTableContext();
+    if (!hasMore) return null;
+    return /*#__PURE__*/ jsx("tr", {
+        ref: sentinelRef,
+        "aria-hidden": loadingMore ? undefined : "true",
+        children: /*#__PURE__*/ jsx(DataTableCell, {
+            colSpan: colSpan,
+            children: loadingMore && /*#__PURE__*/ jsxs("div", {
+                className: classNames.loadingState,
+                "data-inline": "",
+                children: [
+                    /*#__PURE__*/ jsx(LoadingSpinner, {}),
+                    loadingLabel
+                ]
+            })
+        })
+    });
+}
+/** The trailing "+ New" add-row footer -- crisp's own `.crisp-datatable-addrow`
+ *  inside a zero-padding `.crisp-datatable-addcell`, its own `<tfoot>` (a table can
+ *  have more than one; the ColumnCalc summary footer, when both are present, is a
+ *  separate one, matching crisp's own two independent `<TableFooter>` rows). */ function AddRowFooter({ onAddRow, addRowLabel, colSpan, classNames }) {
+    return /*#__PURE__*/ jsx("tfoot", {
+        children: /*#__PURE__*/ jsx("tr", {
+            children: /*#__PURE__*/ jsx("td", {
+                className: classNames.addRowCell,
+                colSpan: colSpan,
+                children: /*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    className: classNames.addRow,
+                    onClick: onAddRow,
+                    children: [
+                        /*#__PURE__*/ jsx(IconPlusLine_default, {
+                            size: 15
+                        }),
+                        addRowLabel
+                    ]
+                })
+            })
+        })
+    });
+}
+
+const DataTableToolbar = withContext(Primitive.div, "toolbar");
+const DataTableCount = withContext(Primitive.span, "count");
+/**
+ * Fix (recurring bug): the search box is seed's own DOCUMENTED `TextField`
+ * composition -- `TextFieldRoot` (`variant="outline" size="medium"`) +
+ * `TextFieldPrefixIcon` + `TextFieldInput`, exactly `docs/examples/react/
+ * text-field-input/prefix.tsx` -- not that same trio fought with a custom
+ * `classNames.search` overriding its height/padding/icon position with `!important`.
+ * That override (this file's own previous state) is what kept mis-placing the icon:
+ * every fix landed on ANOTHER property the override was still fighting (the icon's own
+ * intrinsic SVG size, its inherited margin, the root's own min-height beating a plain
+ * `height` override) because the override was never the right layer to fix it at.
+ * `size="medium"`'s built-in prefix-icon spacing (a flex `gap` + edge margins, not
+ * absolute positioning) is what `text-input.ts`'s own variant CSS already gets right,
+ * so it needs no help from this component at all -- `search` (recipe.ts) is now just
+ * this box's own layout constraint (`flex`, `max-width`) within the toolbar row, not
+ * its internal chrome.
+ */ function SearchBox({ placeholder, label }) {
+    const { query, setQuery } = useDataTableContext();
+    const classNames = dataTable();
+    return /*#__PURE__*/ jsxs(TextFieldRoot, {
+        variant: "outline",
+        size: "medium",
+        className: classNames.search,
+        children: [
+            /*#__PURE__*/ jsx(TextFieldPrefixIcon, {
+                svg: /*#__PURE__*/ jsx(IconMagnifyingglassLine_default, {})
+            }),
+            /*#__PURE__*/ jsx(TextFieldInput, {
+                type: "text",
+                value: query,
+                onChange: (event)=>setQuery(event.target.value),
+                placeholder: placeholder,
+                "aria-label": label
+            })
+        ]
+    });
+}
+/** crisp's own count format (`datatable.tsx`'s `resolvedCountLabel`): unfiltered reads
+ *  "N rows" ("N row" for exactly one), filtered/searched reads "N of M" with no
+ *  trailing word at all -- reproduced literally rather than reinvented, since this is
+ *  the one piece of copy DATATABLE-ATTIO-SPEC.md calls out by example. */ function defaultCountLabel(shown, total) {
+    if (shown === total) return `${total} ${total === 1 ? "row" : "rows"}`;
+    return `${shown} of ${total}`;
+}
+function RowCount({ shown, total, countLabel }) {
+    return /*#__PURE__*/ jsx(DataTableCount, {
+        children: (countLabel ?? defaultCountLabel)(shown, total)
+    });
+}
+
+function DataTableInner(props, ref) {
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", filters, defaultFilters, onFiltersChange, showCount = true, countLabel, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const classNames = dataTable({
+        surface,
+        interactive
+    });
+    // The batteries-included DataTable owns the sort state (controllable) so it
+    // can actually reorder `data` -- the headless primitive only tracks which
+    // column/direction is active. A consumer that pre-sorts server-side can pass
+    // a controlled `sort`; this still sorts the rows it's given, which for
+    // already-sorted data is a no-op.
+    const [internalSort, setInternalSort] = React.useState(defaultSort);
+    const resolvedSort = sort !== undefined ? sort : internalSort;
+    const handleSortChange = React.useCallback((next)=>{
+        if (sort === undefined) setInternalSort(next);
+        onSortChange?.(next);
+    }, [
+        sort,
+        onSortChange
+    ]);
+    // Same shape as sort just above -- the headless primitive only tracks the ACTIVE
+    // query/filter state (it never sees `TRow`), this component owns the controllable
+    // state that actually narrows `data` (`getVisibleRows`, ./filtering.ts).
+    const [internalQuery, setInternalQuery] = React.useState(defaultQuery ?? "");
+    const resolvedQuery = query !== undefined ? query : internalQuery;
+    const handleQueryChange = React.useCallback((next)=>{
+        if (query === undefined) setInternalQuery(next);
+        onQueryChange?.(next);
+    }, [
+        query,
+        onQueryChange
+    ]);
+    const [internalFilters, setInternalFilters] = React.useState(defaultFilters ?? {});
+    const resolvedFilters = filters !== undefined ? filters : internalFilters;
+    const handleFiltersChange = React.useCallback((next)=>{
+        if (filters === undefined) setInternalFilters(next);
+        onFiltersChange?.(next);
+    }, [
+        filters,
+        onFiltersChange
+    ]);
+    const visibleRows = React.useMemo(()=>getVisibleRows(data, columns, resolvedQuery, resolvedFilters), [
+        data,
+        columns,
+        resolvedQuery,
+        resolvedFilters
+    ]);
+    const sortedData = React.useMemo(()=>{
+        if (!resolvedSort) return visibleRows;
+        const column = columns.find((candidate)=>candidate.key === resolvedSort.key);
+        const factor = resolvedSort.dir === "asc" ? 1 : -1;
+        return [
+            ...visibleRows
+        ].sort((a, b)=>{
+            const av = column ? getColumnValue(column, a) : a[resolvedSort.key];
+            const bv = column ? getColumnValue(column, b) : b[resolvedSort.key];
+            if (av == null && bv == null) return 0;
+            if (av == null) return -factor;
+            if (bv == null) return factor;
+            if (typeof av === "number" && typeof bv === "number") return (av - bv) * factor;
+            return String(av).localeCompare(String(bv)) * factor;
+        });
+    }, [
+        visibleRows,
+        resolvedSort,
+        columns
+    ]);
+    const rowIds = React.useMemo(()=>sortedData.map((row)=>row.id), [
+        sortedData
+    ]);
+    const columnKeys = React.useMemo(()=>columns.map((column)=>column.key), [
+        columns
+    ]);
+    const searchable = React.useMemo(()=>columns.some((column)=>column.searchable), [
+        columns
+    ]);
+    const showToolbar = searchable || showCount;
+    const showFooter = columns.some((column)=>column.summary);
+    // crisp's own `totalCols` (`datatable.tsx`) -- every full-width spanning row (the
+    // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
+    // this ONE value rather than each re-deriving it, so they can never drift apart.
+    const totalCols = columns.length + (selectable ? 1 : 0);
+    return /*#__PURE__*/ jsx(ClassNamesProvider, {
+        value: classNames,
+        children: /*#__PURE__*/ jsxs(DataTableRoot, {
+            ref: ref,
+            className: clsx(classNames.root, className),
+            rowIds: rowIds,
+            selectable: selectable,
+            selectedIds: selectedIds,
+            defaultSelectedIds: defaultSelectedIds,
+            onSelectionChange: onSelectionChange,
+            sort: resolvedSort,
+            onSortChange: handleSortChange,
+            query: resolvedQuery,
+            onQueryChange: handleQueryChange,
+            filters: resolvedFilters,
+            onFiltersChange: handleFiltersChange,
+            columnKeys: columnKeys,
+            columnOrder: columnOrder,
+            defaultColumnOrder: defaultColumnOrder,
+            onColumnOrderChange: onColumnOrderChange,
+            hiddenColumnKeys: hiddenColumnKeys,
+            defaultHiddenColumnKeys: defaultHiddenColumnKeys,
+            onHiddenColumnKeysChange: onHiddenColumnKeysChange,
+            columnWidths: columnWidths,
+            defaultColumnWidths: defaultColumnWidths,
+            onColumnWidthsChange: onColumnWidthsChange,
+            columnLabels: columnLabels,
+            defaultColumnLabels: defaultColumnLabels,
+            onColumnLabelsChange: onColumnLabelsChange,
+            columnCalcOps: columnCalcOps,
+            defaultColumnCalcOps: defaultColumnCalcOps,
+            onColumnCalcOpsChange: onColumnCalcOpsChange,
+            onEdit: onEdit,
+            onLoadMore: onLoadMore,
+            hasMore: hasMore,
+            loadingMore: loadingMore,
+            ...restProps,
+            children: [
+                onColumnsChange && /*#__PURE__*/ jsx(ColumnsChangeEffect, {
+                    columns: columns,
+                    onColumnsChange: onColumnsChange
+                }),
+                showToolbar && /*#__PURE__*/ jsxs(DataTableToolbar, {
+                    children: [
+                        searchable && /*#__PURE__*/ jsx(SearchBox, {
+                            placeholder: searchPlaceholder,
+                            label: searchLabel
+                        }),
+                        showCount && /*#__PURE__*/ jsx(RowCount, {
+                            shown: sortedData.length,
+                            total: data.length,
+                            countLabel: countLabel
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(DataTableScrollBody, {
+                    scrollProps: scrollProps,
+                    children: /*#__PURE__*/ jsxs(DataTableTable, {
+                        children: [
+                            /*#__PURE__*/ jsx(DataTableColGroup, {
+                                columns: columns,
+                                selectable: !!selectable
+                            }),
+                            /*#__PURE__*/ jsxs(DataTableHeader, {
+                                children: [
+                                    selectable && /*#__PURE__*/ jsx(DataTableSelectionHeaderCell, {
+                                        ...stickyProps({
+                                            selectable,
+                                            stickyFirst,
+                                            stickyLast,
+                                            isSelectionCell: true,
+                                            isFirst: false,
+                                            isLast: false
+                                        }),
+                                        children: /*#__PURE__*/ jsx(SelectAllCheckbox, {
+                                            label: selectAllLabel,
+                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
+                                            indeterminateIcon: selectionIndeterminateIcon ?? DEFAULT_INDETERMINATE_ICON
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(ColumnHeaderCells, {
+                                        columns: columns,
+                                        columnMenu: columnMenu,
+                                        reorderable: reorderable,
+                                        resizable: resizable,
+                                        sortIcon: sortIcon,
+                                        selectable: !!selectable,
+                                        stickyFirst: stickyFirst,
+                                        stickyLast: stickyLast
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DataTableBody, {
+                                children: loading ? /*#__PURE__*/ jsx("tr", {
+                                    children: /*#__PURE__*/ jsx(DataTableCell, {
+                                        colSpan: totalCols,
+                                        children: /*#__PURE__*/ jsx(LoadingStateContent, {
+                                            label: loadingLabel,
+                                            classNames: classNames
+                                        })
+                                    })
+                                }) : error ? /*#__PURE__*/ jsx("tr", {
+                                    children: /*#__PURE__*/ jsx(DataTableCell, {
+                                        colSpan: totalCols,
+                                        children: /*#__PURE__*/ jsx(EmptyStateContent, {
+                                            classNames: classNames,
+                                            children: error
+                                        })
+                                    })
+                                }) : sortedData.length === 0 ? /*#__PURE__*/ jsx("tr", {
+                                    children: /*#__PURE__*/ jsx(DataTableCell, {
+                                        colSpan: totalCols,
+                                        children: /*#__PURE__*/ jsx(EmptyStateContent, {
+                                            classNames: classNames,
+                                            children: empty
+                                        })
+                                    })
+                                }) : /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        sortedData.map((row)=>/*#__PURE__*/ jsxs(DataTableRow, {
+                                                rowId: row.id,
+                                                "data-clickable": onRowClick ? "" : undefined,
+                                                onClick: onRowClick ? ()=>onRowClick(row) : undefined,
+                                                children: [
+                                                    selectable && /*#__PURE__*/ jsx(DataTableSelectionCell, {
+                                                        ...stickyProps({
+                                                            selectable,
+                                                            stickyFirst,
+                                                            stickyLast,
+                                                            isSelectionCell: true,
+                                                            isFirst: false,
+                                                            isLast: false
+                                                        }),
+                                                        children: /*#__PURE__*/ jsx(RowCheckbox, {
+                                                            label: getRowSelectionLabel(row),
+                                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsx(ColumnBodyCells, {
+                                                        columns: columns,
+                                                        row: row,
+                                                        classNames: classNames,
+                                                        locale: locale,
+                                                        selectable: !!selectable,
+                                                        stickyFirst: stickyFirst,
+                                                        stickyLast: stickyLast
+                                                    })
+                                                ]
+                                            }, row.id)),
+                                        onLoadMore && /*#__PURE__*/ jsx(InfiniteScrollRow, {
+                                            colSpan: totalCols,
+                                            classNames: classNames,
+                                            loadingLabel: loadingLabel
+                                        })
+                                    ]
+                                })
+                            }),
+                            showFooter && /*#__PURE__*/ jsxs(DataTableFooter, {
+                                children: [
+                                    selectable && // The 40px-wide selection SPACER cell is now a plain `DataTableFooterCell`
+                                    // (not the `selectionCell` slot) -- the `<colgroup>`'s own 40px `<col>`
+                                    // is what makes every row's selection column line up now, not a matching
+                                    // per-slot width formula, so there is no more reason for this cell to
+                                    // borrow a different slot than its footer siblings.
+                                    /*#__PURE__*/ jsx(DataTableFooterCell, {
+                                        ...stickyProps({
+                                            selectable,
+                                            stickyFirst,
+                                            stickyLast,
+                                            isSelectionCell: true,
+                                            isFirst: false,
+                                            isLast: false
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(ColumnCalcCells, {
+                                        columns: columns,
+                                        rows: sortedData,
+                                        selectable: !!selectable,
+                                        stickyFirst: stickyFirst,
+                                        stickyLast: stickyLast
+                                    })
+                                ]
+                            }),
+                            onAddRow && /*#__PURE__*/ jsx(AddRowFooter, {
+                                onAddRow: onAddRow,
+                                addRowLabel: addRowLabel,
+                                colSpan: totalCols,
+                                classNames: classNames
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+DataTableInner.displayName = "DataTable";
+/**
+ * @see https://seed-design.io/react/components/data-table
+ */ const DataTable = /*#__PURE__*/ forwardRef(DataTableInner);
+////////////////////////////////////////////////////////////////////////////////////
+/** Fires `onColumnsChange` with the effective (ordered, visible, relabelled) column
+ *  list whenever it actually changes -- a thin convenience over the four controllable
+ *  pairs (order/hidden/width/label), for a consumer that would rather persist "the
+ *  current column configuration" as one blob. A standalone component (not inlined in
+ *  `DataTableInner`) purely so it can call `useDataTableContext()` -- that context is
+ *  provided by the `DataTablePrimitiveRoot` this renders as a SIBLING of, one level
+ *  up from where `DataTableInner` itself sits. */ function ColumnsChangeEffect({ columns, onColumnsChange }) {
+    const effective = useEffectiveColumns(columns);
+    // A NEW array every time `effective` itself is a new array (its own `useMemo`
+    // recomputes only when order/hidden/label/width actually change) -- `header`
+    // resolves to the menu's rename override (falling back to the column's own static
+    // `header`) and `width` resolves to the live resize/consumer-set width (falling
+    // back to the column's own initial one), so this is genuinely "what's showing now",
+    // not the original static `columns` prop echoed back unchanged.
+    const resolvedColumns = React.useMemo(()=>effective.map(({ column, label, width })=>({
+                ...column,
+                header: label,
+                width
+            })), [
+        effective
+    ]);
+    React.useEffect(()=>{
+        onColumnsChange(resolvedColumns);
+    }, [
+        resolvedColumns,
+        onColumnsChange
+    ]);
+    return null;
+}
+////////////////////////////////////////////////////////////////////////////////////
+// The real `<table>` -- see react-headless's own `DataTableTable` comment for why this
+// 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(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
+ *  column-sizing), which is what makes them align -- no per-cell width style to drift
+ *  out of sync between the three. A column with no explicit width gets a bare `<col>`
+ *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
+ *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
+ *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable }) {
+    const effective = useEffectiveColumns(columns);
+    return /*#__PURE__*/ jsxs("colgroup", {
+        children: [
+            selectable && /*#__PURE__*/ jsx("col", {
+                style: {
+                    width: 40
+                }
+            }),
+            effective.map(({ column, width })=>/*#__PURE__*/ jsx("col", {
+                    style: width === undefined ? undefined : {
+                        width
+                    }
+                }, column.key))
+        ]
+    });
+}
+const DataTableHeader = withContext(DataTableHeader$1, "header");
+const DataTableHeaderCell = withContext(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(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(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 --
+ * so the checkbox column still inherits every shared table-wide rule (sticky header,
+ * sticky footer, height, borders) for free instead of a second, independent copy of
+ * them under a slot of its own. `useClassNames()` reads the SAME classNames object
+ * `ClassNamesProvider` (below, in `DataTableInner`) already put in context; this isn't
+ * a second recipe call.
+ */ function withSelectionCell(Component, baseSlot) {
+    const StyledComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+        const classNames = useClassNames();
+        return /*#__PURE__*/ jsx(Component, {
+            ref: ref,
+            ...props,
+            className: clsx(classNames[baseSlot], classNames.selectionCell, props["className"])
+        });
+    });
+    StyledComponent.displayName = `SelectionCell(${baseSlot})`;
+    return StyledComponent;
+}
+const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
+const DataTableHeaderCellIcon = withContext(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(DataTableRow$1, "row");
+const DataTableCell = withContext(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
+// column width than the card is wide) scroll horizontally at all, which sticky columns
+// and their scroll shadow (this slot's own `data-scrolled-start`/`-end`, set from
+// `useDataTableScroll`) need something concrete to measure and listen to. `overflowY`
+// 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(Primitive.div, "scrollArea");
+function DataTableScrollBody({ children, scrollProps }) {
+    const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
+    const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
+    return /*#__PURE__*/ jsx(DataTableScrollBodyBase, {
+        ...otherScrollProps,
+        ref: scrollAreaRef,
+        onScroll: onScroll,
+        className: scrollClassName,
+        style: scrollStyle,
+        "data-scrolled-start": dataAttr(scrolledStart),
+        "data-scrolled-end": dataAttr(scrolledEnd),
+        children: children
+    });
+}
+const DataTableFooterBase = withContext(Primitive.tfoot, "footer");
+function DataTableFooter({ children, ...props }) {
+    return /*#__PURE__*/ jsx(DataTableFooterBase, {
+        ...props,
+        children: /*#__PURE__*/ jsx("tr", {
+            children: children
+        })
+    });
+}
+const DataTableFooterCell = withContext(Primitive.td, "footerCell");
+////////////////////////////////////////////////////////////////////////////////////
+// Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
+// -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.
+// The selection checkbox's own indicator is the smallest glyph in the grid
+// (crisp's own measured checkmark), so it gets the smallest explicit size.
+const SELECTION_ICON_SIZE = 12;
+const DEFAULT_CHECKED_ICON = /*#__PURE__*/ jsx(IconCheckmarkLine_default, {
+    size: SELECTION_ICON_SIZE
+});
+const DEFAULT_INDETERMINATE_ICON = /*#__PURE__*/ jsx(IconMinusLine_default, {
+    size: SELECTION_ICON_SIZE
+});
+function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
+    const { selectionState, toggleAll } = useDataTableContext();
+    return /*#__PURE__*/ jsxs(CheckboxRoot, {
+        checked: selectionState === "all",
+        indeterminate: selectionState === "some",
+        onCheckedChange: toggleAll,
+        children: [
+            /*#__PURE__*/ jsx(CheckboxControl, {
+                children: /*#__PURE__*/ jsx(CheckboxIndicator, {
+                    checked: checkedIcon ?? null,
+                    indeterminate: indeterminateIcon
+                })
+            }),
+            /*#__PURE__*/ jsx(CheckboxHiddenInput, {
+                "aria-label": label
+            })
+        ]
+    });
+}
+/**
+ * Reads its OWN row's selected state off `useDataTableRowContext` (set by the
+ * `DataTableRow` it renders inside) rather than being handed `rowId` again as a prop
+ * and looking it up in the table-wide context -- the same shape Select's
+ * `SelectItemLabel` reads `label` off `useSelectItemContext` instead of a prop
+ * re-threaded down from `SelectItem`.
+ */ function RowCheckbox({ label, checkedIcon }) {
+    const { isSelected, toggleRow } = useDataTableRowContext();
+    return /*#__PURE__*/ jsxs(CheckboxRoot, {
+        checked: isSelected,
+        onCheckedChange: toggleRow,
+        children: [
+            /*#__PURE__*/ jsx(CheckboxControl, {
+                children: /*#__PURE__*/ jsx(CheckboxIndicator, {
+                    checked: checkedIcon ?? null
+                })
+            }),
+            /*#__PURE__*/ jsx(CheckboxHiddenInput, {
+                "aria-label": label
+            })
+        ]
+    });
+}
+
+export { DataTable };