@things-factory/figure-ui 10.1.4 → 10.1.6

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

@@ -2,6 +2,18 @@ import { __decorate, __metadata } from "tslib";
 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';
@@ -12,6 +24,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 * as edits from '../modeller/part-edits.js';
 import * as proposals from '../modeller/proposal.js';
 import { toFigureSource, fromFigureSource } from '../modeller/figure-source.js';
@@ -47,29 +60,23 @@ function rememberPanes(panes) {
     }
 }
 /**
- * 새로 만든 Figure 의 시작 상태. **씬 모델로 만든다.**
+ * 새로 만든 Figure 의 시작 상태 — **빈 상자 하나뿐이다.**
+ *
+ * 전에는 부품(300 상자)을 하나 놓아 주었다. 형식이 부품 0개를 오류로 보기 때문이다
+ * (`missing-parts` — parts 가 없다). 그래서 아무것도 안 했는데 붉은 판정이 뜨는 것을 피하려고
+ * 상자를 깔았다.
+ *
+ * **그런데 「무조건 상자」는 대개 첫 동작이 그것을 지우는 일이 된다** — 컨베이어를 만들 사람도,
+ * 시그널타워를 만들 사람도 상자부터 치운다. 그래서 비운다. 형식은 그대로 두고(부품 없는 것은
+ * 발행할 수 없는 것이 맞다) **화면이 「아직 저작 안 함」과 「형식을 어김」을 가른다.**
  *
- * 빈 상태로 시작하면 검증이 곧바로 오류를 낸다 — 사용자가 아무것도 하지 않았는데 빨간
- * 화면을 보게 된다. 그래서 부품 하나를 놓아 준다. **처음 열었을 때 바로 무언가 보이는
- * 것**이 이 도구를 익히는 첫 단계다.
+ * 빈 화면이 가르치는 자리다: 부품 목록이 「위에서 도형을 골라 시작하세요」를 이미 말하고 팔레트가
+ * 바로 그 위에 있다(`figure-parts`).
  */
 function startingModel(type) {
     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: []
     };
 }
 /**
@@ -122,6 +129,18 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.dirty = false;
         this.saving = false;
         this.violations = [];
+        /**
+         * 저장이 왜 안 됐나.
+         *
+         * **`save()` 에 `catch` 가 없었다.** `try … finally` 뿐이라 서버가 거절하면(형식 위반 · 타입 이름
+         * 중복 · 권한 없음 · 네트워크) 단추만 멈추고 화면은 **아무 말도 하지 않았다.** 저작자는 눌렀는데
+         * 아무 일도 안 난 것으로 보고, 저장됐는지 아닌지도 알 수 없었다.
+         *
+         * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
+         */
+        this.saveFailure = '';
+        /** 대화 도크가 열려 있나. 저작면의 보기 상태라 저장하지 않는다. */
+        this.dockOpen = false;
         /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
         this.picked = new Set();
     }
@@ -147,10 +166,50 @@ let FigureModellerPage = 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;
+    }
 
     /*
       **세 칸의 자리를 못 박는다.**
@@ -258,6 +317,23 @@ let FigureModellerPage = 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;
+    }
+
     /*
       칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
       고른 것의 속성. 쓰는 사람이 이미 아는 자리라 배울 것이 하나 줄어든다.
@@ -494,7 +570,7 @@ let FigureModellerPage = 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'),
             /*
               **제목 줄은 끈다.** 이름은 그대로 둔다.
       
@@ -517,7 +593,7 @@ let FigureModellerPage = 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>` : ''}
         <!--
           말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
           이름을 페이지 제목과 겹쳐 적는다.
@@ -527,8 +603,17 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
           .type=${source?.type ?? ''}
           @proposed=${(e) => 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>
 
@@ -536,7 +621,10 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         edits
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
+        ?dock=${this.dockOpen}
         @figure-rename=${(e) => this.rename(e.detail.name)}
+        @figure-released=${(e) => this.released(e.detail.figure)}
+        @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
         @add-part=${(e) => this.addPart(e.detail.primitive)}
         @select-part=${(e) => (this.selected = e.detail.index)}
         @remove-part=${(e) => this.removePart(e.detail.index)}
@@ -548,6 +636,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         @toggle-part-hidden=${(e) => this.toggleHidden(e.detail.index)}
         @set-all-parts-hidden=${(e) => this.setAllHidden(e.detail.hidden)}
         @change-detail-level=${(e) => this.changeDetailLevel(e.detail.level)}
+        @update-board=${(e) => this.updateBoard(e.detail.board)}
         @part-tool=${(e) => this.runTool(e.detail.index, e.detail.tool, e.detail.axis)}
         @pick-part=${(e) => this.pickPart(e.detail.name)}
       >
@@ -564,7 +653,7 @@ let FigureModellerPage = 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}
@@ -574,11 +663,11 @@ let FigureModellerPage = 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>
@@ -597,6 +686,10 @@ let FigureModellerPage = 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}
@@ -604,9 +697,66 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
           .view=${this.view}
           @update-view=${(e) => (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) => this.takeProposal(e.detail.proposal)}
+        ></ox-board-ai-chat>
       </div>
     `;
     }
+    /*
+     * ── 대화 도크를 무엇으로 켜나 ───────────────────────────────────────────────
+     *
+     * board 의 컴포넌트를 그대로 쓰지만 **board 인 척하지 않는다.** `boardTools` 를 끄고 figure 의
+     * 도구 범주(`figure-authoring`)만 연다. 끄지 않으면 보드 편집 도구가 함께 들려, 모델이 이
+     * 화면에서 할 수 없는 일을 시도한다.
+     *
+     * board 모양의 인자(`currentBoard` · `knownTypes` · `componentSchemas` · `selectedRefids`)는
+     * 주지 않는다 — 전부 선택이고, 채우려면 없는 것을 지어내야 한다.
+     */
+    /**
+     * 어시스턴트가 「지금 무엇을 열고 있나」를 아는 길.
+     *
+     * 도구가 대상을 안 받았을 때 이 문맥에서 해소한다 — 사용자에게 식별자를 되묻지 않는다.
+     * 팔레트도 함께 보낸다: 모르면 모델이 색을 지어내고, 그 후보는 검증을 지나 **그리는 시점에**
+     * 죽는다.
+     */
+    get hostContext() {
+        return {
+            surface: 'figure-modeller',
+            figureId: this.figure?.id || undefined,
+            figureType: this.board?.figureType,
+            figureName: this.figure?.name,
+            palette: Object.keys(activePalette())
+        };
+    }
+    /**
+     * 도크의 후보를 받는다.
+     *
+     * **후보가 화면에 닿는 길은 하나뿐이다** — 말로 시키는 줄이든 도크든 `receive()` 로 모인다.
+     * 두 길을 두면 「지금 / 후보」 두 칸을 두 곳에서 그리게 되고, 어느 쪽이 이기는지 저작자가
+     * 매번 생각해야 한다.
+     */
+    takeProposal(proposal) {
+        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
+        });
+    }
     /**
      * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
      *
@@ -629,10 +779,10 @@ let FigureModellerPage = 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>
     `;
         return html `<div modes>
@@ -655,7 +805,7 @@ let FigureModellerPage = 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>
@@ -700,11 +850,11 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         const { errors, violations } = validate(picked);
         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>
 
@@ -716,7 +866,7 @@ let FigureModellerPage = 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>`
                 : ''}
@@ -738,7 +888,7 @@ let FigureModellerPage = 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>
@@ -798,9 +948,18 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      *
      * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
      * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+     *
+     * ## 바뀐 것이 없으면 누를 수 없다
+     *
+     * **`dirty` 를 안 보고 있었다.** 저장한 직후에도 단추가 살아 있어 같은 정본을 몇 번이고 다시 쓸
+     * 수 있었고, 저장마다 썸네일을 새로 찍어 20KB 를 다시 넣고 `thumbnailUpdatedAt` 을 올렸다 —
+     * 그림 주소의 판이 바뀌므로 브라우저 캐시도 함께 버려진다. 바뀐 것이 없는데 일어날 일이 아니다.
+     *
+     * 새로 만드는 중인 것은 `startNew` 가 `dirty` 로 시작하므로 첫 저장이 막히지 않는다.
+     * 저장이 거절되면 `dirty` 를 그대로 두므로 다시 누를 수 있다.
      */
     get canSave() {
-        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;
@@ -810,18 +969,51 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         }
         const id = lifecycle?.resourceId;
-        if (id && id !== this.figure?.id) {
-            await this.load(id);
+        if (id) {
+            if (id !== this.figure?.id) {
+                await this.load(id);
+            }
+            return;
         }
-        else if (!id && !this.figure) {
+        /*
+          ── 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();
         }
     }
     async load(id) {
         const figure = await fetchFigure(id);
         this.figure = figure;
-        /* 그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다. */
-        if (!figure.thumbnail && figure.id) {
+        /*
+          그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다.
+    
+          **`thumbnail` 이 아니라 `thumbnailUpdatedAt` 으로 판정한다.** 그림 자체는 목록·낱개 질의가
+          가져오지 않는다(base64 라서 무겁고 캐시가 안 된다 — 주소로 부른다). 없는 칸으로 판정하면
+          늘 「그림이 없다」가 되어 저작면을 열 때마다 다시 찍어 저장하게 된다.
+        */
+        if (!figure.thumbnailUpdatedAt && figure.id) {
             void this.fillThumbnail(figure.id);
         }
         // 서버가 준 것을 그대로 쓴다. 읽지 못하면 오류보고없이 빈 상태로 바꾸지 않는다.
@@ -851,7 +1043,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.figure = { id: '', type: draftType, name: '' };
         this.board = board;
         this.parts = parts;
-        this.selected = 0;
+        /* 고른 것이 없다 — 부품이 없으니 속성 패널도 고를 것을 기다린다. */
+        this.selected = -1;
         this.dirty = true;
         this.violations = [];
     }
@@ -890,6 +1083,16 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     updatePart(index, part) {
         this.put(edits.updatePart(this.parts, index, part));
     }
+    /**
+     * 판 자체의 값을 갈아 끼운다 — 능력처럼 부품보다 위에 있는 것들.
+     *
+     * 부품 목록은 건드리지 않는다. `put` 은 부품을 함께 받으므로 여기서 쓰면 능력 하나를
+     * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
+     */
+    updateBoard(board) {
+        this.board = board;
+        this.dirty = true;
+    }
     /**
      * 디테일 등급을 바꾼다.
      *
@@ -992,6 +1195,20 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 그림만 보낸다. 정본을 건드리지 않으므로 미저장 표시도 켜지 않는다 — 열어 봤다는 것이 고쳤다는
      * 뜻이 되면 저작자가 저장할지 말지를 매번 고민한다.
      */
+    /**
+     * 발행되었다 — **정본을 든 자리가 그 사실을 받는다.**
+     *
+     * 이력 패널은 발행을 시키고 결과를 알릴 뿐, 이 페이지의 상태를 고쳐 쓰지 않는다. 판 번호와 상태가
+     * 여기서 갱신되어야 머리줄·이력 탭이 같은 것을 본다.
+     *
+     * 정본(source)은 발행이 건드리지 않으므로 다시 불러오지 않는다 — 저작 중인 화면을 되감지 않는다.
+     */
+    released(figure) {
+        if (!this.figure || figure?.id !== this.figure.id) {
+            return;
+        }
+        this.figure = { ...this.figure, version: figure.version, state: figure.state, updatedAt: figure.updatedAt };
+    }
     async fillThumbnail(id) {
         await this.updateComplete;
         const thumbnail = await captureThumbnail(this.board, this.parts);
@@ -999,8 +1216,9 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         }
         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) {
             /* 볼 권한만 있는 사람일 수 있다. 화면은 그대로 두고 조용히 넘어간다. */
@@ -1012,6 +1230,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             return;
         }
         this.saving = true;
+        this.saveFailure = '';
         try {
             const sourceJson = JSON.stringify(this.folded);
             /*
@@ -1037,7 +1256,7 @@ let FigureModellerPage = 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({
                     type: this.folded.type,
@@ -1051,6 +1270,15 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             }
             this.dirty = false;
         }
+        catch (e) {
+            /*
+              **서버가 말한 사유를 그대로 올린다.** 여기서 문장을 다시 지으면 무엇이 걸렸는지 알 수 없다 —
+              타입 이름이 이미 쓰였다는 것과 권한이 없다는 것은 저작자가 할 일이 다르다.
+      
+              `dirty` 는 건드리지 않는다. 저장이 안 됐으므로 미저장인 것이 사실이다.
+            */
+            this.saveFailure = e.message;
+        }
         finally {
             this.saving = false;
         }
@@ -1096,6 +1324,14 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], FigureModellerPage.prototype, "violations", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "saveFailure", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "dockOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)