@softov/scena 0.1.2

package/dist/ui/forms/schema-walk.js

@@ -0,0 +1,116 @@
+// Pure JSON Schema helpers for SchemaForm. No React. Ported from web's
+// JsonSchemaForm so the schema logic is testable in isolation and the form
+// component stays a thin renderer.
+export function isObjectRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+// Structural equality for form values (JSON-shaped: primitives, arrays,
+// plain objects). Used for dirty tracking against a pristine baseline.
+export function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a === null || b === null || typeof a !== typeof b)
+        return false;
+    if (Array.isArray(a) || Array.isArray(b)) {
+        if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+            return false;
+        return a.every((x, i) => deepEqual(x, b[i]));
+    }
+    if (typeof a === 'object' && typeof b === 'object') {
+        const ak = Object.keys(a);
+        const bk = Object.keys(b);
+        if (ak.length !== bk.length)
+            return false;
+        return ak.every((k) => Object.prototype.hasOwnProperty.call(b, k) &&
+            deepEqual(a[k], b[k]));
+    }
+    return false;
+}
+// Primary type, ignoring "null" in union arrays like ["string", "null"].
+export function effectiveType(field) {
+    const t = field.type;
+    if (Array.isArray(t)) {
+        return (t.find((x) => x !== 'null') ?? 'string');
+    }
+    if (!t && Array.isArray(field.oneOf)) {
+        const fromOneOf = field.oneOf.find((entry) => entry.type && entry.type !== 'null')?.type;
+        if (fromOneOf)
+            return fromOneOf;
+    }
+    if (!t && Array.isArray(field.anyOf)) {
+        const fromAnyOf = field.anyOf.find((entry) => entry.type && entry.type !== 'null')?.type;
+        if (fromAnyOf)
+            return fromAnyOf;
+    }
+    if (!t && field.items)
+        return 'array';
+    if (!t && field.properties)
+        return 'object';
+    return t ?? 'string';
+}
+export function resolveUnionOptions(field) {
+    if (Array.isArray(field.oneOf) && field.oneOf.length > 0)
+        return field.oneOf;
+    if (Array.isArray(field.anyOf) && field.anyOf.length > 0)
+        return field.anyOf;
+    return [];
+}
+export function normalizeUnionOptions(field) {
+    return resolveUnionOptions(field).map((option) => ({
+        ...option,
+        description: option.description ?? field.description,
+    }));
+}
+// null → tuple arrays (edited as raw JSON); object → item schema.
+export function resolveArrayItemSchema(field) {
+    if (!field.items)
+        return { type: 'string' };
+    if (Array.isArray(field.items))
+        return null;
+    return field.items;
+}
+export function defaultValueForSchema(field) {
+    const unionOptions = resolveUnionOptions(field);
+    if (unionOptions.length > 0) {
+        return defaultValueForSchema(unionOptions[0]);
+    }
+    if (field.default !== undefined)
+        return field.default;
+    if (field.const !== undefined)
+        return field.const;
+    const type = effectiveType(field);
+    if (type === 'boolean')
+        return false;
+    if (type === 'number' || type === 'integer')
+        return 0;
+    if (type === 'array')
+        return [];
+    if (type === 'object') {
+        const defaults = {};
+        const properties = field.properties ?? {};
+        const requiredSet = new Set(field.required ?? []);
+        for (const [key, child] of Object.entries(properties)) {
+            if (child.default !== undefined || child.const !== undefined || requiredSet.has(key)) {
+                defaults[key] = defaultValueForSchema(child);
+            }
+        }
+        return defaults;
+    }
+    return '';
+}
+// Strip the `[textarea]` / `[textarea:n]` marker web embeds in descriptions.
+export function cleanDescription(description) {
+    if (typeof description !== 'string')
+        return description;
+    return description.replace(/\s*\[textarea(?::\d+)?\]/, '');
+}
+// Returns the textarea row count when a string field is marked as multiline
+// (via `format: 'textarea'` or a `[textarea:n]` description marker), else null.
+export function textareaRows(field) {
+    if (field.format === 'textarea')
+        return 4;
+    const match = field.description?.match(/\[textarea(?::(\d+))?\]/);
+    if (!match)
+        return null;
+    return match[1] ? parseInt(match[1], 10) : 4;
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,58 @@
+export { registerBuiltins, registerCatalog } from './register.js';
+export { Splitter } from './layout/Splitter.js';
+export { Popup } from './overlay/Popup.js';
+export type { PopupProps } from './overlay/Popup.js';
+export { Toolbar } from './navigation/index.js';
+export type { ToolbarProps } from './navigation/index.js';
+export { Badge } from './display/Badge.js';
+export type { BadgeProps, BadgeTone } from './display/Badge.js';
+export { Breadcrumb } from './navigation/index.js';
+export type { BreadcrumbProps, BreadcrumbItem } from './navigation/index.js';
+export { Progress } from './display/Progress.js';
+export type { ProgressProps } from './display/Progress.js';
+export { Spinner } from './display/Spinner.js';
+export type { SpinnerProps } from './display/Spinner.js';
+export { Skeleton } from './display/Skeleton.js';
+export type { SkeletonProps } from './display/Skeleton.js';
+export { Markdown } from './display/Markdown.js';
+export type { MarkdownProps } from './display/Markdown.js';
+export { HtmlEmbed } from './embed/index.js';
+export type { HtmlEmbedProps } from './embed/index.js';
+export { Svg } from './display/Svg.js';
+export type { SvgProps } from './display/Svg.js';
+export { Alert } from './display/Alert.js';
+export type { AlertProps, AlertTone } from './display/Alert.js';
+export { Avatar } from './display/Avatar.js';
+export type { AvatarProps, AvatarSize } from './display/Avatar.js';
+export { Tree } from './data/index.js';
+export type { TreeProps, TreeNode } from './data/index.js';
+export { Listable } from './data/index.js';
+export type { ListableProps, ListableColumn, ListableCellProps, ListableTitleProps, ListableSort, ListableRenderContext, } from './data/index.js';
+export { DataTable } from './data/index.js';
+export type { DataTableProps, DataColumn, DataRow } from './data/index.js';
+export { Pagination, Filter } from './data/index.js';
+export type { PaginationProps, FilterProps, FilterField } from './data/index.js';
+export { BarChart, LineChart, Sparkline, Donut } from './chart/index.js';
+export type { BarChartProps, BarChartBar, BarChartSegment, LineChartProps, LineSeries, SparklineProps, DonutProps, DonutSlice, } from './chart/index.js';
+export { ActionList, ContextMenu, ContainerMenu, useChatPicker, sentinelHas, useContextMenu, clampCaretIndex, getActiveToken, replaceActiveToken, shortcutMatchesToken, canonicalShortcut, } from './menu/index.js';
+export type { ActionListProps, ContextMenuProps, ContainerMenuProps, UseChatPickerParams, UseChatPickerResult, TokenInfo, } from './menu/index.js';
+export { CampusView, CampusNodus, CampusStratum, CampusVelum, CampusMappa, useCampus, useStratumZoom, } from './campus/index.js';
+export type { CampusViewProps, CampusNodusProps, CampusStratumProps, CampusVelumProps, CampusMappaProps, CampusContextValue, CampusBounds, CampusViewport, CampusController, CampusMappaNode, CampusNode, CampusLayerConfig, CampusNodeRenderProps, CampusNodeComponent, CampusNodeTypes, DragMode, ResizeMode, } from './campus/index.js';
+export { TabLayout, TabPanelLayout, SingleLayout, SplitLayout, StackLayout, SpatialLayout, RailLayout, InlineLayout, BarLayout, FloatingLayout, registerBuiltinLayouts, } from './layout/index.js';
+export { Card, Divider, Text, Image, Icon } from './display/index.js';
+export { DetailList, DetailHeader, DetailContainer, DetailNotFound, AddPlaceholder, SectionTitle } from './display/index.js';
+export type { DetailListProps, DetailItem, DetailHeaderProps, DetailHeaderMeta, DetailContainerProps, DetailNotFoundProps, DetailNotFoundAction, AddPlaceholderProps, SectionTitleProps } from './display/index.js';
+export { List } from './data/index.js';
+export { Tabs } from './navigation/index.js';
+export { Link, resolveLinkHref } from './navigation/index.js';
+export type { LinkProps, LinkKind } from './navigation/index.js';
+export { Button, ReloadButton, TextField, CheckBox, ChoicePicker, Slider, DateTimeInput, Checks, LocaleToggle, } from './control/index.js';
+export type { LocaleToggleProps, LocaleToggleDisplay, ReloadButtonProps } from './control/index.js';
+export { Row, Column } from './layout/index.js';
+export { Grid } from './layout/index.js';
+export type { GridProps } from './layout/index.js';
+export { Video, Audio } from './media/index.js';
+export { Modal } from './overlay/index.js';
+export type { CheckRuleResolved, ChecksProps } from './control/index.js';
+export { Form, FormContext, useFormContext, Field, FieldLabel, FieldError, FieldHint, FieldGroup, FormSection, FormActions, SchemaForm, DangerZone, SettingsContainer, LoginForm, } from './forms/index.js';
+export type { FormProps, FormContextValue, FieldProps, FieldLabelProps, FieldErrorProps, FieldHintProps, FieldGroupProps, FormSectionProps, FormActionsProps, FormActionItem, SchemaFormProps, FormatRenderer, FormatRendererProps, JsonSchemaField, JsonSchemaObject, EnumOption, DangerZoneProps, SettingsContainerProps, } from './forms/index.js';

package/dist/ui/index.js

@@ -0,0 +1,63 @@
+// scena UI module — top-level re-export map. Folder layout:
+//
+//   basic/       — a2ui v0.10 spec primitives (Row, Column, List, Card,
+//                  Button, TextField, Checks, ...). Stay declarative; the
+//                  ViewMount renderer resolves DynamicChildList upstream.
+//   primitives/  — composed low-level building blocks (Popup, Splitter,
+//                  Toolbar, Badge, Alert, Progress, Spinner, Skeleton,
+//                  Markdown, HtmlEmbed, Svg, Breadcrumb). Stateless display.
+//   blocks/      — composed higher-level reusables (Tree, Listable, ...).
+//                  Own interaction state: selection, kbd nav, drag-drop,
+//                  right-click context menus.
+//   menu/        — picker family (ActionList engine + ContextMenu +
+//                  useChatPicker host hook).
+//   layouts/     — surface render strategies (Tab, TabPanel, Single, Split,
+//                  Stack, Spatial, Rail, Inline, Bar, Floating).
+export { registerBuiltins, registerCatalog } from './register.js';
+// ─── primitives/ ─────────────────────────────────────────────────────────
+export { Splitter } from './layout/Splitter.js';
+export { Popup } from './overlay/Popup.js';
+export { Toolbar } from './navigation/index.js';
+export { Badge } from './display/Badge.js';
+export { Breadcrumb } from './navigation/index.js';
+export { Progress } from './display/Progress.js';
+export { Spinner } from './display/Spinner.js';
+export { Skeleton } from './display/Skeleton.js';
+export { Markdown } from './display/Markdown.js';
+export { HtmlEmbed } from './embed/index.js';
+export { Svg } from './display/Svg.js';
+export { Alert } from './display/Alert.js';
+export { Avatar } from './display/Avatar.js';
+// ─── blocks/ ─────────────────────────────────────────────────────────────
+export { Tree } from './data/index.js';
+export { Listable } from './data/index.js';
+export { DataTable } from './data/index.js';
+export { Pagination, Filter } from './data/index.js';
+// ─── chart/ — hand-drawn charts (flexbox + SVG, no deps) ──────────────────
+export { BarChart, LineChart, Sparkline, Donut } from './chart/index.js';
+// ─── menu/ ───────────────────────────────────────────────────────────────
+// Picker family — ActionList engine + ContextMenu + chat-style host hook.
+// See doop-roadmap/ideas/scena/15-command-view.md.
+export { ActionList, ContextMenu, ContainerMenu, useChatPicker, sentinelHas, useContextMenu, clampCaretIndex, getActiveToken, replaceActiveToken, shortcutMatchesToken, canonicalShortcut, } from './menu/index.js';
+// ─── campus/ ─────────────────────────────────────────────────────────────
+// Generic pan/zoom canvas primitives. Extracted from SpatialLayout so other
+// surfaces (flowchart editors, whiteboards, node graphs) can reuse them.
+export { CampusView, CampusNodus, CampusStratum, CampusVelum, CampusMappa, useCampus, useStratumZoom, } from './campus/index.js';
+// ─── layouts/ ────────────────────────────────────────────────────────────
+export { TabLayout, TabPanelLayout, SingleLayout, SplitLayout, StackLayout, SpatialLayout, RailLayout, InlineLayout, BarLayout, FloatingLayout, registerBuiltinLayouts, } from './layout/index.js';
+// ─── basic/ — a2ui v0.10 spec ────────────────────────────────────────────
+export { Card, Divider, Text, Image, Icon } from './display/index.js';
+export { DetailList, DetailHeader, DetailContainer, DetailNotFound, AddPlaceholder, SectionTitle } from './display/index.js';
+export { List } from './data/index.js';
+export { Tabs } from './navigation/index.js';
+export { Link, resolveLinkHref } from './navigation/index.js';
+export { Button, ReloadButton, TextField, CheckBox, ChoicePicker, Slider, DateTimeInput, Checks, LocaleToggle, } from './control/index.js';
+export { Row, Column } from './layout/index.js';
+export { Grid } from './layout/index.js';
+export { Video, Audio } from './media/index.js';
+export { Modal } from './overlay/index.js';
+// ─── forms/ — JSON Schema form + composable parts ─────────────────────────
+// Form / Field / FieldGroup / FormSection / SchemaForm register as catalog
+// components. FieldLabel / FieldError / FieldHint are export-only (internal
+// parts of Field). See doop-roadmap/ideas/scena/16-forms.md.
+export { Form, FormContext, useFormContext, Field, FieldLabel, FieldError, FieldHint, FieldGroup, FormSection, FormActions, SchemaForm, DangerZone, SettingsContainer, LoginForm, } from './forms/index.js';

package/dist/ui/layout/BarLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function BarLayout({ mounts, renderMount }: LayoutProps): import("react").JSX.Element;

package/dist/ui/layout/BarLayout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function isSlot(v) {
+    return v === 'left' || v === 'center' || v === 'right';
+}
+function slotOf(m) {
+    const s = m.component.slot;
+    return isSlot(s) ? s : 'center';
+}
+export function BarLayout({ mounts, renderMount }) {
+    const left = [];
+    const center = [];
+    const right = [];
+    for (const m of mounts) {
+        const bucket = slotOf(m) === 'left' ? left : slotOf(m) === 'right' ? right : center;
+        bucket.push(m);
+    }
+    return (_jsxs("div", { className: "oo-layout oo-layout--bar", children: [_jsx("div", { className: "oo-bar__slot oo-bar__slot--left", children: left.map((m) => (_jsx("div", { className: "oo-bar__item", children: renderMount(m) }, m.key))) }), _jsx("div", { className: "oo-bar__slot oo-bar__slot--center", children: center.map((m) => (_jsx("div", { className: "oo-bar__item", children: renderMount(m) }, m.key))) }), _jsx("div", { className: "oo-bar__slot oo-bar__slot--right", children: right.map((m) => (_jsx("div", { className: "oo-bar__item", children: renderMount(m) }, m.key))) })] }));
+}

package/dist/ui/layout/Column.css

@@ -0,0 +1,6 @@
+.oo-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: var(--oo-column-gap, var(--oo-spacing-md));
+}

package/dist/ui/layout/Column.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type StyleAlign, type StyleJustify } from '../_utils.js';
+import './Column.css';
+export interface ColumnProps {
+    children?: ReactNode;
+    justify?: StyleJustify;
+    align?: StyleAlign;
+    weight?: number;
+    gap?: number | string;
+    style?: CSSProperties;
+}
+export declare function Column({ children, justify, align, weight, gap, style, }: ColumnProps): import("react").JSX.Element;

package/dist/ui/layout/Column.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mapAlign, mapJustify, weightStyle } from '../_utils.js';
+import './Column.css';
+export function Column({ children, justify = 'start', align = 'stretch', weight, gap, style, }) {
+    const inlineStyle = {
+        justifyContent: mapJustify(justify),
+        alignItems: mapAlign(align),
+        ...(gap !== undefined ? { gap } : null),
+        ...weightStyle(weight),
+        ...style,
+    };
+    return _jsx("div", { className: "oo-col", style: inlineStyle, children: children });
+}

package/dist/ui/layout/FloatingLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function FloatingLayout({ mounts, renderMount }: LayoutProps): import("react").JSX.Element;

package/dist/ui/layout/FloatingLayout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Floating overlay. Used for the `overlay` surface. The container is
+// pointer-events: none so it doesn't block underlying chrome; each child
+// re-enables pointer-events. Mounts decide their own positioning via
+// inline style or CSS classes.
+export function FloatingLayout({ mounts, renderMount }) {
+    return (_jsx("div", { className: "oo-layout oo-layout--floating", style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+        }, children: mounts.map((m) => (_jsx("div", { style: { pointerEvents: 'auto' }, children: renderMount(m) }, m.key))) }));
+}

package/dist/ui/layout/Grid.css

@@ -0,0 +1,5 @@
+.oo-grid {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+}

package/dist/ui/layout/Grid.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type StyleAlign } from '../_utils.js';
+import './Grid.css';
+export interface GridProps {
+    children?: ReactNode;
+    minColumnWidth?: number | string;
+    columns?: number;
+    gap?: number | string;
+    align?: StyleAlign;
+    weight?: number;
+    style?: CSSProperties;
+}
+export declare function Grid({ children, minColumnWidth, columns, gap, align, weight, style }: GridProps): import("react").JSX.Element;

package/dist/ui/layout/Grid.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mapAlign, weightStyle } from '../_utils.js';
+import './Grid.css';
+function asSize(v) {
+    return typeof v === 'number' ? `${v}px` : v;
+}
+export function Grid({ children, minColumnWidth = 220, columns, gap, align = 'stretch', weight, style }) {
+    const gridTemplateColumns = columns
+        ? `repeat(${columns}, minmax(0, 1fr))`
+        : `repeat(auto-fit, minmax(${asSize(minColumnWidth)}, 1fr))`;
+    const gridStyle = {
+        gridTemplateColumns,
+        gap: gap ?? 'var(--oo-grid-gap, 12px)',
+        alignItems: mapAlign(align, 'stretch'),
+        ...weightStyle(weight),
+        ...style,
+    };
+    return (_jsx("div", { className: "oo-grid", style: gridStyle, children: children }));
+}

package/dist/ui/layout/InlineLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function InlineLayout({ mounts, renderMount }: LayoutProps): import("react").JSX.Element;

package/dist/ui/layout/InlineLayout.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Horizontal inline row. Used for the statusbar. Mount order matches
+// listAt() order; the StatusItem component handles its own side/priority
+// via internal styling.
+export function InlineLayout({ mounts, renderMount }) {
+    return (_jsx("div", { className: "oo-layout oo-layout--inline", style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 'var(--oo-spacing-md)',
+            height: '100%',
+        }, children: mounts.map((m) => (_jsx("div", { style: { display: 'contents' }, children: renderMount(m) }, m.key))) }));
+}

package/dist/ui/layout/MountTitle.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { Scena } from '../../types/scena.js';
+import type { ResolvedMount } from '../../types/mount-surface.js';
+export declare function useMountTitle(mount: ResolvedMount | undefined, fallback?: string): string;
+export declare function MountTitle({ mount, fallback, iconClassName, titleClassName, style, }: {
+    mount: ResolvedMount | undefined;
+    fallback?: string;
+    iconClassName?: string;
+    titleClassName?: string;
+    style?: CSSProperties;
+}): ReactNode;
+export declare function resolveMountTitle(scena: Scena, mount: ResolvedMount): string;

package/dist/ui/layout/MountTitle.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { useStoreLabel } from '../../react/hooks/useStoreLabel.js';
+import { readPath } from '../../core/path-resolver.js';
+import { translate } from '../../i18n/registry.js';
+// Shared title resolution for layout headers. A mount's title is
+// `mount.props.title ?? the component's registered default`, resolved against
+// the mount's OWN dataContext — so a relative `{ path: '/name' }` resolves to
+// this record (set by `openResource`) and updates live on change.
+// Reactive — for component scopes (SpatialCard, SingleLayout, the TabTitle).
+export function useMountTitle(mount, fallback = '') {
+    const scena = useScena();
+    const compProps = mount ? scena.components.get(mount.component.component)?.props : undefined;
+    return useStoreLabel(mount?.props?.title ?? compProps?.title, '', mount?.dataContext) || fallback;
+}
+// Reactive icon + title text + truncation tooltip — the label cluster shared by
+// every layout header. Rendered as a CHILD component (not a hook in a `.map()`
+// body) so it stays reactive inside inline list renders (split panes, stack
+// sections).
+export function MountTitle({ mount, fallback, iconClassName, titleClassName, style, }) {
+    const scena = useScena();
+    const compProps = mount ? scena.components.get(mount.component.component)?.props : undefined;
+    const title = useStoreLabel(mount?.props?.title ?? compProps?.title, '', mount?.dataContext) || (fallback ?? '');
+    const icon = mount?.props?.icon ?? compProps?.icon;
+    return (_jsxs("span", { title: title, style: { display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0, ...style }, children: [icon ? (_jsx("span", { className: iconClassName, "aria-hidden": true, children: icon })) : null, _jsx("span", { className: titleClassName, style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: title })] }));
+}
+// One-shot (non-reactive) resolve — for contexts where a hook can't run, e.g.
+// building ContextMenu item strings inside a `.map()`. Resolves a `{ path }`
+// via readPath against the mount's dataContext (so relative titles work); the
+// menu re-resolves each time it opens, so non-reactive is fine.
+export function resolveMountTitle(scena, mount) {
+    const compProps = scena.components.get(mount.component.component)?.props;
+    const label = (mount.props?.title ?? compProps?.title);
+    if (label == null)
+        return mount.key;
+    if (typeof label === 'string')
+        return label;
+    if ('t' in label)
+        return translate(label.t);
+    const value = readPath(scena.store, mount.dataContext, label.path);
+    return value == null ? mount.key : String(value);
+}

package/dist/ui/layout/RailLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function RailLayout({ mounts, renderMount, presentation }: LayoutProps): import("react").JSX.Element;

package/dist/ui/layout/RailLayout.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Icon rail with two groups (top + bottom). The second group sticks to the far
+// end via an auto margin; mount order within each group is preserved.
+//
+// Axis follows the hosting surface's presentation: a docked activitybar is a
+// vertical rail, and the same surface presented as a `bar` (pinned to the
+// bottom edge when the viewport is narrow) lays out horizontally. Both the
+// flex direction AND which margin does the pushing have to flip together —
+// margin-top: auto does nothing in a row.
+//
+// Mounts declare placement via a literal-string `pos` prop on the root node
+// (`pos: 'bottom'`). Anything else (including undefined) counts as top.
+function isLiteralString(v) {
+    return typeof v === 'string';
+}
+function posOf(mount) {
+    const pos = mount.component.pos;
+    if (isLiteralString(pos) && pos === 'bottom')
+        return 'bottom';
+    return 'top';
+}
+export function RailLayout({ mounts, renderMount, presentation }) {
+    const top = [];
+    const bottom = [];
+    for (const m of mounts) {
+        (posOf(m) === 'bottom' ? bottom : top).push(m);
+    }
+    const horizontal = presentation === 'bar';
+    const direction = horizontal ? 'row' : 'column';
+    const pushEnd = horizontal ? { marginLeft: 'auto' } : { marginTop: 'auto' };
+    return (_jsxs("div", { className: "oo-layout oo-layout--rail", "data-orientation": horizontal ? 'horizontal' : 'vertical', style: {
+            display: 'flex',
+            flexDirection: direction,
+            height: horizontal ? undefined : '100%',
+            width: horizontal ? '100%' : undefined,
+            alignItems: horizontal ? 'center' : undefined,
+        }, children: [_jsx("div", { className: "oo-rail__top", style: { display: 'flex', flexDirection: direction }, children: top.map((m) => (_jsx("div", { style: { display: 'contents' }, children: renderMount(m) }, m.key))) }), _jsx("div", { className: "oo-rail__bottom", style: { display: 'flex', flexDirection: direction, ...pushEnd }, children: bottom.map((m) => (_jsx("div", { style: { display: 'contents' }, children: renderMount(m) }, m.key))) })] }));
+}

package/dist/ui/layout/Row.css

@@ -0,0 +1,16 @@
+.oo-row {
+  --oo-row-gap: var(--oo-spacing-md);
+  display: flex;
+  /* flex: var(--weight); */
+  /* flex-direction: row; */
+  /* min-width: 0; */
+  /* gap: var(--oo-row-gap, var(--oo-spacing-md)); */
+}
+
+.oo-row>section {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  min-height: 100%;
+  gap: var(--oo-row-gap, var(--oo-spacing-md));
+}

package/dist/ui/layout/Row.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type StyleAlign, type StyleJustify } from '../_utils.js';
+import './Row.css';
+export interface RowProps {
+    children?: ReactNode;
+    justify?: StyleJustify;
+    align?: StyleAlign;
+    weight?: number;
+    gap?: number | string;
+    wrap?: boolean;
+    style?: CSSProperties;
+}
+export declare function Row({ children, justify, align, weight, gap, wrap, style, }: RowProps): import("react").JSX.Element;

package/dist/ui/layout/Row.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mapAlign, mapJustify, weightStyle } from '../_utils.js';
+import './Row.css';
+export function Row({ children, justify = 'start', align = 'stretch', weight, gap, wrap = false, style, }) {
+    return (_jsx("div", { className: "oo-row", "data-align": mapAlign(align), "data-weight": weight, "data-justify": mapJustify(justify), style: {
+            // display: 'flex',
+            // flexDirection: 'row',
+            ...weightStyle(weight),
+        }, children: _jsx("section", { style: {
+                // display: 'flex',
+                // flexDirection: 'row',
+                flexWrap: wrap ? 'wrap' : 'nowrap',
+                justifyContent: mapJustify(justify, style?.justifyContent),
+                alignItems: mapAlign(align, style?.alignItems),
+                // width: '100%',
+                // minHeight: '100%',
+                // ...(gap !== undefined ? { gap } : null),
+                ['--oo-row-gap']: gap !== undefined ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined,
+                ...style,
+            }, children: children }) }));
+}

package/dist/ui/layout/SectionHeader.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import type { MountAction } from '../../types/mount-surface.js';
+import type { Label } from '../../types/label.js';
+export interface SectionHeaderProps {
+    title: Label;
+    icon?: ReactNode;
+    color?: string;
+    actions?: MountAction[];
+}
+export declare function SectionHeader({ title, icon, color, actions }: SectionHeaderProps): ReactNode;

package/dist/ui/layout/SectionHeader.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { resolveLabel } from '../../core/label.js';
+import { useScena } from '../../react/ScenaProvider.js';
+import { useI18n } from '../../react/hooks/useI18n.js';
+import { translate } from '../../i18n/registry.js';
+import { ContextMenu } from '../menu/ContextMenu.js';
+// The header strip for a sidebar section (single layout) — same visual language
+// as StackHeader's container strip, plus an action row. Title/icon/actions come
+// from the active mount's display (mount.props ?? component.props).
+export function SectionHeader({ title, icon, color, actions = [] }) {
+    const scena = useScena();
+    useI18n(); // re-resolve `{ t }` labels on locale switch
+    const [menu, setMenu] = useState(null);
+    const run = (command) => void scena.commands.execute(command);
+    const resolve = (l) => resolveLabel(l, { get: (p) => scena.store.get(p), translate });
+    const label = (a) => resolve(a.label);
+    const titleText = resolve(title);
+    function openMenu(e) {
+        e.stopPropagation();
+        const r = e.currentTarget.getBoundingClientRect();
+        setMenu({ x: r.right, y: r.bottom + 2 });
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "oo-section-header", "data-color": color, style: headerStyle, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [icon ? _jsx("span", { className: "oo-section-header__icon", "aria-hidden": true, children: icon }) : null, _jsx("span", { className: "oo-section-header__title", style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: titleText })] }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [actions.map((a) => {
+                                const text = label(a);
+                                return (_jsx("button", { type: "button", title: text, "aria-label": text, onClick: () => run(a.command), style: iconBtn, children: a.icon ?? text ?? '•' }, a.command));
+                            }), actions.length ? (_jsx("button", { type: "button", title: "More actions", "aria-label": "More actions", onClick: openMenu, style: iconBtn, children: "\u22EF" })) : null] })] }), menu ? (_jsx(ContextMenu, { x: menu.x, y: menu.y, onClose: () => setMenu(null), spec: {
+                    footerHints: true,
+                    items: actions.map((a) => ({
+                        title: label(a) || a.command,
+                        icon: a.icon,
+                        onSelect: (h) => {
+                            run(a.command);
+                            h.closeMenu();
+                        },
+                    })),
+                } })) : null] }));
+}
+const headerStyle = {
+    flex: '0 0 auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 'var(--oo-spacing-xs) var(--oo-spacing-sm)',
+    background: 'var(--oo-color-surface)',
+    borderBottom: '1px solid var(--oo-color-border)',
+    fontSize: 'var(--oo-font-size-xs)',
+    textTransform: 'uppercase',
+    letterSpacing: '0.06em',
+    color: 'var(--oo-color-muted)',
+    userSelect: 'none',
+    minWidth: 0,
+    minHeight: 32,
+};
+const iconBtn = {
+    background: 'transparent',
+    border: 'none',
+    color: 'var(--oo-color-muted)',
+    cursor: 'pointer',
+    font: 'inherit',
+    fontSize: 'var(--oo-font-size-sm)',
+    lineHeight: 1,
+    padding: '2px 5px',
+    borderRadius: 4,
+};

package/dist/ui/layout/SingleLayout.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutProps } from '../../types/layout.js';
+export declare function SingleLayout({ mounts, state, renderMount }: LayoutProps): import("react").JSX.Element;