@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/data-table/data-table-header-draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-header-draggable.js","sources":["../../../src/components/data-table/data-table-header-draggable.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { useSortable } from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHead } from \"../table/table\"\n\n// Grip vertical icon (6-dot drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    // When not disabled, hovering over the cell reveals the drag handle\n    [`&:hover [${SLOT_ATTR}=\"data-table-header-drag-handle\"]`]: {\n      opacity: 1,\n    },\n  },\n  inner: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  dragHandle: {\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    touchAction: \"none\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n    marginLeft: \"-4px\",\n    marginRight: \"2px\",\n    backgroundColor: \"transparent\",\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n    \"&:hover\": {\n      color: tokens.grayA12,\n    },\n    \"&:focus-visible\": {\n      opacity: 1,\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&:active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  content: {\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    width: \"14px\",\n    height: \"14px\",\n  },\n})\n\nexport type DataTableHeaderDraggableProps = {\n  /** Column ID used as the sortable identifier */\n  headerId: string\n  /** Whether this column cannot be reordered */\n  disabled?: boolean\n  /** Header cell content (the flex-rendered header + resize handle) */\n  children: ReactNode\n} & ComponentProps<typeof TableHead>\n\n/**\n * A TableHead cell wrapped with dnd-kit sortable for column reordering.\n * Renders a drag handle icon that appears on hover.\n * Used by DataTableHeader when enableColumnOrdering is true.\n */\nexport const DataTableHeaderDraggable = React.forwardRef<\n  HTMLTableCellElement,\n  DataTableHeaderDraggableProps\n>(function DataTableHeaderDraggable(\n  {\n    headerId,\n    disabled = false,\n    children,\n    style: existingStyle,\n    className,\n    ...tableHeadProps\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: headerId, disabled })\n\n  const handleRef = React.useCallback(\n    (node: HTMLTableCellElement | null) => {\n      setNodeRef(node)\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLTableCellElement | null>).current =\n          node\n      }\n    },\n    [setNodeRef, ref]\n  )\n\n  const style: CSSProperties = {\n    ...existingStyle,\n    transform: CSS.Transform.toString(transform),\n    transition,\n    ...(isDragging && { zIndex: 50, opacity: 0.8 }),\n  }\n\n  return (\n    <TableHead\n      ref={handleRef}\n      style={style}\n      className={mergeClasses(!disabled && styles.root, className)}\n      data-slot=\"data-table-header-draggable\"\n      {...{ [SLOT_ATTR]: \"data-table-header-draggable\" }}\n      data-fs-element=\"DataTable-Header-Draggable\"\n      {...tableHeadProps}\n    >\n      <div\n        className={styles.inner}\n        data-slot=\"data-table-header-draggable-inner\"\n        {...{ [SLOT_ATTR]: \"data-table-header-draggable-inner\" }}\n      >\n        {!disabled && (\n          <button\n            type=\"button\"\n            className={styles.dragHandle}\n            data-slot=\"data-table-header-drag-handle\"\n            {...{ [SLOT_ATTR]: \"data-table-header-drag-handle\" }}\n            aria-label=\"Drag to reorder column\"\n            {...attributes}\n            {...listeners}\n          >\n            <IconGripVertical className={styles.icon} />\n          </button>\n        )}\n        <div\n          className={styles.content}\n          data-slot=\"data-table-header-draggable-content\"\n          {...{ [SLOT_ATTR]: \"data-table-header-draggable-content\" }}\n        >\n          {children}\n        </div>\n      </div>\n    </TableHead>\n  )\n})\n"],"names":["IconGripVertical","props","jsxs","jsx","useStyles","makeZenithStyles","SLOT_ATTR","tokens.grayA8","shorthands","tokens.grayA12","tokens.accentA8","DataTableHeaderDraggable","React","headerId","disabled","children","existingStyle","className","tableHeadProps","ref","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","handleRef","node","style","CSS","TableHead","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"data-table-header-draggable.js","sources":["../../../src/components/data-table/data-table-header-draggable.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { useSortable } from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { TableHead } from \"../table/table\"\n\n// Grip vertical icon (6-dot drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    // When not disabled, hovering over the cell reveals the drag handle\n    [`&:hover [${SLOT_ATTR}=\"data-table-header-drag-handle\"]`]: {\n      opacity: 1,\n    },\n  },\n  inner: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  dragHandle: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    touchAction: \"none\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n    marginLeft: \"-4px\",\n    marginRight: \"2px\",\n    backgroundColor: \"transparent\",\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n    \"&:hover\": {\n      color: tokens.grayA12,\n    },\n    \"&:focus-visible\": {\n      opacity: 1,\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&:active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  content: {\n    ...boxModel,\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    ...boxModel,\n    width: \"14px\",\n    height: \"14px\",\n  },\n})\n\nexport type DataTableHeaderDraggableProps = {\n  /** Column ID used as the sortable identifier */\n  headerId: string\n  /** Whether this column cannot be reordered */\n  disabled?: boolean\n  /** Header cell content (the flex-rendered header + resize handle) */\n  children: ReactNode\n} & ComponentProps<typeof TableHead>\n\n/**\n * A TableHead cell wrapped with dnd-kit sortable for column reordering.\n * Renders a drag handle icon that appears on hover.\n * Used by DataTableHeader when enableColumnOrdering is true.\n */\nexport const DataTableHeaderDraggable = React.forwardRef<\n  HTMLTableCellElement,\n  DataTableHeaderDraggableProps\n>(function DataTableHeaderDraggable(\n  {\n    headerId,\n    disabled = false,\n    children,\n    style: existingStyle,\n    className,\n    ...tableHeadProps\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: headerId, disabled })\n\n  const handleRef = React.useCallback(\n    (node: HTMLTableCellElement | null) => {\n      setNodeRef(node)\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLTableCellElement | null>).current =\n          node\n      }\n    },\n    [setNodeRef, ref]\n  )\n\n  const style: CSSProperties = {\n    ...existingStyle,\n    transform: CSS.Transform.toString(transform),\n    transition,\n    ...(isDragging && { zIndex: 50, opacity: 0.8 }),\n  }\n\n  return (\n    <TableHead\n      ref={handleRef}\n      style={style}\n      className={mergeClasses(!disabled && styles.root, className)}\n      data-slot=\"data-table-header-draggable\"\n      {...{ [SLOT_ATTR]: \"data-table-header-draggable\" }}\n      data-fs-element=\"DataTable-Header-Draggable\"\n      {...tableHeadProps}\n    >\n      <div\n        className={styles.inner}\n        data-slot=\"data-table-header-draggable-inner\"\n        {...{ [SLOT_ATTR]: \"data-table-header-draggable-inner\" }}\n      >\n        {!disabled && (\n          <button\n            type=\"button\"\n            className={styles.dragHandle}\n            data-slot=\"data-table-header-drag-handle\"\n            {...{ [SLOT_ATTR]: \"data-table-header-drag-handle\" }}\n            aria-label=\"Drag to reorder column\"\n            {...attributes}\n            {...listeners}\n          >\n            <IconGripVertical className={styles.icon} />\n          </button>\n        )}\n        <div\n          className={styles.content}\n          data-slot=\"data-table-header-draggable-content\"\n          {...{ [SLOT_ATTR]: \"data-table-header-draggable-content\" }}\n        >\n          {children}\n        </div>\n      </div>\n    </TableHead>\n  )\n})\n"],"names":["IconGripVertical","props","jsxs","jsx","useStyles","makeZenithStyles","SLOT_ATTR","nativeControl","tokens.grayA8","shorthands","tokens.grayA12","tokens.accentA8","boxModel","DataTableHeaderDraggable","React","headerId","disabled","children","existingStyle","className","tableHeadProps","ref","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","handleRef","node","style","CSS","TableHead","mergeClasses"],"mappings":"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"}

package/dist/components/data-table/data-table-header.js

@@ -1,33 +1,49 @@
-import { jsx as s, jsxs as E } from "react/jsx-runtime";
-import * as F from "react";
-import { useCallback as $, useMemo as j } from "react";
-import { flexRender as K } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
-import { useSensors as M, useSensor as R, DndContext as U, closestCenter as B, KeyboardSensor as V, PointerSensor as Z } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
-import { arrayMove as q, SortableContext as G, horizontalListSortingStrategy as J, sortableKeyboardCoordinates as Q } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
-import { SLOT_ATTR as X, shorthands as Y, mergeClasses as ee } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as te } from "../../styles/make-styles.js";
-import { grayA6 as oe, gray2 as ne, fontWeightSemibold as ie } from "../../tokens/index.js";
-import { TableHeader as re, TableRow as se, TableHead as H } from "../table/table.js";
-import { DataTableHeaderDraggable as ae } from "./data-table-header-draggable.js";
-import { getPinnedColumnOffset as de, isLastLeftPinnedColumn as le, isFirstRightPinnedColumn as ce } from "./data-table-pinning-utils.js";
-import { useDataTable as me } from "./hooks/use-data-table.js";
-import { useDataTableVirtualizer as ue } from "./hooks/use-data-table-virtualizer.js";
+import { jsx as a, jsxs as F } from "react/jsx-runtime";
+import * as j from "react";
+import { useCallback as K, useMemo as M } from "react";
+import { flexRender as U } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
+import { useSensors as V, useSensor as H, DndContext as Z, closestCenter as q, KeyboardSensor as G, PointerSensor as J } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove as Q, SortableContext as X, horizontalListSortingStrategy as Y, sortableKeyboardCoordinates as ee } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { SLOT_ATTR as oe, shorthands as h, mergeClasses as te } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as ne } from "../../styles/make-styles.js";
+import { gray2 as re, fontWeightSemibold as ie, grayA6 as O, spacingElement1 as z } from "../../tokens/index.js";
+import { TableHeader as ae, TableRow as se, TableHead as L } from "../table/table.js";
+import { DataTableHeaderDraggable as de } from "./data-table-header-draggable.js";
+import { getPinnedColumnOffset as le, isLastLeftPinnedColumn as ce, isFirstRightPinnedColumn as me } from "./data-table-pinning-utils.js";
+import { useDataTable as ue } from "./hooks/use-data-table.js";
+import { useDataTableVirtualizer as ge } from "./hooks/use-data-table-virtualizer.js";
 import { useDataTableContent as fe } from "./hooks/use-data-table-content.js";
-const ge = ({ transform: d }) => ({
+const pe = ({ transform: d }) => ({
   ...d,
   y: 0
-}), pe = 150;
-function be(d) {
+}), be = 150;
+function he(d) {
   if (d.id === "select") return !1;
   const l = d.columnDef.meta;
   return (l == null ? void 0 : l.enableOrdering) !== !1;
 }
-const he = te({
+const Ce = ne({
+  // Painted on the cells, as DataTableRow's rule is: WebKit draws no
+  // box-shadow on a <tr>.
+  headerRowBorder: {
+    "& > th": {
+      backgroundImage: `linear-gradient(${O}, ${O})`,
+      backgroundSize: "100% 1px",
+      backgroundPosition: "bottom",
+      backgroundRepeat: "no-repeat"
+    }
+  },
   headerTitle: {
     display: "block",
-    ...Y.overflow("hidden"),
+    ...h.overflow("hidden"),
     whiteSpace: "nowrap",
-    fontWeight: ie
+    fontWeight: ie,
+    // The clip truncates long titles, but a control in the header (the
+    // select-all checkbox) needs its focus ring drawn outside its box: give
+    // the clip room for it, and take that room back so layout is unchanged.
+    boxSizing: "border-box",
+    ...h.padding(z),
+    ...h.margin(`calc(${z} * -1)`)
   },
   shadowLeft: {
     boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)"
@@ -35,112 +51,110 @@ const he = te({
   shadowRight: {
     boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
   }
-}), We = F.forwardRef(function({ className: l, sticky: O, stickyBackground: h = ne }, L) {
-  const p = he(), {
-    table: t,
-    disableColumnResizing: z,
-    showHeaderBorder: I,
-    fitHeaderWidth: P,
+}), We = j.forwardRef(function({ className: l, sticky: I, stickyBackground: C = re }, k) {
+  const u = Ce(), {
+    table: o,
+    disableColumnResizing: P,
+    showHeaderBorder: W,
+    fitHeaderWidth: A,
     enableColumnOrdering: c
-  } = me(), C = !z, W = ue(), b = fe(), S = (b == null ? void 0 : b.spacerWidth) ?? 0, i = O ?? !!W, k = M(
-    R(Z, {
+  } = ue(), S = !P, N = ge(), b = fe(), x = (b == null ? void 0 : b.spacerWidth) ?? 0, r = I ?? !!N, $ = V(
+    H(J, {
       activationConstraint: { distance: 5 }
     }),
-    R(V, {
-      coordinateGetter: Q
+    H(G, {
+      coordinateGetter: ee
     })
-  ), A = $(
+  ), E = K(
     (n) => {
-      const { active: e, over: o } = n;
-      if (!o || e.id === o.id) return;
-      const a = t.getState().columnOrder && t.getState().columnOrder.length > 0 ? t.getState().columnOrder : t.getAllLeafColumns().map((g) => g.id), u = a.indexOf(e.id), f = a.indexOf(o.id);
-      if (u === -1 || f === -1) return;
-      const m = q(a, u, f);
-      t.setColumnOrder(m);
+      const { active: e, over: t } = n;
+      if (!t || e.id === t.id) return;
+      const s = o.getState().columnOrder && o.getState().columnOrder.length > 0 ? o.getState().columnOrder : o.getAllLeafColumns().map((p) => p.id), g = s.indexOf(e.id), f = s.indexOf(t.id);
+      if (g === -1 || f === -1) return;
+      const m = Q(s, g, f);
+      o.setColumnOrder(m);
     },
-    [t]
-  ), x = (n) => n.map((e) => {
-    const o = e.column.getIsPinned(), a = o ? de(e.column, t) : void 0, u = le(e.column, t), f = ce(e.column, t), m = e.column.columnDef.meta, g = m == null ? void 0 : m.align, v = {
-      width: C || e.getSize() !== pe ? e.getSize() : void 0,
-      minWidth: P ? "max-content" : void 0,
-      backgroundColor: i || o ? h : void 0,
-      position: i || o ? "sticky" : C ? "relative" : void 0,
-      top: i ? 0 : void 0,
-      left: o === "left" ? `${a}px` : void 0,
-      right: o === "right" ? `${a}px` : void 0,
-      zIndex: o ? 30 : i ? 10 : void 0,
+    [o]
+  ), v = (n) => n.map((e) => {
+    const t = e.column.getIsPinned(), s = t ? le(e.column, o) : void 0, g = ce(e.column, o), f = me(e.column, o), m = e.column.columnDef.meta, p = m == null ? void 0 : m.align, D = {
+      width: S || e.getSize() !== be ? e.getSize() : void 0,
+      minWidth: A ? "max-content" : void 0,
+      backgroundColor: r || t ? C : void 0,
+      position: r || t ? "sticky" : S ? "relative" : void 0,
+      top: r ? 0 : void 0,
+      left: t === "left" ? `${s}px` : void 0,
+      right: t === "right" ? `${s}px` : void 0,
+      zIndex: t ? 30 : r ? 10 : void 0,
       // Reduce padding for sortable headers
       ...(() => {
-        const r = e.column.columnDef.meta;
-        return (r == null ? void 0 : r._sortableHeaderWrapped) || e.column.getCanSort() && typeof e.column.columnDef.header == "function" ? (r == null ? void 0 : r.align) === "right" ? { paddingRight: 8 } : { paddingLeft: 8 } : {};
+        const i = e.column.columnDef.meta;
+        return (i == null ? void 0 : i._sortableHeaderWrapped) || e.column.getCanSort() && typeof e.column.columnDef.header == "function" ? (i == null ? void 0 : i.align) === "right" ? { paddingRight: 8 } : { paddingLeft: 8 } : {};
       })()
-    }, D = ee(
-      u && p.shadowLeft,
-      f && p.shadowRight
-    ), T = e.column.getIsSorted() === "asc" ? "ascending" : e.column.getIsSorted() === "desc" ? "descending" : e.column.getCanSort() ? "none" : void 0, w = /* @__PURE__ */ s("span", { className: p.headerTitle, children: e.isPlaceholder ? null : K(e.column.columnDef.header, e.getContext()) });
+    }, R = te(
+      g && u.shadowLeft,
+      f && u.shadowRight
+    ), w = e.column.getIsSorted() === "asc" ? "ascending" : e.column.getIsSorted() === "desc" ? "descending" : e.column.getCanSort() ? "none" : void 0, T = /* @__PURE__ */ a("span", { className: u.headerTitle, children: e.isPlaceholder ? null : U(e.column.columnDef.header, e.getContext()) });
     if (c) {
-      const r = be(e.column) && !o;
-      return /* @__PURE__ */ s(
-        ae,
+      const i = he(e.column) && !t;
+      return /* @__PURE__ */ a(
+        de,
         {
           headerId: e.column.id,
-          disabled: !r,
-          align: g,
-          "aria-sort": T,
-          style: v,
-          className: D,
-          children: w
+          disabled: !i,
+          align: p,
+          "aria-sort": w,
+          style: D,
+          className: R,
+          children: T
         },
         e.id
       );
     }
-    return /* @__PURE__ */ s(
-      H,
+    return /* @__PURE__ */ a(
+      L,
       {
-        align: g,
-        "aria-sort": T,
-        style: v,
-        className: D,
-        children: w
+        align: p,
+        "aria-sort": w,
+        style: D,
+        className: R,
+        children: T
       },
       e.id
     );
-  }), N = t.getAllLeafColumns().map((n) => n.id), y = /* @__PURE__ */ s(
-    re,
+  }), _ = o.getAllLeafColumns().map((n) => n.id), y = /* @__PURE__ */ a(
+    ae,
     {
-      ref: L,
+      ref: k,
       "data-slot": "data-table-header",
-      [X]: "data-table-header",
+      [oe]: "data-table-header",
       "data-fs-element": "DataTable-Header",
       className: l,
-      children: t.getHeaderGroups().map((n) => /* @__PURE__ */ E(
+      children: o.getHeaderGroups().map((n) => /* @__PURE__ */ F(
         se,
         {
           noHover: !0,
-          style: {
-            boxShadow: I !== !1 ? `inset 0 -1px 0 0 ${oe}` : "none"
-          },
+          className: W !== !1 ? u.headerRowBorder : void 0,
           children: [
-            c ? /* @__PURE__ */ s(
-              G,
+            c ? /* @__PURE__ */ a(
+              X,
               {
-                items: N,
-                strategy: J,
-                children: x(n.headers)
+                items: _,
+                strategy: Y,
+                children: v(n.headers)
               }
-            ) : x(n.headers),
-            S > 0 && /* @__PURE__ */ s(
-              H,
+            ) : v(n.headers),
+            x > 0 && /* @__PURE__ */ a(
+              L,
               {
                 "data-spacer": !0,
                 "aria-hidden": "true",
                 style: {
-                  width: S,
+                  width: x,
                   padding: 0,
-                  backgroundColor: i ? h : void 0,
-                  position: i ? "sticky" : void 0,
-                  top: i ? 0 : void 0,
-                  zIndex: i ? 5 : void 0
+                  backgroundColor: r ? C : void 0,
+                  position: r ? "sticky" : void 0,
+                  top: r ? 0 : void 0,
+                  zIndex: r ? 5 : void 0
                 }
               }
             )
@@ -149,18 +163,18 @@ const he = te({
         n.id
       ))
     }
-  ), _ = j(
+  ), B = M(
     () => c && typeof document < "u" ? document.body : void 0,
     [c]
   );
-  return c ? /* @__PURE__ */ s(
-    U,
+  return c ? /* @__PURE__ */ a(
+    Z,
     {
-      sensors: k,
-      collisionDetection: B,
-      onDragEnd: A,
-      modifiers: [ge],
-      accessibility: { container: _ },
+      sensors: $,
+      collisionDetection: q,
+      onDragEnd: E,
+      modifiers: [pe],
+      accessibility: { container: B },
       children: y
     }
   ) : y;

package/dist/components/data-table/data-table-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  arrayMove,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport {\n  useDataTable,\n  useDataTableContent,\n  useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n  ...transform,\n  y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n  if (column.id === \"select\") return false\n  const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n  if (meta?.enableOrdering === false) return false\n  return true\n}\n\nconst useStyles = makeZenithStyles({\n  headerTitle: {\n    display: \"block\",\n    ...shorthands.overflow(\"hidden\"),\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableHeaderProps = {\n  /** Additional class name */\n  className?: string\n  /** Whether to make header sticky */\n  sticky?: boolean\n  /** Background color for sticky header. Default: tokens.gray2 */\n  stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableHeaderProps\n>(function DataTableHeader(\n  { className, sticky, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    table,\n    disableColumnResizing,\n    showHeaderBorder,\n    fitHeaderWidth,\n    enableColumnOrdering,\n  } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const virtualizerContext = useDataTableVirtualizer()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  // Auto-enable sticky when virtualization is active\n  const isSticky = sticky ?? Boolean(virtualizerContext)\n\n  // DnD sensors for column reordering\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const currentOrder =\n        table.getState().columnOrder && table.getState().columnOrder.length > 0\n          ? table.getState().columnOrder\n          : table.getAllLeafColumns().map((c) => c.id)\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [table]\n  )\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const renderHeaders = (headers: Header<any, unknown>[]) =>\n    headers.map((header) => {\n      const isPinned = header.column.getIsPinned()\n      const pinnedOffset = isPinned\n        ? getPinnedColumnOffset(header.column, table)\n        : undefined\n      const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n      const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n      const columnMeta = header.column.columnDef.meta as\n        { align?: \"left\" | \"center\" | \"right\" } | undefined\n      const align = columnMeta?.align\n\n      const cellStyle: React.CSSProperties = {\n        width: enableColumnResizing\n          ? header.getSize()\n          : header.getSize() !== DEFAULT_COLUMN_WIDTH\n            ? header.getSize()\n            : undefined,\n        minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n        backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n        position:\n          isSticky || isPinned\n            ? \"sticky\"\n            : enableColumnResizing\n              ? \"relative\"\n              : undefined,\n        top: isSticky ? 0 : undefined,\n        left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n        right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n        zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n        // Reduce padding for sortable headers\n        ...(() => {\n          const meta = header.column.columnDef.meta as\n            | {\n                _sortableHeaderWrapped?: boolean\n                align?: \"left\" | \"right\" | \"center\"\n              }\n            | undefined\n          const shouldReducePadding =\n            meta?._sortableHeaderWrapped ||\n            (header.column.getCanSort() &&\n              typeof header.column.columnDef.header === \"function\")\n          if (!shouldReducePadding) return {}\n          return meta?.align === \"right\"\n            ? { paddingRight: 8 }\n            : { paddingLeft: 8 }\n        })(),\n      }\n\n      const cellClassName = mergeClasses(\n        isLastLeft && styles.shadowLeft,\n        isFirstRight && styles.shadowRight\n      )\n\n      const ariaSort =\n        header.column.getIsSorted() === \"asc\"\n          ? (\"ascending\" as const)\n          : header.column.getIsSorted() === \"desc\"\n            ? (\"descending\" as const)\n            : header.column.getCanSort()\n              ? (\"none\" as const)\n              : undefined\n\n      const headerContent = (\n        <span className={styles.headerTitle}>\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n      )\n\n      if (enableColumnOrdering) {\n        const canReorder = isColumnReorderable(header.column) && !isPinned\n\n        return (\n          <DataTableHeaderDraggable\n            key={header.id}\n            headerId={header.column.id}\n            disabled={!canReorder}\n            align={align}\n            aria-sort={ariaSort}\n            style={cellStyle}\n            className={cellClassName}\n          >\n            {headerContent}\n          </DataTableHeaderDraggable>\n        )\n      }\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={cellClassName}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  // Get column IDs for SortableContext\n  const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n  const headerContent = (\n    <TableHeader\n      ref={ref}\n      data-slot=\"data-table-header\"\n      {...{ [SLOT_ATTR]: \"data-table-header\" }}\n      data-fs-element=\"DataTable-Header\"\n      className={className}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow\n          key={headerGroup.id}\n          noHover\n          style={{\n            boxShadow:\n              showHeaderBorder !== false\n                ? `inset 0 -1px 0 0 ${tokens.grayA6}`\n                : \"none\",\n          }}\n        >\n          {enableColumnOrdering ? (\n            <SortableContext\n              items={orderedColumnIds}\n              strategy={horizontalListSortingStrategy}\n            >\n              {renderHeaders(headerGroup.headers)}\n            </SortableContext>\n          ) : (\n            renderHeaders(headerGroup.headers)\n          )}\n          {/* Spacer cell - absorbs remaining width when columns < container */}\n          {spacerWidth > 0 && (\n            <TableHead\n              data-spacer\n              aria-hidden=\"true\"\n              style={{\n                width: spacerWidth,\n                padding: 0,\n                backgroundColor: isSticky ? stickyBackground : undefined,\n                position: isSticky ? \"sticky\" : undefined,\n                top: isSticky ? 0 : undefined,\n                zIndex: isSticky ? 5 : undefined,\n              }}\n            />\n          )}\n        </TableRow>\n      ))}\n    </TableHeader>\n  )\n\n  const a11yContainer = useMemo(\n    () =>\n      enableColumnOrdering && typeof document !== \"undefined\"\n        ? document.body\n        : undefined,\n    [enableColumnOrdering]\n  )\n\n  // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n  if (enableColumnOrdering) {\n    return (\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n        modifiers={[restrictToHorizontalAxis]}\n        accessibility={{ container: a11yContainer }}\n      >\n        {headerContent}\n      </DndContext>\n    )\n  }\n\n  return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","tokens.grayA6","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":";;;;;;;;;;;;;;;AAsCA,MAAMA,KAAqC,CAAC,EAAE,WAAAC,SAAiB;AAAA,EAC7D,GAAGA;AAAA,EACH,GAAG;AACL,IAGMC,KAAuB;AAI7B,SAASC,GAAoBC,GAAiD;AAC5E,MAAIA,EAAO,OAAO,SAAU,QAAO;AACnC,QAAMC,IAAOD,EAAO,UAAU;AAC9B,UAAIC,KAAA,gBAAAA,EAAM,oBAAmB;AAE/B;AAEA,MAAMC,KAAYC,GAAiB;AAAA,EACjC,aAAa;AAAA,IACX,SAAS;AAAA,IACT,GAAGC,EAAW,SAAS,QAAQ;AAAA,IAC/B,YAAY;AAAA,IACZ,YAAYC;AAAAA,EAAO;AAAA,EAErB,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,CAAC,GAeYC,KAAkBC,EAAM,WAGnC,SACA,EAAE,WAAAC,GAAW,QAAAC,GAAQ,kBAAAC,IAAmBC,GAAO,GAC/CC,GACA;AACA,QAAMC,IAASX,GAAA,GACT;AAAA,IACJ,OAAAY;AAAA,IACA,uBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,sBAAAC;AAAA,EAAA,IACEC,GAAA,GACEC,IAAuB,CAACL,GACxBM,IAAqBC,GAAA,GACrBC,IAAiBC,GAAA,GACjBC,KAAcF,KAAA,gBAAAA,EAAgB,gBAAe,GAG7CG,IAAWjB,KAAU,EAAQY,GAG7BM,IAAUC;AAAA,IACdC,EAAUC,GAAe;AAAA,MACvB,sBAAsB,EAAE,UAAU,EAAA;AAAA,IAAE,CACrC;AAAA,IACDD,EAAUE,GAAgB;AAAA,MACxB,kBAAkBC;AAAA,IAAA,CACnB;AAAA,EAAA,GAGGC,IAAgBC;AAAA,IACpB,CAACC,MAAwB;AACvB,YAAM,EAAE,QAAAC,GAAQ,MAAAC,EAAA,IAASF;AACzB,UAAI,CAACE,KAAQD,EAAO,OAAOC,EAAK,GAAI;AAEpC,YAAMC,IACJxB,EAAM,WAAW,eAAeA,EAAM,SAAA,EAAW,YAAY,SAAS,IAClEA,EAAM,SAAA,EAAW,cACjBA,EAAM,oBAAoB,IAAI,CAACyB,MAAMA,EAAE,EAAE,GAEzCC,IAAWF,EAAa,QAAQF,EAAO,EAAY,GACnDK,IAAWH,EAAa,QAAQD,EAAK,EAAY;AAEvD,UAAIG,MAAa,MAAMC,MAAa,GAAI;AAExC,YAAMC,IAAWC,EAAUL,GAAcE,GAAUC,CAAQ;AAC3D,MAAA3B,EAAM,eAAe4B,CAAQ;AAAA,IAC/B;AAAA,IACA,CAAC5B,CAAK;AAAA,EAAA,GAIF8B,IAAgB,CAACC,MACrBA,EAAQ,IAAI,CAACC,MAAW;AACtB,UAAMC,IAAWD,EAAO,OAAO,YAAA,GACzBE,IAAeD,IACjBE,GAAsBH,EAAO,QAAQhC,CAAK,IAC1C,QACEoC,IAAaC,GAAuBL,EAAO,QAAQhC,CAAK,GACxDsC,IAAeC,GAAyBP,EAAO,QAAQhC,CAAK,GAC5DwC,IAAaR,EAAO,OAAO,UAAU,MAErCS,IAAQD,KAAA,gBAAAA,EAAY,OAEpBE,IAAiC;AAAA,MACrC,OAAOpC,KAEH0B,EAAO,QAAA,MAAchD,KADrBgD,EAAO,YAGL;AAAA,MACN,UAAU7B,IAAiB,gBAAgB;AAAA,MAC3C,iBAAiBS,KAAYqB,IAAWrC,IAAmB;AAAA,MAC3D,UACEgB,KAAYqB,IACR,WACA3B,IACE,aACA;AAAA,MACR,KAAKM,IAAW,IAAI;AAAA,MACpB,MAAMqB,MAAa,SAAS,GAAGC,CAAY,OAAO;AAAA,MAClD,OAAOD,MAAa,UAAU,GAAGC,CAAY,OAAO;AAAA,MACpD,QAAQD,IAAW,KAAKrB,IAAW,KAAK;AAAA;AAAA,MAExC,IAAI,MAAM;AACR,cAAMzB,IAAO6C,EAAO,OAAO,UAAU;AAUrC,gBAHE7C,KAAA,gBAAAA,EAAM,2BACL6C,EAAO,OAAO,WAAA,KACb,OAAOA,EAAO,OAAO,UAAU,UAAW,cAEvC7C,KAAA,gBAAAA,EAAM,WAAU,UACnB,EAAE,cAAc,EAAA,IAChB,EAAE,aAAa,EAAA,IAHc,CAAA;AAAA,MAInC,GAAA;AAAA,IAAG,GAGCwD,IAAgBC;AAAA,MACpBR,KAAcrC,EAAO;AAAA,MACrBuC,KAAgBvC,EAAO;AAAA,IAAA,GAGnB8C,IACJb,EAAO,OAAO,YAAA,MAAkB,QAC3B,cACDA,EAAO,OAAO,YAAA,MAAkB,SAC7B,eACDA,EAAO,OAAO,WAAA,IACX,SACD,QAEJc,IACJ,gBAAAC,EAAC,QAAA,EAAK,WAAWhD,EAAO,aACrB,UAAAiC,EAAO,gBACJ,OACAgB,EAAWhB,EAAO,OAAO,UAAU,QAAQA,EAAO,WAAA,CAAY,GACpE;AAGF,QAAI5B,GAAsB;AACxB,YAAM6C,IAAahE,GAAoB+C,EAAO,MAAM,KAAK,CAACC;AAE1D,aACE,gBAAAc;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,UAAUlB,EAAO,OAAO;AAAA,UACxB,UAAU,CAACiB;AAAA,UACX,OAAAR;AAAA,UACA,aAAWI;AAAA,UACX,OAAOH;AAAA,UACP,WAAWC;AAAA,UAEV,UAAAG;AAAAA,QAAA;AAAA,QARId,EAAO;AAAA,MAAA;AAAA,IAWlB;AAEA,WACE,gBAAAe;AAAA,MAACI;AAAA,MAAA;AAAA,QAEC,OAAAV;AAAA,QACA,aAAWI;AAAA,QACX,OAAOH;AAAA,QACP,WAAWC;AAAA,QAEV,UAAAG;AAAAA,MAAA;AAAA,MANId,EAAO;AAAA,IAAA;AAAA,EASlB,CAAC,GAGGoB,IAAmBpD,EAAM,kBAAA,EAAoB,IAAI,CAACqD,MAAQA,EAAI,EAAE,GAEhEP,IACJ,gBAAAC;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAxD;AAAA,MACA,aAAU;AAAA,MACJ,CAACyD,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAA7D;AAAA,MAEC,UAAAM,EAAM,gBAAA,EAAkB,IAAI,CAACwD,MAC5B,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UAEC,SAAO;AAAA,UACP,OAAO;AAAA,YACL,WACExD,MAAqB,KACjB,oBAAoByD,EAAa,KACjC;AAAA,UAAA;AAAA,UAGP,UAAA;AAAA,YAAAvD,IACC,gBAAA2C;AAAA,cAACa;AAAA,cAAA;AAAA,gBACC,OAAOR;AAAA,gBACP,UAAUS;AAAA,gBAET,UAAA/B,EAAc0B,EAAY,OAAO;AAAA,cAAA;AAAA,YAAA,IAGpC1B,EAAc0B,EAAY,OAAO;AAAA,YAGlC7C,IAAc,KACb,gBAAAoC;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,eAAW;AAAA,gBACX,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,OAAOxC;AAAA,kBACP,SAAS;AAAA,kBACT,iBAAiBC,IAAWhB,IAAmB;AAAA,kBAC/C,UAAUgB,IAAW,WAAW;AAAA,kBAChC,KAAKA,IAAW,IAAI;AAAA,kBACpB,QAAQA,IAAW,IAAI;AAAA,gBAAA;AAAA,cACzB;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAhCG4C,EAAY;AAAA,MAAA,CAmCpB;AAAA,IAAA;AAAA,EAAA,GAICM,IAAgBC;AAAA,IACpB,MACE3D,KAAwB,OAAO,WAAa,MACxC,SAAS,OACT;AAAA,IACN,CAACA,CAAoB;AAAA,EAAA;AAIvB,SAAIA,IAEA,gBAAA2C;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,SAAAnD;AAAA,MACA,oBAAoBoD;AAAA,MACpB,WAAW9C;AAAA,MACX,WAAW,CAACrC,EAAwB;AAAA,MACpC,eAAe,EAAE,WAAWgF,EAAA;AAAA,MAE3B,UAAAhB;AAAA,IAAA;AAAA,EAAA,IAKAA;AACT,CAAC;"}
+{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  arrayMove,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport {\n  useDataTable,\n  useDataTableContent,\n  useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n  ...transform,\n  y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n  if (column.id === \"select\") return false\n  const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n  if (meta?.enableOrdering === false) return false\n  return true\n}\n\nconst useStyles = makeZenithStyles({\n  // Painted on the cells, as DataTableRow's rule is: WebKit draws no\n  // box-shadow on a <tr>.\n  headerRowBorder: {\n    \"& > th\": {\n      backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n      backgroundSize: \"100% 1px\",\n      backgroundPosition: \"bottom\",\n      backgroundRepeat: \"no-repeat\",\n    },\n  },\n  headerTitle: {\n    display: \"block\",\n    ...shorthands.overflow(\"hidden\"),\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n    // The clip truncates long titles, but a control in the header (the\n    // select-all checkbox) needs its focus ring drawn outside its box: give\n    // the clip room for it, and take that room back so layout is unchanged.\n    boxSizing: \"border-box\",\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.margin(`calc(${tokens.spacingElement1} * -1)`),\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableHeaderProps = {\n  /** Additional class name */\n  className?: string\n  /** Whether to make header sticky */\n  sticky?: boolean\n  /** Background color for sticky header. Default: tokens.gray2 */\n  stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableHeaderProps\n>(function DataTableHeader(\n  { className, sticky, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    table,\n    disableColumnResizing,\n    showHeaderBorder,\n    fitHeaderWidth,\n    enableColumnOrdering,\n  } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const virtualizerContext = useDataTableVirtualizer()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  // Auto-enable sticky when virtualization is active\n  const isSticky = sticky ?? Boolean(virtualizerContext)\n\n  // DnD sensors for column reordering\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const currentOrder =\n        table.getState().columnOrder && table.getState().columnOrder.length > 0\n          ? table.getState().columnOrder\n          : table.getAllLeafColumns().map((c) => c.id)\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [table]\n  )\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const renderHeaders = (headers: Header<any, unknown>[]) =>\n    headers.map((header) => {\n      const isPinned = header.column.getIsPinned()\n      const pinnedOffset = isPinned\n        ? getPinnedColumnOffset(header.column, table)\n        : undefined\n      const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n      const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n      const columnMeta = header.column.columnDef.meta as\n        { align?: \"left\" | \"center\" | \"right\" } | undefined\n      const align = columnMeta?.align\n\n      const cellStyle: React.CSSProperties = {\n        width: enableColumnResizing\n          ? header.getSize()\n          : header.getSize() !== DEFAULT_COLUMN_WIDTH\n            ? header.getSize()\n            : undefined,\n        minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n        backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n        position:\n          isSticky || isPinned\n            ? \"sticky\"\n            : enableColumnResizing\n              ? \"relative\"\n              : undefined,\n        top: isSticky ? 0 : undefined,\n        left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n        right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n        zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n        // Reduce padding for sortable headers\n        ...(() => {\n          const meta = header.column.columnDef.meta as\n            | {\n                _sortableHeaderWrapped?: boolean\n                align?: \"left\" | \"right\" | \"center\"\n              }\n            | undefined\n          const shouldReducePadding =\n            meta?._sortableHeaderWrapped ||\n            (header.column.getCanSort() &&\n              typeof header.column.columnDef.header === \"function\")\n          if (!shouldReducePadding) return {}\n          return meta?.align === \"right\"\n            ? { paddingRight: 8 }\n            : { paddingLeft: 8 }\n        })(),\n      }\n\n      const cellClassName = mergeClasses(\n        isLastLeft && styles.shadowLeft,\n        isFirstRight && styles.shadowRight\n      )\n\n      const ariaSort =\n        header.column.getIsSorted() === \"asc\"\n          ? (\"ascending\" as const)\n          : header.column.getIsSorted() === \"desc\"\n            ? (\"descending\" as const)\n            : header.column.getCanSort()\n              ? (\"none\" as const)\n              : undefined\n\n      const headerContent = (\n        <span className={styles.headerTitle}>\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n      )\n\n      if (enableColumnOrdering) {\n        const canReorder = isColumnReorderable(header.column) && !isPinned\n\n        return (\n          <DataTableHeaderDraggable\n            key={header.id}\n            headerId={header.column.id}\n            disabled={!canReorder}\n            align={align}\n            aria-sort={ariaSort}\n            style={cellStyle}\n            className={cellClassName}\n          >\n            {headerContent}\n          </DataTableHeaderDraggable>\n        )\n      }\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={cellClassName}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  // Get column IDs for SortableContext\n  const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n  const headerContent = (\n    <TableHeader\n      ref={ref}\n      data-slot=\"data-table-header\"\n      {...{ [SLOT_ATTR]: \"data-table-header\" }}\n      data-fs-element=\"DataTable-Header\"\n      className={className}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow\n          key={headerGroup.id}\n          noHover\n          className={\n            showHeaderBorder !== false ? styles.headerRowBorder : undefined\n          }\n        >\n          {enableColumnOrdering ? (\n            <SortableContext\n              items={orderedColumnIds}\n              strategy={horizontalListSortingStrategy}\n            >\n              {renderHeaders(headerGroup.headers)}\n            </SortableContext>\n          ) : (\n            renderHeaders(headerGroup.headers)\n          )}\n          {/* Spacer cell - absorbs remaining width when columns < container */}\n          {spacerWidth > 0 && (\n            <TableHead\n              data-spacer\n              aria-hidden=\"true\"\n              style={{\n                width: spacerWidth,\n                padding: 0,\n                backgroundColor: isSticky ? stickyBackground : undefined,\n                position: isSticky ? \"sticky\" : undefined,\n                top: isSticky ? 0 : undefined,\n                zIndex: isSticky ? 5 : undefined,\n              }}\n            />\n          )}\n        </TableRow>\n      ))}\n    </TableHeader>\n  )\n\n  const a11yContainer = useMemo(\n    () =>\n      enableColumnOrdering && typeof document !== \"undefined\"\n        ? document.body\n        : undefined,\n    [enableColumnOrdering]\n  )\n\n  // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n  if (enableColumnOrdering) {\n    return (\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n        modifiers={[restrictToHorizontalAxis]}\n        accessibility={{ container: a11yContainer }}\n      >\n        {headerContent}\n      </DndContext>\n    )\n  }\n\n  return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","tokens.grayA6","shorthands","tokens.fontWeightSemibold","tokens.spacingElement1","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":"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"}

package/dist/components/data-table/data-table-loading.js

@@ -1,37 +1,40 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import { mergeClasses as i, SLOT_ATTR as s, shorthands as l } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as m } from "../../styles/make-styles.js";
-import { grayA11 as c, spacingElement2 as d, spacingLayout2 as p } from "../../tokens/index.js";
-import { Spinner as f } from "../spinner/spinner.js";
-const g = m({
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+import { mergeClasses as s, SLOT_ATTR as l, shorthands as m } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as c } from "../../styles/make-styles.js";
+import { boxModel as e } from "../../styles/host-reset.js";
+import { grayA11 as d, spacingElement2 as p, spacingLayout2 as f } from "../../tokens/index.js";
+import { Spinner as g } from "../spinner/spinner.js";
+const h = c({
   root: {
+    ...e,
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: d,
-    ...l.paddingBlock(p)
+    gap: p,
+    ...m.paddingBlock(f)
   },
   spinner: {
+    ...e,
     width: "2.5rem",
     height: "2.5rem",
-    color: c
+    color: d
   }
-}), L = n.forwardRef(function({ className: a, children: o }, r) {
-  const t = g();
-  return /* @__PURE__ */ e(
+}), D = i.forwardRef(function({ className: a, children: r }, n) {
+  const t = h();
+  return /* @__PURE__ */ o(
     "div",
     {
-      ref: r,
+      ref: n,
       "data-slot": "data-table-loading",
-      [s]: "data-table-loading",
-      className: i(t.root, a),
-      children: o ?? /* @__PURE__ */ e(f, { className: t.spinner })
+      [l]: "data-table-loading",
+      className: s(t.root, a),
+      children: r ?? /* @__PURE__ */ o(g, { className: t.spinner })
     }
   );
 });
 export {
-  L as DataTableLoading
+  D as DataTableLoading
 };
 //# sourceMappingURL=data-table-loading.js.map

package/dist/components/data-table/data-table-loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;AASA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}
+{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;;AAUA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,GAAGH;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOI;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASZ,EAAA;AAEf,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

package/dist/components/data-table/data-table-resize-handle.js

@@ -2,11 +2,13 @@ import { jsx as T } from "react/jsx-runtime";
 import * as H from "react";
 import { mergeClasses as I, SLOT_ATTR as E, shorthands as P } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as w } from "../../styles/make-styles.js";
+import { boxModel as M } from "../../styles/host-reset.js";
 import { accent9 as N, accent8 as f, accentA8 as W, grayA4 as _ } from "../../tokens/index.js";
 import { useDataTable as B } from "./hooks/use-data-table.js";
-import { useDataTableContent as M } from "./hooks/use-data-table-content.js";
-const O = w({
+import { useDataTableContent as O } from "./hooks/use-data-table-content.js";
+const j = w({
   handle: {
+    ...M,
     position: "absolute",
     right: 0,
     top: 0,
@@ -57,7 +59,7 @@ const O = w({
     }
   }
 });
-function j({
+function F({
   header: r,
   ariaLabel: a,
   isVisible: z = !0,
@@ -68,14 +70,14 @@ function j({
   onKeyDown: c,
   ...g
 }, h) {
-  const m = O(), { table: u } = B(), i = r.column, t = M(), S = a ? typeof a == "function" ? a(i.id) : a : `Resize ${i.id} column`;
+  const m = j(), { table: u } = B(), i = r.column, t = O(), S = a ? typeof a == "function" ? a(i.id) : a : `Resize ${i.id} column`;
   if (!i.getCanResize())
     return null;
   const b = i.getIsResizing(), v = (e) => {
     s == null || s(e), e.defaultPrevented || (t == null || t.syncColumnWidthsBeforeResize(), r.getResizeHandler()(e));
   }, R = (e) => {
     l == null || l(e), e.defaultPrevented || (t == null || t.syncColumnWidthsBeforeResize(), r.getResizeHandler()(e));
-  }, y = (e) => {
+  }, x = (e) => {
     if (c == null || c(e), !e.defaultPrevented) {
       if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
         e.preventDefault();
@@ -100,7 +102,7 @@ function j({
         }));
       }
     }
-  }, x = Math.round(i.getSize());
+  }, y = Math.round(i.getSize());
   return /* @__PURE__ */ T(
     "div",
     {
@@ -111,13 +113,13 @@ function j({
       role: "separator",
       "aria-orientation": "vertical",
       "aria-label": S,
-      "aria-valuenow": x,
+      "aria-valuenow": y,
       "aria-valuemin": i.columnDef.minSize ?? 20,
       "aria-valuemax": i.columnDef.maxSize,
       tabIndex: 0,
       onMouseDown: v,
       onTouchStart: R,
-      onKeyDown: y,
+      onKeyDown: x,
       className: I(
         m.handle,
         b && m.resizing,
@@ -128,10 +130,10 @@ function j({
     }
   );
 }
-const J = H.forwardRef(
-  j
+const Q = H.forwardRef(
+  F
 );
 export {
-  J as DataTableResizeHandle
+  Q as DataTableResizeHandle
 };
 //# sourceMappingURL=data-table-resize-handle.js.map

package/dist/components/data-table/data-table-resize-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-resize-handle.js","sources":["../../../src/components/data-table/data-table-resize-handle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { Header } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\n\nconst useStyles = makeZenithStyles({\n  handle: {\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    height: \"100%\",\n    width: \"2px\",\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n    touchAction: \"none\",\n    backgroundColor: tokens.grayA4,\n    transitionProperty: \"background-color, opacity\",\n    transitionDuration: \"75ms\",\n    \"&::before\": {\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      left: \"-3px\",\n      right: \"-3px\",\n      content: '\"\"',\n    },\n    \"&:hover\": {\n      backgroundColor: tokens.accent8,\n    },\n    \"&:focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"1px\",\n      outlineColor: tokens.accentA8,\n      backgroundColor: tokens.accent8,\n    },\n  },\n  resizing: {\n    backgroundColor: tokens.accent9,\n    \"&::before\": {\n      position: \"fixed\",\n      ...shorthands.inset(0),\n      zIndex: 50,\n      cursor: \"col-resize\",\n      content: '\"\"',\n    },\n  },\n  hidden: {\n    opacity: 0,\n    \"&:hover\": {\n      opacity: 1,\n    },\n    \"&:focus-visible\": {\n      opacity: 1,\n    },\n  },\n})\n\nexport type DataTableResizeHandleProps<TData = unknown, TValue = unknown> = {\n  /** The TanStack Table header instance */\n  header: Header<TData, TValue>\n  /** Accessible label for the resize handle. Recommended for i18n and accessibility. Receives column.id as parameter. */\n  ariaLabel?: string | ((columnId: string) => string)\n  /** Whether the handle is visible. When false, handle is hidden but becomes visible on direct hover or focus. */\n  isVisible?: boolean\n  /** Step increment in pixels for keyboard resizing. Default: 10 */\n  step?: number\n  className?: string\n} & Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n\nfunction DataTableResizeHandleInner<TData = unknown, TValue = unknown>(\n  {\n    header,\n    ariaLabel,\n    isVisible = true,\n    step = 10,\n    className,\n    onMouseDown,\n    onTouchStart,\n    onKeyDown,\n    ...props\n  }: DataTableResizeHandleProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const styles = useStyles()\n  const { table } = useDataTable()\n  const column = header.column\n  const contentContext = useDataTableContent()\n\n  const resolvedAriaLabel = ariaLabel\n    ? typeof ariaLabel === \"function\"\n      ? ariaLabel(column.id)\n      : ariaLabel\n    : `Resize ${column.id} column`\n\n  if (!column.getCanResize()) {\n    return null\n  }\n\n  const isResizing = column.getIsResizing()\n\n  // Wrap resize handlers to sync widths before resize starts\n  // This prevents snap/jump by syncing visual widths to stored widths\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDown?.(e)\n    if (!e.defaultPrevented) {\n      contentContext?.syncColumnWidthsBeforeResize()\n      header.getResizeHandler()(e)\n    }\n  }\n\n  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {\n    onTouchStart?.(e)\n    if (!e.defaultPrevented) {\n      contentContext?.syncColumnWidthsBeforeResize()\n      header.getResizeHandler()(e)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e)\n    if (e.defaultPrevented) return\n\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n      e.preventDefault()\n\n      const currentSize = column.getSize()\n      const minSize = column.columnDef.minSize ?? 20\n      const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER\n      const delta = e.key === \"ArrowRight\" ? step : -step\n      const newSize = Math.min(maxSize, Math.max(minSize, currentSize + delta))\n\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: newSize,\n      }))\n    } else if (e.key === \"Home\") {\n      e.preventDefault()\n\n      const minSize = column.columnDef.minSize ?? 20\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: minSize,\n      }))\n    } else if (e.key === \"End\" && column.columnDef.maxSize !== undefined) {\n      e.preventDefault()\n\n      const maxSize = column.columnDef.maxSize\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: maxSize,\n      }))\n    }\n  }\n\n  const currentSize = Math.round(column.getSize())\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-resize-handle\"\n      {...{ [SLOT_ATTR]: \"data-table-resize-handle\" }}\n      data-fs-element=\"DataTable-ResizeHandle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={resolvedAriaLabel}\n      aria-valuenow={currentSize}\n      aria-valuemin={column.columnDef.minSize ?? 20}\n      aria-valuemax={column.columnDef.maxSize}\n      tabIndex={0}\n      onMouseDown={handleMouseDown}\n      onTouchStart={handleTouchStart}\n      onKeyDown={handleKeyDown}\n      className={mergeClasses(\n        styles.handle,\n        isResizing && styles.resizing,\n        !isVisible && styles.hidden,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Resize handle for column headers.\n * Subtly visible by default, more prominent on hover and during drag.\n * Supports keyboard navigation via Left/Right arrow keys.\n */\nexport const DataTableResizeHandle = React.forwardRef(\n  DataTableResizeHandleInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableResizeHandleProps<TData, TValue> & {\n    ref?: React.Ref<HTMLDivElement>\n  }\n) => React.ReactElement | null\n"],"names":["useStyles","makeZenithStyles","tokens.grayA4","tokens.accent8","tokens.accentA8","tokens.accent9","shorthands","DataTableResizeHandleInner","header","ariaLabel","isVisible","step","className","onMouseDown","onTouchStart","onKeyDown","props","ref","styles","table","useDataTable","column","contentContext","useDataTableContent","resolvedAriaLabel","isResizing","handleMouseDown","handleTouchStart","handleKeyDown","currentSize","minSize","maxSize","delta","newSize","prev","jsx","SLOT_ATTR","mergeClasses","DataTableResizeHandle","React"],"mappings":"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"}
+{"version":3,"file":"data-table-resize-handle.js","sources":["../../../src/components/data-table/data-table-resize-handle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { Header } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\n\nconst useStyles = makeZenithStyles({\n  handle: {\n    ...boxModel,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    height: \"100%\",\n    width: \"2px\",\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n    touchAction: \"none\",\n    backgroundColor: tokens.grayA4,\n    transitionProperty: \"background-color, opacity\",\n    transitionDuration: \"75ms\",\n    \"&::before\": {\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      left: \"-3px\",\n      right: \"-3px\",\n      content: '\"\"',\n    },\n    \"&:hover\": {\n      backgroundColor: tokens.accent8,\n    },\n    \"&:focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"1px\",\n      outlineColor: tokens.accentA8,\n      backgroundColor: tokens.accent8,\n    },\n  },\n  resizing: {\n    backgroundColor: tokens.accent9,\n    \"&::before\": {\n      position: \"fixed\",\n      ...shorthands.inset(0),\n      zIndex: 50,\n      cursor: \"col-resize\",\n      content: '\"\"',\n    },\n  },\n  hidden: {\n    opacity: 0,\n    \"&:hover\": {\n      opacity: 1,\n    },\n    \"&:focus-visible\": {\n      opacity: 1,\n    },\n  },\n})\n\nexport type DataTableResizeHandleProps<TData = unknown, TValue = unknown> = {\n  /** The TanStack Table header instance */\n  header: Header<TData, TValue>\n  /** Accessible label for the resize handle. Recommended for i18n and accessibility. Receives column.id as parameter. */\n  ariaLabel?: string | ((columnId: string) => string)\n  /** Whether the handle is visible. When false, handle is hidden but becomes visible on direct hover or focus. */\n  isVisible?: boolean\n  /** Step increment in pixels for keyboard resizing. Default: 10 */\n  step?: number\n  className?: string\n} & Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n\nfunction DataTableResizeHandleInner<TData = unknown, TValue = unknown>(\n  {\n    header,\n    ariaLabel,\n    isVisible = true,\n    step = 10,\n    className,\n    onMouseDown,\n    onTouchStart,\n    onKeyDown,\n    ...props\n  }: DataTableResizeHandleProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const styles = useStyles()\n  const { table } = useDataTable()\n  const column = header.column\n  const contentContext = useDataTableContent()\n\n  const resolvedAriaLabel = ariaLabel\n    ? typeof ariaLabel === \"function\"\n      ? ariaLabel(column.id)\n      : ariaLabel\n    : `Resize ${column.id} column`\n\n  if (!column.getCanResize()) {\n    return null\n  }\n\n  const isResizing = column.getIsResizing()\n\n  // Wrap resize handlers to sync widths before resize starts\n  // This prevents snap/jump by syncing visual widths to stored widths\n  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDown?.(e)\n    if (!e.defaultPrevented) {\n      contentContext?.syncColumnWidthsBeforeResize()\n      header.getResizeHandler()(e)\n    }\n  }\n\n  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {\n    onTouchStart?.(e)\n    if (!e.defaultPrevented) {\n      contentContext?.syncColumnWidthsBeforeResize()\n      header.getResizeHandler()(e)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e)\n    if (e.defaultPrevented) return\n\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n      e.preventDefault()\n\n      const currentSize = column.getSize()\n      const minSize = column.columnDef.minSize ?? 20\n      const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER\n      const delta = e.key === \"ArrowRight\" ? step : -step\n      const newSize = Math.min(maxSize, Math.max(minSize, currentSize + delta))\n\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: newSize,\n      }))\n    } else if (e.key === \"Home\") {\n      e.preventDefault()\n\n      const minSize = column.columnDef.minSize ?? 20\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: minSize,\n      }))\n    } else if (e.key === \"End\" && column.columnDef.maxSize !== undefined) {\n      e.preventDefault()\n\n      const maxSize = column.columnDef.maxSize\n      table.setColumnSizing((prev) => ({\n        ...prev,\n        [column.id]: maxSize,\n      }))\n    }\n  }\n\n  const currentSize = Math.round(column.getSize())\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-resize-handle\"\n      {...{ [SLOT_ATTR]: \"data-table-resize-handle\" }}\n      data-fs-element=\"DataTable-ResizeHandle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={resolvedAriaLabel}\n      aria-valuenow={currentSize}\n      aria-valuemin={column.columnDef.minSize ?? 20}\n      aria-valuemax={column.columnDef.maxSize}\n      tabIndex={0}\n      onMouseDown={handleMouseDown}\n      onTouchStart={handleTouchStart}\n      onKeyDown={handleKeyDown}\n      className={mergeClasses(\n        styles.handle,\n        isResizing && styles.resizing,\n        !isVisible && styles.hidden,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Resize handle for column headers.\n * Subtly visible by default, more prominent on hover and during drag.\n * Supports keyboard navigation via Left/Right arrow keys.\n */\nexport const DataTableResizeHandle = React.forwardRef(\n  DataTableResizeHandleInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableResizeHandleProps<TData, TValue> & {\n    ref?: React.Ref<HTMLDivElement>\n  }\n) => React.ReactElement | null\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.grayA4","tokens.accent8","tokens.accentA8","tokens.accent9","shorthands","DataTableResizeHandleInner","header","ariaLabel","isVisible","step","className","onMouseDown","onTouchStart","onKeyDown","props","ref","styles","table","useDataTable","column","contentContext","useDataTableContent","resolvedAriaLabel","isResizing","handleMouseDown","handleTouchStart","handleKeyDown","currentSize","minSize","maxSize","delta","newSize","prev","jsx","SLOT_ATTR","mergeClasses","DataTableResizeHandle","React"],"mappings":"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"}