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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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, useLayoutEffect, Children, isValidElement, Fragment as Fragment$1, useContext } 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';
@@ -4521,7 +4521,7 @@ var require_lodash = __commonJS({
         function valuesIn(object) {
           return object == null ? [] : baseValues(object, keysIn(object));
         }
-        function clamp3(number, lower, upper) {
+        function clamp4(number, lower, upper) {
           if (upper === undefined2) {
             upper = lower;
             lower = undefined2;
@@ -5198,7 +5198,7 @@ var require_lodash = __commonJS({
         lodash.camelCase = camelCase;
         lodash.capitalize = capitalize;
         lodash.ceil = ceil;
-        lodash.clamp = clamp3;
+        lodash.clamp = clamp4;
         lodash.clone = clone;
         lodash.cloneDeep = cloneDeep;
         lodash.cloneDeepWith = cloneDeepWith;
@@ -19969,6 +19969,2817 @@ 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 toCssSize2(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: toCssSize2(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
+      ]
+    }
+  );
+}
+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 clamp3(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 clamp3(Math.round(Number(size?.columnSpan)), 1, columnCount);
+  }
+  const itemWidth = resolveLengthToPixels(size?.width, columnWidth, null);
+  return clamp3(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 = clamp3(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 cn4(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
@@ -20262,6 +23073,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, 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, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, 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