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

package/dist/components/base/index.js

@@ -385,7 +385,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: {
@@ -459,7 +493,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"
@@ -510,7 +549,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 = {
@@ -554,7 +598,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",
@@ -596,7 +642,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: {
@@ -633,7 +681,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",
@@ -671,7 +721,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",
@@ -713,7 +765,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 = {
@@ -755,7 +809,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",
@@ -795,7 +852,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: {
@@ -836,7 +895,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 = {
@@ -878,7 +940,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",
@@ -914,7 +980,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",
@@ -975,7 +1044,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",
@@ -1104,7 +1179,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 = {
@@ -2962,6 +3043,432 @@ var BaseInput = react.forwardRef(
     );
   }
 );
+var DEFAULT_SPLIT_SIZE = 50;
+var DEFAULT_MIN_SIZE = 20;
+var DEFAULT_MAX_SIZE = 80;
+var DEFAULT_KEYBOARD_STEP = 2.5;
+function toCssSize(value, fallback) {
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value < 0) {
+      throw new Error("BaseLayout size and gap props must be finite, non-negative numbers.");
+    }
+    return `${value}px`;
+  }
+  return value ?? fallback;
+}
+function assertPercent(name, value) {
+  if (!Number.isFinite(value)) {
+    throw new Error(`BaseLayoutSplit ${name} must be a finite number.`);
+  }
+  if (value < 0 || value > 100) {
+    throw new Error(`BaseLayoutSplit ${name} must be between 0 and 100.`);
+  }
+  return value;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function resolveSplitBounds({
+  minSize = DEFAULT_MIN_SIZE,
+  maxSize = DEFAULT_MAX_SIZE,
+  keyboardStep = DEFAULT_KEYBOARD_STEP
+}) {
+  const min = assertPercent("minSize", minSize);
+  const max = assertPercent("maxSize", maxSize);
+  if (min > max) {
+    throw new Error("BaseLayoutSplit minSize cannot be greater than maxSize.");
+  }
+  if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {
+    throw new Error("BaseLayoutSplit keyboardStep must be a finite positive number.");
+  }
+  return { min, max, keyboardStep };
+}
+function resolveSplitSize(name, value, fallback, min, max) {
+  return clamp(assertPercent(name, value ?? fallback), min, max);
+}
+function getSeparatorOrientation(orientation) {
+  return orientation === "horizontal" ? "vertical" : "horizontal";
+}
+function BaseLayout({
+  header,
+  sidebar,
+  aside,
+  footer,
+  children,
+  sidebarSize,
+  asideSize,
+  gap,
+  fullHeight,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...layoutProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const hasHeader = hasRenderableNode(header);
+  const hasSidebar = hasRenderableNode(sidebar);
+  const hasAside = hasRenderableNode(aside);
+  const hasFooter = hasRenderableNode(footer);
+  const bodyColumns = [
+    hasSidebar ? "var(--base-layout-sidebar-size)" : void 0,
+    "minmax(0, 1fr)",
+    hasAside ? "var(--base-layout-aside-size)" : void 0
+  ].filter(Boolean).join(" ");
+  const layoutRows = [
+    hasHeader ? "auto" : void 0,
+    "minmax(0, 1fr)",
+    hasFooter ? "auto" : void 0
+  ].filter(Boolean).join(" ");
+  const resolvedGap = gap !== void 0 ? toCssSize(gap, "0px") : void 0;
+  const layoutStyle = {
+    ...theme.styles.layout,
+    "--base-layout-sidebar-size": toCssSize(sidebarSize, "16rem"),
+    "--base-layout-aside-size": toCssSize(asideSize, "20rem"),
+    gridTemplateRows: layoutRows,
+    ...resolvedGap !== void 0 ? { gap: resolvedGap } : {},
+    ...style
+  };
+  const bodyStyle = {
+    ...theme.styles.layoutBody,
+    gridTemplateColumns: bodyColumns,
+    ...resolvedGap !== void 0 ? { gap: resolvedGap } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...layoutProps,
+      className: cn(
+        theme.slots.layoutRoot,
+        fullHeight && theme.slots.layoutRootFull,
+        classNames?.root,
+        className
+      ),
+      style: layoutStyle,
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(theme.slots.layoutHeader, classNames?.header),
+            style: theme.styles.layoutHeader,
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(theme.slots.layoutBody, classNames?.body),
+            style: bodyStyle,
+            children: [
+              hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
+                "aside",
+                {
+                  className: cn(theme.slots.layoutSidebar, classNames?.sidebar),
+                  style: theme.styles.layoutSidebar,
+                  children: sidebar
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "main",
+                {
+                  className: cn(theme.slots.layoutMain, classNames?.main),
+                  style: theme.styles.layoutMain,
+                  children
+                }
+              ),
+              hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
+                "aside",
+                {
+                  className: cn(theme.slots.layoutAside, classNames?.aside),
+                  style: theme.styles.layoutAside,
+                  children: aside
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasFooter ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(theme.slots.layoutFooter, classNames?.footer),
+            style: theme.styles.layoutFooter,
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function BaseLayoutPane({
+  as = "div",
+  scrollable = false,
+  bordered = true,
+  surface = "default",
+  children,
+  appearance,
+  className,
+  classNames,
+  style,
+  ...paneProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const Component = as;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...paneProps,
+      className: cn(
+        theme.slots.layoutPane,
+        scrollable && theme.slots.layoutPaneScrollable,
+        bordered && theme.slots.layoutPaneBordered,
+        surface === "muted" && theme.slots.layoutPaneMuted,
+        surface === "soft" && theme.slots.layoutPaneSoft,
+        surface === "transparent" && theme.slots.layoutPaneTransparent,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.layoutPane,
+        ...style
+      },
+      children
+    }
+  );
+}
+function BaseLayoutResizeHandle({
+  orientation = "horizontal",
+  resizable = false,
+  disabled = false,
+  size,
+  minSize,
+  maxSize,
+  label = "Resize panels",
+  appearance,
+  className,
+  classNames,
+  style,
+  tabIndex,
+  ...handleProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const interactive = resizable && !disabled;
+  const separatorOrientation = getSeparatorOrientation(orientation);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...handleProps,
+      role: interactive ? "separator" : void 0,
+      "aria-label": interactive ? label : void 0,
+      "aria-orientation": interactive ? separatorOrientation : void 0,
+      "aria-valuemin": interactive ? minSize : void 0,
+      "aria-valuemax": interactive ? maxSize : void 0,
+      "aria-valuenow": interactive ? size : void 0,
+      "aria-disabled": interactive ? void 0 : true,
+      tabIndex: interactive ? tabIndex ?? 0 : void 0,
+      className: cn(
+        theme.slots.layoutResizeHandle,
+        orientation === "horizontal" ? theme.slots.layoutResizeHandleHorizontal : theme.slots.layoutResizeHandleVertical,
+        !interactive && theme.slots.layoutResizeHandleDisabled,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.layoutResizeHandle,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            theme.slots.layoutResizeHandleIndicator,
+            orientation === "horizontal" ? "h-8 w-px" : "h-px w-8",
+            classNames?.indicator
+          )
+        }
+      )
+    }
+  );
+}
+function BaseLayoutSplit({
+  orientation = "horizontal",
+  primary,
+  secondary,
+  children,
+  resizable = false,
+  size,
+  defaultSize,
+  minSize,
+  maxSize,
+  gap,
+  keyboardStep,
+  resizeLabel,
+  appearance,
+  className,
+  classNames,
+  style,
+  onSizeChange,
+  ...splitProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  const bounds = resolveSplitBounds({ minSize, maxSize, keyboardStep });
+  const initialSize = resolveSplitSize(
+    "defaultSize",
+    defaultSize,
+    DEFAULT_SPLIT_SIZE,
+    bounds.min,
+    bounds.max
+  );
+  const [uncontrolledSize, setUncontrolledSize] = react.useState(initialSize);
+  const rootRef = react.useRef(null);
+  const cleanupRef = react.useRef(null);
+  const controlled = size !== void 0;
+  const renderedSize = resolveSplitSize(
+    "size",
+    controlled ? size : uncontrolledSize,
+    initialSize,
+    bounds.min,
+    bounds.max
+  );
+  const commitSize = react.useCallback(
+    (nextSize) => {
+      const clampedSize = clamp(nextSize, bounds.min, bounds.max);
+      if (!controlled) {
+        setUncontrolledSize(clampedSize);
+      }
+      onSizeChange?.(clampedSize);
+    },
+    [bounds.max, bounds.min, controlled, onSizeChange]
+  );
+  const updateFromPointer = react.useCallback(
+    (event) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const rect = root.getBoundingClientRect();
+      const total = orientation === "horizontal" ? rect.width : rect.height;
+      if (total <= 0) return;
+      const offset = orientation === "horizontal" ? event.clientX - rect.left : event.clientY - rect.top;
+      commitSize(offset / total * 100);
+    },
+    [commitSize, orientation]
+  );
+  const stopResize = react.useCallback(() => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+  }, []);
+  react.useEffect(() => stopResize, [stopResize]);
+  const handlePointerDown = (event) => {
+    if (!resizable) return;
+    event.preventDefault();
+    stopResize();
+    updateFromPointer(event);
+    const handleMove = (nextEvent) => {
+      updateFromPointer(nextEvent);
+    };
+    const handleStop = () => {
+      stopResize();
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleStop, { once: true });
+    window.addEventListener("pointercancel", handleStop, { once: true });
+    cleanupRef.current = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleStop);
+      window.removeEventListener("pointercancel", handleStop);
+    };
+  };
+  const handleKeyDown = (event) => {
+    if (!resizable) return;
+    const step = event.shiftKey ? bounds.keyboardStep * 4 : bounds.keyboardStep;
+    let nextSize;
+    if (event.key === "Home") nextSize = bounds.min;
+    if (event.key === "End") nextSize = bounds.max;
+    if (orientation === "horizontal" && event.key === "ArrowLeft") {
+      nextSize = renderedSize - step;
+    }
+    if (orientation === "horizontal" && event.key === "ArrowRight") {
+      nextSize = renderedSize + step;
+    }
+    if (orientation === "vertical" && event.key === "ArrowUp") {
+      nextSize = renderedSize - step;
+    }
+    if (orientation === "vertical" && event.key === "ArrowDown") {
+      nextSize = renderedSize + step;
+    }
+    if (nextSize === void 0) return;
+    event.preventDefault();
+    commitSize(nextSize);
+  };
+  const resolvedGap = gap !== void 0 ? toCssSize(gap, "0px") : void 0;
+  const resizeTrack = resolvedGap !== void 0 ? "var(--base-layout-split-gap)" : "auto";
+  const resizeHandleStyle = resolvedGap !== void 0 ? orientation === "horizontal" ? { width: "var(--base-layout-split-gap)" } : { height: "var(--base-layout-split-gap)" } : void 0;
+  const splitStyle = {
+    ...theme.styles.layoutSplit,
+    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: resizable ? `${renderedSize}% ${resizeTrack} minmax(0, 1fr)` : `${renderedSize}% minmax(0, 1fr)`,
+    ...resizable ? { gap: 0 } : {},
+    ...resolvedGap !== void 0 ? {
+      "--base-layout-split-gap": resolvedGap,
+      ...resizable ? {} : { gap: resolvedGap }
+    } : {},
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...splitProps,
+      ref: rootRef,
+      className: cn(
+        theme.slots.layoutSplitRoot,
+        orientation === "horizontal" ? theme.slots.layoutSplitHorizontal : theme.slots.layoutSplitVertical,
+        classNames?.root,
+        className
+      ),
+      style: splitStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              theme.slots.layoutSplitPane,
+              theme.slots.layoutSplitPrimary,
+              classNames?.primary
+            ),
+            style: theme.styles.layoutSplitPane,
+            children: hasRenderableNode(primary) ? primary : children
+          }
+        ),
+        resizable ? /* @__PURE__ */ jsxRuntime.jsx(
+          BaseLayoutResizeHandle,
+          {
+            orientation,
+            resizable: true,
+            size: renderedSize,
+            minSize: bounds.min,
+            maxSize: bounds.max,
+            label: resizeLabel,
+            appearance,
+            className: classNames?.handle,
+            style: resizeHandleStyle,
+            onPointerDown: handlePointerDown,
+            onKeyDown: handleKeyDown
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              theme.slots.layoutSplitPane,
+              theme.slots.layoutSplitSecondary,
+              classNames?.secondary
+            ),
+            style: theme.styles.layoutSplitPane,
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
 function DefaultLoadingIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -3251,7 +3758,7 @@ function BasePagination({
 function toFiniteNumber(value, fallback) {
   return Number.isFinite(value) ? Number(value) : fallback;
 }
-function clamp(value, min, max) {
+function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function BaseProgress({
@@ -3269,7 +3776,7 @@ function BaseProgress({
 }) {
   const theme = resolveBaseAppearance(appearance);
   const safeMax = Math.max(toFiniteNumber(max, 100), 1);
-  const safeValue = clamp(toFiniteNumber(value, 0), 0, safeMax);
+  const safeValue = clamp2(toFiniteNumber(value, 0), 0, safeMax);
   const percent = safeValue / safeMax * 100;
   const renderedValue = valueFormatter?.(safeValue, safeMax) ?? `${Math.round(percent)}%`;
   const hasLabelRow = hasRenderableNode(label) || showValue;
@@ -4035,7 +4542,7 @@ function useBaseTableContext(appearance) {
     }
   };
 }
-function toCssSize(value) {
+function toCssSize2(value) {
   if (value === void 0) return void 0;
   return typeof value === "number" ? `${value}px` : value;
 }
@@ -4248,7 +4755,7 @@ function BaseTableRow({
     }
   );
 }
-function BaseTableHead({
+var BaseTableHead = react.forwardRef(function BaseTableHead2({
   columnId,
   align = "left",
   icon,
@@ -4276,10 +4783,18 @@ function BaseTableHead({
   onDragOver,
   onDrop,
   ...headProps
-}) {
+}, forwardedRef) {
   const tableContext = useBaseTableContext(appearance);
   const { theme } = tableContext;
   const headRef = react.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
@@ -4434,7 +4949,7 @@ function BaseTableHead({
     "th",
     {
       ...headProps,
-      ref: headRef,
+      ref: setHeadRef,
       scope: headProps.scope ?? "col",
       "aria-sort": ariaSort,
       className: cn(
@@ -4446,9 +4961,9 @@ function BaseTableHead({
       ),
       style: {
         ...theme.styles.tableHead,
-        width: toCssSize(controlledWidth),
-        minWidth: toCssSize(minWidth),
-        maxWidth: toCssSize(maxWidth),
+        width: toCssSize2(controlledWidth),
+        minWidth: toCssSize2(minWidth),
+        maxWidth: toCssSize2(maxWidth),
         ...style
       },
       onDragOver: handleDragOver,
@@ -4469,7 +4984,7 @@ function BaseTableHead({
       ]
     }
   );
-}
+});
 function BaseTableCell({
   align = "left",
   appearance,
@@ -4597,7 +5112,7 @@ function BaseTableLoading({
                 classNames?.skeleton
               ),
               style: {
-                width: toCssSize(columnWidths[columnIndex])
+                width: toCssSize2(columnWidths[columnIndex])
               }
             }
           )
@@ -4928,6 +5443,10 @@ exports.BaseDropdownMenu = BaseDropdownMenu;
 exports.BaseEmptyState = BaseEmptyState;
 exports.BaseField = BaseField;
 exports.BaseInput = BaseInput;
+exports.BaseLayout = BaseLayout;
+exports.BaseLayoutPane = BaseLayoutPane;
+exports.BaseLayoutResizeHandle = BaseLayoutResizeHandle;
+exports.BaseLayoutSplit = BaseLayoutSplit;
 exports.BaseLoadingState = BaseLoadingState;
 exports.BaseNotice = BaseNotice;
 exports.BasePagination = BasePagination;