@mirror-physics/fractal-ui 0.2.0-next.76 → 0.2.0-next.78

package/dist/index.cjs

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Alert: () => Alert,
   AlertDescription: () => AlertDescription,
   AlertGhost: () => AlertGhost,
@@ -49,6 +49,7 @@ __export(index_exports, {
   Chip: () => Chip,
   ChipGhost: () => ChipGhost,
   CodeBlock: () => CodeBlock,
+  ColumnEditor: () => ColumnEditor,
   ContentSwitcher: () => ContentSwitcher,
   ContentSwitcherGhost: () => ContentSwitcherGhost,
   ConversationGhost: () => ConversationGhost,
@@ -110,7 +111,7 @@ __export(index_exports, {
   cn: () => cn,
   useEscapeDismiss: () => useEscapeDismiss
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/Button/Button.tsx
 var React = __toESM(require("react"), 1);
@@ -1413,30 +1414,294 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
   );
 }
 
-// src/components/DataTable/DataTable.tsx
+// src/components/TableLayout/TableOverflowMenu.tsx
+var import_react4 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-datatable-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("table", { className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+function TableOverflowMenu({ items, label, disabled, onSelect }) {
+  const id = (0, import_react4.useId)();
+  const trigger = (0, import_react4.useRef)(null);
+  const panel = (0, import_react4.useRef)(null);
+  const initialLast = (0, import_react4.useRef)(false);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [position, setPosition] = (0, import_react4.useState)({ top: 0, left: 0 });
+  const buttons = () => [...panel.current?.querySelectorAll("button:not(:disabled)") ?? []];
+  const close = (restore = true) => {
+    setOpen(false);
+    if (restore) trigger.current?.focus({ preventScroll: true });
+  };
+  useEscapeDismiss(100, () => close(), open);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (!open || !trigger.current || !panel.current) return;
+    const place = () => {
+      const anchor = trigger.current.getBoundingClientRect();
+      const menu = panel.current.getBoundingClientRect();
+      const above = window.innerHeight - anchor.bottom < menu.height + 8 && anchor.top > window.innerHeight - anchor.bottom;
+      setPosition({
+        top: Math.max(8, Math.min(above ? anchor.top - menu.height - 4 : anchor.bottom + 4, window.innerHeight - menu.height - 8)),
+        left: Math.max(8, Math.min(anchor.right - menu.width, window.innerWidth - menu.width - 8))
+      });
+    };
+    place();
+    const enabled = buttons();
+    (initialLast.current ? enabled[enabled.length - 1] : enabled[0])?.focus({ preventScroll: true });
+    if (enabled.length === 0) panel.current.focus({ preventScroll: true });
+    const outside = (event) => {
+      if (!panel.current?.contains(event.target) && !trigger.current?.contains(event.target)) setOpen(false);
+    };
+    const scroll = (event) => {
+      if (!panel.current?.contains(event.target)) setOpen(false);
+    };
+    const observer = new ResizeObserver(place);
+    observer.observe(panel.current);
+    document.addEventListener("pointerdown", outside);
+    window.addEventListener("scroll", scroll, true);
+    window.addEventListener("resize", place);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("pointerdown", outside);
+      window.removeEventListener("scroll", scroll, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open]);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (disabled || items.length === 0) setOpen(false);
+  }, [disabled, items.length]);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-table-overflow-trigger", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Button,
+      {
+        ref: trigger,
+        buttonType: "ghost",
+        controlSize: "sm",
+        hasIconOnly: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons9.Ellipsis, { "aria-hidden": true }),
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
+        disabled,
+        onClick: () => {
+          initialLast.current = false;
+          setOpen(!open);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            initialLast.current = event.key === "ArrowUp";
+            setOpen(true);
+          }
+        }
+      }
+    ),
+    open && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        ref: panel,
+        id,
+        role: "menu",
+        tabIndex: -1,
+        "aria-label": label,
+        className: "fractal-table-overflow-menu",
+        style: position,
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          event.stopPropagation();
+          const enabled = buttons(), index = enabled.indexOf(document.activeElement);
+          if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+          } else if (event.key === "Tab") {
+            close();
+          } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length;
+            enabled[next]?.focus();
+          } else if (event.key.length === 1 && /\S/.test(event.key)) {
+            const ordered = [...enabled.slice(index + 1), ...enabled.slice(0, index + 1)];
+            ordered.find((button) => button.textContent?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
+          }
+        },
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            disabled: item.disabled,
+            onClick: () => {
+              onSelect(item.value);
+              close();
+            },
+            children: [
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          },
+          item.value
+        ))
+      }
+    ), document.body)
+  ] });
+}
+
+// src/components/TableLayout/TableLayout.tsx
+var import_react5 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var length = (value) => typeof value === "number" ? `${value}px` : value;
+function columnStyle(column) {
+  return {
+    width: column.width,
+    "--table-column-width": !column.width || column.width.includes("%") ? void 0 : `calc(${column.width} - 1px)`,
+    "--table-column-min": length(column.minWidth),
+    "--table-column-max": length(column.maxWidth)
+  };
+}
+function useOverflow() {
+  const ref = (0, import_react5.useRef)(null);
+  const [overflow, setOverflow] = (0, import_react5.useState)(false);
+  (0, import_react5.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => setOverflow(el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1);
+    const resize = new ResizeObserver(measure);
+    const observe = () => {
+      resize.disconnect();
+      resize.observe(el);
+      for (const child of el.children) resize.observe(child);
+      measure();
+    };
+    const mutation = new MutationObserver(observe);
+    mutation.observe(el, { childList: true, subtree: true, characterData: true });
+    observe();
+    return () => {
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, []);
+  return { ref, overflow };
+}
+function TableViewport({ children, maxHeight, label }) {
+  const { ref, overflow } = useOverflow();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: "fractal-table-viewport", style: { maxHeight }, tabIndex: overflow ? 0 : void 0, role: overflow ? "region" : void 0, "aria-label": overflow ? `${label}, scrollable table` : void 0, children });
+}
+function TableCellContent({ children, label }) {
+  const { ref, overflow } = useOverflow();
+  (0, import_react5.useLayoutEffect)(() => {
+    const cell = ref.current;
+    if (!cell) return;
+    const wheel = (event) => {
+      if (event.defaultPrevented || event.ctrlKey || !event.cancelable || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
+      const range = cell.scrollWidth - cell.clientWidth;
+      if (range <= 1) return;
+      const rtl = getComputedStyle(cell).direction === "rtl";
+      const left = rtl ? -range : 0, right = rtl ? 0 : range;
+      if (event.deltaX > 0 ? cell.scrollLeft < right - 1 : cell.scrollLeft > left + 1) return;
+      const table = cell.closest(".fractal-table-viewport");
+      if (!table) return;
+      const tableRange = table.scrollWidth - table.clientWidth;
+      const tableRtl = getComputedStyle(table).direction === "rtl";
+      const tableLeft = tableRtl ? -tableRange : 0, tableRight = tableRtl ? 0 : tableRange;
+      if (event.deltaX > 0 ? table.scrollLeft >= tableRight - 1 : table.scrollLeft <= tableLeft + 1) return;
+      const unit = event.deltaMode === 1 ? parseFloat(getComputedStyle(cell).lineHeight) || 16 : event.deltaMode === 2 ? table.clientWidth : 1;
+      event.preventDefault();
+      table.scrollLeft += event.deltaX * unit;
+    };
+    cell.addEventListener("wheel", wheel, { passive: false });
+    return () => cell.removeEventListener("wheel", wheel);
+  }, [ref]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      ref,
+      className: "fractal-table-cell-scroll",
+      "data-overflow": overflow || void 0,
+      tabIndex: overflow ? 0 : void 0,
+      role: overflow ? "region" : void 0,
+      "aria-label": overflow ? `${label}, scroll horizontally for full content` : void 0,
+      onKeyDown: (event) => {
+        if (!overflow || event.target !== event.currentTarget) return;
+        if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          const el = event.currentTarget;
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight") el.scrollBy({ left: event.key === "ArrowLeft" ? -40 : 40 });
+          else el.scrollLeft = event.key === "Home" ? 0 : el.scrollWidth * (getComputedStyle(el).direction === "rtl" ? -1 : 1);
+        } else if (event.key === " " || event.key === "Enter") event.stopPropagation();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-table-cell-content", children })
+    }
+  );
+}
+
+// src/components/DataTable/DataTable.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: "fractal-datatable-thead-row", children: [
+        columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
+        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "tr",
         {
           className: "fractal-datatable-row",
-          children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
+          children: [
+            columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
+            overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) }) })
+          ]
         },
         rowIndex
       )) })
-    ] })
+    ] }) })
   ] }) });
 }
 
 // src/components/Dropdown/Dropdown.tsx
 var React12 = __toESM(require("react"), 1);
-var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var MARGIN = 4;
+var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
+
+// src/components/Dropdown/position.ts
+function positionDropdown(trigger, panel, bounds, direction, align) {
+  const gap = 4;
+  const width = Math.min(panel.width, Math.max(0, bounds.right - bounds.left));
+  let maxHeight = Math.max(0, bounds.bottom - bounds.top);
+  let left;
+  let top;
+  if (direction === "left" || direction === "right") {
+    const after = bounds.right - trigger.right - gap;
+    const before = trigger.left - bounds.left - gap;
+    let placeRight = direction === "right";
+    if (width > (placeRight ? after : before) && (placeRight ? before > after : after > before)) {
+      placeRight = !placeRight;
+    }
+    left = placeRight ? trigger.right + gap : trigger.left - width - gap;
+    top = trigger.top;
+  } else {
+    const below = Math.max(0, bounds.bottom - trigger.bottom - gap);
+    const above = Math.max(0, trigger.top - bounds.top - gap);
+    let placeAbove = direction === "up";
+    if (panel.height > (placeAbove ? above : below) && (placeAbove ? below > above : above > below)) {
+      placeAbove = !placeAbove;
+    }
+    maxHeight = Math.min(maxHeight, placeAbove ? above : below);
+    top = placeAbove ? trigger.top - Math.min(panel.height, maxHeight) - gap : trigger.bottom + gap;
+    left = align === "right" ? trigger.right - width : trigger.left;
+  }
+  const height = Math.min(panel.height, maxHeight);
+  return {
+    left: Math.max(bounds.left, Math.min(left, bounds.right - width)),
+    top: Math.max(bounds.top, Math.min(top, bounds.bottom - height)),
+    maxHeight
+  };
+}
+
+// src/components/Dropdown/Dropdown.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Dropdown({
   items,
   selectedValue,
@@ -1444,6 +1709,8 @@ function Dropdown({
   triggerLabel = "Options",
   direction = "down",
   align = "left",
+  maxHeight = 320,
+  collisionPadding = 8,
   triggerOrientation = "horizontal",
   triggerContent,
   label,
@@ -1461,69 +1728,98 @@ function Dropdown({
 }) {
   const size = controlSize ?? sizeAlias;
   const [open, setOpen] = React12.useState(false);
+  const rootRef = React12.useRef(null);
+  const menuId = React12.useId();
+  const focusOnOpen = React12.useRef(false);
   const triggerRef = React12.useRef(null);
   const panelRef = React12.useRef(null);
   const [panelStyle, setPanelStyle] = React12.useState({});
   const visibleItems = items.filter(
     (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
   );
-  if (visibleItems.length === 0) return null;
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
   const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
-  const isUp = direction === "up";
-  const isHorizontalDirection = direction === "left" || direction === "right";
-  const ChevronIcon = direction === "up" ? import_fractal_icons9.ChevronUp : direction === "left" ? import_fractal_icons9.ChevronLeft : direction === "right" ? import_fractal_icons9.ChevronRight : import_fractal_icons9.ChevronDown;
+  const ChevronIcon = direction === "up" ? import_fractal_icons10.ChevronUp : direction === "left" ? import_fractal_icons10.ChevronLeft : direction === "right" ? import_fractal_icons10.ChevronRight : import_fractal_icons10.ChevronDown;
+  useEscapeDismiss(100, () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, open);
   React12.useLayoutEffect(() => {
-    if (!open || !triggerRef.current || !panelRef.current) return;
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const panelRect = panelRef.current.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    let top;
-    let left;
-    let right;
-    if (isHorizontalDirection) {
-      const spaceRight = vw - triggerRect.right - MARGIN;
-      const spaceLeft = triggerRect.left - MARGIN;
-      let placeRight = direction === "right";
-      if (placeRight && panelRect.width > spaceRight && spaceLeft > spaceRight) {
-        placeRight = false;
-      } else if (!placeRight && panelRect.width > spaceLeft && spaceRight > spaceLeft) {
-        placeRight = true;
-      }
-      left = placeRight ? triggerRect.width + MARGIN : -(panelRect.width + MARGIN);
-      top = 0;
-      const panelBottom = triggerRect.top + panelRect.height;
-      if (panelBottom > vh - MARGIN) top -= panelBottom - (vh - MARGIN);
-      if (triggerRect.top + top < MARGIN) top += MARGIN - (triggerRect.top + top);
-    } else {
-      const spaceBelow = vh - triggerRect.bottom - MARGIN;
-      const spaceAbove = triggerRect.top - MARGIN;
-      let placeAbove = isUp;
-      if (placeAbove && panelRect.height > spaceAbove && spaceBelow > spaceAbove) {
-        placeAbove = false;
-      } else if (!placeAbove && panelRect.height > spaceBelow && spaceAbove > spaceBelow) {
-        placeAbove = true;
-      }
-      top = placeAbove ? -(panelRect.height + MARGIN) : triggerRect.height + MARGIN;
-      if (align === "right") {
-        right = 0;
-        const panelLeft = triggerRect.right - panelRect.width;
-        if (panelLeft < 0) {
-          right = void 0;
-          left = 0;
+    const root = rootRef.current;
+    const trigger = triggerRef.current;
+    const panel = panelRef.current;
+    if (!open || !root || !trigger || !panel) return;
+    const updatePosition = () => {
+      const viewport = window.visualViewport;
+      const bounds = {
+        left: viewport?.offsetLeft ?? 0,
+        top: viewport?.offsetTop ?? 0,
+        right: (viewport?.offsetLeft ?? 0) + (viewport?.width ?? document.documentElement.clientWidth),
+        bottom: (viewport?.offsetTop ?? 0) + (viewport?.height ?? document.documentElement.clientHeight)
+      };
+      for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        const style = getComputedStyle(ancestor);
+        const rect = ancestor.getBoundingClientRect();
+        if (/(auto|scroll|hidden|clip)/.test(style.overflowX)) {
+          bounds.left = Math.max(bounds.left, rect.left + ancestor.clientLeft);
+          bounds.right = Math.min(bounds.right, rect.left + ancestor.clientLeft + ancestor.clientWidth);
         }
-      } else {
-        left = 0;
-        const panelRight = triggerRect.left + panelRect.width;
-        if (panelRight > vw) {
-          left = void 0;
-          right = 0;
+        if (/(auto|scroll|hidden|clip)/.test(style.overflowY)) {
+          bounds.top = Math.max(bounds.top, rect.top + ancestor.clientTop);
+          bounds.bottom = Math.min(bounds.bottom, rect.top + ancestor.clientTop + ancestor.clientHeight);
         }
       }
+      const padding = Math.max(0, collisionPadding);
+      bounds.left += padding;
+      bounds.right = Math.max(bounds.left, bounds.right - padding);
+      bounds.top += padding;
+      bounds.bottom = Math.max(bounds.top, bounds.bottom - padding);
+      const triggerRect = trigger.getBoundingClientRect();
+      const rootRect = root.getBoundingClientRect();
+      const availableWidth = bounds.right - bounds.left;
+      const heightLimit = Math.max(0, maxHeight);
+      panel.style.maxWidth = `${availableWidth}px`;
+      panel.style.minWidth = `${Math.min(triggerRect.width, availableWidth)}px`;
+      const panelRect = panel.getBoundingClientRect();
+      const desiredHeight = Math.min(heightLimit, panel.scrollHeight + panel.offsetHeight - panel.clientHeight);
+      const position = positionDropdown(triggerRect, { width: panelRect.width, height: desiredHeight }, bounds, direction, align);
+      const nextStyle = {
+        left: position.left - rootRect.left - root.clientLeft + root.scrollLeft,
+        top: position.top - rootRect.top - root.clientTop + root.scrollTop,
+        minWidth: Math.min(triggerRect.width, availableWidth),
+        maxWidth: availableWidth,
+        maxHeight: Math.min(heightLimit, position.maxHeight)
+      };
+      for (const key of Object.keys(nextStyle)) {
+        panel.style[key] = `${nextStyle[key]}px`;
+      }
+      setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
+    };
+    updatePosition();
+    if (focusOnOpen.current) {
+      focusOnOpen.current = false;
+      const option = panel.querySelector('[aria-selected="true"]') ?? panel.querySelector('[role="option"]');
+      option?.focus({ preventScroll: true });
+      option?.scrollIntoView({ block: "nearest" });
+    }
+    const resize = new ResizeObserver(updatePosition);
+    resize.observe(root);
+    resize.observe(panel);
+    for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      resize.observe(ancestor);
     }
-    setPanelStyle({ top, left, right });
-  }, [open, direction, isHorizontalDirection, isUp, align]);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.visualViewport?.addEventListener("resize", updatePosition);
+    window.visualViewport?.addEventListener("scroll", updatePosition);
+    return () => {
+      resize.disconnect();
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.visualViewport?.removeEventListener("resize", updatePosition);
+      window.visualViewport?.removeEventListener("scroll", updatePosition);
+    };
+  }, [open, direction, align, maxHeight, collisionPadding, items, label]);
   React12.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
@@ -1534,8 +1830,9 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-control-size": size, className: cn("fractal-dropdown", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, className: cn("fractal-dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1545,6 +1842,20 @@ function Dropdown({
         disabled,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (open) {
+              const option = panelRef.current?.querySelector('[aria-selected="true"]') ?? panelRef.current?.querySelector('[role="option"]');
+              option?.focus({ preventScroll: true });
+              option?.scrollIntoView({ block: "nearest" });
+            } else {
+              focusOnOpen.current = true;
+              setOpen(true);
+            }
+          }
+        },
         "aria-label": triggerLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
@@ -1557,38 +1868,48 @@ function Dropdown({
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-            selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
-            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
+            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
           ] }),
-          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         ref: panelRef,
+        id: menuId,
+        onKeyDown: (event) => {
+          if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+          event.preventDefault();
+          const options = Array.from(panelRef.current?.querySelectorAll('[role="option"]') ?? []);
+          const current = options.indexOf(document.activeElement);
+          const index = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length;
+          options[index]?.focus({ preventScroll: true });
+          options[index]?.scrollIntoView({ block: "nearest" });
+        },
         role: "listbox",
         "aria-label": triggerLabel,
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-dropdown-label", children: label }),
+          label != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-label", children: label }),
           visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+            const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
             if (item.kind === "header") {
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(React12.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                 bottomDivider
               ] }, `header-${index}`);
             }
             const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(React12.Fragment, { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
               topDivider,
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1596,13 +1917,16 @@ function Dropdown({
                   "aria-selected": isSelected,
                   onClick: () => {
                     onSelect(item.value);
-                    if (closeOnSelect) setOpen(false);
+                    if (closeOnSelect) {
+                      setOpen(false);
+                      triggerRef.current?.focus();
+                    }
                   },
                   className: "fractal-dropdown-option",
                   children: [
-                    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                    item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
                   ]
                 }
               ),
@@ -1617,9 +1941,9 @@ function Dropdown({
 
 // src/components/Link/Link.tsx
 var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Link = React13.forwardRef(
-  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "a",
     {
       ref,
@@ -1632,13 +1956,12 @@ Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
 var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Chip = React14.forwardRef(
-  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "span",
     {
       ref,
-      "data-fractal-border-surface": tone === "neutral" ? "surface-2" : void 0,
       className: cn("fractal-chip", `fractal-chip--${tone}`, className),
       ...props
     }
@@ -1647,8 +1970,8 @@ var Chip = React14.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Checkbox({
   checked,
   indeterminate = false,
@@ -1659,7 +1982,7 @@ function Checkbox({
   onKeyDown,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       ...props,
@@ -1681,16 +2004,16 @@ function Checkbox({
         onKeyDown?.(event);
         if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Checkbox, { size: 18 }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
-      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Checkbox, { "aria-hidden": "true", size: 18 })
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Checkbox, { size: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
+      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Checkbox, { "aria-hidden": "true", size: 18 })
     }
   );
 }
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Radio({
   checked,
   className,
@@ -1700,8 +2023,8 @@ function Radio({
   onCheckedChange,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "input",
       {
         ...props,
@@ -1712,18 +2035,18 @@ function Radio({
         type: "radio"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__dot" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "fractal-radio__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__label", children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__description", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__dot" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-radio__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__label", children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__description", children: description })
     ] })
   ] });
 }
 
 // src/components/SortableTable/SortableTable.tsx
-var import_react4 = require("react");
-var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function SortableTable({
   columns,
   data,
@@ -1732,6 +2055,11 @@ function SortableTable({
   header,
   size = "md",
   embedded = false,
+  layout = "fill",
+  stickyHeader = false,
+  stickyFirstColumn = false,
+  maxHeight,
+  overflowMenu,
   className,
   defaultSort,
   defaultSortKey = void 0,
@@ -1748,8 +2076,8 @@ function SortableTable({
   onRowDoubleClick,
   rowAction
 }) {
-  const [internalKey, setInternalKey] = (0, import_react4.useState)(defaultSortKey ?? null);
-  const [internalDirection, setInternalDirection] = (0, import_react4.useState)(defaultSortDirection);
+  const [internalKey, setInternalKey] = (0, import_react6.useState)(defaultSortKey ?? null);
+  const [internalDirection, setInternalDirection] = (0, import_react6.useState)(defaultSortDirection);
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
@@ -1757,7 +2085,7 @@ function SortableTable({
   const baselineDirection = defaultSort?.direction ?? null;
   const effectiveKey = activeKey && activeDirection ? activeKey : baselineKey;
   const effectiveDirection = activeKey && activeDirection ? activeDirection : baselineDirection;
-  const sorted = (0, import_react4.useMemo)(() => {
+  const sorted = (0, import_react6.useMemo)(() => {
     if (!effectiveKey || !effectiveDirection) return data;
     const col = columns.find((c) => c.key === effectiveKey);
     if (!col) return data;
@@ -1783,7 +2111,7 @@ function SortableTable({
     });
     return copy;
   }, [data, columns, effectiveKey, effectiveDirection]);
-  const visibleRows = (0, import_react4.useMemo)(() => {
+  const visibleRows = (0, import_react6.useMemo)(() => {
     if (!pagination) return sorted;
     const pageSize = Math.max(1, pagination.pageSize);
     const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
@@ -1818,16 +2146,17 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
-        selection && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
+    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
+        selection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
+            "data-pinned-column": "selection",
             scope: "col",
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Checkbox,
               {
                 "aria-label": selection.selectAllLabel ?? "Select all rows",
@@ -1850,27 +2179,29 @@ function SortableTable({
             )
           }
         ),
-        columns.map((col) => {
+        columns.map((col, columnIndex) => {
           const isActive = activeKey === col.key && activeDirection !== null;
           if (!col.sortable) {
-            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "th",
               {
                 className: "fractal-sortable-table-th",
                 scope: "col",
-                style: { width: col.width },
-                children: col.header
+                style: columnStyle(col),
+                "data-pinned-column": columnIndex === 0 ? "data" : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header })
               },
               col.key
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "th",
             {
               className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
               scope: "col",
-              style: { width: col.width },
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              style: columnStyle(col),
+              "data-pinned-column": columnIndex === 0 ? "data" : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1881,17 +2212,18 @@ function SortableTable({
                   onClick: () => handleSortClick(col.key),
                   "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: col.header }),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.ArrowsUpDown, { size: 14 }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: col.header }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowsUpDown, { size: 14 }) })
                   ]
                 }
-              )
+              ) })
             },
             col.key
           );
-        })
+        }),
+        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
         const disabled = isRowDisabled?.(row) ?? false;
         const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
@@ -1900,7 +2232,7 @@ function SortableTable({
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "tr",
           {
             className: cn(
@@ -1924,7 +2256,7 @@ function SortableTable({
             role: interactive ? "button" : void 0,
             tabIndex: interactive ? 0 : void 0,
             children: [
-              selection && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              selection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Checkbox,
                 {
                   "aria-label": selection.getRowLabel(row),
@@ -1936,33 +2268,46 @@ function SortableTable({
                   }
                 }
               ) }),
-              columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 "td",
                 {
                   className: cn(
                     "fractal-sortable-table-td",
                     action && columnIndex === columns.length - 1 && "fractal-sortable-table-td--row-action"
                   ),
-                  style: { width: col.width, textAlign: col.align ?? "left" },
+                  style: { ...columnStyle(col), textAlign: col.align ?? "left" },
+                  "data-column-align": col.align,
+                  "data-pinned-column": columnIndex === 0 ? "data" : void 0,
                   children: [
-                    col.render(row, rowIndex),
-                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
+                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
                   ]
                 },
                 col.key
-              ))
+              )),
+              overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                "td",
+                {
+                  className: "fractal-sortable-table-td fractal-table-overflow-cell",
+                  "data-pinned-column": "overflow",
+                  onClick: (event) => event.stopPropagation(),
+                  onDoubleClick: (event) => event.stopPropagation(),
+                  onKeyDown: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: disabled || overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) })
+                }
+              )
             ]
           },
           rowIndex
         );
       }) })
-    ] })
+    ] }) })
   ] }) });
 }
 
 // src/components/Tabs/Tabs.tsx
-var import_react5 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Tabs({
   items,
   defaultValue,
@@ -1973,16 +2318,16 @@ function Tabs({
   divider = false,
   variant = "line"
 }) {
-  const reactId = (0, import_react5.useId)();
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(
+  const reactId = (0, import_react7.useId)();
+  const [internalValue, setInternalValue] = (0, import_react7.useState)(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
-  const tabListRef = (0, import_react5.useRef)(null);
-  const tabRefs = (0, import_react5.useRef)({});
-  const [indicator, setIndicator] = (0, import_react5.useState)(null);
-  (0, import_react5.useLayoutEffect)(() => {
+  const tabListRef = (0, import_react7.useRef)(null);
+  const tabRefs = (0, import_react7.useRef)({});
+  const [indicator, setIndicator] = (0, import_react7.useState)(null);
+  (0, import_react7.useLayoutEffect)(() => {
     const updateIndicator = () => {
       const activeTab = tabRefs.current[activeId];
       if (!activeTab) return;
@@ -2033,8 +2378,8 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         ref: tabListRef,
@@ -2047,7 +2392,7 @@ function Tabs({
           const isActive = item.id === activeId;
           const tabId = `${reactId}-tab-${item.id}`;
           const panelId = `${reactId}-panel-${item.id}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "button",
             {
               ref: (el) => {
@@ -2078,7 +2423,7 @@ function Tabs({
       const tabId = `${reactId}-tab-${item.id}`;
       const panelId = `${reactId}-panel-${item.id}`;
       const isActive = item.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           id: panelId,
@@ -2096,7 +2441,7 @@ function Tabs({
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
 var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React15.useRef(null);
   const buttonRefs = React15.useRef([]);
@@ -2154,7 +2499,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -2162,10 +2507,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       "aria-label": ariaLabel,
       ref: switcherRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
         items.map((item, index) => {
           const active = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "button",
             {
               className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
@@ -2197,9 +2542,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 }
 
 // src/components/Disclosure/Disclosure.tsx
-var import_react6 = require("react");
-var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Disclosure({
   title,
   meta,
@@ -2211,10 +2556,10 @@ function Disclosure({
   className,
   variant = "card"
 }) {
-  const reactId = (0, import_react6.useId)();
+  const reactId = (0, import_react8.useId)();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
-  const [internalOpen, setInternalOpen] = (0, import_react6.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react8.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -2227,7 +2572,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       className: cn(
@@ -2238,7 +2583,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "button",
           {
             type: "button",
@@ -2249,13 +2594,13 @@ function Disclosure({
             disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ChevronRight, { size: 16 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons13.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons13.ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             id: panelId,
@@ -2263,7 +2608,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -2272,18 +2617,18 @@ function Disclosure({
 }
 
 // src/components/LatticeLoader/LatticeLoader.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var LATTICE_COUNT = 160;
 var WAVE_PERIOD = 80;
 function LatticeLoader({ className, label = "Loading", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "span",
     {
       "aria-label": label,
       className: cn("fractal-lattice-loader", className),
       role: "progressbar",
       ...props,
-      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "span",
         {
           "aria-hidden": "true",
@@ -2297,10 +2642,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "aria-hidden": "true",
@@ -2316,15 +2661,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
   );
 }
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
 function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
 }
 function DataTableGhost({
@@ -2338,81 +2683,81 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { className: "fractal-ghost-table__table", children: [
-    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
 }
 function InputGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormFieldGhost, { className, labelWidth, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FormFieldGhost, { className, labelWidth, ...props });
 }
 function TextareaGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
 }
 function LabelGhost({ className, width = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
 function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelGhost, { width: labelWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "30%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: "78%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" })
   ] });
 }
 var ToggleGhost = CheckboxGhost;
 function ChipGhost({ className, width = 74, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
 }
 function LinkGhost({ className, width = 96, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
 function DropdownGhost({ className, controlSize = "md", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
 }
 function ContentSwitcherGhost({ className, options = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}, index)) });
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" })
   ] });
 }
 function PaginationGhost({ className, pages = 5, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "26%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: "46%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: "46%" })
   ] });
 }
 function PromptCardGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
 }
 function ConversationGhost({
   className,
   "aria-label": ariaLabel = "Loading conversation",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       "aria-busy": "true",
@@ -2421,54 +2766,54 @@ function ConversationGhost({
       role: "status",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "100%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "86%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "64%" })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "100%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "86%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "64%" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "92%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "78%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "58%" })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "92%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "78%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "58%" })
         ] })
       ]
     }
   );
 }
 function SortableTableGhost(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DataTableGhost, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
   ] });
 }
 function ModalGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
 }
 function SidePanelGhost({ className, title, lines = 5, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
   ] });
 }
 
 // src/components/Sidebar/Sidebar.tsx
 var React16 = __toESM(require("react"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Sidebar = React16.forwardRef(
-  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "aside",
     {
       ref,
@@ -2481,11 +2826,11 @@ var Sidebar = React16.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarHeader = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarBrand = React16.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
 function SidebarAccountMenu({
@@ -2496,7 +2841,7 @@ function SidebarAccountMenu({
   icon,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Dropdown,
     {
       align: "left",
@@ -2506,9 +2851,9 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
+      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
       triggerLabel,
       triggerVariant: "tertiary"
@@ -2516,15 +2861,15 @@ function SidebarAccountMenu({
   );
 }
 var SidebarNav = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
 var SidebarSection = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React16.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "button",
     {
       ref,
@@ -2534,28 +2879,60 @@ var SidebarNavItem = React16.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
 var SidebarFooter = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
-var import_react_dom3 = require("react-dom");
-var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var React17 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
+var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
+  const bodyRef = React17.useRef(null);
+  const [scrollEdges, setScrollEdges] = React17.useState({ above: false, below: false });
+  React17.useLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!open || !body) return;
+    const measure = () => {
+      const maxScroll = Math.max(0, body.scrollHeight - body.clientHeight);
+      const top = Math.max(0, Math.min(body.scrollTop, maxScroll));
+      const above = maxScroll > 1 && top > 0;
+      const below = maxScroll - top > 1;
+      setScrollEdges((previous) => previous.above === above && previous.below === below ? previous : { above, below });
+    };
+    const resize = new ResizeObserver(measure);
+    const observeContent = () => {
+      resize.disconnect();
+      resize.observe(body);
+      for (const child of body.children) resize.observe(child);
+      measure();
+    };
+    const mutations = new MutationObserver(observeContent);
+    mutations.observe(body, { childList: true, subtree: true, characterData: true, attributes: true });
+    body.addEventListener("scroll", measure, { passive: true });
+    body.addEventListener("load", measure, true);
+    observeContent();
+    return () => {
+      resize.disconnect();
+      mutations.disconnect();
+      body.removeEventListener("scroll", measure);
+      body.removeEventListener("load", measure, true);
+    };
+  }, [open, loading]);
   if (!open) return null;
-  return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -2564,15 +2941,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-side-panel__heading", children: [
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fractal_icons13.Close, { size: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fractal_icons14.Close, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
         ]
       }
     ) }),
@@ -2581,18 +2958,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-var React17 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Textarea = React17.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Textarea = React18.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var TextButton = React18.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TextButton = React19.forwardRef(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "button",
     {
       ref,
@@ -2600,9 +2977,9 @@ var TextButton = React18.forwardRef(
       type: "button",
       ...props,
       children: [
-        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children }),
-        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
       ]
     }
   )
@@ -2610,9 +2987,9 @@ var TextButton = React18.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-var React19 = __toESM(require("react"), 1);
-var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var React20 = __toESM(require("react"), 1);
+var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function FileDropzone({
   files,
   onFilesChange,
@@ -2623,17 +3000,17 @@ function FileDropzone({
   description = "Files stay attached to this record.",
   className
 }) {
-  const inputId = React19.useId();
-  const inputRef = React19.useRef(null);
-  const [isDragging, setIsDragging] = React19.useState(false);
+  const inputId = React20.useId();
+  const inputRef = React20.useRef(null);
+  const [isDragging, setIsDragging] = React20.useState(false);
   const addFiles = (nextFiles) => {
     if (disabled) return;
     const additions = Array.from(nextFiles);
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
       {
         ref: inputRef,
@@ -2649,7 +3026,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -2672,18 +3049,18 @@ function FileDropzone({
           addFiles(event.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fractal_icons15.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           className: "fractal-file-dropzone__remove",
@@ -2691,7 +3068,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.Close, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fractal_icons15.Close, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })
@@ -2704,8 +3081,8 @@ function formatFileSize(bytes) {
 }
 
 // src/components/Pagination/Pagination.tsx
-var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_fractal_icons16 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Pagination({
   page,
   pageSize,
@@ -2721,10 +3098,10 @@ function Pagination({
   const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const end = Math.min(currentPage * pageSize, totalItems);
   const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fractal-pagination__controls", children: [
-      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Dropdown,
         {
           align: "right",
@@ -2741,7 +3118,7 @@ function Pagination({
           triggerVariant: "tertiary"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2750,15 +3127,15 @@ function Pagination({
           title: "Previous page",
           disabled: currentPage === 1 || totalItems === 0,
           onClick: () => onPageChange(currentPage - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fractal_icons15.ArrowLeft, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons16.ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2767,12 +3144,195 @@ function Pagination({
           title: "Next page",
           disabled: currentPage === totalPages || totalItems === 0,
           onClick: () => onPageChange(currentPage + 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fractal_icons15.ArrowRight, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons16.ArrowRight, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
   ] });
 }
+
+// src/components/ColumnEditor/ColumnEditor.tsx
+var React21 = __toESM(require("react"), 1);
+var import_fractal_icons17 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var equal = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
+function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLabel = "Hidden columns", className }) {
+  const [open, setOpen] = React21.useState(false);
+  const [preview, setPreview] = React21.useState(null);
+  const [announcement, setAnnouncement] = React21.useState("");
+  const root = React21.useRef(null);
+  const trigger = React21.useRef(null);
+  const panel = React21.useRef(null);
+  const drag = React21.useRef(null);
+  const positions = React21.useRef(null);
+  const id = React21.useId();
+  function capturePositions() {
+    positions.current = new Map(Array.from(panel.current?.querySelectorAll("[data-column-editor-item]") ?? []).map((row2) => [row2.dataset.columnEditorItem, row2.getBoundingClientRect()]));
+  }
+  React21.useLayoutEffect(() => {
+    const before = positions.current;
+    positions.current = null;
+    if (!before || !panel.current || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const styles = getComputedStyle(panel.current);
+    const token = styles.getPropertyValue("--duration-normal").trim();
+    const duration = parseFloat(token) * (token.endsWith("ms") ? 1 : 1e3);
+    const easing = styles.getPropertyValue("--ease-out").trim();
+    for (const row2 of panel.current.querySelectorAll("[data-column-editor-item]")) {
+      const previous = before.get(row2.dataset.columnEditorItem);
+      row2.getAnimations().filter((animation) => animation.id === "fractal-column-position").forEach((animation) => animation.cancel());
+      if (!previous) continue;
+      const next = row2.getBoundingClientRect();
+      const x = previous.left - next.left, y = previous.top - next.top;
+      if (Math.abs(x) < 1 && Math.abs(y) < 1) continue;
+      row2.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "translate(0, 0)" }], { duration, easing, id: "fractal-column-position" });
+    }
+  });
+  const valid = [...new Set(value)].filter((key) => items.some((item) => item.id === key));
+  const committed = [...valid, ...items.filter((item) => item.required && !valid.includes(item.id)).map((item) => item.id)];
+  const visible = preview?.visible ?? committed;
+  const hidden = preview?.hidden ?? items.filter((item) => !committed.includes(item.id)).map((item) => item.id);
+  function cancel() {
+    capturePositions();
+    drag.current = null;
+    setPreview(null);
+  }
+  React21.useEffect(() => {
+    if (!open) return;
+    panel.current?.focus();
+    function outside(event) {
+      if (!drag.current && !root.current?.contains(event.target)) setOpen(false);
+    }
+    function escape(event) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      if (drag.current) {
+        capturePositions();
+        drag.current = null;
+        setPreview(null);
+        setAnnouncement("Reordering cancelled");
+      } else {
+        setOpen(false);
+        trigger.current?.focus();
+      }
+    }
+    function blur(event) {
+      if (event.relatedTarget instanceof Node && !root.current?.contains(event.relatedTarget)) setOpen(false);
+    }
+    const element = root.current;
+    document.addEventListener("pointerdown", outside);
+    document.addEventListener("keydown", escape);
+    element?.addEventListener("focusout", blur);
+    return () => {
+      document.removeEventListener("pointerdown", outside);
+      document.removeEventListener("keydown", escape);
+      element?.removeEventListener("focusout", blur);
+    };
+  }, [open]);
+  function commit(next, message) {
+    capturePositions();
+    onChange(next);
+    setAnnouncement(message);
+  }
+  function move(key, offset) {
+    const index = committed.indexOf(key);
+    const next = committed.filter((item) => item !== key);
+    if (offset > 0 && index === committed.length - 1 && !items.find((item) => item.id === key)?.required) {
+      commit(next, `${items.find((item) => item.id === key)?.label} hidden`);
+      return;
+    }
+    next.splice(Math.max(0, Math.min(next.length, index + offset)), 0, key);
+    commit(next, `${items.find((item) => item.id === key)?.label} moved ${offset < 0 ? "up" : "down"}`);
+  }
+  function start(event, key) {
+    if (event.button !== 0 || event.target.closest("button")) return;
+    drag.current = { id: key, pointerId: event.pointerId, x: event.clientX, y: event.clientY, active: false, visible: [...committed], hidden: [...hidden] };
+    panel.current?.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  }
+  function update(event) {
+    const current = drag.current;
+    if (!current || event.pointerId !== current.pointerId) return;
+    if (!current.active && Math.hypot(event.clientX - current.x, event.clientY - current.y) < 4) return;
+    current.active = true;
+    const container = panel.current;
+    if (!container) return;
+    const bounds = container.getBoundingClientRect();
+    const hiddenGroup = container.querySelector('[data-column-editor-group="hidden"]');
+    const inside = event.clientX >= bounds.left && event.clientX <= bounds.right && event.clientY >= bounds.top && event.clientY <= bounds.bottom;
+    if (!inside) return;
+    const destination = event.clientY >= hiddenGroup.getBoundingClientRect().top ? "hidden" : "visible";
+    if (destination === "hidden" && items.find((item) => item.id === current.id)?.required) return;
+    const slots = Array.from(container.querySelectorAll(`[data-column-editor-group="${destination}"] [data-column-editor-item]`));
+    const localY = event.clientY - bounds.top + container.scrollTop - container.clientTop;
+    const ownSlot = slots.find((row2) => row2.dataset.columnEditorItem === current.id);
+    if (ownSlot && localY >= ownSlot.offsetTop && localY <= ownSlot.offsetTop + ownSlot.offsetHeight) return;
+    const nextVisible = current.visible.filter((key) => key !== current.id);
+    let nextHidden = current.hidden.filter((key) => key !== current.id);
+    if (destination === "visible") {
+      const index = slots.filter((row2) => row2.dataset.columnEditorItem !== current.id && localY > row2.offsetTop + row2.offsetHeight / 2).length;
+      nextVisible.splice(index, 0, current.id);
+    } else {
+      nextHidden.push(current.id);
+      nextHidden = items.filter((item) => nextHidden.includes(item.id)).map((item) => item.id);
+    }
+    if (!equal(nextVisible, current.visible) || !equal(nextHidden, current.hidden)) {
+      capturePositions();
+      current.visible = nextVisible;
+      current.hidden = nextHidden;
+    }
+    setPreview({ visible: current.visible, hidden: current.hidden, active: current.id });
+    if (event.clientY < bounds.top + 32) container.scrollTop -= 12;
+    else if (event.clientY > bounds.bottom - 32) container.scrollTop += 12;
+  }
+  function finish(event) {
+    const current = drag.current;
+    if (!current || current.pointerId !== event.pointerId) return;
+    const hit = document.elementFromPoint(event.clientX, event.clientY);
+    if (current.active && hit && panel.current?.contains(hit)) commit(current.visible, "Column order updated");
+    cancel();
+    if (panel.current?.hasPointerCapture(event.pointerId)) panel.current.releasePointerCapture(event.pointerId);
+  }
+  function row(key, isHidden, index) {
+    const item = items.find((item2) => item2.id === key);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      "li",
+      {
+        className: "fractal-column-editor__row",
+        "data-column-editor-item": key,
+        "data-hidden": isHidden || void 0,
+        "data-dragging": preview?.active === key || void 0,
+        onPointerDown: (event) => start(event, key),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.DotsSixVertical, { className: "fractal-column-editor__grip", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-column-editor__name", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fractal-column-editor__actions", onPointerDown: (event) => event.stopPropagation(), children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.Eye, { "aria-hidden": "true" }), "aria-label": `Show ${item.label} column`, onClick: () => commit([...committed, key], `${item.label} shown`) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.ArrowUp, { "aria-hidden": "true" }), "aria-label": `Move ${item.label} up`, disabled: index === 0, onClick: () => move(key, -1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: index === visible.length - 1 && !item.required ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.ArrowDown, { "aria-hidden": "true" }), "aria-label": index === visible.length - 1 && !item.required ? `Hide ${item.label} column` : `Move ${item.label} down`, disabled: index === visible.length - 1 && item.required, onClick: () => move(key, 1) })
+          ] }) })
+        ]
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("fractal-column-editor", className), ref: root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { ref: trigger, controlSize: "lg", buttonType: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.Gear, { "aria-hidden": "true" }), iconPosition: "right", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => {
+      cancel();
+      setOpen((current) => !current);
+    }, children: label }),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { id, className: "fractal-column-editor__panel", ref: panel, role: "dialog", "data-dragging": Boolean(preview) || void 0, "aria-label": label, tabIndex: -1, onPointerMove: update, onPointerUp: finish, onPointerCancel: cancel, onLostPointerCapture: cancel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "fractal-column-editor__list", "data-column-editor-group": "visible", "aria-label": "Visible columns", children: visible.map((key, index) => row(key, false, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { "data-column-editor-group": "hidden", className: "fractal-column-editor__hidden", "aria-label": hiddenLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fractal-column-editor__divider", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
+          hiddenLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "fractal-column-editor__list", children: hidden.map((key, index) => row(key, true, index)) }),
+        !hidden.length ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "fractal-column-editor__empty", children: "Drag columns here to hide them." }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-column-editor__announcement", role: "status", "aria-live": "polite", children: announcement })
+    ] }) : null
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -2794,6 +3354,7 @@ function Pagination({
   Chip,
   ChipGhost,
   CodeBlock,
+  ColumnEditor,
   ContentSwitcher,
   ContentSwitcherGhost,
   ConversationGhost,