@things-factory/figure-library 10.1.154 → 10.1.156

package/dist-client/viewparts/figure-card-meta.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, nothing } from 'lit';
+/** A version as operato-figure shows it: v1. `@` stays inside a full release reference only. */
+export declare const versionText: (version: number) => string;
+/** The place roles a release declares, in figure-viewer's words (파지 · 안착); 없음 for none. */
+export declare const capabilityText: (roles: readonly string[] | null | undefined) => string;
+declare const FigureCardMeta_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * What a figure card says under its title, as labelled rows: its full name, then the version in use (with 「최신 아님」
+ * when the latest differs) and, on the same row from the middle of the card, the latest version when it differs; then
+ * its category and its capabilities. A figure with nothing drawable has 사용 버전 「없음」 and the reason. A card's fields are drawn inside the card, out of the page's
+ * styles, so the rows carry their own (page-standard §4: one grid, the label column as wide as its longest label).
+ */
+export declare class FigureCardMeta extends FigureCardMeta_base {
+    static styles: import("lit").CSSResult;
+    /** A figure as figureLibraryFigures gives it: name, latestVersion, release (null when none is drawable), latest. */
+    figure: any;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist-client/viewparts/figure-card-meta.js

@@ -0,0 +1,122 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+/** A version as operato-figure shows it: v1. `@` stays inside a full release reference only. */
+export const versionText = (version) => `v${version}`;
+/** The place roles a release declares, in figure-viewer's words (파지 · 안착); 없음 for none. */
+export const capabilityText = (roles) => roles?.length
+    ? roles.map(role => i18next.t(`figure.label.role-${role}`, { defaultValue: role })).join(', ')
+    : i18next.t('figure-library.text.no-capability');
+/**
+ * What a figure card says under its title, as labelled rows: its full name, then the version in use (with 「최신 아님」
+ * when the latest differs) and, on the same row from the middle of the card, the latest version when it differs; then
+ * its category and its capabilities. A figure with nothing drawable has 사용 버전 「없음」 and the reason. A card's fields are drawn inside the card, out of the page's
+ * styles, so the rows carry their own (page-standard §4: one grid, the label column as wide as its longest label).
+ */
+let FigureCardMeta = class FigureCardMeta extends localize(i18next)(LitElement) {
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      gap: var(--spacing-small, 4px);
+      min-width: 0;
+      font-size: var(--ui-t-small, 11.5px);
+      line-height: 1.5;
+    }
+
+    .full-name {
+      font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* label · value · label · value: the version pair shares a row; a single fact's value spans to the end. */
+    dl {
+      display: grid;
+      grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
+      align-items: center;
+      gap: 2px var(--spacing-large, 12px);
+      margin: 0;
+    }
+
+    dt {
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+
+    dd.wide {
+      grid-column: 2 / -1;
+    }
+
+    dd {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      margin: 0;
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+    }
+
+    /* A chip in a row keeps the row's height: its border sits inside the line. */
+    .mark {
+      padding: 0 var(--spacing-medium, 8px);
+      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      border-radius: 999px;
+      line-height: calc(1.5em - 2px);
+      white-space: nowrap;
+    }
+
+    .mark.warn {
+      border-color: color-mix(in srgb, var(--ui-warn, var(--md-sys-color-tertiary)) 50%, transparent);
+      color: var(--ui-warn, var(--md-sys-color-tertiary));
+      font-weight: 600;
+    }
+
+    .mark.crit {
+      border-color: color-mix(in srgb, var(--ui-crit, var(--md-sys-color-error)) 40%, transparent);
+      color: var(--ui-crit, var(--md-sys-color-error));
+    }
+  `; }
+    render() {
+        const figure = this.figure;
+        if (!figure)
+            return nothing;
+        const release = figure.release;
+        const latest = figure.latest;
+        const differs = !release || release.version !== figure.latestVersion;
+        const unsupported = html `<span class="mark crit">${i18next.t('figure-library.text.format-unsupported')}</span>`;
+        return html `
+      <span class="full-name" title=${figure.name}>${figure.name}</span>
+      <dl>
+        <dt>${i18next.t('figure-library.label.version-in-use')}</dt>
+        <dd class=${differs ? '' : 'wide'}>
+          ${release
+            ? html `${versionText(release.version)}
+              ${differs ? html `<span class="mark warn">${i18next.t('figure-library.text.not-latest')}</span>` : nothing}
+              ${release.deprecated ? html `<span class="mark">${i18next.t('figure-library.text.deprecated')}</span>` : nothing}`
+            : html `${i18next.t('figure-library.text.none')} · ${unsupported}`}
+        </dd>
+        ${differs
+            ? html `<dt>${i18next.t('figure-library.label.latest-version')}</dt>
+              <dd>${versionText(figure.latestVersion)} ${latest && !latest.formatSupported && release ? unsupported : nothing}</dd>`
+            : nothing}
+        <dt>${i18next.t('figure-library.label.category')}</dt>
+        <dd class="wide">${release?.category || '—'}</dd>
+        <dt>${i18next.t('figure-library.label.capability')}</dt>
+        <dd class="wide">${release ? capabilityText(release.capabilities) : '—'}</dd>
+      </dl>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureCardMeta.prototype, "figure", void 0);
+FigureCardMeta = __decorate([
+    customElement('figure-card-meta')
+], FigureCardMeta);
+export { FigureCardMeta };
+//# sourceMappingURL=figure-card-meta.js.map

package/dist-client/viewparts/figure-card-meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-card-meta.js","sourceRoot":"","sources":["../../client/viewparts/figure-card-meta.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n/** A version as operato-figure shows it: v1. `@` stays inside a full release reference only. */\nexport const versionText = (version: number) => `v${version}`\n\n/** The place roles a release declares, in figure-viewer's words (파지 · 안착); 없음 for none. */\nexport const capabilityText = (roles: readonly string[] | null | undefined) =>\n  roles?.length\n    ? roles.map(role => i18next.t(`figure.label.role-${role}`, { defaultValue: role })).join(', ')\n    : i18next.t('figure-library.text.no-capability')\n\n/**\n * What a figure card says under its title, as labelled rows: its full name, then the version in use (with 「최신 아님」\n * when the latest differs) and, on the same row from the middle of the card, the latest version when it differs; then\n * its category and its capabilities. A figure with nothing drawable has 사용 버전 「없음」 and the reason. A card's fields are drawn inside the card, out of the page's\n * styles, so the rows carry their own (page-standard §4: one grid, the label column as wide as its longest label).\n */\n@customElement('figure-card-meta')\nexport class FigureCardMeta extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      gap: var(--spacing-small, 4px);\n      min-width: 0;\n      font-size: var(--ui-t-small, 11.5px);\n      line-height: 1.5;\n    }\n\n    .full-name {\n      font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* label · value · label · value: the version pair shares a row; a single fact's value spans to the end. */\n    dl {\n      display: grid;\n      grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);\n      align-items: center;\n      gap: 2px var(--spacing-large, 12px);\n      margin: 0;\n    }\n\n    dt {\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n\n    dd.wide {\n      grid-column: 2 / -1;\n    }\n\n    dd {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n      margin: 0;\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n    }\n\n    /* A chip in a row keeps the row's height: its border sits inside the line. */\n    .mark {\n      padding: 0 var(--spacing-medium, 8px);\n      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      border-radius: 999px;\n      line-height: calc(1.5em - 2px);\n      white-space: nowrap;\n    }\n\n    .mark.warn {\n      border-color: color-mix(in srgb, var(--ui-warn, var(--md-sys-color-tertiary)) 50%, transparent);\n      color: var(--ui-warn, var(--md-sys-color-tertiary));\n      font-weight: 600;\n    }\n\n    .mark.crit {\n      border-color: color-mix(in srgb, var(--ui-crit, var(--md-sys-color-error)) 40%, transparent);\n      color: var(--ui-crit, var(--md-sys-color-error));\n    }\n  `\n\n  /** A figure as figureLibraryFigures gives it: name, latestVersion, release (null when none is drawable), latest. */\n  @property({ type: Object }) figure: any\n\n  render() {\n    const figure = this.figure\n    if (!figure) return nothing\n    const release = figure.release\n    const latest = figure.latest\n    const differs = !release || release.version !== figure.latestVersion\n    const unsupported = html`<span class=\"mark crit\">${i18next.t('figure-library.text.format-unsupported')}</span>`\n\n    return html`\n      <span class=\"full-name\" title=${figure.name}>${figure.name}</span>\n      <dl>\n        <dt>${i18next.t('figure-library.label.version-in-use')}</dt>\n        <dd class=${differs ? '' : 'wide'}>\n          ${release\n            ? html`${versionText(release.version)}\n              ${differs ? html`<span class=\"mark warn\">${i18next.t('figure-library.text.not-latest')}</span>` : nothing}\n              ${release.deprecated ? html`<span class=\"mark\">${i18next.t('figure-library.text.deprecated')}</span>` : nothing}`\n            : html`${i18next.t('figure-library.text.none')} · ${unsupported}`}\n        </dd>\n        ${differs\n          ? html`<dt>${i18next.t('figure-library.label.latest-version')}</dt>\n              <dd>${versionText(figure.latestVersion)} ${latest && !latest.formatSupported && release ? unsupported : nothing}</dd>`\n          : nothing}\n        <dt>${i18next.t('figure-library.label.category')}</dt>\n        <dd class=\"wide\">${release?.category || '—'}</dd>\n        <dt>${i18next.t('figure-library.label.capability')}</dt>\n        <dd class=\"wide\">${release ? capabilityText(release.capabilities) : '—'}</dd>\n      </dl>\n    `\n  }\n}\n"]}

package/dist-client/viewparts/figure-releases-popup.d.ts

@@ -0,0 +1,34 @@
+import '@operato/popup/ox-popup-actions.js';
+import '@things-factory/figure-viewer/dist-client/figure-asset-viewer.js';
+import '@things-factory/figure-viewer/dist-client/figure-facts-list.js';
+import { LitElement } from 'lit';
+declare const FigureReleasesPopup_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * Two releases of one figure on live canvases, side by side (ADR-0114, amended 2026-10-12): each drawn as a board draws
+ * it, sized within its ranges, posed and played, with what it is and its places beside it -- operato-figure's preview
+ * (@things-factory/figure-viewer), not a second one. With more releases, each column picks the release it shows; the
+ * one in use and the latest stand first. The operator picks the release the figure draws with and saves; save stays
+ * off until the pick differs. A release this server cannot read shows why instead of a canvas and cannot be picked.
+ */
+export declare class FigureReleasesPopup extends FigureReleasesPopup_base {
+    static styles: import("lit").CSSResult[];
+    /** The full figure name. */
+    name: string;
+    /** The id of the release it draws with now; '' when nothing is in use. */
+    drawing: string;
+    private releases;
+    /** The release each column shows, by id. */
+    private shown;
+    private picked;
+    private saving;
+    private failure;
+    private assets;
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    private assetOf;
+    private renderColumn;
+    private renderReleaseFacts;
+    private show;
+    private save;
+}
+export {};

package/dist-client/viewparts/figure-releases-popup.js

@@ -0,0 +1,400 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/popup/ox-popup-actions.js';
+import '@things-factory/figure-viewer/dist-client/figure-asset-viewer.js';
+import '@things-factory/figure-viewer/dist-client/figure-facts-list.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { closePopup } from '@operato/popup';
+import { ButtonStyles, CommonPopupStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+import { versionText } from './figure-card-meta.js';
+import { defaultPair, SIDE_BY_SIDE } from './release-pair.js';
+const RELEASES_OF = gql `
+  query ($name: String!) {
+    figureLibraryReleasesOf(name: $name) {
+      id
+      name
+      ref
+      version
+      category
+      source
+      formatSupported
+      assetFormat
+      kernelVersion
+      carrierType
+      carrierDimensions
+      changes
+      deprecated
+      supersededBy
+      comment
+      sourceUrl
+      releasedAt
+      createdAt
+    }
+  }
+`;
+const CHOOSE = gql `
+  mutation ($name: String!, $releaseId: String!) {
+    chooseFigureRelease(name: $name, releaseId: $releaseId) {
+      name
+    }
+  }
+`;
+/** A time in the reader's language (a bare toLocaleString follows the browser, not the app). */
+const when = (value) => (value ? new Date(value).toLocaleString(i18next.language) : '');
+/**
+ * A contract change in words. figure-model gives a code and values; `detail` is English for logs and is
+ * the sentence only when this module has no words for a new code (open question P8 in figure-library.md).
+ */
+const changeText = (change) => change.code
+    ? i18next.t(`figure-library.contract.${change.code}`, { ...(change.values ?? {}), defaultValue: change.detail ?? change.code })
+    : change.detail ?? '';
+/** The contract changes a release carries against its previous release, as the authoring server measured them. */
+const changesOf = (release) => {
+    try {
+        const parsed = release.changes ? JSON.parse(release.changes) : [];
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+};
+/**
+ * Two releases of one figure on live canvases, side by side (ADR-0114, amended 2026-10-12): each drawn as a board draws
+ * it, sized within its ranges, posed and played, with what it is and its places beside it -- operato-figure's preview
+ * (@things-factory/figure-viewer), not a second one. With more releases, each column picks the release it shows; the
+ * one in use and the latest stand first. The operator picks the release the figure draws with and saves; save stays
+ * off until the pick differs. A release this server cannot read shows why instead of a canvas and cannot be picked.
+ */
+let FigureReleasesPopup = class FigureReleasesPopup extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The full figure name. */
+        this.name = '';
+        /** The id of the release it draws with now; '' when nothing is in use. */
+        this.drawing = '';
+        this.releases = [];
+        /** The release each column shows, by id. */
+        this.shown = [];
+        this.picked = '';
+        this.saving = false;
+        this.failure = '';
+        this.assets = new Map();
+        this.save = async () => {
+            this.saving = true;
+            try {
+                const response = await client.mutate({ mutation: CHOOSE, variables: { name: this.name, releaseId: this.picked } });
+                if (response.errors?.length)
+                    throw new Error(response.errors[0].message);
+                this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }));
+                closePopup(this);
+            }
+            catch (e) {
+                this.failure = e?.message ?? '';
+            }
+            finally {
+                this.saving = false;
+            }
+        };
+    }
+    static { this.styles = [
+        CommonPopupStyles,
+        ScrollbarStyles,
+        ButtonStyles,
+        FormFieldStyles,
+        css `
+      /*
+        The popup takes the overlay's width (a share of the window, all of it on a narrow one) and never more: the two
+        columns sit side by side when they have room and stack when they do not, and the actions stay in view.
+      */
+      :host {
+        min-height: 0;
+        width: 100%;
+        --popup-min-width: 0;
+      }
+
+      .body {
+        flex: 1;
+        overflow: auto;
+        container-type: inline-size;
+      }
+
+      .columns {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
+        gap: var(--spacing-large, 12px);
+        align-items: start;
+      }
+
+      section.column {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        border-radius: var(--ui-r, 10px);
+        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+      }
+
+      section.column[picked] {
+        border-color: var(--ui-accent, var(--md-sys-color-primary));
+        box-shadow: inset 0 0 0 1px var(--ui-accent, var(--md-sys-color-primary));
+      }
+
+      /*
+        Side by side, which release a column is stays in view while its facts scroll by. Stacked, each column's canvas
+        stands right under its own header and the header leaves with its column (below two columns' width).
+      */
+      .head {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        border-radius: var(--ui-r, 10px) var(--ui-r, 10px) 0 0;
+        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) 16px;
+        border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      }
+
+      @container (max-width: 771px) {
+        .head {
+          position: static;
+        }
+      }
+
+      .head label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-small, 4px);
+        font-weight: 600;
+      }
+
+      .head select {
+        height: var(--form-element-height-small, 26px);
+        min-width: 72px;
+        font-size: var(--ui-t-body, 13px);
+      }
+
+      .head strong {
+        font-size: var(--ui-t-title, 15px);
+      }
+
+      .marks {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+      }
+
+      .mark {
+        padding: 0 var(--spacing-medium, 8px);
+        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        border-radius: 999px;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        font-size: var(--ui-t-small, 11.5px);
+        white-space: nowrap;
+      }
+
+      .mark.on {
+        border-color: var(--ui-accent, var(--md-sys-color-primary));
+        color: var(--ui-accent, var(--md-sys-color-primary));
+        font-weight: 600;
+      }
+
+      .mark.crit {
+        color: var(--ui-crit, var(--md-sys-color-error));
+      }
+
+      .reason {
+        margin: 0;
+        padding: var(--spacing-huge, 24px) 16px;
+        color: var(--ui-crit, var(--md-sys-color-error));
+      }
+
+      /* The release's own facts (note, dates, source, format, contract change) under the figure's. */
+      dl.release {
+        display: grid;
+        grid-template-columns: 96px minmax(0, 1fr);
+        gap: 3px 12px;
+        margin: 0;
+        padding: 10px 16px;
+        line-height: 1.45;
+      }
+
+      dl.release dt {
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+
+      dl.release dd {
+        margin: 0;
+        overflow-wrap: anywhere;
+      }
+
+      dl.release dd small {
+        display: block;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 1.2em;
+      }
+
+      li.breaking {
+        color: var(--ui-crit, var(--md-sys-color-error));
+      }
+
+      .finding {
+        margin: 0 0 var(--spacing-large, 12px);
+        padding-left: var(--spacing-large, 12px);
+        border-left: 2px solid var(--ui-crit, var(--md-sys-color-error));
+      }
+    `
+    ]; }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.picked = this.drawing;
+        const response = await client.query({ query: RELEASES_OF, variables: { name: this.name }, fetchPolicy: 'network-only' });
+        this.releases = response.data?.figureLibraryReleasesOf ?? [];
+        this.shown = defaultPair(this.releases, this.drawing);
+    }
+    render() {
+        const changed = !!this.picked && this.picked !== this.drawing;
+        const byId = new Map(this.releases.map(release => [release.id, release]));
+        return html `
+      <div class="body">
+        ${this.failure ? html `<p class="finding" role="alert">${this.failure}</p>` : nothing}
+        <div class="columns">
+          ${this.shown.map((id, column) => (byId.get(id) ? this.renderColumn(byId.get(id), column) : nothing))}
+        </div>
+      </div>
+      <ox-popup-actions>
+        <button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure-library.button.cancel')}</button>
+        <button slot="confirm" raised ?disabled=${!changed || this.saving} @click=${this.save}>${i18next.t('figure-library.button.save')}</button>
+      </ox-popup-actions>
+    `;
+    }
+    assetOf(release) {
+        if (!this.assets.has(release.id)) {
+            let asset = null;
+            try {
+                asset = release.formatSupported ? JSON.parse(release.source) : null;
+            }
+            catch {
+                asset = null;
+            }
+            this.assets.set(release.id, asset);
+        }
+        return this.assets.get(release.id);
+    }
+    renderColumn(release, column) {
+        const picked = release.id === this.picked;
+        /* A release this server cannot read is never used: it is shown, not picked (ADR-0114, amended 2026-10-12). */
+        const asset = this.assetOf(release);
+        const unusable = !asset;
+        const latest = release.id === this.releases[0]?.id;
+        const choosable = this.releases.length > SIDE_BY_SIDE;
+        return html `
+      <section class="column" ?picked=${picked}>
+        <div class="head">
+          <label>
+            <input type="radio" name="release" .checked=${picked} ?disabled=${unusable} @change=${() => (this.picked = release.id)} />
+            ${choosable
+            ? html `<select aria-label=${i18next.t('figure-library.label.release-shown')} @change=${(e) => this.show(column, e.target.value)}>
+                  ${this.releases.map(other => html `<option value=${other.id} ?selected=${other.id === release.id}>${versionText(other.version)}</option>`)}
+                </select>`
+            : html `<strong>${versionText(release.version)}</strong>`}
+          </label>
+          <span class="marks">
+            ${release.id === this.drawing ? html `<span class="mark on">${i18next.t('figure-library.text.in-use')}</span>` : nothing}
+            ${latest ? html `<span class="mark">${i18next.t('figure-library.text.latest')}</span>` : nothing}
+            ${unusable ? html `<span class="mark crit">${i18next.t('figure-library.text.format-unsupported')}</span>` : nothing}
+            ${release.deprecated ? html `<span class="mark">${i18next.t('figure-library.text.deprecated')}</span>` : nothing}
+          </span>
+        </div>
+        ${asset
+            ? html `<figure-asset-viewer .asset=${asset}>
+              <figure-facts-list slot="facts" .asset=${asset} .row=${{ category: release.category }}></figure-facts-list>
+            </figure-asset-viewer>`
+            : html `<p class="reason" role="note">${i18next.t('figure-library.text.cannot-use-format', { format: release.assetFormat })}</p>`}
+        ${this.renderReleaseFacts(release)}
+      </section>
+    `;
+    }
+    renderReleaseFacts(release) {
+        const changes = changesOf(release);
+        const carrier = release.carrierType
+            ? `${release.carrierType}${release.carrierDimensions
+                ? ` · ${release.carrierDimensions.width} × ${release.carrierDimensions.length} × ${release.carrierDimensions.height} mm`
+                : ''}`
+            : null;
+        return html `<dl class="release">
+      ${release.comment ? html `<dt>${i18next.t('figure-library.label.release-note')}</dt><dd>${release.comment}</dd>` : nothing}
+      ${release.version > 1
+            ? html `<dt>${i18next.t('figure-library.text.contract-since', { version: versionText(release.version - 1) })}</dt>
+            <dd>
+              ${changes.length
+                ? html `<ul>
+                    ${changes.map(change => html `<li class=${change.blocking ? 'breaking' : ''}>
+                        ${changeText(change)}${change.blocking ? html ` · ${i18next.t('figure-library.text.breaking')}` : nothing}
+                      </li>`)}
+                  </ul>`
+                : i18next.t('figure-library.text.no-contract-change')}
+            </dd>`
+            : nothing}
+      ${carrier ? html `<dt>${i18next.t('figure-library.label.carrier')}</dt><dd>${carrier}</dd>` : nothing}
+      <dt>${i18next.t('figure-library.label.format')}</dt>
+      <dd>
+        ${release.assetFormat}
+        ${release.kernelVersion ? html `<small>${i18next.t('figure-library.text.kernel', { version: release.kernelVersion })}</small>` : nothing}
+      </dd>
+      <dt>${i18next.t('figure-library.label.released-at')}</dt>
+      <dd>${when(release.releasedAt)}</dd>
+      <dt>${i18next.t('figure-library.label.imported-at')}</dt>
+      <dd>${when(release.createdAt)}</dd>
+      <dt>${i18next.t('figure-library.label.source')}</dt>
+      <dd>${release.sourceUrl ?? ''}</dd>
+    </dl>`;
+    }
+    show(column, id) {
+        const next = [...this.shown];
+        next[column] = id;
+        this.shown = next;
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureReleasesPopup.prototype, "name", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureReleasesPopup.prototype, "drawing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureReleasesPopup.prototype, "releases", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureReleasesPopup.prototype, "shown", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureReleasesPopup.prototype, "picked", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureReleasesPopup.prototype, "saving", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureReleasesPopup.prototype, "failure", void 0);
+FigureReleasesPopup = __decorate([
+    customElement('figure-releases-popup')
+], FigureReleasesPopup);
+export { FigureReleasesPopup };
+//# sourceMappingURL=figure-releases-popup.js.map

package/dist-client/viewparts/figure-releases-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-releases-popup.js","sourceRoot":"","sources":["../../client/viewparts/figure-releases-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup-actions.js'\nimport '@things-factory/figure-viewer/dist-client/figure-asset-viewer.js'\nimport '@things-factory/figure-viewer/dist-client/figure-facts-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ButtonStyles, CommonPopupStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { versionText } from './figure-card-meta.js'\nimport { defaultPair, SIDE_BY_SIDE } from './release-pair.js'\n\nconst RELEASES_OF = gql`\n  query ($name: String!) {\n    figureLibraryReleasesOf(name: $name) {\n      id\n      name\n      ref\n      version\n      category\n      source\n      formatSupported\n      assetFormat\n      kernelVersion\n      carrierType\n      carrierDimensions\n      changes\n      deprecated\n      supersededBy\n      comment\n      sourceUrl\n      releasedAt\n      createdAt\n    }\n  }\n`\n\nconst CHOOSE = gql`\n  mutation ($name: String!, $releaseId: String!) {\n    chooseFigureRelease(name: $name, releaseId: $releaseId) {\n      name\n    }\n  }\n`\n\ntype Change = { code?: string; values?: Record<string, unknown>; detail?: string; blocking?: boolean }\n\n/** A time in the reader's language (a bare toLocaleString follows the browser, not the app). */\nconst when = (value?: string | null) => (value ? new Date(value).toLocaleString(i18next.language) : '')\n\n/**\n * A contract change in words. figure-model gives a code and values; `detail` is English for logs and is\n * the sentence only when this module has no words for a new code (open question P8 in figure-library.md).\n */\nconst changeText = (change: Change) =>\n  change.code\n    ? i18next.t(`figure-library.contract.${change.code}`, { ...(change.values ?? {}), defaultValue: change.detail ?? change.code })\n    : change.detail ?? ''\n\n/** The contract changes a release carries against its previous release, as the authoring server measured them. */\nconst changesOf = (release: any): Change[] => {\n  try {\n    const parsed = release.changes ? JSON.parse(release.changes) : []\n    return Array.isArray(parsed) ? parsed : []\n  } catch {\n    return []\n  }\n}\n\n/**\n * Two releases of one figure on live canvases, side by side (ADR-0114, amended 2026-10-12): each drawn as a board draws\n * it, sized within its ranges, posed and played, with what it is and its places beside it -- operato-figure's preview\n * (@things-factory/figure-viewer), not a second one. With more releases, each column picks the release it shows; the\n * one in use and the latest stand first. The operator picks the release the figure draws with and saves; save stays\n * off until the pick differs. A release this server cannot read shows why instead of a canvas and cannot be picked.\n */\n@customElement('figure-releases-popup')\nexport class FigureReleasesPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonPopupStyles,\n    ScrollbarStyles,\n    ButtonStyles,\n    FormFieldStyles,\n    css`\n      /*\n        The popup takes the overlay's width (a share of the window, all of it on a narrow one) and never more: the two\n        columns sit side by side when they have room and stack when they do not, and the actions stay in view.\n      */\n      :host {\n        min-height: 0;\n        width: 100%;\n        --popup-min-width: 0;\n      }\n\n      .body {\n        flex: 1;\n        overflow: auto;\n        container-type: inline-size;\n      }\n\n      .columns {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));\n        gap: var(--spacing-large, 12px);\n        align-items: start;\n      }\n\n      section.column {\n        display: flex;\n        flex-direction: column;\n        min-width: 0;\n        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n        border-radius: var(--ui-r, 10px);\n        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n      }\n\n      section.column[picked] {\n        border-color: var(--ui-accent, var(--md-sys-color-primary));\n        box-shadow: inset 0 0 0 1px var(--ui-accent, var(--md-sys-color-primary));\n      }\n\n      /*\n        Side by side, which release a column is stays in view while its facts scroll by. Stacked, each column's canvas\n        stands right under its own header and the header leaves with its column (below two columns' width).\n      */\n      .head {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        border-radius: var(--ui-r, 10px) var(--ui-r, 10px) 0 0;\n        background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px) 16px;\n        border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      }\n\n      @container (max-width: 771px) {\n        .head {\n          position: static;\n        }\n      }\n\n      .head label {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n        font-weight: 600;\n      }\n\n      .head select {\n        height: var(--form-element-height-small, 26px);\n        min-width: 72px;\n        font-size: var(--ui-t-body, 13px);\n      }\n\n      .head strong {\n        font-size: var(--ui-t-title, 15px);\n      }\n\n      .marks {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px);\n      }\n\n      .mark {\n        padding: 0 var(--spacing-medium, 8px);\n        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n        border-radius: 999px;\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n        font-size: var(--ui-t-small, 11.5px);\n        white-space: nowrap;\n      }\n\n      .mark.on {\n        border-color: var(--ui-accent, var(--md-sys-color-primary));\n        color: var(--ui-accent, var(--md-sys-color-primary));\n        font-weight: 600;\n      }\n\n      .mark.crit {\n        color: var(--ui-crit, var(--md-sys-color-error));\n      }\n\n      .reason {\n        margin: 0;\n        padding: var(--spacing-huge, 24px) 16px;\n        color: var(--ui-crit, var(--md-sys-color-error));\n      }\n\n      /* The release's own facts (note, dates, source, format, contract change) under the figure's. */\n      dl.release {\n        display: grid;\n        grid-template-columns: 96px minmax(0, 1fr);\n        gap: 3px 12px;\n        margin: 0;\n        padding: 10px 16px;\n        line-height: 1.45;\n      }\n\n      dl.release dt {\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n\n      dl.release dd {\n        margin: 0;\n        overflow-wrap: anywhere;\n      }\n\n      dl.release dd small {\n        display: block;\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n\n      ul {\n        margin: 0;\n        padding-left: 1.2em;\n      }\n\n      li.breaking {\n        color: var(--ui-crit, var(--md-sys-color-error));\n      }\n\n      .finding {\n        margin: 0 0 var(--spacing-large, 12px);\n        padding-left: var(--spacing-large, 12px);\n        border-left: 2px solid var(--ui-crit, var(--md-sys-color-error));\n      }\n    `\n  ]\n\n  /** The full figure name. */\n  @property() name = ''\n  /** The id of the release it draws with now; '' when nothing is in use. */\n  @property() drawing = ''\n\n  @state() private releases: any[] = []\n  /** The release each column shows, by id. */\n  @state() private shown: string[] = []\n  @state() private picked = ''\n  @state() private saving = false\n  @state() private failure = ''\n\n  private assets = new Map<string, FigureAsset | null>()\n\n  async connectedCallback() {\n    super.connectedCallback()\n    this.picked = this.drawing\n    const response = await client.query({ query: RELEASES_OF, variables: { name: this.name }, fetchPolicy: 'network-only' })\n    this.releases = response.data?.figureLibraryReleasesOf ?? []\n    this.shown = defaultPair(this.releases, this.drawing)\n  }\n\n  render() {\n    const changed = !!this.picked && this.picked !== this.drawing\n    const byId = new Map(this.releases.map(release => [release.id, release]))\n\n    return html`\n      <div class=\"body\">\n        ${this.failure ? html`<p class=\"finding\" role=\"alert\">${this.failure}</p>` : nothing}\n        <div class=\"columns\">\n          ${this.shown.map((id, column) => (byId.get(id) ? this.renderColumn(byId.get(id), column) : nothing))}\n        </div>\n      </div>\n      <ox-popup-actions>\n        <button slot=\"cancel\" @click=${() => closePopup(this)}>${i18next.t('figure-library.button.cancel')}</button>\n        <button slot=\"confirm\" raised ?disabled=${!changed || this.saving} @click=${this.save}>${i18next.t('figure-library.button.save')}</button>\n      </ox-popup-actions>\n    `\n  }\n\n  private assetOf(release: any): FigureAsset | null {\n    if (!this.assets.has(release.id)) {\n      let asset: FigureAsset | null = null\n      try {\n        asset = release.formatSupported ? (JSON.parse(release.source) as FigureAsset) : null\n      } catch {\n        asset = null\n      }\n      this.assets.set(release.id, asset)\n    }\n    return this.assets.get(release.id)!\n  }\n\n  private renderColumn(release: any, column: number) {\n    const picked = release.id === this.picked\n    /* A release this server cannot read is never used: it is shown, not picked (ADR-0114, amended 2026-10-12). */\n    const asset = this.assetOf(release)\n    const unusable = !asset\n    const latest = release.id === this.releases[0]?.id\n    const choosable = this.releases.length > SIDE_BY_SIDE\n\n    return html`\n      <section class=\"column\" ?picked=${picked}>\n        <div class=\"head\">\n          <label>\n            <input type=\"radio\" name=\"release\" .checked=${picked} ?disabled=${unusable} @change=${() => (this.picked = release.id)} />\n            ${choosable\n              ? html`<select aria-label=${i18next.t('figure-library.label.release-shown')} @change=${(e: Event) => this.show(column, (e.target as HTMLSelectElement).value)}>\n                  ${this.releases.map(\n                    other => html`<option value=${other.id} ?selected=${other.id === release.id}>${versionText(other.version)}</option>`\n                  )}\n                </select>`\n              : html`<strong>${versionText(release.version)}</strong>`}\n          </label>\n          <span class=\"marks\">\n            ${release.id === this.drawing ? html`<span class=\"mark on\">${i18next.t('figure-library.text.in-use')}</span>` : nothing}\n            ${latest ? html`<span class=\"mark\">${i18next.t('figure-library.text.latest')}</span>` : nothing}\n            ${unusable ? html`<span class=\"mark crit\">${i18next.t('figure-library.text.format-unsupported')}</span>` : nothing}\n            ${release.deprecated ? html`<span class=\"mark\">${i18next.t('figure-library.text.deprecated')}</span>` : nothing}\n          </span>\n        </div>\n        ${asset\n          ? html`<figure-asset-viewer .asset=${asset}>\n              <figure-facts-list slot=\"facts\" .asset=${asset} .row=${{ category: release.category }}></figure-facts-list>\n            </figure-asset-viewer>`\n          : html`<p class=\"reason\" role=\"note\">${i18next.t('figure-library.text.cannot-use-format', { format: release.assetFormat })}</p>`}\n        ${this.renderReleaseFacts(release)}\n      </section>\n    `\n  }\n\n  private renderReleaseFacts(release: any) {\n    const changes = changesOf(release)\n    const carrier = release.carrierType\n      ? `${release.carrierType}${\n          release.carrierDimensions\n            ? ` · ${release.carrierDimensions.width} × ${release.carrierDimensions.length} × ${release.carrierDimensions.height} mm`\n            : ''\n        }`\n      : null\n\n    return html`<dl class=\"release\">\n      ${release.comment ? html`<dt>${i18next.t('figure-library.label.release-note')}</dt><dd>${release.comment}</dd>` : nothing}\n      ${release.version > 1\n        ? html`<dt>${i18next.t('figure-library.text.contract-since', { version: versionText(release.version - 1) })}</dt>\n            <dd>\n              ${changes.length\n                ? html`<ul>\n                    ${changes.map(\n                      change => html`<li class=${change.blocking ? 'breaking' : ''}>\n                        ${changeText(change)}${change.blocking ? html` · ${i18next.t('figure-library.text.breaking')}` : nothing}\n                      </li>`\n                    )}\n                  </ul>`\n                : i18next.t('figure-library.text.no-contract-change')}\n            </dd>`\n        : nothing}\n      ${carrier ? html`<dt>${i18next.t('figure-library.label.carrier')}</dt><dd>${carrier}</dd>` : nothing}\n      <dt>${i18next.t('figure-library.label.format')}</dt>\n      <dd>\n        ${release.assetFormat}\n        ${release.kernelVersion ? html`<small>${i18next.t('figure-library.text.kernel', { version: release.kernelVersion })}</small>` : nothing}\n      </dd>\n      <dt>${i18next.t('figure-library.label.released-at')}</dt>\n      <dd>${when(release.releasedAt)}</dd>\n      <dt>${i18next.t('figure-library.label.imported-at')}</dt>\n      <dd>${when(release.createdAt)}</dd>\n      <dt>${i18next.t('figure-library.label.source')}</dt>\n      <dd>${release.sourceUrl ?? ''}</dd>\n    </dl>`\n  }\n\n  private show(column: number, id: string) {\n    const next = [...this.shown]\n    next[column] = id\n    this.shown = next\n  }\n\n  private save = async () => {\n    this.saving = true\n    try {\n      const response = await client.mutate({ mutation: CHOOSE, variables: { name: this.name, releaseId: this.picked } })\n      if (response.errors?.length) throw new Error(response.errors[0].message)\n      this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n      closePopup(this)\n    } catch (e: any) {\n      this.failure = e?.message ?? ''\n    } finally {\n      this.saving = false\n    }\n  }\n}\n"]}

package/dist-client/viewparts/release-pair.d.ts

@@ -0,0 +1,9 @@
+/** At most this many releases stand side by side in the compare. */
+export declare const SIDE_BY_SIDE = 2;
+/**
+ * The releases a compare opens on (releases newest first): the one in use and the latest; when they are the same
+ * release, or nothing is in use, the latest and the one before it.
+ */
+export declare function defaultPair(releases: readonly {
+    id: string;
+}[], drawing: string): string[];