devnonla-ui 0.2.0 → 0.4.0

package/src/scroll/OverlayScroll.tsx

@@ -1,13 +1,16 @@
-import { type PointerEvent as ReactPointerEvent, type ReactNode, type Ref, type UIEventHandler, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { type ReactNode, type PointerEvent as ReactPointerEvent, type Ref, type UIEventHandler, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 
 export type OverlayScrollVisibility = "hover" | "always";
 
 const HIDE_MS = 1000;
+const MIN_THUMB = 32;
 
 export type OverlayScrollProps = {
   /** `hover` shows the thumb on hover / while scrolling. `always` keeps it visible. */
   visibility?: OverlayScrollVisibility;
+  /** Size to content (honors max-height on `className`) instead of filling the parent. */
+  autoHeight?: boolean;
   className?: string;
   innerClassName?: string;
   children?: ReactNode;
@@ -15,7 +18,10 @@ export type OverlayScrollProps = {
   scrollRef?: Ref<HTMLDivElement>;
 };
 
-type Thumb = { top: number; height: number; shown: boolean };
+type Thumb = { offset: number; size: number; shown: boolean };
+type Axis = "x" | "y";
+
+const HIDDEN: Thumb = { offset: 0, size: 0, shown: false };
 
 function assignRef(ref: Ref<HTMLDivElement> | undefined, node: HTMLDivElement | null) {
   if (!ref) return;
@@ -23,27 +29,36 @@ function assignRef(ref: Ref<HTMLDivElement> | undefined, node: HTMLDivElement |
   else ref.current = node;
 }
 
-export function OverlayScroll({ visibility = "hover", className, innerClassName, children, onScroll, scrollRef }: OverlayScrollProps) {
+function measure(scroll: number, scrollSize: number, client: number): Thumb {
+  const overflow = scrollSize - client;
+  if (overflow <= 1) return HIDDEN;
+  const size = Math.max(MIN_THUMB, (client / scrollSize) * client);
+  const offset = (scroll / overflow) * (client - size);
+  return { offset, size, shown: true };
+}
+
+function canScrollX(el: HTMLDivElement) {
+  const overflow = getComputedStyle(el).overflowX;
+  return overflow === "auto" || overflow === "scroll";
+}
+
+export function OverlayScroll({ visibility = "hover", autoHeight = false, className, innerClassName, children, onScroll, scrollRef }: OverlayScrollProps) {
   const elRef = useRef<HTMLDivElement | null>(null);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const thumbRef = useRef<Thumb>({ top: 0, height: 0, shown: false });
+  const vThumbRef = useRef<Thumb>(HIDDEN);
+  const hThumbRef = useRef<Thumb>(HIDDEN);
   const [scrolling, setScrolling] = useState(false);
   const [dragging, setDragging] = useState(false);
-  const [thumb, setThumb] = useState<Thumb>({ top: 0, height: 0, shown: false });
-  thumbRef.current = thumb;
+  const [vThumb, setVThumb] = useState<Thumb>(HIDDEN);
+  const [hThumb, setHThumb] = useState<Thumb>(HIDDEN);
+  vThumbRef.current = vThumb;
+  hThumbRef.current = hThumb;
 
   const updateThumb = useCallback(() => {
     const el = elRef.current;
     if (!el) return;
-    const { scrollTop, scrollHeight, clientHeight } = el;
-    const overflow = scrollHeight - clientHeight;
-    if (overflow <= 1) {
-      setThumb((prev) => (prev.shown ? { top: 0, height: 0, shown: false } : prev));
-      return;
-    }
-    const height = Math.max(32, (clientHeight / scrollHeight) * clientHeight);
-    const top = (scrollTop / overflow) * (clientHeight - height);
-    setThumb({ top, height, shown: true });
+    setVThumb(measure(el.scrollTop, el.scrollHeight, el.clientHeight));
+    setHThumb(canScrollX(el) ? measure(el.scrollLeft, el.scrollWidth, el.clientWidth) : HIDDEN);
   }, []);
 
   const setNode = useCallback(
@@ -64,7 +79,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
     const child = el.firstElementChild;
     if (child) ro.observe(child);
     return () => ro.disconnect();
-  }, [updateThumb]);
+  }, [updateThumb, innerClassName, autoHeight]);
 
   useLayoutEffect(() => {
     return () => {
@@ -82,27 +97,30 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
     onScroll?.(e);
   };
 
-  const onThumbPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+  const onThumbPointerDown = (axis: Axis) => (e: ReactPointerEvent<HTMLDivElement>) => {
     const el = elRef.current;
-    const current = thumbRef.current;
+    const current = axis === "y" ? vThumbRef.current : hThumbRef.current;
     if (!el || !current.shown || e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
 
-    const overflow = el.scrollHeight - el.clientHeight;
-    const track = el.clientHeight - current.height;
+    const overflow = axis === "y" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+    const track = (axis === "y" ? el.clientHeight : el.clientWidth) - current.size;
     if (overflow <= 0 || track <= 0) return;
 
-    const startY = e.clientY;
-    const startTop = current.top;
+    const start = axis === "y" ? e.clientY : e.clientX;
+    const startOffset = current.offset;
     e.currentTarget.setPointerCapture(e.pointerId);
     setDragging(true);
     setScrolling(true);
 
     const onMove = (ev: PointerEvent) => {
       if (ev.pointerId !== e.pointerId) return;
-      const nextTop = Math.min(track, Math.max(0, startTop + (ev.clientY - startY)));
-      el.scrollTop = (nextTop / track) * overflow;
+      const delta = (axis === "y" ? ev.clientY : ev.clientX) - start;
+      const next = Math.min(track, Math.max(0, startOffset + delta));
+      const pos = (next / track) * overflow;
+      if (axis === "y") el.scrollTop = pos;
+      else el.scrollLeft = pos;
     };
     const onUp = (ev: PointerEvent) => {
       if (ev.pointerId !== e.pointerId) return;
@@ -119,24 +137,27 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
   };
 
   const thumbVisible = visibility === "always" || dragging || scrolling;
+  const thumbClass = cn(
+    "nonla-overlay-thumb absolute z-20 rounded-full transition-opacity duration-150",
+    visibility === "always" || dragging
+      ? "pointer-events-auto opacity-100"
+      : "pointer-events-none opacity-0 group-hover/scroll:pointer-events-auto group-hover/scroll:opacity-100 group-data-scrolling/scroll:pointer-events-auto group-data-scrolling/scroll:opacity-100",
+  );
 
   return (
     <div className={cn("group/scroll relative min-h-0 min-w-0 w-full overflow-hidden", className)} data-scrolling={thumbVisible ? "true" : undefined}>
-      <div ref={setNode} onScroll={handleScroll} className={cn("nonla-scroll-hidden absolute inset-0 overflow-y-auto overflow-x-hidden [overflow-anchor:none]", innerClassName)}>
+      <div
+        ref={setNode}
+        onScroll={handleScroll}
+        className={cn("nonla-scroll-hidden overflow-y-auto overflow-x-hidden [overflow-anchor:none]", autoHeight ? "max-h-[inherit]" : "absolute inset-0", innerClassName)}
+      >
         {children}
       </div>
-      {thumb.shown ? (
-        <div
-          aria-hidden
-          onPointerDown={onThumbPointerDown}
-          className={cn(
-            "nonla-overlay-thumb absolute z-20 rounded-full transition-opacity duration-150",
-            visibility === "always" || dragging
-              ? "pointer-events-auto opacity-100"
-              : "pointer-events-none opacity-0 group-hover/scroll:pointer-events-auto group-hover/scroll:opacity-100 group-data-scrolling/scroll:pointer-events-auto group-data-scrolling/scroll:opacity-100",
-          )}
-          style={{ right: 2, width: "var(--nonla-scrollbar-size)", height: thumb.height, transform: `translateY(${thumb.top}px)` }}
-        />
+      {vThumb.shown ? (
+        <div aria-hidden onPointerDown={onThumbPointerDown("y")} className={thumbClass} style={{ right: 2, width: "var(--nonla-scrollbar-size)", height: vThumb.size, transform: `translateY(${vThumb.offset}px)` }} />
+      ) : null}
+      {hThumb.shown ? (
+        <div aria-hidden onPointerDown={onThumbPointerDown("x")} className={thumbClass} style={{ bottom: 2, height: "var(--nonla-scrollbar-size)", width: hThumb.size, transform: `translateX(${hThumb.offset}px)` }} />
       ) : null}
     </div>
   );

package/src/select/Select.tsx

@@ -1,10 +1,10 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import {
+  forwardRef,
+  isValidElement,
   type KeyboardEvent,
   type ReactElement,
   type ReactNode,
-  forwardRef,
-  isValidElement,
   useEffect,
   useLayoutEffect,
   useMemo,

package/src/spin/Spin.tsx

@@ -1,14 +1,14 @@
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, getSizeTokens, useControlSize } from "../lib/sizes";
+import { type ControlSize, getSizeTokens, normalizeSize, useControlSize } from "../lib/sizes";
 
-export type SpinVariant = "default" | "agent" | "subAgent";
+export type SpinVariant = "default" | "agent";
 
 export type SpinProps = {
   spinning?: boolean;
   tip?: ReactNode;
   size?: ControlSize;
-  /** Visual style — agent / subAgent for AI run states. */
+  /** Visual style — `agent` is the 3×3 snake for AI run states. */
   variant?: SpinVariant;
   /** Replace the built-in indicator entirely. */
   indicator?: ReactNode;
@@ -75,11 +75,17 @@ function stepSnake(snake: Snake): Snake {
   return [next, head, mid];
 }
 
+/** 3×3 metrics so `small` is visibly smaller than default (icon-aligned). */
+function matrixMetrics(size: ControlSize | undefined): { cell: number; gap: number } {
+  const s = normalizeSize(size);
+  if (s === "small") return { cell: 3, gap: 1.5 };
+  if (s === "large") return { cell: 6, gap: 3 };
+  return { cell: 4, gap: 2 };
+}
+
 /** 3×3 fixed dots — 3 adjacent lit cells crawl randomly (snake). */
-function MatrixSnake({ size, tickMs = 220 }: { size: ControlSize | undefined; tickMs?: number }) {
-  const scale = getSizeTokens(size).icon / 16;
-  const cell = Math.max(4, Math.round(5 * scale));
-  const gap = Math.max(2, Math.round(2 * scale));
+function MatrixSnake({ size, tickMs = 240 }: { size: ControlSize | undefined; tickMs?: number }) {
+  const { cell, gap } = matrixMetrics(size);
   const dim = cell * 3 + gap * 2;
   const [snake, setSnake] = useState<Snake>(() => randomSnake());
 
@@ -112,17 +118,8 @@ function MatrixSnake({ size, tickMs = 220 }: { size: ControlSize | undefined; ti
   );
 }
 
-function AgentSpinner({ size }: { size: ControlSize | undefined }) {
-  return <MatrixSnake size={size} tickMs={240} />;
-}
-
-function SubAgentSpinner({ size }: { size: ControlSize | undefined }) {
-  return <MatrixSnake size={size} tickMs={180} />;
-}
-
 function Spinner({ size, variant }: { size: ControlSize | undefined; variant: SpinVariant }) {
-  if (variant === "agent") return <AgentSpinner size={size} />;
-  if (variant === "subAgent") return <SubAgentSpinner size={size} />;
+  if (variant === "agent") return <MatrixSnake size={size} />;
   return <DefaultSpinner size={size} />;
 }
 

package/src/splitter/Splitter.tsx

@@ -0,0 +1,330 @@
+import {
+  Children,
+  type CSSProperties,
+  Fragment,
+  isValidElement,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../lib/cn";
+import { applyDrag, distributeSizes, parseSplitterSize, type SplitterSize, scaleSizes } from "./sizes";
+
+export type { SplitterSize };
+export type SplitterOrientation = "horizontal" | "vertical";
+export type SplitterSemanticSlot = "root" | "panel" | "dragger";
+
+export type SplitterPanelProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  defaultSize?: SplitterSize;
+  size?: SplitterSize;
+  min?: SplitterSize;
+  max?: SplitterSize;
+  resizable?: boolean;
+  destroyOnHidden?: boolean;
+};
+
+export type SplitterProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  orientation?: SplitterOrientation;
+  /** When set with `orientation`, `orientation` wins. */
+  vertical?: boolean;
+  draggerIcon?: ReactNode;
+  destroyOnHidden?: boolean;
+  classNames?: Partial<Record<SplitterSemanticSlot, string>>;
+  styles?: Partial<Record<SplitterSemanticSlot, CSSProperties>>;
+  onResize?: (sizes: number[]) => void;
+  onResizeStart?: (sizes: number[]) => void;
+  onResizeEnd?: (sizes: number[]) => void;
+};
+
+type PanelConfig = SplitterPanelProps & { key: string };
+
+type DragSession = {
+  index: number;
+  startPos: number;
+  startLeft: number;
+  startRight: number;
+};
+
+const PANEL_MARK = "__NONLA_SPLITTER_PANEL__";
+
+function isPanelElement(child: ReactNode): child is ReactElement<SplitterPanelProps> {
+  return isValidElement(child) && Boolean((child.type as { [PANEL_MARK]?: boolean })[PANEL_MARK]);
+}
+
+function collectPanels(children: ReactNode): PanelConfig[] {
+  return Children.toArray(children).filter(isPanelElement).map((child, index) => ({
+    key: child.key != null ? String(child.key) : String(index),
+    ...child.props,
+  }));
+}
+
+function SplitterPanel(_props: SplitterPanelProps) {
+  return null;
+}
+SplitterPanel.displayName = "Splitter.Panel";
+(SplitterPanel as typeof SplitterPanel & { [PANEL_MARK]: true })[PANEL_MARK] = true;
+
+function SplitterRoot({
+  children,
+  className,
+  style,
+  orientation,
+  vertical = false,
+  draggerIcon,
+  destroyOnHidden = false,
+  classNames,
+  styles,
+  onResize,
+  onResizeStart,
+  onResizeEnd,
+}: SplitterProps) {
+  const isVertical = (orientation ?? (vertical ? "vertical" : "horizontal")) === "vertical";
+  const panels = useMemo(() => collectPanels(children), [children]);
+  const count = panels.length;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const sizesRef = useRef<number[]>([]);
+  const dragRef = useRef<DragSession | null>(null);
+
+  const [container, setContainer] = useState(0);
+  const [sizes, setSizes] = useState<number[]>([]);
+  const [dragging, setDragging] = useState(false);
+
+  sizesRef.current = sizes;
+
+  const sizeKey = panels.map((panel) => String(panel.size ?? "")).join("|");
+
+  const resolve = useCallback(
+    (prev: number[] | null) => {
+      const scaled = prev && prev.length === count && container > 0 ? scaleSizes(prev, container) : null;
+      const declared = panels.map((panel, index) => {
+        const controlled = parseSplitterSize(panel.size, container);
+        if (controlled != null) return controlled;
+        if (scaled?.[index] != null) return scaled[index];
+        return parseSplitterSize(panel.defaultSize, container);
+      });
+      return distributeSizes(declared, container);
+    },
+    [container, count, panels],
+  );
+
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const read = () => {
+      const next = isVertical ? el.clientHeight : el.clientWidth;
+      setContainer((curr) => (Math.abs(curr - next) < 0.5 ? curr : next));
+    };
+    read();
+    const ro = new ResizeObserver(read);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isVertical]);
+
+  useLayoutEffect(() => {
+    if (container <= 0 || count === 0 || dragRef.current) return;
+    setSizes((prev) => {
+      const next = resolve(prev.length === count ? prev : null);
+      if (prev.length === next.length && prev.every((value, index) => Math.abs(value - (next[index] ?? 0)) < 0.5)) return prev;
+      return next;
+    });
+  }, [container, count, resolve, sizeKey]);
+
+  const commitSizes = (next: number[]) => {
+    setSizes(next);
+    onResize?.(next);
+  };
+
+  const boundsOf = (index: number) => {
+    const panel = panels[index]!;
+    return {
+      min: parseSplitterSize(panel.min, container) ?? 0,
+      max: parseSplitterSize(panel.max, container) ?? container,
+    };
+  };
+
+  const movePair = (index: number, delta: number, source: number[]) => {
+    const left = boundsOf(index);
+    const right = boundsOf(index + 1);
+    const [nextLeft, nextRight] = applyDrag(source[index] ?? 0, source[index + 1] ?? 0, delta, left.min, left.max, right.min, right.max);
+    const next = source.slice();
+    next[index] = nextLeft;
+    next[index + 1] = nextRight;
+    return next;
+  };
+
+  const onBarPointerDown = (index: number, event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    if (panels[index]?.resizable === false || panels[index + 1]?.resizable === false) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const pos = isVertical ? event.clientY : event.clientX;
+    dragRef.current = {
+      index,
+      startPos: pos,
+      startLeft: sizes[index] ?? 0,
+      startRight: sizes[index + 1] ?? 0,
+    };
+    setDragging(true);
+    onResizeStart?.(sizes);
+  };
+
+  const onBarPointerUp = (event?: PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    if (event) {
+      try {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      } catch {
+        /* already released */
+      }
+    }
+    dragRef.current = null;
+    setDragging(false);
+    onResizeEnd?.(sizesRef.current);
+  };
+
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (event: globalThis.PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const pos = isVertical ? event.clientY : event.clientX;
+      const source = Array.from({ length: count }, (_, i) => (i === drag.index ? drag.startLeft : i === drag.index + 1 ? drag.startRight : (sizesRef.current[i] ?? 0)));
+      commitSizes(movePair(drag.index, pos - drag.startPos, source));
+    };
+    const onUp = () => onBarPointerUp();
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [dragging, count, isVertical]);
+
+  const onBarKeyDown = (index: number, event: KeyboardEvent<HTMLDivElement>) => {
+    if (panels[index]?.resizable === false || panels[index + 1]?.resizable === false) return;
+    const step = event.shiftKey ? 32 : 8;
+    const backward = isVertical ? event.key === "ArrowUp" : event.key === "ArrowLeft";
+    const forward = isVertical ? event.key === "ArrowDown" : event.key === "ArrowRight";
+    if (!backward && !forward) return;
+    event.preventDefault();
+    commitSizes(movePair(index, backward ? -step : step, sizes));
+  };
+
+  useEffect(() => {
+    if (!dragging) return;
+    const prevCursor = document.body.style.cursor;
+    const prevSelect = document.body.style.userSelect;
+    document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.cursor = prevCursor;
+      document.body.style.userSelect = prevSelect;
+    };
+  }, [dragging, isVertical]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("nonla-splitter relative flex h-full min-h-0 min-w-0 w-full overflow-hidden", isVertical ? "flex-col" : "flex-row", classNames?.root, className)}
+      style={{ ...styles?.root, ...style }}
+      data-orientation={isVertical ? "vertical" : "horizontal"}
+    >
+      {panels.map((panel, index) => {
+        const size = sizes[index] ?? 0;
+        const hidden = size <= 0;
+        const destroy = hidden && (panel.destroyOnHidden ?? destroyOnHidden);
+        const resizable = panel.resizable !== false && panels[index + 1]?.resizable !== false;
+
+        return (
+          <Fragment key={panel.key}>
+            <div
+              className={cn("nonla-splitter-panel min-h-0 min-w-0 overflow-auto", hidden && "pointer-events-none", classNames?.panel, panel.className)}
+              style={{
+                flexGrow: container <= 0 ? 1 : 0,
+                flexShrink: 0,
+                flexBasis: container <= 0 ? 0 : size,
+                ...(isVertical ? { height: container <= 0 ? undefined : size, width: "100%" } : { width: container <= 0 ? undefined : size, height: "100%" }),
+                ...styles?.panel,
+                ...panel.style,
+              }}
+            >
+              {destroy ? null : panel.children}
+            </div>
+            {index < count - 1 ? (
+              <div
+                className={cn("nonla-splitter-bar relative z-10 shrink-0", isVertical ? "h-0 w-full" : "h-full w-0")}
+                style={styles?.dragger}
+              >
+                <div
+                  role="separator"
+                  aria-orientation={isVertical ? "vertical" : "horizontal"}
+                  aria-valuenow={Math.round(size)}
+                  aria-valuemin={0}
+                  aria-valuemax={Math.round(container)}
+                  tabIndex={resizable ? 0 : -1}
+                  className={cn(
+                    "group absolute z-10 touch-none select-none",
+                    isVertical ? "inset-x-0 top-1/2 h-3 -translate-y-1/2 cursor-row-resize" : "inset-y-0 left-1/2 w-3 -translate-x-1/2 cursor-col-resize",
+                    !resizable && "cursor-default",
+                    classNames?.dragger,
+                  )}
+                  onPointerDown={resizable ? (event) => onBarPointerDown(index, event) : undefined}
+                  onKeyDown={resizable ? (event) => onBarKeyDown(index, event) : undefined}
+                >
+                  <span
+                    className={cn(
+                      "pointer-events-none absolute rounded-full transition-colors",
+                      isVertical ? "inset-x-0 top-1/2 h-0.5 -translate-y-1/2" : "inset-y-0 left-1/2 w-0.5 -translate-x-1/2",
+                      dragging ? "bg-brand" : "bg-border group-hover:bg-brand group-focus-visible:bg-brand",
+                    )}
+                  />
+                  {draggerIcon ? (
+                    <span
+                      className={cn(
+                        "pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-sm bg-card text-muted-foreground shadow-button-outline",
+                        isVertical ? "h-1.5 w-5" : "h-5 w-1.5",
+                      )}
+                    >
+                      {draggerIcon}
+                    </span>
+                  ) : (
+                    <span
+                      className={cn(
+                        "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-sm bg-card shadow-button-outline transition-opacity",
+                        "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100",
+                        dragging && "opacity-100",
+                        isVertical ? "h-1 w-8" : "h-8 w-1",
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+            ) : null}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+type SplitterComponent = typeof SplitterRoot & { Panel: typeof SplitterPanel };
+
+export const Splitter = Object.assign(SplitterRoot, { Panel: SplitterPanel }) as SplitterComponent;
+export { SplitterPanel };

package/src/splitter/sizes.ts

@@ -0,0 +1,67 @@
+export type SplitterSize = number | string;
+
+export function parseSplitterSize(value: SplitterSize | undefined, container: number): number | undefined {
+  if (value == null || container < 0) return undefined;
+  if (typeof value === "number") return Number.isFinite(value) ? Math.max(0, value) : undefined;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+  if (trimmed.endsWith("%")) {
+    const n = Number.parseFloat(trimmed.slice(0, -1));
+    return Number.isFinite(n) ? Math.max(0, (n / 100) * container) : undefined;
+  }
+  const n = Number.parseFloat(trimmed);
+  return Number.isFinite(n) ? Math.max(0, n) : undefined;
+}
+
+export function distributeSizes(declared: Array<number | undefined>, container: number): number[] {
+  const count = declared.length;
+  if (count === 0) return [];
+  if (container <= 0) return declared.map((size) => size ?? 0);
+
+  let known = 0;
+  let unknown = 0;
+  for (const size of declared) {
+    if (size == null) unknown += 1;
+    else known += size;
+  }
+  const leftover = container - known;
+  const fill = unknown > 0 ? Math.max(0, leftover) / unknown : 0;
+  const sizes = declared.map((size) => size ?? fill);
+  const sum = sizes.reduce<number>((total, size) => total + size, 0);
+  if (sum <= 0) return sizes.map(() => container / count);
+  if (Math.abs(sum - container) > 0.5) return sizes.map((size) => (size / sum) * container);
+  return sizes;
+}
+
+export function scaleSizes(sizes: number[], container: number): number[] {
+  const count = sizes.length;
+  if (count === 0 || container <= 0) return sizes;
+  const sum = sizes.reduce<number>((total, size) => total + size, 0);
+  if (sum <= 0) return sizes.map(() => container / count);
+  return sizes.map((size) => (size / sum) * container);
+}
+
+export function applyDrag(
+  left: number,
+  right: number,
+  delta: number,
+  leftMin: number,
+  leftMax: number,
+  rightMin: number,
+  rightMax: number,
+): [number, number] {
+  const pair = left + right;
+  let nextLeft = Math.min(leftMax, Math.max(leftMin, left + delta));
+  let nextRight = pair - nextLeft;
+  if (nextRight < rightMin) {
+    nextRight = rightMin;
+    nextLeft = pair - nextRight;
+  }
+  if (nextRight > rightMax) {
+    nextRight = rightMax;
+    nextLeft = pair - nextRight;
+  }
+  nextLeft = Math.min(leftMax, Math.max(leftMin, nextLeft));
+  nextRight = pair - nextLeft;
+  return [Math.max(0, nextLeft), Math.max(0, nextRight)];
+}