@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1,991 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { EXTRUDE_PRIMITIVES, MATERIAL_PRESETS, PRIMITIVE_KINDS, SEGMENTED_PRIMITIVES, SEGMENT_PRESETS, SIZING_RULES, trianglesOf } from '@hatiolab/figure-model';
+import { activePalette } from '@hatiolab/things-scene';
+import { partToFigure, partFromFigure } from './figure-source.js';
+import { canMirror } from './part-edits.js';
+/**
+ * 고른 부품의 속성.
+ *
+ * ## 여기가 사용자 용어로 보여 주는 자리다
+ *
+ * 모델러 페이지가 갖고 있는 것은 **씬 모델**이다 — 보드 위에 부품 컴포넌트가 놓인 상태.
+ * 그런데 사용자에게 보여야 하는 것은 씬 속성 이름(`left`·`top`·`zPos`)이 아니라
+ * **X·Y·Z** 다. 다른 3D 도구가 모두 그렇게 부르고, 위치도 부품의 **중심**으로 읽는다.
+ *
+ * 그래서 이 패널은 받은 부품을 FigureSource 형태로 **변환해서 보여 주고, 수정한 것을
+ * 다시 씬 모델로 되돌려 알린다.** 변환은 `figure-source.ts` 가 한다 — 여기서 축을 다시 계산하지
+ * 않는다.
+ *
+ * ## 있는 것만 보여 준다
+ *
+ * 분할 수는 곡면이 있는 도형에만, 모서리 굴림은 단면을 뽑는 도형에만 뜻이 있다.
+ * 뜻 없는 칸을 회색으로 늘어놓으면 저작자가 「왜 안 먹지」를 고민하게 된다 —
+ * 아예 내지 않는다.
+ *
+ * ## 이름은 저장되는 식별자다
+ *
+ * `FigurePart.name` 은 바인딩·애니메이션·슬롯이 가리키는 이름이다. 고치면 배치된
+ * 인스턴스의 바인딩이 **조용히** 끊긴다. 그래서 이름 칸에만 경고를 붙인다.
+ *
+ * ## 「상태 색이 붙는 자리」를 걷었다
+ *
+ * `FigurePart.materialSlot`(당시 이름은 `slot`) 을 고르는 칸이 있었는데 **아무 일도 하지 않았다.** things-scene 의
+ * figure 런타임이 `slot` 을 읽지 않는다 — 선언 한 줄이 전부다. 되는 줄 알고 만들었고,
+ * 확인하지 않은 것이 잘못이다.
+ *
+ * 그리고 되게 만들더라도 이 모양이 아니다. 상태 색은 특별한 것이 아니라 **속성 하나**이고,
+ * 툴팁·라벨·표시 여부와 같은 자리에서 다뤄져야 한다. 그 설계가 정해지면(figure-model#2)
+ * 이 자리에 **속성 선언과 부품 바인딩** 편집기가 들어온다.
+ *
+ * 그때까지 빈 약속을 두지 않는다. 아무 일도 안 하는 칸은 없느니만 못하다.
+ *
+ * ## 고치지 않는다
+ *
+ * 정본 한 벌은 저작면이 갖는다. 여기서는 바뀐 부품을 알릴 뿐이다.
+ */
+let FigureInspector = class FigureInspector extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** 보드 위의 부품들. 씬 모델 그대로다. */
+        this.parts = [];
+        this.selected = -1;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow-y: auto;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        /*
+          이 패널의 본문 크기를 여기서 한 번 정한다.
+
+          전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를
+          물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.
+          이 파일에서만 두 번 났다.
+
+          form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
+          그것 말고는 여기 값을 따른다.
+        */
+        font-size: 0.76rem;
+      }
+
+      section {
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      h3 {
+        margin: 0 0 6px 0;
+        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));
+      }
+
+      label {
+        display: block;
+        margin-bottom: 2px;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      input,
+      select {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 4px 7px;
+        font: var(--input-field-font, inherit);
+        font-size: 0.76rem;
+        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;
+      }
+      input:focus,
+      select:focus {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: -1px;
+      }
+
+      /*
+        숫자 칸 — 라벨을 칸 **안** 왼쪽에 둔다.
+
+        벡터 저작도구(Sketch·Figma)가 X·Y·W·H 를 이렇게 둔다. 라벨을 위에 얹으면 줄마다
+        두 줄을 먹어서, 자리·크기·회전 아홉 칸이 화면 절반을 차지한다. 안에 두면 한 줄에
+        셋이 들어가고 무엇이 무엇인지도 붙어 읽힌다.
+      */
+      div[cell] {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding-left: 6px;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+      }
+      div[cell]:focus-within {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: -1px;
+        border-color: transparent;
+      }
+      div[cell] span[axis] {
+        flex: none;
+        font-size: 0.64rem;
+        letter-spacing: 0.02em;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[cell] input {
+        min-width: 0;
+        padding: 4px 6px 4px 2px;
+        font-family: var(--mono-font, monospace);
+        text-align: right;
+        background: none;
+        border: none;
+        border-radius: 0;
+      }
+      div[cell] input:focus {
+        outline: none;
+      }
+
+      /* 축 셋을 한 줄에 — 좌표는 셋이 같이 읽혀야 한다 */
+      div[triple] {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 4px;
+      }
+      div[field] + div[field],
+      div[triple] + div[field],
+      div[field] + div[triple] {
+        margin-top: 7px;
+      }
+
+      /*
+        정밀 제작 도구.
+
+        보드 편집기는 자산을 배치하는 곳이라 대충 놓아도 되지만, 여기는 자산을 만드는
+        곳이다. 「몸통 한가운데」·「바닥에 붙이기」·「반대쪽에도 하나」를 손으로 계산하면
+        늘 조금씩 어긋나고, 기준 치수를 바꾸면 전부 다시 해야 한다.
+      */
+      div[tools] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 3px;
+        margin-top: 6px;
+      }
+      div[tools] button {
+        padding: 3px 8px;
+        font: var(--label-font, inherit);
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      div[tools] button[disabled] {
+        opacity: 0.35;
+        cursor: default;
+      }
+      div[tools] button:hover:not([disabled]) {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      div[tools] span[sep] {
+        width: 1px;
+        margin: 2px 3px;
+        background-color: var(--md-sys-color-outline-variant);
+      }
+
+      /* 지금 어느 축이 늘어나나 — 크기를 고치면 바뀔 수 있어서 값으로 적는다 */
+      p[axis-now] {
+        margin: 4px 0 0 0;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-primary);
+      }
+      /* 이 선택이 무엇을 무는지 — 성숙도의 묶음 수에 그대로 잡힌다 */
+      p[cost] {
+        margin: 4px 0 0 0;
+        font-size: 0.68rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 이름을 바꾸면 무엇이 끊기는지 말한다 */
+      p[warn] {
+        margin: 4px 0 0 0;
+        font-size: 0.68rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-tertiary);
+      }
+
+      /* 분할 수 프리셋 — 자유 입력보다 이 셋을 권한다 */
+      div[presets] {
+        display: flex;
+        gap: 4px;
+        margin-top: 4px;
+      }
+      div[presets] button {
+        flex: 1;
+        padding: 3px 0;
+        font: var(--label-font, inherit);
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      div[presets] button[on] {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+
+      /*
+        분할 수 선택 — 모양과 삼각형 수를 **함께** 보여 준다.
+
+        숫자만 늘어놓으면 8 과 16 이 무엇이 다른지 알 수 없다. 로우폴리에서 이 선택이
+        곧 「몇 개까지 편하게 놓을 수 있나」를 정하므로, 각지는 정도와 그 값이 무는
+        삼각형 수를 한자리에서 보아야 한다.
+
+        실루엣은 지어낸 그림이 아니다 — 곡면 프리미티브를 위에서 본 윤곽이 정확히
+        정n각형이다. 삼각형 수는 화면이 셈하지 않고 figure-model 의 trianglesOf 가 낸다.
+      */
+      div[segments] {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 4px;
+      }
+      /* 원 유지 · 끄기 — 고르는 값이라 분할 수와 같은 모양으로 둔다 */
+      div[choices] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+      }
+      button[choice] {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1px;
+        padding: 6px 8px;
+        text-align: left;
+        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[choice]:hover:not([on]) {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      button[choice][on] {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      button[choice] small {
+        opacity: 0.75;
+      }
+      button[seg] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1px;
+        padding: 6px 2px 4px 2px;
+        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[seg]:hover:not([on]) {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      button[seg][on] {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      button[seg] svg {
+        display: block;
+        /* 작으면 12 와 16 이 둘 다 동그라미로 보인다 — 각이 읽힐 만큼은 키운다 */
+        width: 40px;
+        height: 40px;
+      }
+      button[seg] svg polygon {
+        fill: var(--md-sys-color-surface-container-highest);
+        stroke: currentColor;
+        stroke-width: 1.1;
+        stroke-linejoin: miter;
+      }
+      button[seg][on] svg polygon {
+        fill: var(--md-sys-color-surface-container-lowest);
+      }
+      button[seg] b {
+        font-size: 0.8rem;
+        font-weight: 700;
+        line-height: 1.1;
+      }
+      button[seg] small {
+        font-size: 0.62rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      button[seg][on] small {
+        color: inherit;
+      }
+      /* 프리셋 밖의 값도 쓸 수 있다. 다만 권하는 쪽을 크게 둔다 */
+      details[free] {
+        margin-top: 6px;
+      }
+      details[free] summary {
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        cursor: pointer;
+      }
+      details[free] div[cell] {
+        margin-top: 4px;
+      }
+
+      /*
+        색 견본.
+
+        토큰을 글자로 받지 않는다. things-scene 의 팔레트 선언이 「여기 든 이름이 저작에서
+        고를 수 있는 전부이고, 자유색을 허용하지 않는 것이 감각적인 로우폴리의 첫 규칙」
+        이라고 못박고 있다. 글자 칸으로 두면 그 규칙이 화면에서 사라지고, 오타 하나로
+        resolveToken 이 던진다.
+      */
+      div[swatches] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+      /*
+        두 무리의 경계. 「칠한 색」과 「켜진 색」이 한 줄에 섞이면 accent(주황)와
+        status-warning(주황)이 나란히 놓여 무엇이 무엇인지 알 수 없다.
+      */
+      label[group] {
+        margin-top: 8px;
+        padding-top: 8px;
+        font-size: var(--ui-t-micro, 11px);
+        letter-spacing: 0.03em;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* 값이 옆에 붙어야 끌면서 얼마인지 안다 */
+      div[slider] {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      div[slider] input[type='range'] {
+        flex: 1;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+      div[slider] output {
+        flex: none;
+        width: 2.6em;
+        text-align: right;
+        font: var(--mono-font, ui-monospace, monospace);
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      button[swatch] {
+        width: 26px;
+        height: 26px;
+        padding: 0;
+        background-color: var(--swatch);
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        border-radius: 50%;
+        cursor: pointer;
+      }
+      button[swatch][on] {
+        /* 고른 것은 테두리가 아니라 고리로 표시한다 — 색 자체를 가리지 않으려고 */
+        box-shadow:
+          0 0 0 2px var(--md-sys-color-surface-container-lowest),
+          0 0 0 4px var(--md-sys-color-primary);
+      }
+      span[token] {
+        display: block;
+        margin-top: 6px;
+        font-family: var(--mono-font, monospace);
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      label[toggle] {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: 7px 0 0 0;
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+      }
+      label[toggle] input {
+        width: auto;
+      }
+
+      p[quiet] {
+        margin: 0;
+        font-size: 0.76rem;
+        line-height: 1.6;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+  `
+    ]; }
+    /** `part` 는 HTMLElement 의 속성(DOMTokenList)이다 — 가리면 형이 어긋난다. */
+    get chosen() {
+        return this.parts?.[this.selected];
+    }
+    render() {
+        const part = this.chosen;
+        if (!part || !this.board) {
+            return html `
+        <section>
+          <h3>${i18next.t('label.properties')}</h3>
+          <p quiet>${i18next.t('text.select-a-part-to-edit')}</p>
+        </section>
+      `;
+        }
+        // 여기부터는 사용자 용어다 — X·Y·Z, 위치는 부품 중심, 회전은 도(degree).
+        const shown = partToFigure(part, this.board);
+        return html `
+      ${this.renderIdentity(shown)} ${this.renderPlacement(shown)} ${this.renderShape(shown)}
+      ${this.renderMaterial(shown)} ${this.renderBehaviour(shown)}
+    `;
+    }
+    renderIdentity(part) {
+        return html `
+      <section>
+        <h3>${i18next.t('label.part')}</h3>
+        <div field>
+          <label>${i18next.t('label.name')}</label>
+          <input
+            .value=${part.name}
+            @change=${(e) => this.put({ name: e.target.value })}
+          />
+          <p warn>${i18next.t('text.renaming-a-part-breaks-bindings')}</p>
+        </div>
+        <div field>
+          <label>${i18next.t('label.shape')}</label>
+          <select @change=${(e) => this.changePrimitive(e.target.value)}>
+            ${PRIMITIVE_KINDS.map(kind => html `
+                <option value=${kind} ?selected=${kind === part.primitive}>
+                  ${i18next.t('label.primitive-' + kind)}
+                </option>
+              `)}
+          </select>
+        </div>
+      </section>
+    `;
+    }
+    renderPlacement(part) {
+        const t = part.transform;
+        const rotation = t.rotation ?? {};
+        return html `
+      <section>
+        <h3>${i18next.t('label.placement')}</h3>
+
+        <label>${i18next.t('label.position')}</label>
+        <div triple>
+          ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), t.position[axis], value => this.putTransform({ position: { ...t.position, [axis]: value } })))}
+        </div>
+
+        <div field>
+          <label>${i18next.t('label.size')}</label>
+          <div triple>
+            ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), t.size[axis], value => this.putTransform({ size: { ...t.size, [axis]: value } }), 1))}
+          </div>
+        </div>
+
+        <div field>
+          <label>${i18next.t('label.tools')}</label>
+          <div tools>
+            <button title=${i18next.t('text.center-on-x')} @click=${() => this.ask('center', 'x')}>
+              ${i18next.t('button.center-x')}
+            </button>
+            <button title=${i18next.t('text.center-on-z')} @click=${() => this.ask('center', 'z')}>
+              ${i18next.t('button.center-z')}
+            </button>
+            <button title=${i18next.t('text.put-on-floor')} @click=${() => this.ask('floor', 'y')}>
+              ${i18next.t('button.to-floor')}
+            </button>
+            <span sep></span>
+            ${['x', 'z'].map(axis => {
+            // 이미 가운데면 대칭이 제자리다 — 겹친 부품이 조용히 생기지 않게 막는다
+            const able = this.board ? canMirror(this.board, this.parts, this.selected, axis) : false;
+            return html `
+                <button
+                  ?disabled=${!able}
+                  title=${i18next.t(able ? 'text.mirror-explained' : 'text.mirror-would-overlap')}
+                  @click=${() => this.ask('mirror', axis)}
+                >
+                  ${i18next.t('button.mirror-' + axis)}
+                </button>
+              `;
+        })}
+            <span sep></span>
+            <button title=${i18next.t('text.snap-explained')} @click=${() => this.ask('snap', 'x')}>
+              ${i18next.t('button.snap')}
+            </button>
+          </div>
+        </div>
+
+        <div field>
+          <label>${i18next.t('label.rotation-degrees')}</label>
+          <div triple>
+            ${['x', 'y', 'z'].map(axis => this.number(axis.toUpperCase(), rotation[axis] ?? 0, value => this.putTransform({ rotation: { ...rotation, [axis]: value } })))}
+          </div>
+        </div>
+      </section>
+    `;
+    }
+    /** 분할 수와 모서리 굴림 — 해당하는 도형에만 낸다. */
+    renderShape(part) {
+        const segmented = SEGMENTED_PRIMITIVES.includes(part.primitive);
+        const extruded = EXTRUDE_PRIMITIVES.includes(part.primitive);
+        if (!segmented && !extruded)
+            return nothing;
+        return html `
+      <section>
+        <h3>${i18next.t('label.shape-detail')}</h3>
+        ${segmented ? this.renderSegments(part) : nothing}
+        ${segmented ? this.renderKeepRound(part) : nothing}
+        ${extruded ? this.renderExtruded(part) : nothing}
+      </section>
+    `;
+    }
+    /**
+     * 민 단면 — 모서리와 **속을 파는 두께.**
+     *
+     * 벽 두께를 0 으로 두면 통짜다. 0 보다 크면 그만큼 안으로 들어온 테가 생기고, 그것이
+     * 트레이 · 토트 · 통 · 케이스가 되는 자리다. 바닥은 비워 두면 벽과 같고, 0 으로 두면
+     * 위아래가 다 뚫린 테두리가 된다.
+     */
+    renderExtruded(part) {
+        const hollow = part.shape?.hollow;
+        const wall = hollow?.wall ?? 0;
+        const reshape = (over) => this.put({ shape: { ...(part.shape ?? {}), ...over } });
+        return html `
+      <div field>
+        <label>${i18next.t('label.corner-round')}</label>
+        ${this.number('', part.shape?.round ?? 0, value => reshape({ round: value }))}
+      </div>
+      <div field>
+        <label>${i18next.t('label.hollow-wall')}</label>
+        ${this.number('', wall, value => reshape({ hollow: value > 0 ? { ...(hollow ?? {}), wall: value } : undefined }))}
+      </div>
+      ${wall > 0
+            ? html `
+            <div field>
+              <label>${i18next.t('label.hollow-floor')}</label>
+              ${this.number('', hollow?.floor ?? wall, value => reshape({ hollow: { ...hollow, wall, floor: value } }))}
+            </div>
+          `
+            : nothing}
+    `;
+    }
+    /**
+     * 분할 수 — 모양과 무게를 함께 고른다.
+     *
+     * 삼각형 수는 화면이 셈하지 않는다. `trianglesOf` 에 그 분할 수를 가진 부품을 주고
+     * 물어본다 — 화면이 제 나름의 공식을 들면 figure-model 이 규칙을 바꿔도 화면만
+     * 옛 답을 계속 낸다.
+     */
+    /**
+     * 원통을 원통으로 둘까 — **고르는 값이고, 값을 치른다.**
+     *
+     * 인스턴스가 축마다 다른 배율을 받으면 원기둥이 타원 기둥이 된다. 지키려면 제 변환이
+     * 있어야 하고, 합친 형상은 변환을 하나만 받으므로 지키는 곡면 부품 하나가 draw call
+     * 하나다. 저작자가 그 대가를 모르고 고르면 안 되므로 그 자리에 적는다.
+     */
+    renderKeepRound(part) {
+        const on = part.keepRound !== false;
+        return html `
+      <div field>
+        <label>${i18next.t('label.keep-round')}</label>
+        <div choices>
+          <button choice ?on=${on} @click=${() => this.put({ keepRound: undefined })}>
+            <b>${i18next.t('text.keep-round-on')}</b>
+            <small>${i18next.t('text.keep-round-cost')}</small>
+          </button>
+          <button choice ?on=${!on} @click=${() => this.put({ keepRound: false })}>
+            <b>${i18next.t('text.keep-round-off')}</b>
+            <small>${i18next.t('text.keep-round-merged')}</small>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderSegments(part) {
+        const current = part.segments ?? SEGMENT_PRESETS[1];
+        return html `
+      <div field>
+        <label>${i18next.t('label.segments')}</label>
+        <div segments>
+          ${SEGMENT_PRESETS.map(preset => {
+            const triangles = trianglesOf({ ...part, segments: preset });
+            return html `
+              <button seg ?on=${current === preset} @click=${() => this.put({ segments: preset })}>
+                ${this.silhouette(preset)}
+                <b>${preset}</b>
+                <small>${i18next.t('text.n-triangles', { count: triangles })}</small>
+              </button>
+            `;
+        })}
+        </div>
+
+        <details free>
+          <summary>${i18next.t('text.other-segment-count')}</summary>
+          ${this.number('', current, value => this.put({ segments: value }), 3)}
+        </details>
+      </div>
+    `;
+    }
+    /**
+     * 분할 수의 실루엣.
+     *
+     * 곡면 프리미티브를 위에서 본 윤곽이 정확히 정n각형이다 — 원기둥의 단면도, 구의
+     * 적도도. 그림을 지어내는 것이 아니라 실제로 만들어지는 모양이다.
+     */
+    silhouette(segments) {
+        const points = [];
+        for (let i = 0; i < segments; i++) {
+            // 꼭짓점 하나가 위로 오게 -90도에서 시작한다
+            const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments;
+            points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`);
+        }
+        return svg `
+      <svg viewBox="0 0 32 32" aria-hidden="true">
+        <polygon points=${points.join(' ')}></polygon>
+      </svg>
+    `;
+    }
+    /** 견본 한 줄. 무리마다 부른다. */
+    swatches(entries, chosen) {
+        return entries.map(([token, color]) => html `
+        <button
+          swatch
+          ?on=${token === chosen}
+          title=${token}
+          style="--swatch:${color}"
+          @click=${() => this.putMaterial({ token })}
+        ></button>
+      `);
+    }
+    renderMaterial(part) {
+        const material = part.material ?? {};
+        const palette = activePalette();
+        /*
+          두 무리로 나눠 보인다 — **칠한 색**과 **켜진 색**.
+    
+          `palette.status-*` 는 램프 · 표시등에 쓰라고 있는 색이다. 한 줄에 섞어 두면
+          `accent`(주황)와 `status-warning`(주황)이 나란히 놓여 무엇이 무엇인지 알 수
+          없다. 값을 비틀어 벌리는 대신 **고르는 자리에서 경계를 긋는다.**
+        */
+        const entries = Object.entries(palette);
+        const painted = entries.filter(([token]) => !token.startsWith('palette.status-'));
+        const lit = entries.filter(([token]) => token.startsWith('palette.status-'));
+        /** 자체발광. 없으면 안 빛나는 부품이다. */
+        const glow = material.emissive;
+        return html `
+      <section>
+        <h3>${i18next.t('label.material')}</h3>
+
+        <div field>
+          <label>${i18next.t('label.palette-token')}</label>
+          <div swatches>
+            ${this.swatches(painted, material.token)}
+          </div>
+          ${lit.length
+            ? html `
+                <label group>${i18next.t('label.status-colors')}</label>
+                <div swatches>
+                  ${this.swatches(lit, material.token)}
+                </div>
+              `
+            : ''}
+          <span token>${material.token ?? i18next.t('label.no-color-chosen')}</span>
+        </div>
+
+        <div field>
+          <label>${i18next.t('label.preset')}</label>
+          <select
+            @change=${(e) => {
+            const value = e.target.value;
+            this.putMaterial({ preset: (value || undefined) });
+        }}
+          >
+            <option value="" ?selected=${!material.preset}>${i18next.t('label.none')}</option>
+            ${MATERIAL_PRESETS.map(preset => html `
+                <option value=${preset} ?selected=${preset === material.preset}>
+                  ${i18next.t('label.preset-' + preset)}
+                </option>
+              `)}
+          </select>
+        </div>
+
+        <!-- 값이 없으면 각지게 그린다 — 형식이 그렇게 못 박았다. 체크상자도 그대로 보인다 -->
+        <label toggle>
+          <input
+            type="checkbox"
+            .checked=${material.flatShading ?? true}
+            @change=${(e) => this.putMaterial({ flatShading: e.target.checked })}
+          />
+          ${i18next.t('label.flat-shading')}
+        </label>
+        <label toggle>
+          <input
+            type="checkbox"
+            .checked=${!!material.transparent}
+            @change=${(e) => this.putMaterial({ transparent: e.target.checked })}
+          />
+          ${i18next.t('label.transparent')}
+        </label>
+
+        <div field>
+          <label>${i18next.t('label.emissive')}</label>
+          <p cost>${i18next.t('text.emissive-explained')}</p>
+
+          <div slider>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              .value=${String(glow?.intensity ?? 0)}
+              @input=${(e) => this.putEmissive(Number(e.target.value))}
+            />
+            <output>${(glow?.intensity ?? 0).toFixed(2)}</output>
+          </div>
+        </div>
+
+        ${glow
+            ? html `
+              <div field>
+                <label>${i18next.t('label.emissive-color')}</label>
+                <div swatches>
+                  <button
+                    swatch
+                    same
+                    ?on=${!glow.token}
+                    title=${i18next.t('label.same-as-off')}
+                    style="--swatch:${(material.token && palette[material.token]) || palette['palette.neutral']}"
+                    @click=${() => this.putMaterial({ emissive: { ...glow, token: undefined } })}
+                  ></button>
+                  ${lit.map(([token, color]) => html `
+                      <button
+                        swatch
+                        ?on=${token === glow.token}
+                        title=${token}
+                        style="--swatch:${color}"
+                        @click=${() => this.putMaterial({ emissive: { ...glow, token } })}
+                      ></button>
+                    `)}
+                </div>
+                <span token>${glow.token ?? i18next.t('label.same-as-off')}</span>
+              </div>
+
+              <label toggle>
+                <input
+                  type="checkbox"
+                  .checked=${!!glow.on}
+                  @change=${(e) => this.putMaterial({ emissive: { ...glow, on: e.target.checked } })}
+                />
+                ${i18next.t('label.on-by-default')}
+              </label>
+              <p cost>${i18next.t('text.on-by-default-explained')}</p>
+            `
+            : ''}
+
+      </section>
+    `;
+    }
+    /**
+     * 인스턴스 크기가 바뀔 때 이 부품이 어떻게 변하나.
+     *
+     * ## 늘어나는 축은 아직 못 보여 준다
+     *
+     * `stretch` 는 형식에 축을 적는 자리가 없어서 그리는 쪽이 **가장 길게 뻗은 축**으로
+     * 정한다. 그 답을 화면에 적어 주려면 규칙을 가진 쪽에 물어야 하는데, 그 함수
+     * (`stretchAxisOf` · `stretchAxis`)가 아직 배포된 판에 없다.
+     *
+     * 화면이 제 나름대로 계산하지 않는다. 규칙이 두 벌이 되면 보이는 축과 실제로 늘어나는
+     * 축이 갈리고, 그 어긋남은 화면을 믿게 만든 다음에 드러난다. 배포되면 잇는다.
+     *
+     * ## 값이 있는 것을 밝힌다
+     *
+     * `scale` 이 아닌 부품은 합쳐 그릴 수 없어 draw call 을 하나 더 쓴다. 그 비용이
+     * 성숙도의 묶음 수에 그대로 잡힌다. 고르는 자리에서 미리 말해 준다.
+     */
+    renderBehaviour(part) {
+        const sizing = part.sizing ?? 'scale';
+        const repeat = part.repeat ?? { axis: 'x', pitch: 0 };
+        return html `
+      <section>
+        <h3>${i18next.t('label.sizing-rule')}</h3>
+        <select @change=${(e) => this.put({ sizing: e.target.value })}>
+          ${SIZING_RULES.map(rule => html `
+              <option value=${rule} ?selected=${rule === sizing}>${i18next.t('label.sizing-' + rule)}</option>
+            `)}
+        </select>
+        <p warn>${i18next.t('text.sizing-' + sizing + '-explained')}</p>
+
+        ${sizing === 'scale'
+            ? nothing
+            : html `<p cost>${i18next.t('text.sizing-costs-one-draw-call')}</p>`}
+        ${sizing === 'repeat'
+            ? html `<p cost>${i18next.t('text.repeat-edits-the-unit')}</p>`
+            : nothing}
+
+        ${sizing === 'repeat'
+            ? html `
+              <div field>
+                <label>${i18next.t('label.repeat-axis')}</label>
+                <select
+                  @change=${(e) => this.put({ repeat: { ...repeat, axis: e.target.value } })}
+                >
+                  ${['x', 'y', 'z'].map(axis => html `<option value=${axis} ?selected=${axis === repeat.axis}>${axis}</option>`)}
+                </select>
+              </div>
+              <div field>
+                <label>${i18next.t('label.repeat-pitch')}</label>
+                ${this.number('', repeat.pitch, value => this.put({ repeat: { ...repeat, pitch: value } }), 1)}
+                <p cost>${i18next.t('text.repeat-pitch-explained')}</p>
+              </div>
+            `
+            : nothing}
+      </section>
+    `;
+    }
+    /**
+     * 숫자 칸.
+     *
+     * 빈 칸이나 글자를 넣었을 때 0 으로 바꿔치지 않는다 — 저작자가 지우는 중일 수 있고,
+     * 조용히 0 이 되면 부품이 사라진 것처럼 보인다. 숫자가 아니면 그냥 안 받는다.
+     */
+    number(label, value, set, min) {
+        return html `
+      <div cell>
+        ${label ? html `<span axis>${label}</span>` : nothing}
+        <input
+          type="number"
+          .value=${String(value)}
+          min=${min ?? nothing}
+          @change=${(e) => {
+            const raw = e.target.value;
+            const parsed = Number(raw);
+            if (raw === '' || !Number.isFinite(parsed)) {
+                // 되돌려 놓는다. 안 그러면 화면과 정본이 갈린다.
+                ;
+                e.target.value = String(value);
+                return;
+            }
+            set(parsed);
+        }}
+        />
+      </div>
+    `;
+    }
+    /**
+     * 도형을 바꾼다.
+     *
+     * 도형이 바뀌면 그 도형에 뜻 없는 값이 남는다. 남겨 두면 검증이 「무시됨」 위반을
+     * 내므로 여기서 걷는다.
+     */
+    changePrimitive(primitive) {
+        this.change(part => {
+            const next = { ...part, primitive };
+            if (!SEGMENTED_PRIMITIVES.includes(primitive))
+                delete next.segments;
+            if (!EXTRUDE_PRIMITIVES.includes(primitive))
+                delete next.shape;
+            if (SEGMENTED_PRIMITIVES.includes(primitive) && next.segments === undefined) {
+                next.segments = SEGMENT_PRESETS[1];
+            }
+            return next;
+        });
+    }
+    put(patch) {
+        this.change(part => ({ ...part, ...patch }));
+    }
+    putTransform(patch) {
+        this.change(part => ({ ...part, transform: { ...part.transform, ...patch } }));
+    }
+    /**
+     * 발광 세기를 고친다. **0 이면 블록을 통째로 지운다.**
+     *
+     * 세기 0 인 발광을 남겨 두면 「안 빛나는데 램프인 것」이 되어, 재질 키가 갈려 묶음이
+     * 헛되이 하나 는다. 0 은 「램프가 아니다」로 읽는 것이 맞다.
+     *
+     * `Number(value) || undefined` 를 쓰면 안 된다 — 0 이 falsy 라 변경으로 안 잡혀 옛
+     * 값이 그대로 남는다. 실제로 램프가 안 꺼졌다.
+     */
+    putEmissive(intensity) {
+        // `chosen` 은 씬 모델이다. 형식으로 옮긴 값은 `partToFigure` 이 만든 것이라 여기서 다시 꺼낸다.
+        const glow = this.board && this.chosen ? partToFigure(this.chosen, this.board).material?.emissive : undefined;
+        this.putMaterial({ emissive: intensity > 0 ? { ...glow, intensity } : undefined });
+    }
+    putMaterial(patch) {
+        this.change(part => ({
+            ...part,
+            material: { ...(part.material ?? {}), ...patch }
+        }));
+    }
+    /**
+     * 수정한 것을 씬 모델로 되돌려 알린다.
+     *
+     * 사용자는 X·Y·Z 로 수정하고, 모델러 페이지는 씬 모델을 갖는다. 그 사이를 여기서
+     * 잇는다 — 변환해서 수정하고 다시 되돌린다. **왕복 변환이 무손실이라야** 위치 하나
+     * 고쳤을 뿐인데 회전값이 조금씩 밀리는 일이 없다(`fold.test.ts` 가 이를 확인한다).
+     */
+    change(edit) {
+        const part = this.chosen;
+        const board = this.board;
+        if (!part || !board)
+            return;
+        this.emit(partFromFigure(edit(partToFigure(part, board)), board));
+    }
+    /** 정밀 도구를 시킨다. 정본은 저작면이 갖는다 — 여기서는 알리기만 한다. */
+    ask(what, axis) {
+        this.dispatchEvent(new CustomEvent('part-tool', {
+            detail: { index: this.selected, tool: what, axis },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    emit(part) {
+        this.dispatchEvent(new CustomEvent('update-part', { detail: { index: this.selected, part }, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], FigureInspector.prototype, "board", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureInspector.prototype, "parts", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FigureInspector.prototype, "selected", void 0);
+FigureInspector = __decorate([
+    customElement('figure-inspector')
+], FigureInspector);
+export { FigureInspector };
+//# sourceMappingURL=figure-inspector.js.map