devnonla-ui 0.1.0 → 0.3.0

package/src/popover/Popover.tsx

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
-import { useAppConfig } from "../app/App";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { type PopperPlacement, placementToRadix } from "../lib/placement";
 import { glassOverlayClass } from "../lib/surface";
@@ -17,14 +17,14 @@ export type PopoverProps = {
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   getPopupContainer?: () => HTMLElement;
-  /** Show arrow pointing at the trigger (antd default for Popconfirm). */
+  /** Show arrow pointing at the trigger (Popconfirm default). */
   arrow?: boolean | { pointAtCenter?: boolean };
   className?: string;
   overlayClassName?: string;
   /** Extra class on the content panel (padding / width). */
   contentClassName?: string;
   style?: CSSProperties;
-  /** antd `styles` — `root`/`body` map to content panel; `container` accepted as alias. */
+  /** `styles` — `root`/`body` map to content panel; `container` accepted as alias. */
   styles?: {
     root?: CSSProperties;
     body?: CSSProperties;
@@ -52,11 +52,11 @@ export function Popover({
   style,
   styles,
 }: PopoverProps) {
+  const hover = trigger === "hover";
   const showArrow = Boolean(arrow);
   const panelStyle = { ...style, ...styles?.root, ...styles?.content, ...styles?.container, ...styles?.body };
-  const app = useAppConfig();
+  const getContainer = usePopupContainer(getPopupContainer);
   const { side, align } = placementToRadix(placement);
-  const hover = trigger === "hover";
   const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);
   const open = openProp ?? innerOpen;
   const enterTimer = useRef<number>(0);
@@ -83,8 +83,6 @@ export function Popover({
     leaveTimer.current = window.setTimeout(() => setOpen(false), mouseLeaveDelay * 1000);
   };
 
-  const container = getPopupContainer ?? app.getPopupContainer;
-
   return (
     <PopoverPrimitive.Root
       open={open}
@@ -96,7 +94,7 @@ export function Popover({
       <PopoverPrimitive.Trigger asChild onMouseEnter={onEnter} onMouseLeave={onLeave}>
         {children}
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal container={container?.()}>
+      <PopoverPrimitive.Portal container={getContainer()}>
         <PopoverPrimitive.Content
           side={side}
           align={align}

package/src/scroll/OverlayScroll.tsx

@@ -3,6 +3,8 @@ import { cn } from "../lib/cn";
 
 export type OverlayScrollVisibility = "hover" | "always";
 
+const HIDE_MS = 1000;
+
 export type OverlayScrollProps = {
   /** `hover` shows the thumb on hover / while scrolling. `always` keeps it visible. */
   visibility?: OverlayScrollVisibility;
@@ -75,7 +77,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
     if (visibility === "hover" && !dragging) {
       setScrolling(true);
       if (hideTimer.current) clearTimeout(hideTimer.current);
-      hideTimer.current = setTimeout(() => setScrolling(false), 700);
+      hideTimer.current = setTimeout(() => setScrolling(false), HIDE_MS);
     }
     onScroll?.(e);
   };
@@ -109,7 +111,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
       window.removeEventListener("pointercancel", onUp, true);
       setDragging(false);
       if (hideTimer.current) clearTimeout(hideTimer.current);
-      hideTimer.current = setTimeout(() => setScrolling(false), 700);
+      hideTimer.current = setTimeout(() => setScrolling(false), HIDE_MS);
     };
     window.addEventListener("pointermove", onMove, true);
     window.addEventListener("pointerup", onUp, true);
@@ -131,7 +133,7 @@ export function OverlayScroll({ visibility = "hover", className, innerClassName,
             "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",
+              : "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)` }}
         />

package/src/segmented/Segmented.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlHeightVar, controlRadiusVar, getSizeTokens, normalizeSize } from "../lib/sizes";
+import { type ControlSize, controlHeightVar, controlRadiusVar, getSizeTokens, useControlSize } from "../lib/sizes";
 
 export type SegmentedOption<V extends string | number = string | number> = V | { label: ReactNode; value: V; disabled?: boolean; icon?: ReactNode };
 
@@ -23,16 +23,17 @@ function norm<V extends string | number>(opt: SegmentedOption<V>): { label: Reac
 export function Segmented<V extends string | number = string | number>({ options, value, defaultValue, onChange, size, block, disabled, className }: SegmentedProps<V>) {
   const items = options.map((o) => norm(o));
   const current = value ?? defaultValue ?? items[0]?.value;
-  const tok = getSizeTokens(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
   const itemPadX = Math.max(tok.paddingInline - 4, 6);
-  const radius = controlRadiusVar(size);
+  const radius = controlRadiusVar(resolvedSize);
 
   return (
     <div
       className={cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-lg bg-brand-50 p-0.5", block && "flex w-full", className)}
       role="tablist"
       style={{ borderRadius: radius }}
-      data-size={normalizeSize(size)}
+      data-size={resolvedSize}
     >
       {items.map((item) => {
         const active = item.value === current;
@@ -49,7 +50,7 @@ export function Segmented<V extends string | number = string | number>({ options
               active ? "bg-brand-200 text-foreground" : "bg-transparent text-foreground hover:bg-brand-100",
             )}
             style={{
-              height: `max(22px, calc(${controlHeightVar(size)} - 4px))`,
+              height: `max(22px, calc(${controlHeightVar(resolvedSize)} - 4px))`,
               paddingLeft: itemPadX,
               paddingRight: itemPadX,
               fontSize: tok.fontSize,

package/src/select/Select.tsx

@@ -11,8 +11,9 @@ import {
   useRef,
   useState,
 } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass } from "../lib/sizes";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";
 
 export type SelectValue = string | number;
@@ -26,10 +27,10 @@ export type SelectOptionConfig = {
 export type SelectProps = {
   value?: SelectValue | null;
   defaultValue?: SelectValue | null;
-  // antd interop: call sites often use (v: string) => void
+  // Call sites often use (v: string) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (value: any) => void;
-  // Looser antd interop — many call sites type handlers as `(v: string) => void`.
+  // Many call sites type handlers as `(v: string) => void`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options?: SelectOptionConfig[];
   placeholder?: string;
@@ -42,7 +43,7 @@ export type SelectProps = {
   className?: string;
   popupClassName?: string;
   children?: ReactNode;
-  /** antd alias */
+  /** Alias of `onChange` for a single pick. */
   onSelect?: (value: SelectValue) => void;
 };
 
@@ -104,6 +105,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const searchRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const resolvedSize = useControlSize(size);
+  const portal = usePopupContainer()?.();
 
   const searchable = Boolean(showSearch);
   const filterProp =
@@ -219,7 +222,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
             controlStatusClass(status),
             className,
           )}
-          style={controlFieldStyle(size)}
+          style={controlFieldStyle(resolvedSize)}
           onKeyDown={onTriggerKey}
         >
           <span className={cn("min-w-0 flex-1 truncate", selected == null || selected === "" ? "text-quaternary-foreground" : "")}>
@@ -244,7 +247,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
           <Chevron />
         </button>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portal}>
         <PopoverPrimitive.Content
           align="start"
           sideOffset={4}

package/src/shimmer/Shimmer.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type ShimmerProps = HTMLAttributes<HTMLSpanElement> & {
+  /** When false, children render as static text. Default true. */
+  active?: boolean;
+  children?: ReactNode;
+};
+
+/** Sweep highlight on live status text (Thinking, Fetching, …). */
+export function Shimmer({ active = true, className, children, ...rest }: ShimmerProps) {
+  return (
+    <span className={cn(active && "nonla-shimmer", className)} aria-busy={active || undefined} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/skeleton/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { cn } from "../lib/cn";
 
 export type SkeletonProps = {
@@ -20,8 +20,8 @@ function SkeletonRoot({ active = true, loading = true, paragraph = true, title =
       {avatar ? <div className={cn("size-10 shrink-0 rounded-full bg-secondary", pulse)} /> : null}
       <div className="flex-1 space-y-2">
         {title ? <div className={cn("h-4 w-1/3 rounded bg-secondary", pulse)} /> : null}
-        {Array.from({ length: rows }).map((_, i) => (
-          <div key={i} className={cn("h-3 rounded bg-secondary", pulse, i === rows - 1 ? "w-2/3" : "w-full")} />
+        {Array.from({ length: rows }, (_, i) => `sk-${i}`).map((key, i) => (
+          <div key={key} className={cn("h-3 rounded bg-secondary", pulse, i === rows - 1 ? "w-2/3" : "w-full")} />
         ))}
       </div>
     </div>

package/src/spin/Spin.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../lib/cn";
-import { type ControlSize, getSizeTokens } from "../lib/sizes";
+import { type ControlSize, getSizeTokens, useControlSize } from "../lib/sizes";
 
 export type SpinVariant = "default" | "agent" | "subAgent";
 
@@ -35,6 +35,8 @@ type Cell = number; // 0..8 on a 3×3 grid
 /** Snake = [head, mid, tail] — always 3 orthogonally adjacent cells. */
 type Snake = [Cell, Cell, Cell];
 
+const MATRIX_CELLS = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
+
 const NEIGHBORS: Record<number, number[]> = {
   0: [1, 3],
   1: [0, 2, 4],
@@ -103,8 +105,8 @@ function MatrixSnake({ size, tickMs = 220 }: { size: ControlSize | undefined; ti
       }}
       aria-hidden
     >
-      {Array.from({ length: 9 }, (_, i) => (
-        <span key={`c${i % 3}-r${Math.floor(i / 3)}`} className={cn("nonla-spin-matrix-cell", lit.has(i) && "is-on")} />
+      {MATRIX_CELLS.map((cell) => (
+        <span key={cell} className={cn("nonla-spin-matrix-cell", lit.has(cell) && "is-on")} />
       ))}
     </span>
   );
@@ -138,10 +140,11 @@ function Indicator({
 }
 
 export function Spin({ spinning = true, tip, size, variant = "default", indicator, children, className }: SpinProps) {
+  const resolvedSize = useControlSize(size);
   if (children == null) {
     return (
       <div className={cn("inline-flex flex-col items-center gap-2", className)} role={spinning ? "status" : undefined} aria-live={spinning ? "polite" : undefined}>
-        {spinning ? <Indicator size={size} variant={variant} indicator={indicator} /> : null}
+        {spinning ? <Indicator size={resolvedSize} variant={variant} indicator={indicator} /> : null}
         {tip ? <span className="text-xs text-muted-foreground">{tip}</span> : null}
       </div>
     );
@@ -151,7 +154,7 @@ export function Spin({ spinning = true, tip, size, variant = "default", indicato
       {children}
       {spinning ? (
         <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-background/50" role="status" aria-live="polite">
-          <Indicator size={size} variant={variant} indicator={indicator} />
+          <Indicator size={resolvedSize} variant={variant} indicator={indicator} />
           {tip ? <span className="text-xs text-muted-foreground">{tip}</span> : null}
         </div>
       ) : null}

package/src/splitter/Splitter.tsx

@@ -0,0 +1,330 @@
+import {
+  Children,
+  Fragment,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../lib/cn";
+import { applyDrag, distributeSizes, parseSplitterSize, scaleSizes, type SplitterSize } 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)];
+}