@hanzo/ui 8.0.26 → 8.0.28

package/dist/backends/gui/resizable.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Resizable panel group — native to @hanzo/gui, no `react-resizable-panels`.
+ *
+ * The upstream package dropped `PanelGroup`/`PanelResizeHandle` in v4 (it now
+ * exports `Group`/`Panel`/`Separator` and renamed `direction` → `orientation`),
+ * so every consumer pinned to the old shape is unbuildable. Rather than pin a
+ * dead version we own the primitive: it is ~200 lines of percentage arithmetic
+ * over a flexbox, which is cheaper to keep than a dependency that renames its
+ * public surface.
+ *
+ * Layout is PERCENTAGES, never pixels: a panel's share becomes its `flexGrow`
+ * over a zero `flexBasis`, so the browser/RN layout engine handles container
+ * resize for free (and rounding can never leave a gap). The only thing this
+ * module owns is "where is the boundary" — pure functions (`defaultLayout`,
+ * `resizeAt`) with the min/max/collapse clamping in ONE place.
+ *
+ * Cross-platform by construction: the group measures itself with `onLayout`
+ * (gui implements it on web too), and the handle drives web with Pointer Events
+ * + pointer capture and native with the responder system. Both prop sets are
+ * typed on gui's stacks, and pointer capture is feature-detected, so nothing
+ * here reaches for the DOM on expo. Keyboard resize is arrow keys (Shift for a
+ * fine step). The grab area comes from `touch()`, so it is 44px on web and
+ * native alike while the visual divider stays 4px.
+ */
+import { type ReactNode } from "react";
+import { type XStackProps } from "@hanzo/gui";
+import { defaultLayout, resizeAt, type ResizeDirection } from "./resizable.logic.js";
+export type { ResizeDirection, PanelSpec } from "./resizable.logic.js";
+export { defaultLayout, resizeAt };
+export type ResizablePanelGroupProps = Omit<XStackProps, "onLayout" | "direction"> & {
+    direction: ResizeDirection;
+    autoSaveId?: string;
+    onLayout?: (sizes: number[]) => void;
+    children?: ReactNode;
+};
+export declare function ResizablePanelGroup({ direction, autoSaveId, onLayout, children, ...rest }: ResizablePanelGroupProps): import("react/jsx-runtime").JSX.Element;
+export type ResizablePanelProps = Omit<XStackProps, "id" | "onLayout"> & {
+    id?: string;
+    order?: number;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
+    onResize?: (size: number) => void;
+    children?: ReactNode;
+};
+export declare function ResizablePanel({ id, order, defaultSize, minSize, maxSize, collapsible, collapsedSize, onResize, children, ...rest }: ResizablePanelProps): import("react/jsx-runtime").JSX.Element;
+export type ResizableHandleProps = Omit<XStackProps, "disabled" | "onLayout"> & {
+    withHandle?: boolean;
+    disabled?: boolean;
+};
+export declare function ResizableHandle({ withHandle, disabled, ...rest }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resizable.d.ts.map

package/dist/backends/gui/resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/resizable.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAKhE,OAAO,EACL,aAAa,EACb,QAAQ,EAER,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAA;AAE1B,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAuDlC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,WAAW,EACX,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,SAAS,EAAE,eAAe,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,wBAAwB,2CA0F1B;AAID,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC,GAAG;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAiBrB;AAQD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,WAAW,EACX,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,oBAAoB,2CA4HtB"}

package/dist/backends/gui/resizable.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Resizable panel group — native to @hanzo/gui, no `react-resizable-panels`.
+ *
+ * The upstream package dropped `PanelGroup`/`PanelResizeHandle` in v4 (it now
+ * exports `Group`/`Panel`/`Separator` and renamed `direction` → `orientation`),
+ * so every consumer pinned to the old shape is unbuildable. Rather than pin a
+ * dead version we own the primitive: it is ~200 lines of percentage arithmetic
+ * over a flexbox, which is cheaper to keep than a dependency that renames its
+ * public surface.
+ *
+ * Layout is PERCENTAGES, never pixels: a panel's share becomes its `flexGrow`
+ * over a zero `flexBasis`, so the browser/RN layout engine handles container
+ * resize for free (and rounding can never leave a gap). The only thing this
+ * module owns is "where is the boundary" — pure functions (`defaultLayout`,
+ * `resizeAt`) with the min/max/collapse clamping in ONE place.
+ *
+ * Cross-platform by construction: the group measures itself with `onLayout`
+ * (gui implements it on web too), and the handle drives web with Pointer Events
+ * + pointer capture and native with the responder system. Both prop sets are
+ * typed on gui's stacks, and pointer capture is feature-detected, so nothing
+ * here reaches for the DOM on expo. Keyboard resize is arrow keys (Shift for a
+ * fine step). The grab area comes from `touch()`, so it is 44px on web and
+ * native alike while the visual divider stays 4px.
+ */
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { Separator, XStack } from "@hanzo/gui";
+import { GripVertical } from "@hanzogui/lucide-icons-2";
+import { drag, dragPos, touch } from "./gesture.js";
+import { defaultLayout, resizeAt, } from "./resizable.logic.js";
+export { defaultLayout, resizeAt };
+const webStorage = () => globalThis.localStorage;
+const storeKey = (id) => `hanzo.panels.${id}`;
+function loadStore(id) {
+    if (!id)
+        return {};
+    try {
+        return JSON.parse(webStorage()?.getItem(storeKey(id)) ?? "{}");
+    }
+    catch {
+        return {};
+    }
+}
+function saveStore(id, store) {
+    if (!id)
+        return;
+    try {
+        webStorage()?.setItem(storeKey(id), JSON.stringify(store));
+    }
+    catch {
+        // No storage (native, private mode, quota) — layout is simply not persisted.
+    }
+}
+const GroupContext = /* @__PURE__ */ createContext(null);
+/** A panel's index, or for a handle the index of the panel it follows. */
+const SlotContext = /* @__PURE__ */ createContext(-1);
+export function ResizablePanelGroup({ direction, autoSaveId, onLayout, children, ...rest }) {
+    const axis = direction === "horizontal";
+    const extent = useRef(0);
+    const [store, setStore] = useState({});
+    const slots = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const specs = useMemo(() => slots
+        .filter((el) => el.type === ResizablePanel)
+        .map((el, i) => {
+        const p = el.props;
+        return {
+            id: p.id ?? String(p.order ?? i),
+            defaultSize: p.defaultSize,
+            minSize: p.minSize,
+            maxSize: p.maxSize,
+            collapsible: p.collapsible,
+            collapsedSize: p.collapsedSize,
+            onResize: p.onResize,
+        };
+    }), [slots]);
+    const key = specs.map((s) => s.id).join(",");
+    const sizes = store[key] ?? defaultLayout(specs);
+    useEffect(() => {
+        setStore(loadStore(autoSaveId));
+    }, [autoSaveId]);
+    const setLayout = useCallback((next) => {
+        const merged = { ...store, [key]: next };
+        setStore(merged);
+        saveStore(autoSaveId, merged);
+        onLayout?.(next);
+    }, [autoSaveId, key, onLayout, store]);
+    const prev = useRef([]);
+    useEffect(() => {
+        specs.forEach((s, i) => {
+            if (sizes[i] != null && sizes[i] !== prev.current[i])
+                s.onResize?.(sizes[i]);
+        });
+        prev.current = sizes;
+    }, [specs, sizes]);
+    const value = useMemo(() => ({ direction, specs, sizes, extent, setLayout }), [direction, specs, sizes, setLayout]);
+    let panel = -1;
+    return (_jsx(GroupContext.Provider, { value: value, children: _jsx(XStack, { width: "100%", height: "100%", flexDirection: axis ? "row" : "column", overflow: "hidden", "data-panel-group-direction": direction, onLayout: (e) => {
+                extent.current = axis
+                    ? e.nativeEvent.layout.width
+                    : e.nativeEvent.layout.height;
+            }, ...rest, children: slots.map((el, i) => {
+                if (el.type === ResizablePanel)
+                    panel++;
+                return (_jsx(SlotContext.Provider, { value: panel, children: el }, el.key ?? i));
+            }) }) }));
+}
+export function ResizablePanel({ id, order, defaultSize, minSize, maxSize, collapsible, collapsedSize, onResize, children, ...rest }) {
+    const group = useContext(GroupContext);
+    const index = useContext(SlotContext);
+    const size = group?.sizes[index];
+    return (_jsx(XStack, { flexDirection: "column", overflow: "hidden", flexBasis: 0, grow: size ?? 1, shrink: 1, ...rest, children: children }));
+}
+// ── Handle ────────────────────────────────────────────────────────────────────
+const THICKNESS = 4;
+const KEY_STEP = 5;
+const KEY_STEP_FINE = 1;
+export function ResizableHandle({ withHandle, disabled, ...rest }) {
+    const group = useContext(GroupContext);
+    const boundary = useContext(SlotContext);
+    const [state, setState] = useState("idle");
+    const start = useRef(null);
+    const axis = group?.direction !== "vertical";
+    const off = disabled || !group || boundary < 0 || boundary + 1 >= group.sizes.length;
+    const posOf = useCallback((e) => dragPos(e, axis), [axis]);
+    const begin = useCallback((e) => {
+        if (off || !group)
+            return;
+        start.current = { pos: posOf(e), sizes: group.sizes };
+        setState("drag");
+    }, [group, off, posOf]);
+    const move = useCallback((e) => {
+        const from = start.current;
+        if (!from || !group)
+            return;
+        const px = group.extent.current;
+        if (px <= 0)
+            return;
+        group.setLayout(resizeAt(from.sizes, group.specs, boundary, ((posOf(e) - from.pos) / px) * 100));
+    }, [boundary, group, posOf]);
+    const end = useCallback(() => {
+        start.current = null;
+        setState("idle");
+    }, []);
+    const nudge = useCallback((e) => {
+        if (off || !group)
+            return;
+        const dir = axis
+            ? e.key === "ArrowLeft"
+                ? -1
+                : e.key === "ArrowRight"
+                    ? 1
+                    : 0
+            : e.key === "ArrowUp"
+                ? -1
+                : e.key === "ArrowDown"
+                    ? 1
+                    : 0;
+        if (dir === 0)
+            return;
+        e.preventDefault();
+        group.setLayout(resizeAt(group.sizes, group.specs, boundary, dir * (e.shiftKey ? KEY_STEP_FINE : KEY_STEP)));
+    }, [axis, boundary, group, off]);
+    const hover = useCallback((on) => setState((s) => (s === "drag" ? s : on ? "hover" : "idle")), []);
+    const gesture = drag({ begin, move, end, enabled: !off });
+    return (_jsxs(XStack, { position: "relative", flexDirection: axis ? "column" : "row", items: "center", justify: "center", shrink: 0, width: axis ? THICKNESS : "100%", height: axis ? "100%" : THICKNESS, ...touch(THICKNESS, 44, axis ? "x" : "y"), cursor: off ? "default" : axis ? "col-resize" : "row-resize", tabIndex: off ? -1 : 0, role: "separator", "aria-orientation": axis ? "vertical" : "horizontal", "data-panel-group-direction": group?.direction, "data-resize-handle-state": state, ...gesture, onKeyDown: nudge, onMouseEnter: () => hover(true), onMouseLeave: () => hover(false), ...rest, children: [_jsx(Separator, { vertical: axis, borderColor: state === "idle" ? "$borderColor" : "$color8" }), withHandle && (_jsx(XStack, { position: "absolute", items: "center", justify: "center", width: 12, height: 20, rounded: "$2", bg: "$color5", borderWidth: 1, borderColor: "$borderColor", rotate: axis ? "0deg" : "90deg", children: _jsx(GripVertical, { size: 10 }) }))] }));
+}
+//# sourceMappingURL=resizable.js.map

package/dist/backends/gui/resizable.js.map

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

package/dist/backends/gui/resizable.logic.cjs

@@ -0,0 +1,46 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultLayout = defaultLayout;
+exports.resizeAt = resizeAt;
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(n, hi));
+/** Smallest percentage a panel may take — collapsible panels may go to `collapsedSize`. */
+const floorOf = (s) => s.collapsible ? (s.collapsedSize ?? 0) : (s.minSize ?? 0);
+const ceilOf = (s) => s.maxSize ?? 100;
+/** Starting percentages: honour every `defaultSize`, split the remainder evenly, normalise to 100. PURE. */
+function defaultLayout(specs) {
+    if (specs.length === 0)
+        return [];
+    const claimed = specs.reduce((n, s) => n + (s.defaultSize ?? 0), 0);
+    const free = specs.filter((s) => s.defaultSize == null).length;
+    const each = free > 0 ? Math.max(0, 100 - claimed) / free : 0;
+    const raw = specs.map((s) => s.defaultSize ?? each);
+    const sum = raw.reduce((a, b) => a + b, 0);
+    return sum > 0
+        ? raw.map((v) => (v / sum) * 100)
+        : specs.map(() => 100 / specs.length);
+}
+/**
+ * Move the boundary AFTER panel `i` by `delta` percent. Only the two adjacent
+ * panels change, so their sum is invariant and the layout always totals 100.
+ * Returns the original array when the move is fully clamped. PURE.
+ */
+function resizeAt(sizes, specs, i, delta) {
+    const a = sizes[i];
+    const b = sizes[i + 1];
+    const sa = specs[i];
+    const sb = specs[i + 1];
+    if (a == null || b == null || !sa || !sb)
+        return sizes;
+    const pair = a + b;
+    const lo = Math.max(floorOf(sa), pair - ceilOf(sb));
+    const hi = Math.min(ceilOf(sa), pair - floorOf(sb));
+    if (lo > hi)
+        return sizes;
+    const next = clamp(a + delta, lo, hi);
+    if (next === a)
+        return sizes;
+    const out = sizes.slice();
+    out[i] = next;
+    out[i + 1] = pair - next;
+    return out;
+}

package/dist/backends/gui/resizable.logic.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The panel-sizing math — pure values, no React and no @hanzo/gui, so the
+ * boundary rules can be reasoned about and tested on their own.
+ */
+export type ResizeDirection = "horizontal" | "vertical";
+/** Everything the boundary math needs to know about a panel. */
+export type PanelSpec = {
+    id: string;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
+    onResize?: (size: number) => void;
+};
+/** Starting percentages: honour every `defaultSize`, split the remainder evenly, normalise to 100. PURE. */
+export declare function defaultLayout(specs: PanelSpec[]): number[];
+/**
+ * Move the boundary AFTER panel `i` by `delta` percent. Only the two adjacent
+ * panels change, so their sum is invariant and the layout always totals 100.
+ * Returns the original array when the move is fully clamped. PURE.
+ */
+export declare function resizeAt(sizes: number[], specs: PanelSpec[], i: number, delta: number): number[];
+//# sourceMappingURL=resizable.logic.d.ts.map

package/dist/backends/gui/resizable.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.logic.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/resizable.logic.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AAEvD,gEAAgE;AAChE,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAUD,4GAA4G;AAC5G,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,CAU1D;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EAAE,EACf,KAAK,EAAE,SAAS,EAAE,EAClB,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,GACZ,MAAM,EAAE,CAgBV"}

package/dist/backends/gui/resizable.logic.js

@@ -0,0 +1,43 @@
+'use client';const clamp = (n, lo, hi) => Math.max(lo, Math.min(n, hi));
+/** Smallest percentage a panel may take — collapsible panels may go to `collapsedSize`. */
+const floorOf = (s) => s.collapsible ? (s.collapsedSize ?? 0) : (s.minSize ?? 0);
+const ceilOf = (s) => s.maxSize ?? 100;
+/** Starting percentages: honour every `defaultSize`, split the remainder evenly, normalise to 100. PURE. */
+export function defaultLayout(specs) {
+    if (specs.length === 0)
+        return [];
+    const claimed = specs.reduce((n, s) => n + (s.defaultSize ?? 0), 0);
+    const free = specs.filter((s) => s.defaultSize == null).length;
+    const each = free > 0 ? Math.max(0, 100 - claimed) / free : 0;
+    const raw = specs.map((s) => s.defaultSize ?? each);
+    const sum = raw.reduce((a, b) => a + b, 0);
+    return sum > 0
+        ? raw.map((v) => (v / sum) * 100)
+        : specs.map(() => 100 / specs.length);
+}
+/**
+ * Move the boundary AFTER panel `i` by `delta` percent. Only the two adjacent
+ * panels change, so their sum is invariant and the layout always totals 100.
+ * Returns the original array when the move is fully clamped. PURE.
+ */
+export function resizeAt(sizes, specs, i, delta) {
+    const a = sizes[i];
+    const b = sizes[i + 1];
+    const sa = specs[i];
+    const sb = specs[i + 1];
+    if (a == null || b == null || !sa || !sb)
+        return sizes;
+    const pair = a + b;
+    const lo = Math.max(floorOf(sa), pair - ceilOf(sb));
+    const hi = Math.min(ceilOf(sa), pair - floorOf(sb));
+    if (lo > hi)
+        return sizes;
+    const next = clamp(a + delta, lo, hi);
+    if (next === a)
+        return sizes;
+    const out = sizes.slice();
+    out[i] = next;
+    out[i + 1] = pair - next;
+    return out;
+}
+//# sourceMappingURL=resizable.logic.js.map

package/dist/backends/gui/resizable.logic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.logic.js","sourceRoot":"","sources":["../../../src/backends/gui/resizable.logic.ts"],"names":[],"mappings":"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"}

package/dist/backends/gui/scroll-area.cjs

@@ -0,0 +1,126 @@
+'use client';"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollBar = exports.ScrollArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ScrollArea — the cross-platform (web + native + desktop) scroll surface.
+ *
+ * Scrolling itself is the platform's: @hanzogui/scroll-view's `ScrollView` (a
+ * styled react-native `ScrollView`), so momentum, keyboard, wheel, and
+ * accessibility come from the host and are never reimplemented. What this adds is
+ * the ONE custom scrollbar — the platform indicator is suppressed and `ScrollBar`
+ * draws it from the scroll metrics the viewport reports, so a thumb looks and
+ * drags identically on Chrome, iOS, and Tauri.
+ *
+ * One area scrolls one axis (`horizontal` picks it), so there is exactly one bar
+ * and never a dead one: `ScrollArea` renders `<ScrollBar orientation={axis} />`
+ * and a bar for the other axis has nothing to scroll and renders nothing.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const gesture_1 = require("./gesture.cjs");
+/** Bar thickness, and the thumb's minimum length — both in px. */
+const BAR = 10;
+/** Minimum touch target. The thumb is `BAR` thin, so `touch()` makes up the rest. */
+const TOUCH = 44;
+const ZERO = { offset: 0, viewport: 0, content: 0 };
+const Ctx = /* @__PURE__ */ (0, react_1.createContext)(null);
+const clamp = (n, max) => (n < 0 ? 0 : n > max ? max : n);
+const ScrollBar = /* @__PURE__ */ (0, react_1.forwardRef)(function ScrollBar({ orientation = "vertical", ...props }, ref) {
+    const ctx = (0, react_1.useContext)(Ctx);
+    const [len, setLen] = (0, react_1.useState)(0);
+    const from = (0, react_1.useRef)(null);
+    if (!ctx || ctx.axis !== orientation)
+        return null;
+    const vertical = orientation === "vertical";
+    const { content, viewport, offset } = ctx.track;
+    const scrollable = content - viewport;
+    const overflow = scrollable > 1;
+    const shown = ctx.type === "always"
+        ? true
+        : !overflow
+            ? false
+            : ctx.type === "auto"
+                ? true
+                : ctx.active;
+    const thumb = Math.max(TOUCH, len * (viewport / Math.max(content, 1)));
+    const range = Math.max(len - thumb, 0);
+    const at = overflow ? range * clamp(offset / scrollable, 1) : 0;
+    const gesture = (0, gesture_1.drag)({
+        begin: (e) => {
+            from.current = (0, gesture_1.dragPos)(e, !vertical);
+        },
+        move: (e) => {
+            const start = from.current;
+            if (start === null || range === 0)
+                return;
+            const now = (0, gesture_1.dragPos)(e, !vertical);
+            from.current = now;
+            ctx.scrollBy(((now - start) * scrollable) / range);
+        },
+        end: () => {
+            from.current = null;
+        },
+    });
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: ref, ...(0, slot_1.slot)("scroll-area-scrollbar"), position: "absolute", ...(vertical
+            ? {
+                t: 0,
+                b: 0,
+                ...(ctx.rtl ? { l: 0 } : { r: 0 }),
+                width: BAR,
+                flexDirection: "column",
+            }
+            : { l: 0, r: 0, b: 0, height: BAR, flexDirection: "row" }), p: 1, opacity: shown ? 1 : 0, pointerEvents: shown ? "auto" : "none", onLayout: (e) => setLen(vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)("scroll-area-thumb"), bg: "$borderColor", rounded: BAR, ...(0, gesture_1.touch)(BAR, TOUCH, vertical ? "x" : "y"), ...(vertical
+                ? { width: "100%", height: thumb, y: at }
+                : { height: "100%", width: thumb, x: at }), ...gesture }) }));
+});
+exports.ScrollBar = ScrollBar;
+const ScrollArea = /* @__PURE__ */ (0, react_1.forwardRef)(function ScrollArea({ type = "hover", scrollHideDelay = 600, dir, horizontal = false, children, ...props }, ref) {
+    const viewport = (0, react_1.useRef)(null);
+    const live = (0, react_1.useRef)(ZERO);
+    const [track, setTrack] = (0, react_1.useState)(ZERO);
+    const [active, setActive] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)(null);
+    const axis = horizontal ? "horizontal" : "vertical";
+    const put = (0, react_1.useCallback)((patch) => {
+        const next = { ...live.current, ...patch };
+        live.current = next;
+        setTrack(next);
+    }, []);
+    const clear = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = null;
+    };
+    const hold = () => {
+        clear();
+        setActive(true);
+    };
+    /** Show now, then fade after the delay — the shared reveal for scroll + hover. */
+    const wake = (0, react_1.useCallback)(() => {
+        setActive(true);
+        clear();
+        timer.current = setTimeout(() => setActive(false), scrollHideDelay);
+    }, [scrollHideDelay]);
+    (0, react_1.useEffect)(() => clear, []);
+    const scrollBy = (0, react_1.useCallback)((delta) => {
+        const t = live.current;
+        const next = clamp(t.offset + delta, Math.max(t.content - t.viewport, 0));
+        put({ offset: next });
+        viewport.current?.scrollTo(horizontal
+            ? { x: next, y: 0, animated: false }
+            : { x: 0, y: next, animated: false });
+    }, [horizontal, put]);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ref: ref, ...(0, slot_1.slot)("scroll-area"), position: "relative", overflow: "hidden", onMouseEnter: type === "hover" ? hold : undefined, onMouseLeave: type === "hover" ? wake : undefined, ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.ScrollView, { ref: viewport, ...(0, slot_1.slot)("scroll-area-viewport"), flex: 1, width: "100%", height: "100%", horizontal: horizontal, showsVerticalScrollIndicator: false, showsHorizontalScrollIndicator: false, scrollEventThrottle: 16, onLayout: (e) => put({
+                    viewport: horizontal
+                        ? e.nativeEvent.layout.width
+                        : e.nativeEvent.layout.height,
+                }), onContentSizeChange: (w, h) => put({ content: horizontal ? w : h }), onScroll: (e) => {
+                    const { contentOffset } = e.nativeEvent;
+                    put({ offset: horizontal ? contentOffset.x : contentOffset.y });
+                    wake();
+                }, children: children }), (0, jsx_runtime_1.jsx)(Ctx.Provider, { value: { axis, track, type, active, rtl: dir === "rtl", scrollBy }, children: (0, jsx_runtime_1.jsx)(ScrollBar, { orientation: axis }) })] }));
+});
+exports.ScrollArea = ScrollArea;

package/dist/backends/gui/scroll-area.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ScrollArea — the cross-platform (web + native + desktop) scroll surface.
+ *
+ * Scrolling itself is the platform's: @hanzogui/scroll-view's `ScrollView` (a
+ * styled react-native `ScrollView`), so momentum, keyboard, wheel, and
+ * accessibility come from the host and are never reimplemented. What this adds is
+ * the ONE custom scrollbar — the platform indicator is suppressed and `ScrollBar`
+ * draws it from the scroll metrics the viewport reports, so a thumb looks and
+ * drags identically on Chrome, iOS, and Tauri.
+ *
+ * One area scrolls one axis (`horizontal` picks it), so there is exactly one bar
+ * and never a dead one: `ScrollArea` renders `<ScrollBar orientation={axis} />`
+ * and a bar for the other axis has nothing to scroll and renders nothing.
+ */
+import { type ReactNode } from "react";
+import { type GuiElement, type YStackProps } from "@hanzo/gui";
+export type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+type Axis = "vertical" | "horizontal";
+export type ScrollBarProps = Omit<YStackProps, "children"> & {
+    orientation?: Axis;
+};
+declare const ScrollBar: import("react").ForwardRefExoticComponent<Omit<YStackProps, "children"> & {
+    orientation?: Axis;
+} & import("react").RefAttributes<GuiElement>>;
+export type ScrollAreaProps = Omit<YStackProps, "children"> & {
+    /** When the bar shows: on overflow, always, while scrolling, or on hover. */
+    type?: ScrollAreaType;
+    /** ms the bar lingers after scrolling/hover stops (`scroll` and `hover`). */
+    scrollHideDelay?: number;
+    dir?: "ltr" | "rtl";
+    /** Scroll the x axis instead of the y axis (react-native ScrollView semantics). */
+    horizontal?: boolean;
+    children?: ReactNode;
+};
+declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<YStackProps, "children"> & {
+    /** When the bar shows: on overflow, always, while scrolling, or on hover. */
+    type?: ScrollAreaType;
+    /** ms the bar lingers after scrolling/hover stops (`scroll` and `hover`). */
+    scrollHideDelay?: number;
+    dir?: "ltr" | "rtl";
+    /** Scroll the x axis instead of the y axis (react-native ScrollView semantics). */
+    horizontal?: boolean;
+    children?: ReactNode;
+} & import("react").RefAttributes<GuiElement>>;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/backends/gui/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/scroll-area.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,YAAY,CAAA;AAUnB,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AACnE,KAAK,IAAI,GAAG,UAAU,GAAG,YAAY,CAAA;AAoBrC,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC3D,WAAW,CAAC,EAAE,IAAI,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,SAAS;kBAHC,IAAI;8CAiFnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC5D,6EAA6E;IAC7E,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,UAAU;IAVd,6EAA6E;WACtE,cAAc;IACrB,6EAA6E;sBAC3D,MAAM;UAClB,KAAK,GAAG,KAAK;IACnB,mFAAmF;iBACtE,OAAO;eACT,SAAS;8CA6GrB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}