@softov/scena 0.1.2

package/dist/runtime/surface-bridge.js

@@ -0,0 +1,116 @@
+import { combineDisposables } from '../core/disposable.js';
+// Wires the socket bridge to scena's surface registry.
+//
+// Scena has no notion of "agent" — anyone (an agent, the user, a plugin, a
+// remote peer) can emit a surface event. If a sender wants to namespace its
+// surfaces, it does so by encoding scope into the surfaceId itself (e.g.
+// `<agentId>:<localId>`, `<sessionId>:<formId>`). Scena treats surfaceId as
+// an opaque key.
+//
+// Inbound events:
+//   surface:open    → translate(payload) → store.set page + data → surfaces.open
+//   surface:update  → either set one data path OR re-translate the page
+//   surface:delete  → close mount + clear surface scope
+//
+// Outbound events:
+//   surface:event   → emitted by the dynamic resolver when an Action of `event`
+//                     form fires; the bridge forwards it to the socket so the
+//                     originating sender can react.
+//
+// Path layout:
+//   $/surfaces/<surfaceId>/page        — translated ComponentNode tree
+//   $/surfaces/<surfaceId>/data/<key>  — mutable data model
+//
+// Mount key: `surface:<surfaceId>`.
+export function createSurfaceBridge(deps) {
+    const { store, surfaces, converters, socket, events } = deps;
+    const defaultSurface = deps.defaultSurface ?? 'main';
+    function surfaceBase(surfaceId) {
+        return `$/surfaces/${surfaceId}`;
+    }
+    function dataContextOf(surfaceId) {
+        return `${surfaceBase(surfaceId)}/data`;
+    }
+    function pagePath(surfaceId) {
+        return `${surfaceBase(surfaceId)}/page`;
+    }
+    function mountKey(surfaceId) {
+        return `surface:${surfaceId}`;
+    }
+    function parseMountKey(key) {
+        if (!key.startsWith('surface:'))
+            return null;
+        return key.slice('surface:'.length);
+    }
+    function writePageAndData(surfaceId, page, dataModel) {
+        const writes = {
+            [pagePath(surfaceId)]: page,
+        };
+        for (const [k, v] of Object.entries(dataModel ?? {})) {
+            writes[`${dataContextOf(surfaceId)}/${k}`] = v;
+        }
+        store.patchMany(writes);
+    }
+    const subs = [
+        socket.on('surface:open', (raw) => {
+            const ev = raw;
+            const schema = ev.schema ?? 'a2ui/v0.10';
+            const page = converters.translate({
+                schema,
+                surfaceId: ev.surfaceId,
+                payload: ev.payload,
+            });
+            writePageAndData(ev.surfaceId, page, ev.payload.dataModel);
+            surfaces.open({
+                surface: ev.preferredSurface ?? defaultSurface,
+                key: mountKey(ev.surfaceId),
+                resource: { path: pagePath(ev.surfaceId) },
+                policy: { editable: false, transient: true },
+                dataContext: dataContextOf(ev.surfaceId),
+            });
+        }),
+        socket.on('surface:update', (raw) => {
+            const ev = raw;
+            if (ev.path !== undefined) {
+                const segment = ev.path.startsWith('/') ? ev.path.slice(1) : ev.path;
+                store.set(`${dataContextOf(ev.surfaceId)}/${segment}`, ev.value);
+                return;
+            }
+            if (ev.payload) {
+                const page = converters.translate({
+                    schema: ev.schema ?? 'a2ui/v0.10',
+                    surfaceId: ev.surfaceId,
+                    payload: ev.payload,
+                });
+                writePageAndData(ev.surfaceId, page, ev.payload.dataModel);
+            }
+        }),
+        socket.on('surface:delete', (raw) => {
+            const ev = raw;
+            surfaces.close(mountKey(ev.surfaceId), { reason: 'surface-deleted' });
+            const base = surfaceBase(ev.surfaceId);
+            const internal = store;
+            const keys = internal._internalKeys?.() ?? [];
+            for (const k of keys) {
+                if (k === base || k.startsWith(`${base}/`)) {
+                    store.delete(k);
+                }
+            }
+        }),
+        events.on('scena:action:event', (ev) => {
+            if (!ev.mountKey)
+                return;
+            const surfaceId = parseMountKey(ev.mountKey);
+            if (!surfaceId)
+                return;
+            socket.emit('surface:event', {
+                surfaceId,
+                name: ev.name,
+                context: ev.context,
+                wantResponse: ev.wantResponse,
+                responsePath: ev.responsePath,
+            });
+        }),
+    ];
+    return combineDisposables(...subs);
+}

package/dist/styles/bar.css

@@ -0,0 +1,155 @@
+/* Bar layout: three slots (left | center | right) used by titlebar +
+ * statusbar. Per-surface chrome (height, border-bottom vs border-top, bg)
+ * lives on `.oo-surface--titlebar` / `.oo-surface--statusbar` so the
+ * same bar layout can render in either bar. */
+.oo-layout--bar {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  user-select: none;
+  background: var(--oo-color-surface);
+}
+
+.oo-bar__slot {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: var(--oo-spacing-xs);
+  padding: 0 var(--oo-spacing-sm);
+}
+
+.oo-bar__slot button {
+  border: 0;
+  border-radius: 0;
+}
+
+.oo-bar__slot button[data-active="true"]:not(:hover) {
+  color: var(--oo-color-active);
+}
+
+.oo-bar__slot--left {
+  justify-content: flex-start;
+  flex: 0 0 auto;
+}
+
+.oo-bar__slot--center {
+  justify-content: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.oo-bar__slot--right {
+  justify-content: flex-end;
+  flex: 0 0 auto;
+}
+
+.oo-bar__item {
+  display: flex;
+  align-items: center;
+}
+
+.tab-bar {
+  display: flex;
+  background: var(--oo-color-surface);
+  border-bottom: 1px solid var(--oo-color-border);
+  font-size: var(--oo-font-size-xs);
+  min-width: 0;
+  min-height: 32px;
+}
+
+.tab-bar__strip {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.tab-bar__strip::-webkit-scrollbar {
+  height: 6px;
+}
+
+.tab-bar__strip::-webkit-scrollbar-thumb {
+  background: var(--oo-color-border);
+  border-radius: 3px;
+}
+
+.tab-bar__tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-right: 1px solid var(--oo-color-border);
+  color: var(--oo-color-muted);
+  cursor: pointer;
+  user-select: none;
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.tab-bar__tab[data-active="true"] {
+  color: var(--oo-color-text);
+  background: var(--oo-color-bg);
+  border-bottom: 2px solid var(--oo-color-accent);
+  margin-bottom: -1px;
+}
+
+.tab-bar__tab[data-drag-over="true"] {
+  box-shadow: inset 0 2px 0 var(--oo-color-accent);
+}
+
+.tab-bar__tab .close {
+  opacity: 0.5;
+}
+
+.tab-bar__tab:hover .close {
+  opacity: 1;
+}
+.tab-bar__tab .tab__label {
+  max-width: 173px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.tab-bar__tab .tab__icon {
+  color: var(--tab-color, inherit);
+}
+
+.tab-bar__extras {
+  display: flex;
+  flex: 0 0 auto;
+  padding: 0 8px;
+  gap: 6px;
+  align-items: center;
+}
+
+.tab-bar__extras button {
+  font-size: 11px;
+  padding: 2px 8px;
+  border: 0;
+  /* border: 1px solid var(--oo-color-border); */
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+
+/* Testing ui boxed */
+/* .tab-bar__extras {
+  gap: 0;
+  align-items: stretch;
+  padding: 0;
+}
+
+.tab-bar__extras button {
+  border: 0;
+  border-radius: 0px;
+  min-width: 32px;
+  border-left: 1px solid var(--oo-color-border);
+} */
+
+.tab-bar__extras button:hover {
+  background: var(--oo-color-active);
+}

package/dist/styles/base.css

@@ -0,0 +1,285 @@
+:root {
+
+  --input-padding-y: var(--oo-spacing-xs);
+  --input-padding-x: var(--oo-spacing-sm);
+  --input-background: var(--oo-color-canvas);
+  --input-color: var(--oo-color-text);
+  --input-border-color: var(--oo-color-border);
+  --input-border-radius: var(--oo-radius-sm);
+  --input-border-width: 1px;
+  /* Inherit input styles, but allow overrides via --textarea-*. */
+  --textarea-padding-y: var(--input-padding-y);
+  --textarea-padding-x: var(--input-padding-x);
+  --textarea-background: var(--input-background);
+  --textarea-color: var(--input-color);
+  --textarea-border-color: var(--input-border-color);
+  --textarea-border-radius: var(--input-border-radius);
+  --textarea-border-width: var(--input-border-width);
+
+  --button-background: none;
+  --button-background-hover: rgb(var(--oo-rgb-primary) / 0.88);
+  --button-background-active: var(--oo-color-active);
+  --button-text: inherit;
+  --button-text-hover: var(--oo-color-hover);
+  --button-border: var(--oo-color-border);
+  --button-border-width: 1px;
+  --button-radius: 0;
+  --button-padding-y: var(--oo-spacing-xs);
+  --button-padding-x: var(--oo-spacing-xs);
+  --button-font-size: var(--oo-font-size-sm);
+}
+
+/* Minimal reset + body defaults consuming scena theme tokens. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--oo-font-family);
+  font-size: var(--oo-font-size-md);
+  line-height: var(--oo-line-height);
+  color: var(--oo-color-text);
+  background: var(--oo-color-canvas);
+}
+
+a {
+  color: var(--oo-color-primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:active {
+  color: var(--oo-color-active);
+}
+
+button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  /* justify-content: center; */
+  gap: var(--oo-spacing-xs);
+
+  /* padding: var(--button-padding-y) var(--button-padding-x); */
+  padding-inline: var(--button-padding-x);
+  padding-block: var(--button-padding-y);
+  border-radius: var(--button-radius);
+  border-width: var(--button-border-width);
+  border-style: solid;
+  border-color: var(--button-border);
+  background: var(--button-background);
+  color: var(--button-text);
+
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--button-font-size);
+  line-height: 1;
+
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease,
+    opacity 120ms ease,
+    filter 120ms ease;
+}
+
+button[data-variant="primary"] {
+  --button-background: none;
+  --button-text: var(--oo-color-primary);
+  --button-border: var(--oo-color-primary);
+  --button-text-hover: var(--oo-color-surface);
+  --button-background-hover: rgb(var(--oo-rgb-primary) / 0.88);
+  --button-background-active: rgb(var(--oo-rgb-primary) / 0.76);
+}
+
+button [data-variant="secondary"] {
+  --button-background: none;
+  --button-text: var(--oo-color-text);
+  --button-border: var(--oo-color-border);
+  --button-text-hover: var(--oo-color-surface);
+  --button-background-hover: rgb(var(--oo-rgb-text) / 0.8);
+  --button-background-active: rgb(var(--oo-rgb-text) / 0.76);
+}
+
+button[data-variant="danger"] {
+  --button-background: none;
+  --button-text: var(--oo-color-danger);
+  --button-border: var(--oo-color-danger);
+  --button-text-hover: var(--oo-color-surface);
+  --button-background-hover: rgb(var(--oo-rgb-danger) / 0.88);
+  --button-background-active: rgb(var(--oo-rgb-danger) / 0.76);
+}
+
+button[data-variant="ghost"] {
+  --button-background: none;
+  --button-text: var(--oo-color-text);
+  --button-text-hover: var(--oo-color-primary);
+  --button-background-hover: none;
+  --button-background-active: none;
+  border: none;
+  background: none;
+}
+
+button[data-variant="borderless"] {
+  --button-background: var(--oo-color-hover);
+  --button-text: var(--oo-color-text);
+  --button-border-width: 0;
+  --button-background-hover: var(--oo-color-surface);
+  --button-background-active: var(--oo-color-active);
+}
+
+button[data-selected="true"] {
+  color: var(--oo-color-surface);
+  background: var(--oo-color-active);
+}
+
+button:active,
+button[data-active="true"] {
+  background: var(--button-background-active);
+}
+
+button[disabled],
+button[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+button:hover {
+  background: var(--button-background-hover);
+  color: var(--button-text-hover);
+}
+
+code,
+pre {
+  font-family: var(--oo-font-mono);
+}
+
+
+select {
+  color: inherit;
+  font: inherit;
+  box-sizing: border-box;
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm);
+  background: var(--oo-color-canvas);
+  color: var(--oo-color-fg);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-sm);
+}
+
+input {
+  color: inherit;
+  font: inherit;
+  box-sizing: border-box;
+  padding: var(--input-padding-y) var(--input-padding-x);
+  background: var(--input-background);
+  color: var(--input-color);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+}
+
+textarea {
+  color: inherit;
+  font: inherit;
+  box-sizing: border-box;
+  padding: var(--textarea-padding-y) var(--textarea-padding-x);
+  background: var(--textarea-background);
+  color: var(--textarea-color);
+  border: var(--textarea-border-width) solid var(--textarea-border-color);
+  border-radius: var(--textarea-border-radius);
+}
+
+select:focus,
+input:focus,
+textarea:focus {
+  outline: 1px solid var(--oo-color-accent);
+  outline-offset: -2px;
+}
+
+/*
+ * `display: contents` makes the wrapper transparent to layout — the user
+ * component becomes a direct child of the layout's body, inheriting flex /
+ * grid context (and 100% height) instead of being limited by an
+ * uncontrolled wrapper div.
+ */
+.oo-mount {
+  display: contents;
+}
+
+
+.oo-loading-dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  gap: 4px;
+}
+
+.oo-loading-dots span {
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.35;
+  animation: dotPulse 1s infinite ease-in-out;
+}
+
+.oo-loading-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.oo-loading-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes dotPulse {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0.75);
+    opacity: 0.35;
+  }
+
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/*
+ * While a splitter is being dragged.
+ *
+ * `user-select: none` on the handle alone does not help: the pointer is
+ * captured by the handle, but the selection being extended belongs to the
+ * document, so dragging across a sidebar highlights every label it passes over.
+ *
+ * The cursor is forced for the same reason. The handle is 4px wide and the
+ * pointer spends most of a drag outside it, where the cursor would otherwise
+ * revert to whatever it is over. The splitter sets the value inline, since only
+ * it knows which axis is being dragged.
+ */
+html.oo-resizing,
+html.oo-resizing * {
+  user-select: none !important;
+}
+
+html.oo-resizing * {
+  cursor: inherit !important;
+}

package/dist/styles/geometry.css

@@ -0,0 +1,32 @@
+/*
+ * Geometry CSS variables. LayoutAPI writes these at runtime as the user
+ * resizes surfaces; the defaults here keep the values usable before
+ * the first write (and on environments without LayoutAPI mounted yet).
+ *
+ * Variable naming maps SurfaceName → kebab-case (sidebar:left → sidebar-left).
+ */
+:root {
+  --oo-activitybar-size:   48px;
+  --oo-sidebar-left-size:  240px;
+  --oo-sidebar-right-size: 280px;
+  --oo-main-size:          0px;          /* flex-filled; not typically read */
+  --oo-panel-bottom-size:  200px;
+  --oo-statusbar-size:     22px;
+  --oo-overlay-size:       0px;
+
+  --oo-sidebar-left-visible:  1;
+  --oo-sidebar-right-visible: 0;
+  --oo-panel-bottom-visible:  0;
+  --oo-activitybar-visible:   1;
+  --oo-statusbar-visible:     1;
+}
+
+/* Utility: width of main viewport after subtracting visible chrome widths. */
+.oo-main-fluid-width {
+  width: calc(
+    100vw
+    - var(--oo-activitybar-size, 0px)
+    - var(--oo-sidebar-left-size, 0px) * var(--oo-sidebar-left-visible, 0)
+    - var(--oo-sidebar-right-size, 0px) * var(--oo-sidebar-right-visible, 0)
+  );
+}

package/dist/styles/index.d.ts

@@ -0,0 +1,29 @@
+export type ThemeMode = 'light' | 'dark';
+export type ThemeSource = {
+    kind: 'tokens';
+    tokens: Record<string, string>;
+} | {
+    kind: 'css';
+    href: string;
+};
+export interface ThemeDefinition {
+    id: string;
+    label: string;
+    variants: Partial<Record<ThemeMode, ThemeSource>>;
+}
+export declare function registerTheme(def: ThemeDefinition): void;
+export declare function unregisterTheme(id: string): void;
+export declare function getTheme(id: string): ThemeDefinition | undefined;
+export declare function listThemes(): ThemeDefinition[];
+export declare function applyTheme(root: HTMLElement, themeId: string, mode: ThemeMode): void;
+export declare const SIZE_NAMES: string[];
+export declare const SIZE_SET: Set<string>;
+export type SizeName = (typeof SIZE_NAMES)[number];
+export interface AppearanceProps {
+    variant?: string;
+    size?: SizeName;
+    density?: 'compact' | 'comfortable' | 'spacious';
+}
+export declare function appearance(base: string, opts?: AppearanceProps): string;
+export declare function resolveVariableSize(name: string): string;
+export declare function resolveVariableFontSize(name: string): string;