@inf-monkeys-tech/monkeys-design 0.4.31 → 0.4.33

package/dist/index.mjs

@@ -1,7 +1,8 @@
-import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useCallback, Fragment as Fragment$1, useLayoutEffect, useContext } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useCallback, useContext, useLayoutEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
+import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 var __create = Object.create;
@@ -4521,7 +4522,7 @@ var require_lodash = __commonJS({
         function valuesIn(object) {
           return object == null ? [] : baseValues(object, keysIn(object));
         }
-        function clamp3(number, lower, upper) {
+        function clamp5(number, lower, upper) {
           if (upper === undefined2) {
             upper = lower;
             lower = undefined2;
@@ -5198,7 +5199,7 @@ var require_lodash = __commonJS({
         lodash.camelCase = camelCase;
         lodash.capitalize = capitalize;
         lodash.ceil = ceil;
-        lodash.clamp = clamp3;
+        lodash.clamp = clamp5;
         lodash.clone = clone;
         lodash.cloneDeep = cloneDeep;
         lodash.cloneDeepWith = cloneDeepWith;
@@ -8553,7 +8554,41 @@ var baseSlots = {
   tableEmptyActions: "mt-4 flex flex-wrap items-center justify-center gap-2",
   tableLoadingRow: "border-b border-border/60",
   tableLoadingCell: "px-3 py-2",
-  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70"
+  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70",
+  layoutRoot: cn(
+    "grid min-w-0 overflow-hidden grid-rows-[auto_minmax(0,1fr)_auto] gap-3 rounded-lg border border-border/70 bg-background p-3 text-foreground",
+    motionBase
+  ),
+  layoutRootFull: "h-full min-h-0",
+  layoutHeader: "min-w-0",
+  layoutBody: "grid min-h-0 min-w-0 overflow-hidden gap-3",
+  layoutSidebar: "min-h-0 min-w-0 overflow-hidden",
+  layoutMain: "min-h-0 min-w-0 overflow-hidden",
+  layoutAside: "min-h-0 min-w-0 overflow-hidden",
+  layoutFooter: "min-w-0",
+  layoutPane: cn(
+    "h-full max-h-full min-h-0 min-w-0 overflow-hidden rounded-lg bg-background text-foreground",
+    motionBase
+  ),
+  layoutPaneScrollable: "overflow-auto",
+  layoutPaneBordered: "border border-border/70",
+  layoutPaneMuted: "bg-muted/25",
+  layoutPaneSoft: "bg-background/95 shadow-sm",
+  layoutPaneTransparent: "bg-transparent shadow-none",
+  layoutSplitRoot: "grid min-h-0 min-w-0 overflow-hidden",
+  layoutSplitHorizontal: "grid-flow-col",
+  layoutSplitVertical: "grid-flow-row",
+  layoutSplitPane: "min-h-0 min-w-0 overflow-hidden",
+  layoutSplitPrimary: "",
+  layoutSplitSecondary: "",
+  layoutResizeHandle: cn(
+    "group/resize relative z-10 flex shrink-0 items-center justify-center bg-transparent text-muted-foreground hover:bg-border/60 active:bg-border/70 focus-visible:bg-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    motionInteractive
+  ),
+  layoutResizeHandleHorizontal: "w-2 cursor-col-resize",
+  layoutResizeHandleVertical: "h-2 cursor-row-resize",
+  layoutResizeHandleDisabled: "cursor-default opacity-60",
+  layoutResizeHandleIndicator: "rounded-full bg-muted-foreground/45 group-hover/resize:bg-primary/70"
 };
 var densitySlots = {
   compact: {
@@ -8627,7 +8662,12 @@ var densitySlots = {
     tableCell: "px-2 py-1.5 text-xs",
     tableHeadLabel: "text-[11px]",
     tableHeadDescription: "text-[10px] leading-3",
-    tableLoadingCell: "px-2 py-1.5"
+    tableLoadingCell: "px-2 py-1.5",
+    layoutRoot: "gap-2 p-2",
+    layoutBody: "gap-2",
+    layoutPane: "rounded-md text-xs",
+    layoutResizeHandleHorizontal: "w-1.5",
+    layoutResizeHandleVertical: "h-1.5"
   },
   default: {
     buttonBase: "h-9"
@@ -8678,7 +8718,12 @@ var densitySlots = {
     menuSubTrigger: "min-h-9 px-3 py-2",
     tableHead: "h-12 px-4 py-3",
     tableCell: "px-4 py-3",
-    tableLoadingCell: "px-4 py-3"
+    tableLoadingCell: "px-4 py-3",
+    layoutRoot: "gap-4 p-4",
+    layoutBody: "gap-4",
+    layoutPane: "rounded-xl",
+    layoutResizeHandleHorizontal: "w-2.5",
+    layoutResizeHandleVertical: "h-2.5"
   }
 };
 var radiusSlots = {
@@ -8722,7 +8767,9 @@ var radiusSlots = {
     menuSubContent: "rounded-none",
     tableContainer: "rounded-none",
     tableEmptyIcon: "rounded-none",
-    tableLoadingSkeleton: "rounded-none"
+    tableLoadingSkeleton: "rounded-none",
+    layoutRoot: "rounded-none",
+    layoutPane: "rounded-none"
   },
   sm: {
     buttonBase: "rounded-sm",
@@ -8764,7 +8811,9 @@ var radiusSlots = {
     menuSubContent: "rounded-sm",
     tableContainer: "rounded-sm",
     tableEmptyIcon: "rounded-sm",
-    tableLoadingSkeleton: "rounded-sm"
+    tableLoadingSkeleton: "rounded-sm",
+    layoutRoot: "rounded-sm",
+    layoutPane: "rounded-sm"
   },
   md: {},
   lg: {
@@ -8801,7 +8850,9 @@ var radiusSlots = {
     menuSubContent: "rounded-lg",
     tableContainer: "rounded-xl",
     tableEmptyIcon: "rounded-xl",
-    tableLoadingSkeleton: "rounded-lg"
+    tableLoadingSkeleton: "rounded-lg",
+    layoutRoot: "rounded-xl",
+    layoutPane: "rounded-xl"
   },
   xl: {
     buttonBase: "rounded-xl",
@@ -8839,7 +8890,9 @@ var radiusSlots = {
     menuSubContent: "rounded-xl",
     tableContainer: "rounded-2xl",
     tableEmptyIcon: "rounded-2xl",
-    tableLoadingSkeleton: "rounded-xl"
+    tableLoadingSkeleton: "rounded-xl",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
   },
   full: {
     buttonBase: "rounded-full",
@@ -8881,7 +8934,9 @@ var radiusSlots = {
     menuSubContent: "rounded-2xl",
     tableContainer: "rounded-2xl",
     tableEmptyIcon: "rounded-full",
-    tableLoadingSkeleton: "rounded-full"
+    tableLoadingSkeleton: "rounded-full",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
   }
 };
 var borderSlots = {
@@ -8923,7 +8978,10 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-transparent",
     tableRow: "border-transparent",
     tableEmptyRow: "border-transparent",
-    tableLoadingRow: "border-transparent"
+    tableLoadingRow: "border-transparent",
+    layoutRoot: "border-transparent",
+    layoutPaneBordered: "border-transparent",
+    layoutResizeHandle: "bg-transparent hover:bg-transparent active:bg-transparent focus-visible:bg-transparent"
   },
   subtle: {
     buttonDefault: "border-border/60",
@@ -8963,7 +9021,9 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-border/60",
     tableRow: "border-border/50",
     tableEmptyRow: "border-border/50",
-    tableLoadingRow: "border-border/50"
+    tableLoadingRow: "border-border/50",
+    layoutRoot: "border-border/60",
+    layoutPaneBordered: "border-border/60"
   },
   solid: {},
   strong: {
@@ -9004,7 +9064,10 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-foreground/20",
     tableRow: "border-foreground/15",
     tableEmptyRow: "border-foreground/15",
-    tableLoadingRow: "border-foreground/15"
+    tableLoadingRow: "border-foreground/15",
+    layoutRoot: "border-foreground/20",
+    layoutPaneBordered: "border-foreground/20",
+    layoutResizeHandle: "hover:bg-foreground/15 active:bg-foreground/20 focus-visible:bg-foreground/15"
   }
 };
 var backgroundSlots = {
@@ -9046,7 +9109,11 @@ var backgroundSlots = {
     tableFooter: "bg-muted/35",
     tableFooterBar: "bg-muted/30 shadow-none",
     tableRowInteractive: "cursor-pointer hover:bg-muted/45",
-    tableLoadingSkeleton: "bg-muted"
+    tableLoadingSkeleton: "bg-muted",
+    layoutRoot: "bg-card",
+    layoutPane: "bg-card",
+    layoutPaneMuted: "bg-muted/35",
+    layoutResizeHandle: "hover:bg-border/70 active:bg-border/80 focus-visible:bg-border/70"
   },
   soft: {
     buttonDefault: "bg-muted/30 hover:bg-muted/55",
@@ -9082,7 +9149,10 @@ var backgroundSlots = {
     tableFooter: "bg-muted/25",
     tableFooterBar: "bg-muted/25 shadow-none",
     tableRowInteractive: "cursor-pointer hover:bg-muted/35",
-    tableLoadingSkeleton: "bg-muted/65"
+    tableLoadingSkeleton: "bg-muted/65",
+    layoutRoot: "bg-background/95 shadow-sm",
+    layoutPane: "bg-background/95 shadow-sm",
+    layoutPaneSoft: "bg-background/95 shadow-md"
   },
   glass: {
     buttonBase: "backdrop-blur-md",
@@ -9143,7 +9213,13 @@ var backgroundSlots = {
     tableRow: "border-white/10",
     tableRowInteractive: "cursor-pointer hover:bg-white/[0.08]",
     tableHeadLabel: "text-foreground",
-    tableLoadingSkeleton: "bg-white/[0.16]"
+    tableLoadingSkeleton: "bg-white/[0.16]",
+    layoutRoot: "border-white/10 bg-white/[0.05] shadow-none backdrop-blur-md",
+    layoutPane: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    layoutPaneMuted: "bg-white/[0.08]",
+    layoutPaneSoft: "bg-white/[0.10] shadow-none backdrop-blur-md",
+    layoutResizeHandle: "text-foreground/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
   },
   dark: {
     buttonBase: "border-white/15 text-white shadow-lg backdrop-blur",
@@ -9272,7 +9348,13 @@ var backgroundSlots = {
     menuSubTrigger: "text-white focus:bg-white/[0.10] focus:text-white data-[highlighted]:bg-white/[0.10] data-[highlighted]:text-white data-[state=open]:bg-white/[0.12]",
     menuSubTriggerIcon: "text-white/55",
     menuSubContent: "border-white/10 bg-slate-950 text-white shadow-2xl",
-    tableLoadingSkeleton: "bg-white/[0.14]"
+    tableLoadingSkeleton: "bg-white/[0.14]",
+    layoutRoot: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPane: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPaneMuted: "bg-white/[0.06]",
+    layoutPaneSoft: "bg-white/[0.08] shadow-none",
+    layoutResizeHandle: "text-white/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
   }
 };
 var presetDefaults = {
@@ -11130,6 +11212,432 @@ var BaseInput = forwardRef(
     );
   }
 );
+var DEFAULT_SPLIT_SIZE = 50;
+var DEFAULT_MIN_SIZE = 20;
+var DEFAULT_MAX_SIZE = 80;
+var DEFAULT_KEYBOARD_STEP = 2.5;
+function toCssSize(value, fallback) {
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value < 0) {
+      throw new Error("BaseLayout size and gap props must be finite, non-negative numbers.");
+    }
+    return `${value}px`;
+  }
+  return value ?? fallback;
+}
+function assertPercent(name, value) {
+  if (!Number.isFinite(value)) {
+    throw new Error(`BaseLayoutSplit ${name} must be a finite number.`);
+  }
+  if (value < 0 || value > 100) {
+    throw new Error(`BaseLayoutSplit ${name} must be between 0 and 100.`);
+  }
+  return value;
+}
+function clamp(value, min5, max5) {
+  return Math.min(Math.max(value, min5), max5);
+}
+function resolveSplitBounds({
+  minSize = DEFAULT_MIN_SIZE,
+  maxSize = DEFAULT_MAX_SIZE,
+  keyboardStep = DEFAULT_KEYBOARD_STEP
+}) {
+  const min5 = assertPercent("minSize", minSize);
+  const max5 = assertPercent("maxSize", maxSize);
+  if (min5 > max5) {
+    throw new Error("BaseLayoutSplit minSize cannot be greater than maxSize.");
+  }
+  if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {
+    throw new Error("BaseLayoutSplit keyboardStep must be a finite positive number.");
+  }
+  return { min: min5, max: max5, keyboardStep };
+}
+function resolveSplitSize(name, value, fallback, min5, max5) {
+  return clamp(assertPercent(name, value ?? fallback), min5, max5);
+}
+function getSeparatorOrientation(orientation) {
+  return orientation === "horizontal" ? "vertical" : "horizontal";
+}
+function BaseLayout({
+  header,
+  sidebar,
+  aside,
+  footer,
+  children,
+  sidebarSize,
+  asideSize,
+  gap,
+  fullHeight,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...layoutProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const hasHeader = hasRenderableNode(header);
+  const hasSidebar = hasRenderableNode(sidebar);
+  const hasAside = hasRenderableNode(aside);
+  const hasFooter = hasRenderableNode(footer);
+  const bodyColumns = [
+    hasSidebar ? "var(--base-layout-sidebar-size)" : void 0,
+    "minmax(0, 1fr)",
+    hasAside ? "var(--base-layout-aside-size)" : void 0
+  ].filter(Boolean).join(" ");
+  const layoutRows = [
+    hasHeader ? "auto" : void 0,
+    "minmax(0, 1fr)",
+    hasFooter ? "auto" : void 0
+  ].filter(Boolean).join(" ");
+  const resolvedGap = gap !== void 0 ? toCssSize(gap, "0px") : void 0;
+  const layoutStyle = {
+    ...theme.styles.layout,
+    "--base-layout-sidebar-size": toCssSize(sidebarSize, "16rem"),
+    "--base-layout-aside-size": toCssSize(asideSize, "20rem"),
+    gridTemplateRows: layoutRows,
+    ...resolvedGap !== void 0 ? { gap: resolvedGap } : {},
+    ...style
+  };
+  const bodyStyle = {
+    ...theme.styles.layoutBody,
+    gridTemplateColumns: bodyColumns,
+    ...resolvedGap !== void 0 ? { gap: resolvedGap } : {}
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...layoutProps,
+      className: cn(
+        theme.slots.layoutRoot,
+        fullHeight && theme.slots.layoutRootFull,
+        classNames?.root,
+        className
+      ),
+      style: layoutStyle,
+      children: [
+        hasHeader ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(theme.slots.layoutHeader, classNames?.header),
+            style: theme.styles.layoutHeader,
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(theme.slots.layoutBody, classNames?.body),
+            style: bodyStyle,
+            children: [
+              hasSidebar ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: cn(theme.slots.layoutSidebar, classNames?.sidebar),
+                  style: theme.styles.layoutSidebar,
+                  children: sidebar
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "main",
+                {
+                  className: cn(theme.slots.layoutMain, classNames?.main),
+                  style: theme.styles.layoutMain,
+                  children
+                }
+              ),
+              hasAside ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: cn(theme.slots.layoutAside, classNames?.aside),
+                  style: theme.styles.layoutAside,
+                  children: aside
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasFooter ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(theme.slots.layoutFooter, classNames?.footer),
+            style: theme.styles.layoutFooter,
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function BaseLayoutPane({
+  as = "div",
+  scrollable = false,
+  bordered = true,
+  surface = "default",
+  children,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...paneProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const Component = as;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...paneProps,
+      className: cn(
+        theme.slots.layoutPane,
+        scrollable && theme.slots.layoutPaneScrollable,
+        bordered && theme.slots.layoutPaneBordered,
+        surface === "muted" && theme.slots.layoutPaneMuted,
+        surface === "soft" && theme.slots.layoutPaneSoft,
+        surface === "transparent" && theme.slots.layoutPaneTransparent,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.layoutPane,
+        ...style
+      },
+      children
+    }
+  );
+}
+function BaseLayoutResizeHandle({
+  orientation = "horizontal",
+  resizable = false,
+  disabled = false,
+  size,
+  minSize,
+  maxSize,
+  label = "Resize panels",
+  appearance,
+  className,
+  classNames,
+  style,
+  tabIndex,
+  ...handleProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const interactive = resizable && !disabled;
+  const separatorOrientation = getSeparatorOrientation(orientation);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...handleProps,
+      role: interactive ? "separator" : void 0,
+      "aria-label": interactive ? label : void 0,
+      "aria-orientation": interactive ? separatorOrientation : void 0,
+      "aria-valuemin": interactive ? minSize : void 0,
+      "aria-valuemax": interactive ? maxSize : void 0,
+      "aria-valuenow": interactive ? size : void 0,
+      "aria-disabled": interactive ? void 0 : true,
+      tabIndex: interactive ? tabIndex ?? 0 : void 0,
+      className: cn(
+        theme.slots.layoutResizeHandle,
+        orientation === "horizontal" ? theme.slots.layoutResizeHandleHorizontal : theme.slots.layoutResizeHandleVertical,
+        !interactive && theme.slots.layoutResizeHandleDisabled,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.layoutResizeHandle,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            theme.slots.layoutResizeHandleIndicator,
+            orientation === "horizontal" ? "h-8 w-px" : "h-px w-8",
+            classNames?.indicator
+          )
+        }
+      )
+    }
+  );
+}
+function BaseLayoutSplit({
+  orientation = "horizontal",
+  primary,
+  secondary,
+  children,
+  resizable = false,
+  size,
+  defaultSize,
+  minSize,
+  maxSize,
+  gap,
+  keyboardStep,
+  resizeLabel,
+  appearance,
+  className,
+  classNames,
+  style,
+  onSizeChange,
+  ...splitProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const bounds = resolveSplitBounds({ minSize, maxSize, keyboardStep });
+  const initialSize = resolveSplitSize(
+    "defaultSize",
+    defaultSize,
+    DEFAULT_SPLIT_SIZE,
+    bounds.min,
+    bounds.max
+  );
+  const [uncontrolledSize, setUncontrolledSize] = useState(initialSize);
+  const rootRef = useRef(null);
+  const cleanupRef = useRef(null);
+  const controlled = size !== void 0;
+  const renderedSize = resolveSplitSize(
+    "size",
+    controlled ? size : uncontrolledSize,
+    initialSize,
+    bounds.min,
+    bounds.max
+  );
+  const commitSize = useCallback(
+    (nextSize) => {
+      const clampedSize = clamp(nextSize, bounds.min, bounds.max);
+      if (!controlled) {
+        setUncontrolledSize(clampedSize);
+      }
+      onSizeChange?.(clampedSize);
+    },
+    [bounds.max, bounds.min, controlled, onSizeChange]
+  );
+  const updateFromPointer = useCallback(
+    (event) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const rect = root.getBoundingClientRect();
+      const total = orientation === "horizontal" ? rect.width : rect.height;
+      if (total <= 0) return;
+      const offset = orientation === "horizontal" ? event.clientX - rect.left : event.clientY - rect.top;
+      commitSize(offset / total * 100);
+    },
+    [commitSize, orientation]
+  );
+  const stopResize = useCallback(() => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+  }, []);
+  useEffect(() => stopResize, [stopResize]);
+  const handlePointerDown = (event) => {
+    if (!resizable) return;
+    event.preventDefault();
+    stopResize();
+    updateFromPointer(event);
+    const handleMove = (nextEvent) => {
+      updateFromPointer(nextEvent);
+    };
+    const handleStop = () => {
+      stopResize();
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleStop, { once: true });
+    window.addEventListener("pointercancel", handleStop, { once: true });
+    cleanupRef.current = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleStop);
+      window.removeEventListener("pointercancel", handleStop);
+    };
+  };
+  const handleKeyDown = (event) => {
+    if (!resizable) return;
+    const step = event.shiftKey ? bounds.keyboardStep * 4 : bounds.keyboardStep;
+    let nextSize;
+    if (event.key === "Home") nextSize = bounds.min;
+    if (event.key === "End") nextSize = bounds.max;
+    if (orientation === "horizontal" && event.key === "ArrowLeft") {
+      nextSize = renderedSize - step;
+    }
+    if (orientation === "horizontal" && event.key === "ArrowRight") {
+      nextSize = renderedSize + step;
+    }
+    if (orientation === "vertical" && event.key === "ArrowUp") {
+      nextSize = renderedSize - step;
+    }
+    if (orientation === "vertical" && event.key === "ArrowDown") {
+      nextSize = renderedSize + step;
+    }
+    if (nextSize === void 0) return;
+    event.preventDefault();
+    commitSize(nextSize);
+  };
+  const resolvedGap = gap !== void 0 ? toCssSize(gap, "0px") : void 0;
+  const resizeTrack = resolvedGap !== void 0 ? "var(--base-layout-split-gap)" : "auto";
+  const resizeHandleStyle = resolvedGap !== void 0 ? orientation === "horizontal" ? { width: "var(--base-layout-split-gap)" } : { height: "var(--base-layout-split-gap)" } : void 0;
+  const splitStyle = {
+    ...theme.styles.layoutSplit,
+    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: resizable ? `${renderedSize}% ${resizeTrack} minmax(0, 1fr)` : `${renderedSize}% minmax(0, 1fr)`,
+    ...resizable ? { gap: 0 } : {},
+    ...resolvedGap !== void 0 ? {
+      "--base-layout-split-gap": resolvedGap,
+      ...resizable ? {} : { gap: resolvedGap }
+    } : {},
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...splitProps,
+      ref: rootRef,
+      className: cn(
+        theme.slots.layoutSplitRoot,
+        orientation === "horizontal" ? theme.slots.layoutSplitHorizontal : theme.slots.layoutSplitVertical,
+        classNames?.root,
+        className
+      ),
+      style: splitStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              theme.slots.layoutSplitPane,
+              theme.slots.layoutSplitPrimary,
+              classNames?.primary
+            ),
+            style: theme.styles.layoutSplitPane,
+            children: hasRenderableNode(primary) ? primary : children
+          }
+        ),
+        resizable ? /* @__PURE__ */ jsx(
+          BaseLayoutResizeHandle,
+          {
+            orientation,
+            resizable: true,
+            size: renderedSize,
+            minSize: bounds.min,
+            maxSize: bounds.max,
+            label: resizeLabel,
+            appearance,
+            className: classNames?.handle,
+            style: resizeHandleStyle,
+            onPointerDown: handlePointerDown,
+            onKeyDown: handleKeyDown
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              theme.slots.layoutSplitPane,
+              theme.slots.layoutSplitSecondary,
+              classNames?.secondary
+            ),
+            style: theme.styles.layoutSplitPane,
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
 function DefaultLoadingIcon({ className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -11419,7 +11927,7 @@ function BasePagination({
 function toFiniteNumber(value, fallback) {
   return Number.isFinite(value) ? Number(value) : fallback;
 }
-function clamp(value, min5, max5) {
+function clamp2(value, min5, max5) {
   return Math.min(Math.max(value, min5), max5);
 }
 function BaseProgress({
@@ -11437,7 +11945,7 @@ function BaseProgress({
 }) {
   const theme = resolveBaseAppearance(appearance);
   const safeMax = Math.max(toFiniteNumber(max5, 100), 1);
-  const safeValue = clamp(toFiniteNumber(value, 0), 0, safeMax);
+  const safeValue = clamp2(toFiniteNumber(value, 0), 0, safeMax);
   const percent = safeValue / safeMax * 100;
   const renderedValue = valueFormatter?.(safeValue, safeMax) ?? `${Math.round(percent)}%`;
   const hasLabelRow = hasRenderableNode(label) || showValue;
@@ -12203,7 +12711,7 @@ function useBaseTableContext(appearance) {
     }
   };
 }
-function toCssSize(value) {
+function toCssSize2(value) {
   if (value === void 0) return void 0;
   return typeof value === "number" ? `${value}px` : value;
 }
@@ -12416,7 +12924,7 @@ function BaseTableRow({
     }
   );
 }
-function BaseTableHead({
+var BaseTableHead = forwardRef(function BaseTableHead2({
   columnId,
   align = "left",
   icon,
@@ -12444,10 +12952,18 @@ function BaseTableHead({
   onDragOver,
   onDrop,
   ...headProps
-}) {
+}, forwardedRef) {
   const tableContext = useBaseTableContext(appearance);
   const { theme } = tableContext;
   const headRef = useRef(null);
+  const setHeadRef = (node) => {
+    headRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
   const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
   const canDrag = Boolean(
     columnId && draggable !== false && (draggable || tableContext.columnDragEnabled) && tableContext.columnOrder && tableContext.onColumnOrderChange
@@ -12602,7 +13118,7 @@ function BaseTableHead({
     "th",
     {
       ...headProps,
-      ref: headRef,
+      ref: setHeadRef,
       scope: headProps.scope ?? "col",
       "aria-sort": ariaSort,
       className: cn(
@@ -12614,9 +13130,9 @@ function BaseTableHead({
       ),
       style: {
         ...theme.styles.tableHead,
-        width: toCssSize(controlledWidth),
-        minWidth: toCssSize(minWidth),
-        maxWidth: toCssSize(maxWidth),
+        width: toCssSize2(controlledWidth),
+        minWidth: toCssSize2(minWidth),
+        maxWidth: toCssSize2(maxWidth),
         ...style
       },
       onDragOver: handleDragOver,
@@ -12637,7 +13153,7 @@ function BaseTableHead({
       ]
     }
   );
-}
+});
 function BaseTableCell({
   align = "left",
   appearance,
@@ -12765,7 +13281,7 @@ function BaseTableLoading({
                 classNames?.skeleton
               ),
               style: {
-                width: toCssSize(columnWidths[columnIndex])
+                width: toCssSize2(columnWidths[columnIndex])
               }
             }
           )
@@ -15780,7 +16296,7 @@ var DEFAULT_ZOOM_STEP = 1.18;
 var DEFAULT_STAGE_PADDING = 16;
 var MAX_SAFE_SCALE = 1e6;
 var MIN_SAFE_SCALE = 1e-6;
-var clamp2 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
+var clamp3 = (value, min5, max5) => Math.min(max5, Math.max(min5, value));
 var isNoDragTarget = (target) => target instanceof Element && Boolean(target.closest('[data-no-drag="true"]'));
 function ResetIcon() {
   return /* @__PURE__ */ jsxs(
@@ -15904,7 +16420,7 @@ function DataExplorerImagePreview({
         availableWidth / size.width,
         availableHeight / size.height
       );
-      const nextScale = clamp2(
+      const nextScale = clamp3(
         fitScale,
         normalizedMinScale,
         normalizedMaxScale
@@ -15958,7 +16474,7 @@ function DataExplorerImagePreview({
       if (!Number.isFinite(factor) || factor === 1) return;
       if (!Number.isFinite(stageX) || !Number.isFinite(stageY)) return;
       setView((current) => {
-        const nextScale = clamp2(
+        const nextScale = clamp3(
           current.scale * factor,
           normalizedMinScale,
           normalizedMaxScale
@@ -19969,6 +20485,3637 @@ function AppLayout({ header, sidebar, children, flush = false, className }) {
     ] })
   ] });
 }
+function ClampIcon({ expanded }) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "h-4 w-4", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 4.5h12M4 15.5h12M7.5 7.5 5 10l2.5 2.5M12.5 7.5 15 10l-2.5 2.5",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: expanded ? "" : "hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 4.5h12M4 15.5h12M5 7.5 7.5 10 5 12.5M15 7.5 12.5 10l2.5 2.5",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: expanded ? "hidden" : ""
+      }
+    )
+  ] });
+}
+function ResizeGripIcon() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute right-1/2 top-3 bottom-3 w-px translate-x-1/2 rounded-full bg-border/65 opacity-0 transition-opacity group-hover/resize:opacity-100"
+    }
+  );
+}
+function getItemTitle(item) {
+  if (item.title) return item.title;
+  return typeof item.label === "string" ? item.label : void 0;
+}
+function clampWidth2(width, minWidth, maxWidth) {
+  return Math.min(Math.max(width, minWidth), maxWidth);
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+function readStoredLayout(storageKey, options) {
+  const fallback = {
+    collapsed: options.defaultCollapsed,
+    width: clampWidth2(options.defaultWidth, options.minWidth, options.maxWidth)
+  };
+  if (typeof window === "undefined" || !storageKey) return fallback;
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+    if (!rawValue) return fallback;
+    const parsedValue = JSON.parse(rawValue);
+    return {
+      collapsed: typeof parsedValue.collapsed === "boolean" ? parsedValue.collapsed : fallback.collapsed,
+      width: typeof parsedValue.width === "number" && Number.isFinite(parsedValue.width) ? clampWidth2(parsedValue.width, options.minWidth, options.maxWidth) : fallback.width
+    };
+  } catch {
+    return fallback;
+  }
+}
+var WorkbenchResizableSidebar = forwardRef(
+  function WorkbenchResizableSidebar2({
+    title,
+    items,
+    activeItemId,
+    itemAs,
+    collapsed,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    width,
+    onWidthChange,
+    defaultWidth = 220,
+    minWidth = 180,
+    maxWidth = 420,
+    collapsedWidth = 60,
+    collapseThreshold = 140,
+    storageKey,
+    resizable = true,
+    collapsible = true,
+    collapseLabel = "Collapse sidebar",
+    expandLabel = "Expand sidebar",
+    resizeLabel = "Resize sidebar",
+    desktopClassName = "hidden md:flex",
+    mobileClassName = "flex md:hidden",
+    className,
+    classNames,
+    style
+  }, ref) {
+    const initialLayoutRef = useRef(null);
+    if (!initialLayoutRef.current) {
+      initialLayoutRef.current = readStoredLayout(storageKey, {
+        defaultCollapsed,
+        defaultWidth,
+        minWidth,
+        maxWidth
+      });
+    }
+    const sidebarRef = useRef(null);
+    const [internalCollapsed, setInternalCollapsed] = useState(initialLayoutRef.current.collapsed);
+    const [internalWidth, setInternalWidth] = useState(initialLayoutRef.current.width);
+    const [isResizing, setIsResizing] = useState(false);
+    const resolvedCollapsed = collapsed ?? internalCollapsed;
+    const resolvedWidth = width ?? internalWidth;
+    const isCollapsedControlled = collapsed !== void 0;
+    const isWidthControlled = width !== void 0;
+    const setSidebarRef = (node) => {
+      sidebarRef.current = node;
+      assignRef(ref, node);
+    };
+    const updateCollapsed = (nextCollapsed) => {
+      if (!collapsible && nextCollapsed) return;
+      if (!isCollapsedControlled) {
+        setInternalCollapsed(nextCollapsed);
+      }
+      onCollapsedChange?.(nextCollapsed);
+    };
+    const updateWidth = (nextWidth) => {
+      const clampedWidth = clampWidth2(nextWidth, minWidth, maxWidth);
+      if (!isWidthControlled) {
+        setInternalWidth(clampedWidth);
+      }
+      onWidthChange?.(clampedWidth);
+    };
+    const startResize = (event) => {
+      if (!resizable) return;
+      event.preventDefault();
+      setIsResizing(true);
+    };
+    const handleResizeKeyDown = (event) => {
+      if (!resizable) return;
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      event.preventDefault();
+      if (event.key === "ArrowLeft") {
+        const nextWidth = resolvedWidth - 24;
+        if (nextWidth < collapseThreshold && collapsible) {
+          updateCollapsed(true);
+          return;
+        }
+        updateWidth(nextWidth);
+      } else {
+        if (resolvedCollapsed) {
+          updateCollapsed(false);
+          updateWidth(Math.max(resolvedWidth, minWidth));
+          return;
+        }
+        updateWidth(resolvedWidth + 24);
+      }
+    };
+    useEffect(() => {
+      if (typeof window === "undefined" || !storageKey) return;
+      window.localStorage.setItem(storageKey, JSON.stringify({
+        collapsed: resolvedCollapsed,
+        width: clampWidth2(resolvedWidth, minWidth, maxWidth)
+      }));
+    }, [maxWidth, minWidth, resolvedCollapsed, resolvedWidth, storageKey]);
+    useEffect(() => {
+      if (!isResizing) return void 0;
+      const handlePointerMove = (event) => {
+        const sidebarNode = sidebarRef.current;
+        if (!sidebarNode) return;
+        const nextWidth = event.clientX - sidebarNode.getBoundingClientRect().left;
+        if (nextWidth < collapseThreshold && collapsible) {
+          updateCollapsed(true);
+          return;
+        }
+        updateCollapsed(false);
+        updateWidth(nextWidth);
+      };
+      const handlePointerUp = () => setIsResizing(false);
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+    }, [collapseThreshold, collapsible, isResizing, maxWidth, minWidth, resolvedWidth, resolvedCollapsed]);
+    const renderItem = (item, mobile = false) => {
+      const active = item.active ?? item.id === activeItemId;
+      const ItemComponent = itemAs ?? (item.href ? "a" : "button");
+      const itemTitle = getItemTitle(item);
+      const itemProps = {
+        ...item.to ? { to: item.to } : {},
+        ...item.href ? { href: item.href } : {},
+        ...ItemComponent === "button" ? { type: "button" } : {},
+        title: itemTitle,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": item.disabled || void 0,
+        tabIndex: item.disabled ? -1 : void 0,
+        onClick: (event) => {
+          if (item.disabled) {
+            event.preventDefault();
+            return;
+          }
+          item.onClick?.(event);
+        }
+      };
+      return /* @__PURE__ */ jsxs(
+        ItemComponent,
+        {
+          ...itemProps,
+          "data-active": active ? "true" : "false",
+          className: cn(
+            mobile ? "inline-flex h-9 shrink-0 items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors" : "relative flex h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border px-2 text-left text-[12px] shadow-none transition-colors",
+            mobile ? active ? "border-primary/40 bg-primary/12 text-foreground" : "border-border/60 bg-card/60 text-muted-foreground hover:bg-card/80 hover:text-foreground" : active ? "border-primary/40 bg-primary/12 text-foreground shadow-sm" : "border-border/60 bg-card/60 text-foreground hover:border-primary/20 hover:bg-card/80",
+            !mobile && resolvedCollapsed && "justify-center px-0",
+            item.disabled && "pointer-events-none opacity-50",
+            mobile ? classNames?.mobileItem : classNames?.item,
+            item.className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 shrink-0 items-center justify-center [&_svg]:h-3.5 [&_svg]:w-3.5", classNames?.itemIcon), children: item.icon }),
+            mobile || !resolvedCollapsed ? /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", classNames?.itemLabel), children: item.label }) : null,
+            !mobile && !resolvedCollapsed && item.endContent ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.endContent }) : null
+          ]
+        },
+        item.id
+      );
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          ref: setSidebarRef,
+          "data-workbench-resizable-sidebar": true,
+          "data-collapsed": resolvedCollapsed ? "true" : "false",
+          className: cn(
+            "relative z-20 h-full min-h-0 flex-shrink-0 flex-col rounded-xl border border-border/70 bg-card p-3 text-card-foreground shadow-sm",
+            "transition-[width,opacity] duration-300",
+            resolvedCollapsed && "items-center",
+            desktopClassName,
+            classNames?.root,
+            className
+          ),
+          style: {
+            width: resolvedCollapsed ? collapsedWidth : resolvedWidth,
+            transition: isResizing ? "none" : void 0,
+            ...style
+          },
+          children: [
+            resizable ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": resizeLabel,
+                title: resizeLabel,
+                className: cn("group/resize absolute -right-1.5 bottom-0 top-0 z-50 w-3 cursor-col-resize bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-primary/30", classNames?.resizeHandle),
+                onPointerDown: startResize,
+                onKeyDown: handleResizeKeyDown,
+                children: /* @__PURE__ */ jsx(ResizeGripIcon, {})
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full min-w-0 flex-col overflow-visible", children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("mb-3 flex min-w-0 items-center gap-2", resolvedCollapsed ? "justify-center px-0" : "justify-between px-2", classNames?.header), children: [
+                !resolvedCollapsed && title ? /* @__PURE__ */ jsx("div", { className: cn("min-w-0 truncate text-[11px] font-medium uppercase text-muted-foreground", classNames?.title), children: title }) : null,
+                collapsible ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn("inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", classNames?.collapseButton),
+                    "aria-label": resolvedCollapsed ? expandLabel : collapseLabel,
+                    title: resolvedCollapsed ? expandLabel : collapseLabel,
+                    onClick: () => updateCollapsed(!resolvedCollapsed),
+                    children: /* @__PURE__ */ jsx(ClampIcon, { expanded: !resolvedCollapsed })
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 space-y-2 overflow-y-auto", resolvedCollapsed && "flex w-full flex-col items-center", classNames?.list), children: items.map((item) => renderItem(item)) })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("nav", { className: cn("gap-2 overflow-x-auto pb-1", mobileClassName, classNames?.mobileNav), "aria-label": typeof title === "string" ? title : void 0, children: items.map((item) => renderItem(item, true)) })
+    ] });
+  }
+);
+function shouldRenderBodyWrapper(props) {
+  return Boolean(
+    props.header || props.footer || props.bodyAs || props.bodyClassName || props.bodyProps || props.classNames?.body
+  );
+}
+var WorkbenchContentPane = forwardRef(
+  function WorkbenchContentPane2({
+    as: Component = "section",
+    bodyAs: BodyComponent = "div",
+    header,
+    footer,
+    children,
+    className,
+    headerClassName,
+    bodyClassName,
+    footerClassName,
+    bodyProps,
+    classNames,
+    style,
+    ...props
+  }, ref) {
+    const renderBodyWrapper = shouldRenderBodyWrapper({
+      header,
+      footer,
+      bodyAs: BodyComponent === "div" ? void 0 : BodyComponent,
+      bodyClassName,
+      bodyProps,
+      classNames
+    });
+    const { className: bodyPropsClassName, ...restBodyProps } = bodyProps ?? {};
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        "data-workbench-content-pane": true,
+        className: cn(
+          "workbench-surface-subtle flex h-full min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border/50 transition-all duration-300 dark:border-border/40",
+          classNames?.root,
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          header ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 border-b border-border/40 px-4 py-3 dark:border-border/30", classNames?.header, headerClassName), children: header }) : null,
+          renderBodyWrapper ? /* @__PURE__ */ jsx(
+            BodyComponent,
+            {
+              className: cn("min-h-0 flex-1 overflow-hidden", classNames?.body, bodyClassName, bodyPropsClassName),
+              ...restBodyProps,
+              children
+            }
+          ) : children,
+          footer ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 border-t border-border/40 px-4 py-3 dark:border-border/30", classNames?.footer, footerClassName), children: footer }) : null
+        ]
+      }
+    );
+  }
+);
+var defaultLabels = {
+  settingsButton: "Gallery settings",
+  title: "Gallery settings",
+  visibleColumns: "Visible fields",
+  coverField: "Cover field",
+  autoDetect: "Auto",
+  cardDensity: "Card density",
+  cardColumns: "Cards per row",
+  detailColumns: "Detail columns",
+  fieldVisibility: "Field visibility",
+  fieldLimit: "Field limit",
+  fieldLimitHint: "Uses current field order",
+  layout: "Gallery layout",
+  compact: "Compact",
+  comfortable: "Standard",
+  detailed: "Detailed",
+  autoColumns: "Auto",
+  columns: (count) => `${count}`,
+  bentoColumns: (count) => `${count}`,
+  topLimit: "First fields",
+  allFields: "All fields",
+  adaptiveGrid: "Grid",
+  masonry: "Masonry"
+};
+function normalizeColumnKey(column) {
+  return String(column?.key || "");
+}
+function getDefaultColumnLabel(column) {
+  return column.label ?? column.key;
+}
+function getDefaultVisibleColumnKeys(columns) {
+  return columns.filter((column) => normalizeColumnKey(column) && column.hidden !== true).map((column) => normalizeColumnKey(column));
+}
+function getResolvedVisibleColumnKeys({
+  columns,
+  visibleColumnKeys,
+  allowEmptyVisibleColumns
+}) {
+  const validKeys = new Set(columns.map(normalizeColumnKey).filter(Boolean));
+  const controlledKeys = Array.isArray(visibleColumnKeys) ? visibleColumnKeys.filter((key) => validKeys.has(String(key))) : null;
+  if (controlledKeys && (controlledKeys.length || allowEmptyVisibleColumns)) {
+    return controlledKeys;
+  }
+  return getDefaultVisibleColumnKeys(columns);
+}
+function getDefaultDensityOptions(labels) {
+  return [
+    { value: "compact", label: labels.compact },
+    { value: "comfortable", label: labels.comfortable },
+    { value: "detailed", label: labels.detailed }
+  ];
+}
+function getDefaultGridColumnOptions(labels) {
+  return [
+    { value: "auto", label: labels.autoColumns },
+    { value: 1, label: labels.columns(1) },
+    { value: 2, label: labels.columns(2) },
+    { value: 3, label: labels.columns(3) },
+    { value: 4, label: labels.columns(4) }
+  ];
+}
+function getDefaultBentoColumnOptions(labels) {
+  return [
+    { value: 1, label: labels.bentoColumns(1) },
+    { value: 2, label: labels.bentoColumns(2) },
+    { value: 3, label: labels.bentoColumns(3) }
+  ];
+}
+function getDefaultDetailVisibilityOptions(labels) {
+  return [
+    { value: "limit", label: labels.topLimit },
+    { value: "all", label: labels.allFields }
+  ];
+}
+function getDefaultLayoutOptions(labels) {
+  return [
+    { value: "fixed", label: labels.adaptiveGrid },
+    { value: "masonry", label: labels.masonry }
+  ];
+}
+function normalizeOptionValue(value) {
+  return String(value);
+}
+function getOptionValue(options, rawValue, fallbackValue) {
+  const valueText = String(rawValue ?? fallbackValue);
+  return options.some((option) => String(option.value) === valueText) ? valueText : String(fallbackValue);
+}
+function parseNumberOption(value) {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) ? parsed : 1;
+}
+var compactSegmentedClassNames = {
+  root: "flex w-full flex-wrap",
+  item: "min-w-[58px] flex-1 px-2 text-[11px]",
+  label: "text-[11px]"
+};
+function WorkbenchGallerySettingsPanel({
+  columns = [],
+  galleryFieldOptions,
+  value,
+  onValueChange,
+  labels,
+  densityOptions,
+  gridColumnOptions,
+  bentoColumnOptions,
+  detailVisibilityOptions,
+  layoutOptions,
+  getColumnLabel = getDefaultColumnLabel,
+  getColumnDescription,
+  showColumnVisibility = true,
+  showGalleryControls = true,
+  showLayoutControl = true,
+  showGridColumns = true,
+  showDetailColumns = true,
+  allowEmptyVisibleColumns = false,
+  className,
+  classNames
+}) {
+  const resolvedLabels = { ...defaultLabels, ...labels };
+  const resolvedValue = value || {};
+  const resolvedColumns = columns.filter((column) => normalizeColumnKey(column));
+  const resolvedVisibleColumnKeys = getResolvedVisibleColumnKeys({
+    columns: resolvedColumns,
+    visibleColumnKeys: resolvedValue.visibleColumnKeys,
+    allowEmptyVisibleColumns
+  });
+  const visibleColumnKeySet = new Set(resolvedVisibleColumnKeys);
+  const resolvedGalleryFieldOptions = (galleryFieldOptions || resolvedColumns).filter((column) => normalizeColumnKey(column));
+  const resolvedDensityOptions = densityOptions || getDefaultDensityOptions(resolvedLabels);
+  const resolvedGridColumnOptions = gridColumnOptions || getDefaultGridColumnOptions(resolvedLabels);
+  const resolvedBentoColumnOptions = bentoColumnOptions || getDefaultBentoColumnOptions(resolvedLabels);
+  const resolvedDetailVisibilityOptions = detailVisibilityOptions || getDefaultDetailVisibilityOptions(resolvedLabels);
+  const resolvedLayoutOptions = layoutOptions || getDefaultLayoutOptions(resolvedLabels);
+  const canUpdate = typeof onValueChange === "function";
+  const updateValue = (patch) => {
+    onValueChange?.({ ...resolvedValue, ...patch }, patch);
+  };
+  const toggleColumn = (columnKey) => {
+    if (!canUpdate) return;
+    const nextVisibleSet = new Set(resolvedVisibleColumnKeys);
+    if (nextVisibleSet.has(columnKey)) {
+      nextVisibleSet.delete(columnKey);
+    } else {
+      nextVisibleSet.add(columnKey);
+    }
+    let nextVisibleColumnKeys = resolvedColumns.map(normalizeColumnKey).filter((key) => nextVisibleSet.has(key));
+    if (!nextVisibleColumnKeys.length && !allowEmptyVisibleColumns) {
+      nextVisibleColumnKeys = [columnKey];
+    }
+    updateValue({ visibleColumnKeys: nextVisibleColumnKeys });
+  };
+  const shouldRenderColumnVisibility = showColumnVisibility && resolvedColumns.length > 0;
+  const shouldRenderGalleryControls = showGalleryControls;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3 text-foreground", classNames?.root, className), children: [
+    shouldRenderColumnVisibility ? /* @__PURE__ */ jsxs("section", { className: cn("space-y-2", classNames?.section), children: [
+      /* @__PURE__ */ jsx("div", { className: cn("text-[10px] font-medium uppercase tracking-wide text-muted-foreground", classNames?.sectionHeader), children: resolvedLabels.visibleColumns }),
+      /* @__PURE__ */ jsx("div", { className: cn("max-h-[220px] space-y-1 overflow-y-auto pr-1", classNames?.columnList), children: resolvedColumns.map((column) => {
+        const columnKey = normalizeColumnKey(column);
+        return /* @__PURE__ */ jsx(
+          BaseCheckbox,
+          {
+            checked: visibleColumnKeySet.has(columnKey),
+            disabled: !canUpdate,
+            label: getColumnLabel(column),
+            description: getColumnDescription?.(column),
+            onChange: () => toggleColumn(columnKey),
+            className: cn("flex w-full rounded-lg px-2 py-1.5 hover:bg-muted/50", classNames?.columnItem)
+          },
+          `workbench-gallery-column-${columnKey}`
+        );
+      }) })
+    ] }) : null,
+    shouldRenderGalleryControls ? /* @__PURE__ */ jsxs("section", { className: cn("space-y-3 border-t border-border/60 pt-3", classNames?.section), children: [
+      /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.coverField,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseSelect,
+            {
+              value: String(resolvedValue.galleryFieldKey || "auto"),
+              options: [
+                { value: "auto", label: resolvedLabels.autoDetect },
+                ...resolvedGalleryFieldOptions.map((column) => ({
+                  value: normalizeColumnKey(column),
+                  label: getColumnLabel(column)
+                }))
+              ],
+              disabled: !canUpdate,
+              onChange: (event) => updateValue({ galleryFieldKey: event.currentTarget.value || "auto" }),
+              className: classNames?.control
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.cardDensity,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseSegmentedControl,
+            {
+              value: getOptionValue(resolvedDensityOptions, resolvedValue.galleryDensity, "comfortable"),
+              options: resolvedDensityOptions.map((option) => ({
+                value: normalizeOptionValue(option.value),
+                label: option.label,
+                disabled: option.disabled
+              })),
+              onValueChange: (nextValue) => updateValue({ galleryDensity: nextValue }),
+              className: cn("w-full", classNames?.control),
+              classNames: compactSegmentedClassNames
+            }
+          )
+        }
+      ),
+      showGridColumns ? /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.cardColumns,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseSegmentedControl,
+            {
+              value: getOptionValue(resolvedGridColumnOptions, resolvedValue.galleryGridColumns, "auto"),
+              options: resolvedGridColumnOptions.map((option) => ({
+                value: normalizeOptionValue(option.value),
+                label: option.label,
+                disabled: option.disabled
+              })),
+              onValueChange: (nextValue) => updateValue({
+                galleryGridColumns: nextValue === "auto" ? "auto" : parseNumberOption(nextValue)
+              }),
+              className: cn("w-full", classNames?.control),
+              classNames: compactSegmentedClassNames
+            }
+          )
+        }
+      ) : null,
+      showDetailColumns ? /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.detailColumns,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseSegmentedControl,
+            {
+              value: getOptionValue(resolvedBentoColumnOptions, resolvedValue.galleryBentoColumns, 2),
+              options: resolvedBentoColumnOptions.map((option) => ({
+                value: normalizeOptionValue(option.value),
+                label: option.label,
+                disabled: option.disabled
+              })),
+              onValueChange: (nextValue) => updateValue({ galleryBentoColumns: parseNumberOption(nextValue) }),
+              className: cn("w-full", classNames?.control),
+              classNames: compactSegmentedClassNames
+            }
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.fieldVisibility,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseSegmentedControl,
+            {
+              value: getOptionValue(resolvedDetailVisibilityOptions, resolvedValue.galleryDetailVisibility, "limit"),
+              options: resolvedDetailVisibilityOptions.map((option) => ({
+                value: normalizeOptionValue(option.value),
+                label: option.label,
+                disabled: option.disabled
+              })),
+              onValueChange: (nextValue) => updateValue({ galleryDetailVisibility: nextValue }),
+              className: cn("w-full", classNames?.control),
+              classNames: compactSegmentedClassNames
+            }
+          )
+        }
+      ),
+      resolvedValue.galleryDetailVisibility !== "all" ? /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.fieldLimit,
+          description: resolvedLabels.fieldLimitHint,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground",
+            description: "text-[10px]"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseInput,
+            {
+              type: "number",
+              min: 1,
+              step: 1,
+              value: String(resolvedValue.galleryDetailLimit || 4),
+              disabled: !canUpdate,
+              onChange: (event) => updateValue({ galleryDetailLimit: event.currentTarget.value }),
+              className: classNames?.control
+            }
+          )
+        }
+      ) : null,
+      showLayoutControl ? /* @__PURE__ */ jsx(
+        BaseField,
+        {
+          label: resolvedLabels.layout,
+          classNames: {
+            label: "text-[10px] uppercase tracking-wide text-muted-foreground"
+          },
+          children: /* @__PURE__ */ jsx(
+            BaseSegmentedControl,
+            {
+              value: getOptionValue(resolvedLayoutOptions, resolvedValue.galleryLayout, "fixed"),
+              options: resolvedLayoutOptions.map((option) => ({
+                value: normalizeOptionValue(option.value),
+                label: option.label,
+                disabled: option.disabled
+              })),
+              onValueChange: (nextValue) => updateValue({ galleryLayout: nextValue }),
+              className: cn("w-full", classNames?.control),
+              classNames: compactSegmentedClassNames
+            }
+          )
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+function WorkbenchGallerySettingsButton({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  triggerIcon,
+  triggerLabel,
+  triggerTitle,
+  align = "end",
+  popoverWidth = 320,
+  panelHeader,
+  panelBefore,
+  panelAfter,
+  panelClassName,
+  buttonClassName,
+  popoverClassName,
+  buttonClassNames,
+  labels,
+  className,
+  classNames,
+  ...panelProps
+}) {
+  const resolvedLabels = { ...defaultLabels, ...labels };
+  const rootRef = useRef(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [popoverStyle, setPopoverStyle] = useState({});
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;
+  const setOpen = (nextOpen) => {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  };
+  useLayoutEffect(() => {
+    if (!isOpen) return void 0;
+    const updatePopoverPosition = () => {
+      const triggerRect = rootRef.current?.getBoundingClientRect();
+      if (!triggerRect || typeof window === "undefined") return;
+      const viewportPadding = 12;
+      const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
+      const resolvedWidth = Math.min(popoverWidth, availableWidth || popoverWidth);
+      const preferredLeft = align === "start" ? triggerRect.left : triggerRect.right - resolvedWidth;
+      const left = Math.min(
+        Math.max(preferredLeft, viewportPadding),
+        Math.max(window.innerWidth - resolvedWidth - viewportPadding, viewportPadding)
+      );
+      const top = Math.min(
+        triggerRect.bottom + 8,
+        Math.max(window.innerHeight - 80, viewportPadding)
+      );
+      setPopoverStyle({
+        left,
+        top,
+        width: resolvedWidth,
+        maxHeight: `calc(100vh - ${Math.round(top + viewportPadding)}px)`
+      });
+    };
+    const handlePointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    updatePopoverPosition();
+    window.addEventListener("resize", updatePopoverPosition);
+    window.addEventListener("scroll", updatePopoverPosition, true);
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("resize", updatePopoverPosition);
+      window.removeEventListener("scroll", updatePopoverPosition, true);
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [align, isOpen, popoverWidth]);
+  const resolvedTriggerLabel = triggerLabel ?? resolvedLabels.settingsButton;
+  const resolvedPanelHeader = panelHeader ?? resolvedLabels.title;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-flex", buttonClassNames?.root, className), children: [
+    /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        icon: triggerIcon,
+        label: resolvedTriggerLabel,
+        title: triggerTitle || (typeof resolvedTriggerLabel === "string" ? resolvedTriggerLabel : void 0),
+        iconOnly: Boolean(triggerIcon),
+        active: isOpen,
+        tone: "muted",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        className: cn(buttonClassNames?.trigger, buttonClassName),
+        onClick: () => setOpen(!isOpen)
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": typeof resolvedPanelHeader === "string" ? resolvedPanelHeader : void 0,
+        className: cn(
+          "fixed z-50 overflow-y-auto rounded-xl border border-border bg-card p-3 text-foreground shadow-lg",
+          align === "start" ? "origin-top-left" : "origin-top-right",
+          buttonClassNames?.popover,
+          popoverClassName
+        ),
+        style: popoverStyle,
+        children: [
+          resolvedPanelHeader ? /* @__PURE__ */ jsx("div", { className: cn("mb-3 text-[11px] font-medium text-foreground", buttonClassNames?.header), children: resolvedPanelHeader }) : null,
+          panelBefore,
+          /* @__PURE__ */ jsx(
+            WorkbenchGallerySettingsPanel,
+            {
+              ...panelProps,
+              labels: resolvedLabels,
+              className: cn(buttonClassNames?.panel, panelClassName),
+              classNames
+            }
+          ),
+          panelAfter
+        ]
+      }
+    ) : null
+  ] });
+}
+function TableViewIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h18M9 4v16" })
+  ] });
+}
+function GalleryViewIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5" })
+  ] });
+}
+function SettingsIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M20 7h-9M7 7H4M14 17H4M20 17h-3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16", cy: "17", r: "2" })
+  ] });
+}
+function ChevronDownIcon3({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: cn("h-3 w-3 opacity-55 transition-transform", open && "rotate-180"),
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+var defaultViewModeOptions = [
+  { value: "list", label: "Table view", icon: /* @__PURE__ */ jsx(TableViewIcon, {}) },
+  { value: "gallery", label: "Gallery view", icon: /* @__PURE__ */ jsx(GalleryViewIcon, {}) }
+];
+function getViewModeOptionIcon(option) {
+  if (option.icon !== void 0) return option.icon;
+  if (option.value === "list" || option.value === "table") return /* @__PURE__ */ jsx(TableViewIcon, {});
+  if (option.value === "gallery") return /* @__PURE__ */ jsx(GalleryViewIcon, {});
+  return null;
+}
+function getSettingsTriggerLabel(settings) {
+  return settings.triggerLabel ?? settings.labels?.settingsButton ?? "Settings";
+}
+function WorkbenchContentToolbarViewModeControl({
+  value,
+  options,
+  onValueChange,
+  classNames
+}) {
+  const rootRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const activeOption = options.find((option) => option.value === value) || options.find((option) => !option.disabled) || options[0];
+  const activeIcon = activeOption ? getViewModeOptionIcon(activeOption) : null;
+  useEffect(() => {
+    if (!open) return void 0;
+    const handlePointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  if (!activeOption) return null;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-flex", classNames?.viewModeRoot), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        className: cn(
+          "inline-flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-md border border-border/70 bg-card px-2 text-xs font-medium text-foreground shadow-none transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
+          classNames?.viewModeTrigger
+        ),
+        onClick: () => setOpen((current) => !current),
+        children: [
+          activeIcon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted-foreground", children: activeIcon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: activeOption.label }),
+          /* @__PURE__ */ jsx(ChevronDownIcon3, { open })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        className: cn(
+          "absolute left-0 top-full z-50 mt-2 min-w-[160px] overflow-hidden rounded-xl border border-border/60 bg-card/95 p-1.5 text-xs text-foreground shadow-lg backdrop-blur-xl",
+          classNames?.viewModeMenu
+        ),
+        children: options.map((option) => {
+          const selected = option.value === activeOption.value;
+          const optionIcon = getViewModeOptionIcon(option);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": selected,
+              disabled: option.disabled,
+              className: cn(
+                "flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                selected && "bg-muted/60 text-foreground",
+                classNames?.viewModeItem
+              ),
+              onClick: () => {
+                if (option.disabled) return;
+                onValueChange?.(option.value, option);
+                setOpen(false);
+              },
+              children: [
+                optionIcon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: optionIcon }) : null,
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    ) : null
+  ] });
+}
+var WorkbenchContentToolbar = forwardRef(
+  function WorkbenchContentToolbar2({
+    as: Component = "div",
+    children,
+    end,
+    viewMode,
+    viewModeOptions,
+    onViewModeChange,
+    gallerySettings,
+    gallerySettingsPlacement = "start",
+    className,
+    startClassName,
+    endClassName,
+    classNames,
+    ...props
+  }, ref) {
+    const resolvedViewModeOptions = viewModeOptions || (viewMode ? defaultViewModeOptions : []);
+    const resolvedGallerySettings = gallerySettings && typeof gallerySettings === "object" ? gallerySettings : null;
+    const shouldRenderViewMode = Boolean(resolvedViewModeOptions.length);
+    const shouldRenderSettings = Boolean(resolvedGallerySettings);
+    const shouldRenderSettingsInStart = shouldRenderSettings && gallerySettingsPlacement !== "end";
+    const shouldRenderSettingsInEnd = shouldRenderSettings && gallerySettingsPlacement === "end";
+    const shouldRenderStart = shouldRenderViewMode || shouldRenderSettingsInStart || Boolean(children);
+    const shouldRenderEnd = Boolean(end) || shouldRenderSettingsInEnd;
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        "data-workbench-content-toolbar": true,
+        className: cn(
+          "flex min-h-[46px] shrink-0 flex-col gap-2 border-b border-border/60 px-4 py-2 md:flex-row md:items-center md:justify-between",
+          classNames?.root,
+          className
+        ),
+        ...props,
+        children: [
+          shouldRenderStart ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", classNames?.start, startClassName), children: [
+            shouldRenderViewMode ? /* @__PURE__ */ jsx(
+              WorkbenchContentToolbarViewModeControl,
+              {
+                value: viewMode,
+                options: resolvedViewModeOptions,
+                onValueChange: onViewModeChange,
+                classNames
+              }
+            ) : null,
+            shouldRenderSettingsInStart && resolvedGallerySettings ? /* @__PURE__ */ jsx(
+              WorkbenchGallerySettingsButton,
+              {
+                align: "end",
+                triggerIcon: /* @__PURE__ */ jsx(SettingsIcon, {}),
+                triggerLabel: getSettingsTriggerLabel(resolvedGallerySettings),
+                ...resolvedGallerySettings,
+                buttonClassName: cn(
+                  "!h-7 !w-7 !min-h-0 !rounded-md !p-0 text-xs",
+                  classNames?.settings,
+                  resolvedGallerySettings.buttonClassName
+                )
+              }
+            ) : null,
+            children
+          ] }) : null,
+          shouldRenderEnd ? /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", classNames?.end, endClassName), children: [
+            end,
+            shouldRenderSettingsInEnd && resolvedGallerySettings ? /* @__PURE__ */ jsx(
+              WorkbenchGallerySettingsButton,
+              {
+                align: "end",
+                triggerIcon: /* @__PURE__ */ jsx(SettingsIcon, {}),
+                triggerLabel: getSettingsTriggerLabel(resolvedGallerySettings),
+                ...resolvedGallerySettings,
+                buttonClassName: cn(
+                  "!h-7 !w-7 !min-h-0 !rounded-md !p-0 text-xs",
+                  classNames?.settings,
+                  resolvedGallerySettings.buttonClassName
+                )
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+function shouldRenderBodyWrapper2(props) {
+  return Boolean(
+    props.header || props.footer || props.bodyAs || props.bodyClassName || props.bodyProps || props.classNames?.body
+  );
+}
+function hasRenderableChildren(children) {
+  if (children === null || children === void 0 || typeof children === "boolean") return false;
+  if (typeof children === "string") return children.trim().length > 0;
+  if (Array.isArray(children)) return children.some(hasRenderableChildren);
+  const childList = Children.toArray(children);
+  if (!childList.length) return false;
+  return childList.some((child) => typeof child === "string" ? child.trim().length > 0 : true);
+}
+function resolveWidthStyle(open, width) {
+  if (width === void 0) return {};
+  if (open === void 0) return { width };
+  return {
+    width: open ? width : 0,
+    opacity: open ? 1 : 0
+  };
+}
+function getFallbackFieldLabel(field) {
+  return field.label ?? field.key;
+}
+function getObjectDisplayValue(value) {
+  const displayKeys = ["text", "label", "title", "display", "value", "recordId"];
+  for (const key of displayKeys) {
+    if (!Object.prototype.hasOwnProperty.call(value, key)) continue;
+    const displayValue = value[key];
+    if (displayValue !== null && displayValue !== void 0 && displayValue !== "") {
+      return displayValue;
+    }
+  }
+  return void 0;
+}
+function isEmptyDetailValue(value) {
+  return value === null || value === void 0 || value === "";
+}
+function isPlainDisplayValue(value) {
+  return ["string", "number", "boolean"].includes(typeof value);
+}
+function getMediaDisplayData(value) {
+  if (!value) return null;
+  if (typeof value === "string") {
+    const isDataImage = value.startsWith("data:image/");
+    const isImageUrl = /\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i.test(value);
+    return isDataImage || isImageUrl ? { src: value } : null;
+  }
+  if (typeof value !== "object" || isValidElement(value)) return null;
+  const media = value;
+  const src = media.src || media.url || media.thumbnail || media.preview || media.image;
+  return src ? {
+    src: String(src),
+    alt: media.alt || media.label || media.title || "",
+    caption: media.caption || media.description || media.label || media.title
+  } : null;
+}
+function shouldRenderAsMedia(field, value) {
+  const renderType = String(field?.renderType || "").toLowerCase();
+  return ["image", "media", "preview", "thumbnail"].includes(renderType) || Boolean(getMediaDisplayData(value));
+}
+function renderMaybeFieldIcon(icon, className) {
+  if (!icon) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", className), children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full border border-primary/25 bg-primary/10" }),
+      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-primary" })
+    ] });
+  }
+  if (typeof icon === "string" || typeof icon === "number") {
+    return /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-sm text-[10px] font-semibold text-primary", className), children: icon });
+  }
+  if (typeof icon === "boolean") return null;
+  if (isValidElement(icon)) return icon;
+  const IconComponent = icon;
+  return /* @__PURE__ */ jsx(IconComponent, { className: cn("h-3.5 w-3.5 shrink-0 text-primary", className) });
+}
+function renderDetailFieldLabel(label, field, classNames) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex min-w-0 items-center gap-1.5 text-[11px] font-semibold text-foreground", classNames?.fieldLabel), children: [
+    renderMaybeFieldIcon(field.labelIcon || field.icon, classNames?.fieldLabelIcon),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label })
+  ] });
+}
+function WorkbenchDetailSidebarMediaValue({
+  media,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-2", classNames?.mediaValue), children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-border/55 bg-muted/20 dark:border-border/45 dark:bg-muted/10", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: media.src,
+        alt: String(media.alt || ""),
+        className: cn("block aspect-[16/9] w-full object-cover", classNames?.mediaImage)
+      }
+    ) }),
+    media.caption ? /* @__PURE__ */ jsx("div", { className: cn("truncate text-[11px] leading-4 text-muted-foreground", classNames?.mediaCaption), children: media.caption }) : null
+  ] });
+}
+function getDefaultDetailDisplayValue(value, emptyValue, field, classNames) {
+  if (isEmptyDetailValue(value)) return emptyValue;
+  if (isValidElement(value)) return value;
+  if (shouldRenderAsMedia(field, value)) {
+    const media = getMediaDisplayData(value);
+    if (media) return /* @__PURE__ */ jsx(WorkbenchDetailSidebarMediaValue, { media, classNames });
+  }
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => getDefaultDetailDisplayValue(item, "", void 0, classNames)).filter((item) => !isEmptyDetailValue(item));
+    if (!parts.length) return emptyValue;
+    if (parts.every(isPlainDisplayValue)) return parts.map(String).join(" \xB7 ");
+    return /* @__PURE__ */ jsx("span", { className: "inline-flex flex-wrap items-center gap-1", children: parts.map((part, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      index > 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xB7" }) : null,
+      isPlainDisplayValue(part) ? String(part) : part
+    ] }, index)) });
+  }
+  if (typeof value === "object") {
+    const displayValue = getObjectDisplayValue(value);
+    return displayValue === void 0 ? emptyValue : getDefaultDetailDisplayValue(displayValue, emptyValue, field, classNames);
+  }
+  return String(value);
+}
+function getDefaultFieldValue(field, record) {
+  if (Object.prototype.hasOwnProperty.call(field, "value")) {
+    return typeof field.value === "function" ? field.value(record, field) : field.value;
+  }
+  return record ? record?.[field.key] : void 0;
+}
+function shouldHideField(field, record) {
+  return typeof field.hidden === "function" ? field.hidden(field, record) : Boolean(field.hidden);
+}
+function shouldHideSection(section, record) {
+  return typeof section.hidden === "function" ? section.hidden(section, record) : Boolean(section.hidden);
+}
+function WorkbenchDetailSidebarAutoContent({
+  record,
+  fields,
+  sections,
+  fieldColumns = 1,
+  emptyValue = "\u2014",
+  emptyState,
+  getFieldValue,
+  renderFieldValue,
+  formatFieldValue,
+  formatFieldLabel,
+  classNames
+}) {
+  const resolvedSections = sections?.length ? sections : fields?.length ? [{ fields, columns: fieldColumns }] : [];
+  const visibleSections = resolvedSections.filter((section) => !shouldHideSection(section, record));
+  if (!visibleSections.length) {
+    return emptyState ? /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border border-dashed border-border/60 px-3 py-6 text-center text-xs text-muted-foreground", classNames?.emptyState), children: emptyState }) : null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-3", classNames?.autoBody), children: visibleSections.map((section, sectionIndex) => {
+    const visibleFields = (section.fields || []).filter((field) => !shouldHideField(field, record));
+    const sectionKey = section.id || `section-${sectionIndex}`;
+    if (!visibleFields.length && !section.emptyState) return null;
+    const items = visibleFields.map((field, fieldIndex) => {
+      const context = {
+        field,
+        fieldIndex,
+        section,
+        sectionIndex,
+        record
+      };
+      const rawValue = getFieldValue ? getFieldValue(field, record, context) : getDefaultFieldValue(field, record);
+      const value = renderFieldValue ? renderFieldValue(field, record, context) : formatFieldValue ? formatFieldValue(rawValue, context) : getDefaultDetailDisplayValue(rawValue, field.emptyValue ?? emptyValue, field, classNames);
+      const fieldLabel = formatFieldLabel ? formatFieldLabel(getFallbackFieldLabel(field), context) : getFallbackFieldLabel(field);
+      return {
+        term: renderDetailFieldLabel(fieldLabel, field, classNames),
+        value
+      };
+    });
+    return /* @__PURE__ */ jsxs("section", { className: cn("min-w-0 space-y-3", classNames?.section), children: [
+      section.title || section.description ? /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 space-y-1.5", classNames?.sectionHeader), children: [
+        section.title ? /* @__PURE__ */ jsx("div", { className: cn("inline-flex max-w-full items-center gap-2 rounded-md border border-primary/20 bg-primary/5 px-2.5 py-1.5 text-xs font-medium text-primary dark:border-primary/25 dark:bg-primary/10", classNames?.sectionTitle), children: section.title }) : null,
+        section.description ? /* @__PURE__ */ jsx("div", { className: cn("text-[11px] leading-5 text-muted-foreground", classNames?.sectionDescription), children: section.description }) : null
+      ] }) : null,
+      items.length ? /* @__PURE__ */ jsx(
+        BaseDescriptionList,
+        {
+          items,
+          columns: section.columns || fieldColumns,
+          className: cn("gap-3", classNames?.descriptionList),
+          classNames: {
+            item: cn("!border-0 !bg-transparent !p-0 !shadow-none !gap-1.5", classNames?.descriptionListItem),
+            term: cn("!normal-case !tracking-normal !text-foreground", classNames?.descriptionListTerm),
+            value: cn(
+              "min-h-10 rounded-md border border-border/55 bg-muted/25 px-3 py-2 text-xs leading-5 text-foreground shadow-[inset_0_1px_0_hsl(var(--background)/0.8)] dark:border-border/45 dark:bg-white/[0.035]",
+              classNames?.fieldValue,
+              classNames?.descriptionListValue
+            )
+          }
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: cn("py-3 text-center text-xs text-muted-foreground", classNames?.emptyState), children: section.emptyState })
+    ] }, sectionKey);
+  }) });
+}
+var WorkbenchDetailSidebar = forwardRef(
+  function WorkbenchDetailSidebar2({
+    as: Component = "aside",
+    bodyAs: BodyComponent = "div",
+    open,
+    width,
+    header,
+    footer,
+    resizeHandle,
+    children,
+    record,
+    fields,
+    sections,
+    fieldColumns,
+    emptyValue,
+    emptyState,
+    getFieldValue,
+    renderFieldValue,
+    formatFieldValue,
+    formatFieldLabel,
+    className,
+    headerClassName,
+    bodyClassName,
+    footerClassName,
+    resizeHandleClassName,
+    bodyProps,
+    classNames,
+    style,
+    ...props
+  }, ref) {
+    const autoContent = hasRenderableChildren(children) ? children : /* @__PURE__ */ jsx(
+      WorkbenchDetailSidebarAutoContent,
+      {
+        record,
+        fields,
+        sections,
+        fieldColumns,
+        emptyValue,
+        emptyState,
+        getFieldValue,
+        renderFieldValue,
+        formatFieldValue,
+        formatFieldLabel,
+        classNames
+      }
+    );
+    const renderBodyWrapper = shouldRenderBodyWrapper2({
+      header,
+      footer,
+      bodyAs: BodyComponent === "div" ? void 0 : BodyComponent,
+      bodyClassName,
+      bodyProps,
+      classNames
+    });
+    const { className: bodyPropsClassName, ...restBodyProps } = bodyProps ?? {};
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        "data-workbench-detail-sidebar": true,
+        "data-open": open === void 0 ? void 0 : open ? "true" : "false",
+        className: cn(
+          "workbench-surface-subtle relative flex flex-shrink-0 flex-col self-stretch overflow-hidden rounded-lg border border-border/50 transition-all duration-300 dark:border-border/40",
+          open === false && "pointer-events-none",
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...resolveWidthStyle(open, width),
+          ...style
+        },
+        ...props,
+        children: [
+          resizeHandle ? /* @__PURE__ */ jsx("div", { className: cn(classNames?.resizeHandle, resizeHandleClassName), children: resizeHandle }) : null,
+          header ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 border-b border-border/40 px-4 py-3 dark:border-border/30", classNames?.header, headerClassName), children: header }) : null,
+          renderBodyWrapper ? /* @__PURE__ */ jsx(
+            BodyComponent,
+            {
+              className: cn("min-h-0 flex-1 overflow-y-auto", classNames?.body, bodyClassName, bodyPropsClassName),
+              ...restBodyProps,
+              children: autoContent
+            }
+          ) : autoContent,
+          footer ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0 border-t border-border/40 px-4 py-3 dark:border-border/30", classNames?.footer, footerClassName), children: footer }) : null
+        ]
+      }
+    );
+  }
+);
+function isWorkbenchIconComponent(icon) {
+  if (typeof icon === "function") return true;
+  return typeof icon === "object" && icon !== null && !isValidElement(icon) && "$$typeof" in icon;
+}
+function renderWorkbenchIcon(icon, className) {
+  if (!icon) return null;
+  if (isValidElement(icon)) return icon;
+  if (isWorkbenchIconComponent(icon)) {
+    const Icon = icon;
+    return /* @__PURE__ */ jsx(Icon, { className });
+  }
+  return icon;
+}
+function getWorkbenchIconComponent(icon) {
+  if (!icon || !isWorkbenchIconComponent(icon)) return null;
+  return icon;
+}
+function toCssSize3(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function defaultFormatLabel(value) {
+  if (value === void 0 || value === null || value === false) return null;
+  return value;
+}
+function toTitle(value) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  return void 0;
+}
+function defaultGetRowKey(row, rowIndex) {
+  return row?.id ?? row?.key ?? row?.linkKey ?? rowIndex;
+}
+function defaultGetRowSelectionKey(row) {
+  return row?.linkKey ?? row?.id ?? row?.key;
+}
+function getOrderedColumns(columns, columnOrder) {
+  if (!columnOrder?.length) return columns;
+  const columnMap = new Map(columns.map((column) => [column.key, column]));
+  const orderedColumns = columnOrder.map((columnKey) => columnMap.get(columnKey)).filter(Boolean);
+  const orderedKeySet = new Set(orderedColumns.map((column) => column.key));
+  const remainingColumns = columns.filter((column) => !orderedKeySet.has(column.key));
+  return [...orderedColumns, ...remainingColumns];
+}
+function normalizeColumnOrder(columnKeys, columnOrder) {
+  const validColumnKeys = new Set(columnKeys);
+  const orderedKeys = (columnOrder || []).filter((columnKey) => validColumnKeys.has(columnKey));
+  const orderedKeySet = new Set(orderedKeys);
+  const remainingKeys = columnKeys.filter((columnKey) => !orderedKeySet.has(columnKey));
+  return [...orderedKeys, ...remainingKeys];
+}
+function WorkbenchTableHeaderHelper({
+  helperText,
+  className
+}) {
+  if (!hasRenderableNode(helperText)) return null;
+  return /* @__PURE__ */ jsxs("span", { className: cn("group relative inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: toTitle(helperText),
+        "aria-label": toTitle(helperText) || "Field help",
+        className: "inline-flex h-4 w-4 items-center justify-center rounded-full border border-border/60 bg-background text-[10px] font-semibold normal-case tracking-normal text-muted-foreground shadow-sm transition-colors hover:border-primary/40 hover:text-primary focus-visible:border-primary/40 focus-visible:text-primary focus-visible:outline-none",
+        onClick: (event) => event.stopPropagation(),
+        children: "?"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "tooltip",
+        className: "pointer-events-none absolute left-1/2 top-full z-40 mt-2 hidden w-72 -translate-x-1/2 whitespace-pre-line rounded-lg border border-border/60 bg-card px-3 py-2 text-[11px] font-normal normal-case leading-5 tracking-normal text-foreground shadow-sm backdrop-blur-sm group-hover:block group-focus-within:block",
+        children: helperText
+      }
+    )
+  ] });
+}
+function WorkbenchTableView({
+  rows = [],
+  columns = [],
+  onRowClick,
+  selectedRowKey,
+  selectedLinkKey,
+  activePrimaryColumn,
+  activeTablePrimaryColumn,
+  renderedRowCount,
+  totalRowCount,
+  tableMinWidth,
+  minWidth,
+  bodyMaxHeight = "min(58vh, 38rem)",
+  stickyFirstColumn = true,
+  appearance,
+  columnOrder,
+  columnSizes,
+  columnDragEnabled,
+  columnResizeEnabled,
+  className,
+  tableClassName,
+  rowClassName,
+  classNames,
+  style,
+  renderCell,
+  renderFieldValue,
+  renderColumnHeader,
+  onColumnOrderChange,
+  onColumnSizeChange,
+  onSort,
+  formatLabel = defaultFormatLabel,
+  getColumnDataType,
+  getColumnIcon,
+  getColumnTypeIcon,
+  getRowKey = defaultGetRowKey,
+  getRowSelectionKey = defaultGetRowSelectionKey,
+  isActionColumn,
+  isActionField,
+  isRowDisabled,
+  isWorkbenchPlaceholderRow,
+  emptyState = "-",
+  hiddenRowsMessage
+}) {
+  const columnKeySignature = columns.map((column) => column.key).join("
");
+  const defaultColumnOrder = useMemo(() => columnKeySignature ? columnKeySignature.split("
") : [], [columnKeySignature]);
+  const [internalColumnOrder, setInternalColumnOrder] = useState(defaultColumnOrder);
+  const [internalColumnSizes, setInternalColumnSizes] = useState({});
+  useEffect(() => {
+    setInternalColumnOrder((current) => normalizeColumnOrder(defaultColumnOrder, current));
+  }, [defaultColumnOrder]);
+  const resolvedColumnOrder = columnOrder ? normalizeColumnOrder(defaultColumnOrder, columnOrder) : internalColumnOrder;
+  const resolvedColumnSizes = columnSizes ?? internalColumnSizes;
+  const handleColumnOrderChange = useCallback((nextOrder, detail) => {
+    const normalizedOrder = normalizeColumnOrder(defaultColumnOrder, nextOrder);
+    if (!columnOrder) {
+      setInternalColumnOrder(normalizedOrder);
+    }
+    onColumnOrderChange?.(normalizedOrder, detail);
+  }, [columnOrder, defaultColumnOrder, onColumnOrderChange]);
+  const handleColumnSizeChange = useCallback((columnId, width, detail) => {
+    if (!columnSizes) {
+      setInternalColumnSizes((current) => ({
+        ...current,
+        [columnId]: width
+      }));
+    }
+    onColumnSizeChange?.(columnId, width, detail);
+  }, [columnSizes, onColumnSizeChange]);
+  const resolvedSelectedKey = selectedRowKey ?? selectedLinkKey;
+  const resolvedActivePrimaryColumn = activePrimaryColumn ?? activeTablePrimaryColumn;
+  const orderedColumns = getOrderedColumns(columns, resolvedColumnOrder);
+  const hiddenRowCount = Math.max(0, Number(totalRowCount || rows.length) - Number(renderedRowCount || rows.length));
+  const resolvedMinWidth = tableMinWidth ?? minWidth ?? Math.max(760, Math.min(orderedColumns.length * 112, 1440));
+  const renderValue = renderCell ?? renderFieldValue ?? ((column, row) => row?.[column.key]);
+  const isAction = isActionColumn ?? isActionField ?? (() => false);
+  const isDisabled = isRowDisabled ?? isWorkbenchPlaceholderRow ?? (() => false);
+  const resolveColumnIcon = getColumnIcon ?? getColumnTypeIcon;
+  const footer = hiddenRowCount > 0 && hiddenRowsMessage ? typeof hiddenRowsMessage === "function" ? hiddenRowsMessage(hiddenRowCount, renderedRowCount || rows.length, totalRowCount || rows.length) : hiddenRowsMessage : null;
+  return /* @__PURE__ */ jsxs(
+    BaseTableContainer,
+    {
+      appearance,
+      className: cn("w-full overflow-hidden rounded-lg border border-border/40 bg-muted/15 dark:border-border/35 dark:bg-muted/10", classNames?.root, className),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("w-full overflow-auto", classNames?.scrollArea),
+            style: { maxHeight: toCssSize3(bodyMaxHeight) },
+            children: /* @__PURE__ */ jsxs(
+              BaseTable,
+              {
+                appearance,
+                columnOrder: resolvedColumnOrder,
+                columnSizes: resolvedColumnSizes,
+                columnDragEnabled,
+                columnResizeEnabled,
+                onColumnOrderChange: handleColumnOrderChange,
+                onColumnSizeChange: handleColumnSizeChange,
+                className: cn("w-full table-auto text-left text-xs", classNames?.table, tableClassName),
+                style: { minWidth: resolvedMinWidth },
+                children: [
+                  /* @__PURE__ */ jsx(BaseTableHeader, { appearance, className: cn("text-[10px] font-mono uppercase tracking-wide text-muted-foreground", classNames?.header), children: /* @__PURE__ */ jsx(BaseTableRow, { className: cn("hover:bg-transparent", classNames?.headerRow), children: orderedColumns.map((column, columnIndex) => {
+                    const columnType = column.renderType || column.type || getColumnDataType?.(column.key, rows, column);
+                    const columnIcon = renderWorkbenchIcon(
+                      resolveColumnIcon?.(columnType, column),
+                      "h-3.5 w-3.5 shrink-0 text-primary"
+                    );
+                    const previousColumn = orderedColumns[columnIndex - 1];
+                    const followsRecordIcon = previousColumn?.renderType === "icon" && column.key === resolvedActivePrimaryColumn?.key;
+                    const headerContent = renderColumnHeader ? renderColumnHeader(column, { column, columnIndex, columns: orderedColumns, rows, columnType }) : formatLabel(column.label, { column });
+                    const headerTrailing = !renderColumnHeader && (hasRenderableNode(column.trailing) || hasRenderableNode(column.helperText)) ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                      hasRenderableNode(column.trailing) ? formatLabel(column.trailing, { column }) : null,
+                      /* @__PURE__ */ jsx(WorkbenchTableHeaderHelper, { helperText: formatLabel(column.helperText, { column }), className: classNames?.helper })
+                    ] }) : void 0;
+                    const sortable = Boolean(column.sortable);
+                    const handleSort = sortable && onSort ? () => onSort(column.key, column) : void 0;
+                    return /* @__PURE__ */ jsx(
+                      BaseTableHead,
+                      {
+                        appearance,
+                        columnId: column.key,
+                        align: column.align,
+                        icon: renderColumnHeader ? void 0 : columnIcon,
+                        label: headerContent,
+                        description: renderColumnHeader ? void 0 : formatLabel(column.description, { column }),
+                        meta: renderColumnHeader ? void 0 : formatLabel(column.meta, { column }),
+                        actions: renderColumnHeader ? void 0 : column.actions,
+                        trailing: headerTrailing,
+                        sortable,
+                        sortDirection: column.sortDirection,
+                        sortLabel: column.sortLabel,
+                        onSort: handleSort,
+                        draggable: column.draggable,
+                        dragLabel: column.dragLabel,
+                        resizable: column.resizable,
+                        resizeLabel: column.resizeLabel,
+                        width: column.width,
+                        minWidth: typeof column.minWidth === "number" ? column.minWidth : void 0,
+                        maxWidth: typeof column.maxWidth === "number" ? column.maxWidth : void 0,
+                        className: cn(
+                          "sticky top-0 z-20 h-auto whitespace-nowrap bg-card/95 px-4 py-3 font-medium backdrop-blur-sm supports-[backdrop-filter]:bg-card/90",
+                          stickyFirstColumn && columnIndex === 0 && "left-0 z-30 shadow-[1px_0_0_0_hsl(var(--border)/0.35)]",
+                          column.compactHeaderClassName,
+                          column.headerClassName,
+                          column.renderType === "icon" && "pl-3 pr-1",
+                          followsRecordIcon && "pl-2",
+                          classNames?.headerCell
+                        ),
+                        style: {
+                          minWidth: typeof column.minWidth === "string" ? column.minWidth : void 0,
+                          maxWidth: typeof column.maxWidth === "string" ? column.maxWidth : void 0
+                        }
+                      },
+                      column.key
+                    );
+                  }) }) }),
+                  /* @__PURE__ */ jsx(BaseTableBody, { appearance, className: cn("divide-y divide-border/35 dark:divide-border/30", classNames?.body), children: rows.length ? rows.map((row, rowIndex) => {
+                    const key = getRowKey(row, rowIndex);
+                    const disabled = isDisabled(row, rowIndex);
+                    const selectionKey = getRowSelectionKey(row, rowIndex);
+                    const selected = Boolean(resolvedSelectedKey && String(selectionKey) === String(resolvedSelectedKey));
+                    const resolvedRowClassName = typeof rowClassName === "function" ? rowClassName(row, rowIndex) : rowClassName;
+                    return /* @__PURE__ */ jsx(
+                      BaseTableRow,
+                      {
+                        appearance,
+                        interactive: Boolean(onRowClick) && !disabled,
+                        selected,
+                        disabled,
+                        onClick: () => {
+                          if (!disabled) {
+                            onRowClick?.(row, rowIndex);
+                          }
+                        },
+                        className: cn(
+                          onRowClick && !disabled ? "cursor-pointer" : "cursor-default",
+                          selected ? "bg-primary/10 hover:bg-primary/15" : disabled ? "" : "hover:bg-muted/25 dark:hover:bg-muted/15",
+                          classNames?.row,
+                          resolvedRowClassName
+                        ),
+                        children: orderedColumns.map((column, columnIndex) => {
+                          const shouldWrap = isAction(column) || column.wrap === true;
+                          const previousColumn = orderedColumns[columnIndex - 1];
+                          const followsRecordIcon = previousColumn?.renderType === "icon" && column.key === resolvedActivePrimaryColumn?.key;
+                          return /* @__PURE__ */ jsx(
+                            BaseTableCell,
+                            {
+                              appearance,
+                              align: column.align,
+                              className: cn(
+                                shouldWrap ? "align-top whitespace-normal" : "whitespace-nowrap",
+                                "px-4 py-3 text-muted-foreground",
+                                stickyFirstColumn && columnIndex === 0 && "sticky left-0 z-10 bg-card/95 text-foreground shadow-[1px_0_0_0_hsl(var(--border)/0.3)]",
+                                column.compactCellClassName,
+                                column.cellClassName,
+                                column.renderType === "icon" && "pl-3 pr-1",
+                                followsRecordIcon && "pl-2",
+                                classNames?.cell
+                              ),
+                              children: renderValue(column, row, {
+                                row,
+                                rowIndex,
+                                column,
+                                columnIndex,
+                                compact: true,
+                                surface: "list"
+                              })
+                            },
+                            `${key}-${column.key}`
+                          );
+                        })
+                      },
+                      key
+                    );
+                  }) : /* @__PURE__ */ jsx(
+                    BaseTableEmpty,
+                    {
+                      appearance,
+                      colSpan: Math.max(orderedColumns.length, 1),
+                      classNames: { cell: "px-4 py-10 text-center text-sm text-muted-foreground" },
+                      children: emptyState
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        footer ? /* @__PURE__ */ jsx("div", { className: cn("border-t border-border/40 px-4 py-2 text-[11px] text-muted-foreground dark:border-border/30", classNames?.footer), children: footer }) : null
+      ]
+    }
+  );
+}
+function toCssSize4(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function isBrowser() {
+  return typeof window !== "undefined";
+}
+function defaultGetRowKey2(row, rowIndex) {
+  return row?.id ?? row?.key ?? rowIndex;
+}
+function getColumnDefaultSize(column) {
+  if (typeof column.width === "number") return column.width;
+  if (typeof column.minWidth === "number") return column.minWidth;
+  return 160;
+}
+function buildDefaultColumnSizes(columns, explicit) {
+  return columns.reduce((acc, column) => {
+    acc[column.key] = explicit?.[column.key] ?? getColumnDefaultSize(column);
+    return acc;
+  }, {});
+}
+function loadStoredColumnSizes(storageKey, defaults) {
+  if (!storageKey || !isBrowser()) return defaults;
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(storageKey) || "{}");
+    return Object.keys(defaults).reduce((acc, key) => {
+      const value = Number(parsed?.[key]);
+      acc[key] = Number.isFinite(value) ? value : defaults[key];
+      return acc;
+    }, {});
+  } catch {
+    return defaults;
+  }
+}
+function persistColumnSizes(storageKey, sizes) {
+  if (!storageKey || !isBrowser()) return;
+  window.localStorage.setItem(storageKey, JSON.stringify(sizes));
+}
+function getFrozenColumnStorageKey(storageKey) {
+  return storageKey ? `${storageKey}.frozenColumnCount` : void 0;
+}
+function getFrozenEndColumnStorageKey(storageKey) {
+  return storageKey ? `${storageKey}.frozenEndColumnCount` : void 0;
+}
+function clampFrozenColumnCount(count, columnCount) {
+  if (!Number.isFinite(count)) return 0;
+  return Math.max(0, Math.min(Math.round(count), columnCount));
+}
+function normalizeFrozenColumnCounts(startCount, endCount, columnCount) {
+  const normalizedStartCount = clampFrozenColumnCount(startCount, columnCount);
+  const normalizedEndCount = clampFrozenColumnCount(endCount, Math.max(0, columnCount - normalizedStartCount));
+  return {
+    startCount: normalizedStartCount,
+    endCount: normalizedEndCount
+  };
+}
+function loadStoredFrozenColumnCount(storageKey, defaultCount, columnCount) {
+  const fallback = clampFrozenColumnCount(defaultCount, columnCount);
+  const frozenStorageKey = getFrozenColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return fallback;
+  try {
+    const storedValue = window.localStorage.getItem(frozenStorageKey);
+    if (storedValue === null) return fallback;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? clampFrozenColumnCount(value, columnCount) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function persistFrozenColumnCount(storageKey, count) {
+  const frozenStorageKey = getFrozenColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return;
+  window.localStorage.setItem(frozenStorageKey, String(count));
+}
+function loadStoredFrozenEndColumnCount(storageKey, defaultCount, columnCount) {
+  const fallback = clampFrozenColumnCount(defaultCount, columnCount);
+  const frozenStorageKey = getFrozenEndColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return fallback;
+  try {
+    const storedValue = window.localStorage.getItem(frozenStorageKey);
+    if (storedValue === null) return fallback;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? clampFrozenColumnCount(value, columnCount) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function persistFrozenEndColumnCount(storageKey, count) {
+  const frozenStorageKey = getFrozenEndColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return;
+  window.localStorage.setItem(frozenStorageKey, String(count));
+}
+function normalizeColumnOrder2(columnKeys, columnOrder) {
+  const validColumnKeys = new Set(columnKeys);
+  const orderedKeys = (columnOrder || []).filter((columnKey) => validColumnKeys.has(columnKey));
+  const orderedKeySet = new Set(orderedKeys);
+  const remainingKeys = columnKeys.filter((columnKey) => !orderedKeySet.has(columnKey));
+  return [...orderedKeys, ...remainingKeys];
+}
+function getOrderedColumns2(columns, columnOrder) {
+  const normalizedOrder = normalizeColumnOrder2(columns.map((column) => column.key), columnOrder);
+  const columnMap = new Map(columns.map((column) => [column.key, column]));
+  return normalizedOrder.map((columnKey) => columnMap.get(columnKey)).filter(Boolean);
+}
+function getColumnNumericWidth(column, columnSizes) {
+  const controlledWidth = columnSizes[column.key];
+  if (typeof controlledWidth === "number") return controlledWidth;
+  return getColumnDefaultSize(column);
+}
+function buildFrozenOffsets(columns, columnSizes, frozenColumnCount) {
+  const offsets = /* @__PURE__ */ new Map();
+  let left = 0;
+  columns.slice(0, Math.max(0, frozenColumnCount)).forEach((column) => {
+    offsets.set(column.key, left);
+    left += getColumnNumericWidth(column, columnSizes);
+  });
+  return offsets;
+}
+function buildFrozenEndOffsets(columns, columnSizes, frozenEndColumnCount) {
+  const offsets = /* @__PURE__ */ new Map();
+  let right = 0;
+  columns.slice(Math.max(0, columns.length - frozenEndColumnCount)).reverse().forEach((column) => {
+    offsets.set(column.key, right);
+    right += getColumnNumericWidth(column, columnSizes);
+  });
+  return offsets;
+}
+function resolveRowClassName(rowClassName, row, rowIndex) {
+  return typeof rowClassName === "function" ? rowClassName(row, rowIndex) : rowClassName;
+}
+function renderDefaultCell(column, row) {
+  const value = row?.[column.key];
+  if (value === void 0 || value === null || value === "") return "\u2014";
+  return String(value);
+}
+function InteractiveTableCellContent({
+  children,
+  wrap
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "min-w-0 max-w-full overflow-auto overscroll-contain [scrollbar-width:thin]",
+        wrap ? "max-h-20 whitespace-pre-wrap break-words leading-5" : "whitespace-nowrap"
+      ),
+      children
+    }
+  );
+}
+function PinIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.75",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5.25 2.75h5.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M6.25 2.75v4L4.5 9.25h7L9.75 6.75v-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 9.25v4" })
+      ]
+    }
+  );
+}
+function InteractiveTable({
+  rows = [],
+  columns = [],
+  pinnedTopRows = [],
+  getRowKey = defaultGetRowKey2,
+  getPinnedTopRowKey = defaultGetRowKey2,
+  renderCell,
+  renderPinnedTopCell,
+  renderColumnHeader,
+  onRowClick,
+  getRowState,
+  rowClassName,
+  pinnedTopRowClassName,
+  emptyState = "\u2014",
+  columnMenuLabels,
+  columnStorageKey,
+  columnOrder,
+  columnSizes,
+  defaultColumnSizes,
+  columnDragEnabled = false,
+  columnResizeEnabled = true,
+  frozenColumnCount = 0,
+  frozenEndColumnCount = 0,
+  tableMinWidth,
+  bodyMaxHeight = "min(60vh, 42rem)",
+  appearance,
+  className,
+  tableClassName,
+  classNames,
+  style,
+  onColumnOrderChange,
+  onColumnSizeChange,
+  onResetColumnSizes,
+  onFrozenColumnCountChange,
+  onFrozenEndColumnCountChange,
+  onSort
+}) {
+  const columnKeySignature = columns.map((column) => column.key).join("
");
+  const defaultOrder = useMemo(
+    () => columnKeySignature ? columnKeySignature.split("
") : [],
+    [columnKeySignature]
+  );
+  const defaultSizes = useMemo(
+    () => buildDefaultColumnSizes(columns, defaultColumnSizes),
+    [columns, defaultColumnSizes]
+  );
+  const [internalColumnOrder, setInternalColumnOrder] = useState(defaultOrder);
+  const [internalColumnSizes, setInternalColumnSizes] = useState(() => loadStoredColumnSizes(columnStorageKey, defaultSizes));
+  const [internalFrozenColumnCount, setInternalFrozenColumnCount] = useState(() => loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
+  const [internalFrozenEndColumnCount, setInternalFrozenEndColumnCount] = useState(() => loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
+  useEffect(() => {
+    setInternalColumnOrder((current) => normalizeColumnOrder2(defaultOrder, current));
+  }, [defaultOrder]);
+  useEffect(() => {
+    if (columnSizes) return;
+    setInternalColumnSizes(loadStoredColumnSizes(columnStorageKey, defaultSizes));
+  }, [columnSizes, columnStorageKey, defaultSizes]);
+  useEffect(() => {
+    setInternalFrozenColumnCount(loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
+  }, [columnStorageKey, columns.length, frozenColumnCount]);
+  useEffect(() => {
+    setInternalFrozenEndColumnCount(loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
+  }, [columnStorageKey, columns.length, frozenEndColumnCount]);
+  const resolvedColumnOrder = columnOrder ? normalizeColumnOrder2(defaultOrder, columnOrder) : internalColumnOrder;
+  const resolvedColumnSizes = columnSizes ?? internalColumnSizes;
+  const orderedColumns = getOrderedColumns2(columns, resolvedColumnOrder);
+  const {
+    startCount: resolvedFrozenColumnCount,
+    endCount: resolvedFrozenEndColumnCount
+  } = normalizeFrozenColumnCounts(internalFrozenColumnCount, internalFrozenEndColumnCount, orderedColumns.length);
+  const frozenOffsets = buildFrozenOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenColumnCount);
+  const frozenEndOffsets = buildFrozenEndOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenEndColumnCount);
+  const resolvedMinWidth = tableMinWidth ?? Math.max(760, orderedColumns.reduce((total, column) => total + getColumnNumericWidth(column, resolvedColumnSizes), 0));
+  const labels = {
+    columnActions: columnMenuLabels?.columnActions ?? "Column actions",
+    freezeColumn: columnMenuLabels?.freezeColumn ?? "Freeze to left",
+    freezeEndColumn: columnMenuLabels?.freezeEndColumn ?? "Freeze to right",
+    unfreezeColumn: columnMenuLabels?.unfreezeColumn ?? "Unfreeze from left",
+    unfreezeEndColumn: columnMenuLabels?.unfreezeEndColumn ?? "Unfreeze from right",
+    unfreezeAllColumns: columnMenuLabels?.unfreezeAllColumns ?? "Unfreeze all columns",
+    resetColumnWidth: columnMenuLabels?.resetColumnWidth ?? "Reset column width",
+    frozenColumnTitle: columnMenuLabels?.frozenColumnTitle ?? "Frozen column"
+  };
+  const handleColumnOrderChange = useCallback((nextOrder, detail) => {
+    const normalizedOrder = normalizeColumnOrder2(defaultOrder, nextOrder);
+    if (!columnOrder) {
+      setInternalColumnOrder(normalizedOrder);
+    }
+    onColumnOrderChange?.(normalizedOrder, detail);
+  }, [columnOrder, defaultOrder, onColumnOrderChange]);
+  const handleColumnSizeChange = useCallback((columnId, width, detail) => {
+    const column = columns.find((item) => item.key === columnId);
+    const minWidth = column?.minWidth;
+    const maxWidth = column?.maxWidth;
+    const nextWidth = Math.max(
+      typeof minWidth === "number" ? minWidth : 0,
+      Math.min(width, typeof maxWidth === "number" ? maxWidth : Number.POSITIVE_INFINITY)
+    );
+    const nextSizes = {
+      ...resolvedColumnSizes,
+      [columnId]: nextWidth
+    };
+    if (!columnSizes) {
+      setInternalColumnSizes(nextSizes);
+    }
+    persistColumnSizes(columnStorageKey, nextSizes);
+    onColumnSizeChange?.(columnId, nextWidth, detail);
+  }, [columnSizes, columnStorageKey, columns, onColumnSizeChange, resolvedColumnSizes]);
+  const handleResetColumnSize = useCallback((column) => {
+    const nextWidth = defaultSizes[column.key] ?? getColumnDefaultSize(column);
+    const previousWidth = getColumnNumericWidth(column, resolvedColumnSizes);
+    const nextSizes = {
+      ...resolvedColumnSizes,
+      [column.key]: nextWidth
+    };
+    if (!columnSizes) {
+      setInternalColumnSizes(nextSizes);
+    }
+    persistColumnSizes(columnStorageKey, nextSizes);
+    onColumnSizeChange?.(column.key, nextWidth, {
+      columnId: column.key,
+      previousWidth,
+      minWidth: column.minWidth,
+      maxWidth: column.maxWidth
+    });
+    onResetColumnSizes?.(nextSizes);
+  }, [columnSizes, columnStorageKey, defaultSizes, onColumnSizeChange, onResetColumnSizes, resolvedColumnSizes]);
+  const setFrozenColumnCount = useCallback((nextCount) => {
+    const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenEndColumnCount));
+    setInternalFrozenColumnCount(normalizedCount);
+    persistFrozenColumnCount(columnStorageKey, normalizedCount);
+    onFrozenColumnCountChange?.(normalizedCount);
+  }, [columnStorageKey, onFrozenColumnCountChange, orderedColumns.length, resolvedFrozenEndColumnCount]);
+  const setFrozenEndColumnCount = useCallback((nextCount) => {
+    const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenColumnCount));
+    setInternalFrozenEndColumnCount(normalizedCount);
+    persistFrozenEndColumnCount(columnStorageKey, normalizedCount);
+    onFrozenEndColumnCountChange?.(normalizedCount);
+  }, [columnStorageKey, onFrozenEndColumnCountChange, orderedColumns.length, resolvedFrozenColumnCount]);
+  const getFrozenPosition = (columnIndex) => {
+    if (columnIndex < resolvedFrozenColumnCount) return "start";
+    if (columnIndex >= orderedColumns.length - resolvedFrozenEndColumnCount) return "end";
+    return void 0;
+  };
+  const getFrozenClassName = (column, columnIndex, isHeader = false) => {
+    const position = getFrozenPosition(columnIndex);
+    if (!position) return void 0;
+    return cn(
+      "sticky",
+      position === "start" ? "shadow-[1px_0_0_0_hsl(var(--border)/0.45)]" : "shadow-[-1px_0_0_0_hsl(var(--border)/0.45)]",
+      isHeader ? "bg-muted/60" : "bg-inherit",
+      isHeader ? "z-40" : "z-20",
+      (columnIndex === 0 || columnIndex === orderedColumns.length - 1) && (isHeader ? "z-50" : "z-30")
+    );
+  };
+  const getFrozenStyle = (column, columnIndex) => {
+    const position = getFrozenPosition(columnIndex);
+    if (position === "start") return { left: frozenOffsets.get(column.key) ?? 0 };
+    if (position === "end") return { right: frozenEndOffsets.get(column.key) ?? 0 };
+    return void 0;
+  };
+  return /* @__PURE__ */ jsx(
+    BaseTableContainer,
+    {
+      appearance,
+      className: cn("flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border/60 bg-card", classNames?.root, className),
+      style,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("min-h-0 flex-1 overflow-auto", classNames?.scrollArea),
+          style: { maxHeight: toCssSize4(bodyMaxHeight) },
+          children: /* @__PURE__ */ jsxs(
+            BaseTable,
+            {
+              appearance,
+              columnOrder: resolvedColumnOrder,
+              columnSizes: resolvedColumnSizes,
+              columnDragEnabled,
+              columnResizeEnabled,
+              onColumnOrderChange: handleColumnOrderChange,
+              onColumnSizeChange: handleColumnSizeChange,
+              className: cn("w-full table-fixed text-left text-xs", classNames?.table, tableClassName),
+              style: { minWidth: resolvedMinWidth },
+              children: [
+                /* @__PURE__ */ jsx("colgroup", { children: orderedColumns.map((column) => /* @__PURE__ */ jsx(
+                  "col",
+                  {
+                    style: {
+                      width: toCssSize4(resolvedColumnSizes[column.key] ?? column.width),
+                      minWidth: toCssSize4(column.minWidth)
+                    }
+                  },
+                  column.key
+                )) }),
+                /* @__PURE__ */ jsx(BaseTableHeader, { appearance, className: cn("border-b border-border/60 bg-muted/60 text-[11px] font-medium text-muted-foreground", classNames?.tableHeader), children: /* @__PURE__ */ jsx(BaseTableRow, { appearance, className: cn("hover:bg-transparent", classNames?.headerRow), children: orderedColumns.map((column, columnIndex) => {
+                  const headerContent = renderColumnHeader ? renderColumnHeader(column, { column, columnIndex, columns: orderedColumns, rows }) : column.label;
+                  const sortable = Boolean(column.sortable);
+                  const handleSort = sortable && onSort ? () => onSort(column.key, column) : void 0;
+                  const isFrozenStart = columnIndex < resolvedFrozenColumnCount;
+                  const isFrozenEnd = columnIndex >= orderedColumns.length - resolvedFrozenEndColumnCount;
+                  const isFrozen = isFrozenStart || isFrozenEnd;
+                  const isColumnAtDefaultWidth = getColumnNumericWidth(column, resolvedColumnSizes) === (defaultSizes[column.key] ?? getColumnDefaultSize(column));
+                  return /* @__PURE__ */ jsxs(BaseContextMenu, { modal: false, children: [
+                    /* @__PURE__ */ jsx(BaseContextMenuTrigger, { asChild: true, appearance, children: /* @__PURE__ */ jsx(
+                      BaseTableHead,
+                      {
+                        appearance,
+                        columnId: column.key,
+                        align: column.align,
+                        label: headerContent,
+                        description: column.description,
+                        trailing: isFrozen ? /* @__PURE__ */ jsx("span", { title: labels.frozenColumnTitle, className: "inline-flex h-5 w-5 items-center justify-center rounded text-primary", children: /* @__PURE__ */ jsx(PinIcon, { className: "h-3.5 w-3.5" }) }) : null,
+                        sortable,
+                        sortDirection: column.sortDirection,
+                        sortLabel: column.sortLabel,
+                        onSort: handleSort,
+                        draggable: column.draggable,
+                        resizable: column.resizable,
+                        width: column.width,
+                        minWidth: column.minWidth,
+                        maxWidth: column.maxWidth,
+                        className: cn(
+                          "sticky top-0 h-9 whitespace-nowrap border-r border-border/50 bg-muted/60 px-2.5 py-2 backdrop-blur",
+                          getFrozenClassName(column, columnIndex, true),
+                          column.headerClassName,
+                          column.className,
+                          classNames?.headerCell
+                        ),
+                        style: getFrozenStyle(column, columnIndex)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs(BaseContextMenuContent, { appearance, alignOffset: -4, className: "min-w-44", children: [
+                      /* @__PURE__ */ jsx(BaseContextMenuLabel, { appearance, children: labels.columnActions }),
+                      isFrozen ? /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          onSelect: () => {
+                            if (isFrozenEnd) setFrozenEndColumnCount(orderedColumns.length - columnIndex - 1);
+                            else setFrozenColumnCount(columnIndex);
+                          },
+                          children: isFrozenEnd ? labels.unfreezeEndColumn : labels.unfreezeColumn
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          onSelect: () => setFrozenColumnCount(columnIndex + 1),
+                          children: labels.freezeColumn
+                        }
+                      ),
+                      !isFrozen ? /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          onSelect: () => setFrozenEndColumnCount(orderedColumns.length - columnIndex),
+                          children: labels.freezeEndColumn
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          disabled: resolvedFrozenColumnCount === 0 && resolvedFrozenEndColumnCount === 0,
+                          onSelect: () => {
+                            setFrozenColumnCount(0);
+                            setFrozenEndColumnCount(0);
+                          },
+                          children: labels.unfreezeAllColumns
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(BaseContextMenuSeparator, { appearance }),
+                      /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          disabled: isColumnAtDefaultWidth,
+                          onSelect: () => handleResetColumnSize(column),
+                          children: labels.resetColumnWidth
+                        }
+                      )
+                    ] })
+                  ] }, column.key);
+                }) }) }),
+                /* @__PURE__ */ jsxs(BaseTableBody, { appearance, className: cn("divide-y divide-border/50", classNames?.body), children: [
+                  pinnedTopRows.map((row, rowIndex) => {
+                    const key = getPinnedTopRowKey(row, rowIndex);
+                    const resolvedRowClassName = resolveRowClassName(pinnedTopRowClassName, row, rowIndex);
+                    return /* @__PURE__ */ jsx(
+                      BaseTableRow,
+                      {
+                        appearance,
+                        className: cn("bg-card/95", classNames?.pinnedTopRow, resolvedRowClassName),
+                        children: orderedColumns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+                          BaseTableCell,
+                          {
+                            appearance,
+                            align: column.align,
+                            className: cn(
+                              "h-[52px] border-r border-border/50 px-2.5 py-1.5 align-middle",
+                              column.wrap ? "whitespace-normal" : "whitespace-nowrap",
+                              getFrozenClassName(column, columnIndex),
+                              column.cellClassName,
+                              classNames?.cell
+                            ),
+                            style: getFrozenStyle(column, columnIndex),
+                            children: /* @__PURE__ */ jsx(InteractiveTableCellContent, { wrap: column.wrap, children: renderPinnedTopCell ? renderPinnedTopCell(column, row, { row, rowIndex, column, columnIndex, isPinnedTopRow: true }) : renderDefaultCell(column, row) })
+                          },
+                          `pinned-${key}-${column.key}`
+                        ))
+                      },
+                      `pinned-${key}`
+                    );
+                  }),
+                  rows.length ? rows.map((row, rowIndex) => {
+                    const key = getRowKey(row, rowIndex);
+                    const state = getRowState?.(row, rowIndex) || {};
+                    const resolvedRowClassName = resolveRowClassName(rowClassName, row, rowIndex);
+                    return /* @__PURE__ */ jsx(
+                      BaseTableRow,
+                      {
+                        appearance,
+                        interactive: Boolean(onRowClick) && !state.disabled,
+                        selected: state.selected,
+                        disabled: state.disabled,
+                        onClick: () => {
+                          if (!state.disabled) onRowClick?.(row, rowIndex);
+                        },
+                        className: cn(
+                          "min-h-[52px] bg-card transition-colors",
+                          state.saving && "bg-primary/5",
+                          state.pending && "opacity-80",
+                          onRowClick && !state.disabled ? "cursor-pointer hover:bg-muted/30" : "hover:bg-muted/30",
+                          classNames?.row,
+                          resolvedRowClassName
+                        ),
+                        children: orderedColumns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+                          BaseTableCell,
+                          {
+                            appearance,
+                            align: column.align,
+                            className: cn(
+                              "h-[52px] border-r border-border/50 px-2.5 py-1.5 align-middle",
+                              column.wrap ? "whitespace-normal" : "whitespace-nowrap",
+                              getFrozenClassName(column, columnIndex),
+                              column.cellClassName,
+                              classNames?.cell
+                            ),
+                            style: getFrozenStyle(column, columnIndex),
+                            children: /* @__PURE__ */ jsx(InteractiveTableCellContent, { wrap: column.wrap, children: renderCell ? renderCell(column, row, { row, rowIndex, column, columnIndex, isPinnedTopRow: false }) : renderDefaultCell(column, row) })
+                          },
+                          `${key}-${column.key}`
+                        ))
+                      },
+                      key
+                    );
+                  }) : pinnedTopRows.length ? null : /* @__PURE__ */ jsx(
+                    BaseTableEmpty,
+                    {
+                      appearance,
+                      colSpan: Math.max(orderedColumns.length, 1),
+                      className: classNames?.empty,
+                      children: emptyState
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function InteractiveTableEditableTextCell({
+  value,
+  placeholder,
+  disabled,
+  multiline = false,
+  commitOnBlur = true,
+  className,
+  inputClassName,
+  onCommit
+}) {
+  const initialValue = String(value || "");
+  const [draft, setDraft] = useState(initialValue);
+  useEffect(() => {
+    setDraft(initialValue);
+  }, [initialValue]);
+  const commit = useCallback(async () => {
+    const nextValue = String(draft || "").trim();
+    const previousValue = String(initialValue || "").trim();
+    if (nextValue === previousValue) return;
+    try {
+      await onCommit?.(nextValue);
+    } catch {
+      setDraft(initialValue);
+    }
+  }, [draft, initialValue, onCommit]);
+  const controlClassName = cn(
+    "w-full resize-none rounded-sm border border-transparent bg-transparent px-1.5 py-1 text-xs text-foreground outline-none transition-colors",
+    "placeholder:text-muted-foreground/70 hover:border-border/60 hover:bg-background focus:border-primary/45 focus:bg-background",
+    multiline ? "min-h-[42px] leading-5" : "h-8",
+    disabled && "cursor-not-allowed text-muted-foreground hover:border-transparent hover:bg-transparent",
+    inputClassName
+  );
+  if (multiline) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(controlClassName, className),
+        disabled,
+        value: draft,
+        placeholder,
+        onChange: (event) => setDraft(event.target.value),
+        onBlur: () => {
+          if (commitOnBlur) void commit();
+        },
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.currentTarget.blur();
+          }
+          if (event.key === "Escape") {
+            setDraft(initialValue);
+            event.currentTarget.blur();
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: cn(controlClassName, className),
+      disabled,
+      value: draft,
+      placeholder,
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => {
+        if (commitOnBlur) void commit();
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+        if (event.key === "Escape") {
+          setDraft(initialValue);
+          event.currentTarget.blur();
+        }
+      }
+    }
+  );
+}
+function InteractiveTableReadonlyCell({
+  children,
+  mono = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 text-xs text-muted-foreground", mono && "font-mono", className), children: hasRenderableNode(children) ? children : "\u2014" });
+}
+function InteractiveTableSelectCell({
+  value,
+  options,
+  disabled,
+  ariaLabel,
+  children,
+  className,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full items-center", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": ariaLabel,
+        disabled,
+        value,
+        onChange: (event) => onChange?.(event.target.value),
+        className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    )
+  ] });
+}
+var imageExtPattern = /\.(png|jpe?g|webp|gif|svg|bmp|avif)$/i;
+var audioExtPattern = /\.(wav|mp3|ogg|m4a|flac|aac)$/i;
+var isLikelyUrl = (value) => /^https?:\/\//i.test(String(value || ""));
+var getColumnRenderKind = (column) => String(column?.renderType || column?.type || "").toLowerCase();
+var isImageLikeValue = (value) => String(value || "").startsWith("data:image/") || imageExtPattern.test(String(value || ""));
+var isAudioLikeValue = (value) => String(value || "").startsWith("data:audio/") || audioExtPattern.test(String(value || ""));
+var escapeSvgText = (value) => String(value || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var getDefaultGalleryFieldValue = (column, row) => {
+  if (!column) return null;
+  return row?.[column.key] ?? null;
+};
+var getDefaultGalleryDisplayText = (value) => {
+  if (value === null || value === void 0 || value === "") return "\u2014";
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => {
+      if (typeof item === "string") return item;
+      if (!item || typeof item !== "object") return "";
+      const objectItem = item;
+      return objectItem.text || objectItem.label || objectItem.title || objectItem.display || objectItem.value || objectItem.recordId || "";
+    }).filter(Boolean);
+    return parts.join(" \xB7 ") || "\u2014";
+  }
+  if (typeof value === "object") {
+    const objectValue = value;
+    return String(objectValue.text || objectValue.label || objectValue.title || objectValue.display || objectValue.value || "\u2014");
+  }
+  return String(value);
+};
+var isDefaultGalleryImageField = (column = { key: "" }, value) => getColumnRenderKind(column) === "image" || isImageLikeValue(value);
+var isDefaultGalleryAudioField = (column = { key: "" }, value) => getColumnRenderKind(column) === "audio" || isAudioLikeValue(value);
+var getDefaultGalleryImagePreviewSrc = (value, rowId, columnLabel) => {
+  if (isLikelyUrl(value) || String(value || "").startsWith("data:image/")) return String(value);
+  const title = escapeSvgText(value || columnLabel || rowId || "");
+  const titleText = title ? `<text x='68' y='450' fill='white' font-family='Inter, Arial' font-size='52' font-weight='700'>${title}</text>` : "";
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 540'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='#0f172a'/><stop offset='55%' stop-color='#1d4ed8'/><stop offset='100%' stop-color='#14b8a6'/></linearGradient></defs><rect width='960' height='540' fill='url(#g)'/><g opacity='0.28'><circle cx='780' cy='130' r='150' fill='#67e8f9'/><circle cx='180' cy='430' r='170' fill='#a78bfa'/></g>${titleText}</svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+var isDefaultGalleryMediaColumn = (column, row, {
+  getFieldValue = getDefaultGalleryFieldValue,
+  shouldEnhanceMultimodal = true,
+  isImageField = isDefaultGalleryImageField,
+  isAudioField = isDefaultGalleryAudioField
+} = {}) => {
+  if (!column || !shouldEnhanceMultimodal) return false;
+  const value = getFieldValue(column, row);
+  return isImageField(column, value) || isAudioField(column, value);
+};
+var isDefaultGalleryTitleCandidate = (column, row, { isMediaColumn = () => false } = {}) => {
+  if (!column || column.renderType === "icon") return false;
+  return !isMediaColumn(column, row);
+};
+var isDefaultGallerySummaryCandidate = (column, row, { isMediaColumn = () => false } = {}) => {
+  if (!column || column.renderType === "icon") return false;
+  return !isMediaColumn(column, row);
+};
+var renderDefaultGalleryFieldValue = (column, row, {
+  compact = false,
+  getFieldValue = getDefaultGalleryFieldValue,
+  getDisplayText = getDefaultGalleryDisplayText
+} = {}) => {
+  const value = getFieldValue(column, row);
+  return /* @__PURE__ */ jsx("span", { className: cn("leading-relaxed", compact && column?.wrap === true && "line-clamp-2 block"), children: getDisplayText(value) });
+};
+var getDefaultGalleryDetailLimit = (density) => {
+  if (density === "compact") return 2;
+  if (density === "detailed") return 6;
+  return 4;
+};
+var getNormalizedGalleryBentoColumns = (columns, density) => {
+  if (columns === 1 || columns === 2 || columns === 3) return Number(columns);
+  return density === "detailed" ? 1 : 2;
+};
+var getNormalizedGalleryDetailLimit = ({
+  density,
+  visibility,
+  limit
+}) => {
+  if (visibility === "all") return Number.POSITIVE_INFINITY;
+  const parsedLimit = Number.parseInt(String(limit), 10);
+  if (Number.isFinite(parsedLimit) && parsedLimit > 0) return parsedLimit;
+  return getDefaultGalleryDetailLimit(density);
+};
+var getGalleryCardPaddingClassName = (density) => {
+  if (density === "compact") return "p-3";
+  if (density === "detailed") return "p-4";
+  return "p-3.5";
+};
+var getGalleryPreviewClassName = (density, isMasonry) => {
+  if (isMasonry) return "h-auto w-full object-cover";
+  if (density === "compact") return "h-32 w-full object-cover";
+  if (density === "detailed") return "h-48 w-full object-cover";
+  return "h-40 w-full object-cover";
+};
+var getGalleryDetailGridClassName = (columns) => {
+  if (columns === 1) return "grid-cols-1";
+  if (columns === 3) return "grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3";
+  return "grid-cols-1 sm:grid-cols-2";
+};
+function getIconComponent(icon) {
+  return getWorkbenchIconComponent(icon);
+}
+function defaultFormatLabel2(value) {
+  return value;
+}
+function getLabelText(value) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  return "";
+}
+function WorkbenchGalleryCard({
+  row,
+  columns,
+  onClick = () => {
+  },
+  isSelected = false,
+  isMasonry = false,
+  galleryFieldKey = "auto",
+  galleryDensity = "comfortable",
+  galleryBentoColumns,
+  galleryDetailVisibility = "limit",
+  galleryDetailLimit,
+  shouldEnhanceMultimodal = true,
+  getFieldValue,
+  isMediaColumn,
+  isTitleCandidate,
+  isSummaryCandidate,
+  getDisplayText,
+  renderFieldValue,
+  getImagePreviewSrc,
+  isImageField,
+  isAudioField,
+  AudioPlayerComponent,
+  cardVariant = "default",
+  renderPreview,
+  renderMeta,
+  renderLeadingVisual,
+  resolveRecordVisual,
+  hiddenDetailFieldKeys = [],
+  labels,
+  formatLabel = defaultFormatLabel2,
+  className
+}) {
+  const resolvedGetFieldValue = getFieldValue || getDefaultGalleryFieldValue;
+  const resolvedGetDisplayText = getDisplayText || getDefaultGalleryDisplayText;
+  const resolvedIsImageField = isImageField || isDefaultGalleryImageField;
+  const resolvedIsAudioField = isAudioField || isDefaultGalleryAudioField;
+  const resolvedGetImagePreviewSrc = getImagePreviewSrc || getDefaultGalleryImagePreviewSrc;
+  const resolvedIsMediaColumn = isMediaColumn || ((column, candidateRow) => isDefaultGalleryMediaColumn(column, candidateRow, {
+    getFieldValue: resolvedGetFieldValue,
+    shouldEnhanceMultimodal,
+    isImageField: resolvedIsImageField,
+    isAudioField: resolvedIsAudioField
+  }));
+  const resolvedIsTitleCandidate = isTitleCandidate || ((column, candidateRow) => isDefaultGalleryTitleCandidate(column, candidateRow, { isMediaColumn: resolvedIsMediaColumn }));
+  const resolvedIsSummaryCandidate = isSummaryCandidate || ((column, candidateRow) => isDefaultGallerySummaryCandidate(column, candidateRow, { isMediaColumn: resolvedIsMediaColumn }));
+  const resolvedRenderFieldValue = renderFieldValue || ((column, candidateRow, { compact } = {}) => renderDefaultGalleryFieldValue(column, candidateRow, {
+    compact,
+    getFieldValue: resolvedGetFieldValue,
+    getDisplayText: resolvedGetDisplayText
+  }));
+  const isPreviewOnly = cardVariant === "preview-only";
+  const isImageOnly = cardVariant === "image-only";
+  const isChromaticBento = cardVariant === "chromatic-bento";
+  const selectedGalleryColumn = galleryFieldKey !== "auto" ? columns.find((column) => column.key === galleryFieldKey && resolvedIsMediaColumn(column, row)) : null;
+  const mediaColumn = selectedGalleryColumn || (shouldEnhanceMultimodal ? columns.find((column) => resolvedIsMediaColumn(column, row)) : null);
+  const iconColumn = columns.find((column) => column.renderType === "icon");
+  const iconVisual = iconColumn && resolveRecordVisual ? resolveRecordVisual(row[iconColumn.key], row, iconColumn) : null;
+  const IconComponent = getIconComponent(iconVisual?.Icon || iconVisual?.icon);
+  const mediaValue = mediaColumn ? resolvedGetFieldValue(mediaColumn, row) : null;
+  const isImageMedia = mediaColumn ? resolvedIsImageField(mediaColumn, mediaValue) : false;
+  const isAudioMedia = mediaColumn ? resolvedIsAudioField(mediaColumn, mediaValue) : false;
+  const contentColumns = columns.filter((column) => column.key !== mediaColumn?.key && column.renderType !== "icon");
+  const titleCandidates = contentColumns.filter((column) => {
+    if (!column || resolvedIsMediaColumn(column, row) || !resolvedIsTitleCandidate(column, row)) return false;
+    const value = resolvedGetFieldValue(column, row);
+    return !(value === null || value === void 0 || value === "");
+  });
+  const titleColumn = titleCandidates[0] || null;
+  const titleText = titleColumn ? resolvedGetDisplayText(resolvedGetFieldValue(titleColumn, row)) : resolvedGetDisplayText(row.linkKey || row.id);
+  const summaryColumn = contentColumns.find((column) => {
+    if (!column || column.key === titleColumn?.key || resolvedIsMediaColumn(column, row) || !resolvedIsSummaryCandidate(column, row)) return false;
+    const summaryText2 = String(resolvedGetDisplayText(resolvedGetFieldValue(column, row)));
+    return summaryText2 !== "\u2014" && summaryText2.length > 12;
+  }) || contentColumns.find((column) => {
+    if (!column || column.key === titleColumn?.key || resolvedIsMediaColumn(column, row) || !resolvedIsSummaryCandidate(column, row)) return false;
+    const fallbackText = String(resolvedGetDisplayText(resolvedGetFieldValue(column, row)));
+    return fallbackText !== "\u2014";
+  }) || null;
+  const summaryText = summaryColumn ? resolvedGetDisplayText(resolvedGetFieldValue(summaryColumn, row)) : "";
+  const hiddenDetailKeySet = new Set(hiddenDetailFieldKeys);
+  const detailColumns = contentColumns.filter((column) => column.key !== titleColumn?.key && column.key !== summaryColumn?.key && !hiddenDetailKeySet.has(column.key));
+  const resolvedDetailLimit = getNormalizedGalleryDetailLimit({
+    density: galleryDensity,
+    visibility: galleryDetailVisibility,
+    limit: galleryDetailLimit
+  });
+  const visibleDetailColumns = Number.isFinite(resolvedDetailLimit) ? detailColumns.slice(0, resolvedDetailLimit) : detailColumns;
+  const isDetailedCard = galleryDensity === "detailed";
+  const resolvedBentoColumns = getNormalizedGalleryBentoColumns(galleryBentoColumns, galleryDensity);
+  const cardPaddingClassName = getGalleryCardPaddingClassName(galleryDensity);
+  const detailGridClassName = getGalleryDetailGridClassName(resolvedBentoColumns);
+  const previewClassName = isImageOnly ? "block h-auto w-full transition-transform duration-500 group-hover:scale-[1.02]" : getGalleryPreviewClassName(galleryDensity, isMasonry);
+  const customPreview = typeof renderPreview === "function" ? renderPreview({
+    row,
+    mediaColumn,
+    mediaValue,
+    isImageMedia,
+    isAudioMedia,
+    iconVisual,
+    IconComponent,
+    previewClassName
+  }) : null;
+  const metaContent = typeof renderMeta === "function" ? renderMeta({
+    row,
+    contentColumns,
+    detailColumns,
+    titleColumn,
+    summaryColumn,
+    getDisplayText: resolvedGetDisplayText,
+    getFieldValue: resolvedGetFieldValue
+  }) : null;
+  const customLeadingVisual = typeof renderLeadingVisual === "function" ? renderLeadingVisual({
+    row,
+    contentColumns,
+    detailColumns,
+    titleColumn,
+    summaryColumn,
+    iconVisual,
+    getDisplayText: resolvedGetDisplayText,
+    getFieldValue: resolvedGetFieldValue
+  }) : null;
+  const defaultLeadingVisual = !customLeadingVisual && iconVisual ? /* @__PURE__ */ jsx("div", { className: cn("flex h-9 w-9 items-center justify-center rounded-lg border", iconVisual.chipClassName || "border-primary/20 bg-primary/10 text-primary"), children: renderWorkbenchIcon(iconVisual.Icon || iconVisual.icon, cn("h-4 w-4", iconVisual.iconClassName || "text-primary")) }) : null;
+  const leadingVisual = customLeadingVisual || defaultLeadingVisual;
+  const defaultMetaClassName = isChromaticBento ? "shrink-0 rounded-full border border-border/40 bg-muted/25 px-2.5 py-1 text-[10px] text-muted-foreground transition-all duration-300 group-hover:border-primary/30 group-hover:bg-primary/10 group-hover:text-primary dark:border-border/35 dark:bg-muted/15" : "shrink-0 rounded-md border border-border/40 bg-muted/25 px-2 py-1 text-[10px] text-muted-foreground dark:border-border/35 dark:bg-muted/15";
+  const detailCellClassName = isChromaticBento ? "rounded-xl border border-border/35 bg-muted/20 px-3 py-2.5 transition-all duration-300 group-hover:border-primary/25 group-hover:bg-primary/5 dark:border-border/30 dark:bg-muted/10" : "rounded-lg border border-border/35 bg-muted/20 px-2.5 py-2 dark:border-border/30 dark:bg-muted/10";
+  const detailLabelClassName = isChromaticBento ? "text-[10px] uppercase tracking-[0.14em] text-muted-foreground transition-colors duration-300 group-hover:text-foreground" : "text-[10px] uppercase tracking-[0.12em] text-muted-foreground";
+  const detailValueClassName = isChromaticBento ? "mt-1.5 text-[11px] text-muted-foreground transition-colors duration-300 group-hover:text-foreground [&_*]:max-w-full [&_pre]:text-[11px] [&_pre]:leading-relaxed" : "mt-1.5 text-[11px] text-foreground [&_*]:max-w-full [&_pre]:text-[11px] [&_pre]:leading-relaxed";
+  const fieldCountLabel = labels?.fieldCount?.(contentColumns.length);
+  const coverOnlyHint = labels?.coverOnlyHint;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": getLabelText(titleText),
+      className: cn(
+        "group relative w-full text-left transition-all duration-300",
+        isImageOnly ? "overflow-hidden rounded-xl bg-transparent p-0 shadow-none" : isPreviewOnly ? "overflow-hidden rounded-3xl bg-transparent p-0" : cn("overflow-hidden rounded-xl border", isChromaticBento && "rounded-3xl shadow-none"),
+        !isPreviewOnly && !isImageOnly && cardPaddingClassName,
+        !isPreviewOnly && !isImageOnly && (isSelected ? isChromaticBento ? "border-primary/35 bg-background/85 ring-1 ring-primary/20" : "border-primary/40 bg-primary/10 ring-1 ring-primary/30" : isChromaticBento ? "workbench-surface-card hover:-translate-y-1 hover:border-primary/20" : "workbench-surface-card hover:border-primary/30"),
+        isPreviewOnly && isSelected && "ring-1 ring-primary/30",
+        isImageOnly && (isSelected ? "ring-1 ring-primary/30" : "hover:-translate-y-0.5"),
+        isMasonry ? "block h-full w-full min-w-0" : "h-full min-w-0",
+        className
+      ),
+      children: [
+        isChromaticBento ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.18),transparent_40%),radial-gradient(circle_at_bottom_left,rgba(16,185,129,0.12),transparent_45%)] opacity-0 transition-opacity duration-300",
+              isSelected ? "opacity-100" : "group-hover:opacity-100"
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "relative z-[1]", children: [
+          customPreview ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            isImageMedia && mediaColumn ? /* @__PURE__ */ jsx("div", { className: cn(
+              "overflow-hidden bg-card/50",
+              isImageOnly ? "rounded-xl bg-transparent" : isPreviewOnly ? "rounded-3xl" : "mb-3 rounded-lg border border-border/70"
+            ), children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: resolvedGetImagePreviewSrc(mediaValue, row.id, mediaColumn.label),
+                alt: String(mediaValue || mediaColumn.label || ""),
+                className: previewClassName,
+                loading: "lazy",
+                referrerPolicy: "no-referrer",
+                onError: (event) => {
+                  event.currentTarget.onerror = null;
+                  event.currentTarget.src = resolvedGetImagePreviewSrc("", row.id, mediaColumn.label);
+                }
+              }
+            ) }) : null,
+            !isImageMedia && iconVisual && isPreviewOnly ? /* @__PURE__ */ jsx("div", { className: cn(
+              "flex items-center justify-center",
+              isPreviewOnly ? cn("rounded-3xl border py-10", iconVisual.chipClassName || "border-primary/20 bg-primary/5") : "mb-3 h-24 rounded-lg border border-border/60 bg-primary/5"
+            ), children: renderWorkbenchIcon(iconVisual.Icon || iconVisual.icon, cn("h-10 w-10", iconVisual.iconClassName || "text-primary")) }) : null,
+            isAudioMedia && AudioPlayerComponent ? /* @__PURE__ */ jsx("div", { className: cn(!isPreviewOnly && "mb-3"), children: /* @__PURE__ */ jsx(AudioPlayerComponent, { filename: String(mediaValue) }) }) : null
+          ] }),
+          !isPreviewOnly && !isImageOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              leadingVisual ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: leadingVisual }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("div", { className: cn(
+                    "flex items-center gap-2 text-sm font-semibold",
+                    isChromaticBento ? "text-muted-foreground transition-colors duration-300 group-hover:text-foreground" : "text-foreground"
+                  ), children: /* @__PURE__ */ jsx("span", { className: "truncate", children: titleText }) }),
+                  summaryText && summaryText !== titleText ? /* @__PURE__ */ jsx("div", { className: cn(
+                    "mt-1 text-[11px] leading-5 text-muted-foreground",
+                    isDetailedCard ? "line-clamp-4" : "line-clamp-2",
+                    isChromaticBento && "transition-colors duration-300 group-hover:text-foreground"
+                  ), children: summaryText }) : null
+                ] }),
+                metaContent ?? (hasRenderableNode(fieldCountLabel) ? /* @__PURE__ */ jsx("span", { className: defaultMetaClassName, children: fieldCountLabel }) : null)
+              ] })
+            ] }),
+            visibleDetailColumns.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn("mt-3 grid grid-flow-row gap-2", detailGridClassName), children: visibleDetailColumns.map((column) => /* @__PURE__ */ jsxs("div", { className: detailCellClassName, children: [
+              column.label ? /* @__PURE__ */ jsx("div", { className: detailLabelClassName, children: formatLabel(column.label, { column }) }) : null,
+              /* @__PURE__ */ jsx("div", { className: cn(detailValueClassName, !column.label && "mt-0"), children: resolvedRenderFieldValue(column, row, { compact: galleryDensity !== "detailed", surface: "gallery" }) })
+            ] }, `${row.id || row.linkKey}-${column.key}`)) }) : null,
+            !summaryText && visibleDetailColumns.length === 0 && hasRenderableNode(coverOnlyHint) ? /* @__PURE__ */ jsx("div", { className: cn(
+              "mt-3 text-[11px] text-muted-foreground",
+              isChromaticBento && "transition-colors duration-300 group-hover:text-foreground"
+            ), children: coverOnlyHint }) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_MASONRY_GAP_PX = 12;
+var DEFAULT_MASONRY_ROW_HEIGHT_PX = 8;
+var DEFAULT_MASONRY_COLUMN_WIDTH_PX = 280;
+var DEFAULT_MASONRY_ITEM_HEIGHT_PX = 240;
+function clamp4(value, min5, max5) {
+  return Math.min(Math.max(value, min5), max5);
+}
+function getRootFontSize(node) {
+  if (typeof window === "undefined") return 16;
+  const target = node || document.documentElement;
+  const parsed = Number.parseFloat(window.getComputedStyle(target).fontSize);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 16;
+}
+function resolveLengthToPixels(value, fallback, node) {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+  if (typeof value !== "string") return fallback;
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) return fallback;
+  if (/^\d+(\.\d+)?$/.test(normalized)) {
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  }
+  if (normalized.endsWith("px")) {
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  }
+  if (normalized.endsWith("rem")) {
+    const parsed = Number.parseFloat(normalized);
+    if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+    return parsed * getRootFontSize(node);
+  }
+  return fallback;
+}
+function areMeasurementMapsEqual(prev, next) {
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+  if (prevKeys.length !== nextKeys.length) return false;
+  for (const key of nextKeys) {
+    if (prev[key] !== next[key]) return false;
+  }
+  return true;
+}
+function getMasonryColumnCount({
+  containerWidth,
+  itemCount,
+  targetColumnWidth,
+  gap
+}) {
+  if (!containerWidth) return 1;
+  const safeItemCount = Math.max(itemCount, 1);
+  const maxCandidate = Math.max(
+    1,
+    Math.min(
+      safeItemCount,
+      Math.ceil((containerWidth + gap) / (Math.max(targetColumnWidth * 0.58, 1) + gap))
+    )
+  );
+  let bestCount = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let candidateCount = 1; candidateCount <= maxCandidate; candidateCount += 1) {
+    const actualColumnWidth = (containerWidth - gap * Math.max(candidateCount - 1, 0)) / candidateCount;
+    if (!Number.isFinite(actualColumnWidth) || actualColumnWidth <= 0) continue;
+    const underflowPenalty = Math.max(0, targetColumnWidth * 0.78 - actualColumnWidth);
+    const overflowPenalty = Math.max(0, actualColumnWidth - targetColumnWidth * 1.35);
+    const candidateScore = Math.abs(actualColumnWidth - targetColumnWidth) + underflowPenalty * 3 + overflowPenalty * 2;
+    if (candidateScore < bestScore) {
+      bestScore = candidateScore;
+      bestCount = candidateCount;
+    }
+  }
+  return bestCount;
+}
+function getItemColumnSpan({
+  size,
+  columnWidth,
+  columnCount,
+  gap
+}) {
+  if (Number.isFinite(size?.columnSpan) && Number(size?.columnSpan) > 0) {
+    return clamp4(Math.round(Number(size?.columnSpan)), 1, columnCount);
+  }
+  const itemWidth = resolveLengthToPixels(size?.width, columnWidth, null);
+  return clamp4(Math.ceil((itemWidth + gap) / (columnWidth + gap)), 1, columnCount);
+}
+function getItemRowSpan({
+  size,
+  measuredHeight,
+  rowHeight,
+  gap
+}) {
+  if (Number.isFinite(size?.rowSpan) && Number(size?.rowSpan) > 0) {
+    return Math.max(1, Math.round(Number(size?.rowSpan)));
+  }
+  const itemHeight = Number.isFinite(measuredHeight) && Number(measuredHeight) > 0 ? Number(measuredHeight) : resolveLengthToPixels(size?.height, DEFAULT_MASONRY_ITEM_HEIGHT_PX, null);
+  return Math.max(1, Math.ceil((itemHeight + gap) / (rowHeight + gap)));
+}
+function getResolvedItemHeight({
+  size,
+  measuredHeight
+}) {
+  return Number.isFinite(measuredHeight) && Number(measuredHeight) > 0 ? Number(measuredHeight) : resolveLengthToPixels(size?.height, DEFAULT_MASONRY_ITEM_HEIGHT_PX, null);
+}
+function WorkbenchMasonryLayout({
+  items = [],
+  renderItem,
+  getItemKey = (item, index) => item?.id ?? item?.key ?? index,
+  getItemSize,
+  columnWidth = DEFAULT_MASONRY_COLUMN_WIDTH_PX,
+  gap = DEFAULT_MASONRY_GAP_PX,
+  rowHeight = DEFAULT_MASONRY_ROW_HEIGHT_PX,
+  placementStrategy = "shelf",
+  className
+}) {
+  const containerRef = useRef(null);
+  const itemNodesRef = useRef(/* @__PURE__ */ new Map());
+  const itemObserverRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [measuredHeights, setMeasuredHeights] = useState({});
+  const itemKeys = useMemo(
+    () => items.map((item, index) => String(getItemKey(item, index))),
+    [getItemKey, items]
+  );
+  const itemKeysSignature = itemKeys.join("|");
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return void 0;
+    const updateWidth = () => {
+      const nextWidth = Math.round(node.getBoundingClientRect().width);
+      setContainerWidth((prevWidth) => prevWidth === nextWidth ? prevWidth : nextWidth);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "function") {
+      const observer = new ResizeObserver(() => updateWidth());
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  useEffect(() => {
+    setMeasuredHeights((prev) => {
+      const next = Object.fromEntries(
+        Object.entries(prev).filter(([key]) => itemKeys.includes(key))
+      );
+      return areMeasurementMapsEqual(prev, next) ? prev : next;
+    });
+  }, [itemKeys, itemKeysSignature]);
+  const resolvedTargetColumnWidth = resolveLengthToPixels(
+    columnWidth,
+    DEFAULT_MASONRY_COLUMN_WIDTH_PX,
+    containerRef.current
+  );
+  const isDensePlacement = placementStrategy === "dense";
+  const columnCount = getMasonryColumnCount({
+    containerWidth,
+    itemCount: items.length,
+    targetColumnWidth: resolvedTargetColumnWidth,
+    gap
+  });
+  const resolvedColumnWidth = containerWidth > 0 ? (containerWidth - gap * Math.max(columnCount - 1, 0)) / columnCount : resolvedTargetColumnWidth;
+  const layoutItems = useMemo(() => items.map((item, index) => {
+    const key = itemKeys[index];
+    const size = typeof getItemSize === "function" ? getItemSize(item, {
+      columnCount,
+      columnWidth: resolvedColumnWidth,
+      containerWidth,
+      gap,
+      placementStrategy,
+      rowHeight
+    }) || {} : {};
+    return {
+      key,
+      item,
+      size,
+      columnSpan: getItemColumnSpan({
+        size,
+        columnWidth: resolvedColumnWidth,
+        columnCount,
+        gap
+      }),
+      rowSpan: getItemRowSpan({
+        size,
+        measuredHeight: measuredHeights[key],
+        rowHeight,
+        gap
+      })
+    };
+  }), [
+    columnCount,
+    containerWidth,
+    gap,
+    getItemSize,
+    itemKeys,
+    items,
+    measuredHeights,
+    placementStrategy,
+    resolvedColumnWidth,
+    rowHeight
+  ]);
+  useLayoutEffect(() => {
+    const nextMeasurements = {};
+    itemNodesRef.current.forEach((node, key) => {
+      const nextHeight = Math.ceil(node.getBoundingClientRect().height);
+      if (Number.isFinite(nextHeight) && nextHeight > 0) {
+        nextMeasurements[key] = nextHeight;
+      }
+    });
+    setMeasuredHeights((prev) => {
+      if (!Object.keys(nextMeasurements).length) return prev;
+      const merged = { ...prev, ...nextMeasurements };
+      return areMeasurementMapsEqual(prev, merged) ? prev : merged;
+    });
+  }, [columnCount, isDensePlacement, itemKeysSignature, resolvedColumnWidth]);
+  useEffect(() => {
+    if (typeof ResizeObserver !== "function") return void 0;
+    const observer = new ResizeObserver((entries) => {
+      setMeasuredHeights((prev) => {
+        const next = { ...prev };
+        let didChange = false;
+        for (const entry of entries) {
+          const key = entry.target.dataset.masonryKey;
+          if (!key) continue;
+          const nextHeight = Math.ceil(entry.contentRect.height);
+          if (!Number.isFinite(nextHeight) || nextHeight <= 0 || next[key] === nextHeight) continue;
+          next[key] = nextHeight;
+          didChange = true;
+        }
+        return didChange ? next : prev;
+      });
+    });
+    itemObserverRef.current = observer;
+    itemNodesRef.current.forEach((node) => observer.observe(node));
+    return () => {
+      observer.disconnect();
+      itemObserverRef.current = null;
+    };
+  }, [isDensePlacement, itemKeysSignature]);
+  const registerItemNode = (key, node) => {
+    const currentNodes = itemNodesRef.current;
+    const previousNode = currentNodes.get(key);
+    if (previousNode && previousNode !== node && itemObserverRef.current) {
+      itemObserverRef.current.unobserve(previousNode);
+    }
+    if (!node) {
+      currentNodes.delete(key);
+      return;
+    }
+    node.dataset.masonryKey = key;
+    currentNodes.set(key, node);
+    if (itemObserverRef.current) {
+      itemObserverRef.current.observe(node);
+    }
+  };
+  if (!isDensePlacement) {
+    const orderedLayout = (() => {
+      const columnBottoms = Array.from({ length: columnCount }, () => 0);
+      let nextColumnIndex = 0;
+      let maxBottom = 0;
+      const positionedItems = layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => {
+        const resolvedSpan = clamp4(columnSpan, 1, columnCount);
+        let startColumn = nextColumnIndex;
+        if (startColumn + resolvedSpan > columnCount) {
+          startColumn = 0;
+        }
+        startColumn = Math.min(startColumn, columnCount - resolvedSpan);
+        const itemWidth = resolvedColumnWidth * resolvedSpan + gap * Math.max(resolvedSpan - 1, 0);
+        const itemHeight = getResolvedItemHeight({
+          size,
+          measuredHeight: measuredHeights[key]
+        });
+        const top = Math.max(...columnBottoms.slice(startColumn, startColumn + resolvedSpan));
+        const left = startColumn * (resolvedColumnWidth + gap);
+        const bottom = top + itemHeight;
+        for (let columnIndex = startColumn; columnIndex < startColumn + resolvedSpan; columnIndex += 1) {
+          columnBottoms[columnIndex] = bottom + gap;
+        }
+        maxBottom = Math.max(maxBottom, bottom);
+        nextColumnIndex = startColumn + resolvedSpan;
+        if (nextColumnIndex >= columnCount) {
+          nextColumnIndex = 0;
+        }
+        return {
+          key,
+          item,
+          columnSpan: resolvedSpan,
+          itemHeight,
+          itemWidth,
+          left,
+          rowSpan,
+          size,
+          top
+        };
+      });
+      return {
+        containerHeight: Math.max(0, maxBottom),
+        positionedItems
+      };
+    })();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative w-full", className),
+        style: { height: `${orderedLayout.containerHeight}px` },
+        children: orderedLayout.positionedItems.map(({ key, item, columnSpan, rowSpan, size, itemWidth, left, top }) => {
+          const unresolvedSingleColumnWidth = containerWidth <= 0 && columnCount === 1;
+          const itemWidthValue = unresolvedSingleColumnWidth ? "100%" : `${itemWidth}px`;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute min-w-0",
+              style: {
+                left: unresolvedSingleColumnWidth ? 0 : `${left}px`,
+                top: `${top}px`,
+                width: itemWidthValue,
+                maxWidth: itemWidthValue
+              },
+              children: /* @__PURE__ */ jsx("div", { ref: (node) => registerItemNode(key, node), className: "min-w-0", children: renderItem(item, {
+                columnCount,
+                columnSpan,
+                columnWidth: resolvedColumnWidth,
+                containerWidth,
+                gap,
+                itemWidth,
+                placementStrategy,
+                rowSpan,
+                rowHeight,
+                size
+              }) })
+            },
+            key
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("grid w-full items-start", className),
+      style: {
+        gap: `${gap}px`,
+        gridAutoFlow: "row dense",
+        gridAutoRows: `${rowHeight}px`,
+        gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`
+      },
+      children: layoutItems.map(({ key, item, columnSpan, rowSpan, size }) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-w-0",
+          style: {
+            gridColumn: `span ${columnSpan}`,
+            gridRow: `span ${rowSpan}`
+          },
+          children: /* @__PURE__ */ jsx("div", { ref: (node) => registerItemNode(key, node), className: "h-full", children: renderItem(item, {
+            columnCount,
+            columnSpan,
+            columnWidth: resolvedColumnWidth,
+            containerWidth,
+            gap,
+            placementStrategy,
+            rowSpan,
+            rowHeight,
+            size
+          }) })
+        },
+        key
+      ))
+    }
+  );
+}
+var GALLERY_GRID_GAP_PX = 12;
+function getNormalizedGalleryGridCardWidth(cardWidth) {
+  if (typeof cardWidth === "number" && Number.isFinite(cardWidth) && cardWidth > 0) {
+    return `${cardWidth}px`;
+  }
+  if (typeof cardWidth === "string" && cardWidth.trim()) {
+    return cardWidth.trim();
+  }
+  return void 0;
+}
+function getDefaultGalleryDetailLimit2(density) {
+  if (density === "compact") return 2;
+  if (density === "detailed") return 6;
+  return 4;
+}
+function getNormalizedGalleryBentoColumns2(columns, density) {
+  if (columns === 1 || columns === 2 || columns === 3) return Number(columns);
+  return density === "detailed" ? 1 : 2;
+}
+function getNormalizedGalleryDetailLimit2({
+  density,
+  visibility,
+  limit
+}) {
+  if (visibility === "all") return Number.POSITIVE_INFINITY;
+  const parsedLimit = Number.parseInt(String(limit), 10);
+  if (Number.isFinite(parsedLimit) && parsedLimit > 0) return parsedLimit;
+  return getDefaultGalleryDetailLimit2(density);
+}
+function getGalleryCardWidthMetrics(density) {
+  if (density === "compact") return { min: 220, ideal: 244, max: 268 };
+  if (density === "detailed") return { min: 320, ideal: 372, max: 420 };
+  return { min: 260, ideal: 304, max: 348 };
+}
+function getGalleryCardWidthForColumnCount({
+  containerWidth,
+  columnCount,
+  gap
+}) {
+  if (!containerWidth || !columnCount) return 0;
+  return (containerWidth - gap * Math.max(columnCount - 1, 0)) / columnCount;
+}
+function getNormalizedGalleryGridColumns(columns) {
+  if (columns === void 0 || columns === null || columns === "" || columns === "auto") {
+    return void 0;
+  }
+  const parsedColumns = Number.parseInt(String(columns), 10);
+  if (!Number.isFinite(parsedColumns) || parsedColumns <= 0) return void 0;
+  return Math.max(1, Math.min(parsedColumns, 8));
+}
+function getGalleryGridColumnCount({
+  containerWidth,
+  rowCount,
+  minCardWidth,
+  idealCardWidth,
+  maxCardWidth,
+  gap
+}) {
+  if (!containerWidth) return 1;
+  const safeRowCount = Math.max(rowCount, 1);
+  const lowerBound = Math.max(1, Math.ceil((containerWidth + gap) / (maxCardWidth + gap)));
+  const upperBound = Math.max(1, Math.floor((containerWidth + gap) / (minCardWidth + gap)));
+  const idealCount = Math.max(1, Math.round((containerWidth + gap) / (idealCardWidth + gap)));
+  const phantomPenalty = Math.round((idealCardWidth - minCardWidth) / 2) + gap;
+  const maxCandidate = Math.max(1, lowerBound, upperBound + 1, idealCount + 1);
+  let bestCount = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let candidateCount = 1; candidateCount <= maxCandidate; candidateCount += 1) {
+    const cardWidth = getGalleryCardWidthForColumnCount({ containerWidth, columnCount: candidateCount, gap });
+    const overflowPenalty = Math.max(0, cardWidth - maxCardWidth);
+    const underflowPenalty = Math.max(0, minCardWidth - cardWidth);
+    const idealPenalty = Math.abs(cardWidth - idealCardWidth);
+    const phantomColumns = Math.max(0, candidateCount - safeRowCount);
+    const candidateScore = overflowPenalty * 3 + underflowPenalty * 2 + idealPenalty + phantomColumns * phantomPenalty;
+    if (candidateScore < bestScore) {
+      bestScore = candidateScore;
+      bestCount = candidateCount;
+    }
+  }
+  return bestCount;
+}
+function getGalleryGridLayoutStyle({
+  isRailLayout,
+  railCardWidth,
+  fixedCardWidth,
+  fixedColumnCount,
+  containerWidth,
+  rowCount,
+  minCardWidth,
+  idealCardWidth,
+  maxCardWidth
+}) {
+  if (isRailLayout) {
+    return { gridAutoColumns: `${railCardWidth}px` };
+  }
+  if (fixedColumnCount) {
+    const responsiveColumnCount = containerWidth ? Math.max(1, Math.min(
+      fixedColumnCount,
+      Math.floor((containerWidth + GALLERY_GRID_GAP_PX) / (minCardWidth + GALLERY_GRID_GAP_PX)) || 1
+    )) : fixedColumnCount;
+    return {
+      gridTemplateColumns: `repeat(${responsiveColumnCount}, minmax(0, 1fr))`,
+      justifyContent: "start",
+      alignContent: "start"
+    };
+  }
+  if (fixedCardWidth) {
+    return {
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${fixedCardWidth}), ${fixedCardWidth}))`,
+      justifyContent: "start",
+      alignContent: "start"
+    };
+  }
+  if (!containerWidth) {
+    return {
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minCardWidth}px), min(100%, ${maxCardWidth}px)))`,
+      justifyContent: "start",
+      alignContent: "start"
+    };
+  }
+  const columnCount = getGalleryGridColumnCount({
+    containerWidth,
+    rowCount,
+    minCardWidth,
+    idealCardWidth,
+    maxCardWidth,
+    gap: GALLERY_GRID_GAP_PX
+  });
+  return {
+    gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+    justifyContent: "start",
+    alignContent: "start"
+  };
+}
+function getGalleryTextLength(value) {
+  if (value === null || value === void 0) return 0;
+  const text = String(value).trim();
+  return text && text !== "\u2014" ? text.length : 0;
+}
+function getGalleryFieldText({
+  column,
+  row,
+  getFieldValue,
+  getDisplayText
+}) {
+  if (!column) return "";
+  const rawValue = getFieldValue(column, row);
+  if (rawValue === null || rawValue === void 0 || rawValue === "") return "";
+  const textValue = getDisplayText(rawValue);
+  return textValue === "\u2014" ? "" : String(textValue);
+}
+function estimateLineCount({
+  text,
+  charsPerLine,
+  maxLines
+}) {
+  const textLength = getGalleryTextLength(text);
+  if (!textLength) return 0;
+  return Math.max(1, Math.min(maxLines, Math.ceil(textLength / charsPerLine)));
+}
+function estimateGalleryDetailCellHeight({
+  text,
+  density,
+  bentoColumns
+}) {
+  const baseHeight = density === "detailed" ? 54 : density === "compact" ? 44 : 48;
+  const charsPerLine = bentoColumns === 1 ? density === "detailed" ? 32 : 26 : density === "detailed" ? 18 : 15;
+  const maxLines = density === "detailed" ? 3 : 2;
+  const lineCount = estimateLineCount({ text, charsPerLine, maxLines });
+  if (!lineCount) return baseHeight;
+  return baseHeight + Math.max(0, lineCount - 1) * 16;
+}
+function estimateGalleryDetailGridHeight({
+  columns,
+  density,
+  bentoColumns
+}) {
+  if (!columns.length) return 0;
+  const cellHeights = columns.map((column) => estimateGalleryDetailCellHeight({
+    text: column.text,
+    density,
+    bentoColumns
+  }));
+  if (bentoColumns === 1) {
+    return 12 + cellHeights.reduce((sum, height) => sum + height, 0) + Math.max(0, columns.length - 1) * 8;
+  }
+  let totalHeight = 12;
+  for (let index = 0; index < cellHeights.length; index += bentoColumns) {
+    const rowHeights = cellHeights.slice(index, index + bentoColumns);
+    totalHeight += Math.max(...rowHeights);
+    if (index + bentoColumns < cellHeights.length) totalHeight += 8;
+  }
+  return totalHeight;
+}
+function getDefaultGalleryMasonryItemSize({
+  row,
+  columns,
+  galleryFieldKey,
+  galleryDensity,
+  galleryBentoColumns,
+  galleryDetailVisibility,
+  galleryDetailLimit,
+  getFieldValue,
+  isMediaColumn,
+  isTitleCandidate,
+  isSummaryCandidate,
+  getDisplayText,
+  isImageField,
+  isAudioField,
+  cardVariant,
+  renderPreview,
+  renderLeadingVisual,
+  hiddenDetailFieldKeys,
+  layout,
+  resolveRecordVisual
+}) {
+  const iconColumn = columns.find((column) => column.renderType === "icon");
+  const iconVisual = iconColumn && resolveRecordVisual ? resolveRecordVisual(row?.[iconColumn.key], row, iconColumn) : null;
+  const selectedGalleryColumn = galleryFieldKey !== "auto" ? columns.find((column) => column.key === galleryFieldKey && isMediaColumn(column, row)) : null;
+  const mediaColumn = selectedGalleryColumn || columns.find((column) => isMediaColumn(column, row)) || null;
+  const mediaValue = mediaColumn ? getFieldValue(mediaColumn, row) : null;
+  const isImageMedia = mediaColumn ? isImageField(mediaColumn, mediaValue) : false;
+  const isAudioMedia = mediaColumn ? isAudioField(mediaColumn, mediaValue) : false;
+  const hasDefaultLeadingVisual = Boolean(iconVisual);
+  const hasLeadingVisual = Boolean(renderLeadingVisual) || hasDefaultLeadingVisual;
+  const contentColumns = columns.filter((column) => column.key !== mediaColumn?.key && column.renderType !== "icon");
+  const titleCandidates = contentColumns.filter((column) => {
+    if (!column || isMediaColumn(column, row) || !isTitleCandidate(column, row)) return false;
+    const value = getFieldValue(column, row);
+    return !(value === null || value === void 0 || value === "");
+  });
+  const titleColumn = titleCandidates[0] || null;
+  const titleText = titleColumn ? getGalleryFieldText({ column: titleColumn, row, getFieldValue, getDisplayText }) : String(getDisplayText(row?.linkKey || row?.id || ""));
+  const summaryColumn = contentColumns.find((column) => {
+    if (!column || column.key === titleColumn?.key || isMediaColumn(column, row) || !isSummaryCandidate(column, row)) return false;
+    const summaryText2 = getGalleryFieldText({ column, row, getFieldValue, getDisplayText });
+    return summaryText2.length > 12;
+  }) || contentColumns.find((column) => {
+    if (!column || column.key === titleColumn?.key || isMediaColumn(column, row) || !isSummaryCandidate(column, row)) return false;
+    return getGalleryTextLength(getGalleryFieldText({ column, row, getFieldValue, getDisplayText })) > 0;
+  }) || null;
+  const summaryText = summaryColumn ? getGalleryFieldText({ column: summaryColumn, row, getFieldValue, getDisplayText }) : "";
+  const hiddenDetailKeySet = new Set(hiddenDetailFieldKeys);
+  const detailColumns = contentColumns.filter((column) => column.key !== titleColumn?.key && column.key !== summaryColumn?.key && !hiddenDetailKeySet.has(column.key)).map((column) => ({
+    column,
+    text: getGalleryFieldText({ column, row, getFieldValue, getDisplayText })
+  }));
+  const resolvedDetailLimit = getNormalizedGalleryDetailLimit2({
+    density: galleryDensity,
+    visibility: galleryDetailVisibility,
+    limit: galleryDetailLimit
+  });
+  const visibleDetailColumns = Number.isFinite(resolvedDetailLimit) ? detailColumns.slice(0, resolvedDetailLimit) : detailColumns;
+  const hiddenDetailCount = Math.max(detailColumns.length - visibleDetailColumns.length, 0);
+  const resolvedBentoColumns = getNormalizedGalleryBentoColumns2(galleryBentoColumns, galleryDensity);
+  const resolvedColumnWidth = layout?.columnWidth || getGalleryCardWidthMetrics(galleryDensity).ideal;
+  if (cardVariant === "image-only") {
+    return {
+      width: resolvedColumnWidth,
+      height: Math.round(resolvedColumnWidth * 1.25)
+    };
+  }
+  if (cardVariant === "preview-only") {
+    return {
+      width: resolvedColumnWidth,
+      height: Math.round(resolvedColumnWidth * 0.82)
+    };
+  }
+  let estimatedHeight = galleryDensity === "detailed" ? 84 : galleryDensity === "compact" ? 64 : 72;
+  if (typeof renderPreview === "function") {
+    estimatedHeight += galleryDensity === "detailed" ? 188 : galleryDensity === "compact" ? 140 : 164;
+  } else if (isImageMedia) {
+    estimatedHeight += Math.round(resolvedColumnWidth * (galleryDensity === "detailed" ? 0.72 : 0.62)) + 12;
+  } else if (isAudioMedia) {
+    estimatedHeight += 92;
+  }
+  const titleLines = estimateLineCount({
+    text: titleText,
+    charsPerLine: galleryDensity === "detailed" ? 26 : 24,
+    maxLines: 2
+  }) || 1;
+  const summaryLines = estimateLineCount({
+    text: summaryText,
+    charsPerLine: hasLeadingVisual ? 22 : galleryDensity === "detailed" ? 30 : 26,
+    maxLines: galleryDensity === "detailed" ? 4 : 2
+  });
+  const textHeaderHeight = 26 + titleLines * 18 + (summaryLines > 0 ? summaryLines * 16 + 4 : 0);
+  estimatedHeight += Math.max(hasLeadingVisual ? 56 : 0, textHeaderHeight);
+  estimatedHeight += estimateGalleryDetailGridHeight({
+    columns: visibleDetailColumns,
+    density: galleryDensity,
+    bentoColumns: resolvedBentoColumns
+  });
+  if (hiddenDetailCount > 0) estimatedHeight += 18;
+  if (!summaryText && visibleDetailColumns.length === 0) estimatedHeight += 24;
+  return {
+    width: resolvedColumnWidth,
+    height: estimatedHeight
+  };
+}
+function WorkbenchGalleryView({
+  rows = [],
+  columns = [],
+  onRowClick = () => {
+  },
+  selectedLinkKey,
+  selectedRowKey,
+  className,
+  isMasonry = false,
+  galleryLayoutMode = "auto",
+  galleryRailCardWidth,
+  galleryGridColumns,
+  galleryGridCardWidth,
+  galleryMasonryColumnWidth,
+  masonryPlacementStrategy = "shelf",
+  galleryFieldKey = "auto",
+  galleryDensity = "comfortable",
+  galleryBentoColumns = 2,
+  galleryDetailVisibility = "limit",
+  galleryDetailLimit,
+  shouldEnhanceMultimodal = true,
+  getFieldValue,
+  isMediaColumn,
+  isTitleCandidate,
+  isSummaryCandidate,
+  getDisplayText,
+  renderFieldValue,
+  getImagePreviewSrc,
+  isImageField,
+  isAudioField,
+  AudioPlayerComponent,
+  cardVariant = "default",
+  renderPreview,
+  renderMeta,
+  renderLeadingVisual,
+  resolveRecordVisual,
+  hiddenDetailFieldKeys = [],
+  labels,
+  formatLabel,
+  getMasonryItemSize
+}) {
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const { min: resolvedMinCardWidth, ideal: resolvedIdealCardWidth, max: resolvedMaxCardWidth } = getGalleryCardWidthMetrics(galleryDensity);
+  const resolvedRailCardWidth = galleryRailCardWidth || resolvedMinCardWidth;
+  const resolvedGridColumnCount = getNormalizedGalleryGridColumns(galleryGridColumns);
+  const resolvedGridCardWidth = getNormalizedGalleryGridCardWidth(galleryGridCardWidth);
+  const resolvedMasonryColumnWidth = galleryMasonryColumnWidth || resolvedMinCardWidth;
+  const isRailLayout = galleryLayoutMode === "rail";
+  const resolvedGetFieldValue = getFieldValue || getDefaultGalleryFieldValue;
+  const resolvedGetDisplayText = getDisplayText || getDefaultGalleryDisplayText;
+  const resolvedIsImageField = isImageField || isDefaultGalleryImageField;
+  const resolvedIsAudioField = isAudioField || isDefaultGalleryAudioField;
+  const resolvedIsMediaColumn = isMediaColumn || ((column, row) => isDefaultGalleryMediaColumn(column, row, {
+    getFieldValue: resolvedGetFieldValue,
+    shouldEnhanceMultimodal,
+    isImageField: resolvedIsImageField,
+    isAudioField: resolvedIsAudioField
+  }));
+  const resolvedIsTitleCandidate = isTitleCandidate || ((column, row) => isDefaultGalleryTitleCandidate(column, row, { isMediaColumn: resolvedIsMediaColumn }));
+  const resolvedIsSummaryCandidate = isSummaryCandidate || ((column, row) => isDefaultGallerySummaryCandidate(column, row, { isMediaColumn: resolvedIsMediaColumn }));
+  const resolvedRenderFieldValue = renderFieldValue || ((column, row, { compact } = {}) => /* @__PURE__ */ jsx("span", { children: resolvedGetDisplayText(resolvedGetFieldValue(column, row)) }));
+  useEffect(() => {
+    if (isMasonry || isRailLayout || resolvedGridCardWidth) return void 0;
+    const node = containerRef.current;
+    if (!node) return void 0;
+    const updateWidth = () => {
+      const nextWidth = Math.round(node.getBoundingClientRect().width);
+      setContainerWidth((prevWidth) => prevWidth === nextWidth ? prevWidth : nextWidth);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "function") {
+      const observer = new ResizeObserver(() => updateWidth());
+      observer.observe(node);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [isMasonry, isRailLayout, resolvedGridCardWidth]);
+  const layoutStyle = useMemo(() => getGalleryGridLayoutStyle({
+    isRailLayout,
+    railCardWidth: resolvedRailCardWidth,
+    fixedCardWidth: resolvedGridCardWidth,
+    fixedColumnCount: resolvedGridColumnCount,
+    containerWidth,
+    rowCount: rows.length,
+    minCardWidth: resolvedMinCardWidth,
+    idealCardWidth: resolvedIdealCardWidth,
+    maxCardWidth: resolvedMaxCardWidth
+  }), [
+    containerWidth,
+    isRailLayout,
+    resolvedGridCardWidth,
+    resolvedGridColumnCount,
+    resolvedIdealCardWidth,
+    resolvedMaxCardWidth,
+    resolvedMinCardWidth,
+    resolvedRailCardWidth,
+    rows.length
+  ]);
+  const renderGalleryCard = (row, rowIndex) => /* @__PURE__ */ jsx(
+    WorkbenchGalleryCard,
+    {
+      row,
+      columns,
+      onClick: () => onRowClick(row, rowIndex),
+      isSelected: String(row?.linkKey || row?.id || "") === String(selectedRowKey || selectedLinkKey || ""),
+      isMasonry,
+      galleryFieldKey,
+      galleryDensity,
+      galleryBentoColumns,
+      galleryDetailVisibility,
+      galleryDetailLimit,
+      shouldEnhanceMultimodal,
+      getFieldValue: resolvedGetFieldValue,
+      isMediaColumn: resolvedIsMediaColumn,
+      isTitleCandidate: resolvedIsTitleCandidate,
+      isSummaryCandidate: resolvedIsSummaryCandidate,
+      getDisplayText: resolvedGetDisplayText,
+      renderFieldValue: resolvedRenderFieldValue,
+      getImagePreviewSrc,
+      isImageField: resolvedIsImageField,
+      isAudioField: resolvedIsAudioField,
+      AudioPlayerComponent,
+      cardVariant,
+      renderPreview,
+      renderMeta,
+      renderLeadingVisual,
+      resolveRecordVisual,
+      hiddenDetailFieldKeys,
+      labels,
+      formatLabel
+    },
+    row?.id || row?.linkKey || rowIndex
+  );
+  if (isMasonry) {
+    return /* @__PURE__ */ jsx(
+      WorkbenchMasonryLayout,
+      {
+        items: rows,
+        className,
+        gap: GALLERY_GRID_GAP_PX,
+        columnWidth: resolvedMasonryColumnWidth,
+        placementStrategy: masonryPlacementStrategy,
+        getItemKey: (row, rowIndex) => row?.id || row?.linkKey || rowIndex,
+        getItemSize: (row, layout) => {
+          const defaultSize = getDefaultGalleryMasonryItemSize({
+            row,
+            columns,
+            galleryFieldKey,
+            galleryDensity,
+            galleryBentoColumns,
+            galleryDetailVisibility,
+            galleryDetailLimit,
+            getFieldValue: resolvedGetFieldValue,
+            isMediaColumn: resolvedIsMediaColumn,
+            isTitleCandidate: resolvedIsTitleCandidate,
+            isSummaryCandidate: resolvedIsSummaryCandidate,
+            getDisplayText: resolvedGetDisplayText,
+            isImageField: resolvedIsImageField,
+            isAudioField: resolvedIsAudioField,
+            cardVariant,
+            renderPreview,
+            renderLeadingVisual,
+            hiddenDetailFieldKeys,
+            layout,
+            resolveRecordVisual
+          });
+          if (typeof getMasonryItemSize !== "function") return defaultSize;
+          const customSize = getMasonryItemSize(row, { ...layout, defaultSize }) || {};
+          return {
+            ...defaultSize,
+            ...customSize
+          };
+        },
+        renderItem: (row) => renderGalleryCard(row, rows.indexOf(row))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        isRailLayout ? "grid grid-flow-col items-center gap-3" : "grid items-start gap-3",
+        className
+      ),
+      style: layoutStyle,
+      children: rows.map((row, rowIndex) => renderGalleryCard(row, rowIndex))
+    }
+  );
+}
+function toCssSize5(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function defaultGetRowId(row, rowIndex) {
+  return String(row?.id ?? row?.key ?? rowIndex);
+}
+function defaultGetColumnId(row) {
+  return String(row?.columnId ?? row?.status ?? "");
+}
+function defaultRenderCard(row) {
+  const value = row?.title ?? row?.name ?? row?.id ?? "Untitled";
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border/70 bg-card px-3 py-2 text-sm text-foreground shadow-sm", children: String(value) });
+}
+function WorkbenchLaneDraggableCard({
+  row,
+  rowId,
+  rowIndex,
+  column,
+  classNames,
+  renderCard
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: rowId });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      className: cn("touch-none", classNames?.cardWrapper),
+      children: renderCard(row, { row, rowIndex, column, isDragging, isOverlay: false })
+    }
+  );
+}
+function WorkbenchLaneColumnView({
+  column,
+  columnRows,
+  columnWidth,
+  columnMinHeight,
+  emptyColumn,
+  classNames,
+  renderCard
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: column.id });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex shrink-0 flex-col rounded-xl border border-border/60 bg-card p-2 shadow-sm",
+        classNames?.column,
+        column.className
+      ),
+      style: { width: toCssSize5(columnWidth) ?? "280px" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex h-10 items-center gap-2 px-1", classNames?.columnHeader, column.headerClassName), children: [
+          column.icon ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 items-center justify-center text-muted-foreground", classNames?.columnIcon, column.iconClassName), children: column.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center rounded px-2 py-0.5 text-xs font-semibold bg-muted text-muted-foreground", classNames?.columnBadge, column.badgeClassName), children: column.label ?? column.id }),
+          /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", classNames?.columnCount), children: columnRows.length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setNodeRef,
+            className: cn(
+              "mt-1 flex min-h-[200px] flex-1 flex-col gap-2 overflow-y-auto rounded-lg p-1 transition-colors [scrollbar-width:thin]",
+              isOver && "bg-accent/60",
+              classNames?.columnBody,
+              column.bodyClassName
+            ),
+            style: { minHeight: toCssSize5(columnMinHeight) },
+            children: columnRows.length ? columnRows.map(({ row, rowIndex, rowId }) => /* @__PURE__ */ jsx(
+              WorkbenchLaneDraggableCard,
+              {
+                row,
+                rowId,
+                rowIndex,
+                column,
+                classNames,
+                renderCard
+              },
+              rowId
+            )) : emptyColumn ? /* @__PURE__ */ jsx("div", { className: cn("flex min-h-24 items-center justify-center rounded-lg border border-dashed border-border/60 px-3 py-4 text-xs text-muted-foreground", classNames?.emptyColumn), children: emptyColumn }) : null
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkbenchLaneView({
+  rows = [],
+  columns = [],
+  getRowId = defaultGetRowId,
+  getColumnId = defaultGetColumnId,
+  renderCard = defaultRenderCard,
+  renderOverlayCard,
+  onMoveRow,
+  emptyColumn,
+  activationDistance = 5,
+  columnWidth = 280,
+  columnMinHeight,
+  className,
+  classNames,
+  style
+}) {
+  const [activeRowId, setActiveRowId] = useState(null);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: activationDistance } }));
+  const columnMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+  const rowEntries = useMemo(() => rows.map((row, rowIndex) => ({
+    row,
+    rowIndex,
+    rowId: getRowId(row, rowIndex),
+    columnId: getColumnId(row, rowIndex)
+  })), [getColumnId, getRowId, rows]);
+  const activeEntry = activeRowId ? rowEntries.find((entry) => entry.rowId === activeRowId) : void 0;
+  const rowsByColumn = useMemo(() => {
+    const next = /* @__PURE__ */ new Map();
+    columns.forEach((column) => next.set(column.id, []));
+    rowEntries.forEach(({ row, rowIndex, rowId, columnId }) => {
+      next.get(columnId)?.push({ row, rowIndex, rowId });
+    });
+    return next;
+  }, [columns, rowEntries]);
+  const activeColumn = activeEntry ? columnMap.get(activeEntry.columnId) : void 0;
+  const handleDragStart = useCallback((event) => {
+    setActiveRowId(String(event.active.id));
+  }, []);
+  const handleDragEnd = useCallback((event) => {
+    setActiveRowId(null);
+    const rowId = String(event.active.id);
+    const nextColumnId = String(event.over?.id ?? "");
+    const activeRow = rowEntries.find((entry) => entry.rowId === rowId);
+    if (!activeRow || !columnMap.has(nextColumnId) || activeRow.columnId === nextColumnId) return;
+    onMoveRow?.(rowId, nextColumnId, activeRow.row);
+  }, [columnMap, onMoveRow, rowEntries]);
+  const handleDragCancel = useCallback(() => {
+    setActiveRowId(null);
+  }, []);
+  return /* @__PURE__ */ jsxs(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex min-h-0 flex-1 gap-4 overflow-x-auto p-4 [scrollbar-width:thin]", classNames?.root, className),
+        style,
+        children: columns.map((column) => /* @__PURE__ */ jsx(
+          WorkbenchLaneColumnView,
+          {
+            column,
+            columnRows: rowsByColumn.get(column.id) || [],
+            columnWidth,
+            columnMinHeight,
+            emptyColumn,
+            classNames,
+            renderCard
+          },
+          column.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(DragOverlay, { children: activeEntry && activeColumn ? /* @__PURE__ */ jsx("div", { className: cn(classNames?.overlayWrapper), children: (renderOverlayCard || renderCard)(activeEntry.row, {
+      row: activeEntry.row,
+      rowIndex: activeEntry.rowIndex,
+      column: activeColumn,
+      isDragging: false,
+      isOverlay: true
+    }) }) : null })
+  ] });
+}
 function cn4(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
@@ -20262,6 +24409,6 @@ lodash/lodash.js:
    *)
 */
 
-export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, AuthDivider, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLoadingState, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, EmailAuth, I18nSelector, LoginLayout, NavButton, OAuthButton, OIDCButton, PendingApproval, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, setNeocardTheme, setTailwindTheme, useDarkMode };
+export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, AuthDivider, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLoadingState, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, EmailAuth, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginLayout, NavButton, OAuthButton, OIDCButton, PendingApproval, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, setNeocardTheme, setTailwindTheme, useDarkMode };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map