@things-factory/figure-ui 10.1.5 → 10.1.6

package/client/modeller/figure-source.ts

@@ -82,14 +82,6 @@ export interface BoardModel {
   figureType?: string
   detailLevel?: DetailLevel
   styleKit?: string
-  /**
-   * 형상 전체의 기준점.
-   *
-   * **부품의 `anchor` 와 다른 것이다.** 이쪽은 점(`Vec3`)이고 저쪽은 축별로 어느 면을
-   * 붙잡느냐다. 한 형식 안에 같은 낱말이 둘인 것은 좋지 않으나, 이름을 바꾸면 저장된
-   * 원본이 따라와야 하므로 여기서 정하지 않는다.
-   */
-  anchor?: Vec3
   /**
    * 움직임. **부품 바깥에 있다** — clip 하나가 부품 여럿을 함께 움직이기 때문이다.
    *
@@ -97,6 +89,14 @@ export interface BoardModel {
    * 저장하는 것만으로 **조용히 지워지기** 때문이다.
    */
   animations?: FigureSource['animations']
+  /**
+   * 이 도형이 지는 능력. 씬의 capability mixin 이름이다.
+   *
+   * **부품이 아니라 도형 전체의 것이다** — 「이 컨베이어는 흐름의 마디다」는 부품 하나가
+   * 아니라 도형이 지는 성질이다. 부품 쪽 `capability` 는 그 능력을 **어느 부품이 받쳐
+   * 주나**를 말하는 다른 칸이다.
+   */
+  capabilities?: FigureSource['capabilities']
 }
 
 /** 부품 컴포넌트의 상태. 씬의 용어 그대로다. */
@@ -159,6 +159,13 @@ export interface PartModel {
   anchor?: FigurePart['anchor']
   repeat?: FigurePart['repeat']
   label?: FigurePart['label']
+  /**
+   * 이 부품이 능력의 어느 자리인가 — 물건이 앉는 자리(slot)이거나 드나드는 문(port)이다.
+   *
+   * 이 칸이 있는 부품은 **그려지지 않는다.** 저작면에서는 어디인지 보여야 하니 그리지만,
+   * 청사진에서는 `groups` 가 아니라 `anchors` 로 간다.
+   */
+  capability?: FigurePart['capability']
 }
 
 const RAD_TO_DEG = 180 / Math.PI
@@ -223,11 +230,11 @@ export function toFigureSource(board: BoardModel, parts: PartModel[]): FigureSou
   return withoutEmpty({
     type: board.figureType ?? '',
     base: { x: board.width, y: board.depth, z: board.height },
-    anchor: board.anchor,
     detailLevel: board.detailLevel,
     styleKit: board.styleKit,
     parts: parts.map(part => partTo(part, half)),
-    animations: board.animations
+    animations: board.animations,
+    capabilities: board.capabilities
   }) as FigureSource
 }
 
@@ -239,6 +246,13 @@ function partTo(part: PartModel, half: Vec3): FigurePart {
   })
 
   const shape = withoutEmpty({ round: part.round, path: part.path, hollow: part.hollow })
+  /*
+    재질이 하나도 없으면 **칸 자체를 안 적는다.**
+
+    빈 객체를 적으면 형식이 「재질은 있는데 무엇으로 칠할지 모른다」로 읽어
+    `material-unresolvable` 을 낸다. 그리지 않는 자리(`capability`)에는 재질이 없는 것이
+    정상이고, 그 부품이 조용히 오류를 달고 다니게 된다.
+  */
   const material = withoutEmpty({
     token: part.token,
     preset: part.preset,
@@ -262,13 +276,14 @@ function partTo(part: PartModel, half: Vec3): FigurePart {
     }),
     segments: part.segments,
     shape: Object.keys(shape).length > 0 ? shape : undefined,
-    material,
+    material: Object.keys(material).length > 0 ? material : undefined,
     materialSlot: part.materialSlot,
     keepRound: part.keepRound,
     sizing: part.sizing,
     anchor: part.anchor,
     repeat: part.repeat,
-    label: part.label
+    label: part.label,
+    capability: part.capability
   }) as FigurePart
 }
 
@@ -283,8 +298,8 @@ export function fromFigureSource(source: FigureSource): { board: BoardModel; par
     figureType: source.type,
     detailLevel: source.detailLevel,
     styleKit: source.styleKit,
-    anchor: source.anchor,
-    animations: source.animations
+    animations: source.animations,
+    capabilities: source.capabilities
   }) as BoardModel
 
   return { board, parts: source.parts.map(part => partFrom(part, half)) }
@@ -333,6 +348,7 @@ function partFrom(part: FigurePart, half: Vec3): PartModel {
     sizing: part.sizing,
     anchor: part.anchor,
     repeat: part.repeat,
-    label: part.label
+    label: part.label,
+    capability: part.capability
   }) as PartModel
 }

package/client/modeller/figure-thumbnail.ts

@@ -34,11 +34,40 @@ interface Shooter extends HTMLElement {
   snapshot?: (width?: number, height?: number) => Promise<string | undefined>
 }
 
-/** 프레임 두 장 뒤에 한 번 더 쉰다 — 씬이 서고 카메라가 자리를 잡을 틈. 씬에 그 신호가 없다. */
+/**
+ * 씬이 서고 카메라가 자리를 잡을 틈 — 프레임 두 장 뒤에 한 번 더 쉰다. 씬에 그 신호가 없다.
+ *
+ * **rAF 만 기다리면 안 된다.** 탭이 뒤로 가거나 창이 가려지면 브라우저가 rAF 를 멈추고, 그러면
+ * 이 약속이 영원히 안 풀린다. 그 위에 저장이 얹혀 있어서 저장이 통째로 멈췄다 — 단추는 잠긴 채로,
+ * 아무 말도 없이. [확인함] 2026-09-10 포커스 없는 탭에서 `saving: true` 로 고정.
+ *
+ * 그래서 시계와 함께 경주시킨다. 늦게 깨어난 쪽은 버려지고, 화면이 안 그려지는 상황이면 아래
+ * `snapshot` 이 빈 것을 돌려주거나 시간이 다 된다 — 어느 쪽이든 **저장은 계속 간다.**
+ */
 function settle(): Promise<void> {
-  return new Promise(resolve =>
+  const frames = new Promise<void>(resolve =>
     requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 150)))
   )
+
+  return Promise.race([frames, delay(600)])
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 그림을 기다리는 시간의 한도.
+ *
+ * 3D 를 세워 한 장 찍는 데 걸리는 시간은 형상과 기계에 따라 다르지만, 이 한도의 목적은 빠르기가
+ * 아니라 **저장이 멈추지 않는 것**이다. 넘으면 그림 없이 저장한다 — 정본이 그림보다 중하고,
+ * 그림은 다음에 저작면을 열 때 다시 채운다(`figure-modeller-page` 의 fillThumbnail).
+ */
+const PATIENCE = 5000
+
+/** 시간이 다 되면 없는 것으로 답한다. 던지지 않는다 — 그림이 없는 것은 실패가 아니다. */
+function within<T>(work: Promise<T>, ms: number): Promise<T | undefined> {
+  return Promise.race([work, delay(ms).then(() => undefined)])
 }
 
 export async function captureThumbnail(
@@ -66,9 +95,25 @@ export async function captureThumbnail(
 
   try {
     host.appendChild(shooter)
-    await settle()
 
-    return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
+    /*
+      **한도 안에 못 찍으면 그림 없이 간다.** 이 함수를 부르는 자리가 저장이고, 저장은 그림을
+      기다리다 멈춰서는 안 된다. 못 찍은 것은 조용히 넘기지 않고 콘솔에 남긴다 — 그림이 계속
+      안 생기면 그 줄이 단서가 된다.
+    */
+    const shot = await within(
+      (async () => {
+        await settle()
+        return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
+      })(),
+      PATIENCE
+    )
+
+    if (!shot) {
+      console.warn(`[thumbnail] ${PATIENCE}ms 안에 못 찍었습니다 — 그림 없이 저장합니다`)
+    }
+
+    return shot
   } catch (e) {
     console.warn(`[thumbnail] 세우지 못했습니다 — ${(e as Error).message}`)
     return undefined

package/client/modeller/maturity.ts

@@ -70,7 +70,7 @@ export function maturityOf(source: FigureSource, cost: FigureCost, score: Figure
 function scale(cost: FigureCost): MaturityAxis {
   const capacity = capacityFrom(cost.groups, cost.triangles)
   if (!capacity) {
-    return { key: 'scale', blocked: 'text.maturity-blocked-no-parts' }
+    return { key: 'scale', blocked: 'figure.text.maturity-blocked-no-parts' }
   }
 
   return {
@@ -79,7 +79,7 @@ function scale(cost: FigureCost): MaturityAxis {
     // 목표를 넘긴 여유는 다른 축을 고치는 데 쓰는 편이 낫다.
     ratio: Math.min(1, capacity.instances / BOARD_ASSETS),
     reading: String(capacity.instances),
-    because: 'text.maturity-scale-because'
+    because: 'figure.text.maturity-scale-because'
   }
 }
 
@@ -102,8 +102,8 @@ function consistency(source: FigureSource, cost: FigureCost): MaturityAxis {
   return {
     key: 'consistency',
     ratio: (3 - faults) / 3,
-    readingKey: faults === 0 ? 'text.maturity-consistency-clean' : 'text.maturity-consistency-faults',
-    because: 'text.maturity-consistency-because'
+    readingKey: faults === 0 ? 'figure.text.maturity-consistency-clean' : 'figure.text.maturity-consistency-faults',
+    because: 'figure.text.maturity-consistency-because'
   }
 }
 
@@ -117,7 +117,7 @@ function consistency(source: FigureSource, cost: FigureCost): MaturityAxis {
 function reuse(score: FigureScore): MaturityAxis {
   const { distinct, parts, saved } = score.reuse
   if (parts === 0) {
-    return { key: 'reuse', blocked: 'text.maturity-blocked-no-parts' }
+    return { key: 'reuse', blocked: 'figure.text.maturity-blocked-no-parts' }
   }
 
   return {
@@ -125,7 +125,7 @@ function reuse(score: FigureScore): MaturityAxis {
     // ratio 가 낮을수록 많이 되쓴다 — 뒤집어서 높은 쪽이 좋게 만든다
     ratio: 1 - distinct / parts,
     reading: String(saved),
-    because: 'text.maturity-reuse-because'
+    because: 'figure.text.maturity-reuse-because'
   }
 }
 
@@ -148,7 +148,7 @@ function detail(source: FigureSource, cost: FigureCost): MaturityAxis {
     // 절반쯤 쓴 것을 제일 좋게 본다. 텅 비어도, 넘쳐도 등급과 안 맞는다.
     ratio: used > 1 ? Math.max(0, 2 - used) : Math.min(1, used * 2),
     reading: `${cost.parts} / ${limit}`,
-    because: 'text.maturity-detail-because'
+    because: 'figure.text.maturity-detail-because'
   }
 }
 
@@ -162,7 +162,7 @@ function detail(source: FigureSource, cost: FigureCost): MaturityAxis {
  * **아무 형상도 보여 줄 수 없는 상태**다. 축 자체가 아직 없는 것이다.
  */
 function reactive(source: FigureSource): MaturityAxis {
-  return { key: 'reactive', blocked: 'text.maturity-blocked-no-binding' }
+  return { key: 'reactive', blocked: 'figure.text.maturity-blocked-no-binding' }
 }
 
 /**
@@ -205,7 +205,7 @@ function reactive(source: FigureSource): MaturityAxis {
 function readable(source: FigureSource, cost: FigureCost): MaturityAxis {
   const regions = topViewRegions(source)
   if (regions.total === 0) {
-    return { key: 'readable', blocked: 'text.maturity-blocked-no-parts' }
+    return { key: 'readable', blocked: 'figure.text.maturity-blocked-no-parts' }
   }
 
   // 배경도 한 구역으로 센다 — 발자국을 얼마나 채우나가 식별성의 일부다.
@@ -221,7 +221,7 @@ function readable(source: FigureSource, cost: FigureCost): MaturityAxis {
     key: 'readable',
     ratio: Math.min(1, entropy / ceiling),
     reading: `${regions.byMaterial.size}`,
-    because: 'text.maturity-readable-because'
+    because: 'figure.text.maturity-readable-because'
   }
 }
 

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

@@ -1,5 +1,6 @@
 import '@operato/data-grist'
 import '@material/web/icon/icon.js'
+import '../viewparts/figure-thumb.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -35,12 +36,10 @@ const CAPACITY = 'font-weight: 700; color: var(--md-sys-color-primary);'
 const UNMEASURED = 'font-style: italic; color: var(--md-sys-color-outline);'
 const RELEASED = 'font-weight: 700; color: var(--md-sys-color-primary);'
 const DRAFT = 'color: var(--md-sys-color-tertiary);'
-const badge = (low: boolean) =>
-  `padding: 0 6px; border-radius: var(--md-sys-shape-corner-small, 4px); font-weight: 700; ${
-    low
-      ? 'color: var(--md-sys-color-on-error, #fff); background-color: var(--md-sys-color-error);'
-      : 'color: var(--md-sys-color-on-primary-container); background-color: var(--md-sys-color-primary-container);'
-  }`
+/** 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다. */
+const SCORE = 'display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums;'
+const LOW_DOT =
+  'width: 5px; height: 5px; border-radius: 50%; background-color: var(--md-sys-color-error); flex: none;'
 
 /*
  * `as typeof PageView` 로 조이지 않는다 — 그렇게 하면 p13n 이 얹어 주는
@@ -78,6 +77,44 @@ export class FigureListPage extends FigureListPageBase {
         width: 100%;
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
+        /* 떠 있는 단추의 기준 상자 */
+        position: relative;
+      }
+
+      /*
+        ── 만들기 단추 ────────────────────────────────────────────────────────
+        이 화면의 주된 동작 하나. 목록 위에 떠 있고 자리를 먹지 않는다.
+
+        글자를 함께 둔다(extended FAB). 아이콘만 두면 처음 온 사람은 + 표가 무엇을 만드는지
+        모른다 — 이 화면에서 만들 수 있는 것이 무엇인지가 그 글자다.
+      */
+      button[fab] {
+        position: absolute;
+        right: var(--spacing-large, 12px);
+        bottom: var(--spacing-large, 12px);
+        z-index: 10;
+
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 18px 10px 14px;
+        font: var(--label-font, inherit);
+        font-size: 0.82rem;
+        font-weight: 600;
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border: none;
+        /* 떠 있는 것의 모서리는 알약이다 — 담는 면(6px)을 따르지 않는다 */
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+        cursor: pointer;
+      }
+      button[fab]:hover {
+        color: var(--md-sys-color-on-primary, #fff);
+        background-color: var(--md-sys-color-primary);
+      }
+      button[fab] md-icon {
+        --md-icon-size: 20px;
       }
 
       /* 격자가 바깥에 요구하는 것은 확정된 높이 하나뿐이다 — 스크롤은 격자가 안에서 한다 */
@@ -90,12 +127,18 @@ export class FigureListPage extends FigureListPageBase {
         ── 그림이 주인공인 카탈로그 ────────────────────────────────────────
         카드 기본값은 글이 많은 목록(직원·결재함)에 맞춰져 있다. 여기서는 사람이 먼저 보는 것이
         형상 그림이므로, 그림 칸을 비율로 잡아 카드 폭이 달라져도 그림이 나란히 읽히게 한다.
+
+        그림은 카드 끝까지 닿는다 — 위쪽 모서리만 카드와 같은 6px 로 깎아 한 장처럼 보이게 하고,
+        그림 안에 얹히는 초안 표시·삭제는 figure-thumb 이 그린다.
       */
       ox-grist {
         --data-card-min-width: 240px;
+        --data-card-record-card-border-radius: 6px;
+        --data-card-record-card-padding: 0;
         --data-card-thumbnail-height: auto;
         --data-card-thumbnail-aspect: 4 / 3;
-        --data-card-thumbnail-padding: var(--spacing-small);
+        --data-card-thumbnail-padding: 0;
+        --data-card-thumbnail-radius: 6px 6px 0 0;
         --data-card-thumbnail-background: var(--md-sys-color-surface-container);
 
         /*
@@ -111,6 +154,13 @@ export class FigureListPage extends FigureListPageBase {
 
         /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */
         --data-card-detail-direction: row;
+
+        /*
+          맨 위로 가는 화살표를 만들기 단추 **위로** 올린다. 둘 다 오른쪽 아래에 떠 있으므로
+          그냥 두면 겹친다 — 단추(36px + 아래 여백 12px) 위에 12px 을 띄운 자리다.
+        */
+        --data-card-fab-position-vertical: 64px;
+        --data-list-fab-position-vertical: 64px;
       }
     `
   ]
@@ -123,25 +173,26 @@ export class FigureListPage extends FigureListPageBase {
 
   get context() {
     return {
-      title: i18next.t('title.figures'),
+      title: i18next.t('figure.title.figures'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
         },
         value: this.grist?.searchText || '',
-        placeholder: i18next.t('text.search-figure-by-name-or-type')
+        placeholder: i18next.t('figure.text.search-figure-by-name-or-type')
       },
       filter: {
         handler: () => {
           this.grist.toggleHeadroom()
         }
-      },
-      actions: [
-        {
-          title: i18next.t('button.new-figure'),
-          action: () => this.openModeller()
-        }
-      ]
+      }
+      /*
+        **만들기는 `actions` 가 아니라 FAB 이다.**
+
+        `context.actions` 로 두면 페이지 바닥 줄에 글자 단추로 서는데, 그 줄은 「지금 화면에 대해
+        할 일」을 늘어놓는 자리다. 만들기는 이 화면의 유일한 주된 동작이므로 줄에 섞이지 않고
+        떠 있어야 한다. 카드를 가리지 않는 오른쪽 아래, 손이 가는 자리다(아래 render 의 [fab]).
+      */
     }
   }
 
@@ -161,6 +212,10 @@ export class FigureListPage extends FigureListPageBase {
 
         <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
+
+      <button fab title=${i18next.t('figure.button.new-figure')} @click=${() => this.openModeller()}>
+        <md-icon>add</md-icon>${i18next.t('figure.button.new-figure')}
+      </button>
     `
   }
 
@@ -179,44 +234,42 @@ export class FigureListPage extends FigureListPageBase {
       */
       emptyNote: {
         icon: 'deployed_code',
-        title: i18next.t('text.no-figure-yet'),
-        description: i18next.t('text.what-a-figure-is')
+        title: i18next.t('figure.text.no-figure-yet'),
+        description: i18next.t('figure.text.what-a-figure-is')
       },
 
       list: {
+        /* 그림 칸은 그 컬럼의 renderer 가 그린다 — 그림 없을 때의 안내까지 `figure-thumb` 안이다 */
         thumbnail: 'thumbnail',
-        /* 그림이 없는 카드도 자리는 지킨다 — 빈 사각형으로 두지 않고 왜 없는지 말한다 */
-        emptyThumbnail: {
-          icon: 'deployed_code',
-          label: i18next.t('text.thumbnail-not-made-yet')
-        },
         fields: ['name', 'type'],
         /*
-          **카드에는 고를 때 쓰는 것만 싣는다.**
+          ── 무게를 모른 채 고르게 두지 않는다 ────────────────────────────────
+          이름과 그림만 실으면 저작자는 **이 형상이 무거운지 모른 채** 고른다. 그것을 저작면에
+          들어가서야 아는 것은 늦다. 그래서 격자로 옮기기 전 손 카드가 실었던 셋을 그대로 싣는다 —
+          몇 개까지 놓을 수 있나(배치 한도) · 성숙도 · 삼각형 수.
 
-          배치 한도·성숙도·삼각형 수·수정일시까지 실어 봤더니 카드가 명세표가 되었다. 카탈로그에서
-          사람이 하는 일은 「이거다」를 고르는 것이고, 그때 보는 것은 그림과 이름이다.
+          한 줄에 뉜다(`--data-card-detail-direction: row`). 이름표는 달지 않는다 — 값 자체가
+          「625개까지」·「삼각형 440개」로 읽히고, 성숙도만 숫자 하나여서 손이 갔을 때 이름이 뜬다.
 
-          숫자는 **하나만** 남긴다 — 성숙도다. 셋 중 이것 하나가 나머지를 요약한다(배치 한도와
-          삼각형 수는 무게 한 가지만 말하는데, 성숙도는 무게·식별성·상태 표현까지 여러 축을 합친
-          값이다). 그 축별 내역과 나머지 숫자는 표 모드의 칸과 저작면에 있다.
-
-          이름표는 달지 않는다. 성숙도는 색과 숫자로 읽히고, 상태는 발행된 것에 아무 말도 하지
-          않는다(그것이 예사다) — 초안일 때만 「초안」이 뜬다.
+          상태는 이 줄에 없다. 그림 위 초안 표시가 그 일을 한다(`figure-thumb`) — 발행된 것에는
+          아무 말도 하지 않으므로 빈 칸이 생기지 않는다.
         */
-        details: ['state', 'score'],
-        /* 삭제는 손이 갈 때만 나온다 — 고르려고 보는 자리에 되돌릴 수 없는 조작을 띄우지 않는다 */
-        gutters: 'hover'
+        details: ['capacity', 'score', 'triangles']
       },
 
       columns: [
         { type: 'gutter', gutterName: 'sequence', fixed: true },
         {
+          /*
+            표 모드에서만 쓰는 삭제 칸. 카드에서는 `figure-thumb` 이 그림 위에 그리므로
+            `forList: false` 로 내린다 — 카드 아래 단추 줄은 감춰도 자리가 남는다.
+          */
           type: 'gutter',
           gutterName: 'button',
           icon: 'delete',
-          title: i18next.t('button.delete'),
+          title: i18next.t('figure.button.delete-figure'),
           danger: true,
+          forList: false,
           width: 40,
           handlers: {
             click: (_columns: any, _data: any, _column: any, record: Figure) => this.removeFigure(record)
@@ -225,7 +278,7 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'string',
           name: 'name',
-          header: i18next.t('label.name'),
+          header: i18next.t('figure.label.name'),
           record: { editable: false },
           filter: 'search',
           sortable: true,
@@ -238,7 +291,7 @@ export class FigureListPage extends FigureListPageBase {
           */
           type: 'string',
           name: 'type',
-          header: i18next.t('label.type'),
+          header: i18next.t('figure.label.figure-type'),
           record: {
             editable: false,
             renderer: (value: string) => html`<code>${value}</code>`
@@ -250,7 +303,7 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'string',
           name: 'state',
-          header: i18next.t('label.state'),
+          header: i18next.t('figure.label.state'),
           record: {
             editable: false,
             /*
@@ -263,25 +316,31 @@ export class FigureListPage extends FigureListPageBase {
             */
             renderer: (value: string, _column: any, record: Figure, _rowIndex: number, field: Element) => {
               if (value !== 'released') {
-                return html`<span style=${DRAFT}>${i18next.t('label.draft')}</span>`
+                return html`<span style=${DRAFT}>${i18next.t('figure.label.draft')}</span>`
               }
 
               /* 표에서는 칸이 비면 안 된다. 카드에서만 입을 다문다 — 그리는 자리가 알려 준다. */
               return field?.tagName === 'OX-CARD-FIELD'
                 ? ''
                 : html`<span style=${RELEASED}
-                    >${i18next.t('label.released')}
-                    ${record.version ? i18next.t('text.version-number', { version: record.version }) : ''}</span
+                    >${i18next.t('figure.label.figure-released')}
+                    ${record.version ? i18next.t('figure.text.version-number', { version: record.version }) : ''}</span
                   >`
             }
           },
-          /* 전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다 */
+          /*
+            전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다.
+
+            이름표는 비워 둔다. 단추에 「초안」·「발행됨」이라고 적혀 있으니 그 앞의 「상태」는
+            같은 말을 한 번 더 하는 것이고, 걸러 보기 줄에서 자리만 먹는다.
+          */
           filter: {
             type: 'select-buttons',
             operator: 'in',
+            label: '',
             options: [
-              { display: i18next.t('label.draft'), value: 'draft' },
-              { display: i18next.t('label.released'), value: 'released' }
+              { display: i18next.t('figure.label.draft'), value: 'draft' },
+              { display: i18next.t('figure.label.figure-released'), value: 'released' }
             ]
           },
           width: 120
@@ -295,8 +354,7 @@ export class FigureListPage extends FigureListPageBase {
           */
           type: 'string',
           name: 'capacity',
-          header: i18next.t('label.capacity'),
-          label: true,
+          header: i18next.t('figure.label.placement-limit'),
           sortable: false,
           record: {
             editable: false,
@@ -304,10 +362,10 @@ export class FigureListPage extends FigureListPageBase {
               const capacity = capacityFrom(record.groups ?? 0, record.triangles ?? 0)
 
               return capacity
-                ? html`<span style=${CAPACITY} title=${i18next.t('text.reuse-score-explained')}>
-                    ${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
+                ? html`<span style=${CAPACITY} title=${i18next.t('figure.text.reuse-score-explained')}>
+                    ${i18next.t('figure.text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
                   </span>`
-                : html`<span style=${UNMEASURED}>${i18next.t('text.not-measured-yet')}</span>`
+                : html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`
             }
           },
           width: 120
@@ -315,23 +373,27 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'float',
           name: 'score',
-          header: i18next.t('label.maturity'),
+          header: i18next.t('figure.label.maturity'),
           record: {
             editable: false,
             /*
-              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 색과 손이 갔을 때
-              뜨는 말이 알려 준다.
+              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 손이 갔을 때 뜨는
+              말이 알려 준다.
+
+              색칠한 배지로 두지 않는다. 지금 카탈로그의 열넷 중 열셋이 0 점이라(선언된 묶음 한도
+              3 을 넘긴다) 붉은 덩어리가 카드마다 서면 목록이 시끄럽고, 그러면서 아무것도 가르지
+              못한다. 숫자는 조용히 적고 낮은 것에만 **점 하나**를 붙인다.
 
-              아직 재지 않은 것을 **0 으로 보여 주지 않는다.** 0 은 「가볍다」는 뜻이 되어 버린다.
-              등급 문자(A~D)도 여기서 만들지 않는다 — 경계는 `figure-model` 이 정하고 그것을
-              화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.
+              아직 재지 않은 것을 0 으로 보여 주지 않는다 — 0 은 「가볍다」는 뜻이 되어 버린다.
+              등급 문자(A~D)도 여기서 만들지 않는다: 경계는 `figure-model` 의 `scoreOf` 가 정하고,
+              화면이 그것을 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.
             */
             renderer: (value: number | null) =>
               value == null
-                ? html`<span style=${UNMEASURED}>${i18next.t('text.not-measured-yet')}</span>`
-                : html`<span style=${badge(value < ATTENTION_BELOW)} title=${i18next.t('label.maturity')}
-                    >${Math.round(value)}</span
-                  >`
+                ? html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`
+                : html`<span style=${SCORE} title=${i18next.t('figure.label.maturity')}>
+                    ${value < ATTENTION_BELOW ? html`<i style=${LOW_DOT}></i>` : ''}${Math.round(value)}
+                  </span>`
           },
           sortable: true,
           width: 90
@@ -339,11 +401,16 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'integer',
           name: 'triangles',
-          header: i18next.t('label.triangles'),
-          label: true,
+          header: i18next.t('figure.label.triangles'),
           record: {
             editable: false,
-            renderer: (value: number | null) => (value == null ? '' : value.toLocaleString())
+            /*
+              카드에서는 이름표 없이 서므로 숫자만 두면 옆의 성숙도와 구별되지 않는다. 무엇의
+              수인지 값이 스스로 말하게 한다 — 표 모드에서는 머리글이 그 일을 하므로 겹치지만,
+              그 겹침이 카드에서 뜻을 잃는 것보다 낫다.
+            */
+            renderer: (value: number | null) =>
+              value == null ? '' : i18next.t('figure.text.triangle-count', { count: value })
           },
           sortable: true,
           width: 110
@@ -351,16 +418,35 @@ export class FigureListPage extends FigureListPageBase {
         {
           type: 'integer',
           name: 'groups',
-          header: i18next.t('label.budget-groups'),
+          header: i18next.t('figure.label.budget-groups'),
           record: { editable: false },
           hidden: true,
           width: 0
         },
         {
+          /*
+            **카드의 그림 칸 전체를 이 renderer 가 그린다.**
+
+            기본 image renderer 는 그림만 그리고, 그 위에 얹혀야 하는 것(초안 표시·삭제)은 카드
+            아래 gutter 줄로 밀린다. 격자로 옮기기 전 손 카드가 그것을 그림 위에 두었고 그 편이
+            맞다 — 그래서 그림 칸을 `figure-thumb` 에게 넘긴다. hover 가 필요해 컴포넌트여야
+            하는 사연은 그 파일에 적혀 있다.
+
+            `renderEmpty` — 그림이 아직 없는 것도 자리를 지킨다. 그 카드에도 초안 표시와 삭제가
+            있어야 하고, 「그림 없음」이라고 말하는 것도 `figure-thumb` 이 한다.
+          */
           type: 'image',
           name: 'thumbnail',
           header: i18next.t('field.thumbnail'),
-          record: { editable: false, align: 'center', wide: true },
+          record: {
+            editable: false,
+            align: 'center',
+            wide: true,
+            renderEmpty: true,
+            renderer: (_value: unknown, _column: any, record: Figure) => html`
+              <figure-thumb .figure=${record} @remove=${() => this.removeFigure(record)}></figure-thumb>
+            `
+          },
           hidden: true,
           width: 160
         },
@@ -459,7 +545,7 @@ export class FigureListPage extends FigureListPageBase {
   /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
   private async removeFigure(figure: Figure) {
     // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다
-    const message = i18next.t('text.delete-figure-confirm', { name: figure.name })
+    const message = i18next.t('figure.text.delete-figure-confirm', { name: figure.name })
     if (!confirm(message)) {
       return
     }