@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/resizable/index.jsx

@@ -0,0 +1,537 @@
+// Ported from react-resizable-panels (lib/components/group/Group.tsx, lib/components/group/useDefaultLayout.ts,
+// lib/components/group/useGroupRef.ts, lib/components/group/useGroupCallbackRef.ts, lib/components/panel/Panel.tsx,
+// lib/components/panel/usePanelRef.ts, lib/components/panel/usePanelCallbackRef.ts, lib/components/separator/Separator.tsx,
+// lib/components/separator/SeparatorOverlay.tsx, lib/components/shared/ResizeSeparator.tsx, lib/index.ts, v4.14.3), MIT,
+// © Brian Vaughn.
+// Resizable panel groups (WAI-ARIA window splitter): `Group` (flex container, horizontal / vertical) > `Panel`s with
+// percentage / pixel / font / viewport size constraints, collapsible panels, `Separator`s (keyboard: arrows ±5 %,
+// Home / End, Enter collapses / expands, F6 cycles; pointer drag, double click resets to `defaultSize`), nested groups,
+// imperative handles, `useDefaultLayout` persistence, `resizePreviewMode="separator"` previews.
+// Rivet:
+// - the engine (`./engine/`, upstream `lib/global` + helpers) is unchanged; the components render the same markup /
+//   inline styles / `data-*` attributes and record their props in a serializable `GroupState` (`./mount.ts`).
+// - SSR: the server renders the default layout — `defaultLayout` (e.g. from `useDefaultLayout` with a cookie
+//   storage) as `flex-grow`, else each panel's `defaultSize` as `flex-basis` (unitless strings → `%`) — no layout shift.
+// - resumed pages mount nothing until a separator is hovered / focused / gets a key, the group gets a pointer down,
+//   or an imperative method is called (`preload="visible"`: handler chunks fetched + evaluated when visible).
+//   The first key / pointer down is replayed to the engine. Client renders mount after insertion (upstream).
+// - React refs → `elementRef` (Rivet ref value); `groupRef` / `panelRef` take a `{ current }` object (`useGroupRef()` /
+//   `usePanelRef()`) or a function (`useGroupCallbackRef()` / `usePanelCallbackRef()` setters); the handle is set during
+//   render (also on the server) and boots the engine on demand.
+// - `disabled` / `disableCursor` / `defaultLayout` accept accessors; `orientation`, `resizePreviewMode`, sizes, `id`
+//   are read once (upstream re-registers on change).
+// - `className` → `class` (Panel: inner element, upstream), defaults `rv-ResizableGroup` / `rv-ResizablePanel` /
+//   `rv-ResizableSeparator` when omitted; user `onPointerDown` / `onFocus` / `onBlur` / `onKeyDown` / `onPointerOver`
+//   are chained (upstream overrides `onFocus` / `onBlur`).
+// - Separator `preview`: a function returning content (or `<SeparatorOverlay/>`), called when the preview shows.
+// - `cookieStorage` (Rivet; upstream documents a cookie storage as an example): server-readable (`ssr: true`), so the
+//   stored layout is server-rendered and `useDefaultLayout` registers no client restore effect.
+// - Separator `tabindex` is a lowercase spread key (a resumed spread diffs server attribute names against the keys).
+import { _regionState, createContext, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { Provider, clientEffect } from "@rivetjs/runtime/dom";
+import { splitProps } from "@rivetjs/runtime/props";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { createId } from "../utils/id.js";
+import { activateGroup, currentPreview, ensureGroup, groupMethods, groupPointerDown, panelMethods, read, requestMount, separatorKeyDown, unmountGroup, } from "./mount.js";
+import { parseSizeAndUnit } from "./engine/global/styles/parseSizeAndUnit.js";
+import { getStorageKey } from "./engine/components/group/auto-save/getStorageKey.js";
+import { readLegacyLayout } from "./engine/components/group/readLegacyLayout.js";
+export { isCoarsePointer } from "./engine/global/utils/isCoarsePointer.js";
+/* -------------------------------------------------------------------------------------------------
+ * Context
+ * -----------------------------------------------------------------------------------------------*/
+/** The nearest Group's state (upstream `GroupContext`). */
+export const GroupContext = resumableContext(createContext(null, { id: "rv-resizable-group" }));
+function useGroupContext() {
+    const context = useContext(GroupContext);
+    if (!context)
+        throw new Error("Group Context not found; did you render a Panel or Separator outside of a Group?");
+    return context;
+}
+const isClient = () => globalThis.document !== undefined;
+function assignRef(ref, handle) {
+    if (!ref)
+        return;
+    if (typeof ref === "function")
+        ref(handle);
+    else
+        ref.current = handle;
+}
+const GROUP_KEYS = [
+    "children",
+    "class",
+    "defaultLayout",
+    "disableCursor",
+    "disabled",
+    "elementRef",
+    "groupRef",
+    "id",
+    "onLayoutChange",
+    "onLayoutChanged",
+    "orientation",
+    "resizePreviewMode",
+    "resizeTargetMinimumSize",
+    "style",
+    "onPointerDown",
+];
+/**
+ * A Group wraps a set of resizable Panel components. Group content can be resized _horizontally_ or _vertically_.
+ *
+ * Group elements always include the following attributes:
+ *
+ * ```html
+ * <div data-group data-testid="group-id-prop" id="group-id-prop">
+ * ```
+ */
+export function Group(props) {
+    const [local, rest] = splitProps(props, GROUP_KEYS);
+    const orientation = local.orientation ?? "horizontal";
+    const resizePreviewMode = local.resizePreviewMode ?? "panel";
+    const idProp = local.id;
+    const disabled = local.disabled;
+    const disableCursor = local.disableCursor;
+    const defaultLayout = local.defaultLayout;
+    const minimum = local.resizeTargetMinimumSize;
+    const onLayoutChange = local.onLayoutChange;
+    const onLayoutChanged = local.onLayoutChanged;
+    const state = _regionState(() => ({
+        id: idProp != null ? String(idProp) : createId(),
+        orientation,
+        disabled,
+        disableCursor,
+        defaultLayout,
+        resizePreviewMode,
+        resizeTargetMinimumSize: minimum ?? { coarse: 20, fine: 10 },
+        onLayoutChange,
+        onLayoutChanged,
+        layout: signal(undefined),
+        panels: {},
+        separators: {},
+        overlay: undefined,
+        memory: { lastExpandedPanelSizes: {}, layouts: {} },
+    }));
+    const id = state.id;
+    assignRef(local.groupRef, {
+        getLayout: () => groupMethods(state).getLayout(),
+        setLayout: (layout) => groupMethods(state).setLayout(layout),
+    });
+    // Client render: register with the engine after insertion (upstream layout effect); a resumed group waits for input.
+    if (isClient())
+        clientEffect(() => {
+            untrack(() => ensureGroup(state));
+            return () => unmountGroup(state);
+        });
+    const cls = local.class ?? "rv-ResizableGroup";
+    const userStyle = local.style;
+    const elementRef = local.elementRef;
+    const children = local.children;
+    const onPointerDown = local.onPointerDown;
+    return (<div {...rest} class={cls} data-group="true" data-testid={id} id={id} ref={elementRef} preload="visible" onPointerDown={(event) => {
+            onPointerDown?.(event);
+            groupPointerDown(state, event);
+        }} style={{
+            height: "100%",
+            width: "100%",
+            overflow: "hidden",
+            position: resizePreviewMode === "separator" ? "relative" : undefined,
+            ...userStyle,
+            display: "flex",
+            flexDirection: orientation === "horizontal" ? "row" : "column",
+            flexWrap: "nowrap",
+            // Inform the browser that the library is handling touch events for this element
+            // but still allow users to scroll content within panels in the non-resizing direction
+            // See github.com/bvaughn/react-resizable-panels/issues/662
+            touchAction: orientation === "horizontal" ? "pan-y" : "pan-x",
+        }}>
+      <Provider token={GroupContext} value={state}>
+        {children}
+      </Provider>
+    </div>);
+}
+const PANEL_KEYS = [
+    "children",
+    "class",
+    "collapsedSize",
+    "collapsedThreshold",
+    "collapsible",
+    "defaultSize",
+    "disabled",
+    "elementRef",
+    "groupResizeBehavior",
+    "id",
+    "maxSize",
+    "minSize",
+    "onResize",
+    "panelRef",
+    "style",
+];
+const PROHIBITED_CSS_PROPERTIES = {
+    minHeight: 0,
+    maxHeight: "100%",
+    height: "auto",
+    minWidth: 0,
+    maxWidth: "100%",
+    width: "auto",
+    border: "none",
+    borderWidth: 0,
+    padding: 0,
+    margin: 0,
+};
+/** A size prop as CSS (`flex-basis` before the layout is known): numbers px, unitless strings %. */
+function cssSize(size) {
+    const [value, unit] = parseSizeAndUnit(size);
+    return `${value}${unit}`;
+}
+/** Upstream Panel `panelStyles` (mounted layout → default layout → default size → equal share). */
+function panelStyles(group, id, defaultSize) {
+    const layout = group.layout();
+    if (layout)
+        return { flexGrow: layout[id] ?? 1 };
+    const defaults = read(group.defaultLayout);
+    if (defaults?.[id])
+        return { flexGrow: defaults[id] };
+    if (defaultSize !== undefined)
+        return { flexGrow: undefined, flexShrink: undefined, flexBasis: cssSize(defaultSize) };
+    return { flexGrow: 1 };
+}
+/**
+ * A Panel wraps resizable content and can be configured with min/max size constraints and collapsible behavior.
+ *
+ * Panel elements always include the following attributes:
+ *
+ * ```html
+ * <div data-panel data-testid="panel-id-prop" id="panel-id-prop">
+ * ```
+ *
+ * ⚠️ Panel elements must be direct DOM children of their parent Group elements.
+ */
+export function Panel(props) {
+    const [local, rest] = splitProps(props, PANEL_KEYS);
+    const group = useGroupContext();
+    const idProp = local.id;
+    const disabled = local.disabled;
+    const defaultSize = local.defaultSize;
+    const record = _regionState(() => ({
+        id: idProp != null ? String(idProp) : createId(),
+        idProp,
+        idIsStable: idProp != null,
+        collapsedSize: local.collapsedSize ?? "0%",
+        collapsedThreshold: local.collapsedThreshold,
+        collapsible: local.collapsible ?? false,
+        defaultSize,
+        disabled,
+        groupResizeBehavior: local.groupResizeBehavior ?? "preserve-relative-size",
+        maxSize: local.maxSize ?? "100%",
+        minSize: local.minSize ?? "0%",
+        onResize: local.onResize,
+    }));
+    const id = record.id;
+    group.panels[id] = record;
+    assignRef(local.panelRef, {
+        collapse: () => panelMethods(group, id).collapse(),
+        expand: () => panelMethods(group, id).expand(),
+        getSize: () => panelMethods(group, id).getSize(),
+        isCollapsed: () => panelMethods(group, id).isCollapsed(),
+        resize: (size) => panelMethods(group, id).resize(size),
+    });
+    // Client render: the group re-registers its panels (upstream registerPanel / unregister → forceUpdate).
+    if (isClient())
+        clientEffect(() => {
+            untrack(() => requestMount(group));
+            return () => requestMount(group);
+        });
+    const orientation = group.orientation;
+    const cls = local.class ?? "rv-ResizablePanel";
+    const userStyle = local.style;
+    const elementRef = local.elementRef;
+    const children = local.children;
+    return (<div {...rest} data-disabled={read(disabled) ? "true" : undefined} data-panel="true" data-testid={id} id={id} ref={elementRef} style={{
+            ...PROHIBITED_CSS_PROPERTIES,
+            display: "flex",
+            flexBasis: 0,
+            flexShrink: 1,
+            overflow: "visible",
+            ...panelStyles(group, id, defaultSize),
+        }}>
+      <div class={cls} style={{
+            maxHeight: "100%",
+            maxWidth: "100%",
+            flexGrow: 1,
+            overflow: "auto",
+            ...userStyle,
+            // Inform the browser that the library is handling touch events for this element
+            // but still allow users to scroll content within panels in the non-resizing direction
+            // See github.com/bvaughn/react-resizable-panels/issues/662
+            touchAction: orientation === "horizontal" ? "pan-y" : "pan-x",
+        }}>
+        {children}
+      </div>
+    </div>);
+}
+const SEPARATOR_KEYS = [
+    "children",
+    "class",
+    "disabled",
+    "disableDoubleClick",
+    "elementRef",
+    "id",
+    "preview",
+    "style",
+    "onFocus",
+    "onBlur",
+    "onKeyDown",
+    "onPointerOver",
+];
+/** Upstream ResizeSeparator `data-separator` value. */
+function separatorState(disabled, drag, focused) {
+    if (disabled)
+        return "disabled";
+    if (drag === "active")
+        return "active";
+    return focused ? "focus" : drag;
+}
+/**
+ * Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
+ *
+ * ⚠️ Separator elements must be direct DOM children of their parent Group elements.
+ *
+ * ```html
+ * <div data-separator data-testid="separator-id-prop" id="separator-id-prop" role="separator">
+ * ```
+ */
+export function Separator(props) {
+    const [local, rest] = splitProps(props, SEPARATOR_KEYS);
+    const group = useGroupContext();
+    const idProp = local.id;
+    const disabled = local.disabled;
+    const record = _regionState(() => ({
+        id: idProp != null ? String(idProp) : createId(),
+        disabled,
+        disableDoubleClick: local.disableDoubleClick,
+        preview: local.preview,
+        drag: signal("inactive"),
+        focused: signal(false),
+        aria: signal({}),
+    }));
+    const id = record.id;
+    group.separators[id] = record;
+    if (isClient())
+        clientEffect(() => {
+            untrack(() => requestMount(group));
+            return () => requestMount(group);
+        });
+    // The separator's orientation is the opposite of the group's (`aria-orientation`).
+    const orientation = group.orientation === "horizontal" ? "vertical" : "horizontal";
+    const disableCursor = group.disableCursor;
+    const aria = record.aria;
+    const drag = record.drag;
+    const focused = record.focused;
+    const cls = local.class ?? "rv-ResizableSeparator";
+    const userStyle = local.style;
+    const elementRef = local.elementRef;
+    const children = local.children;
+    const onFocus = local.onFocus;
+    const onBlur = local.onBlur;
+    const onKeyDown = local.onKeyDown;
+    const onPointerOver = local.onPointerOver;
+    return (<div {...rest} aria-controls={aria().valueControls} aria-disabled={read(disabled) ? "true" : undefined} aria-orientation={orientation} aria-valuemax={aria().valueMax} aria-valuemin={aria().valueMin} aria-valuenow={aria().valueNow} class={cls} data-separator={separatorState(read(disabled), drag(), focused())} data-testid={id} id={id} ref={elementRef} role="separator" 
+    // lowercase key: a resumed spread diffs the server's attribute names against the keys (a `tabIndex` key drops
+    // `tabindex` for a moment on the first re-run: Chrome blurs the separator and releases its pointer capture)
+    {...{ tabindex: read(disabled) ? undefined : 0 }} preload="visible" onPointerOver={(event) => {
+            onPointerOver?.(event);
+            activateGroup(group);
+        }} onFocus={(event) => {
+            onFocus?.(event);
+            activateGroup(group);
+            focused.set(true);
+        }} onBlur={(event) => {
+            onBlur?.(event);
+            focused.set(false);
+        }} onKeyDown={(event) => {
+            onKeyDown?.(event);
+            separatorKeyDown(group, event);
+        }} style={{
+            flexBasis: "auto",
+            cursor: read(disabled) && !read(disableCursor) ? "not-allowed" : undefined,
+            ...userStyle,
+            flexGrow: 0,
+            flexShrink: 0,
+            // Inform the browser that the library is handling touch events for this element
+            // See github.com/bvaughn/react-resizable-panels/issues/662
+            touchAction: "none",
+        }}>
+      {children}
+    </div>);
+}
+/**
+ * Customizes separator previews when resizePreviewMode is "separator".
+ * Render within a `Group` to style all overlay previews, or return it from an individual `Separator`'s `preview`
+ * function to style its overlay preview.
+ *
+ * Use `data-separator-overlay="active"` to style the separator being dragged,
+ * or `data-separator-overlay="inactive"` for separators moved indirectly.
+ *
+ * Set `width` (horizontal groups) or `height` (vertical groups) using `style` or `class`.
+ */
+export function SeparatorOverlay(props) {
+    const attributes = { ...props };
+    // Inside a separator `preview` function: a marker the preview renderer turns into the overlay element.
+    if (currentPreview())
+        return { __rvSeparatorOverlay: attributes };
+    const group = useGroupContext();
+    group.overlay = attributes;
+    return null;
+}
+/* -------------------------------------------------------------------------------------------------
+ * Refs
+ * -----------------------------------------------------------------------------------------------*/
+/** Convenience hook to return a properly typed ref for the Group component. */
+export function useGroupRef() {
+    return _regionState(() => ({ current: null }));
+}
+/** Convenience hook to return a properly typed ref for the Panel component. */
+export function usePanelRef() {
+    return _regionState(() => ({ current: null }));
+}
+/**
+ * Convenience hook to return a properly typed ref callback for the Group component: `[handle, setHandle]` (Rivet:
+ * `handle` is an accessor, upstream React state).
+ */
+export function useGroupCallbackRef() {
+    const handle = _regionState(() => signal(null));
+    return [handle, (value) => handle.set(value)];
+}
+/**
+ * Convenience hook to return a properly typed ref callback for the Panel component: `[handle, setHandle]` (Rivet:
+ * `handle` is an accessor, upstream React state).
+ */
+export function usePanelCallbackRef() {
+    const handle = _regionState(() => signal(null));
+    return [handle, (value) => handle.set(value)];
+}
+const defaultStorage = () => {
+    try {
+        return globalThis.document === undefined
+            ? undefined
+            : (globalThis.localStorage ?? undefined);
+    }
+    catch {
+        return undefined;
+    }
+};
+/** Upstream `useDefaultLayout` read: modern (v4) layout, else the legacy (v3) record. */
+function readLayout(storage, id, panelIds) {
+    if (!storage)
+        return undefined;
+    let value = null;
+    try {
+        value = storage.getItem(getStorageKey(id, panelIds ?? []));
+    }
+    catch {
+        return undefined;
+    }
+    if (value) {
+        try {
+            // Rule out false positive for legacy layout format
+            const parsed = JSON.parse(value);
+            if (Object.values(parsed).every((v) => typeof v === "number"))
+                return parsed;
+        }
+        catch {
+            // unreadable entry
+        }
+    }
+    return readLegacyLayout({ id, panelIds, storage });
+}
+/**
+ * Saves and restores group layouts between page loads (localStorage, sessionStorage, cookies or any other storage).
+ *
+ * Rivet: `defaultLayout` is an accessor (pass it to `Group` as is). The server renders the stored layout when its
+ * storage is readable there (`cookieStorage(request cookie header)`); when the server could not read one (browser-only
+ * storage, static prerender) the stored layout is applied at idle on the client.
+ */
+export function useDefaultLayout(options) {
+    const id = (options.id ?? options.groupId);
+    const panelIds = options.panelIds;
+    const hasPanelIds = panelIds !== undefined;
+    const storage = options.storage;
+    const debounceSaveMs = options.debounceSaveMs ?? 100;
+    const onlySaveAfterUserInteractions = !!options.onlySaveAfterUserInteractions;
+    const state = _regionState(() => ({
+        layout: signal(readLayout(storage ?? defaultStorage(), id, panelIds)),
+        timeout: { current: 0 },
+    }));
+    // The server had no stored layout (browser-only storage, e.g. localStorage): restore it on the client once idle.
+    // A server-readable storage (`cookieStorage`, `ssr: true`) already rendered the truth: nothing boots at load.
+    if (!isClient() && state.layout() === undefined && !storage?.ssr)
+        clientEffect(() => {
+            const stored = readLayout(storage ?? defaultStorage(), id, panelIds);
+            if (stored)
+                state.layout.set(stored);
+        }, { when: "idle" });
+    const layout = state.layout;
+    const timeout = state.timeout;
+    const save = {
+        // The hook persists every layout commit -- including library-driven ones -- because it owns its own storage.
+        changed: (next, meta) => {
+            if (onlySaveAfterUserInteractions && !meta.isUserInteraction)
+                return;
+            clearTimeout(timeout.current);
+            // Save the requested layout so size-dependent constraints aren't persisted (see #720)
+            const layoutToSave = meta.requestedLayout ?? next;
+            const writeStorageKey = hasPanelIds ? getStorageKey(id, Object.keys(layoutToSave)) : getStorageKey(id, []);
+            try {
+                (storage ?? defaultStorage())?.setItem(writeStorageKey, JSON.stringify(layoutToSave));
+            }
+            catch (error) {
+                console.error(error);
+            }
+        },
+    };
+    return {
+        /** Pass this value to `Group` as the `defaultLayout` prop. */
+        defaultLayout: () => layout(),
+        /** @deprecated Use `onLayoutChanged` instead. */
+        onLayoutChange: (next) => {
+            clearTimeout(timeout.current);
+            if (debounceSaveMs === 0)
+                save.changed(next, { isUserInteraction: false });
+            else
+                timeout.current = setTimeout(() => save.changed(next, { isUserInteraction: false }), debounceSaveMs);
+        },
+        /** Attach this callback on the `Group` as the `onLayoutChanged` prop. */
+        onLayoutChanged: (next, meta) => save.changed(next, meta),
+    };
+}
+/**
+ * Rivet addition (upstream documents it as an example): a cookie `LayoutStorage`. Pass the request's `Cookie` header
+ * (or a cookie map) on the server so the stored layout is server-rendered; in the browser it reads `document.cookie`.
+ */
+export function cookieStorage(source, options) {
+    const maxAge = options?.maxAge ?? 60 * 60 * 24 * 365;
+    const path = options?.path ?? "/";
+    const header = typeof source === "string" ? source : undefined;
+    const map = source && typeof source === "object" ? source : undefined;
+    return {
+        ssr: true,
+        getItem: (key) => {
+            const name = encodeURIComponent(key);
+            const fromMap = map?.get(name) ?? map?.get(key);
+            if (fromMap != null)
+                return decodeURIComponent(fromMap);
+            const doc = globalThis.document;
+            const cookies = doc ? doc.cookie : (header ?? "");
+            for (const cookie of cookies.split(";")) {
+                const [cookieName, ...value] = cookie.trim().split("=");
+                if (cookieName === name || cookieName === key)
+                    return decodeURIComponent(value.join("="));
+            }
+            return null;
+        },
+        setItem: (key, value) => {
+            const doc = globalThis.document;
+            if (doc)
+                doc.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; path=${path}; max-age=${maxAge}; samesite=lax`;
+        },
+    };
+}

package/resizable/mount.d.ts

@@ -0,0 +1,115 @@
+import { type Signal } from "@rivetjs/reactivity";
+import type { InteractionState } from "./engine/global/mutable-state/types.js";
+import type { Layout, Orientation, ResizePreviewMode } from "./engine/global/types.js";
+import type { GroupImperativeHandle, LayoutChangedMeta } from "./engine/components/group/types.js";
+import type { OnPanelResize, PanelImperativeHandle } from "./engine/components/panel/types.js";
+/** A value or an accessor (Rivet accessor props). */
+export type MaybeAccessor<T> = T | (() => T);
+/** Reads a value or an accessor (leaf helper: handler chunks import no barrel). */
+export declare const read: <T>(value: MaybeAccessor<T>) => T;
+/** Props of a `SeparatorOverlay` (the overlay preview element's attributes). */
+export type SeparatorOverlayAttributes = Record<string, unknown>;
+/** Marker a `SeparatorOverlay` returns inside a separator `preview` function. */
+export interface SeparatorOverlayMarker {
+    readonly __rvSeparatorOverlay: SeparatorOverlayAttributes;
+}
+/** WAI-ARIA values of a separator (upstream ResizeSeparator `aria` state). */
+export interface SeparatorAria {
+    valueControls?: string | undefined;
+    valueMin?: number | undefined;
+    valueMax?: number | undefined;
+    valueNow?: number | undefined;
+}
+/** A Panel's registration (serializable: plain props + resumable callbacks). */
+export interface PanelRecord {
+    id: string;
+    /** The `id` prop as given (upstream passes it to `onResize`). */
+    idProp: string | number | undefined;
+    idIsStable: boolean;
+    collapsedSize: number | string;
+    collapsedThreshold: number | string | undefined;
+    collapsible: boolean;
+    defaultSize: number | string | undefined;
+    disabled: MaybeAccessor<boolean | undefined>;
+    groupResizeBehavior: "preserve-relative-size" | "preserve-pixel-size";
+    maxSize: number | string;
+    minSize: number | string;
+    onResize: OnPanelResize;
+}
+/** A Separator's registration + its reactive state (upstream ResizeSeparator `dragState` / `aria`). */
+export interface SeparatorRecord {
+    id: string;
+    disabled: MaybeAccessor<boolean | undefined>;
+    disableDoubleClick: boolean | undefined;
+    /** Overrides the group's preview (`resizePreviewMode="separator"`): a function returning content. */
+    preview: (() => unknown) | undefined;
+    drag: Signal<InteractionState["state"]>;
+    focused: Signal<boolean>;
+    aria: Signal<SeparatorAria>;
+}
+/** A Group's serializable state (`_regionState`; resumed handlers mount the engine from it). */
+export interface GroupState {
+    id: string;
+    orientation: Orientation;
+    disabled: MaybeAccessor<boolean | undefined>;
+    disableCursor: MaybeAccessor<boolean | undefined>;
+    defaultLayout: MaybeAccessor<Layout | undefined>;
+    resizePreviewMode: ResizePreviewMode;
+    resizeTargetMinimumSize: {
+        coarse: number;
+        fine: number;
+    };
+    onLayoutChange: ((layout: Layout) => void) | undefined;
+    onLayoutChanged: ((layout: Layout, meta: LayoutChangedMeta) => void) | undefined;
+    /** The mounted layout (`undefined` until the engine mounts: panels fall back to the default layout / sizes). */
+    layout: Signal<Layout | undefined>;
+    panels: {
+        [id: string]: PanelRecord;
+    };
+    separators: {
+        [id: string]: SeparatorRecord;
+    };
+    /** Group-level `SeparatorOverlay` props. */
+    overlay: SeparatorOverlayAttributes | undefined;
+    /** Upstream `inMemoryValuesRef`: survives re-mounts (and resume). */
+    memory: {
+        lastExpandedPanelSizes: {
+            [panelIds: string]: number;
+        };
+        layouts: {
+            [panelIds: string]: Layout;
+        };
+    };
+}
+/** Whether the group's engine is mounted (client). */
+export declare function isGroupMounted(state: GroupState): boolean;
+/**
+ * Mounts (or re-mounts, after its panels / separators changed) the group's engine. Returns `true` when it mounted now
+ * (the caller replays the event that activated it). No-op on the server or before the element is in the document.
+ */
+export declare function ensureGroup(state: GroupState): boolean;
+/** Unmounts the group's engine (client render cleanup). */
+export declare function unmountGroup(state: GroupState): void;
+/** Re-checks the group on the next microtask (a panel / separator was added or removed). */
+export declare function requestMount(state: GroupState): void;
+/**
+ * Separator hover / focus: mounts the group (no replay — the next pointer move / key reaches the engine's own listeners).
+ */
+export declare function activateGroup(state: GroupState): void;
+/**
+ * Group pointer down on a resumed page: mounts the group when the press can start a resize (on one of its separators,
+ * a group without separators (panel edges), or a coarse pointer whose hit target reaches past the separator), then
+ * replays the press to the engine once per event, after every group on the event path had its turn (nested groups).
+ */
+export declare function groupPointerDown(state: GroupState, event: PointerEvent): void;
+/** Separator key down on a resumed page: mounts the group and replays the key when it was not mounted yet. */
+export declare function separatorKeyDown(state: GroupState, event: KeyboardEvent): void;
+/** The engine's panel methods (mounting the group first); no-ops before the group is in the document. */
+export declare function panelMethods(state: GroupState, panelId: string): PanelImperativeHandle;
+/** The engine's group methods (mounting the group first); no-ops before the group is in the document. */
+export declare function groupMethods(state: GroupState): GroupImperativeHandle;
+/** Inside a separator `preview` function: the preview being rendered (`SeparatorOverlay` renders itself there). */
+export declare const currentPreview: () => {
+    active: boolean;
+    orientation: Orientation;
+} | undefined;