@things-factory/apptool-ui 10.1.27 → 10.1.29

package/dist-client/index.d.ts

@@ -1,15 +1,30 @@
 import './layout/app-toolbar';
+import './layout/app-header-band';
 import './layout/app-busybar';
 import './layout/page-mdibar';
 import './layout/page-toolbar';
 import './mdibar-setting-let';
+export { setHeaderScope, getHeaderScope, subscribeHeaderScope } from './layout/header-scope';
+export type { HeaderScope } from './layout/header-band-model';
 export declare function setupAppToolPart(options?: {
+    /**
+     * Which header the app gets (ADR-0060 decision 4).
+     *
+     * `'toolbar'` is the shell's own bar. `'band'` is the one row plant, twin and figure each wrote
+     * for themselves; it reads the same tool registry, so lite-menu's hamburger and more-ui's
+     * morenda button reach it without either package knowing which one is drawing. `false` leaves
+     * the header to the app - which is what the three did, and what this option replaces.
+     */
+    header?: 'toolbar' | 'band' | false;
+    /** The app's own word, drawn after `operato`. The band owns the shape (ruling ① of the addendum). */
+    product?: string;
+    /** The older spelling of `header`. `header` wins when both are given. */
     toolbar?: boolean;
     busybar?: boolean;
     /** true = 등록만 하고 설정을 따른다. { default: true } = 저장된 값이 없을 때 켜진 상태로 시작한다. */
     mdibar?: boolean | {
         default: boolean;
     };
-    /** Removed (ADR-0060 decision 9): the page toolbar that holds the title bar is always there. */
-    pageToolbar?: never;
+    /** The page toolbar is where the page title bar is drawn. On by default (ADR-0060 decision 9). */
+    pageToolbar?: boolean;
 }): Promise<void>;

package/dist-client/index.js

@@ -1,4 +1,5 @@
 import './layout/app-toolbar';
+import './layout/app-header-band';
 import './layout/app-busybar';
 import './layout/page-mdibar';
 import './layout/page-toolbar';
@@ -8,12 +9,13 @@ import { store, clientSettingStore } from '@operato/shell';
 import { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout';
 import { isMobileDevice } from '@operato/utils';
 import { ADD_SETTING } from '@things-factory/setting-base/dist-client';
+import { resolveMdibarShow } from './mdibar-setting-state';
+export { setHeaderScope, getHeaderScope, subscribeHeaderScope } from './layout/header-scope';
 export async function setupAppToolPart(options = {}) {
-    const { toolbar = true, busybar = true, mdibar = true } = options;
-    if ('pageToolbar' in options) {
-        console.warn('setupAppToolPart: the `pageToolbar` option was removed (ADR-0060 decision 9) - the page toolbar is always registered, so the page title bar always has a place.');
-    }
-    if (toolbar) {
+    const { header, product, toolbar = true, busybar = true, mdibar = true, pageToolbar = true } = options;
+    /* `toolbar: false` meant "no header at all", which is how the three apps turned it off. */
+    const which = header !== undefined ? header : toolbar ? 'toolbar' : false;
+    if (which === 'toolbar') {
         appendViewpart({
             name: 'apptoolbar',
             viewpart: {
@@ -23,6 +25,18 @@ export async function setupAppToolPart(options = {}) {
             position: VIEWPART_POSITION.HEADERBAR
         });
     }
+    if (which === 'band') {
+        appendViewpart({
+            name: 'apptoolbar',
+            viewpart: {
+                show: true,
+                /* TOPMOST: the band replaces the toolbar rather than sitting under it, as the three did. */
+                level: VIEWPART_LEVEL.TOPMOST,
+                template: html ` <app-header-band .product=${product}></app-header-band> `
+            },
+            position: VIEWPART_POSITION.HEADERBAR
+        });
+    }
     if (busybar) {
         appendViewpart({
             name: 'appbusybar',
@@ -44,8 +58,7 @@ export async function setupAppToolPart(options = {}) {
          * 번 정하면 그 값이 이긴다.
          */
         const stored = ((await clientSettingStore.get('mdibar'))?.value || {}).show;
-        const fallback = typeof mdibar === 'object' && mdibar !== null ? !!mdibar.default : false;
-        const show = stored === undefined ? fallback : stored;
+        const show = resolveMdibarShow(stored, mdibar);
         appendViewpart({
             name: 'appmdibar',
             viewpart: {
@@ -64,16 +77,17 @@ export async function setupAppToolPart(options = {}) {
         });
     }
     /*
-     * Always: it is where the page title bar lives. Apps that left it off had no screen title at all
-     * (operato-twin's framework screens), or showed it in the app bar where search replaced it.
+     * On by default: it is where the page title bar lives. Apps that left it off had no screen title at
+     * all (operato-twin's framework screens), or showed it in the app bar where search replaced it.
      */
-    appendViewpart({
-        name: 'page-toolbar',
-        viewpart: {
-            show: true,
-            template: html ` <page-toolbar> </page-toolbar> `
-        },
-        position: VIEWPART_POSITION.PAGE_HEADERBAR
-    });
+    if (pageToolbar)
+        appendViewpart({
+            name: 'page-toolbar',
+            viewpart: {
+                show: true,
+                template: html ` <page-toolbar> </page-toolbar> `
+            },
+            position: VIEWPART_POSITION.PAGE_HEADERBAR
+        });
 }
 //# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAA;AAEtE,MAAM,CAAC,KAAK,UAAU,gBAAgB,CACpC,UAOI,EAAE;IAEN,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,CAAA;IACjE,IAAI,aAAa,IAAI,OAAO,EAAE,CAAC;QAC7B,OAAO,CAAC,IAAI,CACV,iKAAiK,CAClK,CAAA;IACH,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;QAChC;;;;;;;;WAQG;QACH,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;QAC3E,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;QAClG,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;QAErD,cAAc,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,IAAI;gBACJ,KAAK,EAAE,cAAc,CAAC,OAAO;gBAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,IAAI,CAAA,6CAA6C;aAC5D;SACF,CAAC,CAAA;IACJ,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC;QACb,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE;YACR,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAA,kCAAkC;SACjD;QACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;KAC3C,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import './layout/app-toolbar'\nimport './layout/app-busybar'\nimport './layout/page-mdibar'\nimport './layout/page-toolbar'\nimport './mdibar-setting-let'\n\nimport { html } from 'lit-html'\n\nimport { store, clientSettingStore } from '@operato/shell'\nimport { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { ADD_SETTING } from '@things-factory/setting-base/dist-client'\n\nexport async function setupAppToolPart(\n  options: {\n    toolbar?: boolean\n    busybar?: boolean\n    /** true = 등록만 하고 설정을 따른다. { default: true } = 저장된 값이 없을 때 켜진 상태로 시작한다. */\n    mdibar?: boolean | { default: boolean }\n    /** Removed (ADR-0060 decision 9): the page toolbar that holds the title bar is always there. */\n    pageToolbar?: never\n  } = {}\n) {\n  const { toolbar = true, busybar = true, mdibar = true } = options\n  if ('pageToolbar' in options) {\n    console.warn(\n      'setupAppToolPart: the `pageToolbar` option was removed (ADR-0060 decision 9) - the page toolbar is always registered, so the page title bar always has a place.'\n    )\n  }\n\n  if (toolbar) {\n    appendViewpart({\n      name: 'apptoolbar',\n      viewpart: {\n        show: true,\n        template: html` <app-toolbar></app-toolbar> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (busybar) {\n    appendViewpart({\n      name: 'appbusybar',\n      viewpart: {\n        show: true,\n        template: html` <app-busybar></app-busybar> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (mdibar && !isMobileDevice()) {\n    /*\n     * 저장된 값이 없으면 **앱이 정한 기본값**을 쓴다.\n     *\n     * 전에는 저장된 값만 봤고, 없으면 꺼진 것으로 다뤘다. 그래서 처음 들어온 사용자는 MDI 를 쓸 수\n     * 있다는 것 자체를 모른다 — 설정을 뒤져 찾아야 켤 수 있었다.\n     *\n     * `mdibar` 에 true 를 주면 예전과 같고, `{ default: true }` 를 주면 처음부터 켜진다. 사용자가 한\n     * 번 정하면 그 값이 이긴다.\n     */\n    const stored = ((await clientSettingStore.get('mdibar'))?.value || {}).show\n    const fallback = typeof mdibar === 'object' && mdibar !== null ? !!(mdibar as any).default : false\n    const show = stored === undefined ? fallback : stored\n\n    appendViewpart({\n      name: 'appmdibar',\n      viewpart: {\n        show,\n        level: VIEWPART_LEVEL.TOPMOST,\n        template: html` <page-mdibar></page-mdibar> `\n      },\n      position: VIEWPART_POSITION.PAGE_HEADERBAR\n    })\n\n    store.dispatch({\n      type: ADD_SETTING,\n      setting: {\n        seq: 21,\n        template: html` <mdibar-setting-let></mdibar-setting-let> `\n      }\n    })\n  }\n\n  /*\n   * Always: it is where the page title bar lives. Apps that left it off had no screen title at all\n   * (operato-twin's framework screens), or showed it in the app bar where search replaced it.\n   */\n  appendViewpart({\n    name: 'page-toolbar',\n    viewpart: {\n      show: true,\n      template: html` <page-toolbar> </page-toolbar> `\n    },\n    position: VIEWPART_POSITION.PAGE_HEADERBAR\n  })\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"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","sourcesContent":["import './layout/app-toolbar'\nimport './layout/app-header-band'\nimport './layout/app-busybar'\nimport './layout/page-mdibar'\nimport './layout/page-toolbar'\nimport './mdibar-setting-let'\n\nimport { html } from 'lit-html'\n\nimport { store, clientSettingStore } from '@operato/shell'\nimport { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { ADD_SETTING } from '@things-factory/setting-base/dist-client'\n\nimport { resolveMdibarShow } from './mdibar-setting-state'\n\nexport { setHeaderScope, getHeaderScope, subscribeHeaderScope } from './layout/header-scope'\nexport type { HeaderScope } from './layout/header-band-model'\n\nexport async function setupAppToolPart(\n  options: {\n    /**\n     * Which header the app gets (ADR-0060 decision 4).\n     *\n     * `'toolbar'` is the shell's own bar. `'band'` is the one row plant, twin and figure each wrote\n     * for themselves; it reads the same tool registry, so lite-menu's hamburger and more-ui's\n     * morenda button reach it without either package knowing which one is drawing. `false` leaves\n     * the header to the app - which is what the three did, and what this option replaces.\n     */\n    header?: 'toolbar' | 'band' | false\n    /** The app's own word, drawn after `operato`. The band owns the shape (ruling ① of the addendum). */\n    product?: string\n    /** The older spelling of `header`. `header` wins when both are given. */\n    toolbar?: boolean\n    busybar?: boolean\n    /** true = 등록만 하고 설정을 따른다. { default: true } = 저장된 값이 없을 때 켜진 상태로 시작한다. */\n    mdibar?: boolean | { default: boolean }\n    /** The page toolbar is where the page title bar is drawn. On by default (ADR-0060 decision 9). */\n    pageToolbar?: boolean\n  } = {}\n) {\n  const { header, product, toolbar = true, busybar = true, mdibar = true, pageToolbar = true } = options\n\n  /* `toolbar: false` meant \"no header at all\", which is how the three apps turned it off. */\n  const which = header !== undefined ? header : toolbar ? 'toolbar' : false\n\n  if (which === 'toolbar') {\n    appendViewpart({\n      name: 'apptoolbar',\n      viewpart: {\n        show: true,\n        template: html` <app-toolbar></app-toolbar> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (which === 'band') {\n    appendViewpart({\n      name: 'apptoolbar',\n      viewpart: {\n        show: true,\n        /* TOPMOST: the band replaces the toolbar rather than sitting under it, as the three did. */\n        level: VIEWPART_LEVEL.TOPMOST,\n        template: html` <app-header-band .product=${product}></app-header-band> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (busybar) {\n    appendViewpart({\n      name: 'appbusybar',\n      viewpart: {\n        show: true,\n        template: html` <app-busybar></app-busybar> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (mdibar && !isMobileDevice()) {\n    /*\n     * 저장된 값이 없으면 **앱이 정한 기본값**을 쓴다.\n     *\n     * 전에는 저장된 값만 봤고, 없으면 꺼진 것으로 다뤘다. 그래서 처음 들어온 사용자는 MDI 를 쓸 수\n     * 있다는 것 자체를 모른다 — 설정을 뒤져 찾아야 켤 수 있었다.\n     *\n     * `mdibar` 에 true 를 주면 예전과 같고, `{ default: true }` 를 주면 처음부터 켜진다. 사용자가 한\n     * 번 정하면 그 값이 이긴다.\n     */\n    const stored = ((await clientSettingStore.get('mdibar'))?.value || {}).show\n    const show = resolveMdibarShow(stored, mdibar)\n\n    appendViewpart({\n      name: 'appmdibar',\n      viewpart: {\n        show,\n        level: VIEWPART_LEVEL.TOPMOST,\n        template: html` <page-mdibar></page-mdibar> `\n      },\n      position: VIEWPART_POSITION.PAGE_HEADERBAR\n    })\n\n    store.dispatch({\n      type: ADD_SETTING,\n      setting: {\n        seq: 21,\n        template: html` <mdibar-setting-let></mdibar-setting-let> `\n      }\n    })\n  }\n\n  /*\n   * On by default: it is where the page title bar lives. Apps that left it off had no screen title at\n   * all (operato-twin's framework screens), or showed it in the app bar where search replaced it.\n   */\n  if (pageToolbar) appendViewpart({\n    name: 'page-toolbar',\n    viewpart: {\n      show: true,\n      template: html` <page-toolbar> </page-toolbar> `\n    },\n    position: VIEWPART_POSITION.PAGE_HEADERBAR\n  })\n}\n"]}

package/dist-client/layout/app-header-band.d.ts

@@ -0,0 +1,56 @@
+import '@material/web/icon/icon.js';
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The top header, one row — the shared copy of what plant, twin and figure each wrote.
+ *
+ * ADR-0060 decision 4 and its 2026-09-18 addendum. Three apps turned the app toolbar off and wrote
+ * their own row, 1,174 lines between them, and the three rows disagreed on the button border, the
+ * ask box radius, the icon set, where the unread count sits and which colour tokens to reach for.
+ * Two defects came out of that: twin's row had no way into the menu when the rail hid itself, and
+ * plant's ask box lost the last Korean syllable because it had not learned the guard twin already
+ * wrote. This is one row, so what one app learns is what every app has.
+ *
+ * ── What the band gives, and what stays the app's ─────────────────────────
+ * It draws the menu button (while the rail is hidden), the product name, the scope control and the
+ * notification bell. `CENTER` and `REAR` are the app's own: plant's ask box, twin's time scrubber
+ * and focus chip, figure's dock button. The app puts them there through the registry every module
+ * already uses.
+ *
+ * ── One registry, two renderers ───────────────────────────────────────────
+ * This reads `store.getState().apptool.tools`, the same list `app-toolbar` reads, and splits it by
+ * `TOOL_POSITION`. An app chooses which of the two draws it (`setupAppToolPart({ header })`). A
+ * second registry would make lite-menu's hamburger and more-ui's morenda button pick a side.
+ */
+export declare class AppHeaderBand extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** The app's one word. The band draws `operato` in front of it. */
+    product?: string;
+    private tools;
+    private menuPartShow;
+    private unread;
+    private scope?;
+    private unsubscribeStore?;
+    private unsubscribeScope?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    /**
+     * The way into the menu while the rail is hidden.
+     *
+     * lite-menu registers its own hamburger in the app toolbar, which an app running this band has
+     * turned off; if it did register one, `menuButtonShown` sees it and this is not drawn. The rail
+     * goes away on a mobile device in portrait or when the app asks for `hovering`, not at some
+     * window width.
+     */
+    private renderMenuButton;
+    /** What the app is showing. The list and the move are the app's; the shape is the band's. */
+    private renderScope;
+    /**
+     * Notifications arrive while you are somewhere else, so their count cannot live in a page.
+     *
+     * It opens the `notification` viewpart every sibling app registers. plant pressed this for a
+     * while with nothing behind it, because the app had drawn the count over a door it had never
+     * registered.
+     */
+    private renderBell;
+}

package/dist-client/layout/app-header-band.js

@@ -0,0 +1,336 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { toggleOverlay } from '@operato/layout';
+import { store } from '@operato/shell';
+import { menuButtonShown, scopeName, scopeShape, SLOT_ORDER, toolsBySlot, unreadLabel, wordmark } from './header-band-model';
+import { getHeaderScope, subscribeHeaderScope } from './header-scope';
+/**
+ * The top header, one row — the shared copy of what plant, twin and figure each wrote.
+ *
+ * ADR-0060 decision 4 and its 2026-09-18 addendum. Three apps turned the app toolbar off and wrote
+ * their own row, 1,174 lines between them, and the three rows disagreed on the button border, the
+ * ask box radius, the icon set, where the unread count sits and which colour tokens to reach for.
+ * Two defects came out of that: twin's row had no way into the menu when the rail hid itself, and
+ * plant's ask box lost the last Korean syllable because it had not learned the guard twin already
+ * wrote. This is one row, so what one app learns is what every app has.
+ *
+ * ── What the band gives, and what stays the app's ─────────────────────────
+ * It draws the menu button (while the rail is hidden), the product name, the scope control and the
+ * notification bell. `CENTER` and `REAR` are the app's own: plant's ask box, twin's time scrubber
+ * and focus chip, figure's dock button. The app puts them there through the registry every module
+ * already uses.
+ *
+ * ── One registry, two renderers ───────────────────────────────────────────
+ * This reads `store.getState().apptool.tools`, the same list `app-toolbar` reads, and splits it by
+ * `TOOL_POSITION`. An app chooses which of the two draws it (`setupAppToolPart({ header })`). A
+ * second registry would make lite-menu's hamburger and more-ui's morenda button pick a side.
+ */
+let AppHeaderBand = class AppHeaderBand extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tools = [];
+        this.menuPartShow = undefined;
+        this.unread = 0;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      .band {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 7px 14px;
+        box-sizing: border-box;
+        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* The product name, not the screen name — the screen names itself in the page title bar. */
+      .wordmark {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 5px;
+        white-space: nowrap;
+        font-size: 13px;
+        letter-spacing: 0.01em;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .wordmark b {
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      /* The gap that pushes what follows to the right end. */
+      .grow {
+        flex: 1;
+      }
+
+      /*
+       * One pill shape for everything that can be pressed. twin and figure already agreed on 28px
+       * and a 7px radius; plant drew a borderless 8px one. A 1px difference in radius is not worth
+       * arguing about, but a button with an edge and a button without one are two different things
+       * on one row.
+       */
+      .ctl {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        height: 28px;
+        min-width: 28px;
+        padding: 0 8px;
+        box-sizing: border-box;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 7px;
+        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: 12px;
+        cursor: pointer;
+      }
+
+      .ctl:hover {
+        border-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-primary);
+      }
+
+      .ctl:focus-visible {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: 2px;
+      }
+
+      .scope select {
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-weight: 600;
+        outline: none;
+      }
+
+      /* One scope draws its name, with nothing to press. */
+      .scope-name {
+        white-space: nowrap;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      md-icon {
+        font-size: 18px;
+        --md-icon-size: 18px;
+      }
+
+      /*
+       * The count sits **inside** the pill.
+       *
+       * twin hung it off the corner at -4px, where it lands on the button's own border; figure's
+       * comment records the same trouble with the notification module's badge, whose host sets
+       * font-size 2em and places its dot outside the box it is given.
+       */
+      .count {
+        min-width: 15px;
+        height: 15px;
+        padding: 0 4px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        background-color: var(--md-sys-color-error);
+        color: var(--md-sys-color-on-error);
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 15px;
+        text-align: center;
+      }
+
+      .slot {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 0;
+      }
+
+      /*
+       * A tool arrives from the registry as whatever it was written for.
+       *
+       * lite-menu's hamburger and more-ui's morenda button are a bare md-icon apiece, sized and
+       * spaced by the coloured app toolbar's own rules. Drawn here they came out as 18x18 marks with
+       * cursor auto next to this row's 28px pill buttons - measured on warehouse (:3500,
+       * 2026-09-18): they did not look like something you could press.
+       *
+       * Their templates render inside this shadow root, so the band can give them its own shape.
+       * The selector is a direct child of a slot, which is a tool; the band's own buttons keep their
+       * icons inside a .ctl and are not touched.
+       */
+      .slot > md-icon,
+      .slot > button:not(.ctl),
+      .slot > a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        height: 28px;
+        min-width: 28px;
+        padding: 0 8px;
+        box-sizing: border-box;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 7px;
+        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: 12px;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .slot > md-icon:hover,
+      .slot > button:not(.ctl):hover,
+      .slot > a:hover {
+        border-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-primary);
+      }
+
+      .slot > md-icon:focus-visible,
+      .slot > button:not(.ctl):focus-visible,
+      .slot > a:focus-visible {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: 2px;
+      }
+    `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        const read = () => {
+            const state = store.getState();
+            this.tools = state.apptool?.tools || [];
+            this.menuPartShow = state.layout?.viewparts?.['ox-menu-part']?.show;
+            this.unread = state.notification?.badge || 0;
+        };
+        read();
+        this.unsubscribeStore = store.subscribe(read);
+        this.scope = getHeaderScope();
+        this.unsubscribeScope = subscribeHeaderScope(() => (this.scope = getHeaderScope()));
+    }
+    disconnectedCallback() {
+        this.unsubscribeStore?.();
+        this.unsubscribeScope?.();
+        super.disconnectedCallback();
+    }
+    render() {
+        const [frontEnd, front, center, rear, rearEnd] = SLOT_ORDER.map(slot => toolsBySlot(this.tools)[slot]);
+        const mark = wordmark(this.product);
+        return html `
+      <div class="band">
+        <span class="slot">
+          ${menuButtonShown(this.menuPartShow, frontEnd) ? this.renderMenuButton() : nothing}
+          ${frontEnd.map(tool => tool.template)}
+        </span>
+
+        <span class="slot">
+          ${mark ? html `<span class="wordmark"><b>${mark.lead}</b>${mark.name}</span>` : nothing} ${this.renderScope()}
+          ${front.map(tool => tool.template)}
+        </span>
+
+        <span class="grow"></span>
+        <span class="slot">${center.map(tool => tool.template)}</span>
+        <span class="grow"></span>
+
+        <span class="slot">${rear.map(tool => tool.template)}</span>
+        <span class="slot">${rearEnd.map(tool => tool.template)} ${this.renderBell()}</span>
+      </div>
+    `;
+    }
+    /**
+     * The way into the menu while the rail is hidden.
+     *
+     * lite-menu registers its own hamburger in the app toolbar, which an app running this band has
+     * turned off; if it did register one, `menuButtonShown` sees it and this is not drawn. The rail
+     * goes away on a mobile device in portrait or when the app asks for `hovering`, not at some
+     * window width.
+     */
+    renderMenuButton() {
+        return html `
+      <button
+        class="ctl"
+        title=${i18next.t('label.menu', { defaultValue: 'menu' })}
+        @click=${() => toggleOverlay('ox-menu-part', { backdrop: true })}
+      >
+        <md-icon>view_headline</md-icon>
+      </button>
+    `;
+    }
+    /** What the app is showing. The list and the move are the app's; the shape is the band's. */
+    renderScope() {
+        const scope = this.scope;
+        switch (scopeShape(scope)) {
+            case 'none':
+                return nothing;
+            case 'name':
+                return html `<span class="scope-name" title=${scope.label}>${scopeName(scope)}</span>`;
+            case 'picker':
+                return html `
+          <span class="ctl scope" title=${scope.label}>
+            <select
+              aria-label=${scope.label}
+              @change=${(event) => scope.onSelect?.(event.target.value)}
+            >
+              ${(scope.items || []).map(item => html `<option value=${item.id} ?selected=${item.id === scope.selectedId}>${item.label}</option>`)}
+            </select>
+            <md-icon>expand_more</md-icon>
+          </span>
+        `;
+        }
+    }
+    /**
+     * Notifications arrive while you are somewhere else, so their count cannot live in a page.
+     *
+     * It opens the `notification` viewpart every sibling app registers. plant pressed this for a
+     * while with nothing behind it, because the app had drawn the count over a door it had never
+     * registered.
+     */
+    renderBell() {
+        const count = unreadLabel(this.unread);
+        return html `
+      <button
+        class="ctl"
+        title=${i18next.t('label.notification', { defaultValue: 'notifications' })}
+        @click=${() => toggleOverlay('notification', { backdrop: true })}
+      >
+        <md-icon>${count ? 'notifications' : 'notifications_none'}</md-icon>
+        ${count ? html `<span class="count">${count}</span>` : nothing}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AppHeaderBand.prototype, "product", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], AppHeaderBand.prototype, "tools", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AppHeaderBand.prototype, "menuPartShow", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AppHeaderBand.prototype, "unread", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AppHeaderBand.prototype, "scope", void 0);
+AppHeaderBand = __decorate([
+    customElement('app-header-band')
+], AppHeaderBand);
+export { AppHeaderBand };
+//# sourceMappingURL=app-header-band.js.map

package/dist-client/layout/app-header-band.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-header-band.js","sourceRoot":"","sources":["../../client/layout/app-header-band.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing, type TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\n\nimport {\n  menuButtonShown,\n  scopeName,\n  scopeShape,\n  SLOT_ORDER,\n  toolsBySlot,\n  unreadLabel,\n  wordmark,\n  type AppTool,\n  type HeaderScope\n} from './header-band-model'\nimport { getHeaderScope, subscribeHeaderScope } from './header-scope'\n\n/**\n * The top header, one row — the shared copy of what plant, twin and figure each wrote.\n *\n * ADR-0060 decision 4 and its 2026-09-18 addendum. Three apps turned the app toolbar off and wrote\n * their own row, 1,174 lines between them, and the three rows disagreed on the button border, the\n * ask box radius, the icon set, where the unread count sits and which colour tokens to reach for.\n * Two defects came out of that: twin's row had no way into the menu when the rail hid itself, and\n * plant's ask box lost the last Korean syllable because it had not learned the guard twin already\n * wrote. This is one row, so what one app learns is what every app has.\n *\n * ── What the band gives, and what stays the app's ─────────────────────────\n * It draws the menu button (while the rail is hidden), the product name, the scope control and the\n * notification bell. `CENTER` and `REAR` are the app's own: plant's ask box, twin's time scrubber\n * and focus chip, figure's dock button. The app puts them there through the registry every module\n * already uses.\n *\n * ── One registry, two renderers ───────────────────────────────────────────\n * This reads `store.getState().apptool.tools`, the same list `app-toolbar` reads, and splits it by\n * `TOOL_POSITION`. An app chooses which of the two draws it (`setupAppToolPart({ header })`). A\n * second registry would make lite-menu's hamburger and more-ui's morenda button pick a side.\n */\n@customElement('app-header-band')\nexport class AppHeaderBand extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      .band {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 7px 14px;\n        box-sizing: border-box;\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      /* The product name, not the screen name — the screen names itself in the page title bar. */\n      .wordmark {\n        display: inline-flex;\n        align-items: baseline;\n        gap: 5px;\n        white-space: nowrap;\n        font-size: 13px;\n        letter-spacing: 0.01em;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .wordmark b {\n        font-size: 14px;\n        font-weight: 700;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* The gap that pushes what follows to the right end. */\n      .grow {\n        flex: 1;\n      }\n\n      /*\n       * One pill shape for everything that can be pressed. twin and figure already agreed on 28px\n       * and a 7px radius; plant drew a borderless 8px one. A 1px difference in radius is not worth\n       * arguing about, but a button with an edge and a button without one are two different things\n       * on one row.\n       */\n      .ctl {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        height: 28px;\n        min-width: 28px;\n        padding: 0 8px;\n        box-sizing: border-box;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 7px;\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n        color: var(--md-sys-color-on-surface);\n        font: inherit;\n        font-size: 12px;\n        cursor: pointer;\n      }\n\n      .ctl:hover {\n        border-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-primary);\n      }\n\n      .ctl:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary);\n        outline-offset: 2px;\n      }\n\n      .scope select {\n        border: 0;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-weight: 600;\n        outline: none;\n      }\n\n      /* One scope draws its name, with nothing to press. */\n      .scope-name {\n        white-space: nowrap;\n        font-size: 12px;\n        font-weight: 600;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      md-icon {\n        font-size: 18px;\n        --md-icon-size: 18px;\n      }\n\n      /*\n       * The count sits **inside** the pill.\n       *\n       * twin hung it off the corner at -4px, where it lands on the button's own border; figure's\n       * comment records the same trouble with the notification module's badge, whose host sets\n       * font-size 2em and places its dot outside the box it is given.\n       */\n      .count {\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        box-sizing: border-box;\n        border-radius: 8px;\n        background-color: var(--md-sys-color-error);\n        color: var(--md-sys-color-on-error);\n        font-size: 10px;\n        font-weight: 700;\n        line-height: 15px;\n        text-align: center;\n      }\n\n      .slot {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        min-width: 0;\n      }\n\n      /*\n       * A tool arrives from the registry as whatever it was written for.\n       *\n       * lite-menu's hamburger and more-ui's morenda button are a bare md-icon apiece, sized and\n       * spaced by the coloured app toolbar's own rules. Drawn here they came out as 18x18 marks with\n       * cursor auto next to this row's 28px pill buttons - measured on warehouse (:3500,\n       * 2026-09-18): they did not look like something you could press.\n       *\n       * Their templates render inside this shadow root, so the band can give them its own shape.\n       * The selector is a direct child of a slot, which is a tool; the band's own buttons keep their\n       * icons inside a .ctl and are not touched.\n       */\n      .slot > md-icon,\n      .slot > button:not(.ctl),\n      .slot > a {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        height: 28px;\n        min-width: 28px;\n        padding: 0 8px;\n        box-sizing: border-box;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 7px;\n        background-color: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));\n        color: var(--md-sys-color-on-surface);\n        font: inherit;\n        font-size: 12px;\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .slot > md-icon:hover,\n      .slot > button:not(.ctl):hover,\n      .slot > a:hover {\n        border-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-primary);\n      }\n\n      .slot > md-icon:focus-visible,\n      .slot > button:not(.ctl):focus-visible,\n      .slot > a:focus-visible {\n        outline: 2px solid var(--md-sys-color-primary);\n        outline-offset: 2px;\n      }\n    `\n  ]\n\n  /** The app's one word. The band draws `operato` in front of it. */\n  @property({ type: String }) product?: string\n\n  @state() private tools: AppTool[] = []\n  @state() private menuPartShow: boolean | undefined = undefined\n  @state() private unread = 0\n  @state() private scope?: HeaderScope\n\n  private unsubscribeStore?: () => void\n  private unsubscribeScope?: () => void\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const read = () => {\n      const state = store.getState() as any\n      this.tools = state.apptool?.tools || []\n      this.menuPartShow = state.layout?.viewparts?.['ox-menu-part']?.show\n      this.unread = state.notification?.badge || 0\n    }\n\n    read()\n    this.unsubscribeStore = store.subscribe(read)\n    this.scope = getHeaderScope()\n    this.unsubscribeScope = subscribeHeaderScope(() => (this.scope = getHeaderScope()))\n  }\n\n  disconnectedCallback() {\n    this.unsubscribeStore?.()\n    this.unsubscribeScope?.()\n    super.disconnectedCallback()\n  }\n\n  render(): TemplateResult {\n    const [frontEnd, front, center, rear, rearEnd] = SLOT_ORDER.map(slot => toolsBySlot(this.tools)[slot])\n    const mark = wordmark(this.product)\n\n    return html`\n      <div class=\"band\">\n        <span class=\"slot\">\n          ${menuButtonShown(this.menuPartShow, frontEnd) ? this.renderMenuButton() : nothing}\n          ${frontEnd.map(tool => tool.template)}\n        </span>\n\n        <span class=\"slot\">\n          ${mark ? html`<span class=\"wordmark\"><b>${mark.lead}</b>${mark.name}</span>` : nothing} ${this.renderScope()}\n          ${front.map(tool => tool.template)}\n        </span>\n\n        <span class=\"grow\"></span>\n        <span class=\"slot\">${center.map(tool => tool.template)}</span>\n        <span class=\"grow\"></span>\n\n        <span class=\"slot\">${rear.map(tool => tool.template)}</span>\n        <span class=\"slot\">${rearEnd.map(tool => tool.template)} ${this.renderBell()}</span>\n      </div>\n    `\n  }\n\n  /**\n   * The way into the menu while the rail is hidden.\n   *\n   * lite-menu registers its own hamburger in the app toolbar, which an app running this band has\n   * turned off; if it did register one, `menuButtonShown` sees it and this is not drawn. The rail\n   * goes away on a mobile device in portrait or when the app asks for `hovering`, not at some\n   * window width.\n   */\n  private renderMenuButton(): TemplateResult {\n    return html`\n      <button\n        class=\"ctl\"\n        title=${i18next.t('label.menu', { defaultValue: 'menu' })}\n        @click=${() => toggleOverlay('ox-menu-part', { backdrop: true })}\n      >\n        <md-icon>view_headline</md-icon>\n      </button>\n    `\n  }\n\n  /** What the app is showing. The list and the move are the app's; the shape is the band's. */\n  private renderScope() {\n    const scope = this.scope\n\n    switch (scopeShape(scope)) {\n      case 'none':\n        return nothing\n\n      case 'name':\n        return html`<span class=\"scope-name\" title=${scope!.label}>${scopeName(scope)}</span>`\n\n      case 'picker':\n        return html`\n          <span class=\"ctl scope\" title=${scope!.label}>\n            <select\n              aria-label=${scope!.label}\n              @change=${(event: Event) => scope!.onSelect?.((event.target as HTMLSelectElement).value)}\n            >\n              ${(scope!.items || []).map(\n                item => html`<option value=${item.id} ?selected=${item.id === scope!.selectedId}>${item.label}</option>`\n              )}\n            </select>\n            <md-icon>expand_more</md-icon>\n          </span>\n        `\n    }\n  }\n\n  /**\n   * Notifications arrive while you are somewhere else, so their count cannot live in a page.\n   *\n   * It opens the `notification` viewpart every sibling app registers. plant pressed this for a\n   * while with nothing behind it, because the app had drawn the count over a door it had never\n   * registered.\n   */\n  private renderBell(): TemplateResult {\n    const count = unreadLabel(this.unread)\n\n    return html`\n      <button\n        class=\"ctl\"\n        title=${i18next.t('label.notification', { defaultValue: 'notifications' })}\n        @click=${() => toggleOverlay('notification', { backdrop: true })}\n      >\n        <md-icon>${count ? 'notifications' : 'notifications_none'}</md-icon>\n        ${count ? html`<span class=\"count\">${count}</span>` : nothing}\n      </button>\n    `\n  }\n}\n"]}