@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1,1045 @@
+import { __decorate, __metadata } from "tslib";
+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 * as edits from '../modeller/part-edits.js';
+import * as proposals from '../modeller/proposal.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';
+const FigureModellerPageBase = localize(i18next)(PageView);
+/**
+ * 접어 둔 것은 **이 브라우저에만** 남는다.
+ *
+ * 저작한 Figure 에 실리는 값이 아니다. 화면을 어떻게 벌려 놓고 일하느냐는 사람마다
+ * 다르고, 같은 Figure 를 다른 사람이 열었을 때 내 화면 배치가 따라가면 곤란하다.
+ * 화면 설정(`figure-view`)을 저장하지 않는 것과 같은 이유다.
+ *
+ * 시크릿 창이나 사이트 데이터를 막은 브라우저에서는 **읽는 것 자체가 던진다.** 그때는
+ * 둘 다 펴진 채로 시작한다 — 저작면이 안 뜨는 것보다 낫다.
+ */
+const PANES_KEY = 'figure-modeller.collapsed';
+function recallPanes() {
+    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) {
+    try {
+        localStorage.setItem(PANES_KEY, JSON.stringify(panes));
+    }
+    catch {
+        // 못 적어도 이번 화면은 그대로 동작한다. 다음에 열 때 펴져 있을 뿐이다.
+    }
+}
+/**
+ * 새로 만든 Figure 의 시작 상태. **씬 모델로 만든다.**
+ *
+ * 빈 상태로 시작하면 검증이 곧바로 오류를 낸다 — 사용자가 아무것도 하지 않았는데 빨간
+ * 화면을 보게 된다. 그래서 부품 하나를 놓아 준다. **처음 열었을 때 바로 무언가 보이는
+ * 것**이 이 도구를 익히는 첫 단계다.
+ */
+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'
+            }
+        ]
+    };
+}
+/**
+ * Figure 저작면.
+ *
+ * ## 세 칸이다
+ *
+ *   왼쪽   도형 팔레트 · 부품 목록 · 속성
+ *   가운데 미리보기 — `FigureInstance` 를 실제로 세운다
+ *   오른쪽 판단 — 늘 떠 있다
+ *
+ * 미리보기가 씬 위에서 실제로 동작하는 것이 이 도구의 전제다. **편집한 것이 곧 실제 결과물**이라야
+ * "모델러에서는 되는데 보드에서는 다르다"가 생기지 않는다.
+ *
+ * ## 편집 데이터는 씬 모델 하나뿐이다
+ *
+ * 이 페이지가 갖는 것은 보드 하나와 부품 목록 — 미리보기에 그대로 세워지는 씬 모델이다.
+ * 저장 형식(`FigureSource`)으로 바꾸는 것은 **경계에서만** 한다: 저장할 때, 판단할 때,
+ * AI 후보와 비교할 때. 그 변환은 `figure-source.ts` 한 곳에서만 일어난다.
+ *
+ * 팔레트도 속성 편집기도 이 데이터를 직접 수정하지 않는다. 무엇을 하겠다는 것만 알리고,
+ * 바꾸는 것은 이 페이지다. 두 곳에서 고치면 실행 취소도 저장도 어느 쪽이 맞는지 알 수
+ * 없게 된다.
+ */
+let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase {
+    constructor() {
+        super(...arguments);
+        this.parts = [];
+        this.selected = -1;
+        /*
+          저작 화면의 **보기 설정**. 조명 · 바닥 · 축 가이드 같은 것이다.
+      
+          자산이 아니라 작업대라 저장되지 않는다 — `toFigureSource` 가 집어 가지 않는다.
+          자세한 것은 `modeller/figure-view.ts` 를 보라.
+        */
+        this.view = DEFAULT_VIEW;
+        /**
+         * 가운데 칸이 무엇을 보이나.
+         *
+         * 편집 캔버스는 늘 기준 크기다. 그런데 이 형식의 값 절반은 크기가 달라졌을 때 어떻게
+         * 반응하는가에 있다. 그것을 볼 자리가 없었다.
+         */
+        this.mode = 'edit';
+        /**
+         * 어느 칸이 접혀 있나.
+         *
+         * 통째로 갈아 끼운다 — 안쪽 값만 바꾸면 Lit 이 같은 객체로 보고 다시 그리지 않는다.
+         */
+        this.collapsed = recallPanes();
+        this.dirty = false;
+        this.saving = false;
+        this.violations = [];
+        /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
+        this.picked = new Set();
+    }
+    static { this.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);
+    }
+  `; }
+    willUpdate(changed) {
+        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) => this.rename(e.target.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) => this.receive(e.detail.proposal)}
+      ></figure-ask>
+
+      <div
+        edits
+        ?collapse-left=${this.collapsed.left}
+        ?collapse-right=${this.collapsed.right}
+        @add-part=${(e) => this.addPart(e.detail.primitive)}
+        @select-part=${(e) => (this.selected = e.detail.index)}
+        @remove-part=${(e) => this.removePart(e.detail.index)}
+        @duplicate-part=${(e) => this.duplicatePart(e.detail.index)}
+        @move-part-up=${(e) => this.movePart(e.detail.index, e.detail.to)}
+        @move-part-down=${(e) => this.movePart(e.detail.index, e.detail.to)}
+        @update-part=${(e) => this.updatePart(e.detail.index, e.detail.part)}
+        @part-changed=${(e) => this.partChanged(e.detail.name, e.detail.part)}
+        @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)}
+        @part-tool=${(e) => this.runTool(e.detail.index, e.detail.tool, e.detail.axis)}
+        @pick-part=${(e) => this.pickPart(e.detail.name)}
+      >
+        <figure-parts
+          .parts=${this.parts}
+          .level=${(this.board?.detailLevel ?? 'M')}
+          .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) => (this.view = e.detail.view)}
+        ></figure-side>
+      </div>
+    `;
+    }
+    /**
+     * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
+     *
+     * ## 무엇을 보고 있나
+     *
+     * 편집과 미리보기는 같은 자리를 놓고 다투지 않는다. 둘 다 넓이가 필요하고, 동시에
+     * 봐야 할 일이 없다. 부품을 고치는 동안에는 편집만 보면 되고, 다 고친 뒤에 보드에서
+     * 어떻게 되는지 보면 된다.
+     *
+     * 후보가 와 있을 때는 그 두 단추를 내지 않는다. 그때는 가운데가 이미 둘로 나뉘어
+     * 있다.
+     *
+     * ## 띠는 늘 있다
+     *
+     * 손잡이가 여기 있기 때문이다. 후보가 왔다고 띠를 통째로 감추면, 칸을 접어 둔 채로
+     * 후보를 받으면 되돌릴 방법이 없어진다.
+     */
+    renderBar() {
+        const one = (mode) => 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>`;
+    }
+    /**
+     * 한쪽 칸을 접고 펴는 손잡이.
+     *
+     * 화살표는 **누르면 무엇이 일어나는지**를 가리킨다 — 펴져 있으면 칸이 사라질 쪽,
+     * 접혀 있으면 칸이 돌아올 쪽. 지금 상태를 가리키게 하면 반대로 읽힌다.
+     */
+    renderCollapse(side) {
+        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>
+    `;
+    }
+    toggleCollapse(side) {
+        this.collapsed = { ...this.collapsed, [side]: !this.collapsed[side] };
+        rememberPanes(this.collapsed);
+    }
+    /**
+     * AI 후보를 나란히 세운다.
+     *
+     * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
+     * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+     */
+    renderProposed() {
+        if (!this.proposal)
+            return '';
+        const { board, parts } = fromFigureSource(this.proposal);
+        return html `<figure-canvas .board=${board} .parts=${parts} .viewOnly=${true}></figure-canvas>`;
+    }
+    /**
+     * 무엇을 받을지 고른다.
+     *
+     * 통째로만 받게 두면 「몸통은 좋은데 모터 자리가 틀렸다」에 답할 수 없다 — 그게
+     * 가장 흔한 반응이다. 변경 하나가 칩 하나이고, 처음에는 전부 골라 둔다. 통째로
+     * 받는 것이 보통의 길이므로 그것이 한 번 누르기여야 한다.
+     *
+     * 고른 조합을 **받기 전에 재 본다.** 형식을 어기면 못 누르게 하고, 정책을 넘으면
+     * 알린다. 골라 받으면 후보를 낼 때와 다른 조합이 되므로 후보의 점수를 그대로
+     * 믿을 수 없다 — 예를 들어 등급은 안 받고 부품만 받으면 부품 수 한도를 넘는다.
+     *
+     * 형식 오류가 실제로 나는 조합은 아직 보지 못했다. 그래도 두는 것은 값이 거의
+     * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
+     */
+    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>`
+                : ''}
+    `;
+    }
+    /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
+    renderChange(change) {
+        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>
+    `;
+    }
+    toggle(key) {
+        const next = new Set(this.picked);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        this.picked = next;
+    }
+    /**
+     * 후보가 왔다.
+     *
+     * 원본 데이터에 넣지 않는다. 나란히 두고 저작자가 고른다. AI 가 원본 데이터에 직접 쓰면
+     * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
+     */
+    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
+        };
+    }
+    /**
+     * 고른 변경을 받아들인다.
+     *
+     * 후보 비교는 저장 형식으로 한다 — 부품 이름으로 짝짓고 기준 치수·등급까지 함께 봐야
+     * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
+     */
+    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();
+    }
+    discard() {
+        this.proposal = undefined;
+        this.proposalOf = undefined;
+        this.picked = new Set();
+    }
+    /**
+     * 저장할 수 있나.
+     *
+     * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
+     * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+     */
+    get canSave() {
+        if (this.saving || !this.folded || !this.figure?.name) {
+            return false;
+        }
+        return validate(this.folded).errors.length === 0;
+    }
+    async pageUpdated(changes, lifecycle) {
+        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();
+        }
+    }
+    async load(id) {
+        const figure = await fetchFigure(id);
+        this.figure = figure;
+        // 서버가 준 것을 그대로 쓴다. 읽지 못하면 오류보고없이 빈 상태로 바꾸지 않는다.
+        // 그러면 사용자가 저장을 선택해 원본을 덮어쓴다.
+        const model = figure.source ? fromFigureSource(JSON.parse(figure.source)) : undefined;
+        this.board = model?.board;
+        this.parts = model?.parts ?? [];
+        /*
+          **아무것도 고르지 않은 채로 연다.**
+    
+          전에는 첫 부품을 잡아 두었다. 그러면 사용자가 고른 적 없는 부품의 속성이 떠 있고,
+          캔버스에는 그 부품의 윤곽선이 그려진다. 모델 전체를 보려면 먼저 선택을 풀어야 했다.
+    
+          속성 패널의 빈 상태도 그래서 **열었을 때 한 번도 안 보였다.** 처음 여는 사람에게
+          「왼쪽에서 부품을 고르는 도구」라고 알려 줄 자리가 그 화면이다.
+    
+          새로 만들 때(`startNew`)는 다르다. 방금 부품을 만들었으니 바로 편집하려는 것이 맞다.
+        */
+        this.selected = -1;
+        this.dirty = false;
+        this.violations = [];
+    }
+    startNew() {
+        // 타입 이름을 사람이 정하기 전까지는 임시 이름을 쓴다. 저장할 때 확정한다.
+        const draftType = `FIGURE_${Date.now().toString(36).toUpperCase()}`;
+        const { board, parts } = startingModel(draftType);
+        this.figure = { id: '', type: draftType, name: '' };
+        this.board = board;
+        this.parts = parts;
+        this.selected = 0;
+        this.dirty = true;
+        this.violations = [];
+    }
+    rename(name) {
+        if (!this.figure)
+            return;
+        this.figure = { ...this.figure, name };
+        this.dirty = true;
+    }
+    /**
+     * 부품 목록을 갈아 끼운다.
+     *
+     * 편집 규칙은 `part-edits` 가 갖는다 — 화면과 테스트가 같은 것을 쓰게 하려고 떼어
+     * 놓았다. 여기서는 결과를 담고 선택 인덱스를 정리한다.
+     */
+    put(parts, selected = this.selected) {
+        this.parts = parts;
+        this.selected = Math.min(selected, parts.length - 1);
+        this.dirty = true;
+    }
+    addPart(primitive) {
+        if (!this.board)
+            return;
+        // 추가한 것을 바로 수정할 수 있게 선택 상태로 둔다.
+        this.put(edits.addPart(this.board, this.parts, primitive), this.parts.length);
+    }
+    removePart(index) {
+        this.put(edits.removePart(this.parts, index), Math.max(0, index - 1));
+    }
+    duplicatePart(index) {
+        this.put(edits.duplicatePart(this.parts, index), index + 1);
+    }
+    movePart(index, to) {
+        this.put(edits.movePart(this.parts, index, to), to);
+    }
+    updatePart(index, part) {
+        this.put(edits.updatePart(this.parts, index, part));
+    }
+    /**
+     * 디테일 등급을 바꾼다.
+     *
+     * 이 값은 부품 수 한도를 정하고 성숙도의 한 축이 된다. 부품보다 위에 있는 값이라
+     * 보드에 담는다.
+     *
+     * 한도를 내려서 이미 넣은 부품 수보다 작아질 수 있다. 그때 부품을 지우지 않는다.
+     * 검증이 위반으로 알리고, 성숙도가 등급에 안 맞는다고 말한다. 저작자가 무엇을 뺄지
+     * 정할 일이지 도구가 정할 일이 아니다.
+     */
+    changeDetailLevel(level) {
+        if (!this.board)
+            return;
+        this.board = { ...this.board, detailLevel: level };
+        this.dirty = true;
+    }
+    /**
+     * 부품을 잠깐 가린다.
+     *
+     * 씬이 이미 갖고 있는 상태를 켜고 끄는 것뿐이다 — 편집 모드에서는 faint 로 보이고
+     * 뷰 모드에서는 안 그려진다. 저장 형식에는 실리지 않으므로 다시 열면 전부 보인다.
+     *
+     * `dirty` 로 치지 않는다. 저장될 것이 하나도 바뀌지 않았는데 "저장하지 않은 변경"이
+     * 뜨면, 저장 버튼이 무엇을 저장하겠다는 것인지 알 수 없다.
+     */
+    toggleHidden(index) {
+        const part = this.parts[index];
+        if (!part)
+            return;
+        this.parts = edits.updatePart(this.parts, index, { ...part, hidden: !part.hidden });
+    }
+    /**
+     * 한꺼번에 감추거나 되돌린다.
+     *
+     * 부품 스물짜리에서 안쪽 하나를 보려고 열아홉을 누르던 것을 없앤다. 한 번에 바꾸므로
+     * 목록을 한 번만 갈아 끼운다 — 하나씩 스무 번 갈면 미리보기가 스무 번 다시 선다.
+     */
+    setAllHidden(hidden) {
+        this.parts = this.parts.map(part => (part.hidden === hidden ? part : { ...part, hidden }));
+    }
+    /**
+     * 미리보기에서 기즈모로 옮기거나 2D 에서 끌었다.
+     *
+     * 알려 오는 것은 부품 **이름**이다. 목록의 몇 번째인지는 여기서 찾는다 — 이벤트가
+     * 오는 사이에 목록이 바뀌었으면 찾지 못하고, 그때는 아무것도 하지 않는다.
+     */
+    partChanged(name, part) {
+        const at = this.parts.findIndex(item => item.name === name);
+        if (at >= 0)
+            this.put(edits.updatePart(this.parts, at, part));
+    }
+    /**
+     * 정밀 배치 도구.
+     *
+     * 규칙은 `part-edits` 가 갖는다. 여기서는 어느 것을 부를지만 정한다.
+     */
+    runTool(index, tool, axis) {
+        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);
+    }
+    /**
+     * 캔버스에서 부품을 선택했다.
+     *
+     * 캔버스가 알리는 것은 **이름**이다. 목록의 몇 번째인지는 여기서 찾는다 — 알림이
+     * 오는 사이에 목록이 바뀌었으면 못 찾고, 그때는 고른 것을 바꾸지 않는다.
+     * 없는 자리를 고르면 속성 칸이 빈 채로 열려 「사라졌나」로 읽힌다.
+     */
+    /** 지금 고른 부품 이름. 캔버스가 인덱스가 아니라 이름을 받는다. */
+    get pickedName() {
+        return this.parts[this.selected]?.name;
+    }
+    pickPart(name) {
+        const at = this.parts.findIndex(part => part.name === name);
+        if (at >= 0)
+            this.selected = at;
+    }
+    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;
+        }
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "figure", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "board", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureModellerPage.prototype, "parts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "view", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureModellerPage.prototype, "mode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "collapsed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "dirty", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "saving", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureModellerPage.prototype, "violations", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "proposal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "proposalOf", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureModellerPage.prototype, "picked", void 0);
+FigureModellerPage = __decorate([
+    customElement('figure-modeller-page')
+], FigureModellerPage);
+export { FigureModellerPage };
+//# sourceMappingURL=figure-modeller-page.js.map