@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1,280 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '../viewparts/figure-card.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 { ScrollbarStyles } from '@operato/styles';
+import { deleteFigure, fetchFigureList } from '../graphql/index.js';
+const FigureListPageBase = localize(i18next)(PageView);
+/**
+ * Figure 목록.
+ *
+ * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다.
+ * 대신 **저작자가 목록에서 판단할 수 있어야 하는 것**은 카드에 실는다 — 무게(삼각형
+ * 수)와 재활용 점수다. 그것을 저작면에 들어가서야 알면 늦다.
+ */
+let FigureListPage = class FigureListPage extends FigureListPageBase {
+    constructor() {
+        super(...arguments);
+        this.figures = [];
+        this.total = 0;
+        this.search = '';
+        this.stateFilter = '';
+        this.loaded = false;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      /* 걸러 보기 줄 */
+      div[filters] {
+        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[search] {
+        flex: 1;
+        min-width: 0;
+        max-width: 320px;
+        padding: 6px 10px;
+        font: var(--input-field-font, inherit);
+        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;
+      }
+
+      button[state] {
+        padding: 5px 12px;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[state][selected] {
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: var(--md-sys-color-secondary-container);
+        border-color: transparent;
+      }
+
+      span[count] {
+        margin-left: auto;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 카드 격자 */
+      div[cards] {
+        flex: 1;
+        overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        align-content: start;
+      }
+
+      /* ── 아무것도 없을 때 ──────────────────────────────────────────────
+         이 자리가 이 화면에서 가장 중요하다. 처음 온 사람은 여기서 이 도구가
+         무엇을 만드는 것인지 알게 된다. 「데이터 없음」으로 끝내지 않는다. */
+      div[empty] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        text-align: center;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[empty] md-icon {
+        --md-icon-size: 48px;
+        color: var(--md-sys-color-outline-variant);
+      }
+      div[empty] h2 {
+        margin: 0;
+        font: var(--theme-font, inherit);
+        font-size: var(--ui-t-title, 15px);
+        color: var(--md-sys-color-on-surface);
+      }
+      div[empty] p {
+        margin: 0;
+        max-width: 34em;
+        line-height: 1.6;
+      }
+      div[empty] button {
+        margin-top: var(--spacing-medium, 8px);
+        padding: 8px 18px;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-primary, #fff);
+        background-color: var(--md-sys-color-primary);
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+    `
+    ]; }
+    get context() {
+        return {
+            title: i18next.t('title.figures'),
+            actions: [
+                {
+                    title: i18next.t('button.new-figure'),
+                    action: () => this.openModeller()
+                }
+            ]
+        };
+    }
+    render() {
+        return html `
+      <div filters>
+        <input
+          search
+          type="search"
+          .value=${this.search}
+          placeholder=${i18next.t('text.search-figure-by-name-or-type')}
+          @change=${(e) => {
+            this.search = e.target.value;
+            this.reload();
+        }}
+        />
+        ${[
+            { value: '', label: i18next.t('label.all') },
+            { value: 'draft', label: i18next.t('label.draft') },
+            { value: 'released', label: i18next.t('label.released') }
+        ].map(option => html `
+            <button
+              state
+              ?selected=${this.stateFilter === option.value}
+              @click=${() => {
+            this.stateFilter = option.value;
+            this.reload();
+        }}
+            >
+              ${option.label}
+            </button>
+          `)}
+        ${this.loaded ? html `<span count>${i18next.t('text.figure-count', { count: this.total })}</span>` : ''}
+      </div>
+
+      ${!this.loaded
+            ? html ``
+            : this.figures.length === 0
+                ? this.renderEmpty()
+                : html `
+              <div cards>
+                ${this.figures.map(figure => html `
+                    <figure-card
+                      .figure=${figure}
+                      @open=${() => this.openModeller(figure.id)}
+                      @remove=${() => this.removeFigure(figure)}
+                    ></figure-card>
+                  `)}
+              </div>
+            `}
+    `;
+    }
+    /**
+     * 빈 화면.
+     *
+     * 걸러 보기 때문에 비었는지, 아직 만든 것이 없어서 비었는지를 **가른다.** 같은
+     * 문구를 쓰면 사용자가 검색어를 지워 볼 생각을 못 한다.
+     */
+    renderEmpty() {
+        const filtered = !!this.search || !!this.stateFilter;
+        if (filtered) {
+            return html `
+        <div empty>
+          <md-icon>search_off</md-icon>
+          <h2>${i18next.t('text.no-figure-matches-the-filter')}</h2>
+          <p>${i18next.t('text.try-clearing-the-search-or-state-filter')}</p>
+          <button
+            @click=${() => {
+                this.search = '';
+                this.stateFilter = '';
+                this.reload();
+            }}
+          >
+            ${i18next.t('button.clear-filters')}
+          </button>
+        </div>
+      `;
+        }
+        return html `
+      <div empty>
+        <md-icon>deployed_code</md-icon>
+        <h2>${i18next.t('text.no-figure-yet')}</h2>
+        <p>${i18next.t('text.what-a-figure-is')}</p>
+        <button @click=${() => this.openModeller()}>${i18next.t('button.new-figure')}</button>
+      </div>
+    `;
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            await this.reload();
+        }
+    }
+    async reload() {
+        const { items, total } = await fetchFigureList({
+            search: this.search || undefined,
+            state: this.stateFilter || undefined
+        });
+        this.figures = items;
+        this.total = total;
+        this.loaded = true;
+    }
+    openModeller(id) {
+        navigate(id ? `figure-modeller/${id}` : 'figure-modeller');
+    }
+    /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
+    async removeFigure(figure) {
+        // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다
+        const message = i18next.t('text.delete-figure-confirm', { name: figure.name });
+        if (!confirm(message)) {
+            return;
+        }
+        await deleteFigure(figure.id);
+        await this.reload();
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureListPage.prototype, "figures", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureListPage.prototype, "total", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureListPage.prototype, "search", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureListPage.prototype, "stateFilter", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureListPage.prototype, "loaded", void 0);
+FigureListPage = __decorate([
+    customElement('figure-list-page')
+], FigureListPage);
+export { FigureListPage };
+//# sourceMappingURL=figure-list-page.js.map

package/dist-client/pages/figure-list-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-list-page.js","sourceRoot":"","sources":["../../client/pages/figure-list-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../viewparts/figure-card.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { deleteFigure, fetchFigureList } from '../graphql/index.js'\nimport type { Figure } from '../types.js'\n\nconst FigureListPageBase = localize(i18next)(PageView) as typeof PageView\n\n/**\n * Figure 목록.\n *\n * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다.\n * 대신 **저작자가 목록에서 판단할 수 있어야 하는 것**은 카드에 실는다 — 무게(삼각형\n * 수)와 재활용 점수다. 그것을 저작면에 들어가서야 알면 늦다.\n */\n@customElement('figure-list-page')\nexport class FigureListPage extends FigureListPageBase {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* 걸러 보기 줄 */\n      div[filters] {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      input[search] {\n        flex: 1;\n        min-width: 0;\n        max-width: 320px;\n        padding: 6px 10px;\n        font: var(--input-field-font, inherit);\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-container-lowest);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        /* 명령 요소의 모서리는 테마가 정한다 — 알약으로 만들지 않는다 */\n        border-radius: 6px;\n      }\n\n      button[state] {\n        padding: 5px 12px;\n        font: var(--label-font, inherit);\n        color: var(--md-sys-color-on-surface);\n        background: none;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-radius: 6px;\n        cursor: pointer;\n      }\n      button[state][selected] {\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n        border-color: transparent;\n      }\n\n      span[count] {\n        margin-left: auto;\n        font: var(--label-font, inherit);\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n\n      /* 카드 격자 */\n      div[cards] {\n        flex: 1;\n        overflow-y: auto;\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-large, 12px);\n        align-content: start;\n      }\n\n      /* ── 아무것도 없을 때 ──────────────────────────────────────────────\n         이 자리가 이 화면에서 가장 중요하다. 처음 온 사람은 여기서 이 도구가\n         무엇을 만드는 것인지 알게 된다. 「데이터 없음」으로 끝내지 않는다. */\n      div[empty] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: var(--spacing-medium, 8px);\n        padding: var(--spacing-large, 12px);\n        text-align: center;\n        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      }\n      div[empty] md-icon {\n        --md-icon-size: 48px;\n        color: var(--md-sys-color-outline-variant);\n      }\n      div[empty] h2 {\n        margin: 0;\n        font: var(--theme-font, inherit);\n        font-size: var(--ui-t-title, 15px);\n        color: var(--md-sys-color-on-surface);\n      }\n      div[empty] p {\n        margin: 0;\n        max-width: 34em;\n        line-height: 1.6;\n      }\n      div[empty] button {\n        margin-top: var(--spacing-medium, 8px);\n        padding: 8px 18px;\n        font: var(--label-font, inherit);\n        color: var(--md-sys-color-on-primary, #fff);\n        background-color: var(--md-sys-color-primary);\n        border: none;\n        border-radius: 6px;\n        cursor: pointer;\n      }\n    `\n  ]\n\n  @state() private figures: Figure[] = []\n  @state() private total = 0\n  @state() private search = ''\n  @state() private stateFilter = ''\n  @state() private loaded = false\n\n  get context() {\n    return {\n      title: i18next.t('title.figures'),\n      actions: [\n        {\n          title: i18next.t('button.new-figure'),\n          action: () => this.openModeller()\n        }\n      ]\n    }\n  }\n\n  render() {\n    return html`\n      <div filters>\n        <input\n          search\n          type=\"search\"\n          .value=${this.search}\n          placeholder=${i18next.t('text.search-figure-by-name-or-type')}\n          @change=${(e: Event) => {\n            this.search = (e.target as HTMLInputElement).value\n            this.reload()\n          }}\n        />\n        ${[\n          { value: '', label: i18next.t('label.all') },\n          { value: 'draft', label: i18next.t('label.draft') },\n          { value: 'released', label: i18next.t('label.released') }\n        ].map(\n          option => html`\n            <button\n              state\n              ?selected=${this.stateFilter === option.value}\n              @click=${() => {\n                this.stateFilter = option.value\n                this.reload()\n              }}\n            >\n              ${option.label}\n            </button>\n          `\n        )}\n        ${this.loaded ? html`<span count>${i18next.t('text.figure-count', { count: this.total })}</span>` : ''}\n      </div>\n\n      ${!this.loaded\n        ? html``\n        : this.figures.length === 0\n          ? this.renderEmpty()\n          : html`\n              <div cards>\n                ${this.figures.map(\n                  figure => html`\n                    <figure-card\n                      .figure=${figure}\n                      @open=${() => this.openModeller(figure.id)}\n                      @remove=${() => this.removeFigure(figure)}\n                    ></figure-card>\n                  `\n                )}\n              </div>\n            `}\n    `\n  }\n\n  /**\n   * 빈 화면.\n   *\n   * 걸러 보기 때문에 비었는지, 아직 만든 것이 없어서 비었는지를 **가른다.** 같은\n   * 문구를 쓰면 사용자가 검색어를 지워 볼 생각을 못 한다.\n   */\n  private renderEmpty() {\n    const filtered = !!this.search || !!this.stateFilter\n\n    if (filtered) {\n      return html`\n        <div empty>\n          <md-icon>search_off</md-icon>\n          <h2>${i18next.t('text.no-figure-matches-the-filter')}</h2>\n          <p>${i18next.t('text.try-clearing-the-search-or-state-filter')}</p>\n          <button\n            @click=${() => {\n              this.search = ''\n              this.stateFilter = ''\n              this.reload()\n            }}\n          >\n            ${i18next.t('button.clear-filters')}\n          </button>\n        </div>\n      `\n    }\n\n    return html`\n      <div empty>\n        <md-icon>deployed_code</md-icon>\n        <h2>${i18next.t('text.no-figure-yet')}</h2>\n        <p>${i18next.t('text.what-a-figure-is')}</p>\n        <button @click=${() => this.openModeller()}>${i18next.t('button.new-figure')}</button>\n      </div>\n    `\n  }\n\n  async pageUpdated(changes: Record<string, unknown>, lifecycle: Record<string, unknown>) {\n    if (this.active) {\n      await this.reload()\n    }\n  }\n\n  private async reload() {\n    const { items, total } = await fetchFigureList({\n      search: this.search || undefined,\n      state: this.stateFilter || undefined\n    })\n\n    this.figures = items\n    this.total = total\n    this.loaded = true\n  }\n\n  private openModeller(id?: string) {\n    navigate(id ? `figure-modeller/${id}` : 'figure-modeller')\n  }\n\n  /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */\n  private async removeFigure(figure: Figure) {\n    // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다\n    const message = i18next.t('text.delete-figure-confirm', { name: figure.name })\n    if (!confirm(message)) {\n      return\n    }\n\n    await deleteFigure(figure.id)\n    await this.reload()\n  }\n}\n"]}

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

@@ -0,0 +1,219 @@
+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 { PageView } from '@operato/shell';
+declare const FigureModellerPageBase: typeof PageView;
+/**
+ * Figure 저작면.
+ *
+ * ## 세 칸이다
+ *
+ *   왼쪽   도형 팔레트 · 부품 목록 · 속성
+ *   가운데 미리보기 — `FigureInstance` 를 실제로 세운다
+ *   오른쪽 판단 — 늘 떠 있다
+ *
+ * 미리보기가 씬 위에서 실제로 동작하는 것이 이 도구의 전제다. **편집한 것이 곧 실제 결과물**이라야
+ * "모델러에서는 되는데 보드에서는 다르다"가 생기지 않는다.
+ *
+ * ## 편집 데이터는 씬 모델 하나뿐이다
+ *
+ * 이 페이지가 갖는 것은 보드 하나와 부품 목록 — 미리보기에 그대로 세워지는 씬 모델이다.
+ * 저장 형식(`FigureSource`)으로 바꾸는 것은 **경계에서만** 한다: 저장할 때, 판단할 때,
+ * AI 후보와 비교할 때. 그 변환은 `figure-source.ts` 한 곳에서만 일어난다.
+ *
+ * 팔레트도 속성 편집기도 이 데이터를 직접 수정하지 않는다. 무엇을 하겠다는 것만 알리고,
+ * 바꾸는 것은 이 페이지다. 두 곳에서 고치면 실행 취소도 저장도 어느 쪽이 맞는지 알 수
+ * 없게 된다.
+ */
+export declare class FigureModellerPage extends FigureModellerPageBase {
+    static styles: import("lit").CSSResult;
+    /** 편집 중인 Figure. 새로 만드는 중이면 `id` 가 없다. */
+    private figure?;
+    /** 편집 데이터 — 미리보기에 그대로 세워지는 씬 모델이다. */
+    private board?;
+    private parts;
+    private selected;
+    private view;
+    /**
+     * 가운데 칸이 무엇을 보이나.
+     *
+     * 편집 캔버스는 늘 기준 크기다. 그런데 이 형식의 값 절반은 크기가 달라졌을 때 어떻게
+     * 반응하는가에 있다. 그것을 볼 자리가 없었다.
+     */
+    private mode;
+    /**
+     * 어느 칸이 접혀 있나.
+     *
+     * 통째로 갈아 끼운다 — 안쪽 값만 바꾸면 Lit 이 같은 객체로 보고 다시 그리지 않는다.
+     */
+    private collapsed;
+    private dirty;
+    private saving;
+    private violations;
+    /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
+    private proposal?;
+    /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
+    private proposalOf?;
+    /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
+    private picked;
+    /**
+     * 저장 형식으로 변환한 것. 씬 모델이 바뀔 때만 다시 만든다.
+     *
+     * 저장·판단·AI 후보 비교가 이것을 쓴다. 렌더링할 때마다 새로 만들면 판단 패널이 매번
+     * 다시 계산하므로, 변환은 `willUpdate` 에서 한 번만 한다.
+     */
+    private folded?;
+    willUpdate(changed: Map<string, unknown>): void;
+    get context(): {
+        title: string;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
+     *
+     * ## 무엇을 보고 있나
+     *
+     * 편집과 미리보기는 같은 자리를 놓고 다투지 않는다. 둘 다 넓이가 필요하고, 동시에
+     * 봐야 할 일이 없다. 부품을 고치는 동안에는 편집만 보면 되고, 다 고친 뒤에 보드에서
+     * 어떻게 되는지 보면 된다.
+     *
+     * 후보가 와 있을 때는 그 두 단추를 내지 않는다. 그때는 가운데가 이미 둘로 나뉘어
+     * 있다.
+     *
+     * ## 띠는 늘 있다
+     *
+     * 손잡이가 여기 있기 때문이다. 후보가 왔다고 띠를 통째로 감추면, 칸을 접어 둔 채로
+     * 후보를 받으면 되돌릴 방법이 없어진다.
+     */
+    private renderBar;
+    /**
+     * 한쪽 칸을 접고 펴는 손잡이.
+     *
+     * 화살표는 **누르면 무엇이 일어나는지**를 가리킨다 — 펴져 있으면 칸이 사라질 쪽,
+     * 접혀 있으면 칸이 돌아올 쪽. 지금 상태를 가리키게 하면 반대로 읽힌다.
+     */
+    private renderCollapse;
+    private toggleCollapse;
+    /**
+     * AI 후보를 나란히 세운다.
+     *
+     * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
+     * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+     */
+    private renderProposed;
+    /**
+     * 무엇을 받을지 고른다.
+     *
+     * 통째로만 받게 두면 「몸통은 좋은데 모터 자리가 틀렸다」에 답할 수 없다 — 그게
+     * 가장 흔한 반응이다. 변경 하나가 칩 하나이고, 처음에는 전부 골라 둔다. 통째로
+     * 받는 것이 보통의 길이므로 그것이 한 번 누르기여야 한다.
+     *
+     * 고른 조합을 **받기 전에 재 본다.** 형식을 어기면 못 누르게 하고, 정책을 넘으면
+     * 알린다. 골라 받으면 후보를 낼 때와 다른 조합이 되므로 후보의 점수를 그대로
+     * 믿을 수 없다 — 예를 들어 등급은 안 받고 부품만 받으면 부품 수 한도를 넘는다.
+     *
+     * 형식 오류가 실제로 나는 조합은 아직 보지 못했다. 그래도 두는 것은 값이 거의
+     * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
+     */
+    private renderDecision;
+    /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
+    private renderChange;
+    private toggle;
+    /**
+     * 후보가 왔다.
+     *
+     * 원본 데이터에 넣지 않는다. 나란히 두고 저작자가 고른다. AI 가 원본 데이터에 직접 쓰면
+     * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
+     */
+    private receive;
+    /**
+     * 고른 변경을 받아들인다.
+     *
+     * 후보 비교는 저장 형식으로 한다 — 부품 이름으로 짝짓고 기준 치수·등급까지 함께 봐야
+     * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
+     */
+    private take;
+    private discard;
+    /**
+     * 저장할 수 있나.
+     *
+     * 형식을 어긴 원본 데이터로는 저장을 누를 수 없게 한다. 눌렀다가 서버가 받아주지 않는 것보다,
+     * 누를 수 없는 이유가 판단 패널에 떠 있는 것이 낫다.
+     */
+    private get canSave();
+    pageUpdated(changes: Record<string, unknown>, lifecycle: {
+        resourceId?: string;
+    }): Promise<void>;
+    private load;
+    private startNew;
+    private rename;
+    /**
+     * 부품 목록을 갈아 끼운다.
+     *
+     * 편집 규칙은 `part-edits` 가 갖는다 — 화면과 테스트가 같은 것을 쓰게 하려고 떼어
+     * 놓았다. 여기서는 결과를 담고 선택 인덱스를 정리한다.
+     */
+    private put;
+    private addPart;
+    private removePart;
+    private duplicatePart;
+    private movePart;
+    private updatePart;
+    /**
+     * 디테일 등급을 바꾼다.
+     *
+     * 이 값은 부품 수 한도를 정하고 성숙도의 한 축이 된다. 부품보다 위에 있는 값이라
+     * 보드에 담는다.
+     *
+     * 한도를 내려서 이미 넣은 부품 수보다 작아질 수 있다. 그때 부품을 지우지 않는다.
+     * 검증이 위반으로 알리고, 성숙도가 등급에 안 맞는다고 말한다. 저작자가 무엇을 뺄지
+     * 정할 일이지 도구가 정할 일이 아니다.
+     */
+    private changeDetailLevel;
+    /**
+     * 부품을 잠깐 가린다.
+     *
+     * 씬이 이미 갖고 있는 상태를 켜고 끄는 것뿐이다 — 편집 모드에서는 faint 로 보이고
+     * 뷰 모드에서는 안 그려진다. 저장 형식에는 실리지 않으므로 다시 열면 전부 보인다.
+     *
+     * `dirty` 로 치지 않는다. 저장될 것이 하나도 바뀌지 않았는데 "저장하지 않은 변경"이
+     * 뜨면, 저장 버튼이 무엇을 저장하겠다는 것인지 알 수 없다.
+     */
+    private toggleHidden;
+    /**
+     * 한꺼번에 감추거나 되돌린다.
+     *
+     * 부품 스물짜리에서 안쪽 하나를 보려고 열아홉을 누르던 것을 없앤다. 한 번에 바꾸므로
+     * 목록을 한 번만 갈아 끼운다 — 하나씩 스무 번 갈면 미리보기가 스무 번 다시 선다.
+     */
+    private setAllHidden;
+    /**
+     * 미리보기에서 기즈모로 옮기거나 2D 에서 끌었다.
+     *
+     * 알려 오는 것은 부품 **이름**이다. 목록의 몇 번째인지는 여기서 찾는다 — 이벤트가
+     * 오는 사이에 목록이 바뀌었으면 찾지 못하고, 그때는 아무것도 하지 않는다.
+     */
+    private partChanged;
+    /**
+     * 정밀 배치 도구.
+     *
+     * 규칙은 `part-edits` 가 갖는다. 여기서는 어느 것을 부를지만 정한다.
+     */
+    private runTool;
+    /**
+     * 캔버스에서 부품을 선택했다.
+     *
+     * 캔버스가 알리는 것은 **이름**이다. 목록의 몇 번째인지는 여기서 찾는다 — 알림이
+     * 오는 사이에 목록이 바뀌었으면 못 찾고, 그때는 고른 것을 바꾸지 않는다.
+     * 없는 자리를 고르면 속성 칸이 빈 채로 열려 「사라졌나」로 읽힌다.
+     */
+    /** 지금 고른 부품 이름. 캔버스가 인덱스가 아니라 이름을 받는다. */
+    private get pickedName();
+    private pickPart;
+    private save;
+}
+export {};