@things-factory/figure-ui 10.1.16 → 10.1.17

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

@@ -1,6 +1,5 @@
 import '@material/web/icon/icon.js'
 import '../modeller/figure-side.js'
-import '../modeller/figure-ask.js'
 import '../modeller/figure-canvas.js'
 import { captureThumbnail } from '../modeller/figure-thumbnail.js'
 import '../modeller/figure-preview.js'
@@ -23,7 +22,7 @@ import * as proposals from '../modeller/proposal.js'
 import * as proposalSessions from '../modeller/proposal-session.js'
 import type { ProposalSession } from '../modeller/proposal-session.js'
 import { toFigureSource, fromFigureSource } from '../modeller/figure-source.js'
-import type { BoardModel, PartModel, PlaneAxis } from '../modeller/figure-source.js'
+import type { FigureDraft, PartModel, PlaneAxis } from '../modeller/figure-source.js'
 import { DEFAULT_VIEW } from '../modeller/figure-view.js'
 import type { ViewSettings } from '../modeller/figure-view.js'
 import { createFigure, fetchFigure, fetchFigureTypeNames, updateFigure } from '../graphql/index.js'
@@ -86,9 +85,9 @@ function rememberPanes(panes: Panes): void {
  * 빈 화면이 가르치는 자리다: 부품 목록이 「위에서 도형을 골라 시작하세요」를 이미 말하고 팔레트가
  * 바로 그 위에 있다(`figure-parts`).
  */
-function startingModel(type: string): { board: BoardModel; parts: PartModel[] } {
+function startingModel(type: string): { draft: FigureDraft; parts: PartModel[] } {
   return {
-    board: { width: 300, height: 300, depth: 300, figureType: type, detailLevel: 'M' },
+    draft: { width: 300, height: 300, depth: 300, figureType: type, detailLevel: 'M' },
     parts: []
   }
 }
@@ -107,7 +106,7 @@ function startingModel(type: string): { board: BoardModel; parts: PartModel[] }
  *
  * ## 편집 데이터는 씬 모델 하나뿐이다
  *
- * 이 페이지가 갖는 것은 보드 하나와 부품 목록 — 미리보기에 그대로 세워지는 씬 모델이다.
+ * 이 페이지가 갖는 것은 초안 하나와 부품 목록 — 미리보기에 그대로 세워지는 씬 모델이다.
  * 저장 형식(`FigureSource`)으로 바꾸는 것은 **경계에서만** 한다: 저장할 때, 판단할 때,
  * AI 후보와 비교할 때. 그 변환은 `figure-source.ts` 한 곳에서만 일어난다.
  *
@@ -623,7 +622,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   /** 편집 중인 Figure. 새로 만드는 중이면 `id` 가 없다. */
   @state() private figure?: Figure
   /** 편집 데이터 — 미리보기에 그대로 세워지는 씬 모델이다. */
-  @state() private board?: BoardModel
+  @state() private draft?: FigureDraft
   @state() private parts: PartModel[] = []
   @state() private selected = -1
   /*
@@ -668,8 +667,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
   /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
   @state() private proposalFeedback: ProposalFeedback[] = []
 
-  @state() private undoStack: { board?: BoardModel; parts: PartModel[]; selected: number }[] = []
-  @state() private redoStack: { board?: BoardModel; parts: PartModel[]; selected: number }[] = []
+  @state() private undoStack: { draft?: FigureDraft; parts: PartModel[]; selected: number }[] = []
+  @state() private redoStack: { draft?: FigureDraft; parts: PartModel[]; selected: number }[] = []
   @state() private sceneRevision = 0
   private lastCoalesceKey?: string
   private lastHistoryTime = 0
@@ -683,15 +682,15 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private folded?: FigureSource
 
   willUpdate(changed: Map<string, unknown>) {
-    if (changed.has('board') || changed.has('parts')) {
-      this.folded = this.board ? toFigureSource(this.board, this.parts) : undefined
+    if (changed.has('draft') || changed.has('parts')) {
+      this.folded = this.draft ? toFigureSource(this.draft, this.parts) : undefined
     }
   }
 
   /**
    * 페이지 밖 AI 도크에도 **지금 손에 든 정본**을 알려 준다.
    *
-   * 모델러 안의 `figure-ask` 는 이미 `folded`를 직접 받는다. 반면 asidebar 도크는 주소의 id만
+   * asidebar 도크는 주소의 id만
    * 알았으므로 DB에 저장된 옛 판을 읽었다. 저장 전 변경을 두고 "왜 발행이 안 되나" 또는
    * "이 부품을 줄여 달라"고 물으면 대화가 엉뚱한 판을 보게 되는 결함이었다.
    *
@@ -703,7 +702,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     if (changed.has('figure') && (changed.get('figure') as Figure | undefined)?.id !== this.figure?.id) {
       this.proposalFeedback = []
     }
-    if (changed.has('board') || changed.has('parts') || changed.has('figure')) {
+    if (changed.has('draft') || changed.has('parts') || changed.has('figure')) {
       window.dispatchEvent(
         new CustomEvent('figure-ai-context', {
           detail: { figureId: this.figure?.id, source: this.folded }
@@ -753,15 +752,15 @@ export class FigureModellerPage extends FigureModellerPageBase {
   /**
    * A candidate from the dock opens the review lane. It does not become the draft.
    *
-   * This used to write `board` and `parts` straight onto the working draft and then set
+   * This used to write `draft` and `parts` straight onto the working draft and then set
    * `proposalSession = undefined` — the dock's candidate overwrote what the author had open and
    * erased the lane built to review it. There was no moment where the person said yes, and a
    * draft has no version history to go back to, so the previous work was simply gone.
    *
    * `ai-client-base`'s analysis contract states this as a literal type: `approvalRequired: true`,
    * and of `proposal`, "It is never an instruction to mutate canonical state." The in-page
-   * `figure-ask` entrance already honoured it through `openAiProposal`; the dock entrance is now
-   * the same door. Applying is what the take button does, from the lane, per change.
+   * The in-page entrance honoured this through `openAiProposal` before it was removed, and the dock
+   * entrance is now the same door. Applying is what the take button does, from the lane, per change.
    *
    * ## Why the overwrite was there — so it does not come back
    *
@@ -899,13 +898,13 @@ 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)}
+        @update-draft=${(e: CustomEvent) => this.updateDraft(e.detail.draft)}
         @part-tool=${(e: CustomEvent) => this.runTool(e.detail.index, e.detail.tool, e.detail.axis)}
         @pick-part=${(e: CustomEvent) => this.pickPart(e.detail.name)}
       >
         <figure-parts
           .parts=${this.parts}
-          .level=${(this.board?.detailLevel ?? 'M') as DetailLevel}
+          .level=${(this.draft?.detailLevel ?? 'M') as DetailLevel}
           .selected=${this.selected}
         ></figure-parts>
 
@@ -919,7 +918,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
                     <h4>${i18next.t('figure.label.now')}</h4>
                     <figure-canvas
                       .figureId=${this.figure?.id || this.figure?.type}
-                      .board=${this.board}
+                      .draft=${this.draft}
                       .parts=${this.parts}
                       .picked=${this.pickedName}
                       .view=${this.view}
@@ -942,10 +941,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
                 </div>
               `
             : this.mode === 'preview'
-              ? html`<figure-preview .source=${source}></figure-preview>`
+              ? html`<figure-preview .source=${source} .view=${this.view}></figure-preview>`
               : html`<figure-canvas
                   .figureId=${this.figure?.id || this.figure?.type}
-                  .board=${this.board}
+                  .draft=${this.draft}
                   .parts=${this.parts}
                   .picked=${this.pickedName}
                   .view=${this.view}
@@ -961,7 +960,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
           .figureState=${this.figure?.state}
           .figureVersion=${this.figure?.version ?? 0}
           .dirty=${this.dirty}
-          .board=${this.board}
+          .draft=${this.draft}
           .parts=${this.parts}
           .source=${source}
           .selected=${this.selected}
@@ -1085,7 +1084,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private renderProposed() {
     if (!this.proposalSession) return ''
 
-    return html`<figure-preview .source=${this.proposalSession.source}></figure-preview>`
+    return html`<figure-preview .source=${this.proposalSession.source} .view=${this.view}></figure-preview>`
   }
 
   /**
@@ -1171,15 +1170,22 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
   /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
   private renderChange(change: proposals.ProposalChange) {
-    const icon = {
+    /*
+      Every ChangeKind needs a row here. A kind the map does not answer draws an empty icon and a
+      key with no name beside it, which reads as a broken row rather than a missing case — the
+      `satisfies` makes the compiler say so instead.
+    */
+    const icon = ({
       added: 'add',
       changed: 'edit',
       removed: 'remove',
       base: 'aspect_ratio',
+      placement: 'vertical_align_bottom',
       detail: 'tune',
-      anchor: 'my_location',
-      styleKit: 'palette'
-    }[change.kind]
+      styleKit: 'palette',
+      animations: 'animation',
+      capabilities: 'hub'
+    } satisfies Record<proposals.ChangeKind, string>)[change.kind]
 
     const on = this.proposalSession?.picked.has(change.key)
 
@@ -1214,7 +1220,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   /**
    * 발행 게이트의 구조화된 수정안 하나를 현재 작업 사본에만 겹쳐 본다. 서버가 준 값은
    * `part.anchor.axis = to`라는 데이터이지 사람이 읽을 문장을 다시 해석한 결과가 아니다.
-   * 원본 `board`/`parts`는 여기서 전혀 바꾸지 않고, 아래의 `take()`만 바꾼 사본을 적용한다.
+   * 원본 `draft`/`parts`는 여기서 전혀 바꾸지 않고, 아래의 `take()`만 바꾼 사본을 적용한다.
    */
   private previewSizingFix(fix: FigureGateFix) {
     if (!this.folded) return
@@ -1245,9 +1251,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     this.recordHistory()
     const taken = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked)
-    const { board, parts } = fromFigureSource(taken)
+    const { draft, parts } = fromFigureSource(taken)
 
-    this.board = board
+    this.draft = draft
     this.parts = parts
     this.selected = parts.length ? 0 : -1
     this.dirty = true
@@ -1398,7 +1404,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     // 서버가 준 것을 그대로 쓴다. 읽지 못하면 오류보고없이 빈 상태로 바꾸지 않는다.
     // 그러면 사용자가 저장을 선택해 원본을 덮어쓴다.
     const model = figure.source ? fromFigureSource(JSON.parse(figure.source) as FigureSource) : undefined
-    this.board = model?.board
+    this.draft = model?.draft
     this.parts = model?.parts ?? []
 
     /*
@@ -1428,10 +1434,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.mode = 'edit'
     // 타입 이름을 사람이 정하기 전까지는 임시 이름을 쓴다. 저장할 때 확정한다.
     const draftType = `FIGURE_${Date.now().toString(36).toUpperCase()}`
-    const { board, parts } = startingModel(draftType)
+    const { draft, parts } = startingModel(draftType)
 
     this.figure = { id: '', type: draftType, name: '' } as Figure
-    this.board = board
+    this.draft = draft
     this.parts = parts
     /* 고른 것이 없다 — 부품이 없으니 속성 패널도 고를 것을 기다린다. */
     this.selected = -1
@@ -1452,9 +1458,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private typeChanged(type: string) {
     if (!type || this.figure?.id) return
     const sanitized = type.replace(/[^A-Za-z0-9_]/g, '_').toUpperCase()
-    if (this.board) this.board.figureType = sanitized
+    if (this.draft) this.draft.figureType = sanitized
     this.figure = { ...this.figure, type: sanitized } as Figure
-    this.folded = this.board ? toFigureSource(this.board, this.parts) : undefined
+    this.folded = this.draft ? toFigureSource(this.draft, this.parts) : undefined
     this.dirty = true
   }
 
@@ -1471,9 +1477,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.dirty = true
   }
 
-  private snapshotState(): { board?: BoardModel; parts: PartModel[]; selected: number } {
+  private snapshotState(): { draft?: FigureDraft; parts: PartModel[]; selected: number } {
     return {
-      board: this.board ? structuredClone(this.board) : undefined,
+      draft: this.draft ? structuredClone(this.draft) : undefined,
       parts: structuredClone(this.parts),
       selected: this.selected
     }
@@ -1499,7 +1505,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.undoStack = this.undoStack.slice(0, -1)
     this.redoStack = [this.snapshotState(), ...this.redoStack.slice(0, 49)]
 
-    this.board = prev.board ? structuredClone(prev.board) : undefined
+    this.draft = prev.draft ? structuredClone(prev.draft) : undefined
     this.parts = structuredClone(prev.parts)
     this.selected = this.parts.length ? Math.max(-1, Math.min(prev.selected, this.parts.length - 1)) : -1
     this.dirty = true
@@ -1512,7 +1518,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.redoStack = this.redoStack.slice(1)
     this.undoStack = [...this.undoStack.slice(-49), this.snapshotState()]
 
-    this.board = next.board ? structuredClone(next.board) : undefined
+    this.draft = next.draft ? structuredClone(next.draft) : undefined
     this.parts = structuredClone(next.parts)
     this.selected = this.parts.length ? Math.max(-1, Math.min(next.selected, this.parts.length - 1)) : -1
     this.dirty = true
@@ -1533,9 +1539,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
   }
 
   private addPart(primitive: PrimitiveKind) {
-    if (!this.board) return
+    if (!this.draft) return
     // 추가한 것을 바로 수정할 수 있게 선택 상태로 둔다.
-    this.put(edits.addPart(this.board, this.parts, primitive), this.parts.length)
+    this.put(edits.addPart(this.draft, this.parts, primitive), this.parts.length)
   }
 
   private removePart(index: number) {
@@ -1560,9 +1566,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 부품 목록은 건드리지 않는다. `put` 은 부품을 함께 받으므로 여기서 쓰면 능력 하나를
    * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
    */
-  private updateBoard(board: BoardModel) {
-    this.recordHistory('board')
-    this.board = board
+  private updateDraft(draft: FigureDraft) {
+    this.recordHistory('draft')
+    this.draft = draft
     this.dirty = true
   }
 
@@ -1570,17 +1576,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 디테일 등급을 바꾼다.
    *
    * 이 값은 부품 수 한도를 정하고 성숙도의 한 축이 된다. 부품보다 위에 있는 값이라
-   * 보드에 담는다.
+   * 초안에 담는다.
    *
    * 한도를 내려서 이미 넣은 부품 수보다 작아질 수 있다. 그때 부품을 지우지 않는다.
    * 검증이 위반으로 알리고, 성숙도가 등급에 안 맞는다고 말한다. 저작자가 무엇을 뺄지
    * 정할 일이지 도구가 정할 일이 아니다.
    */
   private changeDetailLevel(level: DetailLevel) {
-    if (!this.board) return
+    if (!this.draft) return
 
     this.recordHistory('detailLevel')
-    this.board = { ...this.board, detailLevel: level }
+    this.draft = { ...this.draft, detailLevel: level }
     this.dirty = true
   }
 
@@ -1627,14 +1633,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 규칙은 `part-edits` 가 갖는다. 여기서는 어느 것을 부를지만 정한다.
    */
   private runTool(index: number, tool: string, axis: PlaneAxis) {
-    const board = this.board
-    if (!board) return
+    const draft = this.draft
+    if (!draft) return
 
-    if (tool === 'center') this.put(edits.centerPart(board, this.parts, index, axis))
+    if (tool === 'center') this.put(edits.centerPart(draft, this.parts, index, axis))
     else if (tool === 'floor') this.put(edits.alignPartToStart(this.parts, index, axis))
-    else if (tool === 'snap') this.put(edits.snapPart(board, this.parts, index))
+    else if (tool === 'snap') this.put(edits.snapPart(draft, this.parts, index))
     // 대칭 복제는 부품이 하나 늘어난다 — 새로 생긴 것을 선택 상태로 둔다
-    else if (tool === 'mirror') this.put(edits.mirrorPart(board, this.parts, index, axis), index + 1)
+    else if (tool === 'mirror') this.put(edits.mirrorPart(draft, this.parts, index, axis), index + 1)
   }
 
   /**
@@ -1689,7 +1695,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private async fillThumbnail(id: string): Promise<void> {
     await this.updateComplete
 
-    const thumbnail = await captureThumbnail(this.board, this.parts)
+    const thumbnail = await captureThumbnail(this.draft, this.parts)
     if (!thumbnail || this.figure?.id !== id) {
       return
     }
@@ -1711,7 +1717,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     if (!this.figure.id) {
       // 신규 저장: 타입 코드와 표시 이름을 명확히 팝업으로 확인/입력받음
-      let defaultType = this.board?.figureType || this.figure.type || ''
+      let defaultType = this.draft?.figureType || this.figure.type || ''
       if (!defaultType || defaultType.startsWith('FIGURE_')) {
         defaultType = 'FIGURE'
       }
@@ -1734,7 +1740,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     try {
       if (!this.figure.id) {
-        const typeToSave = (this.saveModalType || this.board?.figureType || this.figure.type || 'FIGURE').trim().toUpperCase()
+        const typeToSave = (this.saveModalType || this.draft?.figureType || this.figure.type || 'FIGURE').trim().toUpperCase()
         const nameToSave = (this.saveModalName || this.figure.name || typeToSave).trim()
 
         if (!typeToSave) {
@@ -1746,11 +1752,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
           throw new Error(i18next.t('figure.text.type-name-already-taken', { type: typeToSave }))
         }
 
-        if (this.board) this.board.figureType = typeToSave
+        if (this.draft) this.draft.figureType = typeToSave
         this.figure = { ...this.figure, type: typeToSave, name: nameToSave }
         this.folded = { ...this.folded, type: typeToSave }
         const sourceJson = JSON.stringify(this.folded)
-        const thumbnail = await captureThumbnail(this.board, this.parts)
+        const thumbnail = await captureThumbnail(this.draft, this.parts)
 
         const result = await createFigure({
           type: typeToSave,
@@ -1772,10 +1778,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
       // 기존 모델 업데이트: folded.type이 figure.type과 일치하도록 보장
       if (this.figure.type && this.folded.type !== this.figure.type) {
         this.folded = { ...this.folded, type: this.figure.type }
-        if (this.board) this.board.figureType = this.figure.type
+        if (this.draft) this.draft.figureType = this.figure.type
       }
       const sourceJson = JSON.stringify(this.folded)
-      const thumbnail = await captureThumbnail(this.board, this.parts)
+      const thumbnail = await captureThumbnail(this.draft, this.parts)
 
       const result = await updateFigure(this.figure.id, {
         name: this.figure.name,

package/dist-client/modeller/figure-animations.d.ts

@@ -1,9 +1,9 @@
 import { LitElement, type TemplateResult } from 'lit';
-import type { BoardModel, PartModel } from './figure-source.js';
+import type { FigureDraft, PartModel } from './figure-source.js';
 declare const FigureAnimations_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class FigureAnimations extends FigureAnimations_base {
     static styles: import("lit").CSSResult[];
-    board?: BoardModel;
+    draft?: FigureDraft;
     parts: PartModel[];
     /** 펼쳐 둔 clip. 이름이 아니라 자리로 잡는다 — 이름은 편집 중에 바뀐다. */
     private open;
@@ -62,9 +62,9 @@ export declare class FigureAnimations extends FigureAnimations_base {
      */
     private renderBudget;
     /**
-     * 보드에 실어 올려보낸다.
+     * 초안에 실어 올려보낸다.
      *
-     * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-board` 로
+     * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-draft` 로
      * 간다. 빈 배열은 칸을 지운다 — clip 을 다 지운 도형은 `animations: []` 가 아니라 없는 것이다.
      */
     private tell;

package/dist-client/modeller/figure-animations.js

@@ -246,7 +246,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
     `
     ]; }
     get clips() {
-        return this.board?.animations ?? [];
+        return this.draft?.animations ?? [];
     }
     /** 부품 이름 — 채널이 이것을 가리킨다. */
     get partNames() {
@@ -266,7 +266,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
         return moving.size;
     }
     render() {
-        if (!this.board)
+        if (!this.draft)
             return html ``;
         return html `
       <section>
@@ -550,20 +550,20 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
     }
     // ─── 고치기 ───────────────────────────────────────────────────────────────
     /**
-     * 보드에 실어 올려보낸다.
+     * 초안에 실어 올려보낸다.
      *
-     * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-board` 로
+     * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-draft` 로
      * 간다. 빈 배열은 칸을 지운다 — clip 을 다 지운 도형은 `animations: []` 가 아니라 없는 것이다.
      */
     tell(animations) {
-        if (!this.board)
+        if (!this.draft)
             return;
-        const board = { ...this.board };
+        const draft = { ...this.draft };
         if (animations.length === 0)
-            delete board.animations;
+            delete draft.animations;
         else
-            board.animations = animations;
-        this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }));
+            draft.animations = animations;
+        this.dispatchEvent(new CustomEvent('update-draft', { detail: { draft }, bubbles: true, composed: true }));
     }
     patchClip(at, patch) {
         this.tell(this.clips.map((clip, i) => (i === at ? { ...clip, ...patch } : clip)));
@@ -688,7 +688,7 @@ let FigureAnimations = class FigureAnimations extends localize(i18next)(LitEleme
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
-], FigureAnimations.prototype, "board", void 0);
+], FigureAnimations.prototype, "draft", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)