@things-factory/figure-ui 10.1.154 → 10.1.156

package/client/modeller/canvas.ts

@@ -4,7 +4,7 @@ import { create, Model, niceGridStep } from '@hatiolab/things-scene'
 
 import type { GizmoReach } from './gizmo.js'
 import type { FigureRenderPart } from './renderer.js'
-import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
+import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 import { boardFor, changedKeys, componentOf, gizmoResultOf, type Board, type ScaleAnchor } from './stage-model.js'
 import { JOINT_FAN } from './joint-fan.js'
 import { SLOT_MARK } from './slot-layout-host.js'

package/client/modeller/editor.ts

@@ -26,7 +26,7 @@ import './figure-controls.js'
 import './figure-clips.js'
 import './figure-preview.js'
 import './figure-settings.js'
-import { DEFAULT_VIEW, type ViewSettings } from './figure-view.js'
+import { DEFAULT_VIEW, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 import './figure-capability-panel.js'
 import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './gizmo.js'
 import type { KeyAction } from './keys.js'
@@ -35,7 +35,7 @@ import { PaneFold } from './pane-fold.js'
 import { PanelMemory } from './panel-memory.js'
 import { RefusalTeller, type Retry } from './refusal-teller.js'
 import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './fields.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { EditorStyles } from './editor-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
 import { alignChanges, canMirror, mirrorChanges, type AlignTool } from './align.js'

package/client/modeller/figure-capability-panel.ts

@@ -4,28 +4,10 @@ import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { figureBindingsOf } from '@hatiolab/figure-model'
-import type { FigureCapability, FigureAsset } from '@hatiolab/figure-model'
-import { SidePanelStyles } from './side-panel-styles.js'
-
-/*
-  One rung per set of the format's capability names. Typed as the format's names, so a misspelt rung does not pass
-  (ADR-0051 ④).
-*/
-type Rung = 'none' | 'hold' | 'flow'
-const RUNGS: Readonly<Record<Rung, readonly FigureCapability[]>> = Object.freeze({
-  none: [],
-  hold: ['Capacity', 'Holdable'],
-  flow: ['FlowNode']
-})
-
-/** Which rung a set of names is, or null when it is none of them -- not invented. */
-export function rungOf(names: readonly string[] | undefined): Rung | null {
-  const has = new Set(names ?? [])
-  if (has.size === 0) return 'none'
-  for (const [rung, wanted] of Object.entries(RUNGS) as [Rung, readonly FigureCapability[]][])
-    if (wanted.length === has.size && wanted.every(name => has.has(name))) return rung
-  return null
-}
+import type { FigureAsset } from '@hatiolab/figure-model'
+import { RUNGS, rungOf, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
+import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
 
 /**
  * 자리·능력 — what the figure does on a board: the ladder from drawing only, to
@@ -116,8 +98,8 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
             one => html`<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>
               <strong>${one.label}</strong>
               <small>
-                ${i18next.t('figure.label.place-' + one.role)} · ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·
-                ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}
+                ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·
+                ${placeTerms(one, (key, params) => i18next.t(key, params))}
               </small>
             </button>`
           )

package/client/modeller/figure-carrier.ts

@@ -6,7 +6,7 @@ import { i18next, localize } from '@operato/i18n'
 import type { FigureAsset, FigureAuthoringAction } from '@hatiolab/figure-model'
 
 import { CARRIER_AXES, carrierCommandOf, carrierDraftOf, draftIsDeclared, type CarrierAxis, type CarrierDraft } from './carrier-declaration.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 
 const AXIS_LETTER: Record<CarrierAxis, string> = { width: 'W', length: 'L', height: 'H' }
 

package/client/modeller/figure-clips.ts

@@ -7,7 +7,7 @@ import { i18next, localize } from '@operato/i18n'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
 import { clipsOf, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipTrack } from './clips.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { HelpToggles } from './help.js'
 
 /**

package/client/modeller/figure-controls.ts

@@ -6,9 +6,9 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
-import { controlsOf, poseAsDefault, poseDiffers, type Control } from './controls.js'
+import { controlsOf, poseAsDefault, poseDiffers, type Control } from '@things-factory/figure-viewer/dist-client/controls.js'
 import { dialShape } from './angle-dial.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 
 /**
  * The figure's controls and its pose tools: each value a board sets to pose the figure,

package/client/modeller/figure-face-mapping.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import type { FigureFaceMappingNeed } from '@hatiolab/figure-model'
 
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { DETACH, faceMappingRowsOf, remapOf, rowKey } from './face-mapping.js'
 
 /**

package/client/modeller/figure-links.ts

@@ -53,13 +53,14 @@ import {
   type Follow,
   type MotionForm
 } from './links.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import './figure-fasten-drawing.js'
 import type { FastenChange } from './figure-fasten-drawing.js'
 import { faceViewOf, insideAlignmentOf, modeOf, myFaceFor, turnsInPlace, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { FigureRevision } from './revision.js'
 import { HelpToggles } from './help.js'
 import { jointAxisWord } from './joint-axis.js'
+import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
 
 const FACES = Object.keys(FIGURE_FACES) as FigureFace[]
 /** The target list's entry for the plane the figure stands by. */
@@ -296,7 +297,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         one => html`<div pair>
           <span>
             <b bound>${one.label}</b>
-            <small>${roleName(one.role)} · ${one.face ? i18next.t('figure.label.face-' + one.face) : ''} · ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}</small>
+            <small>${one.face ? i18next.t('figure.label.face-' + one.face) + ' · ' : ''}${placeTerms(one, (key, params) => i18next.t(key, params))}</small>
           </span>
           <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}

package/client/modeller/figure-material-panel.ts

@@ -5,7 +5,7 @@ import { i18next, localize } from '@operato/i18n'
 import { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
 import type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { isRoundBody } from './starting-shape.js'
 import { glowOf, materialEditOf, offeredPaletteOf } from './material-edit.js'
 

package/client/modeller/figure-preview.ts

@@ -6,10 +6,10 @@ import { compileFigureAsset } from '@hatiolab/figure-model'
 import type { FigureAsset } from '@hatiolab/figure-model'
 import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
 
-import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
+import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 import { dialShape } from './angle-dial.js'
 import { derivedOf, type FigureRevision } from './revision.js'
-import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from './preview-model.js'
+import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from '@things-factory/figure-viewer/dist-client/preview-model.js'
 
 /**
  * The figure placed on a board.

package/client/modeller/figure-properties.ts

@@ -13,7 +13,7 @@ import { occupancyFromParts } from './occupancy.js'
 import { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'
 import { offeredMountingOf } from './mounting-part.js'
 import type { FigureRevision } from './revision.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
 
 const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center', 'wall']

package/client/modeller/figure-section-editor.ts

@@ -5,7 +5,7 @@ import { live } from 'lit/directives/live.js'
 import { i18next, localize } from '@operato/i18n'
 import { figureCavitySectionOf, figureSectionSidesOf } from '@hatiolab/figure-model'
 import type { FigureAuthoringAction, FigureEvaluatedShape, FigureFaceMappingNeed, FigureSection, FigureSectionMeasure, FigureSectionPoint } from '@hatiolab/figure-model'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { apexOver, cavityKeyOf, drawnOf, insertAfter, markedBy, measureNoteOf, movePoint, pointLabel, removePoint, sectionActionOf, sectionOf, workingIssuesOf, workingOf, workingShapeOf, type SectionWorking } from './section-drawing.js'
 import { cavityDepthOf, cavityRequestOf, cavityResultOf, hollowableOf, sameOf, sidesOf } from './section-controls.js'
 import './figure-cavity-drawing.js'

package/client/modeller/figure-section-panel.ts

@@ -5,7 +5,7 @@ import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
 import type { FigureAuthoringAction, FigureEvaluatedShape, FigureFaceMappingNeed } from '@hatiolab/figure-model'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { drawnOf, sectionPointsWordsOf } from './section-drawing.js'
 import './figure-cavity-drawing.js'
 import './figure-face-mapping.js'

package/client/modeller/figure-settings.ts

@@ -4,8 +4,8 @@ import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
-import { DEFAULT_VIEW, ENVIRONMENTS, SCENE_REFERENCES } from './figure-view.js'
-import type { EnvironmentName, ViewSettings } from './figure-view.js'
+import { DEFAULT_VIEW, ENVIRONMENTS, SCENE_REFERENCES } from '@things-factory/figure-viewer/dist-client/figure-view.js'
+import type { EnvironmentName, ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 
 /**
  * 저작 화면의 **보기 설정**.

package/client/modeller/figure-verdict.ts

@@ -12,7 +12,7 @@ import type { FigureInspection } from '../types.js'
 import { gateFindingStyles, renderGateFinding } from './gate-findings.js'
 import { MEASURED } from './scene-budget.js'
 import type { FigureRevision } from './revision.js'
-import { SidePanelStyles } from './side-panel-styles.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { CURVE_SIZE, curveLayout, gradeBoundsOf, shortNumber, verdictMeasureOf } from './maturity.js'
 import { newestAnswer } from './newest-answer.js'
 import type { FigureBudgetUse, FigureMaturityAxis, FigureReport } from './maturity.js'

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

@@ -16,7 +16,7 @@ import { capacityFrom } from '../modeller/scene-budget.js'
 import { deleteFigure, fetchFigureList } from '../graphql/index.js'
 import type { Figure } from '../types.js'
 import { modellerPathOf } from '../modeller/modeller-route.js'
-import { openFigureDetail } from '../viewparts/figure-detail-dock.js'
+import { FIGURE_THUMBNAIL_CHANGED, openFigureDetail } from '../viewparts/figure-detail-dock.js'
 
 /**
  * 이 값 아래면 점수를 색으로 눈에 띄게 한다.
@@ -560,6 +560,11 @@ 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)
+  }
+  private pictureChanged = () => {
+    if (this.active) this.grist?.fetch()
   }
 
   disconnectedCallback() {
@@ -567,6 +572,7 @@ export class FigureListPage extends FigureListPageBase {
       auth.off?.('profile', this.listen)
       this.listen = undefined
     }
+    window.removeEventListener(FIGURE_THUMBNAIL_CHANGED, this.pictureChanged)
     super.disconnectedCallback()
   }
 

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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
@@ -7,13 +8,17 @@ import { ScrollbarStyles } from '@operato/styles'
 import { ASSISTANT_DOCK_VIEWPART } from '@things-factory/ai-assistant/dist-client/components/assistant-dock.js'
 import { figureCostOf, parseFigureAsset, type FigureAsset } from '@hatiolab/figure-model'
 import { capacityFrom } from '../modeller/scene-budget.js'
-import { fetchFigure, fetchReleasedFigure } from '../graphql/index.js'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
+import { fetchFigure, fetchReleasedFigure, updateFigure } from '../graphql/index.js'
 import { modellerPathOf } from '../modeller/modeller-route.js'
 import { leftOpeningPage } from './detail-route.js'
 import type { Figure } from '../types.js'
-import './figure-asset-viewer.js'
+import '@things-factory/figure-viewer/dist-client/figure-asset-viewer.js'
+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'
 export interface FigureDetailRecord {
   saved: Figure
   released?: { version: number; source: string }
@@ -22,23 +27,41 @@ export interface FigureDetailRecord {
 /** Catalogue details stay while the catalogue is shown; choosing a size or a pose has no write path. */
 @customElement('figure-detail-dock')
 export class FigureDetailDock extends localize(i18next)(LitElement) {
-  static styles = [ScrollbarStyles, css`
-    :host { display: flex; flex-direction: column; width: 440px; max-width: 100vw; height: 100%; min-height: 0;
-      color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface); border-left: 1px solid var(--md-sys-color-outline-variant); font-size: 13px; }
-    header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
-    h2 { margin: 0; font-size: var(--ui-t-title, 16px); }
-    button, select { font: inherit; color: inherit; padding: 8px 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 8px; background: var(--md-sys-color-surface); cursor: pointer; }
+  /*
+    The modeller's side panel look (SidePanelStyles). What the preview is opened for sits above the model -- name, type,
+    which model is shown, how many fit -- as plain text; the controls are borderless icons and quiet text, so the model
+    and its numbers are what the eye meets.
+  */
+  static styles = [ScrollbarStyles, SidePanelStyles, css`
+    :host { display: flex; flex-direction: column; width: 400px; max-width: 100vw; height: 100%; min-height: 0;
+      background: var(--md-sys-color-surface); border-left: 1px solid var(--md-sys-color-outline-variant); }
+    header { display: flex; align-items: flex-start; gap: 2px; padding: 12px 8px 4px 16px; }
+    [title-block] { flex: 1; min-width: 0; display: grid; gap: 2px; }
+    h2 { margin: 0; font-size: var(--ui-t-title, 16px); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    code { font-family: var(--mono-font, monospace); color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    button { font: inherit; color: inherit; cursor: pointer; }
+    button:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 1px; }
+    button[icon] { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px;
+      background: transparent; color: var(--md-sys-color-on-surface-variant); }
+    button[icon]:hover:not(:disabled) { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
+    button[icon]:disabled { opacity: 0.38; cursor: default; }
+    button[icon] md-icon { --md-icon-size: 18px; }
     [body] { flex: 1; overflow: auto; min-height: 0; }
-    [meta], [status] { padding: 12px 16px; }
-    [meta] { display: grid; gap: 8px; }
-    [summary] { padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
-    h3 { margin: 0 0 8px; font-size: var(--ui-t-body, 13px); }
-    dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
-    dd { margin: 0; font-variant-numeric: tabular-nums; }
+    [meta] { display: grid; gap: 8px; padding: 0 16px 12px; }
+    /* Which model is shown: words that change colour, not boxes. */
+    [source] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; color: var(--md-sys-color-on-surface-variant); }
+    [source] button { padding: 0; border: none; background: none; color: var(--md-sys-color-on-surface-variant); }
+    [source] button:hover { color: var(--md-sys-color-on-surface); }
+    [source] button[aria-pressed='true'] { color: var(--md-sys-color-primary); font-weight: 600; }
+    dl { margin: 0; }
+    dt { color: var(--md-sys-color-on-surface-variant); }
+    dd { margin: 0; color: var(--md-sys-color-on-surface); }
+    dl[stats] { display: flex; flex-wrap: wrap; gap: 4px 16px; }
+    dl[stats] > div { display: flex; align-items: baseline; gap: 4px; }
+    dl[stats] dd { font-weight: 600; font-variant-numeric: tabular-nums; }
     p { margin: 0; line-height: 1.5; }
-    code { color: var(--md-sys-color-on-surface-variant); }
-    footer { padding: 12px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }
-    footer button { width: 100%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
+    [description] { color: var(--md-sys-color-on-surface-variant); }
+    [status] { display: grid; gap: 8px; justify-items: start; padding: 12px 16px; }
     @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%); }
     }
@@ -48,6 +71,14 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     if (!saved?.source) throw Error(i18next.t('figure.text.detail-no-source'))
     return { saved, released }
   }
+  /**
+   * Keeps the picture taken in the preview as the figure's card picture. A patch of the picture alone does not make a
+   * released figure a draft (`updateFigure`). The catalogue is told, and reads its cards again.
+   */
+  @property({ attribute: false }) keepThumbnail: (id: string, dataUrl: string) => Promise<unknown> = async (id, dataUrl) => {
+    await updateFigure(id, { thumbnail: dataUrl })
+    window.dispatchEvent(new CustomEvent(FIGURE_THUMBNAIL_CHANGED, { detail: { id } }))
+  }
   @state() private figureId = ''
   @state() private record?: FigureDetailRecord
   @state() private asset?: FigureAsset
@@ -133,38 +164,56 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
   }
   render() {
     const saved = this.record?.saved
+    const released = this.record?.released
     const cost = this.cost
     const capacity = cost ? capacityFrom(cost.groups, cost.triangles) : undefined
-    return html`<header><h2>${saved?.name || i18next.t('figure.title.detail')}</h2>
-      <button aria-label=${i18next.t('figure.button.close')} @click=${() => hideDetail()}>×</button></header>
+    const savedLabel = saved
+      ? `${i18next.t('figure.label.detail-saved')} · ${i18next.t(saved.state === 'released' ? 'figure.label.figure-released' : 'figure.label.draft')}`
+      : ''
+    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}
+          @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>
+        <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 @click=${() => this.show(this.figureId)}>${i18next.t('figure.button.detail-retry')}</button></div>` : nothing}
-        ${saved ? html`<section meta><code>${saved.type}</code><p>${saved.description || ''}</p>
-          <label>${i18next.t('figure.label.detail-source')}
-            <select aria-label=${i18next.t('figure.label.detail-source')} .value=${this.sourceKind}
-              @change=${(e: Event) => this.choose((e.target as HTMLSelectElement).value as 'saved' | 'released')}>
-              ${this.record?.released ? html`<option value="released">${i18next.t('figure.label.detail-released', { version: this.record.released.version })}</option>` : nothing}
-              <option value="saved">${i18next.t('figure.label.detail-saved')} · ${i18next.t(saved.state === 'released' ? 'figure.label.figure-released' : 'figure.label.draft')}</option>
-            </select></label>
-          ${!this.record?.released ? html`<p>${i18next.t('figure.text.detail-unreleased')}</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
+            ? 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>
+              </div>`
+            : html`<div source><span title=${i18next.t('figure.text.detail-unreleased')}>${savedLabel}</span></div>`}
+          ${this.asset ? html`<dl stats>
+            <div><dt>${i18next.t('figure.label.placement-limit')}</dt><dd>${capacity
+              ? i18next.t('figure.text.fits-n-instances', { n: capacity.instances.toLocaleString() })
+              : i18next.t('figure.text.not-measured-yet')}</dd></div>
+            <div><dt>${i18next.t('figure.label.triangles')}</dt><dd>${cost?.triangles.toLocaleString() ?? '—'}</dd></div>
+            <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}
+          ${saved.description ? html`<p description>${saved.description}</p>` : nothing}
         </section>` : nothing}
-        ${this.asset ? html`<figure-asset-viewer .asset=${this.asset}></figure-asset-viewer>
-          <section summary><h3>${i18next.t('figure.label.detail-summary')}</h3><dl>
-            <dt>${i18next.t('figure.label.budget-parts')}</dt><dd>${this.asset.appearance.length}</dd>
-            <dt>${i18next.t('figure.label.budget-groups')}</dt><dd>${cost?.groups ?? '—'}</dd>
-            <dt>${i18next.t('figure.label.triangles')}</dt><dd>${cost?.triangles ?? '—'}</dd>
-          </dl>${capacity ? html`<p>${i18next.t('figure.text.parts-budget', { triangles: cost!.triangles, groups: cost!.groups, instances: capacity.instances })}</p>` : nothing}
-          </section>` : nothing}
-      </div>
-      <footer><button ?disabled=${!saved} @click=${() => {
-        // The modeller shows the figure itself; a preview of it beside the editor only covers the work.
-        hideDetail()
-        navigate(modellerPathOf(saved))
-      }}>${i18next.t('figure.button.detail-edit')}</button></footer>`
+        ${this.asset ? html`<figure-asset-viewer .asset=${this.asset}
+          .keepShot=${saved?.id ? (dataUrl: string) => this.keepThumbnail(saved.id, dataUrl) : undefined}>
+          ${saved ? html`<figure-facts-list slot="facts" .asset=${this.asset} .row=${saved}></figure-facts-list>` : nothing}
+        </figure-asset-viewer>` : nothing}
+      </div>`
   }
 }
 
+/** The name a board stores: `{namespace}/{type}` (ADR-0114). */
+function fullName(figure: Figure): string {
+  return figure.namespace ? `${figure.namespace}/${figure.type}` : figure.type
+}
+
 function visibleBar(root: Document | ShadowRoot): Element | undefined {
   for (const element of root.querySelectorAll('*')) {
     if (element.tagName === 'OX-CANVAS-BAR' && element.getBoundingClientRect().height > 0) return element

package/client/viewparts/figure-thumb.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import '@things-factory/figure-viewer/dist-client/figure-thumb-mark.js'
 import { getPathInfo } from '@operato/utils'
 
 import type { Figure } from '../types.js'
@@ -67,24 +68,6 @@ export class FigureThumb extends localize(i18next)(LitElement) {
       object-fit: contain;
     }
 
-    /* 아직 그림이 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */
-    div[empty] {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: var(--spacing-tiny, 4px);
-      width: 100%;
-      height: 100%;
-      font: var(--label-font, inherit);
-      font-size: 0.7rem;
-      color: var(--md-sys-color-outline);
-    }
-    div[empty] md-icon {
-      --md-icon-size: 26px;
-      color: var(--md-sys-color-outline-variant);
-    }
-
     /*
       초안 표시.
 
@@ -208,10 +191,7 @@ export class FigureThumb extends localize(i18next)(LitElement) {
       ${src
         ? html`<img src=${src} alt=${figure.name || ''} loading="lazy" />`
         : html`
-            <div empty>
-              <md-icon>deployed_code</md-icon>
-              ${i18next.t('figure.text.thumbnail-not-made-yet')}
-            </div>
+            <figure-thumb-mark .label=${i18next.t('figure.text.thumbnail-not-made-yet')}></figure-thumb-mark>
           `}
       ${figure.state === 'released' ? '' : html`<span draft>${i18next.t('figure.label.draft')}</span>`}
       ${figure.tags?.length

package/dist-client/modeller/canvas.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, type PropertyValues } from 'lit';
 import type { GizmoReach } from './gizmo.js';
 import type { FigureRenderPart } from './renderer.js';
-import { type ViewSettings } from './figure-view.js';
+import { type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js';
 import { type ScaleAnchor } from './stage-model.js';
 export declare class FigureCanvas extends LitElement {
     static styles: import("lit").CSSResult;

package/dist-client/modeller/canvas.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { create, Model, niceGridStep } from '@hatiolab/things-scene';
-import { DEFAULT_VIEW, sceneLook, WORKBENCH } from './figure-view.js';
+import { DEFAULT_VIEW, sceneLook, WORKBENCH } from '@things-factory/figure-viewer/dist-client/figure-view.js';
 import { boardFor, changedKeys, componentOf, gizmoResultOf } from './stage-model.js';
 import { JOINT_FAN } from './joint-fan.js';
 import { SLOT_MARK } from './slot-layout-host.js';