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

package/dist/components/workbench/index.mjs

@@ -1,6 +1,7 @@
-import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useLayoutEffect, Children, isValidElement, useCallback, useContext } from 'react';
+import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext, useLayoutEffect, Children, isValidElement, useCallback } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '@radix-ui/react-context-menu';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 
 // src/components/workbench/WorkbenchResizableSidebar.tsx
 
@@ -707,7 +708,41 @@ var baseSlots = {
   tableEmptyActions: "mt-4 flex flex-wrap items-center justify-center gap-2",
   tableLoadingRow: "border-b border-border/60",
   tableLoadingCell: "px-3 py-2",
-  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70"
+  tableLoadingSkeleton: "h-4 w-full rounded-md bg-muted/70",
+  layoutRoot: cn(
+    "grid min-w-0 overflow-hidden grid-rows-[auto_minmax(0,1fr)_auto] gap-3 rounded-lg border border-border/70 bg-background p-3 text-foreground",
+    motionBase
+  ),
+  layoutRootFull: "h-full min-h-0",
+  layoutHeader: "min-w-0",
+  layoutBody: "grid min-h-0 min-w-0 overflow-hidden gap-3",
+  layoutSidebar: "min-h-0 min-w-0 overflow-hidden",
+  layoutMain: "min-h-0 min-w-0 overflow-hidden",
+  layoutAside: "min-h-0 min-w-0 overflow-hidden",
+  layoutFooter: "min-w-0",
+  layoutPane: cn(
+    "h-full max-h-full min-h-0 min-w-0 overflow-hidden rounded-lg bg-background text-foreground",
+    motionBase
+  ),
+  layoutPaneScrollable: "overflow-auto",
+  layoutPaneBordered: "border border-border/70",
+  layoutPaneMuted: "bg-muted/25",
+  layoutPaneSoft: "bg-background/95 shadow-sm",
+  layoutPaneTransparent: "bg-transparent shadow-none",
+  layoutSplitRoot: "grid min-h-0 min-w-0 overflow-hidden",
+  layoutSplitHorizontal: "grid-flow-col",
+  layoutSplitVertical: "grid-flow-row",
+  layoutSplitPane: "min-h-0 min-w-0 overflow-hidden",
+  layoutSplitPrimary: "",
+  layoutSplitSecondary: "",
+  layoutResizeHandle: cn(
+    "group/resize relative z-10 flex shrink-0 items-center justify-center bg-transparent text-muted-foreground hover:bg-border/60 active:bg-border/70 focus-visible:bg-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    motionInteractive
+  ),
+  layoutResizeHandleHorizontal: "w-2 cursor-col-resize",
+  layoutResizeHandleVertical: "h-2 cursor-row-resize",
+  layoutResizeHandleDisabled: "cursor-default opacity-60",
+  layoutResizeHandleIndicator: "rounded-full bg-muted-foreground/45 group-hover/resize:bg-primary/70"
 };
 var densitySlots = {
   compact: {
@@ -781,7 +816,12 @@ var densitySlots = {
     tableCell: "px-2 py-1.5 text-xs",
     tableHeadLabel: "text-[11px]",
     tableHeadDescription: "text-[10px] leading-3",
-    tableLoadingCell: "px-2 py-1.5"
+    tableLoadingCell: "px-2 py-1.5",
+    layoutRoot: "gap-2 p-2",
+    layoutBody: "gap-2",
+    layoutPane: "rounded-md text-xs",
+    layoutResizeHandleHorizontal: "w-1.5",
+    layoutResizeHandleVertical: "h-1.5"
   },
   default: {
     buttonBase: "h-9"
@@ -832,7 +872,12 @@ var densitySlots = {
     menuSubTrigger: "min-h-9 px-3 py-2",
     tableHead: "h-12 px-4 py-3",
     tableCell: "px-4 py-3",
-    tableLoadingCell: "px-4 py-3"
+    tableLoadingCell: "px-4 py-3",
+    layoutRoot: "gap-4 p-4",
+    layoutBody: "gap-4",
+    layoutPane: "rounded-xl",
+    layoutResizeHandleHorizontal: "w-2.5",
+    layoutResizeHandleVertical: "h-2.5"
   }
 };
 var radiusSlots = {
@@ -876,7 +921,9 @@ var radiusSlots = {
     menuSubContent: "rounded-none",
     tableContainer: "rounded-none",
     tableEmptyIcon: "rounded-none",
-    tableLoadingSkeleton: "rounded-none"
+    tableLoadingSkeleton: "rounded-none",
+    layoutRoot: "rounded-none",
+    layoutPane: "rounded-none"
   },
   sm: {
     buttonBase: "rounded-sm",
@@ -918,7 +965,9 @@ var radiusSlots = {
     menuSubContent: "rounded-sm",
     tableContainer: "rounded-sm",
     tableEmptyIcon: "rounded-sm",
-    tableLoadingSkeleton: "rounded-sm"
+    tableLoadingSkeleton: "rounded-sm",
+    layoutRoot: "rounded-sm",
+    layoutPane: "rounded-sm"
   },
   md: {},
   lg: {
@@ -955,7 +1004,9 @@ var radiusSlots = {
     menuSubContent: "rounded-lg",
     tableContainer: "rounded-xl",
     tableEmptyIcon: "rounded-xl",
-    tableLoadingSkeleton: "rounded-lg"
+    tableLoadingSkeleton: "rounded-lg",
+    layoutRoot: "rounded-xl",
+    layoutPane: "rounded-xl"
   },
   xl: {
     buttonBase: "rounded-xl",
@@ -993,7 +1044,9 @@ var radiusSlots = {
     menuSubContent: "rounded-xl",
     tableContainer: "rounded-2xl",
     tableEmptyIcon: "rounded-2xl",
-    tableLoadingSkeleton: "rounded-xl"
+    tableLoadingSkeleton: "rounded-xl",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
   },
   full: {
     buttonBase: "rounded-full",
@@ -1035,7 +1088,9 @@ var radiusSlots = {
     menuSubContent: "rounded-2xl",
     tableContainer: "rounded-2xl",
     tableEmptyIcon: "rounded-full",
-    tableLoadingSkeleton: "rounded-full"
+    tableLoadingSkeleton: "rounded-full",
+    layoutRoot: "rounded-2xl",
+    layoutPane: "rounded-2xl"
   }
 };
 var borderSlots = {
@@ -1077,7 +1132,10 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-transparent",
     tableRow: "border-transparent",
     tableEmptyRow: "border-transparent",
-    tableLoadingRow: "border-transparent"
+    tableLoadingRow: "border-transparent",
+    layoutRoot: "border-transparent",
+    layoutPaneBordered: "border-transparent",
+    layoutResizeHandle: "bg-transparent hover:bg-transparent active:bg-transparent focus-visible:bg-transparent"
   },
   subtle: {
     buttonDefault: "border-border/60",
@@ -1117,7 +1175,9 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-border/60",
     tableRow: "border-border/50",
     tableEmptyRow: "border-border/50",
-    tableLoadingRow: "border-border/50"
+    tableLoadingRow: "border-border/50",
+    layoutRoot: "border-border/60",
+    layoutPaneBordered: "border-border/60"
   },
   solid: {},
   strong: {
@@ -1158,7 +1218,10 @@ var borderSlots = {
     tableFooterBarAttached: "border-t border-foreground/20",
     tableRow: "border-foreground/15",
     tableEmptyRow: "border-foreground/15",
-    tableLoadingRow: "border-foreground/15"
+    tableLoadingRow: "border-foreground/15",
+    layoutRoot: "border-foreground/20",
+    layoutPaneBordered: "border-foreground/20",
+    layoutResizeHandle: "hover:bg-foreground/15 active:bg-foreground/20 focus-visible:bg-foreground/15"
   }
 };
 var backgroundSlots = {
@@ -1200,7 +1263,11 @@ var backgroundSlots = {
     tableFooter: "bg-muted/35",
     tableFooterBar: "bg-muted/30 shadow-none",
     tableRowInteractive: "cursor-pointer hover:bg-muted/45",
-    tableLoadingSkeleton: "bg-muted"
+    tableLoadingSkeleton: "bg-muted",
+    layoutRoot: "bg-card",
+    layoutPane: "bg-card",
+    layoutPaneMuted: "bg-muted/35",
+    layoutResizeHandle: "hover:bg-border/70 active:bg-border/80 focus-visible:bg-border/70"
   },
   soft: {
     buttonDefault: "bg-muted/30 hover:bg-muted/55",
@@ -1236,7 +1303,10 @@ var backgroundSlots = {
     tableFooter: "bg-muted/25",
     tableFooterBar: "bg-muted/25 shadow-none",
     tableRowInteractive: "cursor-pointer hover:bg-muted/35",
-    tableLoadingSkeleton: "bg-muted/65"
+    tableLoadingSkeleton: "bg-muted/65",
+    layoutRoot: "bg-background/95 shadow-sm",
+    layoutPane: "bg-background/95 shadow-sm",
+    layoutPaneSoft: "bg-background/95 shadow-md"
   },
   glass: {
     buttonBase: "backdrop-blur-md",
@@ -1297,7 +1367,13 @@ var backgroundSlots = {
     tableRow: "border-white/10",
     tableRowInteractive: "cursor-pointer hover:bg-white/[0.08]",
     tableHeadLabel: "text-foreground",
-    tableLoadingSkeleton: "bg-white/[0.16]"
+    tableLoadingSkeleton: "bg-white/[0.16]",
+    layoutRoot: "border-white/10 bg-white/[0.05] shadow-none backdrop-blur-md",
+    layoutPane: "border-white/10 bg-white/[0.06] shadow-none backdrop-blur-md",
+    layoutPaneMuted: "bg-white/[0.08]",
+    layoutPaneSoft: "bg-white/[0.10] shadow-none backdrop-blur-md",
+    layoutResizeHandle: "text-foreground/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
   },
   dark: {
     buttonBase: "border-white/15 text-white shadow-lg backdrop-blur",
@@ -1426,7 +1502,13 @@ var backgroundSlots = {
     menuSubTrigger: "text-white focus:bg-white/[0.10] focus:text-white data-[highlighted]:bg-white/[0.10] data-[highlighted]:text-white data-[state=open]:bg-white/[0.12]",
     menuSubTriggerIcon: "text-white/55",
     menuSubContent: "border-white/10 bg-slate-950 text-white shadow-2xl",
-    tableLoadingSkeleton: "bg-white/[0.14]"
+    tableLoadingSkeleton: "bg-white/[0.14]",
+    layoutRoot: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPane: "border-white/10 bg-slate-950 text-white shadow-none",
+    layoutPaneMuted: "bg-white/[0.06]",
+    layoutPaneSoft: "bg-white/[0.08] shadow-none",
+    layoutResizeHandle: "text-white/65 hover:bg-white/10 active:bg-white/15 focus-visible:bg-white/10",
+    layoutResizeHandleIndicator: "bg-white/45 group-hover/resize:bg-white/75"
   }
 };
 var presetDefaults = {
@@ -1579,6 +1661,16 @@ function getBaseButtonToneClassName(theme, tone = "default", active = false) {
     active && theme.slots.buttonActive
   );
 }
+function getBaseMenuItemToneClassName(theme, tone = "default") {
+  return cn(
+    tone === "default" && theme.slots.menuItemDefault,
+    tone === "primary" && theme.slots.menuItemPrimary,
+    tone === "success" && theme.slots.menuItemSuccess,
+    tone === "warning" && theme.slots.menuItemWarning,
+    tone === "danger" && theme.slots.menuItemDanger,
+    tone === "muted" && theme.slots.menuItemMuted
+  );
+}
 function LoadingIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -1799,6 +1891,198 @@ var BaseCheckbox = forwardRef(
     );
   }
 );
+function renderItemContent({
+  label,
+  icon,
+  shortcut,
+  children,
+  classNames,
+  inset,
+  indicator
+}) {
+  const resolvedLabel = children ?? label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    indicator ? indicator : null,
+    hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(classNames?.icon), children: icon }) : inset ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null,
+    hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsx("span", { className: cn(classNames?.label), children: resolvedLabel }) : null,
+    hasRenderableNode(shortcut) ? /* @__PURE__ */ jsx("span", { className: cn(classNames?.shortcut), children: shortcut }) : null
+  ] });
+}
+function BaseContextMenu({
+  children,
+  trigger,
+  content,
+  disabled = false,
+  modal = true,
+  dir,
+  appearance,
+  className,
+  classNames,
+  onOpenChange
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsxs(
+    ContextMenu.Root,
+    {
+      onOpenChange,
+      modal,
+      dir,
+      children: [
+        trigger ? /* @__PURE__ */ jsx(
+          ContextMenu.Trigger,
+          {
+            disabled,
+            className: cn(
+              theme.slots.menuTrigger,
+              disabled && theme.slots.menuItemDisabled,
+              classNames?.trigger,
+              className
+            ),
+            children: trigger
+          }
+        ) : null,
+        content ? /* @__PURE__ */ jsx(BaseContextMenuContent, { appearance, className: classNames?.content, children: content }) : null,
+        children
+      ]
+    }
+  );
+}
+function BaseContextMenuTrigger({
+  children,
+  disabled = false,
+  asChild = false,
+  appearance,
+  className,
+  style,
+  ...triggerProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsx(
+    ContextMenu.Trigger,
+    {
+      ...triggerProps,
+      asChild,
+      disabled,
+      className: cn(
+        !asChild && theme.slots.menuTrigger,
+        disabled && !asChild && theme.slots.menuItemDisabled,
+        className
+      ),
+      style,
+      children
+    }
+  );
+}
+function BaseContextMenuContent({
+  children,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...contentProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenu.Content,
+    {
+      ...contentProps,
+      className: cn(theme.slots.menuContent, classNames?.root, className),
+      style: {
+        ...theme.styles.menuContent,
+        ...style
+      },
+      children
+    }
+  ) });
+}
+function BaseContextMenuLabel({
+  children,
+  appearance,
+  className,
+  style,
+  ...labelProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsx(
+    ContextMenu.Label,
+    {
+      ...labelProps,
+      className: cn(theme.slots.menuLabel, className),
+      style,
+      children
+    }
+  );
+}
+function BaseContextMenuSeparator({
+  appearance,
+  className,
+  style,
+  ...separatorProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsx(
+    ContextMenu.Separator,
+    {
+      ...separatorProps,
+      className: cn(theme.slots.menuSeparator, className),
+      style
+    }
+  );
+}
+function BaseContextMenuItem({
+  children,
+  label,
+  icon,
+  shortcut,
+  tone,
+  disabled = false,
+  inset = false,
+  appearance,
+  className,
+  classNames,
+  style,
+  onSelect,
+  ...itemProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsx(
+    ContextMenu.Item,
+    {
+      ...itemProps,
+      disabled,
+      className: cn(
+        theme.slots.menuItem,
+        getBaseMenuItemToneClassName(theme, tone),
+        disabled && theme.slots.menuItemDisabled,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.menuItem,
+        ...style
+      },
+      onSelect: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onSelect?.(event);
+      },
+      children: renderItemContent({
+        children,
+        label,
+        icon,
+        shortcut,
+        inset,
+        classNames: {
+          icon: cn(theme.slots.menuItemIcon, classNames?.icon),
+          label: cn(theme.slots.menuItemLabel, classNames?.label),
+          shortcut: cn(theme.slots.menuItemShortcut, classNames?.shortcut)
+        }
+      })
+    }
+  );
+}
 var columnClassNames = {
   1: "grid-cols-1",
   2: "md:grid-cols-2",
@@ -1991,84 +2275,131 @@ var BaseInput = forwardRef(
     );
   }
 );
-function findOption(options, value) {
-  if (value === void 0) return void 0;
-  return options.find((option) => option.value === value);
-}
-function getInitialValue(options, defaultValue) {
-  if (typeof defaultValue === "string") {
-    return defaultValue;
-  }
-  return "";
+function normalizeValues(values) {
+  const nextValues = [];
+  const seen = /* @__PURE__ */ new Set();
+  values?.forEach((value) => {
+    if (seen.has(value)) return;
+    seen.add(value);
+    nextValues.push(value);
+  });
+  return nextValues;
 }
 function getNextEnabledIndex(options, currentIndex, direction) {
   if (!options.length) return -1;
+  const startIndex = currentIndex >= 0 ? currentIndex : 0;
   for (let offset = 1; offset <= options.length; offset += 1) {
-    const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
+    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
     if (!options[nextIndex]?.disabled) {
       return nextIndex;
     }
   }
   return -1;
 }
-var BaseSelect = forwardRef(
-  function BaseSelect2({
+function getFirstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function getSafeTagCount(maxTagCount, total) {
+  if (maxTagCount === void 0) return total;
+  if (!Number.isFinite(maxTagCount)) return total;
+  return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
+}
+function getDefaultRemoveLabel(option) {
+  return `Remove ${option.value}`;
+}
+forwardRef(
+  function BaseMultiSelect2({
     options,
-    placeholder,
+    value,
+    defaultValue,
+    name,
+    placeholder = "Select options",
     icon,
     invalid = false,
     disabled = false,
+    required = false,
     openForPreview = false,
+    maxTagCount,
+    removeLabel = getDefaultRemoveLabel,
+    emptyLabel = "No options",
     appearance,
     className,
     classNames,
     style,
-    children,
-    value,
-    defaultValue,
-    onChange,
-    name,
     id,
-    required,
     "aria-invalid": nativeAriaInvalid,
     "aria-label": nativeAriaLabel,
     "aria-labelledby": nativeAriaLabelledBy,
-    ...selectProps
+    onValueChange,
+    ...rootProps
   }, ref) {
     const theme = resolveBaseAppearance(appearance);
     const generatedId = useId();
-    const selectId = id ?? generatedId;
-    const listboxId = `${selectId}-listbox`;
+    const multiSelectId = id ?? generatedId;
+    const controlId = `${multiSelectId}-control`;
+    const listboxId = `${multiSelectId}-listbox`;
     const rootRef = useRef(null);
-    const selectRef = useRef(null);
     const optionList = options ?? [];
-    const isCustomSelect = optionList.length > 0;
     const forceOpen = openForPreview;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const open = forceOpen || uncontrolledOpen;
     const [uncontrolledValue, setUncontrolledValue] = useState(
-      () => getInitialValue(optionList, defaultValue)
+      () => normalizeValues(defaultValue)
+    );
+    const [activeIndex, setActiveIndex] = useState(
+      () => getFirstEnabledIndex(optionList)
     );
     const isControlled = value !== void 0;
-    const selectedValue = String(isControlled ? value : uncontrolledValue);
-    const selectedOption = findOption(optionList, selectedValue);
-    const activeIndex = useMemo(() => {
-      const selectedIndex = optionList.findIndex(
-        (option) => option.value === selectedValue && !option.disabled
-      );
-      if (selectedIndex >= 0) return selectedIndex;
-      return optionList.findIndex((option) => !option.disabled);
-    }, [optionList, selectedValue]);
-    const visibleLabel = selectedOption?.label ?? placeholder;
-    const isPlaceholder = !selectedOption;
-    const setSelectRef = (node) => {
-      selectRef.current = node;
+    const selectedValues = useMemo(
+      () => normalizeValues(isControlled ? value : uncontrolledValue),
+      [isControlled, uncontrolledValue, value]
+    );
+    const selectedValueSet = useMemo(
+      () => new Set(selectedValues),
+      [selectedValues]
+    );
+    const optionByValue = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      optionList.forEach((option) => {
+        if (!map.has(option.value)) {
+          map.set(option.value, option);
+        }
+      });
+      return map;
+    }, [optionList]);
+    const selectedOptions = useMemo(
+      () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
+        (option) => option !== void 0
+      ),
+      [optionByValue, selectedValues]
+    );
+    const firstEnabledIndex = useMemo(
+      () => getFirstEnabledIndex(optionList),
+      [optionList]
+    );
+    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
+    const visibleTagCount = getSafeTagCount(
+      maxTagCount,
+      selectedOptions.length
+    );
+    const visibleOptions = selectedOptions.slice(0, visibleTagCount);
+    const overflowCount = selectedOptions.length - visibleOptions.length;
+    const isPlaceholder = selectedOptions.length === 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
       if (typeof ref === "function") {
         ref(node);
       } else if (ref) {
         ref.current = node;
       }
     };
+    const setOpen = (nextOpen) => {
+      if (disabled || forceOpen) return;
+      setUncontrolledOpen(nextOpen);
+      if (nextOpen) {
+        setActiveIndex(resolvedActiveIndex);
+      }
+    };
     useEffect(() => {
       if (!open || forceOpen) return void 0;
       const handlePointerDown = (event) => {
@@ -2081,31 +2412,37 @@ var BaseSelect = forwardRef(
         document.removeEventListener("pointerdown", handlePointerDown);
       };
     }, [forceOpen, open]);
-    const notifyChange = (nextValue) => {
-      const selectElement = selectRef.current;
-      if (!selectElement) return;
-      const valueSetter = Object.getOwnPropertyDescriptor(
-        HTMLSelectElement.prototype,
-        "value"
-      )?.set;
-      valueSetter?.call(selectElement, nextValue);
-      selectElement.dispatchEvent(new Event("change", { bubbles: true }));
-    };
-    const commitValue = (nextValue, optionDisabled) => {
-      if (optionDisabled || disabled) return;
-      if (!isControlled) {
-        setUncontrolledValue(nextValue);
+    useEffect(() => {
+      if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
+        setActiveIndex(resolvedActiveIndex);
       }
-      notifyChange(nextValue);
-      if (!forceOpen) {
-        setUncontrolledOpen(false);
+    }, [activeIndex, resolvedActiveIndex]);
+    const commitValues = (nextValues) => {
+      const normalizedValues = normalizeValues(nextValues);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedValues);
       }
+      onValueChange?.(normalizedValues);
+    };
+    const toggleOption = (option) => {
+      if (!option || option.disabled || disabled) return;
+      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
+      commitValues(nextValues);
+    };
+    const removeOption = (option) => {
+      if (disabled) return;
+      commitValues(
+        selectedValues.filter((selectedValue) => selectedValue !== option.value)
+      );
     };
     const focusOption = (direction) => {
-      const currentIndex = activeIndex >= 0 ? activeIndex : 0;
-      const nextIndex = getNextEnabledIndex(optionList, currentIndex, direction);
+      const nextIndex = getNextEnabledIndex(
+        optionList,
+        resolvedActiveIndex,
+        direction
+      );
       if (nextIndex >= 0) {
-        commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
+        setActiveIndex(nextIndex);
       }
     };
     const handleKeyDown = (event) => {
@@ -2113,77 +2450,49 @@ var BaseSelect = forwardRef(
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
         if (!open) {
-          setUncontrolledOpen(true);
+          setOpen(true);
+          setActiveIndex(firstEnabledIndex);
           return;
         }
         focusOption(event.key === "ArrowDown" ? 1 : -1);
         return;
       }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(firstEnabledIndex);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        setOpen(true);
+        for (let index = optionList.length - 1; index >= 0; index -= 1) {
+          if (!optionList[index]?.disabled) {
+            setActiveIndex(index);
+            break;
+          }
+        }
+        return;
+      }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        if (!forceOpen) {
-          setUncontrolledOpen((current) => !current);
+        if (!open) {
+          setOpen(true);
+          return;
         }
+        toggleOption(optionList[resolvedActiveIndex]);
         return;
       }
       if (event.key === "Escape") {
-        setUncontrolledOpen(false);
+        setOpen(false);
       }
     };
-    if (!isCustomSelect) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            theme.slots.controlWrapper,
-            invalid && theme.slots.controlInvalid,
-            disabled && theme.slots.controlDisabled,
-            classNames?.root,
-            className
-          ),
-          style: {
-            ...theme.styles.control,
-            ...invalid ? theme.styles.controlInvalid : void 0,
-            ...disabled ? theme.styles.controlDisabled : void 0,
-            ...style
-          },
-          children: [
-            hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                ...selectProps,
-                id,
-                ref,
-                name,
-                value,
-                defaultValue,
-                required,
-                disabled,
-                "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
-                "aria-label": nativeAriaLabel,
-                "aria-labelledby": nativeAriaLabelledBy,
-                onChange,
-                className: cn(
-                  theme.slots.controlBase,
-                  theme.slots.controlSelect,
-                  classNames?.control
-                ),
-                children: [
-                  hasRenderableNode(placeholder) ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
-                  children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: theme.slots.selectChevron })
-          ]
-        }
-      );
-    }
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: rootRef,
+        ...rootProps,
+        id,
+        ref: setRootRef,
         className: cn(
           theme.slots.controlWrapper,
           "overflow-visible",
@@ -2202,38 +2511,105 @@ var BaseSelect = forwardRef(
         children: [
           hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
           /* @__PURE__ */ jsx(
-            "button",
+            "div",
             {
-              type: "button",
-              id: `${selectId}-button`,
-              disabled,
+              id: controlId,
+              role: "combobox",
+              tabIndex: disabled ? -1 : 0,
               "aria-haspopup": "listbox",
               "aria-expanded": open,
               "aria-controls": listboxId,
+              "aria-disabled": disabled || void 0,
+              "aria-required": required || void 0,
               "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
               "aria-label": nativeAriaLabel,
               "aria-labelledby": nativeAriaLabelledBy,
               className: cn(
                 theme.slots.controlBase,
-                theme.slots.controlSelect,
-                "flex items-center text-left",
+                "flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
+                disabled && "!cursor-not-allowed",
                 classNames?.control
               ),
-              onClick: () => {
-                if (!forceOpen) {
-                  setUncontrolledOpen((current) => !current);
-                }
-              },
+              onClick: () => setOpen(!open),
               onKeyDown: handleKeyDown,
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsxs(
                 "span",
                 {
                   className: cn(
-                    "min-w-0 flex-1 truncate",
-                    isPlaceholder && theme.slots.selectPlaceholder,
-                    isPlaceholder && classNames?.placeholder
+                    "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+                    classNames?.tagList
                   ),
-                  children: visibleLabel
+                  children: [
+                    visibleOptions.map((option) => /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "max-w-40 truncate",
+                                classNames?.tagLabel
+                              ),
+                              children: option.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": removeLabel(option),
+                              disabled,
+                              className: cn(
+                                "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
+                                classNames?.tagRemove
+                              ),
+                              onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                removeOption(option);
+                              },
+                              onMouseDown: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                              },
+                              onKeyDown: (event) => event.stopPropagation(),
+                              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "x" })
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    )),
+                    overflowCount > 0 ? /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
+                          classNames?.tag
+                        ),
+                        children: [
+                          "+",
+                          overflowCount
+                        ]
+                      }
+                    ) : null,
+                    isPlaceholder ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 truncate",
+                          theme.slots.selectPlaceholder,
+                          classNames?.placeholder
+                        ),
+                        children: placeholder
+                      }
+                    ) : null
+                  ]
                 }
               )
             }
@@ -2243,50 +2619,34 @@ var BaseSelect = forwardRef(
             {
               className: cn(
                 theme.slots.selectChevron,
-                open && "rotate-[225deg]"
+                open && "rotate-[225deg]",
+                classNames?.chevron
               )
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "select",
+          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsx(
+            "input",
             {
-              ...selectProps,
-              ref: setSelectRef,
-              id,
+              type: "hidden",
               name,
               value: selectedValue,
-              required,
-              disabled,
-              "aria-hidden": "true",
-              tabIndex: -1,
-              className: theme.slots.selectNative,
-              onChange,
-              children: [
-                hasRenderableNode(placeholder) ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
-                optionList.map((option) => /* @__PURE__ */ jsx(
-                  "option",
-                  {
-                    value: option.value,
-                    disabled: option.disabled,
-                    children: typeof option.label === "string" ? option.label : option.value
-                  },
-                  option.value
-                ))
-              ]
-            }
-          ),
+              className: classNames?.hiddenInput
+            },
+            selectedValue
+          )) : null,
           open ? /* @__PURE__ */ jsx(
             "div",
             {
               id: listboxId,
               role: "listbox",
-              "aria-labelledby": `${selectId}-button`,
+              "aria-multiselectable": "true",
+              "aria-labelledby": controlId,
               className: cn(theme.slots.selectMenu, classNames?.menu),
               style: theme.styles.selectMenu,
-              children: optionList.map((option, index) => {
-                const selected = option.value === selectedValue;
-                const active = index === activeIndex;
-                return /* @__PURE__ */ jsx(
+              children: optionList.length > 0 ? optionList.map((option, index) => {
+                const selected = selectedValueSet.has(option.value);
+                const active = index === resolvedActiveIndex;
+                return /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
@@ -2295,6 +2655,7 @@ var BaseSelect = forwardRef(
                     disabled: option.disabled,
                     className: cn(
                       theme.slots.selectOption,
+                      "gap-2",
                       active && theme.slots.selectOptionActive,
                       selected && theme.slots.selectOptionSelected,
                       option.disabled && theme.slots.selectOptionDisabled,
@@ -2305,13 +2666,50 @@ var BaseSelect = forwardRef(
                       ...active ? theme.styles.selectOptionActive : void 0,
                       ...selected ? theme.styles.selectOptionSelected : void 0
                     },
+                    onMouseEnter: () => {
+                      if (!option.disabled) {
+                        setActiveIndex(index);
+                      }
+                    },
                     onMouseDown: (event) => event.preventDefault(),
-                    onClick: () => commitValue(option.value, option.disabled),
-                    children: /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })
+                    onClick: () => toggleOption(option),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
+                            selected && "border-primary/40 bg-primary text-primary-foreground",
+                            classNames?.optionIndicator
+                          ),
+                          children: selected ? "\u2713" : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "min-w-0 flex-1 truncate",
+                            classNames?.optionLabel
+                          ),
+                          children: option.label
+                        }
+                      )
+                    ]
                   },
                   option.value
                 );
-              })
+              }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "px-2.5 py-2 text-sm text-muted-foreground",
+                    classNames?.empty
+                  ),
+                  children: emptyLabel
+                }
+              )
             }
           ) : null
         ]
@@ -2319,445 +2717,781 @@ var BaseSelect = forwardRef(
     );
   }
 );
-function getInitialSegmentValue(options, defaultValue) {
-  if (defaultValue && options?.some((option) => option.value === defaultValue)) {
-    const defaultOption = options.find((option) => option.value === defaultValue);
-    if (!defaultOption?.disabled) {
-      return defaultValue;
-    }
+function findOption(options, value) {
+  if (value === void 0) return void 0;
+  return options.find((option) => option.value === value);
+}
+function getInitialValue(options, defaultValue) {
+  if (typeof defaultValue === "string") {
+    return defaultValue;
   }
-  return options?.find((option) => !option.disabled)?.value ?? options?.[0]?.value;
+  return "";
 }
-function BaseSegmentedControl({
-  options = [],
-  value,
-  defaultValue,
-  appearance,
-  className,
-  classNames,
-  style,
-  onValueChange,
-  ...controlProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  const [uncontrolledValue, setUncontrolledValue] = useState(
-    () => getInitialSegmentValue(options, defaultValue)
-  );
-  const isControlled = value !== void 0;
-  const selectedValue = isControlled ? value : uncontrolledValue;
-  const handleSelect = (nextValue, disabled) => {
-    if (disabled) return;
-    if (!isControlled) {
-      setUncontrolledValue(nextValue);
-    }
-    onValueChange?.(nextValue);
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...controlProps,
-      role: "radiogroup",
-      className: cn(theme.slots.segmentedRoot, classNames?.root, className),
-      style: {
-        ...theme.styles.segmentedRoot,
-        ...style
-      },
-      children: options.map((option) => {
-        const selected = option.value === selectedValue;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": selected,
-            disabled: option.disabled,
-            className: cn(
-              theme.slots.segmentedItem,
-              selected && theme.slots.segmentedItemActive,
-              option.disabled && theme.slots.segmentedItemDisabled,
-              classNames?.item
-            ),
-            style: theme.styles.segmentedItem,
-            onClick: () => handleSelect(option.value, option.disabled),
-            children: [
-              hasRenderableNode(option.icon) ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 shrink-0", classNames?.icon), children: option.icon }) : null,
-              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", classNames?.label), children: option.label })
-            ]
-          },
-          option.value
-        );
-      })
+function getNextEnabledIndex2(options, currentIndex, direction) {
+  if (!options.length) return -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
+    if (!options[nextIndex]?.disabled) {
+      return nextIndex;
     }
-  );
+  }
+  return -1;
 }
-forwardRef(
-  function BaseSwitch2({
-    label,
-    description,
+var BaseSelect = forwardRef(
+  function BaseSelect2({
+    options,
+    placeholder,
+    icon,
+    invalid = false,
     disabled = false,
+    openForPreview = false,
     appearance,
     className,
     classNames,
     style,
-    checked,
-    defaultChecked,
+    children,
+    value,
+    defaultValue,
     onChange,
-    ...switchProps
+    name,
+    id,
+    required,
+    "aria-invalid": nativeAriaInvalid,
+    "aria-label": nativeAriaLabel,
+    "aria-labelledby": nativeAriaLabelledBy,
+    ...selectProps
   }, ref) {
     const theme = resolveBaseAppearance(appearance);
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(
-      defaultChecked ?? false
+    const generatedId = useId();
+    const selectId = id ?? generatedId;
+    const listboxId = `${selectId}-listbox`;
+    const rootRef = useRef(null);
+    const selectRef = useRef(null);
+    const optionList = options ?? [];
+    const isCustomSelect = optionList.length > 0;
+    const forceOpen = openForPreview;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const open = forceOpen || uncontrolledOpen;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      () => getInitialValue(optionList, defaultValue)
     );
-    const isControlled = checked !== void 0;
-    const resolvedChecked = isControlled ? checked : uncontrolledChecked;
-    const handleChange = (event) => {
-      if (!isControlled) {
-        setUncontrolledChecked(event.currentTarget.checked);
+    const isControlled = value !== void 0;
+    const selectedValue = String(isControlled ? value : uncontrolledValue);
+    const selectedOption = findOption(optionList, selectedValue);
+    const activeIndex = useMemo(() => {
+      const selectedIndex = optionList.findIndex(
+        (option) => option.value === selectedValue && !option.disabled
+      );
+      if (selectedIndex >= 0) return selectedIndex;
+      return optionList.findIndex((option) => !option.disabled);
+    }, [optionList, selectedValue]);
+    const visibleLabel = selectedOption?.label ?? placeholder;
+    const isPlaceholder = !selectedOption;
+    const setSelectRef = (node) => {
+      selectRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
       }
-      onChange?.(event);
     };
-    return /* @__PURE__ */ jsxs(
-      "label",
-      {
-        className: cn(
-          theme.slots.switchRoot,
-          disabled && theme.slots.switchDisabled,
-          classNames?.root,
-          className
-        ),
-        style: {
-          ...theme.styles.switchRoot,
-          ...style
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: cn(
-                theme.slots.switchTrack,
-                resolvedChecked && theme.slots.switchChecked,
-                classNames?.track
-              ),
-              style: theme.styles.switchTrack,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ...switchProps,
-                    ref,
-                    type: "checkbox",
-                    disabled,
-                    checked,
-                    defaultChecked,
-                    onChange: handleChange,
-                    className: cn(theme.slots.switchInput, classNames?.input)
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      theme.slots.switchThumb,
-                      resolvedChecked && "translate-x-5",
-                      classNames?.thumb
-                    ),
-                    style: theme.styles.switchThumb
-                  }
-                )
-              ]
-            }
+    useEffect(() => {
+      if (!open || forceOpen) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          setUncontrolledOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, open]);
+    const notifyChange = (nextValue) => {
+      const selectElement = selectRef.current;
+      if (!selectElement) return;
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLSelectElement.prototype,
+        "value"
+      )?.set;
+      valueSetter?.call(selectElement, nextValue);
+      selectElement.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const commitValue = (nextValue, optionDisabled) => {
+      if (optionDisabled || disabled) return;
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      notifyChange(nextValue);
+      if (!forceOpen) {
+        setUncontrolledOpen(false);
+      }
+    };
+    const focusOption = (direction) => {
+      const currentIndex = activeIndex >= 0 ? activeIndex : 0;
+      const nextIndex = getNextEnabledIndex2(optionList, currentIndex, direction);
+      if (nextIndex >= 0) {
+        commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) {
+          setUncontrolledOpen(true);
+          return;
+        }
+        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!forceOpen) {
+          setUncontrolledOpen((current) => !current);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        setUncontrolledOpen(false);
+      }
+    };
+    if (!isCustomSelect) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            theme.slots.controlWrapper,
+            invalid && theme.slots.controlInvalid,
+            disabled && theme.slots.controlDisabled,
+            classNames?.root,
+            className
           ),
-          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxs("span", { className: cn(theme.slots.switchContent, classNames?.content), children: [
-            hasRenderableNode(label) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.switchLabel, classNames?.label), children: label }) : null,
-            hasRenderableNode(description) ? /* @__PURE__ */ jsx(
-              "span",
+          style: {
+            ...theme.styles.control,
+            ...invalid ? theme.styles.controlInvalid : void 0,
+            ...disabled ? theme.styles.controlDisabled : void 0,
+            ...style
+          },
+          children: [
+            hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+            /* @__PURE__ */ jsxs(
+              "select",
               {
+                ...selectProps,
+                id,
+                ref,
+                name,
+                value,
+                defaultValue,
+                required,
+                disabled,
+                "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+                "aria-label": nativeAriaLabel,
+                "aria-labelledby": nativeAriaLabelledBy,
+                onChange,
                 className: cn(
-                  theme.slots.switchDescription,
-                  classNames?.description
+                  theme.slots.controlBase,
+                  theme.slots.controlSelect,
+                  classNames?.control
                 ),
-                children: description
+                children: [
+                  hasRenderableNode(placeholder) ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+                  children
+                ]
               }
-            ) : null
-          ] }) : null
-        ]
-      }
-    );
-  }
-);
-var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
-var BaseTableContext = createContext(null);
-function useBaseTableContext(appearance) {
-  const context = useContext(BaseTableContext);
-  if (context) {
-    return {
-      ...context,
-      theme: appearance ? resolveBaseAppearance(appearance) : context.theme,
-      appearance: appearance ?? context.appearance
-    };
-  }
-  const theme = resolveBaseAppearance(appearance);
-  return {
-    appearance,
-    theme,
-    setDraggingColumnId: () => {
-    }
-  };
-}
-function toCssSize(value) {
-  if (value === void 0) return void 0;
-  return typeof value === "number" ? `${value}px` : value;
-}
-function clampWidth2(value, minWidth, maxWidth) {
-  const min = minWidth ?? 48;
-  const max = maxWidth ?? Number.POSITIVE_INFINITY;
-  return Math.min(Math.max(value, min), max);
-}
-function getNextColumnOrder(order, columnId, targetColumnId) {
-  if (!order || columnId === targetColumnId) return void 0;
-  const fromIndex = order.indexOf(columnId);
-  const toIndex = order.indexOf(targetColumnId);
-  if (fromIndex < 0 || toIndex < 0) return void 0;
-  const next = [...order];
-  const [moved] = next.splice(fromIndex, 1);
-  next.splice(toIndex, 0, moved);
-  return next;
-}
-function sortAriaValue(direction) {
-  switch (direction) {
-    case "asc":
-      return "ascending";
-    case "desc":
-      return "descending";
-    default:
-      return void 0;
-  }
-}
-function SortIndicator({
-  direction,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        className,
-        direction === "desc" && "rotate-180",
-        (!direction || direction === "none") && "opacity-45"
-      ),
-      children: "\u25B2"
-    }
-  );
-}
-function DragHandleIcon() {
-  return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "grid gap-0.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
-    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
-    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" })
-  ] });
-}
-function BaseTableContainer({
-  appearance,
-  attachedFooter = false,
-  className,
-  classNames,
-  style,
-  ...containerProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...containerProps,
-      "data-base-table-container": "",
-      "data-attached-footer": attachedFooter ? "" : void 0,
-      className: cn(
-        theme.slots.tableContainer,
-        attachedFooter && theme.slots.tableContainerFooterAttached,
-        classNames?.root,
-        className
-      ),
-      style: {
-        ...theme.styles.tableContainer,
-        ...attachedFooter ? theme.styles.tableContainerFooterAttached : void 0,
-        ...style
-      }
+            ),
+            /* @__PURE__ */ jsx("span", { className: theme.slots.selectChevron })
+          ]
+        }
+      );
     }
-  );
-}
-function BaseTable({
-  appearance,
-  className,
-  classNames,
-  style,
-  columnOrder,
-  columnSizes,
-  columnDragEnabled = false,
-  columnResizeEnabled = false,
-  onColumnOrderChange,
-  onColumnSizeChange,
-  ...tableProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  const [draggingColumnId, setDraggingColumnId] = useState();
-  const contextValue = {
-    appearance,
-    theme,
-    columnOrder,
-    columnSizes,
-    columnDragEnabled,
-    columnResizeEnabled,
-    onColumnOrderChange,
-    onColumnSizeChange,
-    draggingColumnId,
-    setDraggingColumnId
-  };
-  return /* @__PURE__ */ jsx(BaseTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "table",
-    {
-      ...tableProps,
-      className: cn(theme.slots.tableRoot, classNames?.root, className),
-      style: {
-        ...theme.styles.table,
-        ...style
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: cn(
+          theme.slots.controlWrapper,
+          "overflow-visible",
+          open && "z-50",
+          invalid && theme.slots.controlInvalid,
+          disabled && theme.slots.controlDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.control,
+          ...invalid ? theme.styles.controlInvalid : void 0,
+          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              id: `${selectId}-button`,
+              disabled,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "aria-label": nativeAriaLabel,
+              "aria-labelledby": nativeAriaLabelledBy,
+              className: cn(
+                theme.slots.controlBase,
+                theme.slots.controlSelect,
+                "flex items-center text-left",
+                classNames?.control
+              ),
+              onClick: () => {
+                if (!forceOpen) {
+                  setUncontrolledOpen((current) => !current);
+                }
+              },
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 truncate",
+                    isPlaceholder && theme.slots.selectPlaceholder,
+                    isPlaceholder && classNames?.placeholder
+                  ),
+                  children: visibleLabel
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                theme.slots.selectChevron,
+                open && "rotate-[225deg]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              ...selectProps,
+              ref: setSelectRef,
+              id,
+              name,
+              value: selectedValue,
+              required,
+              disabled,
+              "aria-hidden": "true",
+              tabIndex: -1,
+              className: theme.slots.selectNative,
+              onChange,
+              children: [
+                hasRenderableNode(placeholder) ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+                optionList.map((option) => /* @__PURE__ */ jsx(
+                  "option",
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: typeof option.label === "string" ? option.label : option.value
+                  },
+                  option.value
+                ))
+              ]
+            }
+          ),
+          open ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-labelledby": `${selectId}-button`,
+              className: cn(theme.slots.selectMenu, classNames?.menu),
+              style: theme.styles.selectMenu,
+              children: optionList.map((option, index) => {
+                const selected = option.value === selectedValue;
+                const active = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled: option.disabled,
+                    className: cn(
+                      theme.slots.selectOption,
+                      active && theme.slots.selectOptionActive,
+                      selected && theme.slots.selectOptionSelected,
+                      option.disabled && theme.slots.selectOptionDisabled,
+                      classNames?.option
+                    ),
+                    style: {
+                      ...theme.styles.selectOption,
+                      ...active ? theme.styles.selectOptionActive : void 0,
+                      ...selected ? theme.styles.selectOptionSelected : void 0
+                    },
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => commitValue(option.value, option.disabled),
+                    children: /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })
+                  },
+                  option.value
+                );
+              })
+            }
+          ) : null
+        ]
       }
+    );
+  }
+);
+function getInitialSegmentValue(options, defaultValue) {
+  if (defaultValue && options?.some((option) => option.value === defaultValue)) {
+    const defaultOption = options.find((option) => option.value === defaultValue);
+    if (!defaultOption?.disabled) {
+      return defaultValue;
     }
-  ) });
+  }
+  return options?.find((option) => !option.disabled)?.value ?? options?.[0]?.value;
 }
-function BaseTableHeader({
+function BaseSegmentedControl({
+  options = [],
+  value,
+  defaultValue,
   appearance,
   className,
   classNames,
   style,
-  ...headerProps
+  onValueChange,
+  ...controlProps
 }) {
-  const { theme } = useBaseTableContext(appearance);
-  return /* @__PURE__ */ jsx(
-    "thead",
-    {
-      ...headerProps,
-      className: cn(theme.slots.tableHeader, classNames?.root, className),
-      style: {
-        ...theme.styles.tableHeader,
-        ...style
-      }
-    }
+  const theme = resolveBaseAppearance(appearance);
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    () => getInitialSegmentValue(options, defaultValue)
   );
-}
-function BaseTableBody({
-  appearance,
-  className,
-  classNames,
-  style,
-  ...bodyProps
-}) {
-  const { theme } = useBaseTableContext(appearance);
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value : uncontrolledValue;
+  const handleSelect = (nextValue, disabled) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
   return /* @__PURE__ */ jsx(
-    "tbody",
+    "div",
     {
-      ...bodyProps,
-      className: cn(theme.slots.tableBody, classNames?.root, className),
+      ...controlProps,
+      role: "radiogroup",
+      className: cn(theme.slots.segmentedRoot, classNames?.root, className),
       style: {
-        ...theme.styles.tableBody,
+        ...theme.styles.segmentedRoot,
         ...style
-      }
+      },
+      children: options.map((option) => {
+        const selected = option.value === selectedValue;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            disabled: option.disabled,
+            className: cn(
+              theme.slots.segmentedItem,
+              selected && theme.slots.segmentedItemActive,
+              option.disabled && theme.slots.segmentedItemDisabled,
+              classNames?.item
+            ),
+            style: theme.styles.segmentedItem,
+            onClick: () => handleSelect(option.value, option.disabled),
+            children: [
+              hasRenderableNode(option.icon) ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 shrink-0", classNames?.icon), children: option.icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", classNames?.label), children: option.label })
+            ]
+          },
+          option.value
+        );
+      })
     }
   );
 }
-function BaseTableRow({
-  interactive,
-  selected,
-  disabled,
-  appearance,
-  className,
-  classNames,
-  style,
-  ...rowProps
-}) {
-  const { theme } = useBaseTableContext(appearance);
+forwardRef(
+  function BaseSwitch2({
+    label,
+    description,
+    disabled = false,
+    appearance,
+    className,
+    classNames,
+    style,
+    checked,
+    defaultChecked,
+    onChange,
+    ...switchProps
+  }, ref) {
+    const theme = resolveBaseAppearance(appearance);
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+      defaultChecked ?? false
+    );
+    const isControlled = checked !== void 0;
+    const resolvedChecked = isControlled ? checked : uncontrolledChecked;
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setUncontrolledChecked(event.currentTarget.checked);
+      }
+      onChange?.(event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          theme.slots.switchRoot,
+          disabled && theme.slots.switchDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.switchRoot,
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                theme.slots.switchTrack,
+                resolvedChecked && theme.slots.switchChecked,
+                classNames?.track
+              ),
+              style: theme.styles.switchTrack,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...switchProps,
+                    ref,
+                    type: "checkbox",
+                    disabled,
+                    checked,
+                    defaultChecked,
+                    onChange: handleChange,
+                    className: cn(theme.slots.switchInput, classNames?.input)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      theme.slots.switchThumb,
+                      resolvedChecked && "translate-x-5",
+                      classNames?.thumb
+                    ),
+                    style: theme.styles.switchThumb
+                  }
+                )
+              ]
+            }
+          ),
+          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxs("span", { className: cn(theme.slots.switchContent, classNames?.content), children: [
+            hasRenderableNode(label) ? /* @__PURE__ */ jsx("span", { className: cn(theme.slots.switchLabel, classNames?.label), children: label }) : null,
+            hasRenderableNode(description) ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  theme.slots.switchDescription,
+                  classNames?.description
+                ),
+                children: description
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
+var BaseTableContext = createContext(null);
+function useBaseTableContext(appearance) {
+  const context = useContext(BaseTableContext);
+  if (context) {
+    return {
+      ...context,
+      theme: appearance ? resolveBaseAppearance(appearance) : context.theme,
+      appearance: appearance ?? context.appearance
+    };
+  }
+  const theme = resolveBaseAppearance(appearance);
+  return {
+    appearance,
+    theme,
+    setDraggingColumnId: () => {
+    }
+  };
+}
+function toCssSize(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function clampWidth2(value, minWidth, maxWidth) {
+  const min = minWidth ?? 48;
+  const max = maxWidth ?? Number.POSITIVE_INFINITY;
+  return Math.min(Math.max(value, min), max);
+}
+function getNextColumnOrder(order, columnId, targetColumnId) {
+  if (!order || columnId === targetColumnId) return void 0;
+  const fromIndex = order.indexOf(columnId);
+  const toIndex = order.indexOf(targetColumnId);
+  if (fromIndex < 0 || toIndex < 0) return void 0;
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+function sortAriaValue(direction) {
+  switch (direction) {
+    case "asc":
+      return "ascending";
+    case "desc":
+      return "descending";
+    default:
+      return void 0;
+  }
+}
+function SortIndicator({
+  direction,
+  className
+}) {
   return /* @__PURE__ */ jsx(
-    "tr",
+    "span",
     {
-      ...rowProps,
-      "aria-disabled": disabled || void 0,
-      "data-state": selected ? "selected" : void 0,
+      "aria-hidden": "true",
       className: cn(
-        theme.slots.tableRow,
-        interactive && !disabled && theme.slots.tableRowInteractive,
-        selected && theme.slots.tableRowSelected,
-        disabled && theme.slots.tableRowDisabled,
+        className,
+        direction === "desc" && "rotate-180",
+        (!direction || direction === "none") && "opacity-45"
+      ),
+      children: "\u25B2"
+    }
+  );
+}
+function DragHandleIcon() {
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "grid gap-0.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
+    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" }),
+    /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" })
+  ] });
+}
+function BaseTableContainer({
+  appearance,
+  attachedFooter = false,
+  className,
+  classNames,
+  style,
+  ...containerProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...containerProps,
+      "data-base-table-container": "",
+      "data-attached-footer": attachedFooter ? "" : void 0,
+      className: cn(
+        theme.slots.tableContainer,
+        attachedFooter && theme.slots.tableContainerFooterAttached,
         classNames?.root,
         className
       ),
       style: {
-        ...theme.styles.tableRow,
+        ...theme.styles.tableContainer,
+        ...attachedFooter ? theme.styles.tableContainerFooterAttached : void 0,
         ...style
       }
     }
   );
 }
-function BaseTableHead({
-  columnId,
-  align = "left",
-  icon,
-  label,
-  description,
-  meta,
-  actions,
-  trailing,
-  sortable,
-  sortDirection = "none",
-  sortLabel,
-  onSort,
-  draggable,
-  dragLabel,
-  resizable,
-  resizeLabel,
-  width,
-  minWidth,
-  maxWidth,
+function BaseTable({
   appearance,
   className,
   classNames,
   style,
-  children,
-  onDragOver,
-  onDrop,
-  ...headProps
+  columnOrder,
+  columnSizes,
+  columnDragEnabled = false,
+  columnResizeEnabled = false,
+  onColumnOrderChange,
+  onColumnSizeChange,
+  ...tableProps
 }) {
-  const tableContext = useBaseTableContext(appearance);
-  const { theme } = tableContext;
-  const headRef = useRef(null);
-  const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
-  const canDrag = Boolean(
-    columnId && draggable !== false && (draggable || tableContext.columnDragEnabled) && tableContext.columnOrder && tableContext.onColumnOrderChange
-  );
-  const canResize = Boolean(
-    columnId && resizable !== false && (resizable || tableContext.columnResizeEnabled) && tableContext.onColumnSizeChange
-  );
-  const interactiveSort = Boolean(sortable || onSort);
-  const ariaSort = sortAriaValue(sortDirection);
-  const content = hasRenderableNode(label) ? label : children;
-  const usesRichHeader = canDrag || hasRenderableNode(icon) || hasRenderableNode(label) || hasRenderableNode(description) || hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) || interactiveSort;
-  const renderedContent = usesRichHeader ? /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadContent, classNames?.content), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadMain, classNames?.main), children: [
-      canDrag ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          draggable: true,
-          title: dragLabel,
-          "aria-label": dragLabel ?? `Drag column ${columnId}`,
-          className: cn(theme.slots.tableHeadDragHandle, classNames?.dragHandle),
-          onClick: (event) => event.stopPropagation(),
-          onDragStart: (event) => {
-            event.stopPropagation();
-            tableContext.setDraggingColumnId(columnId);
-            event.dataTransfer.effectAllowed = "move";
-            event.dataTransfer.setData(DATA_TRANSFER_COLUMN_TYPE, columnId);
-          },
-          onDragEnd: (event) => {
+  const theme = resolveBaseAppearance(appearance);
+  const [draggingColumnId, setDraggingColumnId] = useState();
+  const contextValue = {
+    appearance,
+    theme,
+    columnOrder,
+    columnSizes,
+    columnDragEnabled,
+    columnResizeEnabled,
+    onColumnOrderChange,
+    onColumnSizeChange,
+    draggingColumnId,
+    setDraggingColumnId
+  };
+  return /* @__PURE__ */ jsx(BaseTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ...tableProps,
+      className: cn(theme.slots.tableRoot, classNames?.root, className),
+      style: {
+        ...theme.styles.table,
+        ...style
+      }
+    }
+  ) });
+}
+function BaseTableHeader({
+  appearance,
+  className,
+  classNames,
+  style,
+  ...headerProps
+}) {
+  const { theme } = useBaseTableContext(appearance);
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ...headerProps,
+      className: cn(theme.slots.tableHeader, classNames?.root, className),
+      style: {
+        ...theme.styles.tableHeader,
+        ...style
+      }
+    }
+  );
+}
+function BaseTableBody({
+  appearance,
+  className,
+  classNames,
+  style,
+  ...bodyProps
+}) {
+  const { theme } = useBaseTableContext(appearance);
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ...bodyProps,
+      className: cn(theme.slots.tableBody, classNames?.root, className),
+      style: {
+        ...theme.styles.tableBody,
+        ...style
+      }
+    }
+  );
+}
+function BaseTableRow({
+  interactive,
+  selected,
+  disabled,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...rowProps
+}) {
+  const { theme } = useBaseTableContext(appearance);
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ...rowProps,
+      "aria-disabled": disabled || void 0,
+      "data-state": selected ? "selected" : void 0,
+      className: cn(
+        theme.slots.tableRow,
+        interactive && !disabled && theme.slots.tableRowInteractive,
+        selected && theme.slots.tableRowSelected,
+        disabled && theme.slots.tableRowDisabled,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.tableRow,
+        ...style
+      }
+    }
+  );
+}
+var BaseTableHead = forwardRef(function BaseTableHead2({
+  columnId,
+  align = "left",
+  icon,
+  label,
+  description,
+  meta,
+  actions,
+  trailing,
+  sortable,
+  sortDirection = "none",
+  sortLabel,
+  onSort,
+  draggable,
+  dragLabel,
+  resizable,
+  resizeLabel,
+  width,
+  minWidth,
+  maxWidth,
+  appearance,
+  className,
+  classNames,
+  style,
+  children,
+  onDragOver,
+  onDrop,
+  ...headProps
+}, forwardedRef) {
+  const tableContext = useBaseTableContext(appearance);
+  const { theme } = tableContext;
+  const headRef = useRef(null);
+  const setHeadRef = (node) => {
+    headRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+  const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
+  const canDrag = Boolean(
+    columnId && draggable !== false && (draggable || tableContext.columnDragEnabled) && tableContext.columnOrder && tableContext.onColumnOrderChange
+  );
+  const canResize = Boolean(
+    columnId && resizable !== false && (resizable || tableContext.columnResizeEnabled) && tableContext.onColumnSizeChange
+  );
+  const interactiveSort = Boolean(sortable || onSort);
+  const ariaSort = sortAriaValue(sortDirection);
+  const content = hasRenderableNode(label) ? label : children;
+  const usesRichHeader = canDrag || hasRenderableNode(icon) || hasRenderableNode(label) || hasRenderableNode(description) || hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) || interactiveSort;
+  const renderedContent = usesRichHeader ? /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadContent, classNames?.content), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(theme.slots.tableHeadMain, classNames?.main), children: [
+      canDrag ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          draggable: true,
+          title: dragLabel,
+          "aria-label": dragLabel ?? `Drag column ${columnId}`,
+          className: cn(theme.slots.tableHeadDragHandle, classNames?.dragHandle),
+          onClick: (event) => event.stopPropagation(),
+          onDragStart: (event) => {
+            event.stopPropagation();
+            tableContext.setDraggingColumnId(columnId);
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData(DATA_TRANSFER_COLUMN_TYPE, columnId);
+          },
+          onDragEnd: (event) => {
             event.stopPropagation();
             tableContext.setDraggingColumnId(void 0);
           },
@@ -2883,7 +3617,7 @@ function BaseTableHead({
     "th",
     {
       ...headProps,
-      ref: headRef,
+      ref: setHeadRef,
       scope: headProps.scope ?? "col",
       "aria-sort": ariaSort,
       className: cn(
@@ -2918,7 +3652,7 @@ function BaseTableHead({
       ]
     }
   );
-}
+});
 function BaseTableCell({
   align = "left",
   appearance,
@@ -3976,340 +4710,993 @@ var WorkbenchDetailSidebar = forwardRef(
           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;
+        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
+      ]
+    }
+  );
 }
-function renderWorkbenchIcon(icon, className) {
-  if (!icon) return null;
-  if (isValidElement(icon)) return icon;
-  if (isWorkbenchIconComponent(icon)) {
-    const Icon = icon;
-    return /* @__PURE__ */ jsx(Icon, { className });
+function toCssSize3(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function isBrowser() {
+  return typeof window !== "undefined";
+}
+function defaultGetRowKey2(row, rowIndex) {
+  return row?.id ?? row?.key ?? rowIndex;
+}
+function getColumnDefaultSize(column) {
+  if (typeof column.width === "number") return column.width;
+  if (typeof column.minWidth === "number") return column.minWidth;
+  return 160;
+}
+function buildDefaultColumnSizes(columns, explicit) {
+  return columns.reduce((acc, column) => {
+    acc[column.key] = explicit?.[column.key] ?? getColumnDefaultSize(column);
+    return acc;
+  }, {});
+}
+function loadStoredColumnSizes(storageKey, defaults) {
+  if (!storageKey || !isBrowser()) return defaults;
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(storageKey) || "{}");
+    return Object.keys(defaults).reduce((acc, key) => {
+      const value = Number(parsed?.[key]);
+      acc[key] = Number.isFinite(value) ? value : defaults[key];
+      return acc;
+    }, {});
+  } catch {
+    return defaults;
   }
-  return icon;
 }
-function getWorkbenchIconComponent(icon) {
-  if (!icon || !isWorkbenchIconComponent(icon)) return null;
-  return icon;
+function persistColumnSizes(storageKey, sizes) {
+  if (!storageKey || !isBrowser()) return;
+  window.localStorage.setItem(storageKey, JSON.stringify(sizes));
 }
-function toCssSize2(value) {
-  if (value === void 0) return void 0;
-  return typeof value === "number" ? `${value}px` : value;
+function getFrozenColumnStorageKey(storageKey) {
+  return storageKey ? `${storageKey}.frozenColumnCount` : void 0;
 }
-function defaultFormatLabel(value) {
-  if (value === void 0 || value === null || value === false) return null;
-  return value;
+function getFrozenEndColumnStorageKey(storageKey) {
+  return storageKey ? `${storageKey}.frozenEndColumnCount` : void 0;
 }
-function toTitle(value) {
-  if (typeof value === "string" || typeof value === "number") return String(value);
-  return void 0;
+function clampFrozenColumnCount(count, columnCount) {
+  if (!Number.isFinite(count)) return 0;
+  return Math.max(0, Math.min(Math.round(count), columnCount));
 }
-function defaultGetRowKey(row, rowIndex) {
-  return row?.id ?? row?.key ?? row?.linkKey ?? rowIndex;
+function normalizeFrozenColumnCounts(startCount, endCount, columnCount) {
+  const normalizedStartCount = clampFrozenColumnCount(startCount, columnCount);
+  const normalizedEndCount = clampFrozenColumnCount(endCount, Math.max(0, columnCount - normalizedStartCount));
+  return {
+    startCount: normalizedStartCount,
+    endCount: normalizedEndCount
+  };
 }
-function defaultGetRowSelectionKey(row) {
-  return row?.linkKey ?? row?.id ?? row?.key;
+function loadStoredFrozenColumnCount(storageKey, defaultCount, columnCount) {
+  const fallback = clampFrozenColumnCount(defaultCount, columnCount);
+  const frozenStorageKey = getFrozenColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return fallback;
+  try {
+    const storedValue = window.localStorage.getItem(frozenStorageKey);
+    if (storedValue === null) return fallback;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? clampFrozenColumnCount(value, columnCount) : fallback;
+  } catch {
+    return fallback;
+  }
 }
-function 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 persistFrozenColumnCount(storageKey, count) {
+  const frozenStorageKey = getFrozenColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return;
+  window.localStorage.setItem(frozenStorageKey, String(count));
 }
-function normalizeColumnOrder(columnKeys, columnOrder) {
+function loadStoredFrozenEndColumnCount(storageKey, defaultCount, columnCount) {
+  const fallback = clampFrozenColumnCount(defaultCount, columnCount);
+  const frozenStorageKey = getFrozenEndColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return fallback;
+  try {
+    const storedValue = window.localStorage.getItem(frozenStorageKey);
+    if (storedValue === null) return fallback;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? clampFrozenColumnCount(value, columnCount) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function persistFrozenEndColumnCount(storageKey, count) {
+  const frozenStorageKey = getFrozenEndColumnStorageKey(storageKey);
+  if (!frozenStorageKey || !isBrowser()) return;
+  window.localStorage.setItem(frozenStorageKey, String(count));
+}
+function normalizeColumnOrder2(columnKeys, columnOrder) {
   const validColumnKeys = new Set(columnKeys);
   const orderedKeys = (columnOrder || []).filter((columnKey) => validColumnKeys.has(columnKey));
   const orderedKeySet = new Set(orderedKeys);
   const remainingKeys = columnKeys.filter((columnKey) => !orderedKeySet.has(columnKey));
   return [...orderedKeys, ...remainingKeys];
 }
-function WorkbenchTableHeaderHelper({
-  helperText,
-  className
+function getOrderedColumns2(columns, columnOrder) {
+  const normalizedOrder = normalizeColumnOrder2(columns.map((column) => column.key), columnOrder);
+  const columnMap = new Map(columns.map((column) => [column.key, column]));
+  return normalizedOrder.map((columnKey) => columnMap.get(columnKey)).filter(Boolean);
+}
+function getColumnNumericWidth(column, columnSizes) {
+  const controlledWidth = columnSizes[column.key];
+  if (typeof controlledWidth === "number") return controlledWidth;
+  return getColumnDefaultSize(column);
+}
+function buildFrozenOffsets(columns, columnSizes, frozenColumnCount) {
+  const offsets = /* @__PURE__ */ new Map();
+  let left = 0;
+  columns.slice(0, Math.max(0, frozenColumnCount)).forEach((column) => {
+    offsets.set(column.key, left);
+    left += getColumnNumericWidth(column, columnSizes);
+  });
+  return offsets;
+}
+function buildFrozenEndOffsets(columns, columnSizes, frozenEndColumnCount) {
+  const offsets = /* @__PURE__ */ new Map();
+  let right = 0;
+  columns.slice(Math.max(0, columns.length - frozenEndColumnCount)).reverse().forEach((column) => {
+    offsets.set(column.key, right);
+    right += getColumnNumericWidth(column, columnSizes);
+  });
+  return offsets;
+}
+function resolveRowClassName(rowClassName, row, rowIndex) {
+  return typeof rowClassName === "function" ? rowClassName(row, rowIndex) : rowClassName;
+}
+function renderDefaultCell(column, row) {
+  const value = row?.[column.key];
+  if (value === void 0 || value === null || value === "") return "\u2014";
+  return String(value);
+}
+function InteractiveTableCellContent({
+  children,
+  wrap
 }) {
-  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
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "min-w-0 max-w-full overflow-auto overscroll-contain [scrollbar-width:thin]",
+        wrap ? "max-h-20 whitespace-pre-wrap break-words leading-5" : "whitespace-nowrap"
+      ),
+      children
+    }
+  );
 }
-function WorkbenchTableView({
+function PinIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.75",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5.25 2.75h5.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M6.25 2.75v4L4.5 9.25h7L9.75 6.75v-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 9.25v4" })
+      ]
+    }
+  );
+}
+function InteractiveTable({
   rows = [],
   columns = [],
+  pinnedTopRows = [],
+  getRowKey = defaultGetRowKey2,
+  getPinnedTopRowKey = defaultGetRowKey2,
+  renderCell,
+  renderPinnedTopCell,
+  renderColumnHeader,
   onRowClick,
-  selectedRowKey,
-  selectedLinkKey,
-  activePrimaryColumn,
-  activeTablePrimaryColumn,
-  renderedRowCount,
-  totalRowCount,
-  tableMinWidth,
-  minWidth,
-  bodyMaxHeight = "min(58vh, 38rem)",
-  stickyFirstColumn = true,
-  appearance,
+  getRowState,
+  rowClassName,
+  pinnedTopRowClassName,
+  emptyState = "\u2014",
+  columnMenuLabels,
+  columnStorageKey,
   columnOrder,
   columnSizes,
-  columnDragEnabled,
-  columnResizeEnabled,
+  defaultColumnSizes,
+  columnDragEnabled = false,
+  columnResizeEnabled = true,
+  frozenColumnCount = 0,
+  frozenEndColumnCount = 0,
+  tableMinWidth,
+  bodyMaxHeight = "min(60vh, 42rem)",
+  appearance,
   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
+  onResetColumnSizes,
+  onFrozenColumnCountChange,
+  onFrozenEndColumnCountChange,
+  onSort
 }) {
   const columnKeySignature = columns.map((column) => column.key).join("
");
-  const defaultColumnOrder = useMemo(() => columnKeySignature ? columnKeySignature.split("
") : [], [columnKeySignature]);
-  const [internalColumnOrder, setInternalColumnOrder] = useState(defaultColumnOrder);
-  const [internalColumnSizes, setInternalColumnSizes] = useState({});
+  const defaultOrder = useMemo(
+    () => columnKeySignature ? columnKeySignature.split("
") : [],
+    [columnKeySignature]
+  );
+  const defaultSizes = useMemo(
+    () => buildDefaultColumnSizes(columns, defaultColumnSizes),
+    [columns, defaultColumnSizes]
+  );
+  const [internalColumnOrder, setInternalColumnOrder] = useState(defaultOrder);
+  const [internalColumnSizes, setInternalColumnSizes] = useState(() => loadStoredColumnSizes(columnStorageKey, defaultSizes));
+  const [internalFrozenColumnCount, setInternalFrozenColumnCount] = useState(() => loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
+  const [internalFrozenEndColumnCount, setInternalFrozenEndColumnCount] = useState(() => loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
   useEffect(() => {
-    setInternalColumnOrder((current) => normalizeColumnOrder(defaultColumnOrder, current));
-  }, [defaultColumnOrder]);
-  const resolvedColumnOrder = columnOrder ? normalizeColumnOrder(defaultColumnOrder, columnOrder) : internalColumnOrder;
+    setInternalColumnOrder((current) => normalizeColumnOrder2(defaultOrder, current));
+  }, [defaultOrder]);
+  useEffect(() => {
+    if (columnSizes) return;
+    setInternalColumnSizes(loadStoredColumnSizes(columnStorageKey, defaultSizes));
+  }, [columnSizes, columnStorageKey, defaultSizes]);
+  useEffect(() => {
+    setInternalFrozenColumnCount(loadStoredFrozenColumnCount(columnStorageKey, frozenColumnCount, columns.length));
+  }, [columnStorageKey, columns.length, frozenColumnCount]);
+  useEffect(() => {
+    setInternalFrozenEndColumnCount(loadStoredFrozenEndColumnCount(columnStorageKey, frozenEndColumnCount, columns.length));
+  }, [columnStorageKey, columns.length, frozenEndColumnCount]);
+  const resolvedColumnOrder = columnOrder ? normalizeColumnOrder2(defaultOrder, columnOrder) : internalColumnOrder;
   const resolvedColumnSizes = columnSizes ?? internalColumnSizes;
+  const orderedColumns = getOrderedColumns2(columns, resolvedColumnOrder);
+  const {
+    startCount: resolvedFrozenColumnCount,
+    endCount: resolvedFrozenEndColumnCount
+  } = normalizeFrozenColumnCounts(internalFrozenColumnCount, internalFrozenEndColumnCount, orderedColumns.length);
+  const frozenOffsets = buildFrozenOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenColumnCount);
+  const frozenEndOffsets = buildFrozenEndOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenEndColumnCount);
+  const resolvedMinWidth = tableMinWidth ?? Math.max(760, orderedColumns.reduce((total, column) => total + getColumnNumericWidth(column, resolvedColumnSizes), 0));
+  const labels = {
+    columnActions: columnMenuLabels?.columnActions ?? "Column actions",
+    freezeColumn: columnMenuLabels?.freezeColumn ?? "Freeze to left",
+    freezeEndColumn: columnMenuLabels?.freezeEndColumn ?? "Freeze to right",
+    unfreezeColumn: columnMenuLabels?.unfreezeColumn ?? "Unfreeze from left",
+    unfreezeEndColumn: columnMenuLabels?.unfreezeEndColumn ?? "Unfreeze from right",
+    unfreezeAllColumns: columnMenuLabels?.unfreezeAllColumns ?? "Unfreeze all columns",
+    resetColumnWidth: columnMenuLabels?.resetColumnWidth ?? "Reset column width",
+    frozenColumnTitle: columnMenuLabels?.frozenColumnTitle ?? "Frozen column"
+  };
   const handleColumnOrderChange = useCallback((nextOrder, detail) => {
-    const normalizedOrder = normalizeColumnOrder(defaultColumnOrder, nextOrder);
+    const normalizedOrder = normalizeColumnOrder2(defaultOrder, nextOrder);
     if (!columnOrder) {
       setInternalColumnOrder(normalizedOrder);
     }
     onColumnOrderChange?.(normalizedOrder, detail);
-  }, [columnOrder, defaultColumnOrder, onColumnOrderChange]);
+  }, [columnOrder, defaultOrder, onColumnOrderChange]);
   const handleColumnSizeChange = useCallback((columnId, width, detail) => {
+    const column = columns.find((item) => item.key === columnId);
+    const minWidth = column?.minWidth;
+    const maxWidth = column?.maxWidth;
+    const nextWidth = Math.max(
+      typeof minWidth === "number" ? minWidth : 0,
+      Math.min(width, typeof maxWidth === "number" ? maxWidth : Number.POSITIVE_INFINITY)
+    );
+    const nextSizes = {
+      ...resolvedColumnSizes,
+      [columnId]: nextWidth
+    };
     if (!columnSizes) {
-      setInternalColumnSizes((current) => ({
-        ...current,
-        [columnId]: width
-      }));
+      setInternalColumnSizes(nextSizes);
     }
-    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(
+    persistColumnSizes(columnStorageKey, nextSizes);
+    onColumnSizeChange?.(columnId, nextWidth, detail);
+  }, [columnSizes, columnStorageKey, columns, onColumnSizeChange, resolvedColumnSizes]);
+  const handleResetColumnSize = useCallback((column) => {
+    const nextWidth = defaultSizes[column.key] ?? getColumnDefaultSize(column);
+    const previousWidth = getColumnNumericWidth(column, resolvedColumnSizes);
+    const nextSizes = {
+      ...resolvedColumnSizes,
+      [column.key]: nextWidth
+    };
+    if (!columnSizes) {
+      setInternalColumnSizes(nextSizes);
+    }
+    persistColumnSizes(columnStorageKey, nextSizes);
+    onColumnSizeChange?.(column.key, nextWidth, {
+      columnId: column.key,
+      previousWidth,
+      minWidth: column.minWidth,
+      maxWidth: column.maxWidth
+    });
+    onResetColumnSizes?.(nextSizes);
+  }, [columnSizes, columnStorageKey, defaultSizes, onColumnSizeChange, onResetColumnSizes, resolvedColumnSizes]);
+  const setFrozenColumnCount = useCallback((nextCount) => {
+    const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenEndColumnCount));
+    setInternalFrozenColumnCount(normalizedCount);
+    persistFrozenColumnCount(columnStorageKey, normalizedCount);
+    onFrozenColumnCountChange?.(normalizedCount);
+  }, [columnStorageKey, onFrozenColumnCountChange, orderedColumns.length, resolvedFrozenEndColumnCount]);
+  const setFrozenEndColumnCount = useCallback((nextCount) => {
+    const normalizedCount = clampFrozenColumnCount(nextCount, Math.max(0, orderedColumns.length - resolvedFrozenColumnCount));
+    setInternalFrozenEndColumnCount(normalizedCount);
+    persistFrozenEndColumnCount(columnStorageKey, normalizedCount);
+    onFrozenEndColumnCountChange?.(normalizedCount);
+  }, [columnStorageKey, onFrozenEndColumnCountChange, orderedColumns.length, resolvedFrozenColumnCount]);
+  const getFrozenPosition = (columnIndex) => {
+    if (columnIndex < resolvedFrozenColumnCount) return "start";
+    if (columnIndex >= orderedColumns.length - resolvedFrozenEndColumnCount) return "end";
+    return void 0;
+  };
+  const getFrozenClassName = (column, columnIndex, isHeader = false) => {
+    const position = getFrozenPosition(columnIndex);
+    if (!position) return void 0;
+    return cn(
+      "sticky",
+      position === "start" ? "shadow-[1px_0_0_0_hsl(var(--border)/0.45)]" : "shadow-[-1px_0_0_0_hsl(var(--border)/0.45)]",
+      isHeader ? "bg-muted/60" : "bg-inherit",
+      isHeader ? "z-40" : "z-20",
+      (columnIndex === 0 || columnIndex === orderedColumns.length - 1) && (isHeader ? "z-50" : "z-30")
+    );
+  };
+  const getFrozenStyle = (column, columnIndex) => {
+    const position = getFrozenPosition(columnIndex);
+    if (position === "start") return { left: frozenOffsets.get(column.key) ?? 0 };
+    if (position === "end") return { right: frozenEndOffsets.get(column.key) ?? 0 };
+    return void 0;
+  };
+  return /* @__PURE__ */ jsx(
     BaseTableContainer,
     {
       appearance,
-      className: cn("w-full overflow-hidden rounded-lg border border-border/40 bg-muted/15 dark:border-border/35 dark:bg-muted/10", classNames?.root, className),
+      className: cn("flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border/60 bg-card", classNames?.root, className),
       style,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("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(
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("min-h-0 flex-1 overflow-auto", classNames?.scrollArea),
+          style: { maxHeight: toCssSize3(bodyMaxHeight) },
+          children: /* @__PURE__ */ jsxs(
+            BaseTable,
+            {
+              appearance,
+              columnOrder: resolvedColumnOrder,
+              columnSizes: resolvedColumnSizes,
+              columnDragEnabled,
+              columnResizeEnabled,
+              onColumnOrderChange: handleColumnOrderChange,
+              onColumnSizeChange: handleColumnSizeChange,
+              className: cn("w-full table-fixed text-left text-xs", classNames?.table, tableClassName),
+              style: { minWidth: resolvedMinWidth },
+              children: [
+                /* @__PURE__ */ jsx("colgroup", { children: orderedColumns.map((column) => /* @__PURE__ */ jsx(
+                  "col",
+                  {
+                    style: {
+                      width: toCssSize3(resolvedColumnSizes[column.key] ?? column.width),
+                      minWidth: toCssSize3(column.minWidth)
+                    }
+                  },
+                  column.key
+                )) }),
+                /* @__PURE__ */ jsx(BaseTableHeader, { appearance, className: cn("border-b border-border/60 bg-muted/60 text-[11px] font-medium text-muted-foreground", classNames?.tableHeader), children: /* @__PURE__ */ jsx(BaseTableRow, { appearance, className: cn("hover:bg-transparent", classNames?.headerRow), children: orderedColumns.map((column, columnIndex) => {
+                  const headerContent = renderColumnHeader ? renderColumnHeader(column, { column, columnIndex, columns: orderedColumns, rows }) : column.label;
+                  const sortable = Boolean(column.sortable);
+                  const handleSort = sortable && onSort ? () => onSort(column.key, column) : void 0;
+                  const isFrozenStart = columnIndex < resolvedFrozenColumnCount;
+                  const isFrozenEnd = columnIndex >= orderedColumns.length - resolvedFrozenEndColumnCount;
+                  const isFrozen = isFrozenStart || isFrozenEnd;
+                  const isColumnAtDefaultWidth = getColumnNumericWidth(column, resolvedColumnSizes) === (defaultSizes[column.key] ?? getColumnDefaultSize(column));
+                  return /* @__PURE__ */ jsxs(BaseContextMenu, { modal: false, children: [
+                    /* @__PURE__ */ jsx(BaseContextMenuTrigger, { asChild: true, appearance, children: /* @__PURE__ */ jsx(
                       BaseTableHead,
                       {
                         appearance,
                         columnId: column.key,
                         align: column.align,
-                        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,
+                        description: column.description,
+                        trailing: isFrozen ? /* @__PURE__ */ jsx("span", { title: labels.frozenColumnTitle, className: "inline-flex h-5 w-5 items-center justify-center rounded text-primary", children: /* @__PURE__ */ jsx(PinIcon, { className: "h-3.5 w-3.5" }) }) : null,
                         sortable,
                         sortDirection: column.sortDirection,
                         sortLabel: column.sortLabel,
                         onSort: handleSort,
                         draggable: column.draggable,
-                        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,
+                        minWidth: column.minWidth,
+                        maxWidth: column.maxWidth,
                         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,
+                          "sticky top-0 h-9 whitespace-nowrap border-r border-border/50 bg-muted/60 px-2.5 py-2 backdrop-blur",
+                          getFrozenClassName(column, columnIndex, true),
                           column.headerClassName,
-                          column.renderType === "icon" && "pl-3 pr-1",
-                          followsRecordIcon && "pl-2",
+                          column.className,
                           classNames?.headerCell
                         ),
-                        style: {
-                          minWidth: typeof column.minWidth === "string" ? column.minWidth : void 0,
-                          maxWidth: typeof column.maxWidth === "string" ? column.maxWidth : void 0
+                        style: getFrozenStyle(column, columnIndex)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs(BaseContextMenuContent, { appearance, alignOffset: -4, className: "min-w-44", children: [
+                      /* @__PURE__ */ jsx(BaseContextMenuLabel, { appearance, children: labels.columnActions }),
+                      isFrozen ? /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          onSelect: () => {
+                            if (isFrozenEnd) setFrozenEndColumnCount(orderedColumns.length - columnIndex - 1);
+                            else setFrozenColumnCount(columnIndex);
+                          },
+                          children: isFrozenEnd ? labels.unfreezeEndColumn : labels.unfreezeColumn
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          onSelect: () => setFrozenColumnCount(columnIndex + 1),
+                          children: labels.freezeColumn
+                        }
+                      ),
+                      !isFrozen ? /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          onSelect: () => setFrozenEndColumnCount(orderedColumns.length - columnIndex),
+                          children: labels.freezeEndColumn
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          disabled: resolvedFrozenColumnCount === 0 && resolvedFrozenEndColumnCount === 0,
+                          onSelect: () => {
+                            setFrozenColumnCount(0);
+                            setFrozenEndColumnCount(0);
+                          },
+                          children: labels.unfreezeAllColumns
                         }
+                      ),
+                      /* @__PURE__ */ jsx(BaseContextMenuSeparator, { appearance }),
+                      /* @__PURE__ */ jsx(
+                        BaseContextMenuItem,
+                        {
+                          appearance,
+                          disabled: isColumnAtDefaultWidth,
+                          onSelect: () => handleResetColumnSize(column),
+                          children: labels.resetColumnWidth
+                        }
+                      )
+                    ] })
+                  ] }, column.key);
+                }) }) }),
+                /* @__PURE__ */ jsxs(BaseTableBody, { appearance, className: cn("divide-y divide-border/50", classNames?.body), children: [
+                  pinnedTopRows.map((row, rowIndex) => {
+                    const key = getPinnedTopRowKey(row, rowIndex);
+                    const resolvedRowClassName = resolveRowClassName(pinnedTopRowClassName, row, rowIndex);
+                    return /* @__PURE__ */ jsx(
+                      BaseTableRow,
+                      {
+                        appearance,
+                        className: cn("bg-card/95", classNames?.pinnedTopRow, resolvedRowClassName),
+                        children: orderedColumns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+                          BaseTableCell,
+                          {
+                            appearance,
+                            align: column.align,
+                            className: cn(
+                              "h-[52px] border-r border-border/50 px-2.5 py-1.5 align-middle",
+                              column.wrap ? "whitespace-normal" : "whitespace-nowrap",
+                              getFrozenClassName(column, columnIndex),
+                              column.cellClassName,
+                              classNames?.cell
+                            ),
+                            style: getFrozenStyle(column, columnIndex),
+                            children: /* @__PURE__ */ jsx(InteractiveTableCellContent, { wrap: column.wrap, children: renderPinnedTopCell ? renderPinnedTopCell(column, row, { row, rowIndex, column, columnIndex, isPinnedTopRow: true }) : renderDefaultCell(column, row) })
+                          },
+                          `pinned-${key}-${column.key}`
+                        ))
                       },
-                      column.key
+                      `pinned-${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) => {
+                  }),
+                  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;
+                    const state = getRowState?.(row, rowIndex) || {};
+                    const resolvedRowClassName = resolveRowClassName(rowClassName, row, rowIndex);
                     return /* @__PURE__ */ jsx(
                       BaseTableRow,
                       {
                         appearance,
-                        interactive: Boolean(onRowClick) && !disabled,
-                        selected,
-                        disabled,
+                        interactive: Boolean(onRowClick) && !state.disabled,
+                        selected: state.selected,
+                        disabled: state.disabled,
                         onClick: () => {
-                          if (!disabled) {
-                            onRowClick?.(row, rowIndex);
-                          }
+                          if (!state.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",
+                          "min-h-[52px] bg-card transition-colors",
+                          state.saving && "bg-primary/5",
+                          state.pending && "opacity-80",
+                          onRowClick && !state.disabled ? "cursor-pointer hover:bg-muted/30" : "hover:bg-muted/30",
                           classNames?.row,
                           resolvedRowClassName
                         ),
-                        children: orderedColumns.map((column, columnIndex) => {
-                          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}`
-                          );
-                        })
+                        children: orderedColumns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+                          BaseTableCell,
+                          {
+                            appearance,
+                            align: column.align,
+                            className: cn(
+                              "h-[52px] border-r border-border/50 px-2.5 py-1.5 align-middle",
+                              column.wrap ? "whitespace-normal" : "whitespace-nowrap",
+                              getFrozenClassName(column, columnIndex),
+                              column.cellClassName,
+                              classNames?.cell
+                            ),
+                            style: getFrozenStyle(column, columnIndex),
+                            children: /* @__PURE__ */ jsx(InteractiveTableCellContent, { wrap: column.wrap, children: renderCell ? renderCell(column, row, { row, rowIndex, column, columnIndex, isPinnedTopRow: false }) : renderDefaultCell(column, row) })
+                          },
+                          `${key}-${column.key}`
+                        ))
                       },
                       key
                     );
-                  }) : /* @__PURE__ */ jsx(
+                  }) : pinnedTopRows.length ? null : /* @__PURE__ */ jsx(
                     BaseTableEmpty,
                     {
                       appearance,
                       colSpan: Math.max(orderedColumns.length, 1),
-                      classNames: { cell: "px-4 py-10 text-center text-sm text-muted-foreground" },
+                      className: classNames?.empty,
                       children: emptyState
                     }
-                  ) })
-                ]
-              }
-            )
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function InteractiveTableEditableTextCell({
+  value,
+  placeholder,
+  disabled,
+  multiline = false,
+  commitOnBlur = true,
+  className,
+  inputClassName,
+  onCommit
+}) {
+  const initialValue = String(value || "");
+  const [draft, setDraft] = useState(initialValue);
+  useEffect(() => {
+    setDraft(initialValue);
+  }, [initialValue]);
+  const commit = useCallback(async () => {
+    const nextValue = String(draft || "").trim();
+    const previousValue = String(initialValue || "").trim();
+    if (nextValue === previousValue) return;
+    try {
+      await onCommit?.(nextValue);
+    } catch {
+      setDraft(initialValue);
+    }
+  }, [draft, initialValue, onCommit]);
+  const controlClassName = cn(
+    "w-full resize-none rounded-sm border border-transparent bg-transparent px-1.5 py-1 text-xs text-foreground outline-none transition-colors",
+    "placeholder:text-muted-foreground/70 hover:border-border/60 hover:bg-background focus:border-primary/45 focus:bg-background",
+    multiline ? "min-h-[42px] leading-5" : "h-8",
+    disabled && "cursor-not-allowed text-muted-foreground hover:border-transparent hover:bg-transparent",
+    inputClassName
+  );
+  if (multiline) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(controlClassName, className),
+        disabled,
+        value: draft,
+        placeholder,
+        onChange: (event) => setDraft(event.target.value),
+        onBlur: () => {
+          if (commitOnBlur) void commit();
+        },
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.currentTarget.blur();
           }
-        ),
-        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
-      ]
+          if (event.key === "Escape") {
+            setDraft(initialValue);
+            event.currentTarget.blur();
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: cn(controlClassName, className),
+      disabled,
+      value: draft,
+      placeholder,
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => {
+        if (commitOnBlur) void commit();
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+        if (event.key === "Escape") {
+          setDraft(initialValue);
+          event.currentTarget.blur();
+        }
+      }
     }
   );
 }
+function InteractiveTableReadonlyCell({
+  children,
+  mono = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 text-xs text-muted-foreground", mono && "font-mono", className), children: hasRenderableNode(children) ? children : "\u2014" });
+}
+function InteractiveTableSelectCell({
+  value,
+  options,
+  disabled,
+  ariaLabel,
+  children,
+  className,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full items-center", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": ariaLabel,
+        disabled,
+        value,
+        onChange: (event) => onChange?.(event.target.value),
+        className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    )
+  ] });
+}
 var imageExtPattern = /\.(png|jpe?g|webp|gif|svg|bmp|avif)$/i;
 var audioExtPattern = /\.(wav|mp3|ogg|m4a|flac|aac)$/i;
 var isLikelyUrl = (value) => /^https?:\/\//i.test(String(value || ""));
@@ -5496,7 +6883,174 @@ function WorkbenchGalleryView({
     }
   );
 }
+function toCssSize4(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function defaultGetRowId(row, rowIndex) {
+  return String(row?.id ?? row?.key ?? rowIndex);
+}
+function defaultGetColumnId(row) {
+  return String(row?.columnId ?? row?.status ?? "");
+}
+function defaultRenderCard(row) {
+  const value = row?.title ?? row?.name ?? row?.id ?? "Untitled";
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border/70 bg-card px-3 py-2 text-sm text-foreground shadow-sm", children: String(value) });
+}
+function WorkbenchLaneDraggableCard({
+  row,
+  rowId,
+  rowIndex,
+  column,
+  classNames,
+  renderCard
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: rowId });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      className: cn("touch-none", classNames?.cardWrapper),
+      children: renderCard(row, { row, rowIndex, column, isDragging, isOverlay: false })
+    }
+  );
+}
+function WorkbenchLaneColumnView({
+  column,
+  columnRows,
+  columnWidth,
+  columnMinHeight,
+  emptyColumn,
+  classNames,
+  renderCard
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: column.id });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex shrink-0 flex-col rounded-xl border border-border/60 bg-card p-2 shadow-sm",
+        classNames?.column,
+        column.className
+      ),
+      style: { width: toCssSize4(columnWidth) ?? "280px" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex h-10 items-center gap-2 px-1", classNames?.columnHeader, column.headerClassName), children: [
+          column.icon ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex h-4 w-4 items-center justify-center text-muted-foreground", classNames?.columnIcon, column.iconClassName), children: column.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center rounded px-2 py-0.5 text-xs font-semibold bg-muted text-muted-foreground", classNames?.columnBadge, column.badgeClassName), children: column.label ?? column.id }),
+          /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", classNames?.columnCount), children: columnRows.length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setNodeRef,
+            className: cn(
+              "mt-1 flex min-h-[200px] flex-1 flex-col gap-2 overflow-y-auto rounded-lg p-1 transition-colors [scrollbar-width:thin]",
+              isOver && "bg-accent/60",
+              classNames?.columnBody,
+              column.bodyClassName
+            ),
+            style: { minHeight: toCssSize4(columnMinHeight) },
+            children: columnRows.length ? columnRows.map(({ row, rowIndex, rowId }) => /* @__PURE__ */ jsx(
+              WorkbenchLaneDraggableCard,
+              {
+                row,
+                rowId,
+                rowIndex,
+                column,
+                classNames,
+                renderCard
+              },
+              rowId
+            )) : emptyColumn ? /* @__PURE__ */ jsx("div", { className: cn("flex min-h-24 items-center justify-center rounded-lg border border-dashed border-border/60 px-3 py-4 text-xs text-muted-foreground", classNames?.emptyColumn), children: emptyColumn }) : null
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkbenchLaneView({
+  rows = [],
+  columns = [],
+  getRowId = defaultGetRowId,
+  getColumnId = defaultGetColumnId,
+  renderCard = defaultRenderCard,
+  renderOverlayCard,
+  onMoveRow,
+  emptyColumn,
+  activationDistance = 5,
+  columnWidth = 280,
+  columnMinHeight,
+  className,
+  classNames,
+  style
+}) {
+  const [activeRowId, setActiveRowId] = useState(null);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: activationDistance } }));
+  const columnMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+  const rowEntries = useMemo(() => rows.map((row, rowIndex) => ({
+    row,
+    rowIndex,
+    rowId: getRowId(row, rowIndex),
+    columnId: getColumnId(row, rowIndex)
+  })), [getColumnId, getRowId, rows]);
+  const activeEntry = activeRowId ? rowEntries.find((entry) => entry.rowId === activeRowId) : void 0;
+  const rowsByColumn = useMemo(() => {
+    const next = /* @__PURE__ */ new Map();
+    columns.forEach((column) => next.set(column.id, []));
+    rowEntries.forEach(({ row, rowIndex, rowId, columnId }) => {
+      next.get(columnId)?.push({ row, rowIndex, rowId });
+    });
+    return next;
+  }, [columns, rowEntries]);
+  const activeColumn = activeEntry ? columnMap.get(activeEntry.columnId) : void 0;
+  const handleDragStart = useCallback((event) => {
+    setActiveRowId(String(event.active.id));
+  }, []);
+  const handleDragEnd = useCallback((event) => {
+    setActiveRowId(null);
+    const rowId = String(event.active.id);
+    const nextColumnId = String(event.over?.id ?? "");
+    const activeRow = rowEntries.find((entry) => entry.rowId === rowId);
+    if (!activeRow || !columnMap.has(nextColumnId) || activeRow.columnId === nextColumnId) return;
+    onMoveRow?.(rowId, nextColumnId, activeRow.row);
+  }, [columnMap, onMoveRow, rowEntries]);
+  const handleDragCancel = useCallback(() => {
+    setActiveRowId(null);
+  }, []);
+  return /* @__PURE__ */ jsxs(DndContext, { sensors, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex min-h-0 flex-1 gap-4 overflow-x-auto p-4 [scrollbar-width:thin]", classNames?.root, className),
+        style,
+        children: columns.map((column) => /* @__PURE__ */ jsx(
+          WorkbenchLaneColumnView,
+          {
+            column,
+            columnRows: rowsByColumn.get(column.id) || [],
+            columnWidth,
+            columnMinHeight,
+            emptyColumn,
+            classNames,
+            renderCard
+          },
+          column.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(DragOverlay, { children: activeEntry && activeColumn ? /* @__PURE__ */ jsx("div", { className: cn(classNames?.overlayWrapper), children: (renderOverlayCard || renderCard)(activeEntry.row, {
+      row: activeEntry.row,
+      rowIndex: activeEntry.rowIndex,
+      column: activeColumn,
+      isDragging: false,
+      isOverlay: true
+    }) }) : null })
+  ] });
+}
 
-export { WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView };
+export { InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map