@things-factory/figure-ui 10.1.177 → 10.1.179

package/client/pages/figure-list-page.ts

@@ -3,20 +3,22 @@ import '@material/web/icon/icon.js'
 import '../viewparts/figure-thumb.js'
 
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import type { DataGrist, FetchOption } from '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
 import { p13n } from '@operato/p13n'
 import { auth } from '@things-factory/auth-base/dist-client'
 import { navigate, PageView } from '@operato/shell'
+import { notify } from '@operato/layout'
 import { CardCatalogStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'
 
 import { capacityFrom } from '../modeller/scene-budget.js'
 import { deleteFigure, fetchFigureList } from '../graphql/index.js'
 import type { Figure } from '../types.js'
+import { hasBeenReleased } from '../figure-released.js'
 import { modellerPathOf } from '../modeller/modeller-route.js'
-import { FIGURE_THUMBNAIL_CHANGED, openFigureDetail } from '../viewparts/figure-detail-dock.js'
+import { FIGURE_PUBLIC_CHANGED, FIGURE_RETIREMENT_CHANGED, FIGURE_THUMBNAIL_CHANGED, openFigureDetail } from '../viewparts/figure-detail-dock.js'
 
 /**
  * 이 값 아래면 점수를 색으로 눈에 띄게 한다.
@@ -95,6 +97,23 @@ export class FigureListPage extends FigureListPageBase {
         카드 · 그림 칸 · 만들기 FAB 는 모든 카드 카탈로그와 같다(@operato/styles CardCatalogStyles,
         ADR-0117 개정 2026-10-13). 여기에는 이 화면에만 있는 것만 둔다.
       */
+      /* Which figures are listed: quiet words beside the filters, coloured when they are on. */
+      button[scope] {
+        font: inherit;
+        padding: 0 8px;
+        border: none;
+        background: none;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      button[scope]:hover {
+        color: var(--md-sys-color-on-surface);
+      }
+      button[scope][aria-pressed='true'] {
+        color: var(--md-sys-color-primary);
+        font-weight: 600;
+      }
       ox-grist {
         /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */
         --data-card-detail-direction: row;
@@ -108,6 +127,9 @@ export class FigureListPage extends FigureListPageBase {
 
   @query('ox-grist') private grist!: DataGrist
 
+  /** The domain's own figures, or other domains' public ones (LV figure-server design G2), read only. */
+  @state() private scope: 'own' | 'public' = 'own'
+
   private listen?: () => void
 
   get context() {
@@ -149,6 +171,7 @@ export class FigureListPage extends FigureListPageBase {
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
+          <button scope aria-pressed=${String(this.scope === 'public')} @click=${() => this.toggleScope()}>${i18next.t('figure.button.public-figures')}</button>
         </div>
 
         <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
@@ -427,7 +450,7 @@ export class FigureListPage extends FigureListPageBase {
             wide: true,
             renderEmpty: true,
             renderer: (_value: unknown, _column: any, record: Figure) => html`
-              <figure-thumb .figure=${record} @remove=${() => this.removeFigure(record)}></figure-thumb>
+              <figure-thumb .figure=${record} ?readonly=${this.scope === 'public'} @remove=${() => this.removeFigure(record)}></figure-thumb>
             `
           },
           hidden: true,
@@ -466,7 +489,7 @@ export class FigureListPage extends FigureListPageBase {
         handlers: {
           click: (_columns: any, _data: any, _column: any, record: Figure) => {
             if (record?.id) {
-              openFigureDetail(record)
+              openFigureDetail(record, this.scope === 'public')
             }
           }
         }
@@ -493,10 +516,12 @@ export class FigureListPage extends FigureListPageBase {
       }
     }
     auth.on('profile', this.listen)
-    /* A picture chosen in the preview: the cards are read again, with the picture's new stamp. */
-    window.addEventListener(FIGURE_THUMBNAIL_CHANGED, this.pictureChanged)
+    /* A picture chosen in the preview, or a figure retired or brought back: the cards are read again. */
+    window.addEventListener(FIGURE_THUMBNAIL_CHANGED, this.cardsChanged)
+    window.addEventListener(FIGURE_RETIREMENT_CHANGED, this.cardsChanged)
+    window.addEventListener(FIGURE_PUBLIC_CHANGED, this.cardsChanged)
   }
-  private pictureChanged = () => {
+  private cardsChanged = () => {
     if (this.active) this.grist?.fetch()
   }
 
@@ -505,7 +530,9 @@ export class FigureListPage extends FigureListPageBase {
       auth.off?.('profile', this.listen)
       this.listen = undefined
     }
-    window.removeEventListener(FIGURE_THUMBNAIL_CHANGED, this.pictureChanged)
+    window.removeEventListener(FIGURE_THUMBNAIL_CHANGED, this.cardsChanged)
+    window.removeEventListener(FIGURE_RETIREMENT_CHANGED, this.cardsChanged)
+    window.removeEventListener(FIGURE_PUBLIC_CHANGED, this.cardsChanged)
     super.disconnectedCallback()
   }
 
@@ -522,7 +549,7 @@ export class FigureListPage extends FigureListPageBase {
    * 받아 화면에 낸다 — 목록이 비어 있는 것과 못 불러온 것은 다른 사실이다.
    */
   async fetchHandler({ page = 1, limit = 24, sortings = [], filters = [] }: FetchOption) {
-    const { items, total } = await fetchFigureList({ page, limit, filters, sortings })
+    const { items, total } = await fetchFigureList({ page, limit, filters, sortings, scope: this.scope })
 
     return { total: total || 0, records: items || [] }
   }
@@ -532,15 +559,30 @@ export class FigureListPage extends FigureListPageBase {
     navigate(modellerPathOf(figure))
   }
 
+  private toggleScope() {
+    this.scope = this.scope === 'public' ? 'own' : 'public'
+    this.grist?.fetch()
+  }
+
   /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
   private async removeFigure(figure: Figure) {
+    if (this.scope === 'public') return
     // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다
+    if (hasBeenReleased(figure)) {
+      notify({ level: 'info', message: i18next.t('figure.text.released-figure-not-deletable', { name: figure.name }) })
+      return
+    }
     const message = i18next.t('figure.text.delete-figure-confirm', { name: figure.name })
     if (!confirm(message)) {
       return
     }
 
-    await deleteFigure(figure.id)
+    try {
+      await deleteFigure(figure.id)
+    } catch (e) {
+      notify({ level: 'error', message: (e as Error).message })
+      return
+    }
     this.grist.fetch()
   }
 }

package/client/pages/figure-modeller-page.ts

@@ -6,7 +6,7 @@ import { modellerPathOf } from '../modeller/modeller-route.js'
 import { createFigureProductSession } from '../modeller/product-session.js'
 import { figureProductStore } from '../graphql/store.js'
 import { i18next } from '@operato/i18n'
-import { fetchFigure, fetchFigureTypeNames, updateFigure } from '../graphql/index.js'
+import { fetchFigure, fetchFigureCategories, fetchFigureNamespaces, fetchFigureTypeNames, updateFigure } from '../graphql/index.js'
 import { figureProposalOutcome } from '../figure-assistant.js'
 import { availableRecipes, recipeGuide } from '../modeller/recipe-source.js'
 import type { RecipeTemplate } from '../modeller/recipes.js'
@@ -137,6 +137,8 @@ export class FigureModellerPage extends PageView {
    * `figure-modeller` 가 이 화면으로 바뀌면 저작자는 발행을 할 수 없었다. 새 도형은 공간을 선언하기 전에는 전부
    * 발행 판정에 막히는데 그 선언을 할 단추도 없었다(2026-09-24 확인). 그래서 발행 패널을 건다.
    */
+  /** The categories the server allows, or null when a category is free text (G5). */
+  @state() private categories: string[] | null = null
   @state() private row: { state?: 'draft' | 'released'; version: number; namespace?: string; type?: string; category?: string; tags?: string[] } = {
     version: 0
   }
@@ -398,6 +400,10 @@ export class FigureModellerPage extends PageView {
   }
   connectedCallback() {
     super.connectedCallback()
+    /* Read once: the server's category vocabulary does not change while it runs. Free text when it has none or cannot say. */
+    fetchFigureCategories()
+      .then(codes => (this.categories = codes))
+      .catch(() => (this.categories = null))
     window.addEventListener('figure-apply', this.applyAI)
     window.addEventListener('beforeunload', this.holdUnsaved)
   }
@@ -481,8 +487,13 @@ export class FigureModellerPage extends PageView {
   }
   /** The first save's question, over the names this domain already uses. */
   private askFirstSave = async (name: string): Promise<FirstSave | undefined> => {
-    const taken = await fetchFigureTypeNames().catch(() => [] as string[])
-    const answer = await openPopup<FirstSave>(html`<figure-first-save .type=${this.row.type ?? ''} .name=${name} .taken=${taken}></figure-first-save>`, {
+    const [taken, namespaces] = await Promise.all([
+      fetchFigureTypeNames().catch(() => [] as string[]),
+      fetchFigureNamespaces()
+        .then(all => all.filter(namespace => namespace.state === 'active'))
+        .catch(() => [])
+    ])
+    const answer = await openPopup<FirstSave>(html`<figure-first-save .type=${this.row.type ?? ''} .name=${name} .taken=${taken} .namespaces=${namespaces}></figure-first-save>`, {
       backdrop: true,
       size: 'small',
       title: i18next.t('figure.title.save-new-figure')
@@ -522,6 +533,7 @@ export class FigureModellerPage extends PageView {
         .revision=${this.session.revisionNow()}
         .figureId=${view.id}
         .figureCategory=${this.row.category}
+        .figureCategories=${this.categories}
         .figureTags=${this.row.tags}
         @command=${this.onCommand}
         @catalog=${this.onCatalog}

package/client/setting-let/figure-namespace-setting-let.ts

@@ -1,17 +1,24 @@
 import '@material/web/textfield/filled-text-field.js'
+import '@material/web/button/text-button.js'
 import '@things-factory/setting-base'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 
-import { fetchFigureNamespace, setFigureNamespace, type FigureNamespaceState } from '../graphql/index.js'
+import {
+  createFigureNamespace,
+  fetchFigureNamespaces,
+  setDefaultFigureNamespace,
+  setFigureNamespaceState,
+  type FigureNamespace
+} from '../graphql/index.js'
 
 /**
- * The domain's figure namespace (ADR-0114): the `{namespace}` of every full name `{namespace}/{type}` a board stores.
- * Empty takes the subdomain. It is set once: when the domain's figures carry it, it is shown and no longer edited --
- * the server refuses a change either way, and says why.
+ * The namespaces the domain owns (LV figure-server design G1): the `{namespace}` of every full name `{namespace}/{type}`
+ * a board stores. A namespace is added once and never renamed; the default is the one new figures are created under;
+ * a suspended one takes no new figure and no release. The server refuses what it must and says why.
  */
 @customElement('figure-namespace-setting-let')
 export class FigureNamespaceSettingLet extends localize(i18next)(LitElement) {
@@ -23,63 +30,138 @@ export class FigureNamespaceSettingLet extends localize(i18next)(LitElement) {
         gap: var(--spacing-small, 4px);
         text-transform: none;
       }
-      md-filled-text-field {
-        width: 100%;
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        gap: 2px;
+      }
+      li {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 4px 12px;
+        min-height: 32px;
       }
-      strong {
-        font: var(--label-font);
+      code {
+        font-family: var(--ui-mono, ui-monospace, monospace);
         color: var(--md-sys-color-on-surface);
       }
-      p {
-        margin: 0;
+      [mark] {
         font-size: 0.8rem;
         color: var(--md-sys-color-on-surface-variant);
       }
+      li[suspended] code {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      [actions] {
+        margin-left: auto;
+        display: flex;
+        gap: 4px;
+      }
+      [add] {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      md-filled-text-field {
+        flex: 1;
+      }
     `
   ]
 
-  @state() private now?: FigureNamespaceState
+  /* The server's calls; a check gives its own. */
+  @property({ attribute: false }) list: () => Promise<FigureNamespace[]> = fetchFigureNamespaces
+  @property({ attribute: false }) add: (name: string) => Promise<FigureNamespace> = name => createFigureNamespace(name)
+  @property({ attribute: false }) makeDefault: (name: string) => Promise<FigureNamespace> = setDefaultFigureNamespace
+  @property({ attribute: false }) setState: (name: string, state: 'active' | 'suspended') => Promise<FigureNamespace> = setFigureNamespaceState
+
+  @state() private namespaces?: FigureNamespace[]
+  @state() private draft = ''
   @state() private refused = ''
+  @state() private busy = false
 
   render() {
-    const now = this.now
+    const namespaces = this.namespaces
     return html`
       <setting-let>
         <span slot="title">${i18next.t('figure.title.namespace-setting')}</span>
         <div slot="content">
-          ${!now
-            ? html``
-            : now.fixed
-              ? html`<strong>${now.namespace}</strong>
-                  <p>${i18next.t('figure.text.namespace-fixed')}</p>`
-              : html`<md-filled-text-field
-                  .label=${i18next.t('figure.label.namespace')}
-                  .value=${now.written}
-                  placeholder=${now.subdomain}
-                  ?error=${!!this.refused || !now.namespace}
-                  error-text=${this.refused || i18next.t('figure.text.namespace-subdomain-unusable', { subdomain: now.subdomain })}
-                  supporting-text=${i18next.t('figure.text.namespace-empty-takes-subdomain', { subdomain: now.subdomain })}
-                  @change=${(e: Event) => this.save((e.target as HTMLInputElement).value)}
-                ></md-filled-text-field>`}
+          ${namespaces?.length
+            ? html`<ul>
+                ${namespaces.map(
+                  namespace => html`<li ?suspended=${namespace.state !== 'active'}>
+                    <code>${namespace.name}</code>
+                    ${namespace.isDefault ? html`<span mark>${i18next.t('figure.label.namespace-default')}</span>` : nothing}
+                    ${namespace.state !== 'active' ? html`<span mark>${i18next.t('figure.label.namespace-suspended')}</span>` : nothing}
+                    ${namespace.isDefault
+                      ? nothing
+                      : html`<span actions>
+                          ${namespace.state === 'active'
+                            ? html`<md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.makeDefault(namespace.name!))}
+                                  >${i18next.t('figure.button.namespace-make-default')}</md-text-button
+                                ><md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.setState(namespace.name!, 'suspended'))}
+                                  >${i18next.t('figure.button.namespace-suspend')}</md-text-button
+                                >`
+                            : html`<md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.setState(namespace.name!, 'active'))}
+                                >${i18next.t('figure.button.namespace-activate')}</md-text-button
+                              >`}
+                        </span>`}
+                  </li>`
+                )}
+              </ul>`
+            : nothing}
+          <div add>
+            <md-filled-text-field
+              .label=${i18next.t('figure.label.namespace')}
+              .value=${this.draft}
+              ?error=${!!this.refused}
+              error-text=${this.refused}
+              @input=${(e: Event) => {
+                this.draft = (e.target as HTMLInputElement).value
+                this.refused = ''
+              }}
+              @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && !e.isComposing && this.addDraft()}
+            ></md-filled-text-field>
+            <md-text-button ?disabled=${this.busy || !this.draft.trim()} @click=${() => this.addDraft()}>${i18next.t('figure.button.namespace-add')}</md-text-button>
+          </div>
         </div>
       </setting-let>
     `
   }
 
   async firstUpdated() {
+    await this.reload()
+  }
+
+  private async reload() {
     try {
-      this.now = await fetchFigureNamespace()
+      this.namespaces = await this.list()
     } catch (e) {
       this.refused = (e as Error).message
     }
   }
 
-  private async save(value: string) {
+  private async addDraft() {
+    const name = this.draft.trim()
+    if (!name || this.busy) return
+    if (await this.run(() => this.add(name))) this.draft = ''
+  }
+
+  /** One change, then the list read again. False when the server refused it; its reason is shown. */
+  private async run(change: () => Promise<unknown>): Promise<boolean> {
+    this.busy = true
     try {
-      this.now = await setFigureNamespace(value)
+      await change()
       this.refused = ''
+      await this.reload()
+      return true
     } catch (e) {
       this.refused = (e as Error).message
+      return false
+    } finally {
+      this.busy = false
     }
   }
 }

package/client/types.ts

@@ -28,6 +28,14 @@ export interface Figure {
   source?: string
   properties?: string
   version?: number
+  /** Retired: still released and served, no longer offered for new use. */
+  deprecated?: boolean
+  /** The type to use instead of a retired figure, in the same domain. */
+  supersededBy?: string | null
+  /** Public: other domains read its releases and draw it by full name (LV figure-server design G2). */
+  public?: boolean
+  /** The domain it belongs to; carried by another domain's public figure, so a screen says whose it is. */
+  domain?: { id: string; name?: string; subdomain?: string } | null
 }
 
 /**

package/client/viewparts/figure-detail-dock.ts

@@ -9,7 +9,8 @@ import { ASSISTANT_DOCK_VIEWPART } from '@things-factory/ai-assistant/dist-clien
 import { figureCostOf, parseFigureAsset, type FigureAsset } from '@hatiolab/figure-model'
 import { capacityFrom } from '../modeller/scene-budget.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
-import { fetchFigure, fetchReleasedFigure, updateFigure } from '../graphql/index.js'
+import { fetchFigure, fetchFigureTypeNames, fetchReleasedFigure, setFigureDeprecation, setFigurePublic, updateFigure } from '../graphql/index.js'
+import { hasBeenReleased } from '../figure-released.js'
 import { modellerPathOf } from '../modeller/modeller-route.js'
 import { leftOpeningPage } from './detail-route.js'
 import type { Figure } from '../types.js'
@@ -19,9 +20,15 @@ import '@things-factory/figure-viewer/dist-client/figure-facts-list.js'
 const VIEWPART = 'figure-detail'
 /** Said on window when a figure's card picture was replaced from the preview: `{ detail: { id } }`. */
 export const FIGURE_THUMBNAIL_CHANGED = 'figure-thumbnail-changed'
+/** Said on window when a figure was retired or brought back: `{ detail: { id } }`. */
+export const FIGURE_RETIREMENT_CHANGED = 'figure-retirement-changed'
+/** Said on window when a figure was made public or private: `{ detail: { id } }`. */
+export const FIGURE_PUBLIC_CHANGED = 'figure-public-changed'
 export interface FigureDetailRecord {
   saved: Figure
   released?: { version: number; source: string }
+  /** Another domain's public figure (G2): only its release is shown, and nothing on it is changed from here. */
+  foreign?: boolean
 }
 
 /** Catalogue details stay while the catalogue is shown; choosing a size or a pose has no write path. */
@@ -68,6 +75,16 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     p { margin: 0; line-height: 1.5; }
     [description] { padding: 10px 16px 0; color: var(--md-sys-color-on-surface-variant); }
     [status] { display: grid; gap: 8px; justify-items: start; padding: 12px 16px; }
+    /* Retiring: quiet words in the line under what is shown, like the source switch above it. */
+    [retire], [publish] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--md-sys-color-on-surface-variant); }
+    [retire] button, [publish] button { padding: 0; border: none; background: none; color: var(--md-sys-color-on-surface-variant); }
+    [retire] button:hover:not(:disabled), [publish] button:hover:not(:disabled) { color: var(--md-sys-color-on-surface); }
+    [publish] [published] { color: var(--md-sys-color-on-surface); font-weight: 600; }
+    [retire] button[primary] { color: var(--md-sys-color-primary); font-weight: 600; }
+    [retire] input { font: inherit; min-width: 0; flex: 1 1 160px; padding: 2px 6px; border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
+    [retire] [retired] { color: var(--md-sys-color-on-surface); font-weight: 600; }
+    [retire-error] { color: var(--md-sys-color-error); }
     @media (max-width: 1439.98px) {
       :host { position: fixed; inset: var(--figure-detail-top, 44px) 0 0 auto; height: calc(100dvh - var(--figure-detail-top, 44px)); z-index: 11; box-shadow: -4px 0 16px rgb(0 0 0 / 20%); }
     }
@@ -85,6 +102,19 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     await updateFigure(id, { thumbnail: dataUrl })
     window.dispatchEvent(new CustomEvent(FIGURE_THUMBNAIL_CHANGED, { detail: { id } }))
   }
+  /** Retires a released figure or brings it back (`setFigureDeprecation`); a check gives its own. */
+  @property({ attribute: false }) retire: (id: string, deprecated: boolean, supersededBy: string | null) => Promise<Figure> = setFigureDeprecation
+  /** The types a retired figure may name instead: the domain's other figures. */
+  @property({ attribute: false }) typeNamesOf: () => Promise<string[]> = fetchFigureTypeNames
+  /** Makes a released figure public or private (`setFigurePublic`); a check gives its own. */
+  @property({ attribute: false }) publish: (id: string, isPublic: boolean) => Promise<Figure> = setFigurePublic
+  /** Another domain's public figure as the catalogue listed it, with its latest release; its draft is not this domain's to open. */
+  @property({ attribute: false }) loadPublic: (row: Figure) => Promise<FigureDetailRecord> = async row => ({
+    saved: row,
+    released: await fetchReleasedFigure(row.id),
+    foreign: true
+  })
+  @state() private publishError = ''
   @state() private figureId = ''
   @state() private record?: FigureDetailRecord
   @state() private asset?: FigureAsset
@@ -92,12 +122,17 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
   @state() private loading = false
   @state() private error = ''
   @state() private cost?: ReturnType<typeof figureCostOf>
+  @state() private retiring = false
+  @state() private instead = ''
+  @state() private typeNames: string[] = []
+  @state() private retireError = ''
+  @state() private retireBusy = false
   private ticket = 0
   private unsubscribe?: () => void
   private boundary?: Element
   private boundaryObserver?: ResizeObserver
 
-  async show(id: string) {
+  async show(id: string, publicRow?: Figure) {
     const ticket = ++this.ticket
     this.figureId = id
     this.record = undefined
@@ -105,8 +140,11 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     this.cost = undefined
     this.loading = true
     this.error = ''
+    this.retiring = false
+    this.retireError = ''
+    this.publishError = ''
     try {
-      const record = await this.load(id)
+      const record = publicRow ? await this.loadPublic(publicRow) : await this.load(id)
       if (ticket !== this.ticket) return
       this.record = record
       this.choose(record.released ? 'released' : 'saved')
@@ -168,6 +206,78 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
   private escape = (e: KeyboardEvent) => {
     if (e.key === 'Escape') hideDetail()
   }
+  /**
+   * Retiring a released figure (it stays released and served; boards already using it keep it), naming the type to use
+   * instead, or bringing it back. A figure never released is deleted from the catalogue instead.
+   */
+  private retireRow(saved: Figure) {
+    if (saved.deprecated) {
+      return html`<div retire>
+          <span retired>${saved.supersededBy
+            ? i18next.t('figure.text.retired-instead', { type: saved.supersededBy })
+            : i18next.t('figure.label.retired')}</span>
+          <button ?disabled=${this.retireBusy} @click=${() => this.setRetired(saved, false)}>${i18next.t('figure.button.unretire')}</button>
+        </div>
+        ${this.retireError ? html`<p retire-error role="alert">${this.retireError}</p>` : nothing}`
+    }
+    if (!this.retiring) {
+      return html`<div retire><button @click=${() => this.openRetire(saved)}>${i18next.t('figure.button.retire')}</button></div>`
+    }
+    return html`<div retire>
+        <input list="figure-retire-instead" aria-label=${i18next.t('figure.label.superseded-by')}
+          placeholder=${i18next.t('figure.label.superseded-by')} .value=${this.instead}
+          @input=${(e: Event) => (this.instead = (e.target as HTMLInputElement).value)} />
+        <datalist id="figure-retire-instead">${this.typeNames.map(name => html`<option value=${name}></option>`)}</datalist>
+        <button primary ?disabled=${this.retireBusy} @click=${() => this.setRetired(saved, true)}>${i18next.t('figure.button.retire')}</button>
+        <button ?disabled=${this.retireBusy} @click=${() => { this.retiring = false; this.retireError = '' }}>${i18next.t('figure.button.cancel')}</button>
+      </div>
+      ${this.retireError ? html`<p retire-error role="alert">${this.retireError}</p>` : nothing}`
+  }
+  /** Public to other domains, or not (G2): they read its releases and draw it by full name; its draft stays here. */
+  private publishRow(saved: Figure) {
+    return html`<div publish>
+        ${saved.public ? html`<span published>${i18next.t('figure.label.public')}</span>` : nothing}
+        <button ?disabled=${this.retireBusy} @click=${() => this.setPublic(saved, !saved.public)}>${i18next.t(saved.public ? 'figure.button.make-private' : 'figure.button.make-public')}</button>
+      </div>
+      ${this.publishError ? html`<p retire-error role="alert">${this.publishError}</p>` : nothing}`
+  }
+  private async setPublic(saved: Figure, isPublic: boolean) {
+    this.retireBusy = true
+    this.publishError = ''
+    try {
+      const figure = await this.publish(saved.id, isPublic)
+      if (this.record?.saved.id === saved.id) this.record = { ...this.record, saved: { ...this.record.saved, ...figure } }
+      window.dispatchEvent(new CustomEvent(FIGURE_PUBLIC_CHANGED, { detail: { id: saved.id } }))
+    } catch (e) {
+      this.publishError = (e as Error).message
+    } finally {
+      this.retireBusy = false
+    }
+  }
+  private async openRetire(saved: Figure) {
+    this.retiring = true
+    this.instead = ''
+    this.retireError = ''
+    try {
+      this.typeNames = (await this.typeNamesOf()).filter(name => name !== saved.type)
+    } catch {
+      this.typeNames = []
+    }
+  }
+  private async setRetired(saved: Figure, deprecated: boolean) {
+    this.retireBusy = true
+    this.retireError = ''
+    try {
+      const figure = await this.retire(saved.id, deprecated, deprecated ? this.instead.trim() || null : null)
+      if (this.record?.saved.id === saved.id) this.record = { ...this.record, saved: { ...this.record.saved, ...figure } }
+      this.retiring = false
+      window.dispatchEvent(new CustomEvent(FIGURE_RETIREMENT_CHANGED, { detail: { id: saved.id } }))
+    } catch (e) {
+      this.retireError = (e as Error).message
+    } finally {
+      this.retireBusy = false
+    }
+  }
   render() {
     const saved = this.record?.saved
     const released = this.record?.released
@@ -179,19 +289,21 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     return html`<header>
         <div title-block><h2 title=${saved?.name || ''}>${saved?.name || i18next.t('figure.title.detail')}</h2>
           ${saved ? html`<code title=${fullName(saved)}>${fullName(saved)}</code>` : nothing}</div>
-        <button icon edit aria-label=${i18next.t('figure.button.detail-edit')} title=${i18next.t('figure.button.detail-edit')} ?disabled=${!saved}
+        ${this.record?.foreign ? nothing : html`<button icon edit aria-label=${i18next.t('figure.button.detail-edit')} title=${i18next.t('figure.button.detail-edit')} ?disabled=${!saved}
           @click=${() => {
             // The modeller shows the figure itself; a preview of it beside the editor only covers the work.
             hideDetail()
             navigate(modellerPathOf(saved))
-          }}><md-icon>edit</md-icon></button>
+          }}><md-icon>edit</md-icon></button>`}
         <button icon aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${() => hideDetail()}><md-icon>close</md-icon></button>
       </header>
       <div body>
         ${this.loading ? html`<p status role="status">${i18next.t('figure.text.detail-loading')}</p>` : nothing}
         ${this.error ? html`<div status role="alert"><p>${this.error}</p><button act @click=${() => this.show(this.figureId)}><md-icon>refresh</md-icon>${i18next.t('figure.button.detail-retry')}</button></div>` : nothing}
         ${saved ? html`<section meta>
-          ${released
+          ${released && this.record?.foreign
+            ? html`<div source><span>${i18next.t('figure.label.detail-released', { version: released.version })}</span>${saved.domain?.name ? html`<span owner>${saved.domain.name}</span>` : nothing}</div>`
+            : released
             ? html`<div source role="group" aria-label=${i18next.t('figure.label.detail-source')}>
                 <button aria-pressed=${String(this.sourceKind === 'released')} @click=${() => this.choose('released')}>${i18next.t('figure.label.detail-released', { version: released.version })}</button>
                 <button aria-pressed=${String(this.sourceKind === 'saved')} @click=${() => this.choose('saved')}>${savedLabel}</button>
@@ -205,9 +317,11 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
             <div><dt>${i18next.t('figure.label.budget-groups')}</dt><dd>${cost?.groups ?? '—'}</dd></div>
             <div><dt>${i18next.t('figure.label.budget-parts')}</dt><dd>${this.asset.appearance.length}</dd></div>
           </dl>` : nothing}
+          ${hasBeenReleased(saved) && !this.record?.foreign ? this.retireRow(saved) : nothing}
+          ${hasBeenReleased(saved) && !this.record?.foreign ? this.publishRow(saved) : nothing}
         </section>` : nothing}
         ${this.asset ? html`<figure-asset-viewer .asset=${this.asset}
-          .keepShot=${saved?.id ? (dataUrl: string) => this.keepThumbnail(saved.id, dataUrl) : undefined}>
+          .keepShot=${saved?.id && !this.record?.foreign ? (dataUrl: string) => this.keepThumbnail(saved.id, dataUrl) : undefined}>
           ${saved?.description ? html`<p slot="facts" description>${saved.description}</p>` : nothing}
           ${saved ? html`<figure-facts-list slot="facts" .asset=${this.asset} .row=${saved}></figure-facts-list>` : nothing}
         </figure-asset-viewer>` : nothing}
@@ -236,7 +350,8 @@ let openedOn: string | undefined
 function hideDetail() {
   store.dispatch({ type: UPDATE_VIEWPART, name: VIEWPART, override: { show: false } })
 }
-export function openFigureDetail(figure: Figure) {
+/** Opens the preview of a figure; `publicRow` for another domain's public figure, shown by its release alone. */
+export function openFigureDetail(figure: Figure, publicRow = false) {
   if (!dock) {
     dock = document.createElement('figure-detail-dock') as FigureDetailDock
   }
@@ -244,5 +359,5 @@ export function openFigureDetail(figure: Figure) {
   store.dispatch({ type: UPDATE_VIEWPART, name: ASSISTANT_DOCK_VIEWPART, override: { show: false } })
   appendViewpart({ name: VIEWPART, position: VIEWPART_POSITION.ASIDEBAR,
     viewpart: { show: true, persistent: true, level: VIEWPART_LEVEL.TOPMOST, template: html`${dock}` } })
-  void dock.show(figure.id)
+  void dock.show(figure.id, publicRow ? figure : undefined)
 }