@softov/scena 0.1.2 → 0.1.3

package/dist/core/{binding-resolver.js → resolve/binding-resolver.js}

@@ -1,5 +1,5 @@
-import { isAction, isDataBinding, isFunctionCall, } from '../types/component-graph.js';
-import { combineDisposables, disposableFrom } from './disposable.js';
+import { isAction, isDataBinding, isFunctionCall, } from '../../sdk/component-graph.js';
+import { combineDisposables, disposableFrom } from '../../sdk/disposable.js';
 import { parsePath } from './path-resolver.js';
 export function createBindingResolver(deps) {
     const { store } = deps;

package/dist/core/{dynamic-resolver.d.ts → resolve/dynamic-resolver.d.ts}

@@ -1,5 +1,5 @@
-import type { Action, BindingPath, DataBinding, DynamicBoolean, DynamicNumber, DynamicString, DynamicStringList, DynamicValue, FunctionCall, PropValue } from '../types/component-graph.js';
-import type { Scena } from '../types/scena.js';
+import type { Action, BindingPath, DataBinding, DynamicBoolean, DynamicNumber, DynamicString, DynamicStringList, DynamicValue, FunctionCall, PropValue } from '../../sdk/component-graph.js';
+import type { Scena } from '../../sdk/scena.js';
 export declare function resolveDynamicValue(value: PropValue, dataContext: BindingPath | undefined, scena: Scena): unknown;
 export declare function resolveFunctionCall(fc: FunctionCall, dataContext: BindingPath | undefined, scena: Scena): unknown;
 export declare function resolveDynamicString(v: DynamicString, dataContext: BindingPath | undefined, scena: Scena): string;

package/dist/core/{dynamic-resolver.js → resolve/dynamic-resolver.js}

@@ -1,4 +1,4 @@
-import { isAction, isDataBinding, isFunctionCall, } from '../types/component-graph.js';
+import { isAction, isDataBinding, isFunctionCall, } from '../../sdk/component-graph.js';
 import { readPath, writePath } from './path-resolver.js';
 // Resolves a DynamicValue to its concrete value.
 //   literal       → returned as-is

package/dist/core/{path-resolver.d.ts → resolve/path-resolver.d.ts}

@@ -1,5 +1,5 @@
-import type { BindingPath } from '../types/component-graph.js';
-import type { ReactiveStore, ScopeName } from '../types/reactive-store.js';
+import type { BindingPath } from '../../sdk/component-graph.js';
+import type { ReactiveStore, ScopeName } from '../../sdk/reactive-store.js';
 export interface ParsedPath {
     absolute: boolean;
     segments: string[];

package/dist/core/{permissions.d.ts → resolve/permissions.d.ts}

@@ -1,2 +1,2 @@
-import type { PermissionEngine } from '../types/permissions.js';
+import type { PermissionEngine } from '../../sdk/permissions.js';
 export declare function createPermissionEngine(): PermissionEngine;

package/dist/core/scena.d.ts

@@ -1,2 +1,2 @@
-import type { CreateScena } from '../types/scena.js';
+import type { CreateScena } from '../sdk/scena.js';
 export declare const createScena: CreateScena;

package/dist/core/scena.js

@@ -1,19 +1,19 @@
-import { createEventBus } from '../controls/events.js';
-import { createWhenEngine } from '../controls/when.js';
-import { createCommandRegistry } from '../controls/command.js';
-import { createKeybindingRegistry } from '../controls/keybinding.js';
-import { createLayoutAPI, createLayoutRegistry } from '../controls/layout.js';
-import { createSessionAPI } from '../controls/session.js';
-import { createShellRegistry } from '../controls/shell.js';
-import { createManifestAPI } from '../controls/manifest.js';
-import { createPermissionEngine } from './permissions.js';
-import { createReactiveStore } from './reactive-store.js';
-import { createBindingResolver } from './binding-resolver.js';
-import { createComponentRegistry } from './component-registry.js';
-import { createConverterRegistry } from './converter-registry.js';
-import { createMountSurfaceRegistry } from './mount-surface.js';
-import { createMountMenuRegistry } from './mount-menu.js';
-import { registerBuiltinFunctions } from '../runtime/builtins.js';
+import { createEventBus } from './controls/events.js';
+import { createWhenEngine } from './controls/when.js';
+import { createCommandRegistry } from './controls/command.js';
+import { createKeybindingRegistry } from './controls/keybinding.js';
+import { createLayoutAPI, createLayoutRegistry } from './controls/layout.js';
+import { createSessionAPI } from './controls/session.js';
+import { createShellRegistry } from './controls/shell.js';
+import { createManifestAPI } from './controls/manifest.js';
+import { createPermissionEngine } from './resolve/permissions.js';
+import { createReactiveStore } from './store/reactive-store.js';
+import { createBindingResolver } from './resolve/binding-resolver.js';
+import { createComponentRegistry } from './registry/component-registry.js';
+import { createConverterRegistry } from './registry/converter-registry.js';
+import { createMountSurfaceRegistry } from './graph/mount-surface.js';
+import { createMountMenuRegistry } from './graph/mount-menu.js';
+import { registerBuiltinFunctions } from './builtins.js';
 export const createScena = (opts = {}) => {
     const events = opts.events ?? createEventBus();
     const permissions = createPermissionEngine();
@@ -34,6 +34,7 @@ export const createScena = (opts = {}) => {
         events,
         store,
         initial: opts.initialLayout,
+        surfaceDefaults: opts.surfaceDefaults,
         storage: opts.layoutStorage,
     });
     const scenaRef = { current: null };

package/dist/core/{backends → store/backends}/modus-backend.d.ts

@@ -1,4 +1,4 @@
-import type { ScopeBackend } from '../../types/scope-backend.js';
+import type { ScopeBackend } from '../../../sdk/scope-backend.js';
 export type ModusClass = 'xsmall' | 'small' | 'medium' | 'large';
 export interface ModusBreakpoints {
     small: number;

package/dist/core/{backends → store/backends}/storage-backend.d.ts

@@ -1,4 +1,4 @@
-import type { ScopeBackend } from '../../types/scope-backend.js';
+import type { ScopeBackend } from '../../../sdk/scope-backend.js';
 export interface BackendStorage {
     load(): Record<string, unknown> | null;
     save(data: Record<string, unknown>): void;

package/dist/core/{backends → store/backends}/yjs-backend.d.ts

@@ -1,3 +1,3 @@
 import type * as Y from 'yjs';
-import type { ScopeBackend } from '../../types/scope-backend.js';
+import type { ScopeBackend } from '../../../sdk/scope-backend.js';
 export declare function createYjsBackend(scope: string, doc: Y.Doc, mapName?: string): ScopeBackend;

package/dist/core/{reactive-store.d.ts → store/reactive-store.d.ts}

@@ -1,7 +1,7 @@
-import type { BindingPath } from '../types/component-graph.js';
-import type { EventBus } from '../types/events.js';
-import type { ReactiveStore, ScopeName, SocketBridge } from '../types/reactive-store.js';
-import type { ScopeBackendFactory } from '../types/scope-backend.js';
+import type { BindingPath } from '../../sdk/component-graph.js';
+import type { EventBus } from '../../sdk/events.js';
+import type { ReactiveStore, ScopeName, SocketBridge } from '../../sdk/reactive-store.js';
+import type { ScopeBackendFactory } from '../../sdk/scope-backend.js';
 interface Deps {
     events: EventBus;
     socket?: SocketBridge;

package/dist/core/{reactive-store.js → store/reactive-store.js}

@@ -1,5 +1,5 @@
-import { disposableFrom } from './disposable.js';
-import { parsePath, joinSegments, hasWildcard } from './path-resolver.js';
+import { disposableFrom } from '../../sdk/disposable.js';
+import { parsePath, joinSegments, hasWildcard } from '../resolve/path-resolver.js';
 import { compileSelect } from './computed-dsl.js';
 function makeNode() {
     return { hasValue: false, value: undefined };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './core/index.js';
+export { createSurfaceBridge } from './runtime/surface-bridge.js';
+export { registerClientHandler, getClientHandler, } from './runtime/client-handlers.js';
+export { createInMemorySocket } from './runtime/in-memory-socket.js';
+export type { InMemorySocket } from './runtime/in-memory-socket.js';
+export { registerLayoutCommands } from './runtime/layout-commands.js';
+export { registerOpenerCommands } from './runtime/opener-commands.js';
+export type { RegisterOpenerCommandsOptions } from './runtime/opener-commands.js';

package/dist/index.js

@@ -0,0 +1,13 @@
+// The package root export (`@softov/scena`).
+//
+// core/ is the store, the graph, the resolvers and the registries; runtime/ is
+// the behaviour wired on top of a live scena — the surface bridge, the sockets,
+// and the layout/opener command sets. Both are flat on the root surface, but
+// they are assembled here rather than inside core/index.ts, so that core never
+// imports the layer built on it.
+export * from './core/index.js';
+export { createSurfaceBridge } from './runtime/surface-bridge.js';
+export { registerClientHandler, getClientHandler, } from './runtime/client-handlers.js';
+export { createInMemorySocket } from './runtime/in-memory-socket.js';
+export { registerLayoutCommands } from './runtime/layout-commands.js';
+export { registerOpenerCommands } from './runtime/opener-commands.js';

package/dist/porta/Limen.d.ts

@@ -14,3 +14,4 @@ export interface LimenProps {
     children?: ReactNode;
 }
 export declare function Limen({ permission, fallback, title, subtitle, top, bottom, left, right, child, children, }: LimenProps): ReactNode;
+export default Limen;

package/dist/porta/Limen.js

@@ -12,3 +12,4 @@ export function Limen({ permission, fallback, title = 'Welcome', subtitle, top,
         return child ?? children;
     return (_jsxs("div", { className: "porta-limen", children: [top ? _jsx("div", { className: "porta-limen__top", children: top }) : null, left ? _jsx("div", { className: "porta-limen__left", children: left }) : null, _jsx("div", { className: "porta-limen__center", children: _jsxs("div", { className: "porta-limen__panel", children: [_jsx("div", { className: "porta-limen__title", children: title }), subtitle ? _jsx("div", { className: "porta-limen__subtitle", children: subtitle }) : null, fallback ?? _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LoginForm, {}) })] }) }), right ? _jsx("div", { className: "porta-limen__right", children: right }) : null, bottom ? _jsx("div", { className: "porta-limen__bottom", children: bottom }) : null] }));
 }
+export default Limen;

package/dist/porta/PortaLock.d.ts

@@ -8,3 +8,4 @@ export interface PortaLockProps {
     children?: ReactNode;
 }
 export declare function PortaLock({ permission, fallback, title, child, children, }: PortaLockProps): ReactNode;
+export default PortaLock;

package/dist/porta/PortaLock.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense } from 'react';
 import { useStore } from '../react/hooks/useStore.js';
 import { SIGILLUM_PATHS } from './sigillum.js';
-import { LoginForm } from '../ui/forms/LoginForm.js';
 import { hasScope } from './match.js';
 import './PortaLock.css';
+const LoginForm = lazy(() => import('../ui/forms/LoginForm.js').then((module) => ({
+    default: module.LoginForm,
+})));
 export function PortaLock({ permission, fallback, title, child, children, }) {
     const session = useStore(SIGILLUM_PATHS.session) ?? null;
     const ok = hasScope(session, permission);
     if (ok)
         return child ?? children;
-    return (_jsxs("div", { className: "porta-locked", children: [_jsx("span", { className: "porta-locked__title", children: title ?? (permission ? `Sign in required (${permission})` : 'Sign in required') }), fallback ?? _jsx(LoginForm, {})] }));
+    return (_jsxs("div", { className: "porta-locked", children: [_jsx("span", { className: "porta-locked__title", children: title ?? (permission ? `Sign in required (${permission})` : 'Sign in required') }), fallback ?? (_jsx(Suspense, { fallback: null, children: _jsx(LoginForm, {}) }))] }));
 }
+export default PortaLock;

package/dist/porta/SigillumGate.d.ts

@@ -6,3 +6,4 @@ export interface SigillumProps {
     children?: ReactNode;
 }
 export declare function Sigillum({ permission, fallback, child, children, }: SigillumProps): ReactNode;
+export default Sigillum;

package/dist/porta/SigillumGate.js

@@ -5,3 +5,4 @@ export function Sigillum({ permission, fallback = null, child, children, }) {
     const session = useStore(SIGILLUM_PATHS.session) ?? null;
     return hasScope(session, permission) ? (child ?? children) : fallback;
 }
+export default Sigillum;

package/dist/porta/commands.d.ts

@@ -1,3 +1,3 @@
-import type { Scena } from '../types/scena.js';
+import type { Scena } from '../sdk/scena.js';
 import type { PortaProvider } from './provider.js';
 export declare function registerSigillumCommands(scena: Scena, providers: Map<string, PortaProvider>): void;

package/dist/porta/login-form.block.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentNode } from '../types/component-graph.js';
+import type { ComponentNode } from '../sdk/component-graph.js';
 export declare const loginFormBlock: ComponentNode;

package/dist/porta/provider.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { DataBinding } from '../types/component-graph.js';
+import type { DataBinding } from '../sdk/component-graph.js';
 export type ProviderLabel = string | DataBinding;
 export type PortaProviderKind = 'oauth-button' | 'form-fields' | 'otp' | 'magic-link';
 export interface AuthField {

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

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

package/dist/porta/register-blocks.js

@@ -1,7 +1,4 @@
-import { combineDisposables } from '../core/disposable.js';
-import { LoginForm } from '../ui/forms/LoginForm.js';
-import { PortaLock } from './PortaLock.js';
-import { Sigillum } from './SigillumGate.js';
+import { combineDisposables } from '../sdk/disposable.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.
@@ -14,15 +11,15 @@ export function registerPortaBlocks(scena) {
     return combineDisposables(scena.components.register({
         component: 'Porta.LoginForm',
         category: 'page',
-        renderer: { kind: 'react', load: async () => ({ default: LoginForm }) },
+        renderer: { kind: 'react', load: async () => import('../ui/forms/LoginForm.js') },
     }), scena.components.register({
         component: 'Porta.PortaLock',
         category: 'page',
-        renderer: { kind: 'react', load: async () => ({ default: PortaLock }) },
+        renderer: { kind: 'react', load: async () => import('./PortaLock.js') },
     }), scena.components.register({
         component: 'Porta.Sigillum',
         category: 'page',
-        renderer: { kind: 'react', load: async () => ({ default: Sigillum }) },
+        renderer: { kind: 'react', load: async () => import('./SigillumGate.js') },
     }), scena.components.register({
         component: 'Porta.Limen',
         category: 'page',

package/dist/porta/register.d.ts

@@ -1,4 +1,4 @@
-import type { Scena } from '../types/scena.js';
+import type { Scena } from '../sdk/scena.js';
 import type { PortaProvider } from './provider.js';
 import { type Sigillum } from './sigillum.js';
 export interface CreatePortaOpts {

package/dist/porta/sigillum.d.ts

@@ -1,5 +1,5 @@
-import type { BindingPath } from '../types/component-graph.js';
-import type { Scena } from '../types/scena.js';
+import type { BindingPath } from '../sdk/component-graph.js';
+import type { Scena } from '../sdk/scena.js';
 import type { Session } from './provider.js';
 export declare const SIGILLUM_PATHS: {
     readonly session: BindingPath;

package/dist/react/DefaultShell.d.ts

@@ -1 +1,47 @@
-export declare function DefaultShell(): import("react").JSX.Element;
+import type { PresentationPolicy } from '../core/graph/surface-presentation.js';
+export interface DefaultShellProps {
+    /**
+     * How this app's surfaces occupy space as the viewport narrows.
+     *
+     * scena ships the mechanism and no policy: whether a right sidebar floats
+     * before a left one is a claim about a specific app's information
+     * architecture. With none, every surface stays `docked` at every size, which
+     * is what this shell did before it read a policy at all.
+     */
+    presentation?: PresentationPolicy;
+    /**
+     * Clicking the scrim closes whatever is overlaying `main`.
+     *
+     * On by default because a drawer that cannot be dismissed by tapping beside
+     * it is a trap on the size of screen that produces drawers in the first
+     * place. Pass false for an app that wants a modal drawer.
+     */
+    dismissOnScrim?: boolean;
+}
+/**
+ * Minimal flex shell.
+ *
+ * Each surface renders through `SurfaceArea`, which delegates to the layout
+ * registered for it (tab / split / stack / rail / inline / floating), and is
+ * stamped with the edge it closes on and the kind of region it is so that CSS
+ * can style it without matching its name.
+ *
+ * Two things it deliberately does itself rather than leaving to the app,
+ * because every app was otherwise writing them:
+ *
+ *   - it resolves the presentation policy per surface, so a sidebar lifts over
+ *     `main` on a narrow viewport instead of taking width from it;
+ *   - it renders the scrim when something is lifted, and closes on a click.
+ *
+ * Resizing is by each surface's own edge (`SurfaceArea`'s `resize` prop) rather
+ * than by a `ShellSplitter` placed beside it. The two are alternatives: a
+ * splitter is an element between two surfaces, which means a shell has to know
+ * the arrangement well enough to place one, and it has nothing to sit against
+ * once a surface floats. Self-edge resize travels with the surface and stands
+ * down on its own when the presentation is not `docked`. `ShellSplitter` is
+ * still exported for shells that want the explicit version.
+ *
+ * An app that wants different chrome composes `SurfaceArea` itself -- see the
+ * playground's CustomShell.
+ */
+export declare function DefaultShell({ presentation, dismissOnScrim }?: DefaultShellProps): import("react").JSX.Element;

package/dist/react/DefaultShell.js

@@ -1,14 +1,48 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isOverlaid, resolveSurfacePresentation } from '../core/graph/surface-presentation.js';
+import { useScena } from './ScenaProvider.js';
 import { useLayout } from './hooks/useLayout.js';
+import { useStore } from './hooks/useStore.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() {
+// Surfaces that can end up lifted over `main`, in the order the scrim closes
+// them. `main`, the bars and the rail are never overlaid by this shell -- a
+// `bar` presentation keeps occupying its edge, so nothing covers anything.
+const OVERLAYABLE = ['sidebar:left', 'sidebar:right', 'panel:bottom'];
+/**
+ * Minimal flex shell.
+ *
+ * Each surface renders through `SurfaceArea`, which delegates to the layout
+ * registered for it (tab / split / stack / rail / inline / floating), and is
+ * stamped with the edge it closes on and the kind of region it is so that CSS
+ * can style it without matching its name.
+ *
+ * Two things it deliberately does itself rather than leaving to the app,
+ * because every app was otherwise writing them:
+ *
+ *   - it resolves the presentation policy per surface, so a sidebar lifts over
+ *     `main` on a narrow viewport instead of taking width from it;
+ *   - it renders the scrim when something is lifted, and closes on a click.
+ *
+ * Resizing is by each surface's own edge (`SurfaceArea`'s `resize` prop) rather
+ * than by a `ShellSplitter` placed beside it. The two are alternatives: a
+ * splitter is an element between two surfaces, which means a shell has to know
+ * the arrangement well enough to place one, and it has nothing to sit against
+ * once a surface floats. Self-edge resize travels with the surface and stands
+ * down on its own when the presentation is not `docked`. `ShellSplitter` is
+ * still exported for shells that want the explicit version.
+ *
+ * An app that wants different chrome composes `SurfaceArea` itself -- see the
+ * playground's CustomShell.
+ */
+export function DefaultShell({ presentation, dismissOnScrim = true } = {}) {
+    const scena = useScena();
     const layout = useLayout();
     const surfaces = layout.surfaces;
+    // `$/modus/class` is published by the modus backend. Without it registered
+    // there is no size class to resolve against, and `large` keeps everything
+    // docked -- the same as having no policy.
+    const modus = useStore('$/modus/class') ?? 'large';
+    const presentationOf = (surface) => resolveSurfacePresentation(surface, modus, presentation);
     const sidebarLeftWidth = surfaces['sidebar:left']?.size ?? 240;
     const sidebarRightWidth = surfaces['sidebar:right']?.size ?? 280;
     const panelBottomHeight = surfaces['panel:bottom']?.size ?? 200;
@@ -18,17 +52,52 @@ export function DefaultShell() {
     const activitybarVisible = surfaces['activitybar']?.visible ?? true;
     const statusbarVisible = surfaces['statusbar']?.visible ?? true;
     const titlebarVisible = surfaces['titlebar']?.visible ?? true;
+    const leftPresentation = presentationOf('sidebar:left');
+    const rightPresentation = presentationOf('sidebar:right');
+    const bottomPresentation = presentationOf('panel:bottom');
+    const visibleOf = {
+        'sidebar:left': sidebarLeftVisible,
+        'sidebar:right': sidebarRightVisible,
+        'panel:bottom': panelBottomVisible,
+    };
+    // Something is over `main` right now. `bar` is excluded by `isOverlaid`,
+    // which is the point of asking it rather than comparing the size class:
+    // a rail rotated to the bottom edge still occupies that edge.
+    const lifted = OVERLAYABLE.filter((surface) => visibleOf[surface] && isOverlaid(presentationOf(surface)));
+    // An overlaid surface takes no width from `main`, so the flex sizing that
+    // would reserve it has to stand down as well -- otherwise the drawer floats
+    // over a `main` that is still short by the drawer's width.
+    const dockedStyle = (docked, style) => (docked ? style : undefined);
+    function closeLifted() {
+        for (const surface of lifted) {
+            scena.layout.setSurface(surface, { ...surfaces[surface], visible: false });
+        }
+    }
     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: {
+        }, children: [titlebarVisible ? (_jsx(SurfaceArea, { surface: "titlebar", layout: "bar", role: "bar", edge: "block-end" })) : null, _jsxs("div", { style: {
+                    display: 'flex',
+                    flex: 1,
+                    minHeight: 0,
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, children: [activitybarVisible ? (_jsx(SurfaceArea, { surface: "activitybar", layout: "rail", role: "rail", edge: "inline-end", presentation: presentationOf('activitybar') })) : null, sidebarLeftVisible ? (_jsx(SurfaceArea, { surface: "sidebar:left", layout: "stack", role: "panel", edge: "inline-end", presentation: leftPresentation, resize: { edge: 'right', min: 120, max: 600 }, style: dockedStyle(!isOverlaid(leftPresentation), {
+                            width: sidebarLeftWidth,
+                            flex: '0 0 auto',
+                            overflow: 'hidden',
+                        }) })) : null, _jsxs("div", { style: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx(SurfaceArea, { surface: "main", layout: "tab", role: "main", style: { flex: 1, minHeight: 0, overflow: 'hidden' } }), panelBottomVisible ? (_jsx(SurfaceArea, { surface: "panel:bottom", layout: "tab", role: "panel", edge: "block-start", presentation: bottomPresentation, resize: { edge: 'top', min: 80, max: 500 }, style: dockedStyle(!isOverlaid(bottomPresentation), {
+                                    height: panelBottomHeight,
+                                    flex: '0 0 auto',
+                                    overflow: 'hidden',
+                                }) })) : null] }), sidebarRightVisible ? (_jsx(SurfaceArea, { surface: "sidebar:right", layout: "stack", role: "panel", edge: "inline-start", presentation: rightPresentation, resize: { edge: 'left', min: 160, max: 600 }, style: dockedStyle(!isOverlaid(rightPresentation), {
+                            width: sidebarRightWidth,
+                            flex: '0 0 auto',
+                            overflow: 'hidden',
+                        }) })) : null, lifted.length > 0 ? (dismissOnScrim ? (_jsx("button", { type: "button", className: "oo-surface-scrim", "aria-label": "Close", onClick: closeLifted })) : (_jsx("div", { className: "oo-surface-scrim", "aria-hidden": "true" }))) : null] }), statusbarVisible ? (_jsx(SurfaceArea, { surface: "statusbar", layout: "bar", role: "bar", edge: "block-start" })) : null, _jsx(SurfaceArea, { surface: "overlay", layout: "floating", role: "overlay", style: {
                     position: 'fixed',
                     inset: 0,
                     pointerEvents: 'none',

package/dist/react/Scena.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import type { Scena as ScenaInstance } from '../types/scena.js';
-import type { CreateScenaOptions } from '../types/scena.js';
+import type { Scena as ScenaInstance } from '../sdk/scena.js';
+import type { CreateScenaOptions } from '../sdk/scena.js';
 export interface ScenaComponentProps {
     options?: CreateScenaOptions;
     onRender?: (scena: ScenaInstance) => void;

package/dist/react/ScenaProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { Scena } from '../types/scena.js';
+import type { Scena } from '../sdk/scena.js';
 export interface ScenaProviderProps {
     scena: Scena;
     children: ReactNode;

package/dist/react/ShellSplitter.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import type { SurfaceName } from '../types/mount-surface.js';
+import type { SurfaceName } from '../sdk/mount-surface.js';
 export interface ShellSplitterProps {
     surface: SurfaceName;
     orientation: 'vertical' | 'horizontal';

package/dist/react/SurfaceArea.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties } from 'react';
-import type { SurfacePresentation } from '../types/layout.js';
-import type { SurfaceName } from '../types/mount-surface.js';
+import type { SurfaceEdge, SurfacePresentation, SurfaceRole } from '../sdk/layout.js';
+import type { SurfaceName } from '../sdk/mount-surface.js';
 import { type SurfaceResizeSpec } from './useSurfaceResize.js';
 export interface SurfaceAreaProps {
     surface: SurfaceName;
@@ -9,5 +9,7 @@ export interface SurfaceAreaProps {
     className?: string;
     presentation?: SurfacePresentation;
     resize?: SurfaceResizeSpec;
+    edge?: SurfaceEdge;
+    role?: SurfaceRole;
 }
-export declare function SurfaceArea({ surface, layout, style, className, presentation, resize, }: SurfaceAreaProps): import("react").JSX.Element;
+export declare function SurfaceArea({ surface, layout, style, className, presentation, resize, edge, role, }: SurfaceAreaProps): import("react").JSX.Element;

package/dist/react/SurfaceArea.js

@@ -11,7 +11,7 @@ function renderOneMount(mount) {
 function FallbackLayout({ mounts }) {
     return (_jsx(_Fragment, { children: mounts.map((m) => (_jsx("div", { style: { display: 'contents' }, children: renderOneMount(m) }, m.key))) }));
 }
-export function SurfaceArea({ surface, layout, style, className, presentation = 'docked', resize, }) {
+export function SurfaceArea({ surface, layout, style, className, presentation = 'docked', resize, edge, role, }) {
     const scena = useScena();
     const layoutState = useLayout();
     const mounts = useMounts(surface);
@@ -60,7 +60,7 @@ export function SurfaceArea({ surface, layout, style, className, presentation =
             });
         },
     };
-    return (_jsx("div", { "data-surface": surface, "data-presentation": presentation, className: [
+    return (_jsx("div", { "data-surface": surface, "data-presentation": presentation, "data-surface-edge": edge, "data-surface-role": role, className: [
             'oo-surface',
             `oo-surface--${surface.replace(':', '-')}`,
             className,

package/dist/react/ViewMount.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { BindingPath, ComponentNode } from '../types/component-graph.js';
+import type { BindingPath, ComponentNode } from '../sdk/component-graph.js';
 interface ViewMountProps {
     node: ComponentNode;
 }

package/dist/react/ViewMount.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
-import { isAction, isComponentNode, isDataBinding, isDynamicChildList, isFunctionCall, } from '../types/component-graph.js';
+import { isAction, isComponentNode, isDataBinding, isDynamicChildList, isFunctionCall, } from '../sdk/component-graph.js';
 import { useScena } from './ScenaProvider.js';
 import { DataContextContext, MountContext, WriteContext, useCurrentMountKey, useDataContext, } from './mount-context.js';
-import { joinAbsolute, readPath } from '../core/path-resolver.js';
-import { resolveAction, resolveDynamicValue, writeDynamic, } from '../core/dynamic-resolver.js';
-import { rewriteLocal } from '../core/reactive-store.js';
+import { joinAbsolute, readPath } from '../core/resolve/path-resolver.js';
+import { resolveAction, resolveDynamicValue, writeDynamic, } from '../core/resolve/dynamic-resolver.js';
+import { rewriteLocal } from '../core/store/reactive-store.js';
 const RESERVED_KEYS = new Set(['id', 'component', '$meta']);
 const reactComponentCache = new WeakMap();
 const reactLoadingPromises = new WeakMap();

package/dist/react/hooks/useI18n.d.ts

@@ -1,4 +1,4 @@
-import { type LocaleInfo, type TranslateOptions } from '../../i18n/registry.js';
+import { type LocaleInfo, type TranslateOptions } from '../../core/i18n/registry.js';
 export interface UseI18nResult {
     t: (key: string, fallbackOrOptions?: string | TranslateOptions) => string;
     locale: string;

package/dist/react/hooks/useI18n.js

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { subscribeI18n, getLocale, getLocaleInfo, listLocaleInfo, translate, setLocale, } from '../../i18n/registry.js';
+import { subscribeI18n, getLocale, getLocaleInfo, listLocaleInfo, translate, setLocale, } from '../../core/i18n/registry.js';
 // Reactive translation for hand-written React. Subscribes to the i18n registry,
 // so the component re-renders on locale switch / message registration. Optional
 // `namespace` is prefixed to every key. For declarative ComponentNodes, bind

package/dist/react/hooks/useLabel.d.ts

@@ -1,2 +1,2 @@
-import type { Label } from '../../types/label.js';
+import type { Label } from '../../sdk/label.js';
 export declare function useLabel(label?: Label): string;

package/dist/react/hooks/useLabel.js

@@ -1,6 +1,6 @@
 import { useStore } from './useStore.js';
 import { useI18n } from './useI18n.js';
-import { translate } from '../../i18n/registry.js';
+import { translate } from '../../core/i18n/registry.js';
 // Resolve a Label (string | { path } | { t }) reactively: `{ path }` follows the
 // store, `{ t }` follows the locale, a string is returned as-is.
 export function useLabel(label) {

package/dist/react/hooks/useLayout.d.ts

@@ -1,2 +1,2 @@
-import type { ScenaLayout } from '../../types/layout.js';
+import type { ScenaLayout } from '../../sdk/layout.js';
 export declare function useLayout(): ScenaLayout;

package/dist/react/hooks/useMounts.d.ts

@@ -1,2 +1,2 @@
-import type { ResolvedMount, SurfaceName } from '../../types/mount-surface.js';
+import type { ResolvedMount, SurfaceName } from '../../sdk/mount-surface.js';
 export declare function useMounts(surface: SurfaceName): ResolvedMount[];

package/dist/react/hooks/useStore.d.ts

@@ -1,3 +1,3 @@
-import type { BindingPath } from '../../types/component-graph.js';
+import type { BindingPath } from '../../sdk/component-graph.js';
 export declare function useStore<T = unknown>(path: BindingPath | undefined, dataContextOverride?: BindingPath): T | undefined;
 export declare function useStoreSetter(): (path: BindingPath, value: unknown) => void;

package/dist/react/hooks/useStore.js

@@ -1,8 +1,8 @@
 import { useMemo, useSyncExternalStore } from 'react';
 import { useScena } from '../ScenaProvider.js';
 import { useCurrentMountKey, useDataContext } from '../mount-context.js';
-import { rewriteLocal } from '../../core/reactive-store.js';
-import { joinAbsolute, readPath } from '../../core/path-resolver.js';
+import { rewriteLocal } from '../../core/store/reactive-store.js';
+import { joinAbsolute, readPath } from '../../core/resolve/path-resolver.js';
 function resolveForRead(path, mountKey, dataContext) {
     if (path.startsWith('/') && !path.startsWith('$/')) {
         return joinAbsolute(dataContext, path);