@operato/layout 10.27.1 → 10.28.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.28.0](https://github.com/hatiolab/operato/compare/v10.27.1...v10.28.0) (2026-09-24)
+
+
+### :rocket: New Features
+
+* **layout:** ox-canvas-bar - the common canvas controls in the same places everywhere ([11a758a](https://github.com/hatiolab/operato/commit/11a758a63fbacc060434f1ac794e9d7082b4c2a3))
+* **layout:** ox-canvas-bar shows the screen's undo and redo keys in their titles ([13793b4](https://github.com/hatiolab/operato/commit/13793b432b8242832b56ae8c90cd5a8e515cd740))
+* **layout:** ox-three-pane - the start | middle | end work surface, once ([7f280be](https://github.com/hatiolab/operato/commit/7f280beb22006d9609871e3c478f42620b775df6))
+* **layout:** ox-url-tabs - tabs whose choice lives in the address, read and written together ([a6fb40f](https://github.com/hatiolab/operato/commit/a6fb40f2db42e1b92c474af3e25a8df1038b444b))
+
+
+
 ### [10.27.1](https://github.com/hatiolab/operato/compare/v10.27.0...v10.27.1) (2026-09-24)
 
 **Note:** Version bump only for package @operato/layout

package/dist/src/components/ox-canvas-bar.d.ts

@@ -0,0 +1,49 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import type { OxThreePane } from './ox-three-pane.js';
+/**
+ * The strip over a canvas - a scene, a modeller, a map (ADR-0060 decision 8 addendum, the second frame).
+ *
+ * Seven screens built this strip each their own way: twin's map and board with the same buttons and a
+ * copied stylesheet, and the modellers of plant, figure and twin putting undo, redo, fit and the side
+ * toggles in different places. A hand that learned one product looked for them in another. So the bar
+ * fixes where the common controls stand, and the screen fills the rest:
+ *
+ *   [fold start] | mode | undo redo | fit | tools …            status | commit | [fold end]
+ *
+ * - The fold toggles stand at the two edges, over the side they fold. Give the bar the ox-three-pane
+ *   it sits over (`.pane`) and it folds that frame itself; with no pane there are no toggles.
+ * - Undo, redo and fit are drawn here so their icons and order are the same everywhere. Each appears
+ *   when the screen says it has it (`history`, `fit`) and fires an event - `canvas-undo`,
+ *   `canvas-redo`, `canvas-fit` - for the screen to answer. Shortcuts stay with the screen.
+ * - `undo-shortcut` / `redo-shortcut` put the screen's keys in those titles - `undo (Ctrl+Z)` - so a
+ *   person learns them where they reach for the button. The keys themselves stay with the screen.
+ * - Slots: `mode` (edit / preview and the like), the default slot for the screen's own tools,
+ *   `status` (saved, unsaved) and `commit` (save).
+ */
+export declare class OxCanvasBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The frame this bar folds. Without one the bar draws no fold toggles. */
+    pane?: OxThreePane | null;
+    /** The screen keeps an undo history - draw undo and redo. */
+    history: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** The key that undoes, shown in the title beside the name (the V2 modeller did: `undo (Ctrl+Z)`). */
+    undoShortcut: string;
+    /** The key that redoes, shown the same way. */
+    redoShortcut: string;
+    /** The screen can fit its canvas to the view - draw fit. */
+    fit: boolean;
+    private observer?;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private fold;
+    private fire;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-canvas-bar': OxCanvasBar;
+    }
+}

package/dist/src/components/ox-canvas-bar.js

@@ -0,0 +1,188 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+/**
+ * The strip over a canvas - a scene, a modeller, a map (ADR-0060 decision 8 addendum, the second frame).
+ *
+ * Seven screens built this strip each their own way: twin's map and board with the same buttons and a
+ * copied stylesheet, and the modellers of plant, figure and twin putting undo, redo, fit and the side
+ * toggles in different places. A hand that learned one product looked for them in another. So the bar
+ * fixes where the common controls stand, and the screen fills the rest:
+ *
+ *   [fold start] | mode | undo redo | fit | tools …            status | commit | [fold end]
+ *
+ * - The fold toggles stand at the two edges, over the side they fold. Give the bar the ox-three-pane
+ *   it sits over (`.pane`) and it folds that frame itself; with no pane there are no toggles.
+ * - Undo, redo and fit are drawn here so their icons and order are the same everywhere. Each appears
+ *   when the screen says it has it (`history`, `fit`) and fires an event - `canvas-undo`,
+ *   `canvas-redo`, `canvas-fit` - for the screen to answer. Shortcuts stay with the screen.
+ * - `undo-shortcut` / `redo-shortcut` put the screen's keys in those titles - `undo (Ctrl+Z)` - so a
+ *   person learns them where they reach for the button. The keys themselves stay with the screen.
+ * - Slots: `mode` (edit / preview and the like), the default slot for the screen's own tools,
+ *   `status` (saved, unsaved) and `commit` (save).
+ */
+let OxCanvasBar = class OxCanvasBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The screen keeps an undo history - draw undo and redo. */
+        this.history = false;
+        this.canUndo = false;
+        this.canRedo = false;
+        /** The key that undoes, shown in the title beside the name (the V2 modeller did: `undo (Ctrl+Z)`). */
+        this.undoShortcut = '';
+        /** The key that redoes, shown the same way. */
+        this.redoShortcut = '';
+        /** The screen can fit its canvas to the view - draw fit. */
+        this.fit = false;
+    }
+    updated(changed) {
+        var _a;
+        if (changed.has('pane')) {
+            (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+            /* The fold can also change from elsewhere (a shortcut, a stylesheet reading the attribute);
+               the toggles follow the frame, not their own memory. */
+            if (this.pane) {
+                this.observer = new MutationObserver(() => this.requestUpdate());
+                this.observer.observe(this.pane, { attributes: true, attributeFilter: ['fold-start', 'fold-end'] });
+            }
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        const t = (key, fallback) => i18next.t(key, { defaultValue: fallback });
+        /* The shortcut goes in the title only: the name a screen reader says stays the name. */
+        const titled = (name, shortcut) => (shortcut ? `${name} (${shortcut})` : name);
+        return html `
+      ${this.fold('start')}
+      <slot name="mode"></slot>
+      ${this.history
+            ? html `<span class="group" role="group">
+            <button data-action="undo" title=${titled(t('button.undo', 'undo'), this.undoShortcut)} aria-label=${t('button.undo', 'undo')}
+              ?disabled=${!this.canUndo} @click=${() => this.fire('canvas-undo')}><md-icon>undo</md-icon></button>
+            <button data-action="redo" title=${titled(t('button.redo', 'redo'), this.redoShortcut)} aria-label=${t('button.redo', 'redo')}
+              ?disabled=${!this.canRedo} @click=${() => this.fire('canvas-redo')}><md-icon>redo</md-icon></button>
+          </span>`
+            : nothing}
+      ${this.fit
+            ? html `<button data-action="fit" title=${t('button.fit-view', 'fit to view')} aria-label=${t('button.fit-view', 'fit to view')}
+            @click=${() => this.fire('canvas-fit')}><md-icon>fit_screen</md-icon></button>`
+            : nothing}
+      <slot></slot>
+      <span class="spacer"></span>
+      <slot name="status"></slot>
+      <slot name="commit"></slot>
+      ${this.fold('end')}
+    `;
+    }
+    fold(side) {
+        const pane = this.pane;
+        if (!pane)
+            return nothing;
+        const folded = side === 'start' ? pane.foldStart : pane.foldEnd;
+        const icon = `${side === 'start' ? 'left' : 'right'}_panel_${folded ? 'open' : 'close'}`;
+        const label = i18next.t(`button.${folded ? 'show' : 'hide'}-${side}-pane`, {
+            defaultValue: `${folded ? 'show' : 'hide'} the ${side === 'start' ? 'left' : 'right'} pane`
+        });
+        const button = html `<button data-action="fold-${side}" aria-pressed=${String(!folded)} title=${label} aria-label=${label}
+      @click=${() => {
+            if (side === 'start')
+                pane.foldStart = !pane.foldStart;
+            else
+                pane.foldEnd = !pane.foldEnd;
+            this.requestUpdate();
+        }}><md-icon>${icon}</md-icon></button>`;
+        return side === 'start'
+            ? html `${button}<span class="separator"></span>`
+            : html `<span class="separator"></span>${button}`;
+    }
+    fire(name) {
+        this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));
+    }
+};
+OxCanvasBar.styles = css `
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      min-height: 40px;
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      flex-wrap: wrap;
+    }
+    .group {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+    }
+    .separator {
+      width: 1px;
+      align-self: stretch;
+      margin: 4px 4px;
+      background: var(--md-sys-color-outline-variant);
+    }
+    .spacer {
+      flex: 1;
+    }
+    button {
+      display: inline-grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: none;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant);
+      cursor: pointer;
+    }
+    button:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-high);
+      color: var(--md-sys-color-on-surface);
+    }
+    button:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
+    button:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
+    md-icon {
+      --md-icon-size: 20px;
+    }
+  `;
+__decorate([
+    property({ attribute: false })
+], OxCanvasBar.prototype, "pane", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxCanvasBar.prototype, "history", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'can-undo' })
+], OxCanvasBar.prototype, "canUndo", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'can-redo' })
+], OxCanvasBar.prototype, "canRedo", void 0);
+__decorate([
+    property({ attribute: 'undo-shortcut' })
+], OxCanvasBar.prototype, "undoShortcut", void 0);
+__decorate([
+    property({ attribute: 'redo-shortcut' })
+], OxCanvasBar.prototype, "redoShortcut", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxCanvasBar.prototype, "fit", void 0);
+OxCanvasBar = __decorate([
+    customElement('ox-canvas-bar')
+], OxCanvasBar);
+export { OxCanvasBar };
+//# sourceMappingURL=ox-canvas-bar.js.map

package/dist/src/components/ox-canvas-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-canvas-bar.js","sourceRoot":"","sources":["../../../src/components/ox-canvas-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\n\nimport type { OxThreePane } from './ox-three-pane.js'\n\n/**\n * The strip over a canvas - a scene, a modeller, a map (ADR-0060 decision 8 addendum, the second frame).\n *\n * Seven screens built this strip each their own way: twin's map and board with the same buttons and a\n * copied stylesheet, and the modellers of plant, figure and twin putting undo, redo, fit and the side\n * toggles in different places. A hand that learned one product looked for them in another. So the bar\n * fixes where the common controls stand, and the screen fills the rest:\n *\n *   [fold start] | mode | undo redo | fit | tools …            status | commit | [fold end]\n *\n * - The fold toggles stand at the two edges, over the side they fold. Give the bar the ox-three-pane\n *   it sits over (`.pane`) and it folds that frame itself; with no pane there are no toggles.\n * - Undo, redo and fit are drawn here so their icons and order are the same everywhere. Each appears\n *   when the screen says it has it (`history`, `fit`) and fires an event - `canvas-undo`,\n *   `canvas-redo`, `canvas-fit` - for the screen to answer. Shortcuts stay with the screen.\n * - `undo-shortcut` / `redo-shortcut` put the screen's keys in those titles - `undo (Ctrl+Z)` - so a\n *   person learns them where they reach for the button. The keys themselves stay with the screen.\n * - Slots: `mode` (edit / preview and the like), the default slot for the screen's own tools,\n *   `status` (saved, unsaved) and `commit` (save).\n */\n@customElement('ox-canvas-bar')\nexport class OxCanvasBar extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 8px;\n      min-height: 40px;\n      box-sizing: border-box;\n      border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      background: var(--md-sys-color-surface);\n      color: var(--md-sys-color-on-surface);\n      flex-wrap: wrap;\n    }\n    .group {\n      display: inline-flex;\n      align-items: center;\n      gap: 2px;\n    }\n    .separator {\n      width: 1px;\n      align-self: stretch;\n      margin: 4px 4px;\n      background: var(--md-sys-color-outline-variant);\n    }\n    .spacer {\n      flex: 1;\n    }\n    button {\n      display: inline-grid;\n      place-items: center;\n      width: 32px;\n      height: 32px;\n      padding: 0;\n      border: none;\n      border-radius: var(--md-sys-shape-corner-small, 8px);\n      background: transparent;\n      color: var(--md-sys-color-on-surface-variant);\n      cursor: pointer;\n    }\n    button:hover:not(:disabled) {\n      background: var(--md-sys-color-surface-container-high);\n      color: var(--md-sys-color-on-surface);\n    }\n    button:focus-visible {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: 1px;\n    }\n    button:disabled {\n      opacity: 0.38;\n      cursor: default;\n    }\n    md-icon {\n      --md-icon-size: 20px;\n    }\n  `\n\n  /** The frame this bar folds. Without one the bar draws no fold toggles. */\n  @property({ attribute: false }) pane?: OxThreePane | null\n  /** The screen keeps an undo history - draw undo and redo. */\n  @property({ type: Boolean }) history = false\n  @property({ type: Boolean, attribute: 'can-undo' }) canUndo = false\n  @property({ type: Boolean, attribute: 'can-redo' }) canRedo = false\n  /** The key that undoes, shown in the title beside the name (the V2 modeller did: `undo (Ctrl+Z)`). */\n  @property({ attribute: 'undo-shortcut' }) undoShortcut = ''\n  /** The key that redoes, shown the same way. */\n  @property({ attribute: 'redo-shortcut' }) redoShortcut = ''\n  /** The screen can fit its canvas to the view - draw fit. */\n  @property({ type: Boolean }) fit = false\n\n  private observer?: MutationObserver\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('pane')) {\n      this.observer?.disconnect()\n      /* The fold can also change from elsewhere (a shortcut, a stylesheet reading the attribute);\n         the toggles follow the frame, not their own memory. */\n      if (this.pane) {\n        this.observer = new MutationObserver(() => this.requestUpdate())\n        this.observer.observe(this.pane, { attributes: true, attributeFilter: ['fold-start', 'fold-end'] })\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n  }\n\n  render() {\n    const t = (key: string, fallback: string) => i18next.t(key, { defaultValue: fallback })\n    /* The shortcut goes in the title only: the name a screen reader says stays the name. */\n    const titled = (name: string, shortcut: string) => (shortcut ? `${name} (${shortcut})` : name)\n\n    return html`\n      ${this.fold('start')}\n      <slot name=\"mode\"></slot>\n      ${this.history\n        ? html`<span class=\"group\" role=\"group\">\n            <button data-action=\"undo\" title=${titled(t('button.undo', 'undo'), this.undoShortcut)} aria-label=${t('button.undo', 'undo')}\n              ?disabled=${!this.canUndo} @click=${() => this.fire('canvas-undo')}><md-icon>undo</md-icon></button>\n            <button data-action=\"redo\" title=${titled(t('button.redo', 'redo'), this.redoShortcut)} aria-label=${t('button.redo', 'redo')}\n              ?disabled=${!this.canRedo} @click=${() => this.fire('canvas-redo')}><md-icon>redo</md-icon></button>\n          </span>`\n        : nothing}\n      ${this.fit\n        ? html`<button data-action=\"fit\" title=${t('button.fit-view', 'fit to view')} aria-label=${t('button.fit-view', 'fit to view')}\n            @click=${() => this.fire('canvas-fit')}><md-icon>fit_screen</md-icon></button>`\n        : nothing}\n      <slot></slot>\n      <span class=\"spacer\"></span>\n      <slot name=\"status\"></slot>\n      <slot name=\"commit\"></slot>\n      ${this.fold('end')}\n    `\n  }\n\n  private fold(side: 'start' | 'end') {\n    const pane = this.pane\n    if (!pane) return nothing\n\n    const folded = side === 'start' ? pane.foldStart : pane.foldEnd\n    const icon = `${side === 'start' ? 'left' : 'right'}_panel_${folded ? 'open' : 'close'}`\n    const label = i18next.t(`button.${folded ? 'show' : 'hide'}-${side}-pane`, {\n      defaultValue: `${folded ? 'show' : 'hide'} the ${side === 'start' ? 'left' : 'right'} pane`\n    })\n\n    const button = html`<button data-action=\"fold-${side}\" aria-pressed=${String(!folded)} title=${label} aria-label=${label}\n      @click=${() => {\n        if (side === 'start') pane.foldStart = !pane.foldStart\n        else pane.foldEnd = !pane.foldEnd\n        this.requestUpdate()\n      }}><md-icon>${icon}</md-icon></button>`\n\n    return side === 'start'\n      ? html`${button}<span class=\"separator\"></span>`\n      : html`<span class=\"separator\"></span>${button}`\n  }\n\n  private fire(name: string) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-canvas-bar': OxCanvasBar\n  }\n}\n"]}

package/dist/src/components/ox-three-pane.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * A work surface in three panes: a list on the start side, the thing being worked on in the middle,
+ * its details on the end side (ADR-0060 decision 8 and its 2026-09-24 addendum).
+ *
+ * plant's station-screen modeller and figure's V3 editor built this grid apart - 220 | 1fr | 340 and
+ * 200 | 1fr | 340, each folding its sides from its own toolbar. The frame is that grid once:
+ *
+ * - Slots `start` and `end`, and the default slot for the middle.
+ * - `fold-start` / `fold-end` take a side away; the middle takes its room. The toggles stay in the
+ *   screen's toolbar - the frame owns the layout, not the buttons.
+ * - Side widths are `--three-pane-start-width` (200px) and `--three-pane-end-width` (340px). A screen
+ *   that needs other widths sets them; it does not write the grid again.
+ * - It answers its own width, not the window's: narrower than 860px the sides give up some room
+ *   (160 / 300); narrower than 560px it is one column, the middle first, and it scrolls.
+ */
+export declare class OxThreePane extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Take the start side away; the middle takes its room. */
+    foldStart: boolean;
+    /** Take the end side away; the middle takes its room. */
+    foldEnd: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-three-pane': OxThreePane;
+    }
+}

package/dist/src/components/ox-three-pane.js

@@ -0,0 +1,132 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A work surface in three panes: a list on the start side, the thing being worked on in the middle,
+ * its details on the end side (ADR-0060 decision 8 and its 2026-09-24 addendum).
+ *
+ * plant's station-screen modeller and figure's V3 editor built this grid apart - 220 | 1fr | 340 and
+ * 200 | 1fr | 340, each folding its sides from its own toolbar. The frame is that grid once:
+ *
+ * - Slots `start` and `end`, and the default slot for the middle.
+ * - `fold-start` / `fold-end` take a side away; the middle takes its room. The toggles stay in the
+ *   screen's toolbar - the frame owns the layout, not the buttons.
+ * - Side widths are `--three-pane-start-width` (200px) and `--three-pane-end-width` (340px). A screen
+ *   that needs other widths sets them; it does not write the grid again.
+ * - It answers its own width, not the window's: narrower than 860px the sides give up some room
+ *   (160 / 300); narrower than 560px it is one column, the middle first, and it scrolls.
+ */
+let OxThreePane = class OxThreePane extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Take the start side away; the middle takes its room. */
+        this.foldStart = false;
+        /** Take the end side away; the middle takes its room. */
+        this.foldEnd = false;
+    }
+    render() {
+        return html `<div class="panes">
+      <div class="start" part="start"><slot name="start"></slot></div>
+      <div class="middle" part="middle"><slot></slot></div>
+      <div class="end" part="end"><slot name="end"></slot></div>
+    </div>`;
+    }
+};
+OxThreePane.styles = css `
+    :host {
+      display: block;
+      container-type: inline-size;
+      min-height: 0;
+      min-width: 0;
+    }
+
+    .panes {
+      --_start: var(--three-pane-start-width, 200px);
+      --_end: var(--three-pane-end-width, 340px);
+
+      display: grid;
+      grid-template-columns: var(--_start) minmax(0, 1fr) var(--_end);
+      height: 100%;
+      min-height: 0;
+    }
+
+    :host([fold-start]) .panes {
+      --_start: 0px;
+    }
+    :host([fold-end]) .panes {
+      --_end: 0px;
+    }
+    :host([fold-start]) .start,
+    :host([fold-end]) .end {
+      display: none;
+    }
+
+    .start,
+    .middle,
+    .end {
+      min-width: 0;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    /* Each pane is placed in its own column. Auto-placement would slide the middle into the start
+       column's zero width once the start pane is folded away (display: none leaves the flow). */
+    .start {
+      grid-column: 1;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
+    }
+    .middle {
+      grid-column: 2;
+    }
+    .end {
+      grid-column: 3;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
+    }
+    ::slotted(*) {
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    @container (max-width: 859px) {
+      .panes {
+        --_start: var(--three-pane-start-width-narrow, 160px);
+        --_end: var(--three-pane-end-width-narrow, 300px);
+      }
+    }
+
+    @container (max-width: 559px) {
+      .panes {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(260px, 45%) auto auto;
+        overflow-y: auto;
+      }
+      .start,
+      .middle,
+      .end {
+        grid-column: 1;
+      }
+      .middle {
+        order: -1;
+      }
+      .start {
+        border-right: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      .end {
+        border-left: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+    }
+  `;
+__decorate([
+    property({ type: Boolean, attribute: 'fold-start', reflect: true })
+], OxThreePane.prototype, "foldStart", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'fold-end', reflect: true })
+], OxThreePane.prototype, "foldEnd", void 0);
+OxThreePane = __decorate([
+    customElement('ox-three-pane')
+], OxThreePane);
+export { OxThreePane };
+//# sourceMappingURL=ox-three-pane.js.map

package/dist/src/components/ox-three-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-three-pane.js","sourceRoot":"","sources":["../../../src/components/ox-three-pane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAyFL,2DAA2D;QACU,cAAS,GAAG,KAAK,CAAA;QACtF,yDAAyD;QACU,YAAO,GAAG,KAAK,CAAA;IASpF,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;WAIJ,CAAA;IACT,CAAC;;AAnGM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFlB,AAtFY,CAsFZ;AAGoE;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAEnB;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB;AA5FvE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAqGvB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * A work surface in three panes: a list on the start side, the thing being worked on in the middle,\n * its details on the end side (ADR-0060 decision 8 and its 2026-09-24 addendum).\n *\n * plant's station-screen modeller and figure's V3 editor built this grid apart - 220 | 1fr | 340 and\n * 200 | 1fr | 340, each folding its sides from its own toolbar. The frame is that grid once:\n *\n * - Slots `start` and `end`, and the default slot for the middle.\n * - `fold-start` / `fold-end` take a side away; the middle takes its room. The toggles stay in the\n *   screen's toolbar - the frame owns the layout, not the buttons.\n * - Side widths are `--three-pane-start-width` (200px) and `--three-pane-end-width` (340px). A screen\n *   that needs other widths sets them; it does not write the grid again.\n * - It answers its own width, not the window's: narrower than 860px the sides give up some room\n *   (160 / 300); narrower than 560px it is one column, the middle first, and it scrolls.\n */\n@customElement('ox-three-pane')\nexport class OxThreePane extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      container-type: inline-size;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    .panes {\n      --_start: var(--three-pane-start-width, 200px);\n      --_end: var(--three-pane-end-width, 340px);\n\n      display: grid;\n      grid-template-columns: var(--_start) minmax(0, 1fr) var(--_end);\n      height: 100%;\n      min-height: 0;\n    }\n\n    :host([fold-start]) .panes {\n      --_start: 0px;\n    }\n    :host([fold-end]) .panes {\n      --_end: 0px;\n    }\n    :host([fold-start]) .start,\n    :host([fold-end]) .end {\n      display: none;\n    }\n\n    .start,\n    .middle,\n    .end {\n      min-width: 0;\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n    }\n    /* Each pane is placed in its own column. Auto-placement would slide the middle into the start\n       column's zero width once the start pane is folded away (display: none leaves the flow). */\n    .start {\n      grid-column: 1;\n      border-right: 1px solid var(--md-sys-color-outline-variant);\n    }\n    .middle {\n      grid-column: 2;\n    }\n    .end {\n      grid-column: 3;\n      border-left: 1px solid var(--md-sys-color-outline-variant);\n    }\n    ::slotted(*) {\n      flex: 1;\n      min-width: 0;\n      min-height: 0;\n    }\n\n    @container (max-width: 859px) {\n      .panes {\n        --_start: var(--three-pane-start-width-narrow, 160px);\n        --_end: var(--three-pane-end-width-narrow, 300px);\n      }\n    }\n\n    @container (max-width: 559px) {\n      .panes {\n        grid-template-columns: minmax(0, 1fr);\n        grid-template-rows: minmax(260px, 45%) auto auto;\n        overflow-y: auto;\n      }\n      .start,\n      .middle,\n      .end {\n        grid-column: 1;\n      }\n      .middle {\n        order: -1;\n      }\n      .start {\n        border-right: none;\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n      }\n      .end {\n        border-left: none;\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n      }\n    }\n  `\n\n  /** Take the start side away; the middle takes its room. */\n  @property({ type: Boolean, attribute: 'fold-start', reflect: true }) foldStart = false\n  /** Take the end side away; the middle takes its room. */\n  @property({ type: Boolean, attribute: 'fold-end', reflect: true }) foldEnd = false\n\n  render() {\n    return html`<div class=\"panes\">\n      <div class=\"start\" part=\"start\"><slot name=\"start\"></slot></div>\n      <div class=\"middle\" part=\"middle\"><slot></slot></div>\n      <div class=\"end\" part=\"end\"><slot name=\"end\"></slot></div>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-three-pane': OxThreePane\n  }\n}\n"]}

package/dist/src/components/ox-url-tabs.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+export interface OxUrlTab {
+    key: string;
+    label: string;
+}
+/**
+ * Tabs whose choice lives in the address (ADR-0060 decision 8 addendum, the third frame).
+ *
+ * plant's quality and pending lists and its equipment screen keep their tab in the address, each its
+ * own way; twin's business screen reads the tab from the address on entry and never writes it back, so
+ * a copied link opens on the first tab. Here reading and writing always go together: open the link,
+ * press back after opening a row, reload - the same tab.
+ *
+ * - `?tab=` (the `param` name) is where new screens keep it. The first tab is the default and is not
+ *   written, so a screen's plain address stays plain. Other query values are kept as they are.
+ *   The change replaces the address rather than adding a history step - back leaves the screen, it
+ *   does not walk through the tabs.
+ * - `base` puts the key in a path segment instead (`<base>/<key>`), through the shell's navigate, the
+ *   way plant's three screens do. **Transitional** (architect ruling 2026-09-24): it is here so those
+ *   screens can take the frame without breaking the links people have; new screens use `?tab=`.
+ * - `tab-change` (detail `{ key }`) fires when the tab changes - by a press, or by back / forward.
+ *   `selected` holds the current key, read from the address when the element connects.
+ *
+ * The look is the suite's tab strip (SurfaceStyles `.ui-tabs`): an underline under the chosen one.
+ */
+export declare class OxUrlTabs extends LitElement {
+    static styles: import("lit").CSSResult;
+    tabs: OxUrlTab[];
+    /** The query name the key is kept under. */
+    param: string;
+    /** Transitional: keep the key in a path segment after this page instead of the query. */
+    base?: string;
+    selected: string;
+    private onPop;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /** The key the address names, or the first tab when it names none of them. */
+    keyInAddress(): string;
+    private read;
+    /** Choose a tab: the address follows, and the screen hears it. */
+    select(key: string): void;
+    private announce;
+    private onKey;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-url-tabs': OxUrlTabs;
+    }
+}