@softov/scena 0.1.2

package/dist/porta/provider.d.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+import type { DataBinding } from '../types/component-graph.js';
+export type ProviderLabel = string | DataBinding;
+export type PortaProviderKind = 'oauth-button' | 'form-fields' | 'otp' | 'magic-link';
+export interface AuthField {
+    name: string;
+    label: ProviderLabel | {
+        t: string;
+        args?: Record<string, unknown>;
+    };
+    type: 'text' | 'email' | 'password' | 'tel';
+    required?: boolean;
+    placeholder?: string;
+    autoComplete?: string;
+}
+export interface Session {
+    userId: string;
+    displayName?: string;
+    email?: string;
+    expiresAt?: number;
+    permissions?: string[];
+    raw?: Record<string, unknown>;
+}
+export interface ProviderRenderContext {
+    pending: boolean;
+    error: string | null;
+    challenge: {
+        providerId: string;
+        id: string;
+    } | null;
+    fieldState: Record<string, string>;
+    setField(name: string, value: string): void;
+    signin(creds: Record<string, unknown>): Promise<void>;
+    request(value: string): Promise<void>;
+    verify(code: string): Promise<void>;
+}
+export interface PortaProvider {
+    id: string;
+    label: ProviderLabel;
+    icon?: string;
+    kind: PortaProviderKind;
+    fields?: AuthField[];
+    otp?: {
+        digits: number;
+        channel: 'sms' | 'email' | 'totp';
+        sendLabel?: string;
+    };
+    magicLink?: {
+        channel: 'email' | 'sms';
+        sendLabel?: string;
+    };
+    render?(ctx: ProviderRenderContext): ReactNode;
+    signin?(creds: Record<string, unknown>): Promise<Session>;
+    request?(value: string): Promise<{
+        challengeId: string;
+    }>;
+    verify?(challengeId: string, code: string): Promise<Session>;
+    signout?(session: Session): Promise<void>;
+}

package/dist/porta/provider.js

@@ -0,0 +1 @@
+export {};

package/dist/porta/providers/examples/google-oauth.d.ts

@@ -0,0 +1,6 @@
+import type { PortaProvider, Session } from '../../provider.js';
+export interface GoogleOAuthOpts {
+    clientId: string;
+    signin?: () => Promise<Session>;
+}
+export declare function googleOAuthProvider(opts: GoogleOAuthOpts): PortaProvider;

package/dist/porta/providers/examples/google-oauth.js

@@ -0,0 +1,21 @@
+export function googleOAuthProvider(opts) {
+    return {
+        id: 'google',
+        label: 'Google',
+        icon: '🌐',
+        kind: 'oauth-button',
+        async signin() {
+            if (opts.signin)
+                return opts.signin();
+            // Demo stub
+            await new Promise((r) => setTimeout(r, 300));
+            return {
+                userId: 'demo-google-user',
+                displayName: 'Demo User (Google)',
+                email: 'demo@google.example',
+                permissions: ['session.read'],
+                raw: { provider: 'google', clientId: opts.clientId, demo: true },
+            };
+        },
+    };
+}

package/dist/porta/providers/examples/index.d.ts

@@ -0,0 +1,6 @@
+export { googleOAuthProvider } from './google-oauth.js';
+export type { GoogleOAuthOpts } from './google-oauth.js';
+export { magicLinkProvider } from './magic-link.js';
+export type { MagicLinkOpts } from './magic-link.js';
+export { smsOtpProvider } from './sms-otp.js';
+export type { SmsOtpOpts } from './sms-otp.js';

package/dist/porta/providers/examples/index.js

@@ -0,0 +1,3 @@
+export { googleOAuthProvider } from './google-oauth.js';
+export { magicLinkProvider } from './magic-link.js';
+export { smsOtpProvider } from './sms-otp.js';

package/dist/porta/providers/examples/magic-link.d.ts

@@ -0,0 +1,8 @@
+import type { PortaProvider, Session } from '../../provider.js';
+export interface MagicLinkOpts {
+    label?: string;
+    sendLabel?: string;
+    sendLink?: (email: string) => Promise<string>;
+    verify?: (challengeId: string, token: string) => Promise<Session>;
+}
+export declare function magicLinkProvider(opts?: MagicLinkOpts): PortaProvider;

package/dist/porta/providers/examples/magic-link.js

@@ -0,0 +1,31 @@
+export function magicLinkProvider(opts = {}) {
+    return {
+        id: 'magic-link',
+        label: opts.label ?? 'Email a sign-in link',
+        icon: '✉',
+        kind: 'magic-link',
+        magicLink: {
+            channel: 'email',
+            sendLabel: opts.sendLabel,
+        },
+        async request(email) {
+            if (opts.sendLink)
+                return { challengeId: await opts.sendLink(email) };
+            // Demo stub — just echoes a synthetic id
+            const id = `magic_${Date.now().toString(36)}`;
+            console.info(`[magicLinkProvider] (stub) would email ${email} — challengeId=${id}`);
+            return { challengeId: id };
+        },
+        async verify(challengeId, token) {
+            if (opts.verify)
+                return opts.verify(challengeId, token);
+            await new Promise((r) => setTimeout(r, 200));
+            return {
+                userId: 'demo-magic-user',
+                displayName: 'Demo User (Magic link)',
+                permissions: ['session.read'],
+                raw: { provider: 'magic-link', challengeId, token, demo: true },
+            };
+        },
+    };
+}

package/dist/porta/providers/examples/sms-otp.d.ts

@@ -0,0 +1,9 @@
+import type { PortaProvider, Session } from '../../provider.js';
+export interface SmsOtpOpts {
+    digits?: number;
+    label?: string;
+    sendLabel?: string;
+    sendCode?: (phone: string) => Promise<string>;
+    verify?: (challengeId: string, code: string) => Promise<Session>;
+}
+export declare function smsOtpProvider(opts?: SmsOtpOpts): PortaProvider;

package/dist/porta/providers/examples/sms-otp.js

@@ -0,0 +1,31 @@
+export function smsOtpProvider(opts = {}) {
+    const digits = opts.digits ?? 6;
+    return {
+        id: 'sms-otp',
+        label: opts.label ?? 'Sign in with SMS',
+        icon: '📱',
+        kind: 'otp',
+        otp: { digits, channel: 'sms', sendLabel: opts.sendLabel },
+        async request(phone) {
+            if (opts.sendCode)
+                return { challengeId: await opts.sendCode(phone) };
+            const id = `sms_${Date.now().toString(36)}`;
+            console.info(`[smsOtpProvider] (stub) would SMS ${phone} a ${digits}-digit code — challengeId=${id}`);
+            return { challengeId: id };
+        },
+        async verify(challengeId, code) {
+            if (opts.verify)
+                return opts.verify(challengeId, code);
+            await new Promise((r) => setTimeout(r, 200));
+            if (code.length !== digits) {
+                throw new Error(`Expected a ${digits}-digit code`);
+            }
+            return {
+                userId: 'demo-sms-user',
+                displayName: 'Demo User (SMS)',
+                permissions: ['session.read'],
+                raw: { provider: 'sms-otp', challengeId, code, demo: true },
+            };
+        },
+    };
+}

package/dist/porta/providers/password.d.ts

@@ -0,0 +1,12 @@
+import type { PortaProvider } from '../provider.js';
+export interface PasswordUser {
+    email: string;
+    password: string;
+    displayName?: string;
+    permissions?: string[];
+}
+export interface PasswordProviderOpts {
+    users: PasswordUser[];
+    label?: string;
+}
+export declare function passwordProvider(opts: PasswordProviderOpts): PortaProvider;

package/dist/porta/providers/password.js

@@ -0,0 +1,46 @@
+// Built-in password provider. Matches against an in-memory user table —
+// suitable for testbeds and demos. Real applications swap this for one that
+// POSTs to a backend.
+export function passwordProvider(opts) {
+    return {
+        id: 'password',
+        label: opts.label ?? 'Sign in',
+        kind: 'form-fields',
+        fields: [
+            {
+                name: 'email',
+                label: {
+                    path: '$/t/auth/usernameLabel',
+                },
+                // labelKey: 'auth/usernameLabel',
+                type: 'email',
+                required: true,
+                autoComplete: 'email',
+            },
+            {
+                name: 'password',
+                label: {
+                    path: '$/t/auth/passwordLabel',
+                },
+                // labelKey: 'auth/passwordLabel',
+                type: 'password',
+                required: true,
+                autoComplete: 'current-password',
+            },
+        ],
+        async signin(creds) {
+            const { email, password } = creds;
+            if (!email || !password)
+                throw new Error('Email and password are required.');
+            const user = opts.users.find((u) => u.email === email && u.password === password);
+            if (!user)
+                throw new Error('Invalid email or password.');
+            return {
+                userId: user.email,
+                displayName: user.displayName ?? user.email,
+                email: user.email,
+                permissions: user.permissions ?? [],
+            };
+        },
+    };
+}

package/dist/porta/register-blocks.d.ts

@@ -0,0 +1,3 @@
+import type { Scena } from '../types/scena.js';
+import type { Disposable } from '../types/disposable.js';
+export declare function registerPortaBlocks(scena: Scena): Disposable;

package/dist/porta/register-blocks.js

@@ -0,0 +1,31 @@
+import { combineDisposables } from '../core/disposable.js';
+import { LoginForm } from '../ui/forms/LoginForm.js';
+import { PortaLock } from './PortaLock.js';
+import { Sigillum } from './SigillumGate.js';
+import { Limen } from './Limen.js';
+// Registers the porta blocks as scena components so they can be referenced
+// by name from ComponentNode trees and agent-sent payloads.
+//
+//   Porta.LoginForm  — the composer
+//   Porta.Sigillum   — silent permission gate
+//   Porta.PortaLock  — inline gate with visible LoginForm fallback
+//   Porta.Limen      — full-page wall with header / footer / left / right slots
+export function registerPortaBlocks(scena) {
+    return combineDisposables(scena.components.register({
+        component: 'Porta.LoginForm',
+        category: 'page',
+        renderer: { kind: 'react', load: async () => ({ default: LoginForm }) },
+    }), scena.components.register({
+        component: 'Porta.PortaLock',
+        category: 'page',
+        renderer: { kind: 'react', load: async () => ({ default: PortaLock }) },
+    }), scena.components.register({
+        component: 'Porta.Sigillum',
+        category: 'page',
+        renderer: { kind: 'react', load: async () => ({ default: Sigillum }) },
+    }), scena.components.register({
+        component: 'Porta.Limen',
+        category: 'page',
+        renderer: { kind: 'react', load: async () => ({ default: Limen }) },
+    }));
+}

package/dist/porta/register.d.ts

@@ -0,0 +1,15 @@
+import type { Scena } from '../types/scena.js';
+import type { PortaProvider } from './provider.js';
+import { type Sigillum } from './sigillum.js';
+export interface CreatePortaOpts {
+    providers: PortaProvider[];
+}
+export interface Porta {
+    /** Read-only ordered list of registered providers (preserves opts order). */
+    providers: PortaProvider[];
+    /** Lookup a provider by id. */
+    getProvider(id: string): PortaProvider | undefined;
+    /** Sigillum facade — `session()`, `has(scope)`, `isPending()`, `signOut()`. */
+    sigillum: Sigillum;
+}
+export declare function createPorta(scena: Scena, opts: CreatePortaOpts): Porta;

package/dist/porta/register.js

@@ -0,0 +1,31 @@
+import { SIGILLUM_PATHS, createSigillum } from './sigillum.js';
+import { registerSigillumCommands } from './commands.js';
+// One-shot setup. Call after createScena():
+//   const porta = createPorta(scena, { providers: [...] });
+// Then wrap the app in <PortaProvider porta={porta}>.
+export function createPorta(scena, opts) {
+    const providerMap = new Map();
+    const seen = new Set();
+    for (const p of opts.providers) {
+        if (seen.has(p.id)) {
+            throw new Error(`Duplicate PortaProvider id "${p.id}".`);
+        }
+        seen.add(p.id);
+        providerMap.set(p.id, p);
+    }
+    scena.store.patchMany({
+        [SIGILLUM_PATHS.providers]: opts.providers.map((p) => p.id),
+        [SIGILLUM_PATHS.pending]: false,
+        [SIGILLUM_PATHS.error]: null,
+        [SIGILLUM_PATHS.challenge]: null,
+    });
+    if (scena.store.get(SIGILLUM_PATHS.session) === undefined) {
+        scena.store.set(SIGILLUM_PATHS.session, null);
+    }
+    registerSigillumCommands(scena, providerMap);
+    return {
+        providers: opts.providers,
+        getProvider: (id) => providerMap.get(id),
+        sigillum: createSigillum(scena),
+    };
+}

package/dist/porta/sigillum.d.ts

@@ -0,0 +1,19 @@
+import type { BindingPath } from '../types/component-graph.js';
+import type { Scena } from '../types/scena.js';
+import type { Session } from './provider.js';
+export declare const SIGILLUM_PATHS: {
+    readonly session: BindingPath;
+    readonly providers: BindingPath;
+    readonly pending: BindingPath;
+    readonly error: BindingPath;
+    readonly challenge: BindingPath;
+};
+export interface Sigillum {
+    session(): Session | null;
+    /** True if the current session carries `scope`. v0 matcher: equality + trailing `.*` wildcard. */
+    has(scope: string): boolean;
+    isPending(): boolean;
+    error(): string | null;
+    signOut(): Promise<unknown>;
+}
+export declare function createSigillum(scena: Scena): Sigillum;

package/dist/porta/sigillum.js

@@ -0,0 +1,41 @@
+export const SIGILLUM_PATHS = {
+    session: '$/sigillum/session',
+    providers: '$/sigillum/providers',
+    pending: '$/sigillum/pending',
+    error: '$/sigillum/error',
+    challenge: '$/sigillum/challenge',
+};
+export function createSigillum(scena) {
+    function session() {
+        return scena.store.get(SIGILLUM_PATHS.session) ?? null;
+    }
+    return {
+        session,
+        has(scope) {
+            const s = session();
+            if (!s || !s.permissions)
+                return false;
+            return s.permissions.some((p) => matchScope(p, scope));
+        },
+        isPending() {
+            return Boolean(scena.store.get(SIGILLUM_PATHS.pending));
+        },
+        error() {
+            return scena.store.get(SIGILLUM_PATHS.error) ?? null;
+        },
+        signOut() {
+            return scena.commands.execute('sigillum.signout');
+        },
+    };
+}
+// Granted `'agents.write'` exactly matches scope `'agents.write'`.
+// Granted `'agents.*'` matches any scope starting with `'agents.'`.
+// (Permission match rules are flagged PENDING in the plan for upgrade later.)
+function matchScope(granted, requested) {
+    if (granted === requested)
+        return true;
+    if (granted.endsWith('.*')) {
+        return requested.startsWith(granted.slice(0, -1));
+    }
+    return false;
+}

package/dist/react/DefaultShell.d.ts

@@ -0,0 +1 @@
+export declare function DefaultShell(): import("react").JSX.Element;

package/dist/react/DefaultShell.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayout } from './hooks/useLayout.js';
+import { SurfaceArea } from './SurfaceArea.js';
+import { ShellSplitter } from './ShellSplitter.js';
+// Minimal flex shell. Each surface is rendered via SurfaceArea, which
+// delegates to the registered layout for that surface (tab / split / stack /
+// rail / inline / floating). Apps that want a different chrome layout can
+// compose SurfaceArea + ShellSplitter directly — see web-next/CustomShell.
+export function DefaultShell() {
+    const layout = useLayout();
+    const surfaces = layout.surfaces;
+    const sidebarLeftWidth = surfaces['sidebar:left']?.size ?? 240;
+    const sidebarRightWidth = surfaces['sidebar:right']?.size ?? 280;
+    const panelBottomHeight = surfaces['panel:bottom']?.size ?? 200;
+    const sidebarLeftVisible = surfaces['sidebar:left']?.visible ?? true;
+    const sidebarRightVisible = surfaces['sidebar:right']?.visible ?? false;
+    const panelBottomVisible = surfaces['panel:bottom']?.visible ?? false;
+    const activitybarVisible = surfaces['activitybar']?.visible ?? true;
+    const statusbarVisible = surfaces['statusbar']?.visible ?? true;
+    const titlebarVisible = surfaces['titlebar']?.visible ?? true;
+    return (_jsxs("div", { className: "oo-shell", style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            width: '100vw',
+            overflow: 'hidden',
+        }, children: [titlebarVisible ? _jsx(SurfaceArea, { surface: "titlebar", layout: "bar" }) : null, _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: [activitybarVisible ? _jsx(SurfaceArea, { surface: "activitybar", layout: "rail" }) : null, sidebarLeftVisible ? (_jsxs(_Fragment, { children: [_jsx(SurfaceArea, { surface: "sidebar:left", layout: "stack", style: { width: sidebarLeftWidth, flex: '0 0 auto', overflow: 'hidden' } }), _jsx(ShellSplitter, { surface: "sidebar:left", orientation: "vertical", min: 120, max: 600 })] })) : null, _jsxs("div", { style: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx(SurfaceArea, { surface: "main", layout: "tab", style: { flex: 1, minHeight: 0, overflow: 'hidden' } }), panelBottomVisible ? (_jsxs(_Fragment, { children: [_jsx(ShellSplitter, { surface: "panel:bottom", orientation: "horizontal", invert: true, min: 80, max: 500 }), _jsx(SurfaceArea, { surface: "panel:bottom", layout: "tab", style: {
+                                            height: panelBottomHeight,
+                                            flex: '0 0 auto',
+                                            overflow: 'hidden',
+                                        } })] })) : null] }), sidebarRightVisible ? (_jsxs(_Fragment, { children: [_jsx(ShellSplitter, { surface: "sidebar:right", orientation: "vertical", invert: true, min: 160, max: 600 }), _jsx(SurfaceArea, { surface: "sidebar:right", layout: "stack", style: { width: sidebarRightWidth, flex: '0 0 auto', overflow: 'hidden' } })] })) : null] }), statusbarVisible ? _jsx(SurfaceArea, { surface: "statusbar", layout: "bar" }) : null, _jsx(SurfaceArea, { surface: "overlay", layout: "floating", style: {
+                    position: 'fixed',
+                    inset: 0,
+                    pointerEvents: 'none',
+                    zIndex: 1000,
+                } })] }));
+}

package/dist/react/Scena.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { Scena as ScenaInstance } from '../types/scena.js';
+import type { CreateScenaOptions } from '../types/scena.js';
+export interface ScenaComponentProps {
+    options?: CreateScenaOptions;
+    onRender?: (scena: ScenaInstance) => void;
+    children?: ReactNode;
+}
+export declare function Scena({ options, onRender, children }: ScenaComponentProps): import("react").JSX.Element;

package/dist/react/Scena.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useRef } from 'react';
+import { createScena } from '../core/scena.js';
+import { ScenaProvider } from './ScenaProvider.js';
+// import { DefaultShell } from './DefaultShell.js';
+const DefaultShell = lazy(() => import('./DefaultShell.js').then(module => ({ default: module.DefaultShell })));
+export function Scena({ options, onRender, children }) {
+    const scenaRef = useRef(null);
+    if (!scenaRef.current) {
+        scenaRef.current = createScena(options);
+        onRender?.(scenaRef.current);
+    }
+    useEffect(() => {
+        return () => {
+            scenaRef.current?.dispose();
+            scenaRef.current = null;
+        };
+    }, []);
+    return (_jsx(ScenaProvider, { scena: scenaRef.current, children: children ?? (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(DefaultShell, {}) })) }));
+}

package/dist/react/ScenaProvider.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { Scena } from '../types/scena.js';
+export interface ScenaProviderProps {
+    scena: Scena;
+    children: ReactNode;
+}
+export declare function ScenaProvider({ scena, children }: ScenaProviderProps): import("react").JSX.Element;
+export declare function useScena(): Scena;

package/dist/react/ScenaProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const ScenaContext = createContext(null);
+export function ScenaProvider({ scena, children }) {
+    return _jsx(ScenaContext.Provider, { value: scena, children: children });
+}
+export function useScena() {
+    const ctx = useContext(ScenaContext);
+    if (!ctx) {
+        throw new Error('useScena must be used inside <ScenaProvider> or <Scena>');
+    }
+    return ctx;
+}

package/dist/react/ShellSplitter.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties } from 'react';
+import type { SurfaceName } from '../types/mount-surface.js';
+export interface ShellSplitterProps {
+    surface: SurfaceName;
+    orientation: 'vertical' | 'horizontal';
+    invert?: boolean;
+    min?: number;
+    max?: number;
+    thickness?: number;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function ShellSplitter({ surface, orientation, invert, min, max, thickness, style, className, }: ShellSplitterProps): import("react").JSX.Element;

package/dist/react/ShellSplitter.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useScena } from './ScenaProvider.js';
+// Chrome-level drag handle. Writes the dragged size to
+// `scena.layout.setSurface(surface, { size })`, which mirrors to the
+// `layout:surfaces.<name>.size` path and persists via LayoutStorage.
+//
+// Used by DefaultShell between adjacent surfaces; apps with custom shells
+// can drop these in wherever they want a resizable edge.
+export function ShellSplitter({ surface, orientation, invert = false, min = 100, max = 800, thickness = 4, style, className, }) {
+    const scena = useScena();
+    const draggingRef = useRef(false);
+    const startSizeRef = useRef(0);
+    const startPosRef = useRef(0);
+    const rafRef = useRef(null);
+    const pendingSizeRef = useRef(null);
+    // Transient while the pointer is down: the frame still re-renders the shell,
+    // but the layout is not mirrored into the reactive store (which wakes every
+    // `useStore` in the app) and not serialised to storage. Releasing commits once.
+    function commitPending(transient) {
+        if (pendingSizeRef.current !== null) {
+            scena.layout.setSurface(surface, { size: pendingSizeRef.current }, { transient });
+            pendingSizeRef.current = null;
+        }
+        rafRef.current = null;
+    }
+    function onPointerDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        draggingRef.current = true;
+        startSizeRef.current = scena.layout.get().surfaces[surface]?.size ?? 240;
+        startPosRef.current = orientation === 'vertical' ? e.clientX : e.clientY;
+        e.currentTarget.style.background = 'var(--oo-color-accent)';
+        // `user-select: none` on the handle alone does not stop the drag from
+        // selecting text across the surfaces either side of it, because the pointer
+        // is captured but the selection is the document's.
+        document.documentElement.classList.add('oo-resizing');
+        document.documentElement.style.cursor =
+            orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
+    }
+    function onPointerCancel(e) {
+        onPointerUp(e);
+    }
+    function onPointerMove(e) {
+        if (!draggingRef.current)
+            return;
+        const pos = orientation === 'vertical' ? e.clientX : e.clientY;
+        const delta = pos - startPosRef.current;
+        const signed = invert ? -delta : delta;
+        const next = Math.max(min, Math.min(max, startSizeRef.current + signed));
+        pendingSizeRef.current = next;
+        if (rafRef.current === null) {
+            rafRef.current = requestAnimationFrame(() => commitPending(true));
+        }
+    }
+    function onPointerUp(e) {
+        if (!draggingRef.current)
+            return;
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        // The settled value, and the only one that reaches the store or storage.
+        // Falls back to the last size when the pointer never moved, so a click on
+        // the handle still ends in a consistent state rather than a half-committed
+        // transient one.
+        pendingSizeRef.current ??= scena.layout.get().surfaces[surface]?.size ?? startSizeRef.current;
+        commitPending(false);
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        draggingRef.current = false;
+        e.currentTarget.style.background = 'none';
+        document.documentElement.classList.remove('oo-resizing');
+        document.documentElement.style.cursor = '';
+    }
+    const baseStyle = orientation === 'vertical'
+        ? { width: thickness, height: '100%', cursor: 'ew-resize' }
+        : { width: '100%', height: thickness, cursor: 'ns-resize' };
+    return (_jsx("div", { className: `oo-shell-splitter oo-shell-splitter--${orientation} ${className ?? ''}`, "data-surface": surface, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, style: {
+            flex: '0 0 auto',
+            background: 'transparent',
+            userSelect: 'none',
+            touchAction: 'none',
+            transition: 'background 0.15s',
+            ...baseStyle,
+            ...style,
+        } }));
+}

package/dist/react/SurfaceArea.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties } from 'react';
+import type { SurfacePresentation } from '../types/layout.js';
+import type { SurfaceName } from '../types/mount-surface.js';
+import { type SurfaceResizeSpec } from './useSurfaceResize.js';
+export interface SurfaceAreaProps {
+    surface: SurfaceName;
+    layout?: string;
+    style?: CSSProperties;
+    className?: string;
+    presentation?: SurfacePresentation;
+    resize?: SurfaceResizeSpec;
+}
+export declare function SurfaceArea({ surface, layout, style, className, presentation, resize, }: SurfaceAreaProps): import("react").JSX.Element;