@softov/scena 0.1.2

package/dist/ui/layout/register.js

@@ -0,0 +1,25 @@
+import { lazy } from 'react';
+import { combineDisposables } from '../../core/disposable.js';
+// Layout components are React.lazy so registering them pulls no layout code at
+// boot — each surface render strategy (and the heavy SpatialLayout/Campus) only
+// loads when a surface first uses it. SurfaceArea renders them inside <Suspense>.
+const TabLayout = lazy(() => import('./TabLayout.js').then((m) => ({ default: m.TabLayout })));
+const TabPanelLayout = lazy(() => import('./TabPanelLayout.js').then((m) => ({ default: m.TabPanelLayout })));
+const SingleLayout = lazy(() => import('./SingleLayout.js').then((m) => ({ default: m.SingleLayout })));
+const SplitLayout = lazy(() => import('./SplitLayout.js').then((m) => ({ default: m.SplitLayout })));
+const StackLayout = lazy(() => import('./StackLayout.js').then((m) => ({ default: m.StackLayout })));
+const SpatialLayout = lazy(() => import('./SpatialLayout.js').then((m) => ({ default: m.SpatialLayout })));
+const RailLayout = lazy(() => import('./RailLayout.js').then((m) => ({ default: m.RailLayout })));
+const InlineLayout = lazy(() => import('./InlineLayout.js').then((m) => ({ default: m.InlineLayout })));
+const BarLayout = lazy(() => import('./BarLayout.js').then((m) => ({ default: m.BarLayout })));
+const FloatingLayout = lazy(() => import('./FloatingLayout.js').then((m) => ({ default: m.FloatingLayout })));
+// Registers all built-in surface render strategies. Call once at app boot,
+// typically right after createScena.
+//
+// Surfaces fall back to a sensible default layout if no `appliesTo` match —
+// see SurfaceArea's `defaultLayoutFor()` for the mapping.
+export function registerBuiltinLayouts(scena) {
+    return combineDisposables(scena.layouts.register({ id: 'tab', title: 'Tabs', component: TabLayout, appliesTo: ['main', 'panel:bottom'] }), scena.layouts.register({ id: 'tab-panel', title: 'Tab Groups', component: TabPanelLayout, appliesTo: ['main', 'panel:bottom'] }), scena.layouts.register({ id: 'single', title: 'Single', component: SingleLayout, appliesTo: ['main', 'sidebar:left', 'sidebar:right', 'panel:bottom', 'detached'] }), 
+    // alias for 'single' — the docs refer to single-mount main as 'page'.
+    scena.layouts.register({ id: 'page', title: 'Page', component: SingleLayout, appliesTo: ['main'] }), scena.layouts.register({ id: 'split', title: 'Split', component: SplitLayout, appliesTo: ['main', 'sidebar:right'] }), scena.layouts.register({ id: 'stack', title: 'Stack', component: StackLayout, appliesTo: ['sidebar:right', 'sidebar:left', 'main'] }), scena.layouts.register({ id: 'spatial', title: 'Spatial', component: SpatialLayout, appliesTo: ['main'] }), scena.layouts.register({ id: 'rail', title: 'Rail', component: RailLayout, appliesTo: ['activitybar'] }), scena.layouts.register({ id: 'inline', title: 'Inline', component: InlineLayout, appliesTo: ['statusbar', 'titlebar'] }), scena.layouts.register({ id: 'bar', title: 'Bar (left / center / right)', component: BarLayout, appliesTo: ['titlebar', 'statusbar'] }), scena.layouts.register({ id: 'floating', title: 'Floating', component: FloatingLayout, appliesTo: ['overlay'] }));
+}

package/dist/ui/media/Audio.css

@@ -0,0 +1 @@
+.oo-audio { display: block; }

package/dist/ui/media/Audio.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Audio.css';
+export interface AudioProps {
+    url?: string;
+    description?: string;
+    controls?: boolean;
+    autoPlay?: boolean;
+    loop?: boolean;
+    style?: CSSProperties;
+    src?: string;
+}
+export declare function Audio({ url, description, controls, autoPlay, loop, style, src, }: AudioProps): ReactNode;

package/dist/ui/media/Audio.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Audio.css';
+export function Audio({ url, description, controls = true, autoPlay, loop, style, src, }) {
+    const effectiveUrl = url ?? src;
+    if (!effectiveUrl)
+        return null;
+    return (_jsxs("div", { className: "oo-audio-wrapper", style: style, children: [description ? (_jsx("div", { className: "oo-audio__description", children: description })) : null, _jsx("audio", { className: "oo-audio", src: effectiveUrl, controls: controls, autoPlay: autoPlay, loop: loop })] }));
+}

package/dist/ui/media/Video.css

@@ -0,0 +1 @@
+.oo-video { display: block; }

package/dist/ui/media/Video.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import './Video.css';
+export interface VideoProps {
+    url?: string;
+    posterUrl?: string;
+    controls?: boolean;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    width?: number | string;
+    height?: number | string;
+    style?: CSSProperties;
+    src?: string;
+    poster?: string;
+}
+export declare function Video({ url, posterUrl, controls, autoPlay, loop, muted, width, height, style, src, poster, }: VideoProps): import("react").JSX.Element | null;

package/dist/ui/media/Video.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Video.css';
+export function Video({ url, posterUrl, controls = true, autoPlay, loop, muted, width, height, style, src, poster, }) {
+    const effectiveUrl = url ?? src;
+    if (!effectiveUrl)
+        return null;
+    const effectivePoster = posterUrl ?? poster;
+    return (_jsx("video", { className: "oo-video", src: effectiveUrl, poster: effectivePoster, controls: controls, autoPlay: autoPlay, loop: loop, muted: muted, style: { width, height, ...style } }));
+}

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

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

package/dist/ui/media/catalog.js

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

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

@@ -0,0 +1,2 @@
+export { Video } from './Video.js';
+export { Audio } from './Audio.js';

package/dist/ui/media/index.js

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

package/dist/ui/menu/ActionList.css

@@ -0,0 +1,262 @@
+/* Picker engine — chat slash, palette, right-click menus.
+ * Layout / typography / spacing through tokens so themes drive everything. */
+:root {
+  --oo-action-list-min-width: 240px;
+  --oo-action-list-max-width: none;
+  --oo-action-list-max-height: 360px;
+}
+
+.oo-action-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: var(--oo-action-list-min-width);
+  max-width: var(--oo-action-list-max-width);
+  max-height: var(--oo-action-list-max-height);
+  background: var(--oo-color-surface);
+  border: 1px solid var(--oo-color-border);
+  border-radius: var(--oo-radius-md, 8px);
+  box-shadow: var(--oo-shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.26));
+  overflow: hidden;
+  color: var(--oo-color-fg);
+  font-size: var(--oo-font-size-sm);
+}
+
+/* Re-resolve indicator — floats top-right over the kept-visible rows so the
+   list doesn't flash to a loading screen while an async provider refetches. */
+.oo-action-list__pending {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  z-index: 2;
+  font-size: 10px;
+  font-family: var(--oo-font-mono);
+  color: var(--oo-color-muted);
+  background: var(--oo-color-surface);
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid var(--oo-color-border);
+  opacity: 0.9;
+  pointer-events: none;
+  animation: oo-action-list-pulse 1s ease-in-out infinite;
+}
+
+@keyframes oo-action-list-pulse {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 0.95; }
+}
+
+.oo-action-list__custom-header {
+  flex: 0 0 auto;
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm);
+  border-bottom: 1px solid var(--oo-color-border);
+}
+
+.oo-action-list__back {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--oo-spacing-xs);
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm);
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--oo-color-border);
+  color: var(--oo-color-muted);
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.oo-action-list__back:hover {
+  background: var(--oo-color-active);
+  color: var(--oo-color-fg);
+}
+
+.oo-action-list__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.oo-action-list__items {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+.oo-action-list__detail {
+  flex: 0 0 40%;
+  min-width: 0;
+  padding: var(--oo-spacing-sm);
+  border-left: 1px solid var(--oo-color-border);
+  background: var(--oo-color-canvas);
+  overflow: auto;
+}
+
+.oo-action-list__header {
+  flex: 0 0 auto;
+  padding: var(--oo-spacing-sm);
+  border-bottom: 1px solid var(--oo-color-border);
+  background: var(--oo-color-canvas);
+}
+
+.oo-action-list__group-label {
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm) 2px;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--oo-color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.oo-action-list__divider {
+  height: 1px;
+  background: var(--oo-color-border);
+}
+
+.oo-action-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+  padding: 6px var(--oo-spacing-sm);
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.oo-action-list__row:hover {
+  color: var(--oo-color-text);
+  background: var(--oo-color-hover);
+}
+
+.oo-action-list__row[data-selected='true'] {
+  color: var(--oo-color-text);
+  background: var(--oo-color-hover);
+}
+
+.oo-action-list__row[data-disabled='true'] {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.oo-action-list__row[data-selected='true'] .oo-action-list__title {
+  font-weight: 700;
+  color: var(--oo-color-accent);
+}
+
+.oo-action-list .oo-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  font-size: 14px;
+  /* flex-shrink: 0; */
+  color: rgb(var(--oo-color, var(--oo-color-muted)));
+}
+
+[data-cmd-group='danger'] .oo-icon {
+  --oo-color: var(--oo-color-red);
+}
+
+[data-cmd-group='create'] .oo-icon {
+  --oo-color: var(--oo-color-green);
+}
+
+[data-cmd-group='open'] .oo-icon {
+  --oo-color: var(--oo-color-blue);
+}
+
+[data-cmd-group='config'] .oo-icon {
+  --oo-color: var(--oo-color-violet);
+}
+
+.oo-action-list__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.oo-action-list__description {
+  flex: 0 0 auto;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+}
+
+/* Rich rows — title stacked over a muted subtitle (web composer style). */
+.oo-action-list__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.oo-action-list__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+  line-height: 1.2;
+}
+
+.oo-action-list__row:hover .oo-action-list__subtitle,
+.oo-action-list__row[data-selected='true'] .oo-action-list__subtitle {
+  color: var(--oo-color-text);
+}
+
+.oo-action-list__shortcut {
+  flex: 0 0 auto;
+  font-family: var(--oo-font-mono);
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+  background: var(--oo-color-canvas);
+  border: 1px solid var(--oo-color-border);
+  border-radius: 3px;
+  padding: 0 4px;
+}
+
+.oo-action-list__row[data-selected='true'] .oo-action-list__shortcut {
+  background: var(--oo-color-active);
+  color: var(--oo-color-surface);
+}
+.oo-action-list__row:hover .oo-action-list__shortcut {
+  background: var(--oo-color-active);
+  color: var(--oo-color-surface);
+}
+
+.oo-action-list__check {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--oo-color-accent);
+}
+
+.oo-action-list__empty,
+.oo-action-list__loading,
+.oo-action-list__error {
+  padding: var(--oo-spacing-md) var(--oo-spacing-sm);
+  color: var(--oo-color-muted);
+  text-align: center;
+  font-size: var(--oo-font-size-xs);
+}
+
+.oo-action-list__footer {
+  flex: 0 0 auto;
+  padding: 4px var(--oo-spacing-sm);
+  border-top: 1px solid var(--oo-color-border);
+  color: var(--oo-color-muted);
+  font-size: 10px;
+  font-family: var(--oo-font-mono);
+  user-select: none;
+}

package/dist/ui/menu/ActionList.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from 'react';
+import type { HostCtx, ListSpec } from '../../types/host.js';
+import type { BindingPath } from '../../types/component-graph.js';
+import './ActionList.css';
+export interface ActionListController {
+    handleKey(e: {
+        key: string;
+        preventDefault: () => void;
+    }): boolean;
+}
+export interface ActionListProps {
+    spec: ListSpec;
+    hostCtx: HostCtx;
+    onBack?: () => void;
+    dataContext?: BindingPath;
+    manageKeys?: boolean;
+    ref?: Ref<ActionListController>;
+}
+export declare function ActionList({ spec, hostCtx, onBack, dataContext, manageKeys, ref, }: ActionListProps): import("react").JSX.Element;