@things-factory/figure-ui 10.1.4 → 10.1.6

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

@@ -1,6 +1,18 @@
 import '@material/web/icon/icon.js'
 import '../modeller/figure-side.js'
 import '../modeller/figure-ask.js'
+/*
+  대화 도크. **`/client` 서브패스로 적으면 안 된다.**
+
+  그 패키지에 `exports` 맵이 없어서 `/client` 는 소스 디렉터리로 떨어지고, webpack 이 `.ts` 를 직접
+  컴파일한다. 그 경로로 나온 데코레이터가 `Reflect.metadata` 를 가드 없이 불러 **브라우저에서만**
+  죽는다(빌드 로그는 오류 0건). board-ai 와 plant 가 차례로 밟았다.
+
+  그리고 더 센 이유가 있다 — `board-ui/dist-client` 의 모델러가 같은 엘리먼트를 **빌드된 경로로**
+  등록한다. 다른 경로로 적으면 webpack 이 두 모듈로 보고, 두 곳이 같은 커스텀 엘리먼트 이름을
+  등록해 나중에 뜨는 화면이 죽는다. 즉 「어느 경로가 되나」가 아니라 **「모두 같은 경로여야 한다」**다.
+*/
+import '@things-factory/ai-assistant/dist-client/index.js'
 import '../modeller/figure-canvas.js'
 import { captureThumbnail } from '../modeller/figure-thumbnail.js'
 import '../modeller/figure-preview.js'
@@ -13,6 +25,7 @@ import { customElement, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { navigate, PageView } from '@operato/shell'
 import { validate } from '@hatiolab/figure-model'
+import { activePalette } from '@hatiolab/things-scene'
 import type { DetailLevel, FigureSource, PrimitiveKind } from '@hatiolab/figure-model'
 
 import * as edits from '../modeller/part-edits.js'
@@ -68,29 +81,23 @@ function rememberPanes(panes: Panes): void {
 }
 
 /**
- * 새로 만든 Figure 의 시작 상태. **씬 모델로 만든다.**
+ * 새로 만든 Figure 의 시작 상태 — **빈 상자 하나뿐이다.**
  *
- * 빈 상태로 시작하면 검증이 곧바로 오류를 낸다 — 사용자가 아무것도 하지 않았는데 빨간
- * 화면을 보게 된다. 그래서 부품 하나를 놓아 준다. **처음 열었을 때 바로 무언가 보이는
- * 것**이 이 도구를 익히는 첫 단계다.
+ * 전에는 부품(300 상자)을 하나 놓아 주었다. 형식이 부품 0개를 오류로 보기 때문이다
+ * (`missing-parts` — parts 가 없다). 그래서 아무것도 안 했는데 붉은 판정이 뜨는 것을 피하려고
+ * 상자를 깔았다.
+ *
+ * **그런데 「무조건 상자」는 대개 첫 동작이 그것을 지우는 일이 된다** — 컨베이어를 만들 사람도,
+ * 시그널타워를 만들 사람도 상자부터 치운다. 그래서 비운다. 형식은 그대로 두고(부품 없는 것은
+ * 발행할 수 없는 것이 맞다) **화면이 「아직 저작 안 함」과 「형식을 어김」을 가른다.**
+ *
+ * 빈 화면이 가르치는 자리다: 부품 목록이 「위에서 도형을 골라 시작하세요」를 이미 말하고 팔레트가
+ * 바로 그 위에 있다(`figure-parts`).
  */
 function startingModel(type: string): { board: BoardModel; parts: PartModel[] } {
   return {
     board: { width: 300, height: 300, depth: 300, figureType: type, detailLevel: 'M' },
-    parts: [
-      {
-        type: 'figure-part',
-        name: 'body',
-        primitive: 'cube',
-        left: 0,
-        top: 0,
-        width: 300,
-        height: 300,
-        zPos: 0,
-        depth: 300,
-        token: 'palette.primary'
-      }
-    ]
+    parts: []
   }
 }
 
@@ -140,10 +147,50 @@ export class FigureModellerPage extends FigureModellerPageBase {
     div[edits] {
       flex: 1;
       display: grid;
-      grid-template-columns: 220px 1fr 320px;
+      grid-template-columns: 220px 1fr 320px 0;
       min-height: 0;
       overflow: hidden;
     }
+    /*
+      대화 도크는 **불렀을 때만 자리를 받는다.** 저작의 주인공은 캔버스이고, 대화는 필요할 때
+      여는 것이다. 늘 열어 두면 넷으로 나뉜 화면에서 캔버스가 가장 좁아진다.
+    */
+    div[edits][dock] {
+      grid-template-columns: 220px 1fr 320px 360px;
+    }
+    div[edits] > ox-board-ai-chat {
+      grid-column: 4;
+      min-width: 0;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
+      background-color: var(--md-sys-color-surface-container-lowest);
+    }
+    div[edits]:not([dock]) > ox-board-ai-chat {
+      display: none;
+    }
+
+    /* 도크를 여는 손잡이. 머리줄의 저장 단추 옆에 둔다 */
+    button[dock] {
+      flex: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 5px 10px;
+      font: var(--label-font, inherit);
+      font-size: 0.78rem;
+      color: var(--md-sys-color-on-surface-variant);
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    button[dock][on] {
+      color: var(--md-sys-color-primary);
+      border-color: var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-surface-container);
+    }
+    button[dock] md-icon {
+      font-size: 16px;
+    }
 
     /*
       **세 칸의 자리를 못 박는다.**
@@ -251,6 +298,23 @@ export class FigureModellerPage extends FigureModellerPageBase {
       cursor: default;
     }
 
+    /*
+      저장이 거절된 사유. 단추 **바로 왼쪽**에 둔다 — 누른 자리에서 답을 봐야 한다. 길면 줄이지만
+      전문은 title 로 남긴다(서버 문장이 길 수 있다).
+    */
+    span[save-failed] {
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 4px 8px;
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+      border-radius: 6px;
+    }
+
     /*
       칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
       고른 것의 속성. 쓰는 사람이 이미 아는 자리라 배울 것이 하나 줄어든다.
@@ -510,6 +574,18 @@ export class FigureModellerPage extends FigureModellerPageBase {
   @state() private dirty = false
   @state() private saving = false
   @state() private violations: FigureFinding[] = []
+  /**
+   * 저장이 왜 안 됐나.
+   *
+   * **`save()` 에 `catch` 가 없었다.** `try … finally` 뿐이라 서버가 거절하면(형식 위반 · 타입 이름
+   * 중복 · 권한 없음 · 네트워크) 단추만 멈추고 화면은 **아무 말도 하지 않았다.** 저작자는 눌렀는데
+   * 아무 일도 안 난 것으로 보고, 저장됐는지 아닌지도 알 수 없었다.
+   *
+   * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
+   */
+  @state() private saveFailure = ''
+  /** 대화 도크가 열려 있나. 저작면의 보기 상태라 저장하지 않는다. */
+  @state() private dockOpen = false
   /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
   @state() private proposal?: FigureSource
   /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
@@ -533,7 +609,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
   get context() {
     return {
-      title: this.figure?.name ?? i18next.t('title.new-figure'),
+      title: this.figure?.name ?? i18next.t('figure.title.new-figure'),
       /*
         **제목 줄은 끈다.** 이름은 그대로 둔다.
 
@@ -558,7 +634,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
           하네스 시절의 자리였다 — 앱에서는 셸이 페이지 제목으로 같은 이름을 그리므로 글자가 두 번
           나오고, 캔버스가 주인공인 화면에서 그만큼 높이를 잃었다.
         -->
-        ${this.dirty ? html`<span dirty>${i18next.t('text.unsaved-changes')}</span>` : ''}
+        ${this.dirty ? html`<span dirty>${i18next.t('figure.text.unsaved-changes')}</span>` : ''}
         <!--
           말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
           이름을 페이지 제목과 겹쳐 적는다.
@@ -568,8 +644,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
           .type=${source?.type ?? ''}
           @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
         ></figure-ask>
+        ${this.saveFailure ? html`<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
+        <button
+          dock
+          ?on=${this.dockOpen}
+          title=${i18next.t('figure.text.dock-explained')}
+          @click=${() => (this.dockOpen = !this.dockOpen)}
+        >
+          <md-icon>forum</md-icon>${i18next.t('figure.button.dock')}
+        </button>
         <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
-          ${this.saving ? i18next.t('text.saving') : i18next.t('button.save')}
+          ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
         </button>
       </div>
 
@@ -577,7 +662,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
         edits
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
+        ?dock=${this.dockOpen}
         @figure-rename=${(e: CustomEvent) => this.rename(e.detail.name)}
+        @figure-released=${(e: CustomEvent) => this.released(e.detail.figure)}
+        @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
         @add-part=${(e: CustomEvent) => this.addPart(e.detail.primitive)}
         @select-part=${(e: CustomEvent) => (this.selected = e.detail.index)}
         @remove-part=${(e: CustomEvent) => this.removePart(e.detail.index)}
@@ -589,6 +677,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
         @toggle-part-hidden=${(e: CustomEvent) => this.toggleHidden(e.detail.index)}
         @set-all-parts-hidden=${(e: CustomEvent) => this.setAllHidden(e.detail.hidden)}
         @change-detail-level=${(e: CustomEvent) => this.changeDetailLevel(e.detail.level)}
+        @update-board=${(e: CustomEvent) => this.updateBoard(e.detail.board)}
         @part-tool=${(e: CustomEvent) => this.runTool(e.detail.index, e.detail.tool, e.detail.axis)}
         @pick-part=${(e: CustomEvent) => this.pickPart(e.detail.name)}
       >
@@ -605,7 +694,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
             ? html`
                 <div lanes>
                   <div lane>
-                    <h4>${i18next.t('label.now')}</h4>
+                    <h4>${i18next.t('figure.label.now')}</h4>
                     <figure-canvas
                       .board=${this.board}
                       .parts=${this.parts}
@@ -615,11 +704,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
                   </div>
                   <div lane candidate>
                     <h4>
-                      ${i18next.t('label.proposed')}
+                      ${i18next.t('figure.label.proposed')}
                       ${this.proposalOf
                         ? html`<small>
                             ${this.proposalOf.grade} ·
-                            ${i18next.t('text.n-triangles', { count: this.proposalOf.triangles })}
+                            ${i18next.t('figure.text.n-triangles', { count: this.proposalOf.triangles })}
                           </small>`
                         : ''}
                     </h4>
@@ -638,6 +727,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
         <figure-side
           .figureName=${this.figure?.name ?? ''}
+          .figureId=${this.figure?.id ?? ''}
+          .figureState=${this.figure?.state}
+          .figureVersion=${this.figure?.version ?? 0}
+          .dirty=${this.dirty}
           .board=${this.board}
           .parts=${this.parts}
           .source=${source}
@@ -645,10 +738,71 @@ export class FigureModellerPage extends FigureModellerPageBase {
           .view=${this.view}
           @update-view=${(e: CustomEvent) => (this.view = e.detail.view)}
         ></figure-side>
+
+        <!-- 대화 도크. 무엇을 켜고 끄는지는 renderDock 위에 적어 두었다 -->
+        <ox-board-ai-chat
+          .boardTools=${false}
+          .toolCategories=${['figure-authoring']}
+          .hostContext=${this.hostContext}
+          .placeholder=${i18next.t('figure.text.dock-placeholder')}
+          @board-ai-proposal-execute=${(e: CustomEvent) => this.takeProposal(e.detail.proposal)}
+        ></ox-board-ai-chat>
       </div>
     `
   }
 
+  /*
+   * ── 대화 도크를 무엇으로 켜나 ───────────────────────────────────────────────
+   *
+   * board 의 컴포넌트를 그대로 쓰지만 **board 인 척하지 않는다.** `boardTools` 를 끄고 figure 의
+   * 도구 범주(`figure-authoring`)만 연다. 끄지 않으면 보드 편집 도구가 함께 들려, 모델이 이
+   * 화면에서 할 수 없는 일을 시도한다.
+   *
+   * board 모양의 인자(`currentBoard` · `knownTypes` · `componentSchemas` · `selectedRefids`)는
+   * 주지 않는다 — 전부 선택이고, 채우려면 없는 것을 지어내야 한다.
+   */
+
+  /**
+   * 어시스턴트가 「지금 무엇을 열고 있나」를 아는 길.
+   *
+   * 도구가 대상을 안 받았을 때 이 문맥에서 해소한다 — 사용자에게 식별자를 되묻지 않는다.
+   * 팔레트도 함께 보낸다: 모르면 모델이 색을 지어내고, 그 후보는 검증을 지나 **그리는 시점에**
+   * 죽는다.
+   */
+  private get hostContext() {
+    return {
+      surface: 'figure-modeller',
+      figureId: this.figure?.id || undefined,
+      figureType: this.board?.figureType,
+      figureName: this.figure?.name,
+      palette: Object.keys(activePalette() as Record<string, string>)
+    }
+  }
+
+  /**
+   * 도크의 후보를 받는다.
+   *
+   * **후보가 화면에 닿는 길은 하나뿐이다** — 말로 시키는 줄이든 도크든 `receive()` 로 모인다.
+   * 두 길을 두면 「지금 / 후보」 두 칸을 두 곳에서 그리게 되고, 어느 쪽이 이기는지 저작자가
+   * 매번 생각해야 한다.
+   */
+  private takeProposal(proposal: any) {
+    const source = proposal?.source
+    if (!source) {
+      // 카드는 왔는데 후보가 없다 — 조용히 넘기지 않는다. 저작자가 눌렀으니 답이 있어야 한다.
+      this.saveFailure = i18next.t('figure.text.proposal-had-no-source')
+      return
+    }
+
+    this.receive({
+      source: JSON.stringify(source),
+      grade: proposal.score?.grade ?? '',
+      triangles: proposal.cost?.triangles ?? 0,
+      groups: proposal.cost?.groups ?? 0,
+      attempts: proposal.attempts ?? 1
+    })
+  }
+
   /**
    * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
    *
@@ -671,10 +825,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
       <button
         mode
         ?on=${this.mode === mode}
-        title=${i18next.t('text.mode-' + mode + '-explained')}
+        title=${i18next.t('figure.text.mode-' + mode + '-explained')}
         @click=${() => (this.mode = mode)}
       >
-        ${i18next.t('label.mode-' + mode)}
+        ${i18next.t('figure.label.mode-' + mode)}
       </button>
     `
 
@@ -700,7 +854,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     return html`
       <button
         collapse
-        title=${i18next.t(`text.${gone ? 'expand' : 'collapse'}-${pane}-pane`)}
+        title=${i18next.t(`figure.text.${gone ? 'expand' : 'collapse'}-${pane}-pane`)}
         @click=${() => this.toggleCollapse(side)}
       >
         <md-icon>${gone ? back : shut}</md-icon>
@@ -749,11 +903,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     return html`
       <div decide>
-        <span>${i18next.t('text.assistant-proposed-a-figure')}</span>
+        <span>${i18next.t('figure.text.assistant-proposed-a-figure')}</span>
         <div spacer></div>
-        <button drop @click=${() => this.discard()}>${i18next.t('button.discard')}</button>
+        <button drop @click=${() => this.discard()}>${i18next.t('figure.button.discard')}</button>
         <button take ?disabled=${errors.length > 0 || this.picked.size === 0} @click=${() => this.take()}>
-          ${i18next.t('button.take-n-changes', { n: this.picked.size })}
+          ${i18next.t('figure.button.take-n-changes', { n: this.picked.size })}
         </button>
       </div>
 
@@ -765,7 +919,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
           `
         : ''}
       ${errors.length > 0
-        ? html`<p blocked>${i18next.t('text.picked-changes-do-not-validate')} — ${errors[0].message}</p>`
+        ? html`<p blocked>${i18next.t('figure.text.picked-changes-do-not-validate')} — ${errors[0].message}</p>`
         : violations.length > 0
           ? html`<p blocked warn>${violations[0].message}</p>`
           : ''}
@@ -790,7 +944,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
       <button
         change
         ?on=${on}
-        title=${i18next.t('text.change-' + change.kind)}
+        title=${i18next.t('figure.text.change-' + change.kind)}
         @click=${() => this.toggle(change.key)}
       >
         <md-icon>${icon}</md-icon>
@@ -860,9 +1014,18 @@ export class FigureModellerPage extends FigureModellerPageBase {
    *
    * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
    * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+   *
+   * ## 바뀐 것이 없으면 누를 수 없다
+   *
+   * **`dirty` 를 안 보고 있었다.** 저장한 직후에도 단추가 살아 있어 같은 정본을 몇 번이고 다시 쓸
+   * 수 있었고, 저장마다 썸네일을 새로 찍어 20KB 를 다시 넣고 `thumbnailUpdatedAt` 을 올렸다 —
+   * 그림 주소의 판이 바뀌므로 브라우저 캐시도 함께 버려진다. 바뀐 것이 없는데 일어날 일이 아니다.
+   *
+   * 새로 만드는 중인 것은 `startNew` 가 `dirty` 로 시작하므로 첫 저장이 막히지 않는다.
+   * 저장이 거절되면 `dirty` 를 그대로 두므로 다시 누를 수 있다.
    */
   private get canSave(): boolean {
-    if (this.saving || !this.folded || !this.figure?.name) {
+    if (this.saving || !this.dirty || !this.folded || !this.figure?.name) {
       return false
     }
     return validate(this.folded).errors.length === 0
@@ -874,9 +1037,41 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     const id = lifecycle?.resourceId
-    if (id && id !== this.figure?.id) {
-      await this.load(id)
-    } else if (!id && !this.figure) {
+
+    if (id) {
+      if (id !== this.figure?.id) {
+        await this.load(id)
+      }
+      return
+    }
+
+    /*
+      ── id 없이 들어온 것은 「새로 만든다」는 뜻이다 ─────────────────────────────
+      전에는 `!this.figure` 일 때만 새로 시작했다. 셸은 페이지를 살려 두므로(MDI 탭) 카탈로그에서
+      하나 열어 본 뒤에는 이 페이지가 그 도형을 계속 들고 있고, 그래서 「새 figure」가 **아무 일도
+      하지 않았다.**
+
+      그것보다 나쁜 것이 있었다 — 화면에는 옛 도형이 그대로 있으니 사람은 새 것인 줄 알고 고치고
+      저장한다. 그러면 **열려 있던 도형에 덮어쓴다.** 「안 열린다」로 보이던 것이 실은 그 문이었다.
+
+      들고 있는 것이 **저장된 도형이면**(id 가 있으면) 새로 시작한다. 아직 저장 안 한 새 도형을
+      들고 있으면 그대로 둔다 — 페이지를 다시 들렀다고 저작 중인 것을 버리지 않는다.
+    */
+    if (!this.figure) {
+      this.startNew()
+      return
+    }
+
+    if (this.figure.id) {
+      /*
+        고치던 것이 있으면 묻는다. 저작한 것을 말없이 버리지 않는다 — 되돌릴 수 없다.
+        그만두면 보고 있던 도형의 주소로 되돌려 화면과 주소가 어긋나지 않게 한다.
+      */
+      if (this.dirty && !confirm(i18next.t('figure.text.discard-changes-and-start-new'))) {
+        navigate(`figure-modeller/${this.figure.id}`, true)
+        return
+      }
+
       this.startNew()
     }
   }
@@ -886,8 +1081,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     this.figure = figure
 
-    /* 그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다. */
-    if (!figure.thumbnail && figure.id) {
+    /*
+      그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다.
+
+      **`thumbnail` 이 아니라 `thumbnailUpdatedAt` 으로 판정한다.** 그림 자체는 목록·낱개 질의가
+      가져오지 않는다(base64 라서 무겁고 캐시가 안 된다 — 주소로 부른다). 없는 칸으로 판정하면
+      늘 「그림이 없다」가 되어 저작면을 열 때마다 다시 찍어 저장하게 된다.
+    */
+    if (!figure.thumbnailUpdatedAt && figure.id) {
       void this.fillThumbnail(figure.id)
     }
 
@@ -921,7 +1122,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.figure = { id: '', type: draftType, name: '' } as Figure
     this.board = board
     this.parts = parts
-    this.selected = 0
+    /* 고른 것이 없다 — 부품이 없으니 속성 패널도 고를 것을 기다린다. */
+    this.selected = -1
     this.dirty = true
     this.violations = []
   }
@@ -967,6 +1169,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.put(edits.updatePart(this.parts, index, part))
   }
 
+  /**
+   * 판 자체의 값을 갈아 끼운다 — 능력처럼 부품보다 위에 있는 것들.
+   *
+   * 부품 목록은 건드리지 않는다. `put` 은 부품을 함께 받으므로 여기서 쓰면 능력 하나를
+   * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
+   */
+  private updateBoard(board: BoardModel) {
+    this.board = board
+    this.dirty = true
+  }
+
   /**
    * 디테일 등급을 바꾼다.
    *
@@ -1070,6 +1283,22 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 그림만 보낸다. 정본을 건드리지 않으므로 미저장 표시도 켜지 않는다 — 열어 봤다는 것이 고쳤다는
    * 뜻이 되면 저작자가 저장할지 말지를 매번 고민한다.
    */
+  /**
+   * 발행되었다 — **정본을 든 자리가 그 사실을 받는다.**
+   *
+   * 이력 패널은 발행을 시키고 결과를 알릴 뿐, 이 페이지의 상태를 고쳐 쓰지 않는다. 판 번호와 상태가
+   * 여기서 갱신되어야 머리줄·이력 탭이 같은 것을 본다.
+   *
+   * 정본(source)은 발행이 건드리지 않으므로 다시 불러오지 않는다 — 저작 중인 화면을 되감지 않는다.
+   */
+  private released(figure: Figure): void {
+    if (!this.figure || figure?.id !== this.figure.id) {
+      return
+    }
+
+    this.figure = { ...this.figure, version: figure.version, state: figure.state, updatedAt: figure.updatedAt }
+  }
+
   private async fillThumbnail(id: string): Promise<void> {
     await this.updateComplete
 
@@ -1079,8 +1308,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     try {
-      await updateFigure(id, { thumbnail })
-      this.figure = { ...this.figure, thumbnail }
+      const { figure } = await updateFigure(id, { thumbnail })
+      /* 서버가 찍은 시각을 그대로 받는다 — 이 값이 그림을 부르는 주소의 판 번호가 된다. */
+      this.figure = { ...this.figure, thumbnailUpdatedAt: figure?.thumbnailUpdatedAt }
     } catch (e) {
       /* 볼 권한만 있는 사람일 수 있다. 화면은 그대로 두고 조용히 넘어간다. */
       console.warn(`[thumbnail] ${id} 를 채우지 못했습니다 — ${(e as Error).message}`)
@@ -1093,6 +1323,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     this.saving = true
+    this.saveFailure = ''
     try {
       const sourceJson = JSON.stringify(this.folded)
       /*
@@ -1118,7 +1349,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
         // 만든 뒤에는 고칠 수 없으므로 여기서 걸러야 한다.
         const taken = await fetchFigureTypeNames()
         if (taken.includes(this.folded.type)) {
-          throw new Error(i18next.t('text.type-name-already-taken', { type: this.folded.type }))
+          throw new Error(i18next.t('figure.text.type-name-already-taken', { type: this.folded.type }))
         }
 
         const result = await createFigure({
@@ -1133,6 +1364,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
       }
 
       this.dirty = false
+    } catch (e) {
+      /*
+        **서버가 말한 사유를 그대로 올린다.** 여기서 문장을 다시 지으면 무엇이 걸렸는지 알 수 없다 —
+        타입 이름이 이미 쓰였다는 것과 권한이 없다는 것은 저작자가 할 일이 다르다.
+
+        `dirty` 는 건드리지 않는다. 저장이 안 됐으므로 미저장인 것이 사실이다.
+      */
+      this.saveFailure = (e as Error).message
     } finally {
       this.saving = false
     }

package/client/types.ts

@@ -30,6 +30,23 @@ export interface Figure {
   version?: number
 }
 
+/**
+ * 발행된 판 하나.
+ *
+ * 저작 중 저장은 여기 오지 않는다 — 판본은 발행에서만 생긴다.
+ */
+export interface FigureVersion {
+  version: number
+  /** 발행하며 남긴 말. */
+  comment?: string
+  state?: 'draft' | 'released'
+  updatedAt?: string
+  updater?: { id: string; name: string }
+  score?: number
+  triangles?: number
+  groups?: number
+}
+
 export interface FigureListResult {
   items: Figure[]
   total: number
@@ -94,3 +111,28 @@ export interface FigureProposal {
   /** 몇 번 만에 됐나. 진단용이다. */
   attempts: number
 }
+
+/**
+ * 발행 판정 한 줄.
+ *
+ * `FigureFinding` 과 달리 **`blocking` 이 있다.** 저장 쪽 발견은 정의상 막지 않는 것들이고,
+ * 발행 판정은 막는 것과 알리는 것을 함께 내므로 어느 쪽인지를 값이 스스로 말한다 — 코드를 보고
+ * 화면이 다시 분류하면 규칙이 두 벌이 된다.
+ */
+export interface FigureGateFinding {
+  code: string
+  message: string
+  /** 왜 그것이 문제인가 — 사람이 무엇을 보게 되나. */
+  why?: string
+  /** 무엇을 바꾸면 되나 — 부품 이름과 값으로. */
+  how?: string
+  /** 갈라진 부품 이름들, 또는 정본 안의 경로. */
+  at?: string
+  blocking: boolean
+}
+
+/** 발행해도 되나. `blocked` 면 서버가 거절한다. */
+export interface FigureInspection {
+  blocked: boolean
+  findings: FigureGateFinding[]
+}