@things-factory/figure-library 10.1.121

package/dist-client/pages/figure-library-page.js

@@ -0,0 +1,781 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/layout';
+import '@operato/list-state/ox-page-state.js';
+import gql from 'graphql-tag';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { PageView } from '@operato/shell';
+import { actionHeight, DocumentPageStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+import { getPathInfo } from '@operato/utils';
+/*
+ * Screen layout (operato-application/design/ui/page-standard.md): document frame, the tab in the address
+ * (ox-url-tabs), one section per thing the operator looks at, and the decisions of each tab in the shell's
+ * action bar - upload on the library tab; save, check, preview and activate on the type map tab. Activate
+ * stays off until the candidate has been checked, and the button says so.
+ *
+ * The board server's figures (ADR-0114): the library of imported releases, and the domain type map that picks the
+ * release each figure draws with. Importing puts a release into the candidate; the candidate is checked against the
+ * domain's boards and activated; an archived map is activated again to roll back.
+ */
+const RELEASES = gql `
+  query {
+    figureLibraryReleases(pagination: { page: 1, limit: 1000 }, sortings: [{ name: "ref" }]) {
+      items {
+        id
+        name
+        ref
+        namespace
+        type
+        version
+        formatSupported
+        deprecated
+        supersededBy
+        dependencies
+        sourceUrl
+        createdAt
+      }
+      total
+    }
+  }
+`;
+const MAPS = gql `
+  query {
+    figureTypeMaps {
+      version
+      name
+      state
+      revision
+      activatedAt
+    }
+  }
+`;
+const LINES = gql `
+  query ($version: Int!) {
+    figureTypeMapEntries(version: $version) {
+      name
+      release {
+        id
+        ref
+      }
+    }
+  }
+`;
+const CHECK = gql `
+  query {
+    figureTypeMapCheck
+  }
+`;
+const IMPORT = gql `
+  mutation ($file: Upload!) {
+    importFigurePackage(file: $file) {
+      problems {
+        code
+        path
+      }
+      outcomes {
+        ref
+        outcome
+        code
+        differs
+      }
+    }
+  }
+`;
+const SAVE = gql `
+  mutation ($lines: [FigureTypeMapLineInput!]!) {
+    saveFigureTypeMapCandidate(lines: $lines) {
+      version
+      revision
+    }
+  }
+`;
+const ACTIVATE = gql `
+  mutation ($version: Int!) {
+    activateFigureTypeMap(version: $version) {
+      version
+      state
+    }
+  }
+`;
+const fullName = (release) => `${release.namespace}/${release.type}`;
+/** 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 ?? '';
+let FigureLibraryPage = class FigureLibraryPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.tab = 'library';
+        this.releases = [];
+        this.maps = [];
+        this.candidate = new Map();
+        /** The candidate's lines as last saved — to tell an unsaved choice from a saved one. */
+        this.saved = new Map();
+        this.busy = false;
+        this.loading = true;
+        /** The first read failed; nothing is drawn yet, so the whole screen says it could not read. */
+        this.loadError = null;
+        /** A later step failed (save, activate, a re-read); what is drawn stays, this line says why. */
+        this.failure = '';
+        this.importFile = async (event) => {
+            const input = event.target;
+            const file = input.files?.[0];
+            if (!file)
+                return;
+            this.busy = true;
+            try {
+                const response = await client.mutate({ mutation: IMPORT, variables: { file }, context: { hasUpload: true } });
+                this.imported = response.data.importFigurePackage;
+                await this.refresh();
+            }
+            catch (e) {
+                this.imported = { problems: [{ code: e?.message ?? 'error' }], outcomes: [] };
+            }
+            finally {
+                this.busy = false;
+                input.value = '';
+            }
+        };
+        /* A window of its own draws the candidate: its figures never mix with the active map of this one (ADR-0114 결정 12). */
+        this.preview = () => {
+            const { contextPath } = getPathInfo(location.pathname);
+            window.open(`${contextPath}/board-list?figure-map=candidate`, '_blank', 'noopener');
+        };
+        this.saveCandidate = async () => {
+            this.busy = true;
+            try {
+                const lines = [...this.candidate].map(([name, releaseId]) => ({ name, releaseId }));
+                await client.mutate({ mutation: SAVE, variables: { lines } });
+                this.report = undefined;
+                await this.refresh();
+            }
+            catch (e) {
+                this.failure = e?.message ?? '';
+            }
+            finally {
+                this.busy = false;
+            }
+        };
+        this.check = async () => {
+            this.busy = true;
+            try {
+                const response = await client.query({ query: CHECK, fetchPolicy: 'network-only' });
+                if (response.errors?.length)
+                    throw new Error(response.errors[0].message);
+                this.report = response.data.figureTypeMapCheck;
+                this.failure = '';
+            }
+            catch (e) {
+                this.failure = e?.message ?? '';
+            }
+            finally {
+                this.busy = false;
+            }
+        };
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        DocumentPageStyles,
+        FormFieldStyles,
+        css `
+      :host {
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+        font-size: var(--ui-t-body, 13px);
+        line-height: 1.5;
+      }
+
+      /* 표 — 격자와 같은 모양(머리글 · 줄 여백 · 경계선이 --grid-* 토큰). */
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: var(--grid-record-fontsize, 14px);
+      }
+
+      th {
+        padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        border-top: var(--grid-header-top-border, 2px solid var(--md-sys-color-primary));
+        border-bottom: var(--grid-header-bottom-border, 1px solid var(--md-sys-color-outline-variant));
+        background: var(--grid-header-background-color, var(--md-sys-color-surface-container-low));
+        font: var(--grid-header-font, 500 14px inherit);
+        color: var(--grid-header-color, var(--md-sys-color-primary));
+        text-align: left;
+        white-space: nowrap;
+      }
+
+      td {
+        padding: var(--grid-record-padding, 4px 8px);
+        border-bottom: var(--grid-record-border-bottom, 1px solid var(--md-sys-color-outline-variant));
+        vertical-align: middle;
+        word-break: keep-all;
+        overflow-wrap: anywhere;
+      }
+
+      td.thumb {
+        width: 64px;
+      }
+
+      img[thumb] {
+        display: block;
+        width: 48px;
+        height: 36px;
+        object-fit: contain;
+      }
+
+      /* 식별자(정식 이름 · 발행본 참조)는 고정폭 숫자, 줄을 바꾸지 않는다. */
+      .ref {
+        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+        font-size: var(--ui-t-small, 11.5px);
+        white-space: nowrap;
+      }
+
+      .sub {
+        display: block;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        font-size: var(--ui-t-small, 11.5px);
+      }
+
+      .when {
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+
+      /* 상태 표 — 같은 줄에 둘 이상 붙을 수 있다(형식 미지원 · 퇴역). */
+      .marks {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+      }
+
+      .mark {
+        padding: 1px 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.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));
+      }
+
+      .mark.on {
+        border-color: var(--ui-accent, var(--md-sys-color-primary));
+        color: var(--ui-accent, var(--md-sys-color-primary));
+        font-weight: 600;
+      }
+
+      /* 찾아낸 것 · 거부 — 왼쪽 선 하나. */
+      .finding {
+        margin: 0;
+        padding: var(--spacing-medium, 8px) 0 var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-left: 2px solid var(--ui-crit, var(--md-sys-color-error));
+      }
+
+      .outcomes,
+      .report-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .outcomes > li,
+      .report-list > li {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: var(--spacing-small, 4px) var(--spacing-large, 12px);
+        padding: var(--spacing-medium, 8px) 0;
+        border-top: 1px solid var(--ui-line-soft, var(--md-sys-color-surface-container-high));
+      }
+
+      .outcomes > li:first-child,
+      .report-list > li:first-child {
+        padding-top: 0;
+        border-top: none;
+      }
+
+      .outcome-refused {
+        color: var(--ui-crit, var(--md-sys-color-error));
+        font-weight: 600;
+      }
+
+      .changes {
+        flex-basis: 100%;
+        margin: 0;
+        padding-left: 1.2em;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+
+      .changes .breaking {
+        color: var(--ui-crit, var(--md-sys-color-error));
+      }
+
+      .report-group + .report-group {
+        margin-top: var(--spacing-huge, 24px);
+      }
+
+      .report-group h4 {
+        margin: 0 0 var(--spacing-medium, 8px);
+        font-size: var(--ui-t-body, 13px);
+        font-weight: 600;
+      }
+
+      select {
+        height: var(--form-element-height-medium, 30px);
+        min-width: 240px;
+        font-size: var(--ui-t-body, 13px);
+      }
+
+      .empty {
+        margin: 0;
+        padding: var(--spacing-huge, 24px);
+        border: 1px dashed var(--ui-line, var(--md-sys-color-outline-variant));
+        border-radius: var(--ui-r, 10px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        text-align: center;
+      }
+
+      /* Row buttons take the action-bar look until @operato/styles ButtonStyles is installed (ADR-0117). */
+      td button {
+        box-sizing: border-box;
+        height: ${actionHeight('--cell-action-height')};
+        padding: 0 var(--spacing-medium, 8px);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-small);
+        background: var(--md-sys-color-surface-container-lowest);
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-body, 13px);
+        font-weight: 600;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+
+      td button:hover:not(:disabled) {
+        background: var(--md-sys-color-secondary-container);
+        border-color: var(--md-sys-color-secondary);
+      }
+
+      td button:disabled {
+        opacity: 0.38;
+        cursor: default;
+      }
+
+      td.end {
+        text-align: right;
+      }
+    `
+    ]; }
+    get context() {
+        const candidate = this.maps.find(map => map.state === 'CANDIDATE');
+        const dirty = this.isDirty();
+        const actions = this.tab === 'library'
+            ? [
+                {
+                    title: i18next.t('figure-library.button.upload'),
+                    icon: 'upload_file',
+                    action: () => this.chooseFile(),
+                    disabled: this.busy,
+                    emphasis: { raised: true }
+                }
+            ]
+            : [
+                {
+                    title: i18next.t('figure-library.button.save-candidate'),
+                    icon: 'save',
+                    action: () => this.saveCandidate(),
+                    /* With no candidate yet, saving is how one is made from the active map — so it stays on. */
+                    disabled: this.busy || (!dirty && !!candidate)
+                },
+                {
+                    title: i18next.t('figure-library.button.check'),
+                    icon: 'fact_check',
+                    action: () => this.check(),
+                    disabled: this.busy || !candidate || dirty,
+                    disabledTitle: dirty ? i18next.t('figure-library.text.save-before-check') : ''
+                },
+                {
+                    title: i18next.t('figure-library.button.preview'),
+                    icon: 'open_in_new',
+                    action: () => this.preview(),
+                    disabled: !candidate || dirty,
+                    disabledTitle: dirty ? i18next.t('figure-library.text.save-before-check') : ''
+                },
+                {
+                    title: i18next.t('figure-library.button.activate'),
+                    icon: 'published_with_changes',
+                    action: () => candidate && this.activate(candidate.version),
+                    disabled: this.busy || !candidate || dirty || !this.report,
+                    disabledTitle: i18next.t('figure-library.text.check-before-activate'),
+                    emphasis: { raised: true }
+                }
+            ];
+        return {
+            title: i18next.t('figure-library.title'),
+            description: i18next.t('figure-library.description'),
+            frame: 'document',
+            actions
+        };
+    }
+    /*
+     * Opened straight from the address, pageUpdated runs before the page stands and the first read never
+     * starts - the screen sat on "loading" (before ox-page-state, on empty tables). pageInitialized reads too.
+     */
+    async pageInitialized() {
+        await this.enter();
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active)
+            await this.enter();
+    }
+    async enter() {
+        /* ox-url-tabs reads the address on connect but announces only later changes; the body follows the same address. */
+        this.tab = new URLSearchParams(location.search).get('tab') === 'type-map' ? 'type-map' : 'library';
+        await this.refresh();
+    }
+    updated(changes) {
+        /* The action bar follows the tab and what can be done now (dirty · checked · busy). */
+        if (['tab', 'busy', 'report', 'maps', 'candidate', 'saved'].some(key => changes.has(key)))
+            this.updateContext();
+    }
+    isDirty() {
+        if (this.candidate.size !== this.saved.size)
+            return true;
+        for (const [name, id] of this.candidate)
+            if (this.saved.get(name) !== id)
+                return true;
+        return false;
+    }
+    async refresh() {
+        try {
+            const [releases, maps] = await Promise.all([
+                client.query({ query: RELEASES, fetchPolicy: 'network-only' }),
+                client.query({ query: MAPS, fetchPolicy: 'network-only' })
+            ]);
+            if (releases.errors?.length || maps.errors?.length)
+                throw releases.errors?.length ? releases.errors : maps.errors;
+            this.releases = releases.data.figureLibraryReleases.items;
+            this.maps = maps.data.figureTypeMaps;
+            const candidate = this.maps.find(map => map.state === 'CANDIDATE') ?? this.maps.find(map => map.state === 'ACTIVE');
+            let lines = new Map();
+            if (candidate) {
+                const entries = await client.query({ query: LINES, variables: { version: candidate.version }, fetchPolicy: 'network-only' });
+                lines = new Map(entries.data.figureTypeMapEntries.map((line) => [line.name, line.release?.id]));
+            }
+            this.candidate = lines;
+            this.saved = new Map(lines);
+            this.failure = '';
+            this.loadError = null;
+        }
+        catch (e) {
+            if (this.loading)
+                this.loadError = e;
+            else
+                this.failure = i18next.t('figure-library.text.load-failed');
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        return html `
+      <ox-page-state .loading=${this.loading} .error=${this.loadError} @retry=${() => this.refresh()}>
+        <div class="page">
+          <ox-url-tabs
+            .tabs=${[
+            { key: 'library', label: i18next.t('figure-library.tab.library') },
+            { key: 'type-map', label: i18next.t('figure-library.tab.type-map') }
+        ]}
+            @tab-change=${(e) => (this.tab = e.detail.key)}
+          ></ox-url-tabs>
+          <input id="file" type="file" accept=".figpkg,.zip" hidden @change=${this.importFile} />
+          ${this.failure ? html `<p class="finding" role="alert">${this.failure}</p>` : nothing}
+          ${this.tab === 'library' ? this.renderLibrary() : this.renderTypeMap()}
+        </div>
+      </ox-page-state>
+    `;
+    }
+    thumbnailOf(release) {
+        const hash = release.dependencies?.find(d => d.role === 'thumbnail')?.hash;
+        if (!hash)
+            return nothing;
+        const { contextPath } = getPathInfo(location.pathname);
+        return html `<img thumb alt="" src=${`${contextPath}/figure-library-file/${hash}`} />`;
+    }
+    chooseFile() {
+        ;
+        this.renderRoot.querySelector('#file')?.click();
+    }
+    renderLibrary() {
+        return html `
+      ${this.imported ? this.renderImported(this.imported) : nothing}
+
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${i18next.t('figure-library.title.releases')}</h3>
+        </header>
+        ${this.releases.length
+            ? html `<p class="page-section-note">${i18next.t('figure-library.text.release-count', { count: this.releases.length })}</p>
+              <table>
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>${i18next.t('figure-library.label.name')}</th>
+                    <th>${i18next.t('figure-library.label.release')}</th>
+                    <th>${i18next.t('figure-library.label.source')}</th>
+                    <th>${i18next.t('figure-library.label.imported-at')}</th>
+                    <th>${i18next.t('figure-library.label.state')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${this.releases.map(release => html `
+                      <tr>
+                        <td class="thumb">${this.thumbnailOf(release)}</td>
+                        <td>${release.name}<span class="sub ref">${fullName(release)}</span></td>
+                        <td><span class="ref">${release.ref}</span></td>
+                        <td>${release.sourceUrl ?? ''}</td>
+                        <td class="when">${when(release.createdAt)}</td>
+                        <td>
+                          <span class="marks">
+                            ${release.formatSupported
+                ? nothing
+                : html `<span class="mark crit">${i18next.t('figure-library.text.format-unsupported')}</span>`}
+                            ${release.deprecated ? html `<span class="mark">${i18next.t('figure-library.text.deprecated')}</span>` : nothing}
+                          </span>
+                        </td>
+                      </tr>
+                    `)}
+                </tbody>
+              </table>`
+            : html `<p class="empty">${i18next.t('figure-library.text.no-releases')}</p>`}
+      </section>
+    `;
+    }
+    renderImported(result) {
+        return html `
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${i18next.t('figure-library.title.import-result')}</h3>
+        </header>
+        ${result.problems.length
+            ? html `<p class="finding" role="alert">
+              ${i18next.t('figure-library.text.package-refused', { code: result.problems.map(p => p.code).join(', ') })}
+            </p>`
+            : html `<div class="page-card">
+              <ul class="outcomes">
+                ${result.outcomes.map(o => html `<li>
+                    <span class="ref">${o.ref}</span>
+                    <span class=${o.outcome === 'refused' ? 'outcome-refused' : ''}>${i18next.t(`figure-library.outcome.${o.outcome}`)}</span>
+                    ${o.differs?.length
+                ? html `<span class="sub">${i18next.t('figure-library.text.differs', { fields: o.differs.join(', ') })}</span>`
+                : nothing}
+                    ${o.outcome === 'refused' && o.code ? html `<span class="sub">${o.code}</span>` : nothing}
+                  </li>`)}
+              </ul>
+            </div>`}
+      </section>
+    `;
+    }
+    renderTypeMap() {
+        const candidate = this.maps.find(map => map.state === 'CANDIDATE');
+        const names = [...new Set(this.releases.map(fullName))].sort();
+        const dirty = this.isDirty();
+        return html `
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${candidate ? i18next.t('figure-library.text.candidate', { name: candidate.name }) : i18next.t('figure-library.text.new-candidate')}</h3>
+        </header>
+        <p class="page-section-note">
+          ${dirty
+            ? i18next.t('figure-library.text.candidate-unsaved')
+            : this.report
+                ? i18next.t('figure-library.text.candidate-checked')
+                : i18next.t('figure-library.text.check-before-activate')}
+        </p>
+        ${names.length
+            ? html `<table>
+              <thead>
+                <tr>
+                  <th>${i18next.t('figure-library.label.figure')}</th>
+                  <th>${i18next.t('figure-library.label.release')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${names.map(name => {
+                const versions = this.releases.filter(release => fullName(release) === name).sort((a, b) => b.version - a.version);
+                const chosen = this.candidate.get(name) ?? '';
+                return html `
+                    <tr>
+                      <td><span class="ref">${name}</span></td>
+                      <td>
+                        <select @change=${(e) => this.choose(name, e.target.value)}>
+                          <option value="" ?selected=${!chosen}>${i18next.t('figure-library.text.not-in-map')}</option>
+                          ${versions.map(release => html `<option value=${release.id} ?selected=${chosen === release.id}>${release.ref}</option>`)}
+                        </select>
+                      </td>
+                    </tr>
+                  `;
+            })}
+              </tbody>
+            </table>`
+            : html `<p class="empty">${i18next.t('figure-library.text.no-releases')}</p>`}
+      </section>
+
+      ${this.report ? this.renderReport(this.report) : nothing}
+
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${i18next.t('figure-library.title.map-releases')}</h3>
+        </header>
+        ${this.maps.length
+            ? html `<table>
+              <thead>
+                <tr>
+                  <th>${i18next.t('figure-library.label.type-map')}</th>
+                  <th>${i18next.t('figure-library.label.state')}</th>
+                  <th>${i18next.t('figure-library.label.activated-at')}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                ${this.maps.map(map => html `
+                    <tr>
+                      <td>${map.name}</td>
+                      <td>
+                        <span class="mark ${map.state === 'ACTIVE' ? 'on' : ''}">${i18next.t(`figure-library.state.${map.state.toLowerCase()}`)}</span>
+                      </td>
+                      <td class="when">${when(map.activatedAt)}</td>
+                      <td class="end">
+                        ${map.state === 'ARCHIVED'
+                ? html `<button ?disabled=${this.busy} @click=${() => this.activate(map.version)}>
+                              ${i18next.t('figure-library.button.activate-again')}
+                            </button>`
+                : nothing}
+                      </td>
+                    </tr>
+                  `)}
+              </tbody>
+            </table>`
+            : html `<p class="empty">${i18next.t('figure-library.text.no-maps')}</p>`}
+      </section>
+    `;
+    }
+    choose(name, releaseId) {
+        const next = new Map(this.candidate);
+        if (releaseId)
+            next.set(name, releaseId);
+        else
+            next.delete(name);
+        this.candidate = next;
+        this.report = undefined;
+    }
+    async activate(version) {
+        this.busy = true;
+        try {
+            await client.mutate({ mutation: ACTIVATE, variables: { version } });
+            this.report = undefined;
+            await this.refresh();
+        }
+        catch (e) {
+            this.failure = e?.message ?? '';
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    renderReport(report) {
+        const reach = (item) => html `<span class="sub">${i18next.t('figure-library.text.reach', { boards: item.boards, nodes: item.nodes })}</span>`;
+        const group = (key, items, line) => items?.length
+            ? html `<div class="report-group">
+            <h4>${i18next.t(`figure-library.check.${key}`)}</h4>
+            <ul class="report-list">
+              ${items.map(item => html `<li>${line(item)}</li>`)}
+            </ul>
+          </div>`
+            : nothing;
+        const nothingToReport = ['missing', 'changed', 'added', 'deprecated', 'unsupported', 'dependencies'].every(key => !report[key]?.length);
+        return html `
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${i18next.t('figure-library.title.check-report')}</h3>
+        </header>
+        <div class="page-card">
+          ${nothingToReport ? html `<p class="sub">${i18next.t('figure-library.check.nothing')}</p>` : nothing}
+          ${group('missing', report.missing, item => html `<span class="ref">${item.name}</span> ${reach(item)}`)}
+          ${group('changed', report.changed, item => html `<span class="ref">${item.from}</span> → <span class="ref">${item.to}</span> ${reach(item)}
+              ${item.contract.checked
+            ? item.contract.changes.length
+                ? html `<ul class="changes">
+                      ${item.contract.changes.map((change) => html `<li class=${change.blocking ? 'breaking' : ''}>
+                          ${changeText(change)}${change.blocking ? html ` · ${i18next.t('figure-library.text.breaking')}` : nothing}
+                        </li>`)}
+                    </ul>`
+                : nothing
+            : html `<span class="sub">${i18next.t('figure-library.check.uncheckable')}</span>`}`)}
+          ${group('added', report.added, item => html `<span class="ref">${item.ref}</span>`)}
+          ${group('deprecated', report.deprecated, item => html `<span class="ref">${item.ref}</span> ${reach(item)}`)}
+          ${group('unsupported', report.unsupported, item => html `<span class="ref">${item.ref}</span> ${reach(item)}`)}
+          ${group('dependencies', report.dependencies, item => html `<span class="ref">${item.ref}</span> ${reach(item)}`)}
+        </div>
+      </section>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureLibraryPage.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureLibraryPage.prototype, "releases", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureLibraryPage.prototype, "maps", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Map)
+], FigureLibraryPage.prototype, "candidate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Map)
+], FigureLibraryPage.prototype, "saved", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLibraryPage.prototype, "imported", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLibraryPage.prototype, "report", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLibraryPage.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLibraryPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLibraryPage.prototype, "loadError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLibraryPage.prototype, "failure", void 0);
+FigureLibraryPage = __decorate([
+    customElement('figure-library-page')
+], FigureLibraryPage);
+export { FigureLibraryPage };
+//# sourceMappingURL=figure-library-page.js.map