@things-factory/figure-ui 10.1.6 → 10.1.8

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

@@ -2,18 +2,6 @@ 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';
@@ -24,9 +12,9 @@ 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 * as proposalSessions from '../modeller/proposal-session.js';
 import { toFigureSource, fromFigureSource } from '../modeller/figure-source.js';
 import { DEFAULT_VIEW } from '../modeller/figure-view.js';
 import { createFigure, fetchFigure, fetchFigureTypeNames, updateFigure } from '../graphql/index.js';
@@ -139,10 +127,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
          * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
          */
         this.saveFailure = '';
-        /** 대화 도크가 열려 있나. 저작면의 보기 상태라 저장하지 않는다. */
-        this.dockOpen = false;
-        /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
-        this.picked = new Set();
+        /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
+        this.proposalFeedback = [];
     }
     static { this.styles = css `
     :host {
@@ -166,50 +152,10 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     div[edits] {
       flex: 1;
       display: grid;
-      grid-template-columns: 220px 1fr 320px 0;
+      grid-template-columns: 220px 1fr 320px;
       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;
-    }
 
     /*
       **세 칸의 자리를 못 박는다.**
@@ -508,6 +454,39 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       cursor: default;
     }
 
+    /* AI의 평가는 판정문이 아니라 수락 전에 읽을 근거다. 숨기지 않고 변경 칩 위에 둔다. */
+    div[quality-review] {
+      padding: 7px var(--spacing-large, 12px);
+      background-color: var(--md-sys-color-primary-container);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      color: var(--md-sys-color-on-primary-container);
+      font-size: 0.72rem;
+      line-height: 1.45;
+    }
+    div[quality-review][review] {
+      background-color: var(--md-sys-color-tertiary-container);
+      color: var(--md-sys-color-on-tertiary-container);
+    }
+    div[quality-review] strong { display: block; font-size: 0.74rem; }
+    div[quality-review] ul { margin: 4px 0 0; padding-left: 18px; }
+    div[proposal-note] {
+      padding: 6px var(--spacing-large, 12px) 8px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      background-color: var(--md-sys-color-surface-container-low);
+    }
+    div[proposal-note] label { display: block; font-size: 0.71rem; color: var(--md-sys-color-on-surface-variant); }
+    div[proposal-note] input {
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: 4px;
+      padding: 5px 7px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 5px;
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface);
+      font: inherit;
+    }
+
     /*
       무엇을 바꾸자는 것인가 — 칩 하나가 변경 하나다.
 
@@ -568,6 +547,31 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             this.folded = this.board ? toFigureSource(this.board, this.parts) : undefined;
         }
     }
+    /**
+     * 페이지 밖 AI 도크에도 **지금 손에 든 정본**을 알려 준다.
+     *
+     * 모델러 안의 `figure-ask` 는 이미 `folded`를 직접 받는다. 반면 asidebar 도크는 주소의 id만
+     * 알았으므로 DB에 저장된 옛 판을 읽었다. 저장 전 변경을 두고 "왜 발행이 안 되나" 또는
+     * "이 부품을 줄여 달라"고 물으면 대화가 엉뚱한 판을 보게 되는 결함이었다.
+     *
+     * 이 이벤트는 저장하지 않는다. 도크가 대화 인자로만 잠시 들고 있고, 서버 도구도 도메인 소속
+     * Figure를 먼저 확인한 뒤에만 이 source를 사용한다. 페이지를 떠날 때는 아래에서 지워 오래된
+     * 초안이 다음 Figure에 섞이지 않게 한다.
+     */
+    updated(changed) {
+        if (changed.has('figure') && changed.get('figure')?.id !== this.figure?.id) {
+            this.proposalFeedback = [];
+        }
+        if (changed.has('board') || changed.has('parts') || changed.has('figure')) {
+            window.dispatchEvent(new CustomEvent('figure-ai-context', {
+                detail: { figureId: this.figure?.id, source: this.folded }
+            }));
+        }
+    }
+    disconnectedCallback() {
+        window.dispatchEvent(new CustomEvent('figure-ai-context', { detail: undefined }));
+        super.disconnectedCallback();
+    }
     get context() {
         return {
             title: this.figure?.name ?? i18next.t('figure.title.new-figure'),
@@ -601,17 +605,10 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         <figure-ask
           .source=${source}
           .type=${source?.type ?? ''}
+          .feedback=${this.proposalFeedback}
           @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('figure.text.saving-figure') : i18next.t('figure.button.save')}
         </button>
@@ -621,10 +618,12 @@ 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-catalog=${(e) => this.catalog(e.detail)}
         @figure-released=${(e) => this.released(e.detail.figure)}
         @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
+        @preview-sizing-fix=${(e) => this.previewSizingFix(e.detail)}
+        @apply-sizing-fix=${(e) => this.applySizingFix(e.detail)}
         @add-part=${(e) => this.addPart(e.detail.primitive)}
         @select-part=${(e) => (this.selected = e.detail.index)}
         @remove-part=${(e) => this.removePart(e.detail.index)}
@@ -648,8 +647,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
 
         <div middle>
           ${this.renderBar()}
-          ${this.proposal ? this.renderDecision() : ''}
-          ${this.proposal
+          ${this.proposalSession ? this.renderDecision() : ''}
+          ${this.proposalSession
             ? html `
                 <div lanes>
                   <div lane>
@@ -664,10 +663,11 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                   <div lane candidate>
                     <h4>
                       ${i18next.t('figure.label.proposed')}
-                      ${this.proposalOf
+                      ${this.proposalSession.metrics
                 ? html `<small>
-                            ${this.proposalOf.grade} ·
-                            ${i18next.t('figure.text.n-triangles', { count: this.proposalOf.triangles })}
+                            ${this.proposalSession.metrics.grade} ·
+                            ${i18next.t('figure.text.n-triangles', { count: this.proposalSession.metrics.triangles })}
+                            ${this.proposalSession.metrics.quality ? html ` · ${this.proposalSession.metrics.quality.summary}` : ''}
                           </small>`
                 : ''}
                     </h4>
@@ -686,6 +686,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
 
         <figure-side
           .figureName=${this.figure?.name ?? ''}
+          .figureCategory=${this.figure?.category}
+          .figureTags=${this.figure?.tags}
           .figureId=${this.figure?.id ?? ''}
           .figureState=${this.figure?.state}
           .figureVersion=${this.figure?.version ?? 0}
@@ -697,66 +699,9 @@ 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
-        });
-    }
     /**
      * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
      *
@@ -786,7 +731,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       </button>
     `;
         return html `<div modes>
-      ${this.renderCollapse('left')}${this.proposal ? '' : html `${one('edit')}${one('preview')}`}
+      ${this.renderCollapse('left')}${this.proposalSession ? '' : html `${one('edit')}${one('preview')}`}
       <div spacer></div>
       ${this.renderCollapse('right')}
     </div>`;
@@ -817,16 +762,17 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         rememberPanes(this.collapsed);
     }
     /**
-     * AI 후보를 나란히 세운다.
+     * AI 후보를 실제 배치 크기에서도 본다.
      *
-     * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
-     * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+     * 편집 캔버스 한 장으로는 `repeat`·`fixed`·`anchor`가 맞는지 알 수 없다. 후보는 아직
+     * 정본이 아니므로 저장하지 않고, `figure-preview`가 같은 FigureSource를 기준 크기와
+     * 일곱 가지 확장 축에서 실제 FigureInstance로 세운다. 따라서 저작자는 "좋아 보이는
+     * 한 장"이 아니라 배치될 때도 붙어 있는지를 보고 수락한다.
      */
     renderProposed() {
-        if (!this.proposal)
+        if (!this.proposalSession)
             return '';
-        const { board, parts } = fromFigureSource(this.proposal);
-        return html `<figure-canvas .board=${board} .parts=${parts} .viewOnly=${true}></figure-canvas>`;
+        return html `<figure-preview .source=${this.proposalSession.source}></figure-preview>`;
     }
     /**
      * 무엇을 받을지 고른다.
@@ -843,21 +789,34 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
      */
     renderDecision() {
-        if (!this.proposal)
+        if (!this.proposalSession)
             return '';
-        const changes = proposals.diffProposal(this.folded, this.proposal);
-        const picked = proposals.applyProposal(this.folded, this.proposal, this.picked);
+        const changes = proposals.diffProposal(this.folded, this.proposalSession.source);
+        const picked = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked);
         const { errors, violations } = validate(picked);
         return html `
       <div decide>
-        <span>${i18next.t('figure.text.assistant-proposed-a-figure')}</span>
+        <span>${this.proposalSession.title || i18next.t('figure.text.assistant-proposed-a-figure')}</span>
         <div spacer></div>
         <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('figure.button.take-n-changes', { n: this.picked.size })}
+        <button take ?disabled=${errors.length > 0 || this.proposalSession.picked.size === 0} @click=${() => this.take()}>
+          ${i18next.t('figure.button.take-n-changes', { n: this.proposalSession.picked.size })}
         </button>
       </div>
 
+      ${this.renderQualityReview()}
+      <div proposal-note>
+        <label>
+          ${i18next.t('figure.text.proposal-feedback-note')}
+          <input
+            maxlength="500"
+            .value=${this.proposalSession.note}
+            placeholder=${i18next.t('figure.text.proposal-feedback-placeholder')}
+            @input=${(event) => (this.proposalSession = { ...this.proposalSession, note: event.target.value })}
+          />
+        </label>
+      </div>
+
       ${changes.length > 0
             ? html `
             <div changes>
@@ -872,6 +831,24 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                 : ''}
     `;
     }
+    /** 후보 품질 판단의 근거를 수락 전에 전부 보여 준다. */
+    renderQualityReview() {
+        const quality = this.proposalSession?.metrics?.quality;
+        if (!quality)
+            return '';
+        return html `
+      <div quality-review ?review=${quality.status === 'review'}>
+        <strong>${i18next.t('figure.label.candidate-review')}</strong>
+        <span>${quality.summary}</span>
+        <span> · top-view ${Math.round(quality.visualReadability * 100)}% · ${quality.visualRegions} regions</span>
+        ${quality.findings.length > 0
+            ? html `<ul>
+              ${quality.findings.map(finding => html `<li><code>${finding.dimension}</code> — ${finding.message}</li>`)}
+            </ul>`
+            : ''}
+      </div>
+    `;
+    }
     /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
     renderChange(change) {
         const icon = {
@@ -883,7 +860,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             anchor: 'my_location',
             styleKit: 'palette'
         }[change.kind];
-        const on = this.picked.has(change.key);
+        const on = this.proposalSession?.picked.has(change.key);
         return html `
       <button
         change
@@ -897,12 +874,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     `;
     }
     toggle(key) {
-        const next = new Set(this.picked);
-        if (next.has(key))
-            next.delete(key);
-        else
-            next.add(key);
-        this.picked = next;
+        if (this.proposalSession)
+            this.proposalSession = proposalSessions.toggleProposalChange(this.proposalSession, key);
     }
     /**
      * 후보가 왔다.
@@ -911,15 +884,29 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
      */
     receive(proposal) {
-        this.proposal = JSON.parse(proposal.source);
-        // 처음에는 전부 골라 둔다 — 통째로 받는 것이 보통의 길이다.
-        this.picked = new Set(proposals.diffProposal(this.folded, this.proposal).map(change => change.key));
-        this.proposalOf = {
-            grade: proposal.grade,
-            triangles: proposal.triangles,
-            groups: proposal.groups,
-            attempts: proposal.attempts
-        };
+        this.proposalSession = proposalSessions.openAiProposal(this.folded, proposal);
+    }
+    /**
+     * 발행 게이트의 구조화된 수정안 하나를 현재 작업 사본에만 겹쳐 본다. 서버가 준 값은
+     * `part.anchor.axis = to`라는 데이터이지 사람이 읽을 문장을 다시 해석한 결과가 아니다.
+     * 원본 `board`/`parts`는 여기서 전혀 바꾸지 않고, 아래의 `take()`만 바꾼 사본을 적용한다.
+     */
+    previewSizingFix(fix) {
+        if (!this.folded)
+            return;
+        this.proposalSession = proposalSessions.openSizingFix(this.folded, fix);
+    }
+    /**
+     * 원클릭 적용은 서버가 모든 크기 변경 case를 재검사해 안전하다고 표시한 한-앵커 후보에만 연다.
+     * 그래도 저장은 저작자의 별도 행위다. 잘못 눌러도 DB 정본이나 발행판은 바뀌지 않는다.
+     */
+    applySizingFix(fix) {
+        if (!fix.safe || !this.folded)
+            return;
+        this.previewSizingFix(fix);
+        if (!this.proposalSession)
+            return;
+        this.take();
     }
     /**
      * 고른 변경을 받아들인다.
@@ -928,20 +915,42 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
      */
     take() {
-        if (!this.proposal)
+        if (!this.proposalSession)
             return;
-        const taken = proposals.applyProposal(this.folded, this.proposal, this.picked);
+        const taken = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked);
         const { board, parts } = fromFigureSource(taken);
         this.board = board;
         this.parts = parts;
         this.selected = parts.length ? 0 : -1;
         this.dirty = true;
-        this.discard();
+        this.reportProposalFeedback('accepted');
+        this.discard(false);
     }
-    discard() {
-        this.proposal = undefined;
-        this.proposalOf = undefined;
-        this.picked = new Set();
+    /**
+     * 후보에 대한 사람의 결정을 도크에만 알린다.
+     *
+     * 이 기록은 분석 이벤트나 Figure 속성이 아니다. 같은 모델러 세션에서 다음 요청을 더 잘
+     * 이해시키는 짧은 신호일 뿐이다. 원본 source나 사람의 작업 내용을 다시 보내지 않고, 사람이
+     * 후보 변경 중 몇 개를 받아들였는지와 이미 화면에 보였던 품질 판정만 보낸다.
+     */
+    reportProposalFeedback(outcome) {
+        if (!this.proposalSession)
+            return;
+        const feedback = proposalSessions.feedbackFromSession(this.folded, this.proposalSession, outcome);
+        if (!feedback)
+            return;
+        this.proposalFeedback = [...this.proposalFeedback, feedback].slice(-5);
+        window.dispatchEvent(new CustomEvent('figure-ai-feedback', {
+            detail: {
+                figureId: this.figure?.id,
+                ...feedback
+            }
+        }));
+    }
+    discard(reportFeedback = true) {
+        if (reportFeedback)
+            this.reportProposalFeedback('discarded');
+        this.proposalSession = undefined;
     }
     /**
      * 저장할 수 있나.
@@ -1054,6 +1063,18 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         this.figure = { ...this.figure, name };
         this.dirty = true;
     }
+    /**
+     * 분류와 태그를 고친다.
+     *
+     * 정본(`source`)이 아니라 **카탈로그의 값**이다 — 도형이 무엇으로 생겼는지가 아니라 어디에
+     * 걸리는지다. 그래서 점수도 발행도 흔들리지 않는다.
+     */
+    catalog(patch) {
+        if (!this.figure)
+            return;
+        this.figure = { ...this.figure, ...patch };
+        this.dirty = true;
+    }
     /**
      * 부품 목록을 갈아 끼운다.
      *
@@ -1245,6 +1266,12 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             if (this.figure.id) {
                 const result = await updateFigure(this.figure.id, {
                     name: this.figure.name,
+                    /*
+                      카탈로그의 값도 함께 보낸다. 화면에서 고쳐 놓고 저장에 안 실으면 저장 뒤에 조용히
+                      사라진다 — 저작자는 저장했다고 보고 다시 열면 없다.
+                    */
+                    category: this.figure.category,
+                    tags: this.figure.tags,
                     source: sourceJson,
                     thumbnail
                 });
@@ -1261,6 +1288,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                 const result = await createFigure({
                     type: this.folded.type,
                     name: this.figure.name,
+                    category: this.figure.category,
+                    tags: this.figure.tags,
                     source: sourceJson,
                     thumbnail
                 });
@@ -1331,19 +1360,11 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureModellerPage.prototype, "dockOpen", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureModellerPage.prototype, "proposal", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureModellerPage.prototype, "proposalOf", void 0);
+], FigureModellerPage.prototype, "proposalSession", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], FigureModellerPage.prototype, "picked", void 0);
+    __metadata("design:type", Array)
+], FigureModellerPage.prototype, "proposalFeedback", void 0);
 FigureModellerPage = __decorate([
     customElement('figure-modeller-page')
 ], FigureModellerPage);