@operato/layout 10.29.46 → 10.29.50

package/dist/src/components/ox-id-lens.js

@@ -0,0 +1,362 @@
+import { __decorate } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-barcode.js';
+import '@operato/popup/ox-popup-actions.js';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { askIdLensDoors, idLensHitToOpen, lookupText } from '../actions/id-lens.js';
+import { entity360KindRegistered, openEntity360Kind } from '../actions/entity360-registry.js';
+import { openPopup } from '../actions/layout.js';
+/**
+ * The ID Lens - type or scan an identifier in the band, and its Entity 360 opens (ADR-0133).
+ *
+ * The product gives the doors (`.doors`, one per kind of identifier it keeps) and what the field says
+ * (`placeholder`). Everything about a kind - its name, its rules, who may read it, its states - is the product's;
+ * the lens only asks, folds and opens.
+ *
+ * Input is `ox-input-barcode`: typing, a keyboard scanner, or the camera. Nothing listens to the whole page - a
+ * scanner reaches the lens only while its field has focus, so a page's own scan listener never races it.
+ */
+let OxIdLens = class OxIdLens extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** One door per kind of identifier the product keeps. */
+        this.doors = [];
+        /**
+         * What the field says before anything is typed - the product names its own kinds. A function is read at each render,
+         * so a band registered once still follows the language.
+         */
+        this.placeholder = '';
+        this.busy = false;
+        this.said = '';
+        /**
+         * `ox-input-barcode` says `change` on Enter, after a camera scan, and also when the field loses focus with
+         * new text. Only the first two are a request to look - leaving the field is not. After Enter or a scan the
+         * focus is still in the lens; after a blur it has gone elsewhere.
+         */
+        this.committed = () => {
+            setTimeout(() => {
+                if (this.matches(':focus-within'))
+                    this.find();
+            });
+        };
+    }
+    render() {
+        const find = i18next.t('button.find', { defaultValue: 'find' });
+        const scan = i18next.t('button.scan', { defaultValue: 'scan' });
+        return html `
+      <span class="lens" role="search">
+        <button type="button" class="find" aria-label=${find} title=${find} @click=${() => this.find()}>
+          <md-icon aria-hidden="true">search</md-icon>
+        </button>
+        <button type="button" class="scan" aria-label=${scan} title=${scan} @click=${() => { var _a, _b; return (_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.focus(); }}>
+          <md-icon aria-hidden="true">qr_code_scanner</md-icon>
+        </button>
+        <ox-input-barcode placeholder=${typeof this.placeholder === 'function' ? this.placeholder() : this.placeholder} @change=${this.committed}></ox-input-barcode>
+      </span>
+      <span class="live" role="status" aria-live="polite">${this.said}</span>
+    `;
+    }
+    async find() {
+        var _a;
+        const text = lookupText((_a = this.field) === null || _a === void 0 ? void 0 : _a.value);
+        if (!text || this.busy)
+            return;
+        this.busy = true;
+        this.said = i18next.t('text.id-lens-searching', { defaultValue: 'searching' });
+        try {
+            const outcome = await askIdLensDoors(this.doors, text);
+            this.said = '';
+            this.show(outcome);
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    show(outcome) {
+        const back = () => { var _a, _b; return (_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.focus(); };
+        const open = idLensHitToOpen(outcome, entity360KindRegistered);
+        if (open) {
+            openEntity360Kind(open.kind, { id: open.id, name: open.name }, back);
+            return;
+        }
+        const popup = openPopup(html `<ox-id-lens-results
+        .outcome=${outcome}
+        .doors=${this.doors}
+        .onPick=${(hit) => {
+            var _a, _b;
+            (_a = popup === null || popup === void 0 ? void 0 : popup.close) === null || _a === void 0 ? void 0 : _a.call(popup);
+            if (entity360KindRegistered(hit.kind))
+                openEntity360Kind(hit.kind, { id: hit.id, name: hit.name }, back);
+            else
+                (_b = hit.open) === null || _b === void 0 ? void 0 : _b.call(hit);
+        }}
+        .onRetry=${() => {
+            var _a;
+            (_a = popup === null || popup === void 0 ? void 0 : popup.close) === null || _a === void 0 ? void 0 : _a.call(popup);
+            this.find();
+        }}
+        .onClose=${() => {
+            var _a;
+            (_a = popup === null || popup === void 0 ? void 0 : popup.close) === null || _a === void 0 ? void 0 : _a.call(popup);
+            back();
+        }}
+      ></ox-id-lens-results>`, { backdrop: true, size: 'small', title: i18next.t('title.id-lens', { defaultValue: 'find by number' }) });
+    }
+};
+OxIdLens.styles = [
+    css `
+      :host {
+        display: inline-flex;
+        min-width: 0;
+      }
+
+      /*
+        A pill in the band. The width is set here: the barcode field's input asks for none (width 10px by design), so a
+        flex basis alone would shrink the pill to its minimum. 320px holds a long identifier at 12px; the band can
+        still narrow it.
+      */
+      .lens {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        width: 320px;
+        max-width: 100%;
+        box-sizing: border-box;
+        min-width: 120px;
+        padding: 3px 10px;
+        background: var(--md-sys-color-surface-container);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999px;
+      }
+
+      .lens:focus-within {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: 2px;
+      }
+
+      /*
+        The pill is the field's outline: the component's own border, fill and form height would draw a taller box
+        inside it. 20px keeps the pill at the band's 28px.
+      */
+      ox-input-barcode {
+        flex: 1;
+        min-width: 0;
+        height: 20px;
+        --ox-input-border: none;
+        --ox-input-background: transparent;
+        --ox-input-color: var(--md-sys-color-on-surface);
+        --md-sys-typescale-label-large-size: 12px;
+        /*
+          The camera button's barcode at the front mark's height: its bars fill 22 of the PNG's 24px, the 17px symbol's
+          glyph is about 14px - so 15px tall.
+        */
+        --barcodescan-input-button-icon-size: auto 15px;
+        --barcodescan-input-button-width: 20px;
+      }
+
+      /*
+        One leading mark, chosen by whether the field found a camera. With one, the field draws its own camera button at
+        the end, so the front is the magnifier that finds. Without one, the front is the QR mark - it says a number is
+        scanned here and puts the cursor in the field for a keyboard scanner.
+      */
+      .lens:has(> ox-input-barcode[scannable]) .scan,
+      .lens:not(:has(> ox-input-barcode[scannable])) .find {
+        display: none;
+      }
+
+      button {
+        display: inline-flex;
+        flex: none;
+        padding: 0;
+        border: none;
+        background: none;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+      }
+
+      button:hover {
+        color: var(--md-sys-color-on-surface);
+      }
+
+      md-icon {
+        --md-icon-size: 17px;
+      }
+
+      .live {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+    `
+];
+__decorate([
+    property({ attribute: false })
+], OxIdLens.prototype, "doors", void 0);
+__decorate([
+    property({ attribute: false })
+], OxIdLens.prototype, "placeholder", void 0);
+__decorate([
+    state()
+], OxIdLens.prototype, "said", void 0);
+__decorate([
+    query('ox-input-barcode')
+], OxIdLens.prototype, "field", void 0);
+OxIdLens = __decorate([
+    customElement('ox-id-lens')
+], OxIdLens);
+export { OxIdLens };
+/**
+ * What a look-up found when it cannot just open one 360: several hits to choose from, none, or a door that
+ * did not answer. The first hit is never picked for the person (ADR-0133 2-2).
+ */
+let OxIdLensResults = class OxIdLensResults extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.doors = [];
+    }
+    render() {
+        const outcome = this.outcome;
+        if (!outcome)
+            return html ``;
+        return html `
+      ${outcome.hits.length
+            ? html `<p>${i18next.t('text.id-lens-choose', { value: outcome.text, count: outcome.hits.length, defaultValue: '{count} matches for {value} - choose one' })}</p>
+            <ul>
+              ${outcome.hits.map(hit => html `<li>${this.hit(hit)}</li>`)}
+            </ul>`
+            : html `<p>${i18next.t('text.id-lens-none', { value: outcome.text, defaultValue: 'Nothing is numbered {value}.' })}</p>`}
+      ${outcome.forbidden.length
+            ? html `<p class="sub">
+            ${i18next.t('text.id-lens-forbidden', {
+                kinds: outcome.forbidden.map(kind => this.kindText(kind)).join(', '),
+                defaultValue: 'Not searched - you may not view: {kinds}'
+            })}
+          </p>`
+            : nothing}
+      ${outcome.failed.map(one => html `<p class="failed">
+            ${i18next.t('text.id-lens-failed', { kind: this.kindText(one.kind), defaultValue: 'Could not read {kind}' })}${one.message ? ` - ${one.message}` : ''}
+          </p>`)}
+
+      <ox-popup-actions>
+        ${outcome.failed.length
+            ? html `<md-text-button slot="cancel" @click=${() => { var _a; return (_a = this.onRetry) === null || _a === void 0 ? void 0 : _a.call(this); }}>${i18next.t('button.retry', { defaultValue: 'retry' })}</md-text-button>`
+            : nothing}
+        <md-filled-button slot="confirm" @click=${() => { var _a; return (_a = this.onClose) === null || _a === void 0 ? void 0 : _a.call(this); }}>${i18next.t('button.close', { defaultValue: 'close' })}</md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+    /** The product's word for a kind; the kind name itself only when no door names it. */
+    kindText(kind) {
+        var _a, _b;
+        return (_b = (_a = this.doors.find(door => door.kind === kind)) === null || _a === void 0 ? void 0 : _a.label()) !== null && _b !== void 0 ? _b : kind;
+    }
+    hit(hit) {
+        var _a;
+        const body = html `<span class="kind">${this.kindText(hit.kind)}</span>
+      <span class="name">${hit.name}</span>
+      <span class="kind">${(_a = hit.status) !== null && _a !== void 0 ? _a : ''}</span>
+      ${hit.context ? html `<span class="sub">${hit.context}</span>` : nothing}`;
+        /*
+         * A kind with a 360 opens it; one without opens the work screen its product named. A kind with neither is not a
+         * dead link - it says so and stays text (ADR-0067).
+         */
+        return entity360KindRegistered(hit.kind) || hit.open
+            ? html `<button type="button" class="hit" @click=${() => { var _a; return (_a = this.onPick) === null || _a === void 0 ? void 0 : _a.call(this, hit); }}>${body}</button>`
+            : html `<div class="hit">${body}<span class="sub">${i18next.t('text.entity360-not-yet', { defaultValue: 'there is no 360 for this kind yet.' })}</span></div>`;
+    }
+};
+OxIdLensResults.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px;
+        font: 14px/1.5 sans-serif;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .hit {
+        display: grid;
+        grid-template-columns: max-content 1fr max-content;
+        align-items: baseline;
+        gap: 2px 10px;
+        width: 100%;
+        padding: 8px 10px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
+      }
+
+      button.hit {
+        cursor: pointer;
+      }
+
+      button.hit:hover,
+      button.hit:focus-visible {
+        background: var(--md-sys-color-surface-container-high);
+      }
+
+      .kind,
+      .sub {
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 12px;
+      }
+
+      .name {
+        overflow-wrap: anywhere;
+        font-weight: 600;
+      }
+
+      .sub {
+        grid-column: 2 / -1;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      .failed {
+        color: var(--md-sys-color-error);
+      }
+    `
+];
+__decorate([
+    property({ attribute: false })
+], OxIdLensResults.prototype, "outcome", void 0);
+__decorate([
+    property({ attribute: false })
+], OxIdLensResults.prototype, "doors", void 0);
+__decorate([
+    property({ attribute: false })
+], OxIdLensResults.prototype, "onPick", void 0);
+__decorate([
+    property({ attribute: false })
+], OxIdLensResults.prototype, "onRetry", void 0);
+__decorate([
+    property({ attribute: false })
+], OxIdLensResults.prototype, "onClose", void 0);
+OxIdLensResults = __decorate([
+    customElement('ox-id-lens-results')
+], OxIdLensResults);
+export { OxIdLensResults };
+//# sourceMappingURL=ox-id-lens.js.map

package/dist/src/components/ox-id-lens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-id-lens.js","sourceRoot":"","sources":["../../../src/components/ox-id-lens.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-barcode.js'\nimport '@operato/popup/ox-popup-actions.js'\n\nimport { LitElement, css, html, nothing, type TemplateResult } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { askIdLensDoors, idLensHitToOpen, lookupText, type IdLensDoor, type IdLensHit, type IdLensOutcome } from '../actions/id-lens.js'\nimport { entity360KindRegistered, openEntity360Kind } from '../actions/entity360-registry.js'\nimport { openPopup } from '../actions/layout.js'\n\n/**\n * The ID Lens - type or scan an identifier in the band, and its Entity 360 opens (ADR-0133).\n *\n * The product gives the doors (`.doors`, one per kind of identifier it keeps) and what the field says\n * (`placeholder`). Everything about a kind - its name, its rules, who may read it, its states - is the product's;\n * the lens only asks, folds and opens.\n *\n * Input is `ox-input-barcode`: typing, a keyboard scanner, or the camera. Nothing listens to the whole page - a\n * scanner reaches the lens only while its field has focus, so a page's own scan listener never races it.\n */\n@customElement('ox-id-lens')\nexport class OxIdLens extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: inline-flex;\n        min-width: 0;\n      }\n\n      /*\n        A pill in the band. The width is set here: the barcode field's input asks for none (width 10px by design), so a\n        flex basis alone would shrink the pill to its minimum. 320px holds a long identifier at 12px; the band can\n        still narrow it.\n      */\n      .lens {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        width: 320px;\n        max-width: 100%;\n        box-sizing: border-box;\n        min-width: 120px;\n        padding: 3px 10px;\n        background: var(--md-sys-color-surface-container);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 999px;\n      }\n\n      .lens:focus-within {\n        outline: 2px solid var(--md-sys-color-primary);\n        outline-offset: 2px;\n      }\n\n      /*\n        The pill is the field's outline: the component's own border, fill and form height would draw a taller box\n        inside it. 20px keeps the pill at the band's 28px.\n      */\n      ox-input-barcode {\n        flex: 1;\n        min-width: 0;\n        height: 20px;\n        --ox-input-border: none;\n        --ox-input-background: transparent;\n        --ox-input-color: var(--md-sys-color-on-surface);\n        --md-sys-typescale-label-large-size: 12px;\n        /*\n          The camera button's barcode at the front mark's height: its bars fill 22 of the PNG's 24px, the 17px symbol's\n          glyph is about 14px - so 15px tall.\n        */\n        --barcodescan-input-button-icon-size: auto 15px;\n        --barcodescan-input-button-width: 20px;\n      }\n\n      /*\n        One leading mark, chosen by whether the field found a camera. With one, the field draws its own camera button at\n        the end, so the front is the magnifier that finds. Without one, the front is the QR mark - it says a number is\n        scanned here and puts the cursor in the field for a keyboard scanner.\n      */\n      .lens:has(> ox-input-barcode[scannable]) .scan,\n      .lens:not(:has(> ox-input-barcode[scannable])) .find {\n        display: none;\n      }\n\n      button {\n        display: inline-flex;\n        flex: none;\n        padding: 0;\n        border: none;\n        background: none;\n        color: var(--md-sys-color-on-surface-variant);\n        cursor: pointer;\n      }\n\n      button:hover {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      md-icon {\n        --md-icon-size: 17px;\n      }\n\n      .live {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n    `\n  ]\n\n  /** One door per kind of identifier the product keeps. */\n  @property({ attribute: false }) doors: IdLensDoor[] = []\n  /**\n   * What the field says before anything is typed - the product names its own kinds. A function is read at each render,\n   * so a band registered once still follows the language.\n   */\n  @property({ attribute: false }) placeholder: string | (() => string) = ''\n\n  private busy = false\n  @state() private said = ''\n  @query('ox-input-barcode') private field?: HTMLElement & { value?: string; input?: HTMLInputElement }\n\n  render(): TemplateResult {\n    const find = i18next.t('button.find', { defaultValue: 'find' })\n    const scan = i18next.t('button.scan', { defaultValue: 'scan' })\n\n    return html`\n      <span class=\"lens\" role=\"search\">\n        <button type=\"button\" class=\"find\" aria-label=${find} title=${find} @click=${() => this.find()}>\n          <md-icon aria-hidden=\"true\">search</md-icon>\n        </button>\n        <button type=\"button\" class=\"scan\" aria-label=${scan} title=${scan} @click=${() => this.field?.input?.focus()}>\n          <md-icon aria-hidden=\"true\">qr_code_scanner</md-icon>\n        </button>\n        <ox-input-barcode placeholder=${typeof this.placeholder === 'function' ? this.placeholder() : this.placeholder} @change=${this.committed}></ox-input-barcode>\n      </span>\n      <span class=\"live\" role=\"status\" aria-live=\"polite\">${this.said}</span>\n    `\n  }\n\n  /**\n   * `ox-input-barcode` says `change` on Enter, after a camera scan, and also when the field loses focus with\n   * new text. Only the first two are a request to look - leaving the field is not. After Enter or a scan the\n   * focus is still in the lens; after a blur it has gone elsewhere.\n   */\n  private committed = () => {\n    setTimeout(() => {\n      if (this.matches(':focus-within')) this.find()\n    })\n  }\n\n  private async find() {\n    const text = lookupText(this.field?.value)\n    if (!text || this.busy) return\n\n    this.busy = true\n    this.said = i18next.t('text.id-lens-searching', { defaultValue: 'searching' })\n\n    try {\n      const outcome = await askIdLensDoors(this.doors, text)\n      this.said = ''\n      this.show(outcome)\n    } finally {\n      this.busy = false\n    }\n  }\n\n  private show(outcome: IdLensOutcome) {\n    const back = () => this.field?.input?.focus()\n    const open = idLensHitToOpen(outcome, entity360KindRegistered)\n\n    if (open) {\n      openEntity360Kind(open.kind, { id: open.id, name: open.name }, back)\n      return\n    }\n\n    const popup: any = openPopup(\n      html`<ox-id-lens-results\n        .outcome=${outcome}\n        .doors=${this.doors}\n        .onPick=${(hit: IdLensHit) => {\n          popup?.close?.()\n          if (entity360KindRegistered(hit.kind)) openEntity360Kind(hit.kind, { id: hit.id, name: hit.name }, back)\n          else hit.open?.()\n        }}\n        .onRetry=${() => {\n          popup?.close?.()\n          this.find()\n        }}\n        .onClose=${() => {\n          popup?.close?.()\n          back()\n        }}\n      ></ox-id-lens-results>`,\n      { backdrop: true, size: 'small', title: i18next.t('title.id-lens', { defaultValue: 'find by number' }) }\n    )\n  }\n}\n\n/**\n * What a look-up found when it cannot just open one 360: several hits to choose from, none, or a door that\n * did not answer. The first hit is never picked for the person (ADR-0133 2-2).\n */\n@customElement('ox-id-lens-results')\nexport class OxIdLensResults extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        padding: 16px;\n        font: 14px/1.5 sans-serif;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      .hit {\n        display: grid;\n        grid-template-columns: max-content 1fr max-content;\n        align-items: baseline;\n        gap: 2px 10px;\n        width: 100%;\n        padding: 8px 10px;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 8px;\n        background: none;\n        color: inherit;\n        font: inherit;\n        text-align: start;\n      }\n\n      button.hit {\n        cursor: pointer;\n      }\n\n      button.hit:hover,\n      button.hit:focus-visible {\n        background: var(--md-sys-color-surface-container-high);\n      }\n\n      .kind,\n      .sub {\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 12px;\n      }\n\n      .name {\n        overflow-wrap: anywhere;\n        font-weight: 600;\n      }\n\n      .sub {\n        grid-column: 2 / -1;\n      }\n\n      p {\n        margin: 0;\n      }\n\n      .failed {\n        color: var(--md-sys-color-error);\n      }\n    `\n  ]\n\n  @property({ attribute: false }) outcome?: IdLensOutcome\n  @property({ attribute: false }) doors: IdLensDoor[] = []\n  @property({ attribute: false }) onPick?: (hit: IdLensHit) => void\n  @property({ attribute: false }) onRetry?: () => void\n  @property({ attribute: false }) onClose?: () => void\n\n  render(): TemplateResult {\n    const outcome = this.outcome\n    if (!outcome) return html``\n\n    return html`\n      ${outcome.hits.length\n        ? html`<p>${i18next.t('text.id-lens-choose', { value: outcome.text, count: outcome.hits.length, defaultValue: '{count} matches for {value} - choose one' })}</p>\n            <ul>\n              ${outcome.hits.map(hit => html`<li>${this.hit(hit)}</li>`)}\n            </ul>`\n        : html`<p>${i18next.t('text.id-lens-none', { value: outcome.text, defaultValue: 'Nothing is numbered {value}.' })}</p>`}\n      ${outcome.forbidden.length\n        ? html`<p class=\"sub\">\n            ${i18next.t('text.id-lens-forbidden', {\n              kinds: outcome.forbidden.map(kind => this.kindText(kind)).join(', '),\n              defaultValue: 'Not searched - you may not view: {kinds}'\n            })}\n          </p>`\n        : nothing}\n      ${outcome.failed.map(\n        one =>\n          html`<p class=\"failed\">\n            ${i18next.t('text.id-lens-failed', { kind: this.kindText(one.kind), defaultValue: 'Could not read {kind}' })}${one.message ? ` - ${one.message}` : ''}\n          </p>`\n      )}\n\n      <ox-popup-actions>\n        ${outcome.failed.length\n          ? html`<md-text-button slot=\"cancel\" @click=${() => this.onRetry?.()}>${i18next.t('button.retry', { defaultValue: 'retry' })}</md-text-button>`\n          : nothing}\n        <md-filled-button slot=\"confirm\" @click=${() => this.onClose?.()}>${i18next.t('button.close', { defaultValue: 'close' })}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  /** The product's word for a kind; the kind name itself only when no door names it. */\n  private kindText(kind: string): string {\n    return this.doors.find(door => door.kind === kind)?.label() ?? kind\n  }\n\n  private hit(hit: IdLensHit): TemplateResult {\n    const body = html`<span class=\"kind\">${this.kindText(hit.kind)}</span>\n      <span class=\"name\">${hit.name}</span>\n      <span class=\"kind\">${hit.status ?? ''}</span>\n      ${hit.context ? html`<span class=\"sub\">${hit.context}</span>` : nothing}`\n\n    /*\n     * A kind with a 360 opens it; one without opens the work screen its product named. A kind with neither is not a\n     * dead link - it says so and stays text (ADR-0067).\n     */\n    return entity360KindRegistered(hit.kind) || hit.open\n      ? html`<button type=\"button\" class=\"hit\" @click=${() => this.onPick?.(hit)}>${body}</button>`\n      : html`<div class=\"hit\">${body}<span class=\"sub\">${i18next.t('text.entity360-not-yet', { defaultValue: 'there is no 360 for this kind yet.' })}</span></div>`\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -18,4 +18,5 @@ export * from './actions/entity360.js';
 export * from './actions/entity360-registry.js';
 export * from './actions/entity360-door.js';
 export * from './actions/entity360-name.js';
+export * from './actions/id-lens.js';
 export * from './components/ox-entity360-section.js';

package/dist/src/index.js

@@ -17,5 +17,6 @@ export * from './actions/entity360.js';
 export * from './actions/entity360-registry.js';
 export * from './actions/entity360-door.js';
 export * from './actions/entity360-name.js';
+export * from './actions/id-lens.js';
 export * from './components/ox-entity360-section.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AAIzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAE/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA","sourcesContent":["import './initializer.js'\n\nexport type { PopupHandle, PopupOptions } from '@operato/popup'\n\nexport * from './layouts/ox-snack-bar.js'\nexport * from './layouts/ox-header-bar.js'\nexport * from './layouts/ox-nav-bar.js'\nexport * from './layouts/ox-aside-bar.js'\nexport * from './layouts/ox-footer-bar.js'\nexport * from './layouts/ox-page-header-bar.js'\nexport * from './layouts/ox-page-footer-bar.js'\n\nexport * from './actions/layout.js'\nexport * from './actions/snackbar.js'\n\nexport * from './components/ox-split-pane.js'\nexport * from './components/ox-entity360-dock.js'\nexport * from './components/ox-three-pane.js'\nexport * from './components/ox-canvas-bar.js'\nexport * from './components/ox-url-tabs.js'\nexport * from './actions/entity360.js'\nexport * from './actions/entity360-registry.js'\nexport * from './actions/entity360-door.js'\nexport * from './actions/entity360-name.js'\nexport * from './components/ox-entity360-section.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AAIzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAE/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,sCAAsC,CAAA","sourcesContent":["import './initializer.js'\n\nexport type { PopupHandle, PopupOptions } from '@operato/popup'\n\nexport * from './layouts/ox-snack-bar.js'\nexport * from './layouts/ox-header-bar.js'\nexport * from './layouts/ox-nav-bar.js'\nexport * from './layouts/ox-aside-bar.js'\nexport * from './layouts/ox-footer-bar.js'\nexport * from './layouts/ox-page-header-bar.js'\nexport * from './layouts/ox-page-footer-bar.js'\n\nexport * from './actions/layout.js'\nexport * from './actions/snackbar.js'\n\nexport * from './components/ox-split-pane.js'\nexport * from './components/ox-entity360-dock.js'\nexport * from './components/ox-three-pane.js'\nexport * from './components/ox-canvas-bar.js'\nexport * from './components/ox-url-tabs.js'\nexport * from './actions/entity360.js'\nexport * from './actions/entity360-registry.js'\nexport * from './actions/entity360-door.js'\nexport * from './actions/entity360-name.js'\nexport * from './actions/id-lens.js'\nexport * from './components/ox-entity360-section.js'\n"]}

package/dist/src/layouts/ox-aside-bar.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
 import '@operato/popup/ox-floating-overlay.js';
 import '../components/ox-resize-splitter.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { LayoutController } from '@operato/shell';
-import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+import { ButtonStyles, ScrollbarStyles } from '@operato/styles';
 import { VIEWPART_LEVEL } from '../actions/layout.js';
 let AsideBar = class AsideBar extends LitElement {
     constructor() {
@@ -13,8 +14,92 @@ let AsideBar = class AsideBar extends LitElement {
         this._layout = new LayoutController(this);
         this.fullbleed = false;
         this._startWidth = 0;
+        this.pane = 'main';
+        this.compact = matchMedia('(max-width: 1023.98px)').matches;
+        this.media = matchMedia('(max-width: 1023.98px)');
+        this.shared = false;
+        this.revealCompanion = false;
+        this.onPresentation = (event) => {
+            this.expandedDock = event.composedPath()[0];
+            this.requestUpdate();
+        };
+        this.onMedia = () => { this.compact = this.media.matches; };
+        this.onFocus = (event) => {
+            if (!this.shared)
+                return;
+            const path = event.composedPath();
+            if (path.some(one => { var _a, _b; return (_b = (_a = one).hasAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'workspace-companion'); }))
+                this.pane = 'companion';
+            else if (path.some(one => { var _a, _b; return (_b = (_a = one).hasAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'workspace-main'); }))
+                this.pane = 'main';
+        };
+        this.onKey = (event) => {
+            var _a, _b, _c;
+            if (!this.shared || event.defaultPrevented)
+                return;
+            // An actual overlay above the workspace owns its keys. The supporting dock is itself an overlay entry.
+            if (((_a = history.state) === null || _a === void 0 ? void 0 : _a.overlay) && history.state.overlay.name !== this.companionName)
+                return;
+            if (event.key === 'Escape') {
+                if (event.composedPath().includes(this.expandedDock)) {
+                    event.preventDefault();
+                    (_c = (_b = this.expandedDock) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.onClose();
+                }
+                return;
+            }
+            if (event.key !== 'Tab')
+                return;
+            const walk = (root) => Array.from(root.querySelectorAll('*'))
+                .flatMap(el => [el, ...(el.shadowRoot ? walk(el.shadowRoot) : [])]);
+            // Follow visual order: switch, primary work, supporting conversation. No background controls are reached.
+            const roots = ['.workspace-switch', '[workspace-main]', '[workspace-companion]'].map(selector => this.renderRoot.querySelector(selector)).filter(Boolean);
+            const controls = roots.flatMap(root => root.hidden ? [] : walk(root)).filter(el => el.matches('button,a[href],input,select,textarea,summary,[tabindex]') && el.tabIndex >= 0 &&
+                !el.hasAttribute('disabled') && !el.closest('[inert]') && el.getClientRects().length && getComputedStyle(el).visibility !== 'hidden');
+            if (!controls.length)
+                return;
+            const index = controls.indexOf(event.composedPath()[0]);
+            event.preventDefault();
+            controls[index < 0 ? (event.shiftKey ? controls.length - 1 : 0) : (index + (event.shiftKey ? -1 : 1) + controls.length) % controls.length].focus();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('entity360-presentation', this.onPresentation);
+        this.renderRoot.addEventListener('focusin', this.onFocus);
+        this.media.addEventListener('change', this.onMedia);
+        document.addEventListener('keydown', this.onKey);
+    }
+    disconnectedCallback() {
+        this.expandedDock && (this.expandedDock.contained = false);
+        this.removeEventListener('entity360-presentation', this.onPresentation);
+        this.renderRoot.removeEventListener('focusin', this.onFocus);
+        this.media.removeEventListener('change', this.onMedia);
+        document.removeEventListener('keydown', this.onKey);
+        super.disconnectedCallback();
+    }
+    updated() {
+        var _a, _b, _c;
+        this.toggleAttribute('shared-fullscreen', this.shared);
+        if (this.shared) {
+            this.setAttribute('role', 'dialog');
+            this.setAttribute('aria-modal', 'true');
+            this.setAttribute('aria-label', (_c = (_b = (_a = this.expandedDock) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '');
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('aria-modal');
+            this.removeAttribute('aria-label');
+        }
+        if (this.expandedDock)
+            this.expandedDock.contained = this.shared;
+        if (this.revealCompanion) {
+            this.revealCompanion = false;
+            this.pane = 'companion';
+            void this.updateComplete.then(() => { var _a; return (_a = this.renderRoot.querySelectorAll('.workspace-switch button')[1]) === null || _a === void 0 ? void 0 : _a.focus(); });
+        }
     }
     render() {
+        var _a, _b, _c;
         var viewparts = this._layout.viewparts;
         var asidebars = Object.keys(viewparts)
             .map(name => {
@@ -28,7 +113,16 @@ let AsideBar = class AsideBar extends LitElement {
             ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
             ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
         ];
+        const companion = asidebars.find(one => one.show && !one.hovering && one.expansionCompanion);
+        const main = asidebars.find(one => one.show && !one.hovering && one.name === 'entity360');
+        this.shared = !!(main && companion && ((_a = this.expandedDock) === null || _a === void 0 ? void 0 : _a.isConnected) && this.expandedDock.fullscreen);
+        this.revealCompanion = this.shared && this.compact && !!companion && this.companionName !== companion.name;
+        this.companionName = companion === null || companion === void 0 ? void 0 : companion.name;
         return html `
+      ${this.shared ? html `<nav class="workspace-switch">
+        <button quiet small aria-pressed=${this.pane === 'main'} @click=${() => this.pane = 'main'}>${(_c = (_b = this.expandedDock) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.title}</button>
+        <button quiet small aria-pressed=${this.pane === 'companion'} @click=${() => this.pane = 'companion'}>${i18next.t(companion.expansionCompanion.labelKey, { defaultValue: companion.expansionCompanion.defaultLabel })}</button>
+      </nav>` : nothing}
       ${asidebars.map(asidebar => !asidebar.show
             ? html ``
             : asidebar.hovering
@@ -53,8 +147,12 @@ let AsideBar = class AsideBar extends LitElement {
                 >
               `
                 : html `
-                <div asidebar>${asidebar.template}</div>
-                ${asidebar.resizable
+                <div asidebar
+                  ?workspace-main=${asidebar.name === (main === null || main === void 0 ? void 0 : main.name)}
+                  ?workspace-companion=${asidebar.name === (companion === null || companion === void 0 ? void 0 : companion.name)}
+                  ?hidden=${this.shared && (asidebar.name !== (main === null || main === void 0 ? void 0 : main.name) && asidebar.name !== (companion === null || companion === void 0 ? void 0 : companion.name) || this.compact && (this.pane === 'main' ? asidebar.name !== (main === null || main === void 0 ? void 0 : main.name) : asidebar.name !== (companion === null || companion === void 0 ? void 0 : companion.name)))}
+                >${asidebar.template}</div>
+                ${asidebar.resizable && !this.shared
                     ? html `
                       <ox-resize-splitter
                         @splitter-dragstart=${(e) => this.resizeStart(e)}
@@ -81,7 +179,7 @@ let AsideBar = class AsideBar extends LitElement {
     }
 };
 AsideBar.styles = [
-    ScrollbarStyles,
+    ScrollbarStyles, ButtonStyles,
     css `
       :host {
         display: flex;
@@ -91,6 +189,27 @@ AsideBar.styles = [
         position: relative;
       }
 
+      :host([shared-fullscreen]) {
+        position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 901;
+        display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: minmax(0, 1fr);
+        background: var(--md-sys-color-surface, white); color: var(--md-sys-color-on-surface, #222);
+      }
+      :host([shared-fullscreen]) [asidebar] { min-width: 0; min-height: 0; overflow: hidden; }
+      :host([shared-fullscreen]) [workspace-main] { grid-column: 1; grid-row: 1; }
+      :host([shared-fullscreen]) [workspace-companion] { grid-column: 2; grid-row: 1; }
+      :host([shared-fullscreen]) [workspace-companion] > * {
+        position: relative; inset: auto; width: 100%; max-width: none; height: 100%; z-index: auto;
+      }
+      [hidden] { display: none !important; }
+      .workspace-switch { display: none; }
+      @media (max-width: 1023.98px) {
+        :host([shared-fullscreen]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
+        :host([shared-fullscreen]) [workspace-main], :host([shared-fullscreen]) [workspace-companion] { grid-column: 1; grid-row: 2; }
+        .workspace-switch { display: flex; gap: var(--spacing-small, 4px); padding: var(--spacing-small, 4px); min-width: 0; border-bottom: 1px solid var(--ui-line, #ccc); }
+        .workspace-switch button { min-width: 0; max-width: 50%; white-space: normal; overflow-wrap: anywhere; }
+        .workspace-switch button[aria-pressed=true] { background: var(--md-sys-color-secondary-container, #ddd); }
+      }
+
       *[asidebar] {
         display: block;
         overflow-y: auto;
@@ -100,6 +219,15 @@ AsideBar.styles = [
 __decorate([
     property({ type: Boolean, attribute: 'fullbleed' })
 ], AsideBar.prototype, "fullbleed", void 0);
+__decorate([
+    state()
+], AsideBar.prototype, "expandedDock", void 0);
+__decorate([
+    state()
+], AsideBar.prototype, "pane", void 0);
+__decorate([
+    state()
+], AsideBar.prototype, "compact", void 0);
 AsideBar = __decorate([
     customElement('ox-aside-bar')
 ], AsideBar);