@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Resizable/index.mjs

@@ -1,8 +1,1568 @@
-export { DEFAULT_MAX_SIZE, DEFAULT_MIN_SIZE, LONG_PRESS_THRESHOLD, ResizableHandle, ResizableHandlePropsSchema, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupPropsSchema, ResizablePanelPropsSchema, ResizePresetSchema, resizableGripVariants, resizableHandleVariants, useResizableContext } from '../../chunk-EP4WOI5D.mjs';
-import '../../chunk-A3YUJA6W.mjs';
-import '../../chunk-BDXKKMBZ.mjs';
-import '../../chunk-FPKEAJRZ.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
+"use client";
+import { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, memo, useId, useCallback, useContext } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+import { cva } from 'class-variance-authority';
+import { Loader2, Zap, Minus, Plus, X, GripVertical, GripHorizontal } from 'lucide-react';
+import { Button as Button$1, NumberField as NumberField$1, Label, Group, Input, Text, FieldError, DialogTrigger, Popover, Dialog } from 'react-aria-components';
+
+// src/elements/Resizable/components/ResizablePanelGroup.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var ResizableContext = createContext(
+  null
+);
+ResizableContext.displayName = "ResizableContext";
+function useResizableContext() {
+  const context = useContext(ResizableContext);
+  if (!context) {
+    throw new Error(
+      "useResizableContext must be used within a ResizablePanelGroup. Make sure ResizablePanel and ResizableHandle are children of ResizablePanelGroup."
+    );
+  }
+  return context;
+}
+function useResizableProvider({
+  direction,
+  groupLabel,
+  sizes: controlledSizes,
+  onSizesChange
+}) {
+  const [internalSizes, setInternalSizes] = useState([]);
+  const [panels, setPanels] = useState([]);
+  const containerRef = useRef(null);
+  const liveRegionRef = useRef(null);
+  const announceTimeoutRef = useRef(null);
+  const sizesInitializedRef = useRef(false);
+  const isControlled = controlledSizes !== void 0;
+  const sizes = isControlled ? controlledSizes : internalSizes;
+  const setSizes = useCallback(
+    (newSizes) => {
+      if (isControlled) {
+        onSizesChange?.(newSizes);
+      } else {
+        setInternalSizes(newSizes);
+      }
+    },
+    [isControlled, onSizesChange]
+  );
+  const registerPanel = useCallback((index, info) => {
+    setPanels((prev) => {
+      const newPanels = [...prev];
+      newPanels[index] = info;
+      return newPanels;
+    });
+  }, []);
+  const unregisterPanel = useCallback((index) => {
+    setPanels((prev) => {
+      const newPanels = [...prev];
+      delete newPanels[index];
+      return newPanels.filter(Boolean);
+    });
+  }, []);
+  useEffect(() => {
+    if (isControlled || sizesInitializedRef.current) return;
+    const registeredPanels = panels.filter(Boolean);
+    const panelCount = registeredPanels.length;
+    if (panelCount < 2) return;
+    const needsInit = sizes.length < panelCount || sizes.some((s) => s === void 0);
+    if (needsInit) {
+      const newSizes = [];
+      const equalSize = 100 / panelCount;
+      for (let i = 0; i < panelCount; i++) {
+        newSizes[i] = equalSize;
+      }
+      sizesInitializedRef.current = true;
+      setInternalSizes(newSizes);
+    }
+  }, [panels, sizes, isControlled]);
+  useEffect(() => {
+    return () => {
+      if (announceTimeoutRef.current) {
+        clearTimeout(announceTimeoutRef.current);
+      }
+      if (liveRegionRef.current) {
+        document.body.removeChild(liveRegionRef.current);
+        liveRegionRef.current = null;
+      }
+    };
+  }, []);
+  const announce = useCallback((message) => {
+    if (!liveRegionRef.current) {
+      const liveRegion = document.createElement("div");
+      liveRegion.setAttribute("aria-live", "polite");
+      liveRegion.setAttribute("aria-atomic", "true");
+      liveRegion.className = "sr-only";
+      liveRegion.style.cssText = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;";
+      document.body.appendChild(liveRegion);
+      liveRegionRef.current = liveRegion;
+    }
+    liveRegionRef.current.textContent = message;
+    if (announceTimeoutRef.current) {
+      clearTimeout(announceTimeoutRef.current);
+    }
+    announceTimeoutRef.current = setTimeout(() => {
+      if (liveRegionRef.current) {
+        liveRegionRef.current.textContent = "";
+      }
+    }, 1e3);
+  }, []);
+  return {
+    direction,
+    groupLabel,
+    sizes,
+    setSizes,
+    panels,
+    registerPanel,
+    unregisterPanel,
+    announce,
+    containerRef
+  };
+}
+var ResizablePanelGroup = forwardRef(function ResizablePanelGroup2({ direction, groupLabel, sizes, onSizesChange, className, children }, ref) {
+  const contextValue = useResizableProvider({
+    direction,
+    groupLabel,
+    sizes,
+    onSizesChange
+  });
+  useImperativeHandle(
+    ref,
+    () => contextValue.containerRef.current,
+    [contextValue.containerRef]
+  );
+  return /* @__PURE__ */ jsx(ResizableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contextValue.containerRef,
+      role: "group",
+      "aria-label": `${groupLabel}, ${direction}`,
+      "data-direction": direction,
+      className: cn(
+        "flex h-full w-full",
+        direction === "horizontal" ? "flex-row" : "flex-col",
+        className
+      ),
+      children
+    }
+  ) });
+});
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+var DEFAULT_MIN_SIZE = 10;
+var DEFAULT_MAX_SIZE = 90;
+var LONG_PRESS_THRESHOLD = 300;
+var ResizePresetSchema = z.object({
+  label: z.string().min(1),
+  sizes: z.array(z.number().min(0).max(100))
+});
+var ResizablePanelGroupPropsSchema = z.object({
+  /** Layout direction */
+  direction: z.enum(["horizontal", "vertical"]),
+  /** REQUIRED: Label for screen reader identification of this group */
+  groupLabel: z.string().min(1),
+  /** Controlled mode: current sizes as percentages */
+  sizes: z.array(z.number().min(0).max(100)).optional(),
+  /** Callback when sizes change */
+  onSizesChange: z.function().optional(),
+  /** Additional CSS classes */
+  className: z.string().optional(),
+  /** Panel children */
+  children: z.custom()
+});
+var ResizablePanelPropsSchema = z.object({
+  /** REQUIRED: Name for screen reader identification */
+  name: z.string().min(1),
+  /** Default size as percentage (auto-distributes equally if omitted) */
+  defaultSize: z.number().min(0).max(100).optional(),
+  /** Minimum size as percentage */
+  minSize: z.number().min(0).max(100).optional().default(DEFAULT_MIN_SIZE),
+  /** Maximum size as percentage */
+  maxSize: z.number().min(0).max(100).optional().default(DEFAULT_MAX_SIZE),
+  /** Whether panel can collapse to 0% */
+  collapsible: z.boolean().optional().default(false),
+  /** Callback when panel collapses */
+  onCollapse: z.function().optional(),
+  /** Callback when panel expands from collapsed */
+  onExpand: z.function().optional(),
+  /** Callback when panel resizes */
+  onResize: z.function().optional(),
+  /** Additional CSS classes */
+  className: z.string().optional(),
+  /** Panel content */
+  children: z.custom()
+});
+var ResizableHandlePropsSchema = z.object({
+  /** Whether to show the visual grip indicator */
+  withHandle: z.boolean().optional().default(true),
+  /** Size presets for quick adjustment */
+  presets: z.array(ResizePresetSchema).optional(),
+  /** Whether the handle is disabled */
+  disabled: z.boolean().optional().default(false),
+  /** Additional CSS classes */
+  className: z.string().optional()
+});
+var resizableHandleVariants = cva(
+  [
+    // Base styles - 44px touch target
+    "relative flex items-center justify-center",
+    "shrink-0",
+    "bg-transparent",
+    "transition-colors duration-150",
+    // Focus styles
+    "focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+    // Touch target padding for accessibility
+    "touch-none select-none"
+  ],
+  {
+    variants: {
+      direction: {
+        horizontal: [
+          "w-3 min-w-[12px]",
+          "cursor-col-resize",
+          "hover:bg-[var(--accent)]/50",
+          // Ensure 44px touch target via padding
+          "before:absolute before:inset-y-0 before:-inset-x-4",
+          "before:min-w-[44px]"
+        ],
+        vertical: [
+          "h-3 min-h-[12px]",
+          "cursor-row-resize",
+          "hover:bg-[var(--accent)]/50",
+          // Ensure 44px touch target via padding
+          "before:absolute before:inset-x-0 before:-inset-y-4",
+          "before:min-h-[44px]"
+        ]
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50 pointer-events-none",
+        false: ""
+      },
+      isDragging: {
+        true: "bg-[var(--accent)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      direction: "horizontal",
+      disabled: false,
+      isDragging: false
+    }
+  }
+);
+var resizableGripVariants = cva(
+  [
+    "flex items-center justify-center",
+    "rounded-full",
+    "bg-[var(--border)]",
+    "text-[var(--menu-muted)]"
+  ],
+  {
+    variants: {
+      direction: {
+        horizontal: "h-8 w-1",
+        vertical: "h-1 w-8"
+      }
+    },
+    defaultVariants: {
+      direction: "horizontal"
+    }
+  }
+);
+var ResizablePanel = forwardRef(
+  function ResizablePanel2({
+    name,
+    defaultSize: _defaultSize,
+    minSize = DEFAULT_MIN_SIZE,
+    maxSize = DEFAULT_MAX_SIZE,
+    collapsible = false,
+    onCollapse,
+    onExpand,
+    onResize,
+    className,
+    children
+  }, ref) {
+    const { sizes, registerPanel, unregisterPanel, containerRef } = useResizableContext();
+    const internalRef = useRef(null);
+    const [panelIndex, setPanelIndex] = useState(-1);
+    const prevSizeRef = useRef(null);
+    const isRegisteredRef = useRef(false);
+    const registeredIndexRef = useRef(-1);
+    useEffect(() => {
+      const panel = internalRef.current;
+      const container = containerRef.current;
+      if (!panel || !container) return;
+      const allPanels = container.querySelectorAll("[data-resizable-panel]");
+      let foundIndex = -1;
+      for (let i = 0; i < allPanels.length; i++) {
+        if (allPanels[i] === panel) {
+          foundIndex = i;
+          break;
+        }
+      }
+      if (foundIndex === -1) return;
+      if (panelIndex !== foundIndex) {
+        setPanelIndex(foundIndex);
+      }
+      if (!isRegisteredRef.current) {
+        isRegisteredRef.current = true;
+        registeredIndexRef.current = foundIndex;
+        registerPanel(foundIndex, {
+          name,
+          minSize,
+          maxSize,
+          collapsible
+        });
+      }
+      return () => {
+        if (isRegisteredRef.current) {
+          unregisterPanel(registeredIndexRef.current);
+          isRegisteredRef.current = false;
+        }
+      };
+    }, [containerRef, registerPanel, unregisterPanel, name, minSize, maxSize, collapsible, panelIndex]);
+    const currentSize = panelIndex >= 0 ? sizes[panelIndex] ?? 50 : 50;
+    useEffect(() => {
+      if (prevSizeRef.current === null) {
+        prevSizeRef.current = currentSize;
+        return;
+      }
+      const wasCollapsed = prevSizeRef.current === 0;
+      const isCollapsed = currentSize === 0;
+      if (!wasCollapsed && isCollapsed && onCollapse) {
+        onCollapse();
+      } else if (wasCollapsed && !isCollapsed && onExpand) {
+        onExpand();
+      }
+      if (onResize && prevSizeRef.current !== currentSize) {
+        onResize(currentSize);
+      }
+      prevSizeRef.current = currentSize;
+    }, [currentSize, onCollapse, onExpand, onResize]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          internalRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        role: "region",
+        "aria-label": name,
+        "data-resizable-panel": "",
+        "data-panel-name": name,
+        "data-panel-index": panelIndex,
+        "data-collapsed": currentSize === 0,
+        style: {
+          flexBasis: `${currentSize}%`,
+          flexGrow: 0,
+          flexShrink: 0,
+          overflow: "hidden"
+        },
+        className: cn("relative", className),
+        children
+      }
+    );
+  }
+);
+ResizablePanel.displayName = "ResizablePanel";
+function clampSize(size, min, max) {
+  return Math.max(min, Math.min(max, size));
+}
+function calculateNewSizes(sizes, panels, leftIndex, rightIndex, delta) {
+  const newSizes = [...sizes];
+  const leftPanel = panels[leftIndex];
+  const rightPanel = panels[rightIndex];
+  if (!leftPanel || !rightPanel) return sizes;
+  const leftSize = sizes[leftIndex] ?? 50;
+  const rightSize = sizes[rightIndex] ?? 50;
+  let newLeftSize = leftSize + delta;
+  let newRightSize = rightSize - delta;
+  const leftMin = leftPanel.collapsible ? 0 : leftPanel.minSize;
+  const leftMax = leftPanel.maxSize;
+  const rightMin = rightPanel.collapsible ? 0 : rightPanel.minSize;
+  const rightMax = rightPanel.maxSize;
+  newLeftSize = clampSize(newLeftSize, leftMin, leftMax);
+  newRightSize = leftSize + rightSize - newLeftSize;
+  newRightSize = clampSize(newRightSize, rightMin, rightMax);
+  newLeftSize = leftSize + rightSize - newRightSize;
+  newSizes[leftIndex] = newLeftSize;
+  newSizes[rightIndex] = newRightSize;
+  return newSizes;
+}
+function useResizable({
+  direction,
+  sizes,
+  setSizes,
+  panels,
+  containerRef,
+  leftPanelIndex,
+  rightPanelIndex,
+  disabled = false,
+  announce,
+  groupLabel,
+  onOpenPopover
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef(null);
+  const longPressTimerRef = useRef(null);
+  const pointerDownTimeRef = useRef(0);
+  const wasLongPressRef = useRef(false);
+  const panelsRef = useRef(panels);
+  const sizesRef = useRef(sizes);
+  const setSizesRef = useRef(setSizes);
+  const handlePointerMoveRef = useRef(() => {
+  });
+  const handlePointerUpRef = useRef(() => {
+  });
+  useEffect(() => {
+    panelsRef.current = panels;
+    sizesRef.current = sizes;
+    setSizesRef.current = setSizes;
+  }, [panels, sizes, setSizes]);
+  const getContainerSize = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return 0;
+    return direction === "horizontal" ? container.offsetWidth : container.offsetHeight;
+  }, [containerRef, direction]);
+  const pixelsToPercent = useCallback(
+    (pixels) => {
+      const containerSize = getContainerSize();
+      if (containerSize === 0) return 0;
+      return pixels / containerSize * 100;
+    },
+    [getContainerSize]
+  );
+  const onPointerMove = useCallback((e) => {
+    handlePointerMoveRef.current(e);
+  }, []);
+  const onPointerUp = useCallback(() => {
+    handlePointerUpRef.current();
+  }, []);
+  const handlePointerMove = useCallback(
+    (event) => {
+      if (!dragStartRef.current || disabled) return;
+      const position = direction === "horizontal" ? event.clientX : event.clientY;
+      const delta = position - dragStartRef.current.position;
+      const percentDelta = pixelsToPercent(delta);
+      const newSizes = calculateNewSizes(
+        dragStartRef.current.sizes,
+        panelsRef.current,
+        leftPanelIndex,
+        rightPanelIndex,
+        percentDelta
+      );
+      setSizesRef.current(newSizes);
+    },
+    [
+      direction,
+      disabled,
+      leftPanelIndex,
+      pixelsToPercent,
+      rightPanelIndex
+    ]
+  );
+  const handlePointerUp = useCallback(() => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+    const duration = Date.now() - pointerDownTimeRef.current;
+    const wasTap = duration < LONG_PRESS_THRESHOLD && !wasLongPressRef.current;
+    if (wasTap && onOpenPopover && !disabled) {
+      onOpenPopover();
+    }
+    if (isDragging) {
+      setIsDragging(false);
+      const leftPanel = panelsRef.current[leftPanelIndex];
+      const newSize = Math.round(sizesRef.current[leftPanelIndex] ?? 50);
+      if (announce && leftPanel && groupLabel) {
+        announce(
+          `${leftPanel.name} in ${groupLabel} resized to ${newSize} percent`
+        );
+      }
+    }
+    dragStartRef.current = null;
+    wasLongPressRef.current = false;
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+    document.removeEventListener("pointercancel", onPointerUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, [
+    announce,
+    disabled,
+    groupLabel,
+    isDragging,
+    leftPanelIndex,
+    onOpenPopover,
+    onPointerMove,
+    onPointerUp
+  ]);
+  useEffect(() => {
+    handlePointerMoveRef.current = handlePointerMove;
+    handlePointerUpRef.current = handlePointerUp;
+  });
+  const handlePointerDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      const position = direction === "horizontal" ? event.clientX : event.clientY;
+      pointerDownTimeRef.current = Date.now();
+      wasLongPressRef.current = false;
+      dragStartRef.current = {
+        position,
+        sizes: [...sizes],
+        containerSize: getContainerSize()
+      };
+      longPressTimerRef.current = setTimeout(() => {
+        wasLongPressRef.current = true;
+        setIsDragging(true);
+        document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+      }, LONG_PRESS_THRESHOLD);
+      document.addEventListener("pointermove", onPointerMove);
+      document.addEventListener("pointerup", onPointerUp);
+      document.addEventListener("pointercancel", onPointerUp);
+      if (event.pointerType === "mouse") {
+        if (longPressTimerRef.current) {
+          clearTimeout(longPressTimerRef.current);
+          longPressTimerRef.current = null;
+        }
+        wasLongPressRef.current = true;
+        setIsDragging(true);
+        document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+      }
+    },
+    [
+      direction,
+      disabled,
+      getContainerSize,
+      onPointerMove,
+      onPointerUp,
+      sizes
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      const step = event.shiftKey ? 10 : 1;
+      let delta = 0;
+      switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          delta = -step;
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          delta = step;
+          break;
+        case "Home": {
+          const leftPanel = panels[leftPanelIndex];
+          if (leftPanel) {
+            const minSize = leftPanel.collapsible ? 0 : leftPanel.minSize;
+            delta = minSize - (sizes[leftPanelIndex] ?? 50);
+          }
+          break;
+        }
+        case "End": {
+          const leftPanel = panels[leftPanelIndex];
+          if (leftPanel) {
+            delta = leftPanel.maxSize - (sizes[leftPanelIndex] ?? 50);
+          }
+          break;
+        }
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          onOpenPopover?.();
+          return;
+        default:
+          return;
+      }
+      if (delta !== 0) {
+        event.preventDefault();
+        const newSizes = calculateNewSizes(
+          sizes,
+          panels,
+          leftPanelIndex,
+          rightPanelIndex,
+          delta
+        );
+        setSizes(newSizes);
+        const leftPanel = panels[leftPanelIndex];
+        const newSize = Math.round(newSizes[leftPanelIndex] ?? 50);
+        if (announce && leftPanel && groupLabel) {
+          announce(
+            `${leftPanel.name} in ${groupLabel} resized to ${newSize} percent`
+          );
+        }
+      }
+    },
+    [
+      announce,
+      disabled,
+      groupLabel,
+      leftPanelIndex,
+      onOpenPopover,
+      panels,
+      rightPanelIndex,
+      setSizes,
+      sizes
+    ]
+  );
+  useEffect(() => {
+    const moveHandler = onPointerMove;
+    const upHandler = onPointerUp;
+    return () => {
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current);
+      }
+      document.removeEventListener("pointermove", moveHandler);
+      document.removeEventListener("pointerup", upHandler);
+      document.removeEventListener("pointercancel", upHandler);
+    };
+  }, [onPointerMove, onPointerUp]);
+  return {
+    isDragging,
+    handlePointerDown,
+    handleKeyDown
+  };
+}
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var ButtonGroupContext = createContext(null);
+ButtonGroupContext.displayName = "ButtonGroupContext";
+function useButtonGroupContext() {
+  return useContext(ButtonGroupContext);
+}
+var ButtonGroupItemContext = createContext(null);
+ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
+function useButtonGroupItemContext() {
+  return useContext(ButtonGroupItemContext);
+}
+cva("inline-flex items-center gap-0", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col w-full"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonGroupItemVariants = cva("", {
+  variants: {
+    orientation: {
+      // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
+      horizontal: "min-w-[44px]",
+      // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
+      // eliminating gaps between stacked buttons in vertical orientation
+      vertical: "flex min-h-[44px]"
+    },
+    position: {
+      first: "",
+      middle: "",
+      last: "",
+      only: ""
+      // Single button - no modifications needed
+    }
+  },
+  compoundVariants: [
+    // ==========================================================================
+    // Horizontal Orientation
+    // ==========================================================================
+    {
+      orientation: "horizontal",
+      position: "first",
+      className: "rounded-r-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "middle",
+      className: "rounded-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "last",
+      className: "rounded-l-none"
+    },
+    // ==========================================================================
+    // Vertical Orientation
+    // Note: w-full is handled by Button's effectiveFullWidth for both layers
+    // ==========================================================================
+    {
+      orientation: "vertical",
+      position: "first",
+      className: "rounded-b-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "middle",
+      className: "rounded-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "last",
+      className: "rounded-t-none"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    position: "only"
+  }
+});
+cva("bg-[var(--border)]", {
+  variants: {
+    orientation: {
+      horizontal: "w-px h-6 mx-1",
+      vertical: "h-px w-full my-1"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonOuterVariants = cva(
+  "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      inVerticalGroup: {
+        true: "items-stretch",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      inVerticalGroup: false
+    }
+  }
+);
+var buttonVisualVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+        destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+        outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+        link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      visualSize: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+      },
+      paywall: {
+        true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      visualSize: "default",
+      paywall: false
+    }
+  }
+);
+var Button = memo(forwardRef(
+  ({
+    className,
+    buttonVisualClassName,
+    variant,
+    size,
+    visualSize,
+    fullWidth,
+    loading = false,
+    loadingText = "Loading...",
+    shortcut,
+    children,
+    isDisabled,
+    paywall = false,
+    paywallRedirect,
+    paywallDescription,
+    onPress,
+    ...props
+  }, ref) => {
+    const paywallDescriptionId = useId();
+    const groupContext = useButtonGroupContext();
+    const itemContext = useButtonGroupItemContext();
+    const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+    const effectiveSize = size ?? groupContext?.size;
+    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+    const isInVerticalGroup = groupContext?.orientation === "vertical";
+    const effectiveFullWidth = fullWidth || isInVerticalGroup;
+    const positionClassName = itemContext ? buttonGroupItemVariants({
+      orientation: groupContext?.orientation ?? "horizontal",
+      position: itemContext.position
+    }) : "";
+    const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+    if (process.env.NODE_ENV !== "production") {
+      if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+        console.warn(
+          '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+        );
+      }
+    }
+    const handlePress = (e) => {
+      if (paywall) {
+        if (paywallRedirect) {
+          window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      onPress?.(e);
+    };
+    const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ref,
+        isDisabled: computedIsDisabled,
+        "aria-disabled": paywall ? true : void 0,
+        "aria-describedby": paywall ? paywallDescriptionId : void 0,
+        onPress: handlePress,
+        className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                buttonVisualVariants({
+                  variant: effectiveVariant,
+                  visualSize: effectiveVisualSize,
+                  paywall,
+                  fullWidth: effectiveFullWidth
+                }),
+                // Position styling from ButtonGroup context (border-radius adjustments)
+                positionClassName,
+                buttonVisualClassName,
+                // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                PRESSED_STYLES,
+                HOVER_STYLES,
+                HIGH_CONTRAST_HOVER,
+                HIGH_CONTRAST_PRESSED
+              ),
+              "data-pressed": renderProps.isPressed || void 0,
+              children: [
+                loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                ] }),
+                !loading && children,
+                paywall && /* @__PURE__ */ jsx(
+                  Zap,
+                  {
+                    "data-testid": "zap-icon",
+                    "aria-hidden": "true",
+                    className: "ml-1"
+                  }
+                ),
+                paywall && /* @__PURE__ */ jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                  "Premium feature: ",
+                  paywallDescription || "Upgrade required to access this feature"
+                ] }),
+                renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                renderProps.isPressed && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        )
+      }
+    );
+  }
+));
+Button.displayName = "Button";
+var DEFAULT_MAX_VALUE = 4294967295;
+var DEFAULT_MIN_VALUE = 0;
+var NEGATIVE_MIN_VALUE = -2147483647;
+z.object({
+  // Value props
+  /** Current value (controlled mode) */
+  value: z.number().nullable().optional(),
+  /** Default value (uncontrolled mode) */
+  defaultValue: z.number().optional(),
+  // Constraint props
+  /** Minimum allowed value (default: 0) */
+  minValue: z.number().optional(),
+  /** Maximum allowed value (default: 4294967295 / UINT32_MAX) */
+  maxValue: z.number().optional(),
+  /** Allow negative numbers (sets minValue to -2147483647 if not explicitly set) */
+  allowNegative: z.boolean().optional(),
+  /** Step increment for stepper buttons and arrow keys (default: 1) */
+  step: z.number().positive().optional(),
+  // Formatting props
+  /** Intl.NumberFormat options for locale-aware formatting */
+  formatOptions: z.custom().optional(),
+  // State props
+  /** Whether the field is disabled */
+  isDisabled: z.boolean().optional(),
+  /** Whether the field is read-only */
+  isReadOnly: z.boolean().optional(),
+  /** Whether the field is required */
+  isRequired: z.boolean().optional(),
+  /** Whether the field is in an invalid state */
+  isInvalid: z.boolean().optional(),
+  /** Whether scroll wheel adjustment is disabled */
+  isWheelDisabled: z.boolean().optional(),
+  // Validation props
+  /** Custom validation function that returns an error message or null */
+  validate: z.function().optional(),
+  /** Validation behavior: 'native' for HTML5 validation, 'aria' for ARIA-only */
+  validationBehavior: z.enum(["native", "aria"]).default("native"),
+  // Display props
+  /** Field label (required for accessibility) */
+  label: z.string(),
+  /** Description text below the field */
+  description: z.string().optional(),
+  /** Error message string or render function */
+  errorMessage: z.union([z.string(), z.function()]).optional(),
+  // Stepper props
+  /** Layout for stepper buttons */
+  stepperLayout: z.enum(["sides", "stacked", "hidden"]).default("sides"),
+  /** Custom aria-label for increment button */
+  incrementAriaLabel: z.string().optional(),
+  /** Custom aria-label for decrement button */
+  decrementAriaLabel: z.string().optional(),
+  // Form props
+  /** Name attribute for form submission */
+  name: z.string().optional(),
+  // Variant props
+  /** Size variant */
+  size: z.enum(["sm", "default", "lg"]).default("default"),
+  // Event props
+  /** Called when the numeric value changes */
+  onChange: z.function().optional(),
+  /** Called when the field gains focus */
+  onFocus: z.function().optional(),
+  /** Called when the field loses focus */
+  onBlur: z.function().optional(),
+  /** Called when focus state changes */
+  onFocusChange: z.function().optional(),
+  // Standard props
+  /** Additional CSS classes */
+  className: z.string().optional(),
+  /** Whether to auto-focus on mount */
+  autoFocus: z.boolean().optional()
+});
+var numberFieldVariants = cva(
+  [
+    // Base styles
+    "inline-flex items-center rounded-md border",
+    "bg-[var(--content-background)] text-[var(--content-foreground)]",
+    "transition-colors duration-200",
+    // Focus within
+    "focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2",
+    // Disabled
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-9 text-sm",
+        default: "h-10 text-base",
+        lg: "h-12 text-lg"
+      },
+      isInvalid: {
+        true: "border-[var(--destructive)] focus-within:ring-[var(--destructive)]",
+        false: "border-[var(--input)] hover:border-[var(--input)]/80"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isInvalid: false
+    }
+  }
+);
+var numberFieldInputVariants = cva(
+  [
+    // Base styles
+    "flex-1 bg-transparent text-center tabular-nums",
+    "min-w-0",
+    // Allow shrinking
+    // Focus
+    "focus:outline-none",
+    // Hide native spinners
+    "[appearance:textfield]",
+    "[&::-webkit-outer-spin-button]:appearance-none",
+    "[&::-webkit-inner-spin-button]:appearance-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 text-sm",
+        default: "px-3 text-base",
+        lg: "px-4 text-lg"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var numberFieldStepperVariants = cva(
+  [
+    // Base styles
+    "flex items-center justify-center",
+    "transition-colors duration-150",
+    "select-none",
+    // Hover
+    "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
+    // Focus
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+    "focus-visible:ring-inset",
+    // Active (pressed)
+    "active:bg-[var(--accent)]/80",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-w-8 min-h-8 text-sm",
+        default: "min-w-10 min-h-10 text-base",
+        lg: "min-w-12 min-h-12 text-lg"
+      },
+      position: {
+        left: "rounded-l-md border-r border-[var(--input)]",
+        right: "rounded-r-md border-l border-[var(--input)]",
+        top: "rounded-tr-md border-b border-l border-[var(--input)] h-1/2",
+        bottom: "rounded-br-md border-l border-[var(--input)] h-1/2"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var numberFieldLabelVariants = cva(
+  [
+    "block font-medium text-[var(--content-foreground)]",
+    "mb-1.5",
+    // Required indicator
+    'data-[required]:after:content-["*"] data-[required]:after:ml-0.5',
+    "data-[required]:after:text-[var(--destructive)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var numberFieldDescriptionVariants = cva(
+  [
+    "text-[var(--menu-muted)]",
+    "mt-1"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var numberFieldErrorVariants = cva(
+  [
+    "flex items-center gap-1",
+    "text-[var(--destructive)]",
+    "mt-1"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var NumberField = forwardRef(
+  ({
+    // Display props
+    label,
+    description,
+    errorMessage,
+    // Variant props
+    size = "default",
+    stepperLayout = "sides",
+    // Custom props
+    allowNegative = false,
+    incrementAriaLabel,
+    decrementAriaLabel,
+    // Constraint props (apply defaults)
+    minValue,
+    maxValue,
+    // Standard props
+    className,
+    isInvalid,
+    isRequired,
+    isDisabled,
+    isReadOnly,
+    // All other props go to AriaNumberField
+    ...props
+  }, ref) => {
+    const effectiveMinValue = minValue ?? (allowNegative ? NEGATIVE_MIN_VALUE : DEFAULT_MIN_VALUE);
+    const effectiveMaxValue = maxValue ?? DEFAULT_MAX_VALUE;
+    const showSteppers = stepperLayout !== "hidden" && !isReadOnly;
+    const isStackedLayout = stepperLayout === "stacked";
+    return /* @__PURE__ */ jsxs(
+      NumberField$1,
+      {
+        ref,
+        className: cn("group flex flex-col", className),
+        minValue: effectiveMinValue,
+        maxValue: effectiveMaxValue,
+        isInvalid,
+        isRequired,
+        isDisabled,
+        isReadOnly,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              className: cn(numberFieldLabelVariants({ size })),
+              "data-required": isRequired || void 0,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              className: cn(
+                numberFieldVariants({
+                  size,
+                  isInvalid: isInvalid ?? false
+                }),
+                isStackedLayout && "pr-0"
+              ),
+              children: [
+                showSteppers && !isStackedLayout && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    slot: "decrement",
+                    variant: "ghost",
+                    className: "!min-h-0 !min-w-0",
+                    buttonVisualClassName: cn(
+                      numberFieldStepperVariants({
+                        size,
+                        position: "left"
+                      })
+                    ),
+                    "aria-label": decrementAriaLabel ?? "Decrease value",
+                    children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: cn(numberFieldInputVariants({ size }))
+                  }
+                ),
+                showSteppers && isStackedLayout && /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      slot: "increment",
+                      variant: "ghost",
+                      className: "!min-h-0 !min-w-0",
+                      buttonVisualClassName: cn(
+                        numberFieldStepperVariants({
+                          size,
+                          position: "top"
+                        })
+                      ),
+                      "aria-label": incrementAriaLabel ?? "Increase value",
+                      children: /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3", "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      slot: "decrement",
+                      variant: "ghost",
+                      className: "!min-h-0 !min-w-0",
+                      buttonVisualClassName: cn(
+                        numberFieldStepperVariants({
+                          size,
+                          position: "bottom"
+                        })
+                      ),
+                      "aria-label": decrementAriaLabel ?? "Decrease value",
+                      children: /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3", "aria-hidden": "true" })
+                    }
+                  )
+                ] }),
+                showSteppers && !isStackedLayout && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    slot: "increment",
+                    variant: "ghost",
+                    className: "!min-h-0 !min-w-0",
+                    buttonVisualClassName: cn(
+                      numberFieldStepperVariants({
+                        size,
+                        position: "right"
+                      })
+                    ),
+                    "aria-label": incrementAriaLabel ?? "Increase value",
+                    children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" })
+                  }
+                )
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              slot: "description",
+              className: cn(numberFieldDescriptionVariants({ size })),
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { className: cn(numberFieldErrorVariants({ size })), children: errorMessage })
+        ]
+      }
+    );
+  }
+);
+NumberField.displayName = "NumberField";
+var ResizablePopover = forwardRef(
+  function ResizablePopover2({
+    isOpen,
+    onOpenChange,
+    groupLabel,
+    leftPanel,
+    rightPanel,
+    leftSize,
+    rightSize,
+    onSizesChange,
+    presets,
+    triggerRef,
+    direction
+  }, _ref) {
+    const [originalSizes, setOriginalSizes] = useState({ left: leftSize, right: rightSize });
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+      if (isOpen && !wasOpenRef.current) {
+        setOriginalSizes({ left: leftSize, right: rightSize });
+      }
+      wasOpenRef.current = isOpen;
+    }, [isOpen, leftSize, rightSize]);
+    const handleLeftChange = useCallback(
+      (value) => {
+        if (value === null) return;
+        const newLeft = Math.max(
+          leftPanel.collapsible ? 0 : leftPanel.minSize,
+          Math.min(leftPanel.maxSize, value)
+        );
+        const newRight = 100 - newLeft;
+        const rightMin = rightPanel.collapsible ? 0 : rightPanel.minSize;
+        const rightMax = rightPanel.maxSize;
+        if (newRight < rightMin || newRight > rightMax) {
+          return;
+        }
+        onSizesChange(newLeft, newRight);
+      },
+      [leftPanel, rightPanel, onSizesChange]
+    );
+    const handleRightChange = useCallback(
+      (value) => {
+        if (value === null) return;
+        const newRight = Math.max(
+          rightPanel.collapsible ? 0 : rightPanel.minSize,
+          Math.min(rightPanel.maxSize, value)
+        );
+        const newLeft = 100 - newRight;
+        const leftMin = leftPanel.collapsible ? 0 : leftPanel.minSize;
+        const leftMax = leftPanel.maxSize;
+        if (newLeft < leftMin || newLeft > leftMax) {
+          return;
+        }
+        onSizesChange(newLeft, newRight);
+      },
+      [leftPanel, rightPanel, onSizesChange]
+    );
+    const handlePreset = useCallback(
+      (preset) => {
+        const leftSize2 = preset.sizes[0];
+        const rightSize2 = preset.sizes[1];
+        if (leftSize2 !== void 0 && rightSize2 !== void 0) {
+          onSizesChange(leftSize2, rightSize2);
+        }
+      },
+      [onSizesChange]
+    );
+    const handleCancel = useCallback(() => {
+      onSizesChange(originalSizes.left, originalSizes.right);
+      onOpenChange(false);
+    }, [onSizesChange, onOpenChange, originalSizes]);
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+    if (!isOpen) return null;
+    const placement = direction === "horizontal" ? "bottom" : "right";
+    return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen, onOpenChange, children: [
+      /* @__PURE__ */ jsx(Button$1, { className: "sr-only", children: "Open resize controls" }),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          triggerRef,
+          placement,
+          offset: 8,
+          className: cn(
+            "w-72",
+            "rounded-lg border border-[var(--border)]",
+            "bg-[var(--popover)] text-[var(--popover-foreground)]",
+            "shadow-lg",
+            "outline-none",
+            "animate-in fade-in-0 zoom-in-95",
+            "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"
+          ),
+          children: /* @__PURE__ */ jsxs(Dialog, { className: "outline-none", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-[var(--border)] px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium", children: [
+                "Resize: ",
+                groupLabel
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button$1,
+                {
+                  onPress: handleClose,
+                  className: cn(
+                    "inline-flex items-center justify-center rounded-md",
+                    "min-h-[44px] min-w-[44px]",
+                    "text-[var(--menu-muted)]",
+                    "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
+                    "focus-visible:outline-none focus-visible:ring-2",
+                    "focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
+                  ),
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-4 py-4", children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                NumberField,
+                {
+                  label: `${leftPanel.name} (%)`,
+                  value: Math.round(leftSize),
+                  onChange: handleLeftChange,
+                  minValue: leftPanel.collapsible ? 0 : leftPanel.minSize,
+                  maxValue: leftPanel.maxSize,
+                  step: 1,
+                  stepperLayout: "sides"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                NumberField,
+                {
+                  label: `${rightPanel.name} (%)`,
+                  value: Math.round(rightSize),
+                  onChange: handleRightChange,
+                  minValue: rightPanel.collapsible ? 0 : rightPanel.minSize,
+                  maxValue: rightPanel.maxSize,
+                  step: 1,
+                  stepperLayout: "sides"
+                }
+              ) }),
+              presets && presets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border)] pt-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium text-[var(--menu-muted)]", children: "Presets" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onPress: () => handlePreset(preset),
+                    children: preset.label
+                  },
+                  index
+                )) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-[var(--border)] px-4 py-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: handleCancel, children: "Cancel" }) })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+ResizablePopover.displayName = "ResizablePopover";
+var ResizableHandle = forwardRef(
+  function ResizableHandle2({ withHandle = true, presets, disabled = false, className }, ref) {
+    const {
+      direction,
+      groupLabel,
+      sizes,
+      setSizes,
+      panels,
+      announce,
+      containerRef
+    } = useResizableContext();
+    const internalRef = useRef(null);
+    const handleRef = ref || internalRef;
+    const [handleIndex, setHandleIndex] = useState(0);
+    useEffect(() => {
+      const handle = handleRef.current;
+      const container = containerRef.current;
+      if (!handle || !container) return;
+      const handles = container.querySelectorAll('[role="slider"]');
+      let index = 0;
+      handles.forEach((h, i) => {
+        if (h === handle) {
+          index = i;
+        }
+      });
+      setHandleIndex(index);
+    }, [containerRef, handleRef]);
+    const leftPanelIndex = handleIndex;
+    const rightPanelIndex = handleIndex + 1;
+    const leftPanel = panels[leftPanelIndex];
+    const rightPanel = panels[rightPanelIndex];
+    const leftSize = sizes[leftPanelIndex] ?? 50;
+    const rightSize = sizes[rightPanelIndex] ?? 50;
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const handlePopoverSizesChange = useCallback(
+      (newLeftSize, newRightSize) => {
+        const newSizes = [...sizes];
+        newSizes[leftPanelIndex] = newLeftSize;
+        newSizes[rightPanelIndex] = newRightSize;
+        setSizes(newSizes);
+      },
+      [sizes, setSizes, leftPanelIndex, rightPanelIndex]
+    );
+    const { isDragging, handlePointerDown, handleKeyDown } = useResizable({
+      direction,
+      sizes,
+      setSizes,
+      panels,
+      containerRef,
+      leftPanelIndex,
+      rightPanelIndex,
+      disabled,
+      announce,
+      groupLabel,
+      onOpenPopover: () => setIsPopoverOpen(true)
+    });
+    const ariaLabel = leftPanel && rightPanel ? `Resize handle between ${leftPanel.name} and ${rightPanel.name} in ${groupLabel}` : `Resize handle in ${groupLabel}`;
+    const GripIcon = direction === "horizontal" ? GripVertical : GripHorizontal;
+    const leftPanelInfo = leftPanel ?? {
+      name: "Panel 1",
+      minSize: DEFAULT_MIN_SIZE,
+      maxSize: DEFAULT_MAX_SIZE,
+      collapsible: false
+    };
+    const rightPanelInfo = rightPanel ?? {
+      name: "Panel 2",
+      minSize: DEFAULT_MIN_SIZE,
+      maxSize: DEFAULT_MAX_SIZE,
+      collapsible: false
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: handleRef,
+          role: "slider",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": ariaLabel,
+          "aria-valuenow": Math.round(leftSize),
+          "aria-valuemin": leftPanel?.collapsible ? 0 : leftPanel?.minSize ?? 0,
+          "aria-valuemax": leftPanel?.maxSize ?? 100,
+          "aria-orientation": direction,
+          "aria-disabled": disabled,
+          "data-direction": direction,
+          "data-dragging": isDragging,
+          "data-disabled": disabled,
+          onPointerDown: handlePointerDown,
+          onKeyDown: handleKeyDown,
+          className: cn(
+            resizableHandleVariants({
+              direction,
+              disabled,
+              isDragging
+            }),
+            className
+          ),
+          children: withHandle && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(resizableGripVariants({ direction })),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(GripIcon, { className: "h-4 w-4" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ResizablePopover,
+        {
+          isOpen: isPopoverOpen,
+          onOpenChange: setIsPopoverOpen,
+          groupLabel,
+          leftPanel: leftPanelInfo,
+          rightPanel: rightPanelInfo,
+          leftSize,
+          rightSize,
+          onSizesChange: handlePopoverSizesChange,
+          presets,
+          triggerRef: handleRef,
+          direction
+        }
+      )
+    ] });
+  }
+);
+ResizableHandle.displayName = "ResizableHandle";
+
+export { DEFAULT_MAX_SIZE, DEFAULT_MIN_SIZE, LONG_PRESS_THRESHOLD, ResizableHandle, ResizableHandlePropsSchema, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupPropsSchema, ResizablePanelPropsSchema, ResizePresetSchema, resizableGripVariants, resizableHandleVariants, useResizableContext };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map