@things-factory/figure-library 10.1.154 → 10.1.155

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

@@ -1,72 +1,66 @@
 import { __decorate, __metadata } from "tslib";
-import '@operato/layout';
-import '@operato/list-state/ox-page-state.js';
+import '@operato/data-grist';
+import '../viewparts/figure-card-meta.js';
+import '@things-factory/figure-viewer/dist-client/figure-thumb-mark.js';
+import '../viewparts/figure-releases-popup.js';
 import gql from 'graphql-tag';
 import { css, html, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, query, state } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/popup';
 import { PageView } from '@operato/shell';
-import { actionHeight, DocumentPageStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } 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, amended 2026-10-12), as a card catalogue: one card per imported figure, its
+ * thumbnail first, the release it draws with and the latest imported. A card whose figure does not draw with its latest
+ * says so. Clicking a card opens its releases side by side to compare them and choose the one it draws with.
  *
- * 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.
+ * The library is expected to grow to many figures, so the list pages from the server and the filters (category,
+ * capability) are drop-down lists in the filter bar beside the name search. Upload, the decision of the screen, sits in
+ * the shell's action bar; what it did opens in a popup.
  */
-const RELEASES = gql `
-  query {
-    figureLibraryReleases(pagination: { page: 1, limit: 1000 }, sortings: [{ name: "ref" }]) {
+const FIGURES = gql `
+  query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+    responses: figureLibraryFigures(filters: $filters, pagination: $pagination, sortings: $sortings) {
       items {
-        id
         name
-        ref
-        namespace
-        type
-        version
-        formatSupported
-        deprecated
-        supersededBy
-        dependencies
-        sourceUrl
-        createdAt
+        latestVersion
+        releaseCount
+        release {
+          id
+          name
+          version
+          category
+          capabilities
+          formatSupported
+          deprecated
+          dependencies
+        }
+        latest {
+          id
+          name
+          version
+          formatSupported
+          dependencies
+        }
       }
       total
     }
   }
 `;
-const MAPS = gql `
+const FACETS = gql `
   query {
-    figureTypeMaps {
-      version
-      name
-      state
-      revision
-      activatedAt
+    figureLibraryFacets {
+      categories
+      uncategorized
+      capabilities
+      incapable
     }
   }
 `;
-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) {
@@ -83,698 +77,221 @@ const IMPORT = gql `
     }
   }
 `;
-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 ?? '';
+/** The filter value for a figure with no category, or one that declares no capability. */
+const NONE = '-';
 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.fetchHandler = async ({ page = 1, limit = 24, filters = [] }) => {
+            const response = await client.query({
+                query: FIGURES,
+                variables: {
+                    /* The name search arrives as %text%; the server matches parts itself. */
+                    filters: filters
+                        .filter(filter => filter.value !== undefined && filter.value !== '' && !(Array.isArray(filter.value) && !filter.value.length))
+                        .map(filter => ({ ...filter, value: typeof filter.value === 'string' ? filter.value.replace(/^%|%$/g, '') : filter.value })),
+                    pagination: { page, limit }
+                },
+                fetchPolicy: 'network-only'
+            });
+            return { total: response.data.responses.total || 0, records: response.data.responses.items || [] };
+        };
         this.importFile = async (event) => {
             const input = event.target;
             const file = input.files?.[0];
             if (!file)
                 return;
-            this.busy = true;
+            let result;
             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 = '';
+                result = response.data.importFigurePackage;
             }
             catch (e) {
-                this.failure = e?.message ?? '';
+                result = { problems: [{ code: e?.message ?? 'error' }], outcomes: [] };
             }
             finally {
-                this.busy = false;
+                input.value = '';
             }
+            await this.configure();
+            this.grist.fetch();
+            openPopup(this.renderImported(result), { backdrop: true, size: 'small', closable: true, title: i18next.t('figure-library.title.import-result') });
         };
     }
     static { this.styles = [
+        WorkSurfacePageStyles,
         ScrollbarStyles,
-        DocumentPageStyles,
-        FormFieldStyles,
+        CommonGristStyles,
+        CommonHeaderStyles,
         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;
+      ox-filters-form {
+        flex: 1;
       }
 
-      td button:hover:not(:disabled) {
-        background: var(--md-sys-color-secondary-container);
-        border-color: var(--md-sys-color-secondary);
+      ox-grist {
+        /* Cards of a row stand at one height; a card with an extra fact row does not stick out below the others. */
+        --data-card-record-card-height: auto;
+        --data-card-thumbnail-aspect: 4 / 3;
+        --data-card-thumbnail-background: var(--md-sys-color-surface-container-lowest);
       }
 
-      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'
-            ? [
+        return {
+            title: i18next.t('figure-library.title'),
+            search: {
+                placeholder: i18next.t('figure-library.text.search'),
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            actions: [
                 {
                     title: i18next.t('figure-library.button.upload'),
                     icon: 'upload_file',
                     action: () => this.chooseFile(),
-                    disabled: this.busy,
                     emphasis: { raised: true }
                 }
             ]
-            : [
+        };
+    }
+    render() {
+        return html `
+      <input id="file" type="file" accept=".figpkg,.zip" hidden @change=${this.importFile} />
+      <ox-grist class="page-fill" mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler}>
+        <div slot="headroom">
+          <ox-filters-form autofocus without-search></ox-filters-form>
+        </div>
+      </ox-grist>
+    `;
+    }
+    async pageInitialized() {
+        await this.configure();
+    }
+    /*
+     * The filter options are read once here (and again after an import), never per render: an async options function
+     * runs on every render of the filter bar and replaces the open list's options under the pointer.
+     */
+    async configure() {
+        const { categories, capabilities } = await this.facets();
+        this.gristConfig = {
+            list: {
+                thumbnail: 'thumbnail',
+                fields: ['title', 'meta'],
+                details: []
+            },
+            columns: [
                 {
-                    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)
+                    type: 'image',
+                    name: 'thumbnail',
+                    record: { editable: false, renderEmpty: true, renderer: (_value, _column, record) => this.thumbnailOf(record) }
                 },
                 {
-                    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') : ''
+                    type: 'string',
+                    name: 'title',
+                    record: {
+                        editable: false,
+                        renderer: (_value, _column, record) => (record.release ?? record.latest).name
+                    }
                 },
                 {
-                    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') : ''
+                    type: 'string',
+                    name: 'meta',
+                    record: { editable: false, renderer: (_value, _column, record) => html `<figure-card-meta .figure=${record}></figure-card-meta>` }
                 },
+                { type: 'string', name: 'name', hidden: true, record: { editable: false }, filter: 'search' },
                 {
-                    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 }
+                    type: 'select',
+                    name: 'category',
+                    header: i18next.t('figure-library.label.category'),
+                    hidden: true,
+                    record: { editable: false },
+                    filter: { operator: 'eq', options: categories }
+                },
+                {
+                    type: 'select',
+                    name: 'capability',
+                    header: i18next.t('figure-library.label.capability'),
+                    hidden: true,
+                    record: { editable: false },
+                    filter: { operator: 'eq', options: capabilities }
                 }
-            ];
-        return {
-            title: i18next.t('figure-library.title'),
-            description: i18next.t('figure-library.description'),
-            frame: 'document',
-            actions
+            ],
+            rows: {
+                selectable: false,
+                appendable: false,
+                handlers: {
+                    click: (_columns, _data, _column, record) => record && this.openReleases(record)
+                }
+            },
+            pagination: { pages: [24, 48, 96] }
         };
     }
-    /*
-     * 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) {
+    async pageUpdated() {
         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();
+            this.grist?.fetch();
     }
-    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>
-    `;
+    /** The filter options, from what the figures that draw carry. */
+    async facets() {
+        const response = await client.query({ query: FACETS, fetchPolicy: 'network-only' });
+        const facets = response.data?.figureLibraryFacets ?? { categories: [], capabilities: [] };
+        return {
+            categories: [
+                ...facets.categories.map((value) => ({ display: value, value })),
+                ...(facets.uncategorized ? [{ display: i18next.t('figure-library.text.no-category'), value: NONE }] : [])
+            ],
+            capabilities: [
+                ...facets.capabilities.map((value) => ({ display: i18next.t(`figure.label.role-${value}`, { defaultValue: value }), value })),
+                ...(facets.incapable ? [{ display: i18next.t('figure-library.text.no-capability'), value: NONE }] : [])
+            ]
+        };
     }
-    thumbnailOf(release) {
-        const hash = release.dependencies?.find(d => d.role === 'thumbnail')?.hash;
+    thumbnailOf(record) {
+        const hash = (record?.release ?? record?.latest)?.dependencies?.find((d) => d.role === 'thumbnail')?.hash;
         if (!hash)
-            return nothing;
+            return html `<figure-thumb-mark .label=${i18next.t('figure-library.text.no-thumbnail')}></figure-thumb-mark>`;
         const { contextPath } = getPathInfo(location.pathname);
-        return html `<img thumb alt="" src=${`${contextPath}/figure-library-file/${hash}`} />`;
+        return html `<img alt="" src=${`${contextPath}/figure-library-file/${hash}`} />`;
+    }
+    openReleases(record) {
+        openPopup(html `<figure-releases-popup .name=${record.name} .drawing=${record.release?.id ?? ''} @saved=${() => this.grist.fetch()}></figure-releases-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('figure-library.title.releases-of', { name: (record.release ?? record.latest).name, count: record.releaseCount })
+        });
     }
     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>
+      <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: var(--ui-t-body, 13px);">
         ${result.problems.length
-            ? html `<p class="finding" role="alert">
+            ? html `<p style="margin: 0; color: var(--ui-crit, var(--md-sys-color-error));" 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', 'carrierConflicts'].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)}`)}
-          ${group('carrierConflicts', report.carrierConflicts, item => html `${item.carrierType} ${item.lines.map((line) => html `<span class="ref">${line.ref}</span> `)}`)}
-        </div>
-      </section>
+            : result.outcomes.map(o => html `<div>
+                <span style="font-family: var(--ui-mono, monospace);">${o.ref}</span> ·
+                <strong style=${o.outcome === 'refused' ? 'color: var(--ui-crit, var(--md-sys-color-error))' : ''}>${i18next.t(`figure-library.outcome.${o.outcome}`)}</strong>
+                ${o.differs?.length ? html `<div>${i18next.t('figure-library.text.differs', { fields: o.differs.join(', ') })}</div>` : nothing}
+                ${o.outcome === 'refused' && o.code ? html `<div>${o.code}</div>` : nothing}
+              </div>`)}
+      </div>
     `;
     }
 };
-__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);
+], FigureLibraryPage.prototype, "gristConfig", 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);
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], FigureLibraryPage.prototype, "grist", void 0);
 FigureLibraryPage = __decorate([
     customElement('figure-library-page')
 ], FigureLibraryPage);