@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1,1067 @@
+import '@material/web/icon/icon.js'
+import '../modeller/figure-side.js'
+import '../modeller/figure-ask.js'
+import '../modeller/figure-canvas.js'
+import '../modeller/figure-preview.js'
+import '../modeller/figure-parts.js'
+import '../modeller/figure-inspector.js'
+
+import { css, html } from 'lit'
+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 type { DetailLevel, FigureSource, PrimitiveKind } from '@hatiolab/figure-model'
+
+import * as edits from '../modeller/part-edits.js'
+import * as proposals from '../modeller/proposal.js'
+import { toFigureSource, fromFigureSource } from '../modeller/figure-source.js'
+import type { BoardModel, 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'
+import type { Figure, FigureFinding } from '../types.js'
+
+const FigureModellerPageBase = localize(i18next)(PageView) as typeof PageView
+
+/**
+ * 어느 칸이 접혀 있나. 왼쪽은 부품 목록, 오른쪽은 속성·판정·설정이다.
+ *
+ * 이름에 fold 를 안 쓴다. 이 파일에서 그 낱말은 이미 fold.ts 의 것이다 — 편집 상태를
+ * 저장 형식으로 접는다는 뜻이라 칸을 접는 것과 아무 상관이 없다. 한 파일에서 한 낱말이
+ * 두 가지를 뜻하면 읽는 사람이 매번 어느 쪽인지 가려야 한다.
+ */
+interface Panes {
+  left: boolean
+  right: boolean
+}
+
+/**
+ * 접어 둔 것은 **이 브라우저에만** 남는다.
+ *
+ * 저작한 Figure 에 실리는 값이 아니다. 화면을 어떻게 벌려 놓고 일하느냐는 사람마다
+ * 다르고, 같은 Figure 를 다른 사람이 열었을 때 내 화면 배치가 따라가면 곤란하다.
+ * 화면 설정(`figure-view`)을 저장하지 않는 것과 같은 이유다.
+ *
+ * 시크릿 창이나 사이트 데이터를 막은 브라우저에서는 **읽는 것 자체가 던진다.** 그때는
+ * 둘 다 펴진 채로 시작한다 — 저작면이 안 뜨는 것보다 낫다.
+ */
+const PANES_KEY = 'figure-modeller.collapsed'
+
+function recallPanes(): Panes {
+  try {
+    const said = JSON.parse(localStorage.getItem(PANES_KEY) ?? 'null')
+    return { left: said?.left === true, right: said?.right === true }
+  } catch {
+    return { left: false, right: false }
+  }
+}
+
+function rememberPanes(panes: Panes): void {
+  try {
+    localStorage.setItem(PANES_KEY, JSON.stringify(panes))
+  } catch {
+    // 못 적어도 이번 화면은 그대로 동작한다. 다음에 열 때 펴져 있을 뿐이다.
+  }
+}
+
+/**
+ * 새로 만든 Figure 의 시작 상태. **씬 모델로 만든다.**
+ *
+ * 빈 상태로 시작하면 검증이 곧바로 오류를 낸다 — 사용자가 아무것도 하지 않았는데 빨간
+ * 화면을 보게 된다. 그래서 부품 하나를 놓아 준다. **처음 열었을 때 바로 무언가 보이는
+ * 것**이 이 도구를 익히는 첫 단계다.
+ */
+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'
+      }
+    ]
+  }
+}
+
+/**
+ * Figure 저작면.
+ *
+ * ## 세 칸이다
+ *
+ *   왼쪽   도형 팔레트 · 부품 목록 · 속성
+ *   가운데 미리보기 — `FigureInstance` 를 실제로 세운다
+ *   오른쪽 판단 — 늘 떠 있다
+ *
+ * 미리보기가 씬 위에서 실제로 동작하는 것이 이 도구의 전제다. **편집한 것이 곧 실제 결과물**이라야
+ * "모델러에서는 되는데 보드에서는 다르다"가 생기지 않는다.
+ *
+ * ## 편집 데이터는 씬 모델 하나뿐이다
+ *
+ * 이 페이지가 갖는 것은 보드 하나와 부품 목록 — 미리보기에 그대로 세워지는 씬 모델이다.
+ * 저장 형식(`FigureSource`)으로 바꾸는 것은 **경계에서만** 한다: 저장할 때, 판단할 때,
+ * AI 후보와 비교할 때. 그 변환은 `figure-source.ts` 한 곳에서만 일어난다.
+ *
+ * 팔레트도 속성 편집기도 이 데이터를 직접 수정하지 않는다. 무엇을 하겠다는 것만 알리고,
+ * 바꾸는 것은 이 페이지다. 두 곳에서 고치면 실행 취소도 저장도 어느 쪽이 맞는지 알 수
+ * 없게 된다.
+ */
+@customElement('figure-modeller-page')
+export class FigureModellerPage extends FigureModellerPageBase {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background-color: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      /*
+        이 화면의 글자 크기를 여기서 정한다.
+
+        안 적어 두면 브라우저 기본 크기(16px)를 물려받는다. 아래 패널들은 전부 12px
+        언저리라 위 두 줄만 커 보이고, 버튼이 화면 전체와 따로 놀았다.
+
+        form 요소(input · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
+      */
+      font-size: 0.76rem;
+    }
+
+    /* 세 칸. 3D 를 가장 크게 둔다 — 이 도구의 주어는 형상이지 속성표가 아니다 */
+    div[edits] {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 220px 1fr 320px;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    /*
+      **세 칸의 자리를 못 박는다.**
+
+      이것이 없으면 왼쪽을 접었을 때 오른쪽 칸이 가운데 자리로 밀려 들어와 캔버스가
+      통째로 사라진다. display none 인 형제는 그리드 자리를 차지하지 않으므로, 첫째가
+      빠지면 나머지가 한 칸씩 당겨진다. 오른쪽은 마지막이라 빠져도 밀 것이 없어서
+      멀쩡했다 — 한쪽만 고장 나는 종류다.
+
+      이 파일이 이미 한 번 적어 둔 함정이다. 아래 div[lanes] 주석에 같은 말이 있다.
+    */
+    div[edits] > figure-parts {
+      grid-column: 1;
+    }
+    div[edits] > div[middle] {
+      grid-column: 2;
+    }
+    div[edits] > figure-side {
+      grid-column: 3;
+    }
+
+    /*
+      접힌 칸은 **자리를 아예 안 쓴다.**
+
+      폭만 0 으로 줄이면 안쪽이 넘쳐 나와 가운데를 덮는다. 그렇다고 떼어 내면 오른쪽
+      칸이 펼쳐 둔 추이 그림 같은 상태를 잃는다 — figure-side 가 탭을 감출 때도 DOM 에는
+      남기는 것과 같은 이유다. display none 이 둘을 다 지킨다.
+
+      가운데는 접을 때마다 넓이가 바뀌는데, 편집 캔버스와 미리보기가 각자 ResizeObserver
+      를 갖고 있어 3D 가 알아서 따라온다.
+    */
+    div[edits][collapse-left] {
+      grid-template-columns: 0 1fr 320px;
+    }
+    div[edits][collapse-right] {
+      grid-template-columns: 220px 1fr 0;
+    }
+    div[edits][collapse-left][collapse-right] {
+      grid-template-columns: 0 1fr 0;
+    }
+    div[edits][collapse-left] > figure-parts,
+    div[edits][collapse-right] > figure-side {
+      display: none;
+    }
+
+    /* 머리줄 — 무엇을 고치는 중인지 늘 보인다 */
+    div[header] {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-medium, 8px);
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    input[name] {
+      flex: none;
+      width: 220px;
+      padding: 5px 9px;
+      font: var(--input-field-font, inherit);
+      font-size: 0.82rem;
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+    }
+    /* 타입 이름은 만든 뒤 고칠 수 없다 — 그 사실이 화면에서 보여야 한다 */
+    code[type] {
+      padding: 4px 8px;
+      font-family: var(--mono-font, monospace);
+      font-size: 0.76rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-surface-container);
+      border-radius: 6px;
+    }
+    span[dirty] {
+      font: var(--label-font, inherit);
+      font-size: 0.74rem;
+      color: var(--md-sys-color-tertiary);
+    }
+    div[spacer] {
+      flex: 1;
+    }
+    button[save] {
+      padding: 6px 16px;
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+      font-weight: 600;
+      color: var(--md-sys-color-on-primary, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    button[save][disabled] {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    /*
+      칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
+      고른 것의 속성. 쓰는 사람이 이미 아는 자리라 배울 것이 하나 줄어든다.
+      차별성은 배치가 아니라 가운데의 로우폴리 3D 에 있으므로, 배치로 낯설게 하지
+      않는다.
+
+      오른쪽은 figure-side 가 속성과 판단을 탭으로 겹쳐 둔다. 위아래로 나누면 둘 다
+      잘려서 속성은 재질까지, 판단은 무게까지 못 내려간다. 개수는 탭 이름표에 남아
+      판단을 덮어 두어도 보인다.
+    */
+    figure-side {
+      min-height: 0;
+    }
+
+    figure-canvas,
+    figure-preview {
+      min-width: 0;
+      min-height: 0;
+    }
+
+    /*
+      편집 · 미리보기 전환.
+
+      가운데 칸 위에 얇게 둔다. 무엇을 보고 있는지가 늘 보여야 하고, 두 화면이 같은
+      자리를 쓰므로 어느 쪽인지 모르면 편집이 안 먹는 것처럼 읽힌다.
+    */
+    div[modes] {
+      display: flex;
+      flex: none;
+      gap: 2px;
+      padding: 5px var(--spacing-medium, 8px);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    div[modes] button[mode] {
+      padding: 3px 12px;
+      font: var(--label-font, inherit);
+      font-size: 0.74rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background: none;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[mode]:hover:not([on]) {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    div[modes] button[mode][on] {
+      font-weight: 700;
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+    }
+
+    /*
+      양쪽 칸을 접는 손잡이. 띠의 양 끝, 접히는 칸 바로 옆이다.
+
+      접었을 때 남는 것이 이것 하나뿐이므로 **접는 자리와 펴는 자리가 같아야 한다.**
+      다른 데 두면 접고 나서 되돌릴 곳을 찾아야 한다.
+    */
+    div[modes] button[collapse] {
+      display: flex;
+      align-items: center;
+      flex: none;
+      padding: 2px 3px;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background: none;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[collapse]:hover {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    div[modes] button[collapse] md-icon {
+      --md-icon-size: 18px;
+    }
+
+    /*
+      후보가 오면 가운데를 둘로 나눈다.
+
+      숫자와 JSON 으로 승낙을 받지 않는다 — 저작한 것이 곧 실물이므로 **둘 다 세워
+      놓고** 고르게 한다. 나란히 두지 않으면 무엇이 달라졌는지 기억으로 견줘야 한다.
+    */
+    /*
+      세로로 쌓아 둔다. 그리드로 두었더니 후보가 없을 때 미리보기가 첫 줄(auto)에
+      떨어져 **높이가 0** 이 됐다 — 3D 가 통째로 사라졌다. display:none 인 형제는
+      그리드 자리를 차지하지 않는다.
+    */
+    div[middle] {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+    }
+    /*
+      가운데를 채운다. 둘 다 적어야 한다 — 하나만 적으면 감춰졌다 나타난 쪽이 높이 0 이
+      되어 화면이 하얗게 뜬다. 실제로 그렇게 났다.
+    */
+    div[middle] > figure-canvas,
+    div[middle] > figure-preview {
+      flex: 1;
+    }
+    div[lanes] {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      min-height: 0;
+      background-color: var(--md-sys-color-outline-variant);
+    }
+    div[lane] {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      min-width: 0;
+      min-height: 0;
+      background-color: var(--md-sys-color-surface);
+    }
+    div[lane] h4 {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin: 0;
+      padding: 5px var(--spacing-medium, 8px);
+      font: var(--label-font, inherit);
+      font-size: var(--ui-t-micro, 11px);
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+    div[lane][candidate] h4 {
+      color: var(--md-sys-color-primary);
+    }
+    div[lane] h4 small {
+      font-weight: 400;
+      letter-spacing: 0;
+      text-transform: none;
+    }
+
+    /* 받거나 버린다. 그 사이에 다른 것은 없다 */
+    div[decide] {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-medium, 8px);
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      font-size: 0.76rem;
+    }
+    div[decide] div[spacer] {
+      flex: 1;
+    }
+    div[decide] button {
+      padding: 5px 14px;
+      font: var(--label-font, inherit);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    button[take] {
+      color: var(--md-sys-color-on-primary, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: none;
+    }
+    button[drop] {
+      color: inherit;
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+    }
+    button[take][disabled] {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    /*
+      무엇을 바꾸자는 것인가 — 칩 하나가 변경 하나다.
+
+      통째로만 받게 두면 「몸통은 좋은데 모터 자리가 틀렸다」에 답할 수 없다. 그게
+      가장 흔한 반응이다. 처음에는 전부 골라 둔다 — 통째로 받는 것이 보통의 길이고,
+      빼고 싶은 것만 끄면 된다.
+    */
+    div[changes] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      background-color: var(--md-sys-color-primary-container);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    button[change] {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      padding: 2px 9px 2px 5px;
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 999em;
+      cursor: pointer;
+    }
+    button[change][on] {
+      color: var(--md-sys-color-on-primary, #fff);
+      background-color: var(--md-sys-color-primary);
+      border-color: transparent;
+    }
+    button[change] md-icon {
+      --md-icon-size: 14px;
+    }
+    /* 안 고른 것은 글자에 줄을 그어 「안 받는다」를 말한다 */
+    button[change]:not([on]) span[key] {
+      text-decoration: line-through;
+    }
+
+    /* 고른 조합이 형식을 어기면 미리 알린다. 선택한 뒤에 거절당하는 것보다 낫다 */
+    /* 정책을 넘은 것은 막지 않는다 — 알리기만 한다. 색으로 갈라 둔다 */
+    p[blocked][warn] {
+      color: var(--md-sys-color-tertiary);
+    }
+    p[blocked] {
+      margin: 0;
+      padding: 0 var(--spacing-large, 12px) var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      background-color: var(--md-sys-color-primary-container);
+      font-size: 0.72rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-error);
+    }
+  `
+
+  /** 편집 중인 Figure. 새로 만드는 중이면 `id` 가 없다. */
+  @state() private figure?: Figure
+  /** 편집 데이터 — 미리보기에 그대로 세워지는 씬 모델이다. */
+  @state() private board?: BoardModel
+  @state() private parts: PartModel[] = []
+  @state() private selected = -1
+  /*
+    저작 화면의 **보기 설정**. 조명 · 바닥 · 축 가이드 같은 것이다.
+
+    자산이 아니라 작업대라 저장되지 않는다 — `toFigureSource` 가 집어 가지 않는다.
+    자세한 것은 `modeller/figure-view.ts` 를 보라.
+  */
+  @state() private view: ViewSettings = DEFAULT_VIEW
+  /**
+   * 가운데 칸이 무엇을 보이나.
+   *
+   * 편집 캔버스는 늘 기준 크기다. 그런데 이 형식의 값 절반은 크기가 달라졌을 때 어떻게
+   * 반응하는가에 있다. 그것을 볼 자리가 없었다.
+   */
+  @state() private mode: 'edit' | 'preview' = 'edit'
+  /**
+   * 어느 칸이 접혀 있나.
+   *
+   * 통째로 갈아 끼운다 — 안쪽 값만 바꾸면 Lit 이 같은 객체로 보고 다시 그리지 않는다.
+   */
+  @state() private collapsed: Panes = recallPanes()
+  @state() private dirty = false
+  @state() private saving = false
+  @state() private violations: FigureFinding[] = []
+  /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
+  @state() private proposal?: FigureSource
+  /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
+  @state() private proposalOf?: { grade: string; triangles: number; groups: number; attempts: number }
+  /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
+  @state() private picked = new Set<string>()
+
+  /**
+   * 저장 형식으로 변환한 것. 씬 모델이 바뀔 때만 다시 만든다.
+   *
+   * 저장·판단·AI 후보 비교가 이것을 쓴다. 렌더링할 때마다 새로 만들면 판단 패널이 매번
+   * 다시 계산하므로, 변환은 `willUpdate` 에서 한 번만 한다.
+   */
+  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
+    }
+  }
+
+  get context() {
+    return {
+      title: this.figure?.name ?? i18next.t('title.new-figure')
+    }
+  }
+
+  render() {
+    const source = this.folded
+
+    return html`
+      <div header>
+        <input
+          name
+          .value=${this.figure?.name ?? ''}
+          placeholder=${i18next.t('text.figure-display-name')}
+          @change=${(e: Event) => this.rename((e.target as HTMLInputElement).value)}
+        />
+        <code type title=${i18next.t('text.type-name-cannot-change')}>${this.board?.figureType ?? ''}</code>
+        ${this.dirty ? html`<span dirty>${i18next.t('text.unsaved-changes')}</span>` : ''}
+        <div spacer></div>
+        <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
+          ${this.saving ? i18next.t('text.saving') : i18next.t('button.save')}
+        </button>
+      </div>
+
+      <figure-ask
+        .source=${source}
+        .type=${source?.type ?? ''}
+        @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
+      ></figure-ask>
+
+      <div
+        edits
+        ?collapse-left=${this.collapsed.left}
+        ?collapse-right=${this.collapsed.right}
+        @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)}
+        @duplicate-part=${(e: CustomEvent) => this.duplicatePart(e.detail.index)}
+        @move-part-up=${(e: CustomEvent) => this.movePart(e.detail.index, e.detail.to)}
+        @move-part-down=${(e: CustomEvent) => this.movePart(e.detail.index, e.detail.to)}
+        @update-part=${(e: CustomEvent) => this.updatePart(e.detail.index, e.detail.part)}
+        @part-changed=${(e: CustomEvent) => this.partChanged(e.detail.name, e.detail.part)}
+        @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)}
+        @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}
+          .selected=${this.selected}
+        ></figure-parts>
+
+        <div middle>
+          ${this.renderBar()}
+          ${this.proposal ? this.renderDecision() : ''}
+          ${this.proposal
+            ? html`
+                <div lanes>
+                  <div lane>
+                    <h4>${i18next.t('label.now')}</h4>
+                    <figure-canvas
+                      .board=${this.board}
+                      .parts=${this.parts}
+                      .picked=${this.pickedName}
+                      .view=${this.view}
+                    ></figure-canvas>
+                  </div>
+                  <div lane candidate>
+                    <h4>
+                      ${i18next.t('label.proposed')}
+                      ${this.proposalOf
+                        ? html`<small>
+                            ${this.proposalOf.grade} ·
+                            ${i18next.t('text.n-triangles', { count: this.proposalOf.triangles })}
+                          </small>`
+                        : ''}
+                    </h4>
+                    ${this.renderProposed()}
+                  </div>
+                </div>
+              `
+            : this.mode === 'preview'
+              ? html`<figure-preview .source=${source}></figure-preview>`
+              : html`<figure-canvas
+                  .board=${this.board}
+                  .parts=${this.parts}
+                  .picked=${this.pickedName}
+                ></figure-canvas>`}
+        </div>
+
+        <figure-side
+          .board=${this.board}
+          .parts=${this.parts}
+          .source=${source}
+          .selected=${this.selected}
+          .view=${this.view}
+          @update-view=${(e: CustomEvent) => (this.view = e.detail.view)}
+        ></figure-side>
+      </div>
+    `
+  }
+
+  /**
+   * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
+   *
+   * ## 무엇을 보고 있나
+   *
+   * 편집과 미리보기는 같은 자리를 놓고 다투지 않는다. 둘 다 넓이가 필요하고, 동시에
+   * 봐야 할 일이 없다. 부품을 고치는 동안에는 편집만 보면 되고, 다 고친 뒤에 보드에서
+   * 어떻게 되는지 보면 된다.
+   *
+   * 후보가 와 있을 때는 그 두 단추를 내지 않는다. 그때는 가운데가 이미 둘로 나뉘어
+   * 있다.
+   *
+   * ## 띠는 늘 있다
+   *
+   * 손잡이가 여기 있기 때문이다. 후보가 왔다고 띠를 통째로 감추면, 칸을 접어 둔 채로
+   * 후보를 받으면 되돌릴 방법이 없어진다.
+   */
+  private renderBar() {
+    const one = (mode: 'edit' | 'preview') => html`
+      <button
+        mode
+        ?on=${this.mode === mode}
+        title=${i18next.t('text.mode-' + mode + '-explained')}
+        @click=${() => (this.mode = mode)}
+      >
+        ${i18next.t('label.mode-' + mode)}
+      </button>
+    `
+
+    return html`<div modes>
+      ${this.renderCollapse('left')}${this.proposal ? '' : html`${one('edit')}${one('preview')}`}
+      <div spacer></div>
+      ${this.renderCollapse('right')}
+    </div>`
+  }
+
+  /**
+   * 한쪽 칸을 접고 펴는 손잡이.
+   *
+   * 화살표는 **누르면 무엇이 일어나는지**를 가리킨다 — 펴져 있으면 칸이 사라질 쪽,
+   * 접혀 있으면 칸이 돌아올 쪽. 지금 상태를 가리키게 하면 반대로 읽힌다.
+   */
+  private renderCollapse(side: keyof Panes) {
+    const gone = this.collapsed[side]
+    const shut = side === 'left' ? 'chevron_left' : 'chevron_right'
+    const back = side === 'left' ? 'chevron_right' : 'chevron_left'
+    const pane = side === 'left' ? 'parts' : 'properties'
+
+    return html`
+      <button
+        collapse
+        title=${i18next.t(`text.${gone ? 'expand' : 'collapse'}-${pane}-pane`)}
+        @click=${() => this.toggleCollapse(side)}
+      >
+        <md-icon>${gone ? back : shut}</md-icon>
+      </button>
+    `
+  }
+
+  private toggleCollapse(side: keyof Panes): void {
+    this.collapsed = { ...this.collapsed, [side]: !this.collapsed[side] }
+    rememberPanes(this.collapsed)
+  }
+
+  /**
+   * AI 후보를 나란히 세운다.
+   *
+   * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
+   * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+   */
+  private renderProposed() {
+    if (!this.proposal) return ''
+
+    const { board, parts } = fromFigureSource(this.proposal)
+    return html`<figure-canvas .board=${board} .parts=${parts} .viewOnly=${true}></figure-canvas>`
+  }
+
+  /**
+   * 무엇을 받을지 고른다.
+   *
+   * 통째로만 받게 두면 「몸통은 좋은데 모터 자리가 틀렸다」에 답할 수 없다 — 그게
+   * 가장 흔한 반응이다. 변경 하나가 칩 하나이고, 처음에는 전부 골라 둔다. 통째로
+   * 받는 것이 보통의 길이므로 그것이 한 번 누르기여야 한다.
+   *
+   * 고른 조합을 **받기 전에 재 본다.** 형식을 어기면 못 누르게 하고, 정책을 넘으면
+   * 알린다. 골라 받으면 후보를 낼 때와 다른 조합이 되므로 후보의 점수를 그대로
+   * 믿을 수 없다 — 예를 들어 등급은 안 받고 부품만 받으면 부품 수 한도를 넘는다.
+   *
+   * 형식 오류가 실제로 나는 조합은 아직 보지 못했다. 그래도 두는 것은 값이 거의
+   * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
+   */
+  private renderDecision() {
+    if (!this.proposal) return ''
+
+    const changes = proposals.diffProposal(this.folded, this.proposal)
+    const picked = proposals.applyProposal(this.folded, this.proposal, this.picked)
+    const { errors, violations } = validate(picked)
+
+    return html`
+      <div decide>
+        <span>${i18next.t('text.assistant-proposed-a-figure')}</span>
+        <div spacer></div>
+        <button drop @click=${() => this.discard()}>${i18next.t('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 })}
+        </button>
+      </div>
+
+      ${changes.length > 0
+        ? html`
+            <div changes>
+              ${changes.map(change => this.renderChange(change))}
+            </div>
+          `
+        : ''}
+      ${errors.length > 0
+        ? html`<p blocked>${i18next.t('text.picked-changes-do-not-validate')} — ${errors[0].message}</p>`
+        : violations.length > 0
+          ? html`<p blocked warn>${violations[0].message}</p>`
+          : ''}
+    `
+  }
+
+  /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
+  private renderChange(change: proposals.ProposalChange) {
+    const icon = {
+      added: 'add',
+      changed: 'edit',
+      removed: 'remove',
+      base: 'aspect_ratio',
+      detail: 'tune',
+      anchor: 'my_location',
+      styleKit: 'palette'
+    }[change.kind]
+
+    const on = this.picked.has(change.key)
+
+    return html`
+      <button
+        change
+        ?on=${on}
+        title=${i18next.t('text.change-' + change.kind)}
+        @click=${() => this.toggle(change.key)}
+      >
+        <md-icon>${icon}</md-icon>
+        <span key>${change.key}</span>
+      </button>
+    `
+  }
+
+  private toggle(key: string) {
+    const next = new Set(this.picked)
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    this.picked = next
+  }
+
+  /**
+   * 후보가 왔다.
+   *
+   * 원본 데이터에 넣지 않는다. 나란히 두고 저작자가 고른다. AI 가 원본 데이터에 직접 쓰면
+   * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
+   */
+  private receive(proposal: {
+    source: string
+    grade: string
+    triangles: number
+    groups: number
+    attempts: number
+  }) {
+    this.proposal = JSON.parse(proposal.source) as FigureSource
+    // 처음에는 전부 골라 둔다 — 통째로 받는 것이 보통의 길이다.
+    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
+    }
+  }
+
+  /**
+   * 고른 변경을 받아들인다.
+   *
+   * 후보 비교는 저장 형식으로 한다 — 부품 이름으로 짝짓고 기준 치수·등급까지 함께 봐야
+   * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
+   */
+  private take() {
+    if (!this.proposal) return
+
+    const taken = proposals.applyProposal(this.folded, this.proposal, this.picked)
+    const { board, parts } = fromFigureSource(taken)
+
+    this.board = board
+    this.parts = parts
+    this.selected = parts.length ? 0 : -1
+    this.dirty = true
+    this.discard()
+  }
+
+  private discard() {
+    this.proposal = undefined
+    this.proposalOf = undefined
+    this.picked = new Set()
+  }
+
+  /**
+   * 저장할 수 있나.
+   *
+   * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
+   * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+   */
+  private get canSave(): boolean {
+    if (this.saving || !this.folded || !this.figure?.name) {
+      return false
+    }
+    return validate(this.folded).errors.length === 0
+  }
+
+  async pageUpdated(changes: Record<string, unknown>, lifecycle: { resourceId?: string }) {
+    if (!this.active) {
+      return
+    }
+
+    const id = lifecycle?.resourceId
+    if (id && id !== this.figure?.id) {
+      await this.load(id)
+    } else if (!id && !this.figure) {
+      this.startNew()
+    }
+  }
+
+  private async load(id: string) {
+    const figure = await fetchFigure(id)
+
+    this.figure = figure
+
+    // 서버가 준 것을 그대로 쓴다. 읽지 못하면 오류보고없이 빈 상태로 바꾸지 않는다.
+    // 그러면 사용자가 저장을 선택해 원본을 덮어쓴다.
+    const model = figure.source ? fromFigureSource(JSON.parse(figure.source) as FigureSource) : undefined
+    this.board = model?.board
+    this.parts = model?.parts ?? []
+
+    /*
+      **아무것도 고르지 않은 채로 연다.**
+
+      전에는 첫 부품을 잡아 두었다. 그러면 사용자가 고른 적 없는 부품의 속성이 떠 있고,
+      캔버스에는 그 부품의 윤곽선이 그려진다. 모델 전체를 보려면 먼저 선택을 풀어야 했다.
+
+      속성 패널의 빈 상태도 그래서 **열었을 때 한 번도 안 보였다.** 처음 여는 사람에게
+      「왼쪽에서 부품을 고르는 도구」라고 알려 줄 자리가 그 화면이다.
+
+      새로 만들 때(`startNew`)는 다르다. 방금 부품을 만들었으니 바로 편집하려는 것이 맞다.
+    */
+    this.selected = -1
+    this.dirty = false
+    this.violations = []
+  }
+
+  private startNew() {
+    // 타입 이름을 사람이 정하기 전까지는 임시 이름을 쓴다. 저장할 때 확정한다.
+    const draftType = `FIGURE_${Date.now().toString(36).toUpperCase()}`
+    const { board, parts } = startingModel(draftType)
+
+    this.figure = { id: '', type: draftType, name: '' } as Figure
+    this.board = board
+    this.parts = parts
+    this.selected = 0
+    this.dirty = true
+    this.violations = []
+  }
+
+  private rename(name: string) {
+    if (!this.figure) return
+
+    this.figure = { ...this.figure, name }
+    this.dirty = true
+  }
+
+  /**
+   * 부품 목록을 갈아 끼운다.
+   *
+   * 편집 규칙은 `part-edits` 가 갖는다 — 화면과 테스트가 같은 것을 쓰게 하려고 떼어
+   * 놓았다. 여기서는 결과를 담고 선택 인덱스를 정리한다.
+   */
+  private put(parts: PartModel[], selected = this.selected) {
+    this.parts = parts
+    this.selected = Math.min(selected, parts.length - 1)
+    this.dirty = true
+  }
+
+  private addPart(primitive: PrimitiveKind) {
+    if (!this.board) return
+    // 추가한 것을 바로 수정할 수 있게 선택 상태로 둔다.
+    this.put(edits.addPart(this.board, this.parts, primitive), this.parts.length)
+  }
+
+  private removePart(index: number) {
+    this.put(edits.removePart(this.parts, index), Math.max(0, index - 1))
+  }
+
+  private duplicatePart(index: number) {
+    this.put(edits.duplicatePart(this.parts, index), index + 1)
+  }
+
+  private movePart(index: number, to: number) {
+    this.put(edits.movePart(this.parts, index, to), to)
+  }
+
+  private updatePart(index: number, part: PartModel) {
+    this.put(edits.updatePart(this.parts, index, part))
+  }
+
+  /**
+   * 디테일 등급을 바꾼다.
+   *
+   * 이 값은 부품 수 한도를 정하고 성숙도의 한 축이 된다. 부품보다 위에 있는 값이라
+   * 보드에 담는다.
+   *
+   * 한도를 내려서 이미 넣은 부품 수보다 작아질 수 있다. 그때 부품을 지우지 않는다.
+   * 검증이 위반으로 알리고, 성숙도가 등급에 안 맞는다고 말한다. 저작자가 무엇을 뺄지
+   * 정할 일이지 도구가 정할 일이 아니다.
+   */
+  private changeDetailLevel(level: DetailLevel) {
+    if (!this.board) return
+
+    this.board = { ...this.board, detailLevel: level }
+    this.dirty = true
+  }
+
+  /**
+   * 부품을 잠깐 가린다.
+   *
+   * 씬이 이미 갖고 있는 상태를 켜고 끄는 것뿐이다 — 편집 모드에서는 faint 로 보이고
+   * 뷰 모드에서는 안 그려진다. 저장 형식에는 실리지 않으므로 다시 열면 전부 보인다.
+   *
+   * `dirty` 로 치지 않는다. 저장될 것이 하나도 바뀌지 않았는데 "저장하지 않은 변경"이
+   * 뜨면, 저장 버튼이 무엇을 저장하겠다는 것인지 알 수 없다.
+   */
+  private toggleHidden(index: number) {
+    const part = this.parts[index]
+    if (!part) return
+
+    this.parts = edits.updatePart(this.parts, index, { ...part, hidden: !part.hidden })
+  }
+
+  /**
+   * 한꺼번에 감추거나 되돌린다.
+   *
+   * 부품 스물짜리에서 안쪽 하나를 보려고 열아홉을 누르던 것을 없앤다. 한 번에 바꾸므로
+   * 목록을 한 번만 갈아 끼운다 — 하나씩 스무 번 갈면 미리보기가 스무 번 다시 선다.
+   */
+  private setAllHidden(hidden: boolean) {
+    this.parts = this.parts.map(part => (part.hidden === hidden ? part : { ...part, hidden }))
+  }
+
+  /**
+   * 미리보기에서 기즈모로 옮기거나 2D 에서 끌었다.
+   *
+   * 알려 오는 것은 부품 **이름**이다. 목록의 몇 번째인지는 여기서 찾는다 — 이벤트가
+   * 오는 사이에 목록이 바뀌었으면 찾지 못하고, 그때는 아무것도 하지 않는다.
+   */
+  private partChanged(name: string, part: PartModel) {
+    const at = this.parts.findIndex(item => item.name === name)
+    if (at >= 0) this.put(edits.updatePart(this.parts, at, part))
+  }
+
+  /**
+   * 정밀 배치 도구.
+   *
+   * 규칙은 `part-edits` 가 갖는다. 여기서는 어느 것을 부를지만 정한다.
+   */
+  private runTool(index: number, tool: string, axis: PlaneAxis) {
+    const board = this.board
+    if (!board) return
+
+    if (tool === 'center') this.put(edits.centerPart(board, 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 === 'mirror') this.put(edits.mirrorPart(board, this.parts, index, axis), index + 1)
+  }
+
+  /**
+   * 캔버스에서 부품을 선택했다.
+   *
+   * 캔버스가 알리는 것은 **이름**이다. 목록의 몇 번째인지는 여기서 찾는다 — 알림이
+   * 오는 사이에 목록이 바뀌었으면 못 찾고, 그때는 고른 것을 바꾸지 않는다.
+   * 없는 자리를 고르면 속성 칸이 빈 채로 열려 「사라졌나」로 읽힌다.
+   */
+  /** 지금 고른 부품 이름. 캔버스가 인덱스가 아니라 이름을 받는다. */
+  private get pickedName(): string | undefined {
+    return this.parts[this.selected]?.name
+  }
+
+  private pickPart(name: string) {
+    const at = this.parts.findIndex(part => part.name === name)
+    if (at >= 0) this.selected = at
+  }
+
+  private async save() {
+    if (!this.canSave || !this.folded || !this.figure) {
+      return
+    }
+
+    this.saving = true
+    try {
+      const sourceJson = JSON.stringify(this.folded)
+
+      if (this.figure.id) {
+        const result = await updateFigure(this.figure.id, {
+          name: this.figure.name,
+          source: sourceJson
+        })
+        this.figure = result.figure
+        this.violations = result.violations
+      } else {
+        // 새로 만들 때만 타입 이름이 정해진다. 이미 쓰이는 이름이면 저장 전에 막는다 —
+        // 만든 뒤에는 고칠 수 없으므로 여기서 걸러야 한다.
+        const taken = await fetchFigureTypeNames()
+        if (taken.includes(this.folded.type)) {
+          throw new Error(i18next.t('text.type-name-already-taken', { type: this.folded.type }))
+        }
+
+        const result = await createFigure({
+          type: this.folded.type,
+          name: this.figure.name,
+          source: sourceJson
+        })
+        this.figure = result.figure
+        this.violations = result.violations
+        navigate(`figure-modeller/${result.figure.id}`)
+      }
+
+      this.dirty = false
+    } finally {
+      this.saving = false
+    }
+  }
+}