@kgdiff/viewer 0.5.0 → 0.6.0

package/dist/elements/stage.js

@@ -0,0 +1,259 @@
+import { provideContext } from '../context.js';
+import { DEFAULT_PANELS, formatPanels, toPanels } from '../panels.js';
+import { Stage } from '../ui/stage.js';
+import { StageView } from '../view.js';
+import { BoundElement, define } from './bound.js';
+import { stageContext } from './stage-context.js';
+export { stageContext } from './stage-context.js';
+/**
+ * The regions of the built-in chrome a stage has.
+ *
+ * @experimental Like the stage, in 0.6.
+ */
+export const STAGE_REGIONS = [
+    'dock',
+    'transport',
+    'legend',
+    'zoom',
+    'minimap',
+];
+const VERSIONS = ['before', 'after'];
+/** A version from an attribute or a property; anything else follows the mode, with a warning. */
+function toVersion(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (VERSIONS.includes(value))
+        return value;
+    console.warn(`[kgdiff] <kgdiff-stage> ignoring version ${JSON.stringify(value)} (before, after)`);
+    return null;
+}
+/** Panels from an attribute or a property, keeping the stage's regions (warning about the rest). */
+function stagePanels(value) {
+    const { panels, invalid } = toPanels(value);
+    const out = {};
+    for (const [region, state] of Object.entries(panels)) {
+        if (STAGE_REGIONS.includes(region))
+            out[region] = state;
+        else
+            invalid.push(`${region}:${state}`);
+    }
+    if (invalid.length > 0) {
+        console.warn(`[kgdiff] <kgdiff-stage> ignoring invalid panels: ${invalid.join(' ')}`);
+    }
+    return out;
+}
+/**
+ * The canvas of the root it is bound to: the graph, the hover tooltip, the swipe divider, the
+ * replay caption and the canvas chrome (view dock, replay transport, legend, zoom buttons and
+ * minimap). Each stage is a view of its own: a root draws every stage bound to it, each with its
+ * own camera, sharing the selection, the hover, the filters and the search; `version` pins one
+ * to a version.
+ *
+ * Five named slots take the page's content over the canvas. The stage positions it (12–16 px
+ * from the edges, stacked further from the corner than the chrome there), and every slotted
+ * element is an obstacle: fits and flights frame the graph in the free part of the canvas. A
+ * chrome element slotted in replaces the built-in region of its kind; `panels` keeps applying
+ * to the rest. Content positioned some other way registers itself with `registerObstacle`, on
+ * the element or on the stage context (`kgdiff.stage/1`) it provides to its descendants.
+ *
+ * @tagname kgdiff-stage
+ * @slot top-start - The page's content in the top left corner, below the version chip.
+ * @slot top-end - The page's content in the top right corner.
+ * @slot bottom-start - The page's content in the bottom left corner, above the legend.
+ * @slot bottom-center - The page's content above the view dock and the transport.
+ * @slot bottom-end - The page's content in the bottom right corner, above the zoom buttons and the minimap.
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export class KgdiffStage extends BoundElement {
+    static get observedAttributes() {
+        return ['for', 'panels', 'version'];
+    }
+    name = 'stage';
+    #stage = null;
+    /** The page's `panels`, and what the user changed since (the legend's head). */
+    #declared = {};
+    #runtime = {};
+    #reflecting = false;
+    #version = null;
+    #view = null;
+    #viewListeners = new Set();
+    /** Registered obstacles, kept across rebinding (the stage is rebuilt then). */
+    #obstacles = new Map();
+    get panels() {
+        return { ...this.#declared };
+    }
+    set panels(value) {
+        const panels = stagePanels(value);
+        this.#reflecting = true;
+        try {
+            const text = formatPanels(panels);
+            if (text)
+                this.setAttribute('panels', text);
+            else
+                this.removeAttribute('panels');
+        }
+        finally {
+            this.#reflecting = false;
+        }
+        this.#declare(panels);
+    }
+    /**
+     * The version this stage draws whatever the mode, reflected to the `version` attribute:
+     * `before` or `after` (side by side with another stage of the same root), or null to follow
+     * the root's mode (overlay, swipe, replay).
+     */
+    get version() {
+        return this.#version;
+    }
+    set version(value) {
+        const v = toVersion(value);
+        this.#reflecting = true;
+        try {
+            if (v)
+                this.setAttribute('version', v);
+            else
+                this.removeAttribute('version');
+        }
+        finally {
+            this.#reflecting = false;
+        }
+        this.#setVersion(v);
+    }
+    attributeChangedCallback(name, old, value) {
+        if (this.#reflecting)
+            return;
+        if (name === 'panels')
+            this.#declare(stagePanels(value ?? ''));
+        else if (name === 'version')
+            this.#setVersion(toVersion(value));
+        else
+            super.attributeChangedCallback(name, old, value);
+    }
+    upgradedProperties() {
+        return [...super.upgradedProperties(), 'panels', 'version'];
+    }
+    /** @internal This stage's view (its camera), for the dev harness and tests. */
+    get view() {
+        return this.#view;
+    }
+    #setVersion(version) {
+        if (version === this.#version)
+            return;
+        this.#version = version;
+        if (this.#view)
+            this.#view.version = version;
+        this.#stage?.setVersion(version);
+    }
+    #setView(view) {
+        this.#view = view;
+        for (const listener of this.#viewListeners)
+            listener(view);
+    }
+    /** A region the page declares another state for gives way; the same again changes nothing. */
+    #declare(panels) {
+        for (const r of STAGE_REGIONS)
+            if (panels[r] !== this.#declared[r])
+                delete this.#runtime[r];
+        this.#declared = panels;
+        this.#applyPanels();
+    }
+    #applyPanels() {
+        const states = { ...DEFAULT_PANELS, ...this.#declared, ...this.#runtime };
+        this.#stage?.setPanels(states);
+    }
+    registerObstacle(element) {
+        if (!this.#obstacles.has(element)) {
+            this.#obstacles.set(element, this.#stage?.registerObstacle(element) ?? (() => undefined));
+        }
+        return () => {
+            this.#obstacles.get(element)?.();
+            this.#obstacles.delete(element);
+        };
+    }
+    build(ui, ctx, release) {
+        release(provideContext(this, stageContext, () => {
+            const stage = this;
+            return {
+                stage,
+                get root() {
+                    return stage.context;
+                },
+                registerObstacle: (el) => stage.registerObstacle(el),
+                get view() {
+                    return stage.#view;
+                },
+                watchView: (listener) => {
+                    stage.#viewListeners.add(listener);
+                    listener(stage.#view);
+                    return () => {
+                        stage.#viewListeners.delete(listener);
+                    };
+                },
+            };
+        }));
+        // The user opening or folding the legend holds until the page declares the legend again.
+        const stage = new Stage({
+            ...ui,
+            setPanel: (region, state) => {
+                if (STAGE_REGIONS.includes(region)) {
+                    this.#runtime[region] = state;
+                }
+            },
+        }, true);
+        this.#stage = stage;
+        this.#applyPanels();
+        for (const el of this.#obstacles.keys())
+            this.#obstacles.set(el, stage.registerObstacle(el));
+        release(() => {
+            this.#stage = null;
+        });
+        stage.setChrome('full', true);
+        // One of the page's regions, not its main landmark.
+        stage.asRegion();
+        this.shadow.append(stage.el);
+        // Content slotted before the stage was built.
+        stage.slotted();
+        // This stage's own view of the shared session: canvas, camera, framing, minimap.
+        const view = new StageView(ctx.controller);
+        view.version = this.#version;
+        stage.view = view;
+        stage.setVersion(this.#version);
+        release(ctx.controller.addView(view));
+        // The stage adds its own minimap to the view (unless a slotted one replaces it).
+        view.attach(stage.canvasHost, null);
+        view.setChrome(() => stage.chromeLayout());
+        this.#setView(view);
+        release(() => {
+            this.#setView(null);
+            view.setChrome(null);
+            view.detach();
+        });
+        // The graph takes keyboard focus (shortcuts apply where focus is), also on click.
+        const canvas = stage.canvasHost.querySelector('canvas');
+        if (canvas) {
+            canvas.tabIndex = 0;
+            const focusCanvas = () => canvas.focus({ preventScroll: true });
+            canvas.addEventListener('pointerdown', focusCanvas);
+            release(() => canvas.removeEventListener('pointerdown', focusCanvas));
+        }
+        const hover = (over) => (e) => {
+            if (e.pointerType !== 'touch')
+                ctx.hover(over);
+        };
+        stage.el.addEventListener('pointerenter', hover(true));
+        stage.el.addEventListener('pointerleave', hover(false));
+        release(() => ctx.hover(false));
+        if (typeof ResizeObserver === 'function') {
+            const ro = new ResizeObserver(() => {
+                stage.layout();
+                view.layoutChanged();
+            });
+            ro.observe(stage.el);
+            release(() => ro.disconnect());
+        }
+        document.fonts?.ready?.then(() => this.#stage?.layout()).catch(() => undefined);
+        return stage;
+    }
+}
+define('kgdiff-stage', KgdiffStage);
+//# sourceMappingURL=stage.js.map

package/dist/elements/stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage.js","sourceRoot":"","sources":["../../src/elements/stage.ts"],"names":[],"mappings":"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"}

package/dist/elements/title.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<kgdiff-title>` (RFC 0001 §3), documented on its class. Importing this module defines it.
+ */
+import type { Region } from '../bind.js';
+import type { KgdiffBoundElement } from '../index.js';
+import type { UiContext } from '../ui/context.js';
+import { BoundElement } from './bound.js';
+/**
+ * The kgdiff mark and the root's compared names and versions. Binds to a root (`for`, `htmlFor`,
+ * `rootElement`). Slotted into a `<kgdiff-viewer>` it replaces the title over its canvas.
+ *
+ * @tagname kgdiff-title
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export declare class KgdiffTitle extends BoundElement implements KgdiffBoundElement {
+    protected readonly name = "title";
+    protected build(ui: UiContext): Region;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** @experimental In 0.6. */
+        'kgdiff-title': KgdiffBoundElement;
+    }
+}
+//# sourceMappingURL=title.d.ts.map

package/dist/elements/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/elements/title.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAU,MAAM,YAAY,CAAC;AAElD;;;;;;GAMG;AACH,qBAAa,WAAY,SAAQ,YAAa,YAAW,kBAAkB;IACzE,SAAS,CAAC,QAAQ,CAAC,IAAI,WAAW;IAElC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,GAAG,MAAM,CAIrC;CACF;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B;QAC5B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/dist/elements/title.js

@@ -0,0 +1,19 @@
+import { Title } from '../ui/header.js';
+import { BoundElement, define } from './bound.js';
+/**
+ * The kgdiff mark and the root's compared names and versions. Binds to a root (`for`, `htmlFor`,
+ * `rootElement`). Slotted into a `<kgdiff-viewer>` it replaces the title over its canvas.
+ *
+ * @tagname kgdiff-title
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export class KgdiffTitle extends BoundElement {
+    name = 'title';
+    build(ui) {
+        const title = new Title(ui);
+        this.shadow.append(title.el);
+        return title;
+    }
+}
+define('kgdiff-title', KgdiffTitle);
+//# sourceMappingURL=title.js.map

package/dist/elements/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sourceRoot":"","sources":["../../src/elements/title.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IACxB,IAAI,GAAG,OAAO,CAAC;IAExB,KAAK,CAAC,EAAa;QAC3B,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC7B,OAAO,KAAK,CAAC;IACf,CAAC;CACF;AAED,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}

package/dist/elements/transport.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `<kgdiff-transport>` (RFC 0001 §3), documented on its class. Importing this module defines it.
+ */
+import type { Region } from '../bind.js';
+import type { KgdiffBoundElement } from '../index.js';
+import type { UiContext } from '../ui/context.js';
+import { BoundElement } from './bound.js';
+/**
+ * The replay transport of the root's diff. Previous, play / pause, next, the scrubber with one tick
+ * per change, the position and the speed; at the end, "Replay finished · Restart" above it. Shown
+ * in replay mode only. Binds to a root (`for`, `htmlFor`, `rootElement`). Slotted into a
+ * `<kgdiff-stage>` (`slot="bottom-center"`, say) it replaces the stage's built-in transport; placed
+ * anywhere else it is not kept clear of fits and flights unless registered. Importing this module
+ * defines it.
+ *
+ * @tagname kgdiff-transport
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export declare class KgdiffTransport extends BoundElement implements KgdiffBoundElement {
+    protected readonly name = "transport";
+    protected build(ui: UiContext): Region;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** @experimental In 0.6. */
+        'kgdiff-transport': KgdiffBoundElement;
+    }
+}
+//# sourceMappingURL=transport.d.ts.map

package/dist/elements/transport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transport.d.ts","sourceRoot":"","sources":["../../src/elements/transport.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAU,MAAM,YAAY,CAAC;AAElD;;;;;;;;;;GAUG;AACH,qBAAa,eAAgB,SAAQ,YAAa,YAAW,kBAAkB;IAC7E,SAAS,CAAC,QAAQ,CAAC,IAAI,eAAe;IAEtC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,GAAG,MAAM,CAIrC;CACF;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B;QAC5B,kBAAkB,EAAE,kBAAkB,CAAC;KACxC;CACF"}

package/dist/elements/transport.js

@@ -0,0 +1,24 @@
+import { h } from '../dom.js';
+import { Transport } from '../ui/transport.js';
+import { BoundElement, define } from './bound.js';
+/**
+ * The replay transport of the root's diff. Previous, play / pause, next, the scrubber with one tick
+ * per change, the position and the speed; at the end, "Replay finished · Restart" above it. Shown
+ * in replay mode only. Binds to a root (`for`, `htmlFor`, `rootElement`). Slotted into a
+ * `<kgdiff-stage>` (`slot="bottom-center"`, say) it replaces the stage's built-in transport; placed
+ * anywhere else it is not kept clear of fits and flights unless registered. Importing this module
+ * defines it.
+ *
+ * @tagname kgdiff-transport
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export class KgdiffTransport extends BoundElement {
+    name = 'transport';
+    build(ui) {
+        const transport = new Transport(ui);
+        this.shadow.append(h('div', { class: 'stack' }, transport.finished, transport.el));
+        return transport;
+    }
+}
+define('kgdiff-transport', KgdiffTransport);
+//# sourceMappingURL=transport.js.map

package/dist/elements/transport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transport.js","sourceRoot":"","sources":["../../src/elements/transport.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,WAAW,CAAC;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAElD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,YAAY;IAC5B,IAAI,GAAG,WAAW,CAAC;IAE5B,KAAK,CAAC,EAAa;QAC3B,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;QACnF,OAAO,SAAS,CAAC;IACnB,CAAC;CACF;AAED,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC"}

package/dist/elements/view-bound.d.ts

@@ -0,0 +1,39 @@
+/**
+ * What the chrome that acts on one view shares (`<kgdiff-zoom>`, `<kgdiff-minimap>`; RFC 0001
+ * §3): it binds to a stage, not to a root. The nearest `<kgdiff-stage>` around it (across
+ * shadow roots, through the stage context `kgdiff.stage/1`), or the one its `stage="<id>"`
+ * names anywhere on the page (a `<kgdiff-viewer>` is the stage of what it holds, and can be
+ * named too); a stage defined or bound later is found then. It shows what the
+ * stage's root says (language, tokens), acts on the stage's view, and follows the stage when it
+ * binds again (a new view).
+ */
+import type { Region } from '../bind.js';
+import type { KgdiffRootElement, KgdiffStageElement, KgdiffViewerElement } from '../index.js';
+import type { ElementName } from '../styles.js';
+import type { UiContext } from '../ui/context.js';
+import type { StageView } from '../view.js';
+/** @experimental The base of the chrome elements that act on a stage's view, in 0.6. */
+export declare abstract class ViewBoundElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): readonly string[];
+    protected readonly shadow: ShadowRoot;
+    constructor();
+    /** The element's name after `kgdiff-` (its host rules). */
+    protected abstract readonly name: ElementName;
+    /** Build the region in the shadow root, for `view`; `release` collects what to undo. */
+    protected abstract build(ui: UiContext, view: StageView, release: (fn: () => void) => void): Region;
+    /**
+     * Reflects the `stage` attribute: the id of the stage to act on; '' (no attribute) for the
+     * nearest one around the element. Changing it binds again.
+     */
+    get stage(): string;
+    set stage(value: string);
+    /** The stage this element acts on, or null while it waits for one. */
+    get stageElement(): KgdiffStageElement | KgdiffViewerElement | null;
+    /** The root whose session the stage shows, or null while either waits. */
+    get rootElement(): KgdiffRootElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+}
+//# sourceMappingURL=view-bound.d.ts.map

package/dist/elements/view-bound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-bound.d.ts","sourceRoot":"","sources":["../../src/elements/view-bound.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC9F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAI5C,wFAAwF;AACxF,8BAAsB,gBAAiB,SAAQ,WAAW;;IACxD,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAOtC,cAGC;IAED,2DAA2D;IAC3D,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAE9C,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,KAAK,CACtB,EAAE,EAAE,SAAS,EACb,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,GAChC,MAAM,CAAC;IAEV;;;OAGG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAED,sEAAsE;IACtE,IAAI,YAAY,IAAI,kBAAkB,GAAG,mBAAmB,GAAG,IAAI,CAElE;IAED,0EAA0E;IAC1E,IAAI,WAAW,IAAI,iBAAiB,GAAG,IAAI,CAE1C;IAED,iBAAiB,IAAI,IAAI,CAQxB;IAED,oBAAoB,IAAI,IAAI,CAE3B;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAKrF;CA6BF"}

package/dist/elements/view-bound.js

@@ -0,0 +1,88 @@
+import { bindContext, mount } from './bound.js';
+import { stageContext } from './stage-context.js';
+/** @experimental The base of the chrome elements that act on a stage's view, in 0.6. */
+export class ViewBoundElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['stage'];
+    }
+    shadow;
+    #stage = null;
+    /** Undone when the element unbinds from its stage. */
+    #release = [];
+    /** Undone when the stage's view or root changes (the region is built again). */
+    #regionRelease = [];
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: 'open' });
+    }
+    /**
+     * Reflects the `stage` attribute: the id of the stage to act on; '' (no attribute) for the
+     * nearest one around the element. Changing it binds again.
+     */
+    get stage() {
+        return this.getAttribute('stage') ?? '';
+    }
+    set stage(value) {
+        const id = String(value);
+        if (id === '')
+            this.removeAttribute('stage');
+        else
+            this.setAttribute('stage', id);
+    }
+    /** The stage this element acts on, or null while it waits for one. */
+    get stageElement() {
+        return this.#stage?.stage ?? null;
+    }
+    /** The root whose session the stage shows, or null while either waits. */
+    get rootElement() {
+        return this.#stage?.root?.host ?? null;
+    }
+    connectedCallback() {
+        // Set before the element was defined: it shadows the accessor.
+        if (Object.hasOwn(this, 'stage')) {
+            const value = this.stage;
+            delete this.stage;
+            this.stage = String(value);
+        }
+        this.#bind();
+    }
+    disconnectedCallback() {
+        this.#unbind();
+    }
+    attributeChangedCallback(name, old, value) {
+        if (name === 'stage' && old !== value && this.isConnected) {
+            this.#unbind();
+            this.#bind();
+        }
+    }
+    #bind() {
+        const cancel = bindContext(this, stageContext, this.getAttribute('stage'), (ctx) => {
+            const stage = ctx;
+            this.#stage = stage;
+            this.#release.push(stage.watchView((view) => this.#build(view)));
+        });
+        this.#release.push(cancel);
+    }
+    /** The stage has a view (again), or lost it: show the region for it. */
+    #build(view) {
+        for (const fn of this.#regionRelease.splice(0))
+            fn();
+        this.shadow.replaceChildren();
+        const root = this.#stage?.root;
+        if (!view || !root)
+            return;
+        const release = (fn) => {
+            this.#regionRelease.push(fn);
+        };
+        mount(this, this.shadow, this.name, root, (ui) => this.build(ui, view, release), release);
+    }
+    #unbind() {
+        this.#stage = null;
+        for (const fn of this.#regionRelease.splice(0))
+            fn();
+        for (const fn of this.#release.splice(0))
+            fn();
+        this.shadow.replaceChildren();
+    }
+}
+//# sourceMappingURL=view-bound.js.map

package/dist/elements/view-bound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-bound.js","sourceRoot":"","sources":["../../src/elements/view-bound.ts"],"names":[],"mappings":"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"}

package/dist/elements/view-dock.d.ts

@@ -0,0 +1,28 @@
+/**
+ * `<kgdiff-view-dock>` (RFC 0001 §3), documented on its class. Importing this module defines it.
+ */
+import type { Region } from '../bind.js';
+import type { KgdiffBoundElement } from '../index.js';
+import type { UiContext } from '../ui/context.js';
+import { BoundElement } from './bound.js';
+/**
+ * How the root's diff is viewed. The mode (overlay, swipe, replay; keys `1`–`3`) and "Changes only"
+ * (key `4`) with its context hops and the nearest "+N" expansion. Binds to a root like the other
+ * elements (`for`, `htmlFor`, `rootElement`). Slotted into a `<kgdiff-stage>` it replaces the
+ * stage's built-in dock; placed anywhere else it is not kept clear of fits and flights unless
+ * registered (`stage.registerObstacle`).
+ *
+ * @tagname kgdiff-view-dock
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export declare class KgdiffViewDock extends BoundElement implements KgdiffBoundElement {
+    protected readonly name = "view-dock";
+    protected build(ui: UiContext, _ctx: unknown, release: (fn: () => void) => void): Region;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** @experimental In 0.6. */
+        'kgdiff-view-dock': KgdiffBoundElement;
+    }
+}
+//# sourceMappingURL=view-dock.d.ts.map

package/dist/elements/view-dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-dock.d.ts","sourceRoot":"","sources":["../../src/elements/view-dock.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAU,MAAM,YAAY,CAAC;AAElD;;;;;;;;;GASG;AACH,qBAAa,cAAe,SAAQ,YAAa,YAAW,kBAAkB;IAC5E,SAAS,CAAC,QAAQ,CAAC,IAAI,eAAe;IAEtC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,CAUvF;CACF;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B;QAC5B,kBAAkB,EAAE,kBAAkB,CAAC;KACxC;CACF"}

package/dist/elements/view-dock.js

@@ -0,0 +1,28 @@
+import { Dock } from '../ui/dock.js';
+import { BoundElement, define } from './bound.js';
+/**
+ * How the root's diff is viewed. The mode (overlay, swipe, replay; keys `1`–`3`) and "Changes only"
+ * (key `4`) with its context hops and the nearest "+N" expansion. Binds to a root like the other
+ * elements (`for`, `htmlFor`, `rootElement`). Slotted into a `<kgdiff-stage>` it replaces the
+ * stage's built-in dock; placed anywhere else it is not kept clear of fits and flights unless
+ * registered (`stage.registerObstacle`).
+ *
+ * @tagname kgdiff-view-dock
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export class KgdiffViewDock extends BoundElement {
+    name = 'view-dock';
+    build(ui, _ctx, release) {
+        const dock = new Dock(ui);
+        this.shadow.append(dock.el);
+        if (typeof ResizeObserver === 'function') {
+            // Narrow docks drop their labels.
+            const ro = new ResizeObserver(() => dock.layout());
+            ro.observe(this);
+            release(() => ro.disconnect());
+        }
+        return dock;
+    }
+}
+define('kgdiff-view-dock', KgdiffViewDock);
+//# sourceMappingURL=view-dock.js.map

package/dist/elements/view-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-dock.js","sourceRoot":"","sources":["../../src/elements/view-dock.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAElD;;;;;;;;;GASG;AACH,MAAM,OAAO,cAAe,SAAQ,YAAY;IAC3B,IAAI,GAAG,WAAW,CAAC;IAE5B,KAAK,CAAC,EAAa,EAAE,IAAa,EAAE,OAAiC;QAC7E,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC5B,IAAI,OAAO,cAAc,KAAK,UAAU,EAAE,CAAC;YACzC,kCAAkC;YAClC,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YACnD,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAED,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC"}

package/dist/elements/zoom.d.ts

@@ -0,0 +1,28 @@
+/**
+ * `<kgdiff-zoom>` (RFC 0001 §3), documented on its class. Importing this module defines it.
+ */
+import type { Region } from '../bind.js';
+import type { KgdiffStageBoundElement } from '../index.js';
+import type { UiContext } from '../ui/context.js';
+import type { StageView } from '../view.js';
+import { ViewBoundElement } from './view-bound.js';
+/**
+ * Zoom in, zoom out and fit, for one stage's view (the `+` / `−` / `f` keys act on every stage of
+ * the root). Binds to the nearest `<kgdiff-stage>` around it, or to the one `stage="<id>"` names
+ * (`stage`, `stageElement`, `rootElement`). Slotted into a stage it replaces the stage's built-in
+ * zoom buttons; placed anywhere else it is not kept clear of fits and flights unless registered.
+ *
+ * @tagname kgdiff-zoom
+ * @experimental In 0.6; stable from 0.7 (RFC 0001, decision 7).
+ */
+export declare class KgdiffZoom extends ViewBoundElement implements KgdiffStageBoundElement {
+    protected readonly name = "zoom";
+    protected build(ui: UiContext, view: StageView): Region;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** @experimental In 0.6. */
+        'kgdiff-zoom': KgdiffStageBoundElement;
+    }
+}
+//# sourceMappingURL=zoom.d.ts.map

package/dist/elements/zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../src/elements/zoom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;;;;;;GAQG;AACH,qBAAa,UAAW,SAAQ,gBAAiB,YAAW,uBAAuB;IACjF,SAAS,CAAC,QAAQ,CAAC,IAAI,UAAU;IAEjC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAItD;CACF;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B;QAC5B,aAAa,EAAE,uBAAuB,CAAC;KACxC;CACF"}