@softov/scena 0.1.2 → 0.1.3

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

@@ -1,3 +1,3 @@
-import { BindingPath } from '../../types/component-graph.js';
-import { Label } from '../../types/label.js';
+import { BindingPath } from '../../sdk/component-graph.js';
+import { Label } from '../../sdk/label.js';
 export declare function useStoreLabel(value: Label | undefined, fallback?: string, dataContext?: BindingPath): string;

package/dist/react/hooks/useStoreLabel.js

@@ -1,4 +1,4 @@
-import { translate } from '../../i18n/registry.js';
+import { translate } from '../../core/i18n/registry.js';
 import { useStore } from './useStore.js';
 const EMPTY_LABEL_PATH = '$/__label__/empty';
 export function useStoreLabel(value, fallback = '', dataContext) {

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

@@ -1,4 +1,4 @@
-import type { SurfaceName } from '../../types/mount-surface.js';
-import type { SurfacePresentation } from '../../types/layout.js';
-import { type PresentationPolicy } from '../../core/surface-presentation.js';
+import type { SurfaceName } from '../../sdk/mount-surface.js';
+import type { SurfacePresentation } from '../../sdk/layout.js';
+import { type PresentationPolicy } from '../../core/graph/surface-presentation.js';
 export declare function useSurfacePresentation(surface: SurfaceName, policy?: PresentationPolicy): SurfacePresentation;

package/dist/react/hooks/useSurfacePresentation.js

@@ -1,4 +1,4 @@
-import { resolveSurfacePresentation, } from '../../core/surface-presentation.js';
+import { resolveSurfacePresentation, } from '../../core/graph/surface-presentation.js';
 import { useStore } from './useStore.js';
 // Reads `$/modus/class` and maps it to how this surface should occupy space.
 //

package/dist/react/mount-context.d.ts

@@ -1,4 +1,4 @@
-import type { BindingPath } from '../types/component-graph.js';
+import type { BindingPath } from '../sdk/component-graph.js';
 export declare const MountContext: import("react").Context<string | null>;
 export declare function useCurrentMountKey(): string | null;
 export declare const DataContextContext: import("react").Context<BindingPath | undefined>;

package/dist/react/useSurfaceResize.d.ts

@@ -1,6 +1,6 @@
 import { type PointerEvent as ReactPointerEvent } from 'react';
-import type { SurfaceName } from '../types/mount-surface.js';
-import type { SurfacePresentation } from '../types/layout.js';
+import type { SurfaceName } from '../sdk/mount-surface.js';
+import type { SurfacePresentation } from '../sdk/layout.js';
 /**
  * Resizing a surface by its own edge, with no handle in the layout.
  *

package/dist/runtime/client-handlers.d.ts

@@ -1,3 +1,3 @@
-import type { Disposable } from '../types/disposable.js';
+import type { Disposable } from '../sdk/disposable.js';
 export declare function registerClientHandler(name: string, handler: (args: Record<string, unknown>) => unknown | Promise<unknown>): Disposable;
 export declare function getClientHandler(name: string): ((args: Record<string, unknown>) => unknown | Promise<unknown>) | undefined;

package/dist/runtime/in-memory-socket.d.ts

@@ -1,5 +1,5 @@
-import type { Disposable } from '../types/disposable.js';
-import type { SocketBridge } from '../types/reactive-store.js';
+import type { Disposable } from '../sdk/disposable.js';
+import type { SocketBridge } from '../sdk/reactive-store.js';
 export interface InMemorySocket extends SocketBridge {
     dispatch(event: string, payload?: unknown): void;
     onOutgoing(event: string, fn: (payload: unknown) => void): Disposable;

package/dist/runtime/index.d.ts

@@ -1,10 +1,10 @@
-export { validateArgs, isPermissionPath } from './args-schema.js';
-export type { ValidateArgsResult } from './args-schema.js';
+export { validateArgs, isPermissionPath } from '../sdk/args-schema.js';
+export type { ValidateArgsResult } from '../sdk/args-schema.js';
 export { createSurfaceBridge } from './surface-bridge.js';
 export { registerClientHandler, getClientHandler, } from './client-handlers.js';
 export { createInMemorySocket } from './in-memory-socket.js';
 export type { InMemorySocket } from './in-memory-socket.js';
-export { registerBuiltinFunctions } from './builtins.js';
+export { registerBuiltinFunctions } from '../core/builtins.js';
 export { registerLayoutCommands } from './layout-commands.js';
 export { registerOpenerCommands } from './opener-commands.js';
 export type { RegisterOpenerCommandsOptions } from './opener-commands.js';

package/dist/runtime/index.js

@@ -1,7 +1,7 @@
-export { validateArgs, isPermissionPath } from './args-schema.js';
+export { validateArgs, isPermissionPath } from '../sdk/args-schema.js';
 export { createSurfaceBridge } from './surface-bridge.js';
 export { registerClientHandler, getClientHandler, } from './client-handlers.js';
 export { createInMemorySocket } from './in-memory-socket.js';
-export { registerBuiltinFunctions } from './builtins.js';
+export { registerBuiltinFunctions } from '../core/builtins.js';
 export { registerLayoutCommands } from './layout-commands.js';
 export { registerOpenerCommands } from './opener-commands.js';

package/dist/runtime/layout-commands.d.ts

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

package/dist/runtime/layout-commands.js

@@ -1,5 +1,5 @@
-import { combineDisposables } from '../core/disposable.js';
-import { translate } from '../i18n/registry.js';
+import { combineDisposables } from '../sdk/disposable.js';
+import { translate } from '../core/i18n/registry.js';
 function joinAbs(root, rel) {
     if (rel.startsWith('$/'))
         return rel;

package/dist/runtime/opener-commands.d.ts

@@ -1,8 +1,8 @@
-import type { Scena } from '../types/scena.js';
-import type { Disposable } from '../types/disposable.js';
-import type { CommandContext } from '../types/command.js';
-import type { ComponentDefinition } from '../types/component-registry.js';
-import type { SurfaceName } from '../types/mount-surface.js';
+import type { Scena } from '../sdk/scena.js';
+import type { Disposable } from '../sdk/disposable.js';
+import type { CommandContext } from '../sdk/command.js';
+import type { ComponentDefinition } from '../sdk/component-registry.js';
+import type { SurfaceName } from '../sdk/mount-surface.js';
 export interface RegisterOpenerCommandsOptions {
     resourceKind: string;
     slots?: string[];

package/dist/runtime/opener-commands.js

@@ -1,6 +1,6 @@
-import { disposableFrom } from '../core/disposable.js';
-import { resolveLabel } from '../core/label.js';
-import { translate } from '../i18n/registry.js';
+import { disposableFrom } from '../sdk/disposable.js';
+import { resolveLabel } from '../sdk/label.js';
+import { translate } from '../core/i18n/registry.js';
 export function registerOpenerCommands(scena, opts) {
     const slots = opts.slots ?? ['file:context'];
     const category = opts.category ?? 'Open with';

package/dist/runtime/surface-bridge.d.ts

@@ -1,8 +1,8 @@
-import type { Disposable } from '../types/disposable.js';
-import type { EventBus } from '../types/events.js';
-import type { ReactiveStore, SocketBridge } from '../types/reactive-store.js';
-import type { MountSurfaceRegistry, SurfaceName } from '../types/mount-surface.js';
-import type { ConverterRegistry } from '../types/converter-registry.js';
+import type { Disposable } from '../sdk/disposable.js';
+import type { EventBus } from '../sdk/events.js';
+import type { ReactiveStore, SocketBridge } from '../sdk/reactive-store.js';
+import type { MountSurfaceRegistry, SurfaceName } from '../sdk/mount-surface.js';
+import type { ConverterRegistry } from '../sdk/converter-registry.js';
 interface Deps {
     store: ReactiveStore;
     surfaces: MountSurfaceRegistry;

package/dist/runtime/surface-bridge.js

@@ -1,4 +1,4 @@
-import { combineDisposables } from '../core/disposable.js';
+import { combineDisposables } from '../sdk/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

package/dist/{runtime → sdk}/args-schema.d.ts

@@ -1,4 +1,4 @@
-import type { ArgsSchema, ArgType } from '../types/command.js';
+import type { ArgsSchema, ArgType } from './command.js';
 export type ValidateArgsResult = {
     ok: true;
     value: Record<string, unknown>;

package/dist/{core → sdk}/disposable.d.ts

@@ -1,3 +1,5 @@
-import type { Disposable } from '../types/disposable.js';
+export interface Disposable {
+    dispose(): void;
+}
 export declare function combineDisposables(...disposables: (Disposable | undefined)[]): Disposable;
 export declare function disposableFrom(fn: () => void): Disposable;

package/dist/{types → sdk}/index.d.ts

@@ -13,6 +13,7 @@ export * from './converter-registry.js';
 export * from './permissions.js';
 export * from './events.js';
 export * from './command.js';
+export * from './args-schema.js';
 export * from './colors.js';
 export * from './host.js';
 export * from './keybinding.js';

package/dist/{types → sdk}/index.js

@@ -13,6 +13,7 @@ export * from './converter-registry.js';
 export * from './permissions.js';
 export * from './events.js';
 export * from './command.js';
+export * from './args-schema.js';
 export * from './colors.js';
 export * from './host.js';
 export * from './keybinding.js';

package/dist/{types → sdk}/label.d.ts

@@ -7,3 +7,4 @@ export interface LabelResolveContext {
     get: (path: string) => unknown;
     translate: (key: string) => string;
 }
+export declare function resolveLabel(label: Label | undefined, ctx: LabelResolveContext): string;

package/dist/{core → sdk}/label.js

@@ -1,4 +1,3 @@
-// the useLabel hook (reactive).
 export function resolveLabel(label, ctx) {
     if (label == null)
         return '';

package/dist/{types → sdk}/layout.d.ts

@@ -29,6 +29,31 @@ export interface TabPanelSplit {
     second: TabPanelNode;
 }
 export type SurfacePresentation = 'docked' | 'floating' | 'sheet' | 'bar';
+/**
+ * Which edge of itself a surface closes on — the one facing `main`.
+ *
+ * Stamped by the shell, because only the shell knows its own arrangement: the
+ * same surface is `inline-end` in one app and `inline-start` in another, and a
+ * surface scena has never heard of has no name to look up.
+ *
+ * Logical rather than physical, so chrome flips under `dir="rtl"` without the
+ * shell restating it.
+ *
+ * This exists so scena's own CSS can stop matching surface NAMES. Rules keyed
+ * on `.oo-surface--sidebar-left` work only for the nine and silently skip
+ * whatever an app defined; rules keyed on `[data-surface-edge]` work for
+ * anything the shell places.
+ */
+export type SurfaceEdge = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+/**
+ * What kind of region a surface is, for styling that is about the kind rather
+ * than the identity — a bar's buttons are small and quiet whether that bar is
+ * the title bar, the status bar, or an app's own `alert:top`.
+ *
+ * Also stamped by the shell. scena's CSS matches this; an APP's CSS is free to
+ * match `data-surface` by name, because an app does know its own surfaces.
+ */
+export type SurfaceRole = 'bar' | 'rail' | 'panel' | 'main' | 'overlay';
 export interface SurfaceLayoutState {
     visible: boolean;
     size?: number;

package/dist/{types → sdk}/mount-surface.d.ts

@@ -3,7 +3,24 @@ import type { ComponentNode, DataBinding } from './component-graph.js';
 import type { WhenClause } from './when.js';
 import type { ResourceColor } from './colors.js';
 import type { Label } from './label.js';
-export type SurfaceName = 'titlebar' | 'activitybar' | 'sidebar:left' | 'sidebar:right' | 'main' | 'panel:bottom' | 'statusbar' | 'overlay' | 'detached';
+/**
+ * Where something mounts.
+ *
+ * The nine below are the ones scena's own DefaultShell renders and the ones
+ * `layout` seeds defaults for — they are a convention, not the set. An app
+ * mounts to whatever names its shell draws: a second status bar, an
+ * `alert:top` band, four sidebars, or no sidebar at all.
+ *
+ * The runtime never had an opinion here — mounts, layout state and store paths
+ * are all keyed by the string — but this type used to say otherwise, which made
+ * the contract narrower than the thing it described. The `(string & {})` arm
+ * keeps editor completion for the nine while admitting any other name.
+ *
+ * Consequence for anything that sweeps surfaces: ask
+ * `surfaces.listSurfaces()`. A list of names written here cannot know what an
+ * app defined.
+ */
+export type SurfaceName = 'titlebar' | 'activitybar' | 'sidebar:left' | 'sidebar:right' | 'main' | 'panel:bottom' | 'statusbar' | 'overlay' | 'detached' | (string & {});
 export type MountTarget = ComponentNode | DataBinding;
 export type EditTier = 'basic' | 'content' | 'binding' | 'structure' | 'schema';
 export interface MountPolicy {
@@ -67,6 +84,7 @@ export interface MountSurfaceRegistry {
     }): void;
     focus(key: string): void;
     listAt(surface: SurfaceName): ResolvedMount[];
+    listSurfaces(): SurfaceName[];
     move(opts: {
         key: string;
         toSurface: SurfaceName;

package/dist/{types → sdk}/scena.d.ts

@@ -10,7 +10,7 @@ import type { PermissionEngine } from './permissions.js';
 import type { CommandRegistry } from './command.js';
 import type { KeybindingRegistry } from './keybinding.js';
 import type { ShellRegistry } from './shell.js';
-import type { LayoutAPI, LayoutRegistry, LayoutStorage, ScenaLayout } from './layout.js';
+import type { SurfaceLayoutState, LayoutAPI, LayoutRegistry, LayoutStorage, ScenaLayout } from './layout.js';
 import type { SessionAPI, SessionStorage } from './session.js';
 import type { ManifestAPI } from './manifest.js';
 import type { EventBus } from './events.js';
@@ -45,6 +45,7 @@ export interface CreateScenaOptions {
     layoutStorage?: LayoutStorage;
     events?: EventBus;
     defaultSurface?: SurfaceName;
+    surfaceDefaults?: Partial<Record<SurfaceName, SurfaceLayoutState>>;
     initialLayout?: ScenaLayout;
     initialShellId?: string;
     backendFactories?: ScopeBackendFactory[];

package/dist/styles/bar.css

@@ -1,7 +1,11 @@
-/* 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. */
+/* Bar layout: three slots (left | center | right), used by any surface a shell
+ * gives `role="bar"` -- the title bar and the status bar, and an app's own
+ * alert band just as well.
+ *
+ * Per-surface chrome (height, background) is the shell's or the app's, keyed on
+ * `[data-surface-role='bar']` for the kind or `[data-surface]` for one specific
+ * bar. The separator is handled by `[data-surface-edge]` in surface.css, which
+ * is why nothing here draws one. */
 .oo-layout--bar {
   display: flex;
   align-items: center;

package/dist/styles/base.css

@@ -1,5 +1,7 @@
 :root {
-
+  --oo-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
+  --oo-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  
   --input-padding-y: var(--oo-spacing-xs);
   --input-padding-x: var(--oo-spacing-sm);
   --input-background: var(--oo-color-canvas);
@@ -19,11 +21,11 @@
   --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-color: inherit;
+  --button-color-hover: var(--oo-color-hover);
   --button-border: var(--oo-color-border);
   --button-border-width: 1px;
-  --button-radius: 0;
+  --button-border-radius: 0;
   --button-padding-y: var(--oo-spacing-xs);
   --button-padding-x: var(--oo-spacing-xs);
   --button-font-size: var(--oo-font-size-sm);
@@ -77,12 +79,12 @@ button {
   /* 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-radius: var(--button-border-radius);
   border-width: var(--button-border-width);
   border-style: solid;
   border-color: var(--button-border);
   background: var(--button-background);
-  color: var(--button-text);
+  color: var(--button-color);
 
   cursor: pointer;
   font: inherit;
@@ -99,35 +101,35 @@ button {
 
 button[data-variant="primary"] {
   --button-background: none;
-  --button-text: var(--oo-color-primary);
+  --button-color: var(--oo-color-primary);
   --button-border: var(--oo-color-primary);
-  --button-text-hover: var(--oo-color-surface);
+  --button-color-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-color: var(--oo-color-text);
   --button-border: var(--oo-color-border);
-  --button-text-hover: var(--oo-color-surface);
+  --button-color-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-color: var(--oo-color-danger);
   --button-border: var(--oo-color-danger);
-  --button-text-hover: var(--oo-color-surface);
+  --button-color-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-color: var(--oo-color-text);
+  --button-color-hover: var(--oo-color-primary);
   --button-background-hover: none;
   --button-background-active: none;
   border: none;
@@ -136,7 +138,7 @@ button[data-variant="ghost"] {
 
 button[data-variant="borderless"] {
   --button-background: var(--oo-color-hover);
-  --button-text: var(--oo-color-text);
+  --button-color: var(--oo-color-text);
   --button-border-width: 0;
   --button-background-hover: var(--oo-color-surface);
   --button-background-active: var(--oo-color-active);
@@ -161,7 +163,7 @@ button[data-disabled="true"] {
 
 button:hover {
   background: var(--button-background-hover);
-  color: var(--button-text-hover);
+  color: var(--button-color-hover);
 }
 
 code,

package/dist/styles/controller.d.ts

@@ -0,0 +1,27 @@
+import type { BindingPath } from '../sdk/component-graph.js';
+import type { Disposable } from '../sdk/disposable.js';
+import type { Scena } from '../sdk/scena.js';
+import { type ThemeMode } from './index.js';
+export declare const THEME_ID_PATH: BindingPath;
+export declare const THEME_MODE_PATH: BindingPath;
+export type ThemeModeChoice = ThemeMode | 'system';
+export interface ThemeControllerOptions {
+    idKey?: string;
+    modeKey?: string;
+    defaultThemeId?: string;
+    defaultMode?: ThemeModeChoice;
+    root?: HTMLElement;
+    persist?: boolean;
+}
+export declare function resolveThemeMode(choice: ThemeModeChoice): ThemeMode;
+/**
+ * Wires the two theme paths to the document, and keeps them there.
+ *
+ * Seeds the store from storage (falling back to whatever the entry already put
+ * on `<html>`, so there is no flash), applies on every change to either axis,
+ * and follows the OS while the mode is `system`.
+ *
+ * Call once, at boot. `ThemePicker` and `ThemeModeToggle` are views over the
+ * paths this owns and do no DOM or storage work of their own.
+ */
+export declare function registerThemeController(scena: Scena, options?: ThemeControllerOptions): Disposable;

package/dist/styles/controller.js

@@ -0,0 +1,74 @@
+import { combineDisposables } from '../sdk/disposable.js';
+import { applyTheme } from './index.js';
+// The theme, as store state.
+//
+// A theme has two independent axes — the family (`default`, `solarized`, …)
+// and the mode (light / dark / follow the OS) — and an app typically has more
+// than one control over them: a picker in the title bar, a toggle beside it, a
+// select in settings. Keeping both axes in the store is what lets those stay in
+// agreement without talking to each other, and it is why `applyTheme` and the
+// `localStorage` write happen in exactly one subscriber rather than in whoever
+// was clicked.
+//
+// scena imports nothing here at runtime: `Scena` is a type, so `styles/`
+// remains a leaf. That matters because an app entry imports this module before
+// React renders, to avoid a flash of the wrong theme.
+export const THEME_ID_PATH = '$/ui/theme/id';
+export const THEME_MODE_PATH = '$/ui/theme/mode';
+function isThemeChoice(v) {
+    return v === 'light' || v === 'dark' || v === 'system';
+}
+// Resolves `system` against the OS preference. Exported because a shell that
+// needs the *effective* mode (to pick an asset, say) should not re-derive it.
+export function resolveThemeMode(choice) {
+    if (choice !== 'system')
+        return choice;
+    if (typeof window === 'undefined' || !window.matchMedia)
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+/**
+ * Wires the two theme paths to the document, and keeps them there.
+ *
+ * Seeds the store from storage (falling back to whatever the entry already put
+ * on `<html>`, so there is no flash), applies on every change to either axis,
+ * and follows the OS while the mode is `system`.
+ *
+ * Call once, at boot. `ThemePicker` and `ThemeModeToggle` are views over the
+ * paths this owns and do no DOM or storage work of their own.
+ */
+export function registerThemeController(scena, options = {}) {
+    const { idKey = 'scena.theme-id', modeKey = 'scena.theme-mode', defaultThemeId = 'default', defaultMode = 'system', persist = true, } = options;
+    const root = options.root ?? document.documentElement;
+    const storage = persist && typeof localStorage !== 'undefined' ? localStorage : null;
+    const savedId = storage?.getItem(idKey) ?? null;
+    const savedMode = storage?.getItem(modeKey) ?? null;
+    scena.store.patchMany({
+        [THEME_ID_PATH]: savedId ?? root.getAttribute('data-theme') ?? defaultThemeId,
+        [THEME_MODE_PATH]: isThemeChoice(savedMode) ? savedMode : defaultMode,
+    });
+    function apply() {
+        const id = scena.store.get(THEME_ID_PATH) ?? defaultThemeId;
+        const choice = scena.store.get(THEME_MODE_PATH) ?? defaultMode;
+        applyTheme(root, id, resolveThemeMode(choice));
+        storage?.setItem(idKey, id);
+        storage?.setItem(modeKey, choice);
+    }
+    apply();
+    const subs = [
+        scena.store.subscribe(THEME_ID_PATH, apply),
+        scena.store.subscribe(THEME_MODE_PATH, apply),
+    ];
+    // Only re-applies while the choice is `system`; a pinned light/dark ignores
+    // the OS entirely, which is the point of pinning it.
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const onSystemChange = () => {
+            if (scena.store.get(THEME_MODE_PATH) === 'system')
+                apply();
+        };
+        mq.addEventListener('change', onSystemChange);
+        subs.push({ dispose: () => mq.removeEventListener('change', onSystemChange) });
+    }
+    return combineDisposables(...subs);
+}

package/dist/styles/form.css

@@ -0,0 +1,10 @@
+.oo-settings {
+  --space-gap: var(--oo-spacing-md);
+}
+
+.oo-settings__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap);
+  /* padding: var(--space-gap); */
+}

package/dist/styles/index.d.ts

@@ -27,3 +27,5 @@ export interface AppearanceProps {
 export declare function appearance(base: string, opts?: AppearanceProps): string;
 export declare function resolveVariableSize(name: string): string;
 export declare function resolveVariableFontSize(name: string): string;
+export { THEME_ID_PATH, THEME_MODE_PATH, resolveThemeMode, registerThemeController, } from './controller.js';
+export type { ThemeModeChoice, ThemeControllerOptions } from './controller.js';

package/dist/styles/index.js

@@ -107,3 +107,6 @@ export function resolveVariableFontSize(name) {
         return `--oo-font-size-${name}`;
     return `--${name}`;
 }
+// ── Theme as store state ─────────────────────────────────────────────────
+// Re-exported here so an app has one import for everything theme-related.
+export { THEME_ID_PATH, THEME_MODE_PATH, resolveThemeMode, registerThemeController, } from './controller.js';

package/dist/styles/surface.css

@@ -14,11 +14,62 @@
 
 .oo-surface {
   --oo-surface-float-width: 17rem;
-  --oo-surface-sheet-height: 55%;
+  --oo-surface-sheet-height: 85%;
   --oo-surface-bar-size: 2.75rem;
   --oo-surface-overlay-shadow: 0 0 28px rgb(0 0 0 / 0.32);
 }
 
+/*
+ * Separators between surfaces.
+ *
+ * OFF by default: a shell that separates its regions by background alone is a
+ * legitimate design -- `paper` is exactly that -- and turning hairlines on for
+ * everyone would change every existing app's chrome. A theme opts in on the
+ * root:
+ *
+ *   --oo-surface-border-width: 1px;
+ *
+ * Keyed on the EDGE the shell stamped, not on the surface's name. A rule
+ * per name works for the nine scena ships and silently skips whatever an app
+ * defined; a shell that places `alert:top` and says `edge="block-end"` gets a
+ * separator for free.
+ *
+ * The defaults are `var()` fallbacks rather than declarations on `.oo-surface`,
+ * and that is load-bearing: a custom property set ON the element beats the same
+ * property inherited from `<html>`, so declaring `--oo-surface-border-width: 0`
+ * here would silently override every theme that tried to turn borders on.
+ */
+.oo-surface[data-surface-edge='inline-end'] {
+  border-inline-end:
+    var(--oo-surface-border-width, 0px) solid
+    var(--oo-surface-border, var(--oo-color-border));
+}
+
+.oo-surface[data-surface-edge='inline-start'] {
+  border-inline-start:
+    var(--oo-surface-border-width, 0px) solid
+    var(--oo-surface-border, var(--oo-color-border));
+}
+
+.oo-surface[data-surface-edge='block-end'] {
+  border-block-end:
+    var(--oo-surface-border-width, 0px) solid
+    var(--oo-surface-border, var(--oo-color-border));
+}
+
+.oo-surface[data-surface-edge='block-start'] {
+  border-block-start:
+    var(--oo-surface-border-width, 0px) solid
+    var(--oo-surface-border, var(--oo-color-border));
+}
+
+/* An overlaid surface is lifted out of the flow with its own shadow, so a
+ * border on the edge it no longer touches would draw a line into open space. */
+.oo-surface[data-presentation='floating'],
+.oo-surface[data-presentation='sheet'] {
+  border: 0;
+}
+
 /* ── floating: lifted over `main`, consumes no width ─────────────────── */
 .oo-surface[data-presentation='floating'] {
   position: absolute;
@@ -30,11 +81,26 @@
   background: var(--oo-color-surface, var(--oo-color-canvas));
 }
 
-.oo-surface--sidebar-left[data-presentation='floating'] {
+/* A floating surface anchors OPPOSITE the edge it closes on: one that closes
+ * on its inline-end lifts out of the start side of the viewport. */
+.oo-surface[data-surface-edge='inline-end'][data-presentation='floating'] {
+  inset-inline-start: 0;
+}
+
+.oo-surface[data-surface-edge='inline-start'][data-presentation='floating'] {
+  inset-inline-end: 0;
+}
+
+/* Fallback for shells that place these two without stamping an edge -- the
+ * stamping is newer than they are, and a floating sidebar with no anchor sits
+ * wherever its static position left it, which is a visible break rather than
+ * a missing nicety. Physical properties on purpose: these two names encode a
+ * physical side, so honouring them under `dir="rtl"` would be a lie. */
+.oo-surface--sidebar-left[data-presentation='floating']:not([data-surface-edge]) {
   left: 0;
 }
 
-.oo-surface--sidebar-right[data-presentation='floating'] {
+.oo-surface--sidebar-right[data-presentation='floating']:not([data-surface-edge]) {
   right: 0;
 }
 

package/dist/styles/themes/tokens.css

@@ -101,7 +101,7 @@
   --oo-rgb-danger: 204 0 0;
   --oo-rgb-success: 0 170 0;
   --oo-rgb-warning: 204 136 0;
-  --oo-rgb-info: var(--oo-blue);
+  --oo-rgb-info: var(--oo-rgb-blue);
 
   /* ----------------------------------------
    * Resolved semantic colors