@once-ui-system/core 1.8.3 → 2.0.0-alpha.0

package/dist/components/Skeleton.d.ts

@@ -2,9 +2,22 @@ import React from "react";
 import { Flex } from ".";
 interface SkeletonProps extends React.ComponentProps<typeof Flex> {
     shape: "line" | "circle" | "block";
-    width?: "xl" | "l" | "m" | "s" | "xs";
-    height?: "xl" | "l" | "m" | "s" | "xs";
-    delay?: "1" | "2" | "3" | "4" | "5" | "6";
+    /**
+     * The scale: height for a `line`, diameter for a `circle`, ignored by a
+     * `block` (which fills its container).
+     *
+     * Width is deliberately not here. Skeleton extends Flex, so width is a
+     * layout concern expressed the same way as on any other element —
+     * `width="80%"`, `maxWidth={24}` — instead of a second five-step scale that
+     * only meant percentages.
+     */
+    size?: "xl" | "l" | "m" | "s" | "xs";
+    /**
+     * Animation offset in milliseconds, for staggering a group of skeletons.
+     * Previously a "1".."6" index into six fixed classes, which is why it read
+     * as a step rather than the duration it actually is.
+     */
+    delay?: number;
     style?: React.CSSProperties;
     className?: string;
 }

package/dist/components/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoBrC,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkBrC,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Skeleton.js

@@ -4,8 +4,8 @@ import { forwardRef } from "react";
 import classNames from "clsx";
 import styles from "./Skeleton.module.scss";
 import { Flex } from ".";
-const Skeleton = forwardRef(({ shape = "line", width = "m", height = "m", delay, style, className, ...props }, ref) => {
-    return (_jsx(Flex, { ...props, ref: ref, style: style, radius: shape === "line" || shape === "circle" ? "full" : undefined, inline: true, className: classNames(styles.skeleton, styles[shape], width && styles["w-" + width], height && styles["h-" + height], delay && styles["delay-" + delay], className) }));
+const Skeleton = forwardRef(({ shape = "line", size = "m", delay, style, className, ...props }, ref) => {
+    return (_jsx(Flex, { ...props, ref: ref, style: delay !== undefined ? { animationDelay: `${delay}ms`, ...style } : style, radius: shape === "line" || shape === "circle" ? "full" : undefined, inline: true, className: classNames(styles.skeleton, styles[shape], size && styles["size-" + size], className) }));
 });
 Skeleton.displayName = "Skeleton";
 export { Skeleton };

package/dist/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAWzB,MAAM,QAAQ,GAA4B,UAAU,CAClD,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxF,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnE,MAAM,QACN,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,QAAQ,EACf,MAAM,CAAC,KAAK,CAAC,EACb,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,EAC7B,MAAM,IAAI,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,EAC/B,KAAK,IAAI,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,EACjC,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAwBzB,MAAM,QAAQ,GAA4B,UAAU,CAClD,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,GAAG,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EAC/E,MAAM,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnE,MAAM,QACN,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,QAAQ,EACf,MAAM,CAAC,KAAK,CAAC,EACb,IAAI,IAAI,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,EAC9B,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Skeleton.module.scss

@@ -10,30 +10,6 @@
     }
 }
 
-.delay-1 {
-    animation-delay: 0.1s;
-}
-
-.delay-2 {
-    animation-delay: 0.2s;
-}
-
-.delay-3 {
-    animation-delay: 0.3s;
-}
-
-.delay-4 {
-    animation-delay: 0.4s;
-}
-
-.delay-5 {
-    animation-delay: 0.5s;
-}
-
-.delay-6 {
-    animation-delay: 0.6s;
-}
-
 .skeleton {
     animation-name: skeleton-loading;
     animation-duration: 1.5s;
@@ -44,77 +20,64 @@
         height: 100%;
     }
 
+    /* For a line the scale is height; width is a layout concern and comes from
+       Flex, so a caller writes width="80%" rather than picking from a scale. */
     &.line {
-        &.h-xs {
+        &.size-xs {
             height: var(--static-space-8);
             min-height: var(--static-space-8);
         }
-        &.h-s {
+        &.size-s {
             height: var(--static-space-12);
             min-height: var(--static-space-12);
         }
-        &.h-m {
+        &.size-m {
             height: var(--static-space-16);
             min-height: var(--static-space-16);
         }
-        &.h-l {
+        &.size-l {
             height: var(--static-space-20);
             min-height: var(--static-space-20);
         }
-        &.h-xl {
+        &.size-xl {
             height: var(--static-space-24);
             min-height: var(--static-space-24);
         }
-
-        &.w-xs {
-            width: 25%;
-        }
-        &.w-s {
-            width: 33%;
-        }
-        &.w-m {
-            width: 50%;
-        }
-        &.w-l {
-            width: 75%;
-        }
-        &.w-xl {
-            width: 100%;
-        }
     }
 
+    /* For a circle the scale is the diameter, so it drives both axes. */
     &.circle {
         border-radius: var(--radius-full);
 
-        &.w-xs {
+        &.size-xs {
             width: var(--static-space-20);
             min-width: var(--static-space-20);
             height: var(--static-space-20);
             min-height: var(--static-space-20);
         }
-        &.w-s {
+        &.size-s {
             width: var(--static-space-24);
             min-width: var(--static-space-24);
             height: var(--static-space-24);
             min-height: var(--static-space-24);
         }
-        &.w-m {
+        &.size-m {
             width: var(--static-space-32);
             min-width: var(--static-space-32);
             height: var(--static-space-32);
             min-height: var(--static-space-32);
         }
-        &.w-l {
+        &.size-l {
             width: var(--static-space-40);
             min-width: var(--static-space-40);
             height: var(--static-space-40);
             min-height: var(--static-space-40);
         }
-        &.w-xl {
+        &.size-xl {
             width: var(--static-space-160);
             min-width: var(--static-space-160);
             height: var(--static-space-160);
             min-height: var(--static-space-160);
         }
     }
-}
+}

package/dist/components/SplitView.d.ts

@@ -1,13 +1,33 @@
-import { Row } from '.';
-import { ReactNode } from 'react';
+import type React from "react";
+import { type ReactNode } from "react";
+import { Row } from ".";
+import { type BreakpointKey } from "../contexts";
 interface SplitViewProps extends React.ComponentProps<typeof Row> {
     leftPanel: ReactNode;
     rightPanel: ReactNode;
+    /**
+     * Tab labels for the collapsed layout. Without them the split still
+     * collapses, but the tabs read "1" and "2" — so pass these whenever
+     * `collapseBelow` is in play.
+     */
+    labels?: {
+        left: string;
+        right: string;
+    };
+    /**
+     * At or below this breakpoint the split becomes tabs showing one panel at a
+     * time. A drag-resizable split is a poor pattern on a phone whichever way it
+     * is oriented: the panes are too small to be useful at any ratio, and a
+     * drag handle competes with page scrolling. Pass `false` to keep the split
+     * at every size.
+     */
+    collapseBelow?: BreakpointKey | false;
+    /** Starting ratio for the first panel, 0–1. */
     defaultSplit?: number;
     minSplit?: number;
     maxSplit?: number;
 }
-declare function SplitView({ leftPanel, rightPanel, defaultSplit, minSplit, maxSplit, ...flex }: SplitViewProps): import("react/jsx-runtime").JSX.Element;
+declare function SplitView({ leftPanel, rightPanel, labels, collapseBelow, defaultSplit, minSplit, maxSplit, ...flex }: SplitViewProps): React.JSX.Element;
 declare namespace SplitView {
     var displayName: string;
 }

package/dist/components/SplitView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitView.d.ts","sourceRoot":"","sources":["../../src/components/SplitView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAgB,MAAM,GAAG,CAAC;AACtC,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/D,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC;IAC/D,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkDD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,UAAU,EACV,YAAkB,EAClB,QAAc,EACd,QAAc,EACd,GAAG,IAAI,EACR,EAAE,cAAc,2CAsFhB;kBA7FQ,SAAS;;;AAiGlB,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"SplitView.d.ts","sourceRoot":"","sources":["../../src/components/SplitView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AACjF,OAAO,EAAgB,GAAG,EAAoB,MAAM,GAAG,CAAC;AACxD,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,aAAa,CAAC;AAE5D,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC;IAC/D,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC;IACtC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA2DD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,aAAmB,EACnB,YAAkB,EAClB,QAAc,EACd,QAAc,EACd,GAAG,IAAI,EACR,EAAE,cAAc,qBA6HhB;kBAtIQ,SAAS;;;AA0IlB,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/SplitView.js

@@ -1,78 +1,110 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row, Card, Column } from '.';
-import { useState, useEffect, useRef } from 'react';
-function useResizeHandle(containerRef, direction) {
-    const [splitRatio, setSplitRatio] = useState(0.3);
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Card, Column, Row, SegmentedControl } from ".";
+import { useLayout } from "../contexts";
+/**
+ * Drag state for the divider.
+ *
+ * Pointer events rather than mouse events: `mousedown`/`mousemove` never fire
+ * for touch, which is why the divider could not be dragged on a touch device at
+ * all. Pointer events cover mouse, touch and pen in one path, and pointer
+ * capture keeps the drag alive when the finger or cursor leaves the handle.
+ */
+function useResizeHandle(containerRef, direction, { defaultSplit, minSplit, maxSplit }) {
+    const [splitRatio, setSplitRatio] = useState(defaultSplit);
     const [isDragging, setIsDragging] = useState(false);
+    const applyClientPosition = useCallback((clientX, clientY) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const ratio = direction === "row"
+            ? (clientX - rect.left) / rect.width
+            : (clientY - rect.top) / rect.height;
+        if (!Number.isFinite(ratio))
+            return;
+        setSplitRatio(Math.max(minSplit, Math.min(maxSplit, ratio)));
+    }, [containerRef, direction, minSplit, maxSplit]);
     useEffect(() => {
-        const handleMouseMove = (e) => {
-            if (!isDragging || !containerRef.current)
-                return;
-            const container = containerRef.current;
-            const rect = container.getBoundingClientRect();
-            let newRatio;
-            if (direction === 'row') {
-                // Horizontal split: calculate from left
-                newRatio = (e.clientX - rect.left) / rect.width;
-            }
-            else {
-                // Vertical split: calculate from top
-                newRatio = (e.clientY - rect.top) / rect.height;
-            }
-            setSplitRatio(Math.max(0.2, Math.min(0.8, newRatio)));
-        };
-        const handleMouseUp = () => {
-            setIsDragging(false);
-        };
-        if (isDragging) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-            document.body.style.cursor = direction === 'row' ? 'col-resize' : 'row-resize';
-            document.body.style.userSelect = 'none';
-        }
+        if (!isDragging)
+            return;
+        const onMove = (e) => applyClientPosition(e.clientX, e.clientY);
+        const onUp = () => setIsDragging(false);
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
+        document.addEventListener("pointercancel", onUp);
+        const previousCursor = document.body.style.cursor;
+        const previousSelect = document.body.style.userSelect;
+        document.body.style.cursor = direction === "row" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
         return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
+            document.removeEventListener("pointermove", onMove);
+            document.removeEventListener("pointerup", onUp);
+            document.removeEventListener("pointercancel", onUp);
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousSelect;
         };
-    }, [isDragging, direction]);
-    return { splitRatio, isDragging, setIsDragging };
+    }, [isDragging, direction, applyClientPosition]);
+    return { splitRatio, setSplitRatio, isDragging, setIsDragging, applyClientPosition };
 }
-function SplitView({ leftPanel, rightPanel, defaultSplit = 0.3, minSplit = 0.2, maxSplit = 0.8, ...flex }) {
+function SplitView({ leftPanel, rightPanel, labels, collapseBelow = "s", defaultSplit = 0.3, minSplit = 0.2, maxSplit = 0.8, ...flex }) {
     const containerRef = useRef(null);
-    const [direction, setDirection] = useState('row');
-    const { splitRatio, isDragging, setIsDragging } = useResizeHandle(containerRef, direction);
-    // Detect direction from flex props or responsive breakpoints
+    const [direction, setDirection] = useState("row");
+    const { maxWidth } = useLayout();
+    const [activePanel, setActivePanel] = useState("left");
+    const { splitRatio, setSplitRatio, isDragging, setIsDragging, applyClientPosition } = useResizeHandle(containerRef, direction, { defaultSplit, minSplit, maxSplit });
     useEffect(() => {
         const updateDirection = () => {
             if (!containerRef.current)
                 return;
-            const computedStyle = window.getComputedStyle(containerRef.current);
-            const flexDir = computedStyle.flexDirection;
-            setDirection(flexDir === 'column' ? 'column' : 'row');
+            const flexDir = window.getComputedStyle(containerRef.current).flexDirection;
+            setDirection(flexDir === "column" ? "column" : "row");
         };
         updateDirection();
-        window.addEventListener('resize', updateDirection);
-        return () => window.removeEventListener('resize', updateDirection);
+        window.addEventListener("resize", updateDirection);
+        return () => window.removeEventListener("resize", updateDirection);
     }, []);
-    const isHorizontal = direction === 'row';
-    const splitPercentage = `${splitRatio * 100}%`;
+    const collapsed = collapseBelow !== false && maxWidth(collapseBelow);
+    if (collapsed) {
+        const leftLabel = labels?.left ?? "1";
+        const rightLabel = labels?.right ?? "2";
+        return (_jsxs(Column, { fill: true, gap: "12", ...flex, children: [_jsx(SegmentedControl, { fillWidth: true, buttons: [
+                        { value: "left", label: leftLabel },
+                        { value: "right", label: rightLabel },
+                    ], value: activePanel, onChange: (value) => setActivePanel(value === "right" ? "right" : "left") }), _jsx(Column, { fill: true, overflowY: "auto", minHeight: 0, children: activePanel === "left" ? leftPanel : rightPanel })] }));
+    }
+    const isHorizontal = direction === "row";
+    const step = 0.05;
     return (_jsxs(Row, { ref: containerRef, fill: true, ...flex, children: [_jsx(Column, { fill: true, style: {
-                    [isHorizontal ? 'width' : 'height']: splitPercentage,
-                    [isHorizontal ? 'minWidth' : 'minHeight']: 0,
-                    overflow: 'auto',
-                }, children: leftPanel }), _jsx(Row, { fillHeight: isHorizontal, fillWidth: !isHorizontal, minWidth: isHorizontal ? "12" : undefined, minHeight: !isHorizontal ? "12" : undefined, paddingX: isHorizontal ? "8" : undefined, paddingY: !isHorizontal ? "8" : undefined, center: true, onMouseDown: () => setIsDragging(true), style: {
-                    cursor: isHorizontal ? 'col-resize' : 'row-resize',
-                    userSelect: 'none',
+                    [isHorizontal ? "width" : "height"]: `${splitRatio * 100}%`,
+                    [isHorizontal ? "minWidth" : "minHeight"]: 0,
+                    overflow: "auto",
+                }, children: leftPanel }), _jsx(Row, { fillHeight: isHorizontal, fillWidth: !isHorizontal, minWidth: isHorizontal ? "12" : undefined, minHeight: !isHorizontal ? "12" : undefined, paddingX: isHorizontal ? "8" : undefined, paddingY: !isHorizontal ? "8" : undefined, center: true, 
+                // Keyboard-operable: a pointer-only divider is unreachable without one.
+                role: "separator", "aria-orientation": isHorizontal ? "vertical" : "horizontal", "aria-valuenow": Math.round(splitRatio * 100), "aria-valuemin": Math.round(minSplit * 100), "aria-valuemax": Math.round(maxSplit * 100), "aria-label": "Resize panels", tabIndex: 0, onPointerDown: (event) => {
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    setIsDragging(true);
+                    applyClientPosition(event.clientX, event.clientY);
+                }, onKeyDown: (event) => {
+                    const back = isHorizontal ? "ArrowLeft" : "ArrowUp";
+                    const forward = isHorizontal ? "ArrowRight" : "ArrowDown";
+                    if (event.key !== back && event.key !== forward)
+                        return;
+                    event.preventDefault();
+                    const next = splitRatio + (event.key === forward ? step : -step);
+                    setSplitRatio(Math.max(minSplit, Math.min(maxSplit, next)));
+                }, style: {
+                    cursor: isHorizontal ? "col-resize" : "row-resize",
+                    userSelect: "none",
+                    touchAction: "none",
                 }, children: _jsx(Row, { fillWidth: isHorizontal, fillHeight: !isHorizontal, height: isHorizontal ? 8 : undefined, width: !isHorizontal ? 8 : undefined, children: _jsx(Card, { fill: true, background: isDragging ? "neutral-strong" : "neutral-weak", border: "neutral-alpha-weak", radius: "full", style: {
-                            cursor: isHorizontal ? 'col-resize' : 'row-resize',
-                            transition: 'background 0.2s ease',
+                            cursor: isHorizontal ? "col-resize" : "row-resize",
+                            transition: "background 0.2s ease",
                         } }) }) }), _jsx(Column, { fill: true, style: {
-                    [isHorizontal ? 'width' : 'height']: `${(1 - splitRatio) * 100}%`,
-                    [isHorizontal ? 'minWidth' : 'minHeight']: 0,
-                    overflow: 'auto',
+                    [isHorizontal ? "width" : "height"]: `${(1 - splitRatio) * 100}%`,
+                    [isHorizontal ? "minWidth" : "minHeight"]: 0,
+                    overflow: "auto",
                 }, children: rightPanel })] }));
 }
 SplitView.displayName = "SplitView";

package/dist/components/SplitView.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitView.js","sourceRoot":"","sources":["../../src/components/SplitView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SplitView.js","sourceRoot":"","sources":["../../src/components/SplitView.tsx"],"names":[],"mappings":"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"}

package/dist/components/StyleOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyleOverlay.d.ts","sourceRoot":"","sources":["../../src/components/StyleOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAc,IAAI,EAAc,MAAM,GAAG,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,2HAsDjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StyleOverlay.d.ts","sourceRoot":"","sources":["../../src/components/StyleOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAc,IAAI,EAAc,MAAM,GAAG,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,2HAuDjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/StyleOverlay.js

@@ -10,7 +10,7 @@ const StyleOverlay = forwardRef(({ iconButtonProps, children, zIndex = 2, ...res
     };
     return (_jsxs(Flex, { ref: ref, position: "static", zIndex: zIndex, children: [!isOpen && _jsx(Flex, { onClick: togglePanel, children: children }), _jsxs(Flex, { as: "aside", zIndex: 3, className: `${styles.panel} ${isOpen && styles.open}`, maxWidth: 28, style: {
                     maxHeight: "calc(100% - var(--static-space-4))",
-                }, fillHeight: true, position: "absolute", shadow: "xl", top: "2", right: "2", transition: "macro-medium", background: "page", overflow: "hidden", radius: "xl", border: "neutral-medium", ...rest, children: [_jsx(StylePanel, { fill: true, overflowY: "scroll", padding: "8" }), _jsxs(Flex, { position: "absolute", paddingTop: "8", paddingRight: "12", top: "0", right: "0", children: [_jsx(Background, { position: "absolute", top: "0", right: "8", left: undefined, width: 8, height: 4, mask: { x: 100, y: 0, radius: 7 }, dots: { display: true, size: "2", color: "page-background" } }), _jsx(IconButton, { variant: "secondary", onClick: togglePanel, icon: "close", ...iconButtonProps })] })] })] }));
+                }, fillHeight: true, position: "absolute", shadow: "xl", top: "2", right: "2", transition: "macro-medium", background: "page", overflow: "hidden", radius: "xl", border: "neutral-medium", ...rest, children: [_jsx(StylePanel, { fill: true, overflowY: "scroll", padding: "8" }), _jsxs(Flex, { position: "absolute", paddingTop: "8", paddingRight: "12", top: "0", right: "0", children: [_jsx(Background, { position: "absolute", top: "0", right: "8", left: undefined, width: 8, height: 4, mask: { x: 100, y: 0, radius: 7 }, dots: { display: true, size: "2", color: "page-background" } }), _jsx(IconButton, { variant: "secondary", onClick: togglePanel, icon: "close", "aria-label": "Close style panel", ...iconButtonProps })] })] })] }));
 });
 StyleOverlay.displayName = "StyleOverlay";
 export { StyleOverlay };

package/dist/components/StyleOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyleOverlay.js","sourceRoot":"","sources":["../../src/components/StyleOverlay.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAC7D,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAShD,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,aAC7C,CAAC,MAAM,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,YAAG,QAAQ,GAAQ,EACzD,MAAC,IAAI,IACH,EAAE,EAAC,OAAO,EACV,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,EACrD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,oCAAoC;iBAChD,EACD,UAAU,QACV,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,IAAI,EACX,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,UAAU,EAAC,cAAc,EACzB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAC,IAAI,EACX,MAAM,EAAC,gBAAgB,KACnB,IAAI,aAER,KAAC,UAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,GAAG,GAAG,EAClD,MAAC,IAAI,IAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,aAC1E,KAAC,UAAU,IACT,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,EACT,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAC5D,EACF,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,OAAO,KACR,eAAe,GACnB,IACG,IACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StyleOverlay.js","sourceRoot":"","sources":["../../src/components/StyleOverlay.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAC7D,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAShD,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,aAC7C,CAAC,MAAM,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,YAAG,QAAQ,GAAQ,EACzD,MAAC,IAAI,IACH,EAAE,EAAC,OAAO,EACV,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,EACrD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,oCAAoC;iBAChD,EACD,UAAU,QACV,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,IAAI,EACX,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,UAAU,EAAC,cAAc,EACzB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAC,IAAI,EACX,MAAM,EAAC,gBAAgB,KACnB,IAAI,aAER,KAAC,UAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,GAAG,GAAG,EAClD,MAAC,IAAI,IAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,aAC1E,KAAC,UAAU,IACT,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,EACT,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAC5D,EACF,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,OAAO,gBACL,mBAAmB,KACtB,eAAe,GACnB,IACG,IACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/StylePanel.d.ts

@@ -1,8 +1,49 @@
-import { Flex } from ".";
-interface StylePanelProps extends React.ComponentProps<typeof Flex> {
-    style?: React.CSSProperties;
-    className?: string;
+import { type StylePanelRootProps, type StylePanelVisibility } from "./StylePanelSections";
+export type { StylePanelValue, StylePanelVisibility, StylePanelRootProps, StyleRowProps, StyleGroupProps, } from "./StylePanelSections";
+export { useStylePanel } from "./StylePanelSections";
+export interface StylePanelProps extends StylePanelRootProps {
+    /** Hide whole sections or individual rows. Omitted keys stay visible. */
+    visibility?: StylePanelVisibility;
+    /**
+     * Restated from `StylePanelRootProps` — indexed so the types stay tied to
+     * one declaration — because this is the component's public surface, and an
+     * inherited prop is invisible to anything reading the generated spec.
+     */
+    value?: StylePanelRootProps["value"];
+    onChange?: StylePanelRootProps["onChange"];
 }
-declare const StylePanel: import("react").ForwardRefExoticComponent<Omit<StylePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export { StylePanel };
+declare const StylePanelWithSections: import("react").ForwardRefExoticComponent<Omit<StylePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<StylePanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: ({ title, description, children, ...rest }: import("./StylePanelSections").StyleGroupProps) => import("react").JSX.Element;
+    Row: ({ label, children, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Theme: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Shape: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Brand: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Accent: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Neutral: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Solid: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Effect: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Surface: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Scaling: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Transition: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    DataStyle: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    BodySize: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    BodyLineHeight: ({ label, ...rest }: import("./StylePanelSections").StyleRowProps) => import("react").JSX.Element;
+    Page: ({ title, description, rows, ...rest }: import("./StylePanelSections").StyleGroupProps & {
+        rows?: Partial<Record<"shape" | "theme", boolean>> | undefined;
+    }) => import("react").JSX.Element;
+    Color: ({ title, description, rows, ...rest }: import("./StylePanelSections").StyleGroupProps & {
+        rows?: Partial<Record<"neutral" | "brand" | "accent", boolean>> | undefined;
+    }) => import("react").JSX.Element;
+    SolidStyle: ({ title, description, rows, ...rest }: import("./StylePanelSections").StyleGroupProps & {
+        rows?: Partial<Record<"solid" | "effect", boolean>> | undefined;
+    }) => import("react").JSX.Element;
+    BodyText: ({ title, description, rows, ...rest }: import("./StylePanelSections").StyleGroupProps & {
+        rows?: Partial<Record<"size" | "lineHeight", boolean>> | undefined;
+    }) => import("react").JSX.Element;
+    Advanced: ({ title, description, rows, ...rest }: import("./StylePanelSections").StyleGroupProps & {
+        rows?: Partial<Record<"transition" | "surface" | "scaling" | "dataStyle", boolean>> | undefined;
+    }) => import("react").JSX.Element;
+};
+export { StylePanelWithSections as StylePanel };
 //# sourceMappingURL=StylePanel.d.ts.map

package/dist/components/StylePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StylePanel.d.ts","sourceRoot":"","sources":["../../src/components/StylePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAuE,MAAM,GAAG,CAAC;AAiB9F,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,QAAA,MAAM,UAAU,yHAufd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"StylePanel.d.ts","sourceRoot":"","sources":["../../src/components/StylePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAErG,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,yEAAyE;IACzE,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAyBD,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAsC,CAAC;AAEnE,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,CAAC"}