@vestra-player/sdk 1.6.18 → 1.6.19

package/dist/plugin/scope.d.ts

@@ -1,4 +1,5 @@
-import type { Change, Runtime } from "./runtime.ts";
+import type { Change } from "./passes.ts";
+import type { Runtime } from "./runtime.ts";
 import type { Disposable, DisposeInfo, Plugin, PluginError, Scope, StopReason } from "./types.ts";
 export declare class ScopeImpl implements Plugin {
     #private;

package/dist/plugin/scope.js

@@ -1,8 +1,11 @@
 /** Scopes own handles. Disposal runs newest first and never throws. */
-import { failure, toError } from "./runtime.js";
+import { failure, toError } from "./errors.js";
 import { commands } from "./commands.js";
 import { WHEN } from "./when.js";
-import { dialogs, panels, ui, windows } from "./ui.js";
+import { dialogs } from "./services/dialogs.js";
+import { ui } from "./view/image.js";
+import { panels } from "./view/panel.js";
+import { windows } from "./view/window.js";
 import { timeline } from "./timeline.js";
 import { drops } from "./drops.js";
 import { appearance } from "./appearance.js";

package/dist/plugin/services/dialogs.d.ts

@@ -0,0 +1,3 @@
+import type { ScopeImpl } from "../scope.ts";
+import type { Dialogs } from "../types.ts";
+export declare const dialogs: (scope: ScopeImpl) => Dialogs;

package/dist/plugin/services/dialogs.js

@@ -0,0 +1,62 @@
+/**
+ * System dialogs (`plugin.dialogs`): the player shows them; this side
+ * checks the texts and fills their templates (L1, a service;
+ * doc/specs/sdk-refactor.md §2.2 in the player repository).
+ */
+import { isTextValue } from "../../i18n.js";
+import { failure } from "../errors.js";
+import { shownText, templateArgs } from "../osd.js";
+export const dialogs = (scope) => {
+    const open = async (kind, options = {}) => {
+        const result = await scope.runtime.host.dialogs.open({
+            kind,
+            ...(options.title === undefined
+                ? {}
+                : { title: shownText(options.title, undefined, "title") }),
+            ...(options.fileName === undefined
+                ? {}
+                : { fileName: shownText(options.fileName, undefined, "fileName") }),
+        });
+        return result.cancelled ? [] : result.paths;
+    };
+    return {
+        async confirm(options) {
+            const { message, detail, confirm, cancel, destructive, checkbox, args } = options ?? {};
+            const values = templateArgs(args);
+            // A string's length is checked here; a text value's (shown) length by
+            // the player.
+            const length = (text, min, max) => isTextValue(text) ||
+                (typeof text === "string" &&
+                    [...text].length >= min &&
+                    [...text].length <= max);
+            if (!length(message, 1, 200) ||
+                !length(confirm, 1, 40) ||
+                (detail !== undefined && !length(detail, 0, 2000)) ||
+                (cancel !== undefined && !length(cancel, 1, 40)) ||
+                (checkbox !== undefined && !length(checkbox, 1, 40)) ||
+                (destructive !== undefined && typeof destructive !== "boolean"))
+                throw failure("invalid", "confirm needs message 1–200, confirm/cancel/checkbox 1–40, detail ≤ 2000 characters");
+            // `args` fills the string templates; a text value carries its own.
+            const shown = (text, what) => shownText(text, undefined, what);
+            const answer = await scope.runtime.host.dialogs.confirm({
+                message: shown(message, "message"),
+                confirm: shown(confirm, "confirm"),
+                ...(detail === undefined ? {} : { detail: shown(detail, "detail") }),
+                ...(cancel === undefined ? {} : { cancel: shown(cancel, "cancel") }),
+                ...(destructive === undefined ? {} : { destructive }),
+                ...(checkbox === undefined
+                    ? {}
+                    : { checkbox: shown(checkbox, "checkbox") }),
+                ...(values === undefined ? {} : { args: values }),
+            });
+            return {
+                confirmed: answer.confirmed === true,
+                checked: answer.checked === true,
+            };
+        },
+        openFile: async (options) => (await open("openFile", options))[0] ?? null,
+        openFiles: (options) => open("openFiles", options),
+        openDirectory: async (options) => (await open("openDirectory", options))[0] ?? null,
+        saveFile: async (options) => (await open("saveFile", options))[0] ?? null,
+    };
+};

package/dist/plugin/services.js

@@ -7,7 +7,7 @@
 import { existsSync, readFileSync, renameSync } from "node:fs";
 import { mkdir, open, rename, rm, stat } from "node:fs/promises";
 import { join, resolve } from "node:path";
-import { failure } from "./runtime.js";
+import { failure } from "./errors.js";
 import { systemServices } from "./local.js";
 import { playerOf, validStep } from "./player.js";
 const MAX_OUTPUT = 16 * 1024 * 1024;

package/dist/plugin/settings.js

@@ -1,6 +1,6 @@
 /** Pages of the player's options window (`plugin.settings`, `ui.settings`). */
-import { failure, quiet } from "./runtime.js";
-import { exported, ViewBase } from "./ui.js";
+import { failure, quiet } from "./errors.js";
+import { exported, ViewBase } from "./view/base.js";
 const CATEGORIES = [
     "general",
     "playback",

package/dist/plugin/shaders.js

@@ -7,7 +7,8 @@
  * media), or a failure.
  */
 import { isAbsolute } from "node:path";
-import { failure, Latest, quiet } from "./runtime.js";
+import { Latest } from "./latest.js";
+import { failure, quiet } from "./errors.js";
 import { playerOf } from "./player.js";
 import { hasControl, VIDEO_PROCESSING_LIMITS } from "../processing.js";
 /** The handle id when `shaders()` is called without one. */

package/dist/plugin/stream.js

@@ -3,8 +3,7 @@
  * activation, pause/epoch acknowledgements, input acknowledgements and pacing;
  * the plugin only renders frames.
  */
-import { failure, sleep, toError } from "./runtime.js";
-import { abortError } from "./player.js";
+import { abortError, failure, sleep, toError } from "./errors.js";
 /**
  * Frames of audio buffered ahead of the device before rendering pauses
  * (50 ms). Each pump refills the whole lead, so it must outlast one pump

package/dist/plugin/subtitles.js

@@ -1,8 +1,8 @@
 /** Subtitle selection, external SRT resources and this plugin's style layer. */
 import { createHash } from "node:crypto";
 import { isTextValue, textProblem } from "../i18n.js";
-import { Latest, failure, sleep, uncertain } from "./runtime.js";
-import { abortError } from "./player.js";
+import { Latest } from "./latest.js";
+import { abortError, failure, sleep, uncertain } from "./errors.js";
 /**
  * The player's limits on subtitle files a plugin loads with
  * {@link Subtitles.load}, which `TestHost` enforces with the player's codes.

package/dist/plugin/testing/transport.js

@@ -8,7 +8,7 @@
  */
 import { rmSync } from "node:fs";
 import { HostError } from "../../wire.js";
-import { WAKE_EVENTS } from "../runtime.js";
+import { WAKE_EVENTS } from "../connection.js";
 export const tick = () => new Promise((resolve) => setImmediate(resolve));
 /**
  * Refusals for a position or resolver another plugin holds: not activation

package/dist/plugin/timeline.js

@@ -1,5 +1,6 @@
 /** Seek-bar marks (`plugin.timeline`): one layer per plugin, merged by the player. */
-import { failure, Latest, quiet } from "./runtime.js";
+import { Latest } from "./latest.js";
+import { failure, quiet } from "./errors.js";
 /**
  * The player's limits on one plugin's timeline layer
  * ({@link TimelineLayer}). A list over them fails with code `invalid`,

package/dist/plugin/view/base.d.ts

@@ -0,0 +1,29 @@
+import type { Json, PropertyWrite } from "../../wire.ts";
+import type { ScopeImpl } from "../scope.ts";
+import type { Disposable, PropValue, Props, View } from "../types.ts";
+/** Property and callback plumbing shared by windows, panels and settings pages. */
+export declare abstract class ViewBase implements View {
+    #private;
+    protected readonly scope: ScopeImpl;
+    protected readonly handlers: Map<string, (...args: Json[]) => unknown>;
+    protected closed: boolean;
+    constructor(scope: ScopeImpl);
+    protected abstract live(): boolean;
+    protected abstract write(property: string, write: PropertyWrite): Promise<void>;
+    /** {@link ViewWriter.wired}: initial properties in wire form. */
+    protected wired(values: Record<string, PropValue>, refuse?: boolean): Record<string, Json>;
+    on<A extends Json[]>(callback: string, handler: (...args: A) => unknown): Disposable;
+    set(props: Props): void;
+    bind(props: () => Props): Disposable;
+    /** {@link ViewBinder.snapshot}: current desired properties. */
+    protected snapshot(): Record<string, PropValue>;
+    protected evaluate(): void;
+    /** The host already shows these values (e.g. sent as initial properties). */
+    protected shown(values: Record<string, Json>): void;
+    /** {@link ViewWriter.flush}: send what changed. */
+    protected flush(): void;
+    protected dispatch(callback: string, args: Json[]): void;
+    protected release(): Promise<void>;
+}
+/** Find `export component X` / `export global Y` so most mounts need no names. */
+export declare function exported(directory: string, file: string, kind: string): string;

package/dist/plugin/view/base.js

@@ -0,0 +1,88 @@
+/**
+ * `ViewBase`: what windows, panels and settings pages share — callbacks, and
+ * a {@link ViewWriter} (L1) with a {@link ViewBinder} (L2) over it. Every
+ * view joins the update passes when made (doc/specs/sdk-refactor.md §1.2 in
+ * the player repository; Step 2 moves that to the first `bind()`).
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { PATCH_FEATURE } from "../patch.js";
+import { ViewBinder } from "./binder.js";
+import { kebab, ViewWriter } from "./writer.js";
+/** Property and callback plumbing shared by windows, panels and settings pages. */
+export class ViewBase {
+    scope;
+    handlers = new Map();
+    #writer;
+    #binder;
+    #binding;
+    closed = false;
+    constructor(scope) {
+        this.scope = scope;
+        this.#writer = new ViewWriter({
+            live: () => this.live(),
+            write: (property, write) => this.write(property, write),
+            report: (error) => this.scope.report(error),
+            patches: () => this.scope.runtime.features.has(PATCH_FEATURE),
+        });
+        this.#binder = new ViewBinder(scope, this.#writer, () => this.closed);
+        this.#binding = scope.runtime.bind(() => this.evaluate());
+    }
+    /** {@link ViewWriter.wired}: initial properties in wire form. */
+    wired(values, refuse = false) {
+        return this.#writer.wired(values, refuse);
+    }
+    on(callback, handler) {
+        const name = kebab(callback);
+        this.handlers.set(name, handler);
+        return this.scope.onDispose(() => {
+            if (this.handlers.get(name) === handler)
+                this.handlers.delete(name);
+        });
+    }
+    set(props) {
+        this.#writer.set(props);
+    }
+    bind(props) {
+        return this.#binder.bind(props);
+    }
+    /** {@link ViewBinder.snapshot}: current desired properties. */
+    snapshot() {
+        return this.#binder.snapshot();
+    }
+    evaluate() {
+        this.#binder.evaluate();
+    }
+    /** The host already shows these values (e.g. sent as initial properties). */
+    shown(values) {
+        this.#writer.shown(values);
+    }
+    /** {@link ViewWriter.flush}: send what changed. */
+    flush() {
+        this.#writer.flush();
+    }
+    dispatch(callback, args) {
+        if (this.closed)
+            return;
+        const handler = this.handlers.get(callback);
+        if (handler)
+            this.scope.run(handler, ...args);
+        else
+            this.scope.update();
+    }
+    async release() {
+        this.closed = true;
+        this.#writer.stop();
+        await this.#binding.dispose();
+    }
+}
+/** Find `export component X` / `export global Y` so most mounts need no names. */
+export function exported(directory, file, kind) {
+    const text = readFileSync(resolve(directory, file), "utf8");
+    const names = [
+        ...text.matchAll(new RegExp(`export\\s+${kind}\\s+([\\w-]+)`, "g")),
+    ].map((m) => m[1]);
+    if (names.length !== 1)
+        throw new Error(`${file}: name the ${kind} to mount (found ${names.length})`);
+    return names[0];
+}

package/dist/plugin/view/binder.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The view binder (L2, the framework; doc/specs/sdk-refactor.md §2.2 in the
+ * player repository): `View.bind` functions, run in the update passes with
+ * read tracking (`Runtime.part`), their values handed to the view's writer.
+ */
+import type { ScopeImpl } from "../scope.ts";
+import type { PropValue, Props } from "../types.ts";
+import type { ViewWriter } from "./writer.ts";
+/** One view's bindings, evaluated into its {@link ViewWriter}. */
+export declare class ViewBinder {
+    #private;
+    constructor(scope: ScopeImpl, writer: ViewWriter, closed: () => boolean);
+    bind(props: () => Props): import("../types.ts").Disposable;
+    /**
+     * Current desired properties (bound values win over earlier `set`). A
+     * precise pass (`Runtime.part`) skips a bind function that read none of
+     * the changed state: its last values stay.
+     */
+    snapshot(): Record<string, PropValue>;
+    /** One update pass: the bindings' values, then whatever changed is sent. */
+    evaluate(): void;
+}

package/dist/plugin/view/binder.js

@@ -0,0 +1,57 @@
+import { encode } from "./writer.js";
+/** One view's bindings, evaluated into its {@link ViewWriter}. */
+export class ViewBinder {
+    #scope;
+    #writer;
+    /** The view was released: nothing is evaluated any more. */
+    #closed;
+    /** Each binding, with where the plugin added it (for the player's log). */
+    #binders = new Map();
+    constructor(scope, writer, closed) {
+        this.#scope = scope;
+        this.#writer = writer;
+        this.#closed = closed;
+    }
+    bind(props) {
+        // `token` names this binding of this view in the runtime's read
+        // tracking: the same function bound to two views is two parts.
+        this.#binders.set(props, {
+            site: this.#scope.runtime.callSite(),
+            token: {},
+        });
+        this.#scope.update();
+        return this.#scope.onDispose(() => {
+            this.#binders.delete(props);
+        });
+    }
+    /**
+     * Current desired properties (bound values win over earlier `set`). A
+     * precise pass (`Runtime.part`) skips a bind function that read none of
+     * the changed state: its last values stay.
+     */
+    snapshot() {
+        const runtime = this.#scope.runtime;
+        for (const [binder, { site, token }] of this.#binders) {
+            try {
+                // Encoded inside the part: what encoding reads counts as the
+                // function's (a state object it returned).
+                const result = runtime.part(token, () => encode(runtime.reader("a view's bind", site, binder)));
+                if (!result)
+                    continue;
+                for (const [key, value] of Object.entries(result.value))
+                    this.#writer.assign(key, value);
+            }
+            catch (error) {
+                this.#scope.report(error);
+            }
+        }
+        return this.#writer.values();
+    }
+    /** One update pass: the bindings' values, then whatever changed is sent. */
+    evaluate() {
+        if (this.#closed())
+            return;
+        this.snapshot();
+        this.#writer.flush();
+    }
+}

package/dist/plugin/view/image.d.ts

@@ -0,0 +1,21 @@
+import type { Json } from "../../wire.ts";
+import type { ScopeImpl } from "../scope.ts";
+import type { ImageOptions, ImageRef, Ui } from "../types.ts";
+/**
+ * `plugin.ui.image`. The wire form (`{ $vestraImage: path, ref }`) is an
+ * internal detail; `ref` makes every call a new value, so a file rewritten
+ * under the same path is sent (and decoded) again. The player checks the
+ * path on every use, so a hand-made wire value gains nothing.
+ */
+export declare class ImageHandle implements ImageRef {
+    #private;
+    readonly path: string;
+    readonly __vestraImage: true;
+    constructor(scope: ScopeImpl, path: string, maxSide?: number);
+    /** Released with its scope: writing it is `invalid`. */
+    get released(): boolean;
+    toJSON(): Json;
+}
+/** `ImageOptions.maxSide`, checked: an integer 1–4096 or absent. */
+export declare function imageSide(options: ImageOptions | undefined): number | undefined;
+export declare const ui: (scope: ScopeImpl) => Ui;

package/dist/plugin/view/image.js

@@ -0,0 +1,60 @@
+/**
+ * `plugin.ui`: image and Markdown values for view properties (L1, a
+ * primitive; doc/specs/sdk-refactor.md §2.2 in the player repository).
+ * Commands take the same images as bar button icons.
+ */
+import { failure } from "../errors.js";
+import { markdown, remoteImageFile } from "../markdown.js";
+let images = 0;
+/**
+ * `plugin.ui.image`. The wire form (`{ $vestraImage: path, ref }`) is an
+ * internal detail; `ref` makes every call a new value, so a file rewritten
+ * under the same path is sent (and decoded) again. The player checks the
+ * path on every use, so a hand-made wire value gains nothing.
+ */
+export class ImageHandle {
+    path;
+    __vestraImage = true;
+    #scope;
+    #ref = ++images;
+    #maxSide;
+    constructor(scope, path, maxSide) {
+        this.#scope = scope;
+        this.path = path;
+        this.#maxSide = maxSide;
+    }
+    /** Released with its scope: writing it is `invalid`. */
+    get released() {
+        return this.#scope.disposed;
+    }
+    toJSON() {
+        // `maxSide` only when given: players before 0.5.1 refuse the field.
+        return this.#maxSide === undefined
+            ? { $vestraImage: this.path, ref: this.#ref }
+            : { $vestraImage: this.path, ref: this.#ref, maxSide: this.#maxSide };
+    }
+}
+/** `ImageOptions.maxSide`, checked: an integer 1–4096 or absent. */
+export function imageSide(options) {
+    const side = options?.maxSide;
+    if (side === undefined)
+        return undefined;
+    if (!Number.isInteger(side) || side < 1 || side > 4096)
+        throw failure("invalid", "maxSide must be an integer 1–4096");
+    return side;
+}
+export const ui = (scope) => ({
+    image(path, options) {
+        if (typeof path !== "string" || !path)
+            throw failure("invalid", "ui.image needs a file path");
+        return new ImageHandle(scope, path, imageSide(options));
+    },
+    async remoteImage(url, options) {
+        if (typeof url !== "string" || !url.startsWith("https://"))
+            throw failure("invalid", "ui.remoteImage needs an https: address");
+        const side = imageSide(options);
+        const file = await remoteImageFile(scope.runtime, url);
+        return new ImageHandle(scope, file, side);
+    },
+    markdown: (text, options) => markdown(scope, text, options),
+});

package/dist/plugin/view/layout.d.ts

@@ -0,0 +1,47 @@
+import type { Runtime } from "../runtime.ts";
+import type { ScopeImpl } from "../scope.ts";
+import type { BackdropSlot, PanelSlot, SidebarSlot, SlotPanel, SlotState } from "../types.ts";
+/** The positions `layout.state` reports and `layout.set` changes. */
+export type LayoutName = "bottom" | "sidebar" | "adjust";
+export type Layout = {
+    bottom: SlotState | null;
+    sidebar: SlotState | null;
+    /** Player 0.7.6; `null` from older players. */
+    adjust: SlotState | null;
+    /** `PanelSlot.panels` (null from players without tabs). */
+    tabs: {
+        bottom: readonly SlotPanel[] | null;
+        sidebar: readonly SlotPanel[] | null;
+        adjust: readonly SlotPanel[] | null;
+    };
+    backdrop: {
+        readonly effective: boolean;
+    } | null;
+};
+/**
+ * Both positions, one per plugin: read with `layout.state` after every
+ * `window.state` event (one read in flight; events during it cause one more)
+ * and after this plugin's own changes. Started on first use.
+ */
+export declare class LayoutService {
+    #private;
+    state: Layout;
+    constructor(runtime: Runtime);
+    /** Read again, but only once something in this plugin uses the state. */
+    refresh(): Promise<void>;
+    start(): void;
+    watch(listener: (layout: Layout) => void): {
+        dispose: () => Promise<void>;
+    };
+    read(): Promise<void>;
+    set(slot: LayoutName, change: {
+        visible?: boolean;
+        detached?: boolean;
+        active?: string;
+        reveal?: boolean;
+    }): Promise<void>;
+}
+export declare const layoutOf: (runtime: Runtime) => LayoutService;
+export declare function slot(scope: ScopeImpl, name: "bottom" | "adjust"): PanelSlot;
+export declare function slot(scope: ScopeImpl, name: "sidebar"): SidebarSlot;
+export declare function backdrop(scope: ScopeImpl): BackdropSlot;

package/dist/plugin/view/layout.js

@@ -0,0 +1,171 @@
+/**
+ * Both positions, one per plugin: read with `layout.state` after every
+ * `window.state` event (one read in flight; events during it cause one more)
+ * and after this plugin's own changes. Started on first use.
+ */
+export class LayoutService {
+    #runtime;
+    state = {
+        bottom: null,
+        sidebar: null,
+        adjust: null,
+        tabs: { bottom: null, sidebar: null, adjust: null },
+        backdrop: null,
+    };
+    #listeners = new Set();
+    #started = false;
+    #reading = false;
+    #again = false;
+    constructor(runtime) {
+        this.#runtime = runtime;
+    }
+    /** Read again, but only once something in this plugin uses the state. */
+    async refresh() {
+        if (this.#started)
+            await this.read();
+    }
+    start() {
+        if (this.#started || !this.#runtime.can("ui.mount"))
+            return;
+        this.#started = true;
+        // A mirror: panels listen through `watch`.
+        this.#runtime.on("window.state", () => void this.read(), "events", true);
+        void this.read();
+    }
+    watch(listener) {
+        this.start();
+        this.#listeners.add(listener);
+        const held = this.#runtime.hold("window.state");
+        return {
+            dispose: async () => {
+                this.#listeners.delete(listener);
+                await held.dispose();
+            },
+        };
+    }
+    async read() {
+        if (this.#reading) {
+            this.#again = true;
+            return;
+        }
+        this.#reading = true;
+        try {
+            do {
+                this.#again = false;
+                // "pending" until the host confirmed the layout: keep the last value.
+                const raw = await this.#runtime.host.layout.state().catch(() => null);
+                if (!raw)
+                    continue;
+                const view = (slot) => slot && {
+                    preferred: slot.preferred,
+                    effective: slot.effective,
+                    reason: slot.reason,
+                    detached: slot.detached,
+                };
+                const tabs = (slot) => slot?.panels
+                    ? Object.freeze(slot.panels.map((panel) => Object.freeze({
+                        plugin: panel.plugin,
+                        title: panel.title,
+                        active: panel.owner === slot.owner,
+                    })))
+                    : null;
+                const adjust = raw.adjust ?? null;
+                const next = {
+                    bottom: view(raw.bottom),
+                    sidebar: view(raw.sidebar),
+                    adjust: view(adjust),
+                    tabs: {
+                        bottom: tabs(raw.bottom),
+                        sidebar: tabs(raw.sidebar),
+                        adjust: tabs(adjust),
+                    },
+                    backdrop: raw.backdrop
+                        ? Object.freeze({ effective: raw.backdrop.effective === true })
+                        : null,
+                };
+                if (JSON.stringify(next) === JSON.stringify(this.state))
+                    continue;
+                this.state = next;
+                for (const listener of [...this.#listeners])
+                    listener(next);
+                this.#runtime.invalidate();
+            } while (this.#again);
+        }
+        finally {
+            this.#reading = false;
+        }
+    }
+    async set(slot, change) {
+        this.start();
+        await this.#runtime.host.layout.set({ slot, ...change });
+        await this.read();
+    }
+}
+export const layoutOf = (runtime) => runtime.service("layout", () => new LayoutService(runtime));
+export function slot(scope, name) {
+    const service = () => layoutOf(scope.runtime);
+    return {
+        get state() {
+            service().start();
+            return service().state[name];
+        },
+        get panels() {
+            service().start();
+            return service().state.tabs[name];
+        },
+        onChange(listener) {
+            const seen = (layout) => JSON.stringify([layout[name], layout.tabs[name]]);
+            let last = seen(service().state);
+            const watch = service().watch((layout) => {
+                const next = seen(layout);
+                if (next === last)
+                    return;
+                last = next;
+                scope.run(listener, layout[name]);
+            });
+            return scope.add({
+                dispose: async () => {
+                    scope.forget(watch);
+                    await watch.dispose();
+                },
+            });
+        },
+        setVisible: (visible) => service().set(name, { visible }),
+        async toggle() {
+            await service().read();
+            const current = service().state[name];
+            // A switch (see Panel.toggle): nothing pops out in fullscreen.
+            await service().set(name, {
+                visible: !(current?.preferred ?? true),
+                reveal: false,
+            });
+        },
+        setDetached: (detached) => service().set(name, { detached }),
+        activate: (plugin) => service().set(name, { active: plugin }),
+    };
+}
+export function backdrop(scope) {
+    const service = () => layoutOf(scope.runtime);
+    return {
+        get state() {
+            service().start();
+            return service().state.backdrop;
+        },
+        onChange(listener) {
+            let last = JSON.stringify(service().state.backdrop);
+            const watch = service().watch((layout) => {
+                const next = JSON.stringify(layout.backdrop);
+                if (next === last)
+                    return;
+                last = next;
+                scope.run(listener, layout.backdrop);
+            });
+            return scope.add({
+                dispose: async () => {
+                    scope.forget(watch);
+                    await watch.dispose();
+                },
+            });
+        },
+    };
+}

package/dist/plugin/view/panel.d.ts

@@ -0,0 +1,3 @@
+import type { ScopeImpl } from "../scope.ts";
+import type { Panels } from "../types.ts";
+export declare const panels: (scope: ScopeImpl) => Panels;