@softov/scena 0.1.2

package/dist/ui/navigation/Toolbar.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Toolbar.css';
+export interface ToolbarProps {
+    className?: string;
+    style?: CSSProperties;
+    direction?: 'row' | 'column';
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    gap?: CSSProperties['gap'];
+    children: ReactNode;
+}
+export declare function Toolbar({ className, style, direction, align, justify, gap, children, }: ToolbarProps): import("react").JSX.Element;

package/dist/ui/navigation/Toolbar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Toolbar.css';
+// Thin styled container for any horizontal control strip (layout toolbars,
+// titlebar slots, panel headers, ...). Owns padding, gap, border and bg via
+// the `oo-toolbar` class so callers only place children inside.
+//
+// Intentionally non-opinionated about what goes in: caller decides whether
+// items are buttons, selects, inline labels, or full React widgets. Use
+// `direction='column'` for vertical control rails.
+export function Toolbar({ className, style, direction = 'row', align, justify, gap, children, }) {
+    // Inline overrides only when a caller passed an explicit prop — otherwise
+    // we let Toolbar.css drive every value via tokens.
+    const inline = { ...style };
+    if (align !== undefined)
+        inline.alignItems = align;
+    if (justify !== undefined)
+        inline.justifyContent = justify;
+    if (gap !== undefined)
+        inline.gap = gap;
+    return (_jsx("div", { className: ['oo-toolbar', className].filter(Boolean).join(' '), "data-direction": direction, style: inline, children: children }));
+}

package/dist/ui/navigation/catalog.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDefinition } from '../../types/component-registry.js';
+export declare const CATALOG_NAVIGATION_MAP: ComponentDefinition[];

package/dist/ui/navigation/catalog.js

@@ -0,0 +1,5 @@
+// Catalog registration for navigation components (dynamic import — no eager load).
+export const CATALOG_NAVIGATION_MAP = [
+    { component: 'Tabs', category: 'page', renderer: { kind: 'react', load: () => import('./Tabs.js').then((m) => ({ default: m.Tabs })) } },
+    { component: 'Link', category: 'inline', renderer: { kind: 'react', load: () => import('./Link.js').then((m) => ({ default: m.Link })) } },
+];

package/dist/ui/navigation/index.d.ts

@@ -0,0 +1,8 @@
+export { Breadcrumb } from './Breadcrumb.js';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb.js';
+export { Tabs } from './Tabs.js';
+export type { TabsProps, TabsTab } from './Tabs.js';
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarProps } from './Toolbar.js';
+export { Link, resolveLinkHref } from './Link.js';
+export type { LinkProps, LinkKind } from './Link.js';

package/dist/ui/navigation/index.js

@@ -0,0 +1,5 @@
+// Direct-React re-exports. Catalog registration (Tabs/Link) lives in ../catalog.ts.
+export { Breadcrumb } from './Breadcrumb.js';
+export { Tabs } from './Tabs.js';
+export { Toolbar } from './Toolbar.js';
+export { Link, resolveLinkHref } from './Link.js';

package/dist/ui/overlay/Modal.css

@@ -0,0 +1,35 @@
+.oo-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--oo-z-overlay);
+}
+.oo-modal__card {
+  background: var(--oo-color-canvas);
+  color: var(--oo-color-fg);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+  padding: var(--oo-spacing-md);
+  min-width: 320px;
+  max-width: 80vw;
+  max-height: 80vh;
+  overflow: auto;
+}
+.oo-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  margin-bottom: var(--oo-spacing-sm);
+}
+.oo-modal__close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  padding: 0 var(--oo-spacing-xs);
+}

package/dist/ui/overlay/Modal.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface ModalProps {
+    weight?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: string;
+    child?: ReactNode;
+    children?: ReactNode;
+    onClose?: () => void | Promise<void>;
+    dismissable?: boolean;
+}
+export declare function Modal({ open, defaultOpen, title, child, children, onClose, dismissable, }: ModalProps): import("react").JSX.Element | null;

package/dist/ui/overlay/Modal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { NAMED_GLYPH } from '../display/Icon.js';
+// Backdrop + centered card. `open` is bindable via `useWriteBack('open')` so
+// the modal can close itself when bound to a DataBinding; uncontrolled (literal)
+// open just keeps internal state and silently no-ops the write.
+export function Modal({ open, defaultOpen, title, child, children, onClose, dismissable = true, }) {
+    const writeOpen = useWriteBack('open');
+    const [internalOpen, setInternalOpen] = useState(open ?? defaultOpen ?? false);
+    useEffect(() => {
+        if (open === undefined)
+            return;
+        setInternalOpen((current) => (current === open ? current : open));
+    }, [open]);
+    function close() {
+        if (!dismissable)
+            return;
+        setInternalOpen(false);
+        writeOpen(false);
+        void onClose?.();
+    }
+    if (!internalOpen)
+        return null;
+    const body = child ?? children;
+    return (_jsx("div", { onClick: close, style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0,0,0,0.4)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 2000,
+        }, children: _jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
+                background: 'var(--oo-color-canvas, #fff)',
+                color: 'var(--oo-color-fg, inherit)',
+                border: '1px solid var(--oo-color-border)',
+                borderRadius: 'var(--oo-radius-sm, 4px)',
+                padding: 16,
+                minWidth: 320,
+                maxWidth: '80vw',
+                maxHeight: '80vh',
+                overflow: 'auto',
+            }, children: [title ? (_jsxs("div", { style: {
+                        fontWeight: 600,
+                        marginBottom: 8,
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: [_jsx("span", { children: title }), dismissable ? (_jsx("button", { type: "button", onClick: close, style: {
+                                background: 'transparent',
+                                border: 'none',
+                                cursor: 'pointer',
+                                font: 'inherit',
+                                color: 'inherit',
+                            }, "aria-label": "Close", children: NAMED_GLYPH.closePanel })) : null] })) : null, body] }) }));
+}

package/dist/ui/overlay/Popup.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface PopupProps {
+    x: number;
+    y: number;
+    onClose?: () => void;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+export declare function Popup({ x, y, onClose, closeOnOutsideClick, closeOnEscape, className, style, children, }: PopupProps): import("react").JSX.Element;

package/dist/ui/overlay/Popup.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+// Reusable popup positioned at fixed (x, y). Handles outside-click close,
+// Escape key close, and viewport-edge clamping. Used by the MenuPopup wrapper
+// in CustomShell and available to any layout / app that wants an anchored
+// floating panel.
+//
+// Decisions baked in (per PENDING):
+//   - No per-SurfaceArea portal. Caller renders <Popup> wherever it wants.
+//   - No graph-component registration. Popup is React-only for now — agent
+//     surfaces that want a graph-driven popup can wrap this in a built-in
+//     graph component later.
+export function Popup({ x, y, onClose, closeOnOutsideClick = true, closeOnEscape = true, className, style, children, }) {
+    const ref = useRef(null);
+    const [pos, setPos] = useState({ left: x, top: y });
+    // Clamp to viewport once we know our own bounding box.
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        const rect = ref.current.getBoundingClientRect();
+        const margin = 4;
+        const maxX = Math.max(margin, window.innerWidth - rect.width - margin);
+        const maxY = Math.max(margin, window.innerHeight - rect.height - margin);
+        setPos({
+            left: Math.max(margin, Math.min(x, maxX)),
+            top: Math.max(margin, Math.min(y, maxY)),
+        });
+    }, [x, y]);
+    // Outside-click close. We defer adding the listener one tick so the click
+    // that opened the popup doesn't immediately close it (the click handler
+    // that called onOpen lives in the same microtask as the document listener
+    // attachment, so the bubbling click would otherwise re-enter here).
+    useEffect(() => {
+        if (!closeOnOutsideClick || !onClose)
+            return;
+        let mounted = true;
+        function onMouseDown(e) {
+            if (!mounted || !ref.current)
+                return;
+            if (ref.current.contains(e.target))
+                return;
+            onClose?.();
+        }
+        const id = setTimeout(() => {
+            if (mounted)
+                document.addEventListener('mousedown', onMouseDown);
+        }, 0);
+        return () => {
+            mounted = false;
+            clearTimeout(id);
+            document.removeEventListener('mousedown', onMouseDown);
+        };
+    }, [closeOnOutsideClick, onClose]);
+    // Escape close.
+    useEffect(() => {
+        if (!closeOnEscape || !onClose)
+            return;
+        function onKey(e) {
+            if (e.key === 'Escape')
+                onClose?.();
+        }
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [closeOnEscape, onClose]);
+    return (_jsx("div", { ref: ref, className: ['oo-popup', className].filter(Boolean).join(' '), style: {
+            position: 'fixed',
+            left: pos.left,
+            top: pos.top,
+            zIndex: 9999,
+            ...style,
+        }, 
+        // Stop clicks from bubbling into the outside-click listener.
+        onMouseDown: (e) => e.stopPropagation(), children: children }));
+}

package/dist/ui/overlay/catalog.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDefinition } from '../../types/component-registry.js';
+export declare const CATALOG_OVERLAY_MAP: ComponentDefinition[];

package/dist/ui/overlay/catalog.js

@@ -0,0 +1,4 @@
+// Catalog registration for overlay components (dynamic import — no eager load).
+export const CATALOG_OVERLAY_MAP = [
+    { component: 'Modal', category: 'page', renderer: { kind: 'react', load: () => import('./Modal.js').then((m) => ({ default: m.Modal })) } },
+];

package/dist/ui/overlay/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal.js';

package/dist/ui/overlay/index.js

@@ -0,0 +1,2 @@
+// Direct-React re-exports. Catalog registration lives in ../catalog.ts.
+export { Modal } from './Modal.js';

package/dist/ui/register.d.ts

@@ -0,0 +1,6 @@
+import type { Scena } from '../types/scena.js';
+import type { Disposable } from '../types/disposable.js';
+import type { ComponentDefinition } from '../types/component-registry.js';
+export declare function registerCatalog(defs: ComponentDefinition[], scena: Scena): Disposable;
+export declare function registerBuiltins(scena: Scena): Disposable;
+export { registerBuiltinLayouts } from './layout/register.js';

package/dist/ui/register.js

@@ -0,0 +1,26 @@
+import { combineDisposables } from '../core/disposable.js';
+import { CATALOG_LAYOUT_MAP } from './layout/catalog.js';
+import { CATALOG_DISPLAY_MAP } from './display/catalog.js';
+import { CATALOG_DATA_MAP } from './data/catalog.js';
+import { CATALOG_NAVIGATION_MAP } from './navigation/catalog.js';
+import { CATALOG_CONTROLS_MAP } from './control/catalog.js';
+import { CATALOG_MEDIA_MAP } from './media/catalog.js';
+import { CATALOG_OVERLAY_MAP } from './overlay/catalog.js';
+import { CATALOG_FORMS_MAP } from './forms/catalog.js';
+import { CATALOG_CHART_MAP } from './chart/catalog.js';
+export function registerCatalog(defs, scena) {
+    return combineDisposables(...defs.map((d) => scena.components.register(d)));
+}
+// Registers everything scena ships out of the box. Each per-folder catalog uses
+// dynamic import(), so this pulls no component code at import time — boot stays
+// lean and components load on first render.
+//
+// IMPORTANT: import registerBuiltins from '@softov/scena/ui/builtins' (this
+// module), NOT from the '@softov/scena/ui' barrel — the barrel re-exports
+// every component, which a non-tree-shaking dev server fetches eagerly.
+export function registerBuiltins(scena) {
+    return combineDisposables(registerCatalog(CATALOG_LAYOUT_MAP, scena), registerCatalog(CATALOG_DISPLAY_MAP, scena), registerCatalog(CATALOG_DATA_MAP, scena), registerCatalog(CATALOG_NAVIGATION_MAP, scena), registerCatalog(CATALOG_CONTROLS_MAP, scena), registerCatalog(CATALOG_MEDIA_MAP, scena), registerCatalog(CATALOG_OVERLAY_MAP, scena), registerCatalog(CATALOG_FORMS_MAP, scena), registerCatalog(CATALOG_CHART_MAP, scena));
+}
+// Re-exported here so the boot path can pull builtins + layouts from one
+// barrel-free entry. layout/register.ts lazy-loads its layout components.
+export { registerBuiltinLayouts } from './layout/register.js';

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@softov/scena",
+  "version": "0.1.2",
+  "description": "Graph-mounted reactive UI runtime (contracts + runtime)",
+  "license": "MIT",
+  "author": "Luiz Fernando Softov <lfs@softov.dev>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/softov/scena.git",
+    "directory": "packages/scena"
+  },
+  "homepage": "https://github.com/softov/scena#readme",
+  "bugs": "https://github.com/softov/scena/issues",
+  "keywords": [
+    "ui",
+    "runtime",
+    "reactive",
+    "schema-driven",
+    "server-driven-ui",
+    "react"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/core/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "default": "./dist/ui/index.js"
+    },
+    "./ui/builtins": {
+      "types": "./dist/ui/register.d.ts",
+      "default": "./dist/ui/register.js"
+    },
+    "./ui/*": {
+      "types": "./dist/ui/*/index.d.ts",
+      "default": "./dist/ui/*/index.js"
+    },
+    "./react/core": {
+      "types": "./dist/react/core.d.ts",
+      "default": "./dist/react/core.js"
+    },
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "default": "./dist/styles/index.js"
+    },
+    "./styles/*": "./dist/styles/*",
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "default": "./dist/runtime/index.js"
+    },
+    "./porta": {
+      "types": "./dist/porta/index.d.ts",
+      "default": "./dist/porta/index.js"
+    },
+    "./porta/examples": {
+      "types": "./dist/porta/providers/examples/index.d.ts",
+      "default": "./dist/porta/providers/examples/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json",
+    "lint": "eslint src test",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.x",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^29.0.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.4",
+    "yjs": "^13.6.20"
+  }
+}