@things-factory/figure-ui 10.1.43 → 10.1.45

package/client/modeller/figure-inspector.ts

@@ -1,2208 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, nothing, svg } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { live } from 'lit/directives/live.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,
-  FIGURE_PLACEMENTS,
-  trianglesOf
-} from '@hatiolab/figure-model'
-import { ANCHOR_RULES, JOINT_TYPES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repeatPlanOfPart } from '@hatiolab/figure-model'
-import type {
-  AnchorRule,
-  Axis,
-  ContractChange,
-  FigurePart,
-  FigurePlacement,
-  JointType,
-  MaterialPreset,
-  PartRole,
-  PrimitiveKind,
-  Vec3
-} from '@hatiolab/figure-model'
-import { activePalette } from '@hatiolab/things-scene'
-
-import { partToFigure, partFromFigure } from './figure-source.js'
-import type { FigureDraft, PartModel } from './figure-source.js'
-import { canMirror } from './part-edits.js'
-import { jointOf, parentChoices, patchJoint, setJointType } from './joint-edits.js'
-import { baseFittingParts, baseOf, resizeBase } from './base-box.js'
-import type { BaseSize } from './base-box.js'
-
-/** Axis choices for a joint. Written as a direction the author reads, stored as a vector. */
-const JOINT_AXES: readonly { key: string; axis: Vec3 }[] = [
-  { key: '+x', axis: { x: 1, y: 0, z: 0 } },
-  { key: '-x', axis: { x: -1, y: 0, z: 0 } },
-  { key: '+y', axis: { x: 0, y: 1, z: 0 } },
-  { key: '-y', axis: { x: 0, y: -1, z: 0 } },
-  { key: '+z', axis: { x: 0, y: 0, z: 1 } },
-  { key: '-z', axis: { x: 0, y: 0, z: -1 } }
-]
-
-function axisKeyOf(axis: Vec3): string | undefined {
-  return JOINT_AXES.find(one => one.axis.x === axis.x && one.axis.y === axis.y && one.axis.z === axis.z)?.key
-}
-
-/**
- * 고른 부품의 속성.
- *
- * ## 여기가 사용자 용어로 보여 주는 자리다
- *
- * 모델러 페이지가 갖고 있는 것은 **씬 모델**이다 — 기준 상자 위에 부품 컴포넌트가 놓인 상태.
- * 그런데 사용자에게 보여야 하는 것은 씬 속성 이름(`left`·`top`·`zPos`)이 아니라
- * **X·Y·Z** 다. 다른 3D 도구가 모두 그렇게 부르고, 위치도 부품의 **중심**으로 읽는다.
- *
- * 그래서 이 패널은 받은 부품을 FigureSource 형태로 **변환해서 보여 주고, 수정한 것을
- * 다시 씬 모델로 되돌려 알린다.** 변환은 `figure-source.ts` 가 한다 — 여기서 축을 다시 계산하지
- * 않는다.
- *
- * ## 있는 것만 보여 준다
- *
- * 분할 수는 곡면이 있는 도형에만, 모서리 굴림은 단면을 뽑는 도형에만 뜻이 있다.
- * 뜻 없는 칸을 회색으로 늘어놓으면 저작자가 「왜 안 먹지」를 고민하게 된다 —
- * 아예 내지 않는다.
- *
- * ## 이름은 저장되는 식별자다
- *
- * `FigurePart.name` 은 바인딩·애니메이션·슬롯이 가리키는 이름이다. 고치면 배치된
- * 인스턴스의 바인딩이 **조용히** 끊긴다. 그래서 이름 칸에만 경고를 붙인다.
- *
- * ## 「상태 색이 붙는 자리」를 걷었다
- *
- * `FigurePart.materialSlot`(당시 이름은 `slot`) 을 고르는 칸이 있었는데 **아무 일도 하지 않았다.** things-scene 의
- * figure 런타임이 `slot` 을 읽지 않는다 — 선언 한 줄이 전부다. 되는 줄 알고 만들었고,
- * 확인하지 않은 것이 잘못이다.
- *
- * 그리고 되게 만들더라도 이 모양이 아니다. 상태 색은 특별한 것이 아니라 **속성 하나**이고,
- * 툴팁·라벨·표시 여부와 같은 자리에서 다뤄져야 한다. 그 설계가 정해지면(figure-model#2)
- * 이 자리에 **속성 선언과 부품 바인딩** 편집기가 들어온다.
- *
- * 그때까지 빈 약속을 두지 않는다. 아무 일도 안 하는 칸은 없느니만 못하다.
- *
- * ## 고치지 않는다
- *
- * 정본 한 벌은 저작면이 갖는다. 여기서는 바뀐 부품을 알릴 뿐이다.
- */
-@customElement('figure-inspector')
-export class FigureInspector extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        --figure-control-height: 30px;
-        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;
-      }
-
-      /*
-        ── 자리를 아끼는 판 ──────────────────────────────────────────────────────
-        속성은 앞으로 더 늘어난다(능력 · 포트 · 애니메이션 · 기준정보). 지금 여백을 그대로 두면
-        그것들이 들어올 자리가 없다. 절 여백을 6/10 으로, 제목 아래를 4px 로 줄였다 — 글자 크기와
-        칸 높이는 건드리지 않는다(작게 만드는 것이 아니라 **빈 곳을 줄이는 것**이다).
-      */
-      section {
-        padding: 8px 10px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-      /* 입력 행은 촘촘하게, 서로 다른 편집 의도 사이에는 호흡을 둔다. */
-      section + section {
-        margin-top: 6px;
-      }
-      section[collapsible] {
-        padding: 0;
-      }
-      details[group] > summary {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 34px;
-        padding: 0 10px;
-        cursor: pointer;
-        list-style: none;
-      }
-      details[group] > summary::-webkit-details-marker {
-        display: none;
-      }
-      details[group] > summary h3 {
-        margin: 0;
-      }
-      details[group] > summary md-icon {
-        --md-icon-size: 16px;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      details[group] > div[group-content] {
-        padding: 4px 10px 8px;
-        border-top: 1px solid var(--md-sys-color-outline-variant);
-      }
-      h3 {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        margin: 0 0 4px 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));
-      }
-
-      /* 자산 메타데이터는 부품을 고친다는 현재 문맥에서는 요약으로만 둔다. */
-      details[asset] {
-        margin: -1px 0;
-      }
-      details[asset] summary {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        min-height: 26px;
-        cursor: pointer;
-        list-style: none;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-      details[asset] summary::-webkit-details-marker {
-        display: none;
-      }
-      details[asset] summary::before {
-        content: '›';
-        font-size: 1.1rem;
-        line-height: 1;
-        transition: transform 120ms ease;
-      }
-      details[asset][open] summary::before {
-        transform: rotate(90deg);
-      }
-      details[asset] summary b {
-        font-size: var(--ui-t-micro, 11px);
-        letter-spacing: 0.04em;
-      }
-      details[asset] summary small {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 0.7rem;
-      }
-
-      label {
-        display: flex;
-        align-items: center;
-        gap: 3px;
-        margin-bottom: 2px;
-        font-size: 0.68rem;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-
-      /*
-        도움말 물음표. **글자 줄을 하나 먹지 않는다** — 라벨·제목 줄의 남는 폭에 얹힌다.
-        아이콘만 두고 테두리를 안 두는 이유는 이것이 누를 것이라기보다 「더 있다」는 표시라서다.
-      */
-      button[help] {
-        display: inline-flex;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        color: var(--md-sys-color-outline);
-        background: none;
-        border: none;
-        cursor: pointer;
-      }
-      button[help] md-icon {
-        --md-icon-size: 13px;
-        font-size: 13px;
-      }
-      button[help]:hover,
-      button[help][aria-expanded='true'] {
-        color: var(--md-sys-color-primary);
-      }
-
-      /* 편 도움말. 라벨 아래 한 칸 들여 붙인다 — 무엇에 딸린 말인지 보이게. */
-      p[hint] {
-        margin: 2px 0 4px 0;
-        padding-left: 6px;
-        font-size: 0.68rem;
-        line-height: 1.5;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-        border-left: 2px solid var(--md-sys-color-outline-variant);
-      }
-
-      input,
-      select {
-        width: 100%;
-        min-height: var(--figure-control-height);
-        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;
-        box-sizing: border-box;
-        height: var(--figure-control-height);
-        min-height: var(--figure-control-height);
-        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;
-        min-height: 0;
-        height: calc(var(--figure-control-height) - 2px);
-        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;
-      }
-      /*
-        값이 둘인 줄은 셋으로 나누지 않는다. 가동 범위를 세 칸짜리 줄에 넣었더니 칸이 폭의 1/3 이라
-        「최소」라는 말과 -120 이 한 칸에 못 들어가 숫자가 잘렸다.
-      */
-      div[double] {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
-      }
-      /* 칸 아래에 붙는 한 줄짜리 행동. 칸과 같은 폭으로 둬야 한 묶음으로 읽힌다. */
-      button[fit] {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        width: 100%;
-        margin-top: 4px;
-        padding: 3px 8px;
-        font: inherit;
-        font-size: 0.72rem;
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface-container);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
-        cursor: pointer;
-      }
-      /* 고친 칸 바로 아래에 붙는 말. 막는 것은 오류 색, 알리는 것은 조용한 색. */
-      p[contract] {
-        display: flex;
-        gap: 4px;
-        margin: 4px 0 0;
-        font-size: 0.68rem;
-        line-height: 1.4;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      p[contract][blocking] {
-        color: var(--md-sys-color-error);
-      }
-      p[contract] md-icon {
-        --md-icon-size: 14px;
-        flex: none;
-      }
-
-      button[fit]:hover {
-        background-color: var(--md-sys-color-surface-container-high);
-      }
-      button[fit] md-icon {
-        --md-icon-size: 15px;
-      }
-      div[field] + div[field],
-      div[triple] + div[field],
-      div[field] + div[triple],
-      div[double] + div[field],
-      div[field] + div[double],
-      div[inline-field] + div[inline-field],
-      div[inline-field] + div[field],
-      div[field] + div[inline-field],
-      div[vector-row] + div[vector-row],
-      div[vector-row] + div[field],
-      div[field] + div[vector-row] {
-        /* 칸 사이 7 → 5. 칸 자체는 그대로 두고 사이만 좁힌다. */
-        margin-top: 5px;
-      }
-
-      /* 짧은 라벨과 단일 값은 같은 줄에서 읽는다. 복잡한 선택기에는 쓰지 않는다. */
-      div[inline-field] {
-        display: grid;
-        /* 같은 편집 밀도 안에서는 입력 시작선을 맞춘다. 라벨 길이가 칸 폭을 흔들면 안 된다. */
-        grid-template-columns: 64px minmax(0, 1fr);
-        align-items: center;
-        gap: 7px;
-      }
-      div[inline-field] > label {
-        margin: 0;
-        white-space: nowrap;
-      }
-      /* 한 줄 입력의 설명은 입력칸을 밀어내지 않고 바로 아래 전폭에서 읽는다. */
-      div[inline-field] > p[hint] {
-        grid-column: 1 / -1;
-        margin: -2px 0 1px;
-      }
-      div[inline-field] > code[fixed] {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      /* X·Y·Z는 함께 비교하는 값이므로, 묶음 제목만 왼쪽에 두고 입력은 한 행에 둔다. */
-      div[vector-row] {
-        display: grid;
-        grid-template-columns: 64px minmax(0, 1fr);
-        align-items: center;
-        gap: 7px;
-      }
-      div[vector-row] > label {
-        margin: 0;
-        white-space: nowrap;
-      }
-      div[vector-row] > p[hint] {
-        grid-column: 1 / -1;
-        margin: -2px 0 1px;
-      }
-      div[sizing-choices] {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 5px;
-      }
-      button[sizing-choice] {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 2px;
-        min-height: 52px;
-        padding: 7px 8px;
-        color: var(--md-sys-color-on-surface);
-        background: var(--md-sys-color-surface-container-lowest);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 7px;
-        text-align: left;
-        cursor: pointer;
-      }
-      button[sizing-choice][on] {
-        color: var(--md-sys-color-on-primary-container);
-        background: var(--md-sys-color-primary-container);
-        border-color: transparent;
-      }
-      button[sizing-choice] b {
-        font-size: 0.74rem;
-      }
-      button[sizing-choice] small {
-        font-size: 0.64rem;
-        line-height: 1.35;
-        opacity: 0.8;
-      }
-      div[anchor-rows] {
-        display: grid;
-        gap: 6px;
-      }
-      div[anchor-row] {
-        display: grid;
-        grid-template-columns: 46px minmax(0, 1fr);
-        align-items: start;
-        gap: 8px;
-        padding: 6px 7px;
-        background: var(--md-sys-color-surface-container);
-        border-radius: 7px;
-      }
-      div[anchor-row] label {
-        margin: 0;
-        font-size: 0.7rem;
-        font-weight: 700;
-      }
-      div[anchor-options] {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 4px;
-      }
-      button[anchor-choice] {
-        min-width: 0;
-        height: var(--figure-control-height);
-        box-sizing: border-box;
-        padding: 4px 3px;
-        overflow: hidden;
-        color: var(--md-sys-color-on-surface);
-        font: var(--label-font, inherit);
-        font-size: 0.63rem;
-        line-height: 1.2;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        background: var(--md-sys-color-surface-container-lowest);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 5px;
-        cursor: pointer;
-      }
-      button[anchor-choice][on] {
-        color: var(--md-sys-color-on-primary-container);
-        background: var(--md-sys-color-primary-container);
-        border-color: transparent;
-      }
-      details[anchor-advanced] {
-        grid-column: 2;
-        margin-top: 4px;
-      }
-      details[anchor-advanced] summary {
-        cursor: pointer;
-        font-size: 0.62rem;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      details[anchor-advanced] div[anchor-options] {
-        margin-top: 4px;
-      }
-      div[palette-meaning] {
-        display: grid;
-        gap: 2px;
-        margin-top: 7px;
-        padding: 6px 8px;
-        color: var(--md-sys-color-on-surface);
-        background: var(--md-sys-color-surface-container);
-        border-radius: 7px;
-      }
-      div[palette-meaning] b {
-        font-size: 0.72rem;
-      }
-      div[palette-meaning] small {
-        color: var(--md-sys-color-on-surface-variant);
-        font-size: 0.64rem;
-        line-height: 1.35;
-      }
-
-      /*
-        정밀 제작 도구.
-
-        도면 편집기는 자산을 배치하는 곳이라 대충 놓아도 되지만, 여기는 자산을 만드는
-        곳이다. 「몸통 한가운데」·「바닥에 붙이기」·「반대쪽에도 하나」를 손으로 계산하면
-        늘 조금씩 어긋나고, 기준 치수를 바꾸면 전부 다시 해야 한다.
-      */
-      div[tools] {
-        display: grid;
-        grid-template-columns: repeat(6, minmax(0, 1fr));
-        gap: 4px;
-      }
-      div[tools] button {
-        display: grid;
-        place-items: center;
-        min-width: 0;
-        height: var(--figure-control-height);
-        box-sizing: border-box;
-        padding: 0;
-        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 md-icon {
-        font-size: 17px;
-      }
-      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;
-      }
-
-      /* 지금 어느 축이 늘어나나 — 크기를 고치면 바뀔 수 있어서 값으로 적는다 */
-      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(4, 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: 32px;
-        height: 32px;
-      }
-      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;
-      }
-      div[role-choices] {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 4px;
-      }
-      div[role-choices] label[toggle] {
-        justify-content: center;
-        min-height: 30px;
-        margin: 0;
-        padding: 2px 4px;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
-        font-size: 0.68rem;
-        text-align: center;
-      }
-      div[role-choices] label[toggle]:has(input:checked) {
-        color: var(--md-sys-color-on-primary-container);
-        background: var(--md-sys-color-primary-container);
-        border-color: transparent;
-      }
-
-      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));
-      }
-
-      /*
-        고칠 수 없는 값 — 입력칸처럼 보이지 않게 한다.
-
-        전에는 그냥 글자였고, 옆의 이름 칸과 나란히 있으니 눌러도 되는 것처럼 보였다. 자물쇠와
-        칸 없는 바탕이 「읽는 값」이라고 먼저 말한다.
-      */
-      code[fixed] {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 8px;
-        border-radius: 6px;
-        background-color: var(--md-sys-color-surface-container-high, rgba(0, 0, 0, 0.05));
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-        font-family: var(--mono-font, monospace);
-        font-size: 0.76rem;
-      }
-
-      code[fixed] md-icon {
-        --md-icon-size: 13px;
-        opacity: 0.7;
-      }
-  `
-  ]
-
-  /** 도형의 DB 식별자. 비어 있으면 미저장 신규 모델이다. */
-  @property({ type: String }) figureId = ''
-
-  /**
-   * 발행 판 번호. 0 이면 한 번도 발행되지 않았고, 그때만 `type` 을 고칠 수 있다(ADR-0063 결정 4).
-   */
-  @property({ type: Number }) figureVersion = 0
-
-  /**
-   * 타입이 굳었나 — **한 번이라도 발행됐으면 굳는다**(ADR-0063 결정 4).
-   *
-   * 저장되지 않은 새 도형과 아직 발행 전인 초안에서는 고칠 수 있다. 전에는 「저장됐나」로
-   * 갈랐고, 그래서 저작자가 기계가 지은 이름(`FIGURE_MU6RJH47`)을 한 번도 못 고쳤다.
-   */
-  private get typeIsFixed(): boolean {
-    return !!this.figureId && (this.figureVersion ?? 0) > 0
-  }
-  /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`figure-rename` 으로 알린다). */
-  @property({ type: String }) figureName = ''
-  /** 분류 하나 — 팔레트에서 묶는 기준. */
-  @property({ type: String }) figureCategory?: string
-  /** 태그 여럿 — 분류로는 못 하는 찾기. */
-  @property({ type: Array }) figureTags?: string[]
-
-  /** 펴 둔 도움말. 부품을 바꿔도 유지된다 — 매번 다시 펴게 하지 않는다. */
-  @state() private opened = new Set<string>()
-
-  @property({ type: Object }) draft?: FigureDraft
-  /** 초안 위의 부품들. 씬 모델 그대로다. */
-  @property({ type: Array }) parts: PartModel[] = []
-
-  /**
-   * 이 고침이 이미 놓인 인스턴스에 무엇을 하나 — 발행된 도형에만 있다(ADR-0063 결정 3).
-   *
-   * 발행 문에서만 말하면 저작자는 열 군데를 고친 뒤에 듣는다. 고치는 칸 옆에서 말한다.
-   */
-  @property({ type: Array }) contract: ContractChange[] = []
-
-  /** 견주지 못한 까닭. 빈 목록과 뜻이 다르다 — 「깨지 않는다」가 아니라 「모른다」다. */
-  @property({ type: String }) contractFailure?: string
-  @property({ type: Number }) selected = -1
-
-  /** `part` 는 HTMLElement 의 속성(DOMTokenList)이다 — 가리면 형이 어긋난다. */
-  private get chosen(): PartModel | undefined {
-    return this.parts?.[this.selected]
-  }
-
-  render() {
-    const part = this.chosen
-    if (!part || !this.draft) {
-      return html`
-        ${this.renderFigure(false)}
-        <section>
-          <h3>${i18next.t('figure.label.properties')}</h3>
-          <p quiet>${i18next.t('figure.text.select-a-part-to-edit')}</p>
-        </section>
-      `
-    }
-
-    // 여기부터는 사용자 용어다 — X·Y·Z, 위치는 부품 중심, 회전은 도(degree).
-    const shown = partToFigure(part, this.draft)
-
-    /*
-      역할을 먼저 묻는다.
-
-      자리(slot)로 지정한 부품은 **그려지지 않는다.** 그 사실을 모른 채 재질부터 고르면 안 쓰일
-      색을 고르게 된다. 그리고 자리는 도형이 능력을 질 때만 뜻이 있으므로, 능력이 없으면 이
-      묶음은 아예 나오지 않는다 — 해 둬도 아무 일도 안 일어나는 칸을 보여 주지 않는다.
-    */
-    return html`
-      ${this.renderFigure(true)} ${this.renderIdentity(shown)} ${this.renderRole(shown)} ${this.renderJoint(shown)}
-      ${this.renderPlacement(shown)} ${this.renderShape(shown)} ${this.renderMaterial(shown)}
-      ${this.renderBehaviour(shown)}
-    `
-  }
-
-  /**
-   * ── 이 부품이 능력에서 맡는 자리 ────────────────────────────────────────────
-   *
-   * 「능력」 탭이 도형 전체가 무엇을 하는지 정하고, 어느 부품이 그것을 받쳐 주는지는 여기서
-   * 정한다. **부품을 고치는 곳이 한 군데여야** 하기 때문이다 — 목록을 따로 두면 같은 부품을
-   * 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.
-   *
-   * 칸 수는 `repeat` 가 있으면 받지 않는다. 반복하는 자리의 칸 수는 **인스턴스 크기**가 정한다 —
-   * 컨베이어가 길어지면 실을 자리가 늘어나는 것이 그것이고, 여기 적은 값은 안 쓰인다.
-   */
-  private renderRole(part: FigurePart) {
-    if (!this.draft?.capabilities?.length) return nothing
-
-    const roles = part.capability?.roles ?? []
-    const repeats = part.sizing === 'repeat' && !!part.repeat
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.role-in-capability')}${this.help('figure.text.anchors-are-not-drawn')}</h3>
-
-        <div role-choices>
-          ${(PART_ROLES as readonly PartRole[]).map(
-            one => html`
-              <label toggle>
-                <input
-                  type="checkbox"
-                  .checked=${live(roles.includes(one))}
-                  @change=${(e: Event) => this.toggleRole(one, (e.target as HTMLInputElement).checked)}
-                />
-                ${i18next.t('figure.label.role-' + one)}
-              </label>
-            `
-          )}
-        </div>
-        ${roles.length === 0 ? html`<p quiet>${i18next.t('figure.text.role-none-means-drawn')}</p>` : nothing}
-
-        ${roles.includes('slot')
-          ? html`
-              <div field>
-                <label>${i18next.t('figure.label.accepts')}${this.help('figure.text.accepts-explained')}</label>
-                <input
-                  .value=${(part.capability?.accepts ?? []).join(', ')}
-                  placeholder=${i18next.t('figure.text.accepts-anything')}
-                  @change=${(e: Event) => this.setAccepts((e.target as HTMLInputElement).value)}
-                />
-              </div>
-              <div field>
-                <label>${i18next.t('figure.label.slot-capacity')}</label>
-                ${repeats
-                  ? html`<p quiet>${i18next.t('figure.text.capacity-from-repeat')}</p>`
-                  : this.number('', part.capability?.capacity ?? 1, value => this.setCapacity(value), 1)}
-              </div>
-            `
-          : nothing}
-      </section>
-    `
-  }
-
-  /**
-   * How this part hangs from another and moves relative to it (ADR-0066).
-   *
-   * The parent is written on the part. The joint says how the part moves relative to that parent, and the
-   * parameter it comes with is what drives it; the preview shows that parameter as a slider.
-   */
-  private renderJoint(part: FigurePart) {
-    const joint = jointOf(this.draft, part.name)
-    const choices = parentChoices(this.parts, part.name)
-    const unit = joint?.type === 'prismatic' ? 'mm' : 'deg'
-    const axisKey = joint ? axisKeyOf(joint.axis) : undefined
-    const driver = joint
-      ? this.draft?.parameters?.find(one => one.clip?.channels?.some(channel => channel.target === joint.name))
-      : undefined
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.joint')}${this.help('figure.text.joint-explained')}</h3>
-
-        <div inline-field>
-          <label>${i18next.t('figure.label.joint-parent')}</label>
-          <select @change=${(e: Event) => this.setParent((e.target as HTMLSelectElement).value)}>
-            <option value="" ?selected=${part.parent === undefined}>${i18next.t('figure.label.joint-parent-none')}</option>
-            ${part.parent !== undefined && !choices.includes(part.parent)
-              ? html`<option value=${part.parent} selected>${part.parent}</option>`
-              : nothing}
-            ${choices.map(name => html`<option value=${name} ?selected=${name === part.parent}>${name}</option>`)}
-          </select>
-        </div>
-
-        <div inline-field>
-          <label>${i18next.t('figure.label.joint-type')}</label>
-          <select @change=${(e: Event) => this.setJointType(part, (e.target as HTMLSelectElement).value)}>
-            <option value="" ?selected=${!joint}>${i18next.t('figure.label.joint-type-none')}</option>
-            ${(JOINT_TYPES as readonly JointType[]).map(
-              type => html`<option value=${type} ?selected=${joint?.type === type}>${i18next.t('figure.label.joint-type-' + type)}</option>`
-            )}
-          </select>
-        </div>
-
-        ${joint
-          ? html`
-              <div inline-field>
-                <label>${i18next.t('figure.label.joint-axis')}</label>
-                <select @change=${(e: Event) => this.setJointAxis(joint.name, (e.target as HTMLSelectElement).value)}>
-                  ${axisKey === undefined
-                    ? html`<option value="" selected>${joint.axis.x}, ${joint.axis.y}, ${joint.axis.z}</option>`
-                    : nothing}
-                  ${JOINT_AXES.map(one => html`<option value=${one.key} ?selected=${one.key === axisKey}>${one.key.toUpperCase()}</option>`)}
-                </select>
-              </div>
-
-              <div vector-row>
-                <label>${i18next.t('figure.label.joint-origin')}</label>
-                <div triple>
-                  ${(['x', 'y', 'z'] as const).map(axis =>
-                    this.number(axis.toUpperCase(), joint.origin[axis], value =>
-                      this.tellDraft(patchJoint(this.draft!, joint.name, { origin: { ...joint.origin, [axis]: value } }))
-                    )
-                  )}
-                </div>
-              </div>
-
-              ${joint.limits
-                ? html`
-                    <div vector-row>
-                      <label>${i18next.t('figure.label.joint-limits-' + unit)}</label>
-                      <div double>
-                        ${this.number(i18next.t('figure.label.joint-limit-min'), joint.limits.min, value =>
-                          this.tellDraft(patchJoint(this.draft!, joint.name, { limits: { ...joint.limits!, min: value } }))
-                        )}
-                        ${this.number(i18next.t('figure.label.joint-limit-max'), joint.limits.max, value =>
-                          this.tellDraft(patchJoint(this.draft!, joint.name, { limits: { ...joint.limits!, max: value } }))
-                        )}
-                      </div>
-                    </div>
-                    ${joint.limits.min > 0 || joint.limits.max < 0
-                      ? html`<p warn>${i18next.t('figure.text.joint-limits-must-include-zero')}</p>`
-                      : nothing}
-                  `
-                : nothing}
-
-              <p quiet>
-                ${driver
-                  ? i18next.t('figure.text.joint-driven-by', { name: driver.label ?? driver.name })
-                  : i18next.t('figure.text.joint-not-driven')}
-              </p>
-            `
-          : nothing}
-      </section>
-    `
-  }
-
-  private setParent(name: string) {
-    this.change(part => {
-      const { parent: _dropped, ...rest } = part
-      return name === '' ? (rest as FigurePart) : { ...rest, parent: name }
-    })
-  }
-
-  /**
-   * 기준 상자를 고친다 — 부품은 저장되는 자리에 그대로 둔 채(`base-box.ts`).
-   *
-   * 초안과 부품이 함께 바뀌므로 둘을 한 번에 올린다. 따로 올리면 되돌리기가 둘로 갈리고, 그 사이
-   * 한 번만 되돌린 화면은 부품이 반쯤 밀린 모습이 된다.
-   */
-  /**
-   * 기준 상자를 고친 것이 **이미 놓인 인스턴스에 무엇을 하나** — 고친 칸 바로 아래에서 말한다.
-   *
-   * 막는 것과 알리는 것을 가른다. 비율이 달라지면 놓인 것이 찌그러지므로 발행이 막히고, 크기만
-   * 달라지는 것은 실척이 어긋날 뿐이라 알리기만 한다. 까닭은 형식이 적은 것을 그대로 옮긴다 —
-   * 여기서 다시 쓰면 두 벌이 되고 곧 갈린다.
-   */
-  private renderBaseContract() {
-    if (this.contractFailure) {
-      return html`<p contract>
-        <md-icon>help</md-icon>
-        <span>${i18next.t('figure.text.contract-not-compared', { why: this.contractFailure })}</span>
-      </p>`
-    }
-
-    const mine = this.contract.filter(one => one.code === 'base-ratio-changed' || one.code === 'base-size-changed')
-    if (mine.length === 0) return nothing
-
-    return html`${mine.map(
-      one => html`<p contract ?blocking=${one.blocking}>
-        <md-icon>${one.blocking ? 'block' : 'info'}</md-icon>
-        <span><b>${one.message}</b> ${one.why}</span>
-      </p>`
-    )}`
-  }
-
-  private resizeBase(patch: Partial<BaseSize>) {
-    if (!this.draft) return
-
-    const next = resizeBase(this.draft, this.parts, { ...baseOf(this.draft), ...patch })
-    if (next.draft === this.draft) return
-
-    this.dispatchEvent(
-      new CustomEvent('resize-base', {
-        detail: { draft: next.draft, parts: next.parts },
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  /** 부품 전부를 감싸는 가장 작은 상자로. 맞출 것이 없으면 아무 일도 안 한다. */
-  private fitBaseToParts() {
-    if (!this.draft) return
-    const fitted = baseFittingParts(this.draft, this.parts)
-    if (fitted) this.resizeBase(fitted)
-  }
-
-  private setJointType(part: FigurePart, value: string) {
-    if (!this.draft) return
-
-    /* 붙은 부품을 함께 준다 — 새 관절이 둘이 맞닿는 자리에 서려면 그쪽 치수를 알아야 한다. */
-    const parent = part.parent ? this.parts.find(one => one.name === part.parent) : undefined
-    this.tellDraft(
-      setJointType(
-        this.draft,
-        part,
-        value === '' ? undefined : (value as JointType),
-        parent ? partToFigure(parent, this.draft) : undefined
-      )
-    )
-  }
-
-  private setJointAxis(name: string, key: string) {
-    const choice = JOINT_AXES.find(one => one.key === key)
-    if (!choice || !this.draft) return
-    this.tellDraft(patchJoint(this.draft, name, { axis: { ...choice.axis } }))
-  }
-
-  private tellDraft(draft: FigureDraft) {
-    this.dispatchEvent(new CustomEvent('update-draft', { detail: { draft }, bubbles: true, composed: true }))
-  }
-
-  /**
-   * 역할 하나를 켜고 끈다.
-   *
-   * **여럿을 함께 맡을 수 있다.** AGV 의 상판은 물건을 놓는 자리이면서 그 자리로 물건이
-   * 들어오고 나간다. 그래서 하나를 고르는 선택 상자가 아니라 확인 상자다.
-   *
-   * 마지막 역할을 끄면 `capability` 를 통째로 지운다. 빈 배열을 남기면 형식이 오류로 보고,
-   * 저작자가 보기에는 아무 역할도 없는 평범한 부품인데 발행이 막힌다.
-   */
-  private toggleRole(role: PartRole, on: boolean) {
-    this.change(part => {
-      const roles = (part.capability?.roles ?? []).filter(one => one !== role)
-      if (on) roles.push(role)
-
-      if (roles.length === 0) {
-        const { capability, ...rest } = part
-        return rest as FigurePart
-      }
-
-      // 형식이 적은 순서를 지킨다 — 켠 순서대로 두면 같은 뜻이 다른 값으로 저장된다.
-      const ordered = (PART_ROLES as readonly PartRole[]).filter(one => roles.includes(one))
-      return { ...part, capability: { ...part.capability, roles: ordered } }
-    })
-  }
-
-  private setAccepts(raw: string) {
-    const accepts = raw
-      .split(',')
-      .map(one => one.trim())
-      .filter(one => one.length > 0)
-
-    this.change(part => {
-      const spec = { ...part.capability, roles: part.capability?.roles ?? ['slot' as PartRole] }
-      // 빈 목록은 제한하지 않는다는 뜻이다. 빈 배열을 저장하면 아무것도 못 받는 것으로 읽힌다.
-      if (accepts.length > 0) spec.accepts = accepts
-      else delete spec.accepts
-      return { ...part, capability: spec as NonNullable<FigurePart['capability']> }
-    })
-  }
-
-  private setCapacity(value: number) {
-    this.change(part => {
-      const spec = { ...part.capability, roles: part.capability?.roles ?? ['slot' as PartRole] }
-      if (Number.isFinite(value) && value >= 1) spec.capacity = Math.floor(value)
-      else delete spec.capacity
-      return { ...part, capability: spec as NonNullable<FigurePart['capability']> }
-    })
-  }
-
-  /**
-   * 도형 자체 — 이름과 타입.
-   *
-   * ## 왜 머리줄이 아니라 여기인가
-   *
-   * 저작면 위에 줄을 하나 더 두고 이름 칸을 놓았었다. 앱에서는 셸이 페이지 제목으로 그 이름을
-   * 이미 그리므로 같은 글자가 두 번 나오고, 캔버스가 주인공인 화면에서 그 줄만큼 높이를 잃었다.
-   * 속성 패널은 「이 도형이 무엇인가」를 다루는 자리이므로 이름도 여기 산다.
-   *
-   * ## 타입은 읽기만 한다
-   *
-   * 저장되는 식별자다. 배치된 도면이 이 이름으로 타입을 찾으므로 만든 뒤에는 못 바꾼다.
-   */
-  private renderFigure(compact = false) {
-    const fields = html`
-        <div inline-field>
-          <label>${i18next.t('figure.label.name')}</label>
-          <input
-            .value=${this.figureName}
-            placeholder=${i18next.t('figure.text.figure-display-name')}
-            @change=${(e: Event) =>
-              this.dispatchEvent(
-                new CustomEvent('figure-rename', {
-                  detail: { name: (e.target as HTMLInputElement).value },
-                  bubbles: true,
-                  composed: true
-                })
-              )}
-          />
-        </div>
-        <div inline-field>
-          <label>${i18next.t('figure.label.figure-type')}${this.typeIsFixed ? this.helpButton('figure.text.type-name-cannot-change') : nothing}</label>
-          ${!this.typeIsFixed
-            ? html`<input
-                .value=${this.draft?.figureType ?? ''}
-                placeholder=${i18next.t('figure.text.figure-type-placeholder')}
-                @change=${(e: Event) =>
-                  this.dispatchEvent(
-                    new CustomEvent('figure-type-change', {
-                      detail: { type: (e.target as HTMLInputElement).value.trim().toUpperCase() },
-                      bubbles: true,
-                      composed: true
-                    })
-                  )}
-              />`
-            : html`<code fixed title=${i18next.t('figure.text.type-name-cannot-change')}>
-                <md-icon>lock</md-icon>${this.draft?.figureType ?? ''}
-              </code>
-              ${this.helpHint('figure.text.type-name-cannot-change')}`}
-        </div>
-        <!--
-          왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
-          알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
-        -->
-
-        <div inline-field>
-          <label>${i18next.t('figure.label.figure-placement')}${this.helpButton('figure.text.placement-explained')}</label>
-          <select
-            .value=${this.draft?.placement ?? 'floor'}
-            @change=${(e: Event) => this.setPlacement((e.target as HTMLSelectElement).value as FigurePlacement)}
-          >
-            <option value="floor" ?selected=${(this.draft?.placement ?? 'floor') === 'floor'}>
-              ${i18next.t('figure.label.placement-floor')}
-            </option>
-            <option value="ceiling" ?selected=${this.draft?.placement === 'ceiling'}>
-              ${i18next.t('figure.label.placement-ceiling')}
-            </option>
-            <option value="center" ?selected=${this.draft?.placement === 'center'}>
-              ${i18next.t('figure.label.placement-center')}
-            </option>
-          </select>
-          ${this.helpHint('figure.text.placement-explained')}
-        </div>
-
-        <!--
-          기준 상자 — **고치는 길이 화면에 있어야 한다.** 부품이 이 상자를 넘으면 발행이 막히고,
-          고치는 방법은 상자 숫자를 키우는 것이다(ADR-0044 ④). 그 칸이 없어서 저작자는 넘쳤다는
-          말만 듣고 고칠 자리를 못 찾았다.
-        -->
-        <div field>
-          <label>${i18next.t('figure.label.base-box')}${this.helpButton('figure.text.base-box-explained')}</label>
-          <div triple>
-            ${this.number('X', this.draft?.width ?? 0, value => this.resizeBase({ width: value }), 1)}
-            ${this.number('Y', this.draft?.depth ?? 0, value => this.resizeBase({ depth: value }), 1)}
-            ${this.number('Z', this.draft?.height ?? 0, value => this.resizeBase({ height: value }), 1)}
-          </div>
-          ${this.parts.length > 0
-            ? html`<button fit @click=${() => this.fitBaseToParts()} title=${i18next.t('figure.text.fit-base-explained')}>
-                <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
-              </button>`
-            : nothing}
-          ${this.renderBaseContract()}
-          ${this.helpHint('figure.text.base-box-explained')}
-        </div>
-
-        <div inline-field>
-          <label>${i18next.t('figure.label.category')}${this.helpButton('figure.text.category-explained')}</label>
-          <input
-            .value=${this.figureCategory ?? ''}
-            placeholder=${i18next.t('figure.text.category-placeholder')}
-            @change=${(e: Event) => this.tellCatalog({ category: (e.target as HTMLInputElement).value.trim() || undefined })}
-          />
-          ${this.helpHint('figure.text.category-explained')}
-        </div>
-
-        <div inline-field>
-          <label>${i18next.t('figure.label.tags')}${this.helpButton('figure.text.tags-explained')}</label>
-          <input
-            .value=${(this.figureTags ?? []).join(', ')}
-            placeholder=${i18next.t('figure.text.tags-placeholder')}
-            @change=${(e: Event) => this.tellTags((e.target as HTMLInputElement).value)}
-          />
-          ${this.helpHint('figure.text.tags-explained')}
-        </div>
-    `
-
-    if (compact) {
-      return html`
-        <section>
-          <details asset>
-            <summary>
-              <b>${i18next.t('figure.label.figure')}</b>
-              <small>${this.figureName || this.draft?.figureType || ''}</small>
-            </summary>
-            ${fields}
-          </details>
-        </section>
-      `
-    }
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.figure')}</h3>
-        ${fields}
-      </section>
-    `
-  }
-
-  /**
-   * 태그 줄을 목록으로.
-   *
-   * 쉼표로 가르고 `#` 은 떼어 낸다 — 사람은 `#반출` 이라고 적고, 저장되는 것은 `반출` 이다.
-   * 겹친 것은 한 번만 남긴다. 빈 줄은 **빈 배열**이지 `undefined` 가 아니다 — 전부 지우려는
-   * 저작자가 지울 방법을 잃지 않게.
-   */
-  private tellTags(raw: string) {
-    const tags = [
-      ...new Set(
-        raw
-          .split(',')
-          .map(one => one.trim().replace(/^#+/, '').trim())
-          .filter(one => one.length > 0)
-      )
-    ]
-
-    this.tellCatalog({ tags })
-  }
-
-  /** 카탈로그 값이 바뀌었다고 알린다. 정본은 저작면이 든다 — 여기서는 알리기만 한다. */
-  private tellCatalog(patch: { category?: string; tags?: string[] }) {
-    this.dispatchEvent(new CustomEvent('figure-catalog', { detail: patch, bubbles: true, composed: true }))
-  }
-
-  /**
-   * 3D 배치 기준면을 바꾼다 ('floor' | 'ceiling' | 'center').
-   *
-   * **부품은 건드리지 않는다.** 이 값은 「이 종류는 어느 면에 붙는가」를 말할 뿐이고,
-   * 저작한 모양은 그것과 무관하다. 형식이 부품을 상자 중심에서 재므로, 배치가 달라도
-   * `parts` 는 한 글자도 안 바뀐다.
-   *
-   * 한동안 여기서 `zPos` 를 다시 계산했다. 편집 캔버스가 이 값을 씬의 좌표 모드로
-   * 흘려보내던 때의 일인데, 그러면 배치를 고를 때마다 저작자가 적어 둔 높이가 전부
-   * 다른 숫자로 보였다 — 저장되는 것은 그대로인데. 좌표 모드는 이제 보기 설정이고
-   * (`figure-view.ts`), 편집 캔버스는 늘 상자 기준이다.
-   */
-  private setPlacement(placement: FigurePlacement) {
-    if (!this.draft) return
-    const draft = { ...this.draft, placement }
-    this.dispatchEvent(new CustomEvent('update-draft', { detail: { draft }, bubbles: true, composed: true }))
-  }
-
-  private renderIdentity(part: FigurePart) {
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.part')}</h3>
-        <div inline-field>
-          <label>${i18next.t('figure.label.name')}${this.helpButton('figure.text.renaming-a-part-breaks-bindings')}</label>
-          <input
-            .value=${part.name}
-            @change=${(e: Event) => this.put({ name: (e.target as HTMLInputElement).value })}
-          />
-          ${this.helpHint('figure.text.renaming-a-part-breaks-bindings')}
-        </div>
-        <div inline-field>
-          <label>${i18next.t('figure.label.shape')}</label>
-          <select @change=${(e: Event) => this.changePrimitive((e.target as HTMLSelectElement).value as PrimitiveKind)}>
-            ${PRIMITIVE_KINDS.map(
-              kind => html`
-                <option value=${kind} ?selected=${kind === part.primitive}>
-                  ${i18next.t('figure.label.primitive-' + kind)}
-                </option>
-              `
-            )}
-          </select>
-        </div>
-      </section>
-    `
-  }
-
-  private renderPlacement(part: FigurePart) {
-    const t = part.transform
-    const rotation = t.rotation ?? {}
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.placement')}</h3>
-
-        <div vector-row>
-          <label>${i18next.t('figure.label.part-position')}</label>
-          <div triple>
-            ${(['x', 'y', 'z'] as const).map(axis =>
-              this.number(axis.toUpperCase(), t.position[axis], value =>
-                this.putTransform({ position: { ...t.position, [axis]: value } })
-              )
-            )}
-          </div>
-        </div>
-
-        <div vector-row>
-          <label>${i18next.t('figure.label.part-size')}</label>
-          <div triple>
-            ${(['x', 'y', 'z'] as const).map(axis =>
-              this.number(
-                axis.toUpperCase(),
-                t.size[axis],
-                value => this.putTransform({ size: { ...t.size, [axis]: value } }),
-                1
-              )
-            )}
-          </div>
-        </div>
-
-        <div vector-row>
-          <label>${i18next.t('figure.label.rotation-degrees')}</label>
-          <div triple>
-            ${(['x', 'y', 'z'] as const).map(axis =>
-              this.number(axis.toUpperCase(), rotation[axis] ?? 0, value =>
-                this.putTransform({ rotation: { ...rotation, [axis]: value } })
-              )
-            )}
-          </div>
-        </div>
-
-        <div vector-row>
-          <label>${i18next.t('figure.label.tools')}${this.helpButton('figure.text.tools-explained')}</label>
-          <div tools>
-            <button
-              aria-label=${i18next.t('figure.button.center-x')}
-              title=${i18next.t('figure.text.center-on-x')}
-              @click=${() => this.ask('center', 'x')}
-            >
-              <md-icon>horizontal_distribute</md-icon>
-            </button>
-            <button
-              aria-label=${i18next.t('figure.button.center-z')}
-              title=${i18next.t('figure.text.center-on-z')}
-              @click=${() => this.ask('center', 'z')}
-            >
-              <md-icon>vertical_align_center</md-icon>
-            </button>
-            <button
-              aria-label=${i18next.t('figure.button.to-floor')}
-              title=${i18next.t('figure.text.put-on-floor')}
-              @click=${() => this.ask('floor', 'y')}
-            >
-              <md-icon>vertical_align_bottom</md-icon>
-            </button>
-            ${(['x', 'z'] as const).map(axis => {
-              // 이미 가운데면 대칭이 제자리다 — 겹친 부품이 조용히 생기지 않게 막는다
-              const able = this.draft ? canMirror(this.draft, this.parts, this.selected, axis) : false
-              return html`
-                <button
-                  ?disabled=${!able}
-                  aria-label=${i18next.t('figure.button.mirror-' + axis)}
-                  title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
-                  @click=${() => this.ask('mirror', axis)}
-                >
-                  <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
-                </button>
-              `
-            })}
-            <button
-              aria-label=${i18next.t('figure.button.snap')}
-              title=${i18next.t('figure.text.snap-explained')}
-              @click=${() => this.ask('snap', 'x')}
-            >
-              <md-icon>grid_on</md-icon>
-            </button>
-          </div>
-          ${this.helpHint('figure.text.tools-explained')}
-        </div>
-      </section>
-    `
-  }
-
-  /** 분할 수와 모서리 굴림 — 해당하는 도형에만 낸다. */
-  private renderShape(part: FigurePart) {
-    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('figure.label.shape-detail')}</h3>
-        ${segmented ? this.renderSegments(part) : nothing}
-        ${segmented ? this.renderKeepRound(part) : nothing}
-        ${extruded ? this.renderExtruded(part) : nothing}
-      </section>
-    `
-  }
-
-  /**
-   * 민 단면 — 모서리와 **속을 파는 두께.**
-   *
-   * 벽 두께를 0 으로 두면 통짜다. 0 보다 크면 그만큼 안으로 들어온 테가 생기고, 그것이
-   * 트레이 · 토트 · 통 · 케이스가 되는 자리다. 바닥은 비워 두면 벽과 같고, 0 으로 두면
-   * 위아래가 다 뚫린 테두리가 된다.
-   */
-  private renderExtruded(part: FigurePart) {
-    const hollow = part.shape?.hollow
-    const wall = hollow?.wall ?? 0
-
-    const reshape = (over: Record<string, unknown>) =>
-      this.put({ shape: { ...(part.shape ?? {}), ...over } })
-
-    return html`
-      <div inline-field>
-        <label>${i18next.t('figure.label.corner-round')}</label>
-        ${this.number('', part.shape?.round ?? 0, value => reshape({ round: value }))}
-      </div>
-      <div inline-field>
-        <label>${i18next.t('figure.label.hollow-wall')}</label>
-        ${this.number('', wall, value =>
-          reshape({ hollow: value > 0 ? { ...(hollow ?? {}), wall: value } : undefined })
-        )}
-      </div>
-      ${wall > 0
-        ? html`
-            <div inline-field>
-              <label>${i18next.t('figure.label.hollow-floor')}</label>
-              ${this.number('', hollow?.floor ?? wall, value => reshape({ hollow: { ...hollow, wall, floor: value } }))}
-            </div>
-          `
-        : nothing}
-    `
-  }
-
-  /**
-   * 분할 수 — 모양과 무게를 함께 고른다.
-   *
-   * 삼각형 수는 화면이 셈하지 않는다. `trianglesOf` 에 그 분할 수를 가진 부품을 주고
-   * 물어본다 — 화면이 제 나름의 공식을 들면 figure-model 이 규칙을 바꿔도 화면만
-   * 옛 답을 계속 낸다.
-   */
-  /**
-   * 원통을 원통으로 둘까 — **고르는 값이고, 값을 치른다.**
-   *
-   * 인스턴스가 축마다 다른 배율을 받으면 원기둥이 타원 기둥이 된다. 지키려면 제 변환이
-   * 있어야 하고, 합친 형상은 변환을 하나만 받으므로 지키는 곡면 부품 하나가 draw call
-   * 하나다. 저작자가 그 대가를 모르고 고르면 안 되므로 그 자리에 적는다.
-   */
-  private renderKeepRound(part: FigurePart) {
-    const on = part.keepRound !== false
-
-    return html`
-      <div field>
-        <label>${i18next.t('figure.label.keep-round')}</label>
-        <div choices>
-          <button choice ?on=${on} @click=${() => this.put({ keepRound: undefined })}>
-            <b>${i18next.t('figure.text.keep-round-on')}</b>
-            <small>${i18next.t('figure.text.keep-round-cost')}</small>
-          </button>
-          <button choice ?on=${!on} @click=${() => this.put({ keepRound: false })}>
-            <b>${i18next.t('figure.text.keep-round-off')}</b>
-            <small>${i18next.t('figure.text.keep-round-merged')}</small>
-          </button>
-        </div>
-      </div>
-    `
-  }
-
-  private renderSegments(part: FigurePart) {
-    const current = part.segments ?? SEGMENT_PRESETS[1]
-    const common = SEGMENT_PRESETS.slice(0, 4)
-    const advanced = SEGMENT_PRESETS.slice(4)
-
-    return html`
-      <div field>
-        <label>${i18next.t('figure.label.segments')}</label>
-        <div segments>
-          ${common.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('figure.text.n-triangles', { count: triangles })}</small>
-              </button>
-            `
-          })}
-        </div>
-
-        <details free ?open=${advanced.includes(current)}>
-          <summary>${i18next.t('figure.text.more-segment-options')}</summary>
-          <div presets>
-            ${advanced.map(preset => html`
-              <button ?on=${current === preset} @click=${() => this.put({ segments: preset })}>${preset}</button>
-            `)}
-          </div>
-        </details>
-      </div>
-    `
-  }
-
-  /**
-   * 분할 수의 실루엣.
-   *
-   * 곡면 프리미티브를 위에서 본 윤곽이 정확히 정n각형이다 — 원기둥의 단면도, 구의
-   * 적도도. 그림을 지어내는 것이 아니라 실제로 만들어지는 모양이다.
-   */
-  private silhouette(segments: number) {
-    const points: string[] = []
-    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>
-    `
-  }
-
-  /** 견본 한 줄. 무리마다 부른다. */
-  private palettePurpose(token?: string) {
-    const purposes: Record<string, string> = {
-      'palette.primary': 'primary',
-      'palette.accent': 'accent',
-      'palette.neutral': 'neutral',
-      'palette.dark': 'dark',
-      'palette.light': 'light',
-      'palette.surface': 'surface',
-      'palette.status-danger': 'danger',
-      'palette.status-warning': 'warning',
-      'palette.status-info': 'info',
-      'palette.status-success': 'success'
-    }
-
-    return i18next.t(`figure.label.palette-purpose-${purposes[token ?? ''] ?? 'registered'}`)
-  }
-
-  private swatches(entries: [string, string][], chosen?: string) {
-    return entries.map(
-      ([token, color]) => {
-        const purpose = this.palettePurpose(token)
-        return html`
-        <button
-          swatch
-          ?on=${token === chosen}
-          aria-label=${purpose}
-          title=${purpose}
-          style="--swatch:${color}"
-          @click=${() => this.putMaterial({ token })}
-        ></button>
-      `
-      }
-    )
-  }
-
-  private renderMaterial(part: FigurePart) {
-    const material = part.material ?? {}
-    const palette = activePalette() as Record<string, string>
-
-    /*
-      두 무리로 나눠 보인다 — **칠한 색**과 **켜진 색**.
-
-      `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('figure.label.part-material')}</h3>
-
-        <div field>
-          <label>${i18next.t('figure.label.palette-role')}</label>
-          <div swatches>
-            ${this.swatches(painted, material.token)}
-          </div>
-          ${lit.length
-            ? html`
-                <label group>${i18next.t('figure.label.status-colors')}</label>
-                <div swatches>
-                  ${this.swatches(lit, material.token)}
-                </div>
-              `
-            : ''}
-          <div palette-meaning>
-            <b>${material.token ? this.palettePurpose(material.token) : i18next.t('figure.label.no-color-chosen')}</b>
-            <small>${i18next.t('figure.text.palette-purpose-explained')}</small>
-          </div>
-        </div>
-
-        <div field>
-          <label>${i18next.t('figure.label.preset')}</label>
-          <select
-            @change=${(e: Event) => {
-              const value = (e.target as HTMLSelectElement).value
-              this.putMaterial({ preset: (value || undefined) as MaterialPreset | undefined })
-            }}
-          >
-            <option value="" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>
-            ${MATERIAL_PRESETS.map(
-              preset => html`
-                <option value=${preset} ?selected=${preset === material.preset}>
-                  ${i18next.t('figure.label.preset-' + preset)}
-                </option>
-              `
-            )}
-          </select>
-        </div>
-
-        <!-- 값이 없으면 각지게 그린다 — 형식이 그렇게 못 박았다. 체크상자도 그대로 보인다 -->
-        <label toggle>
-          <input
-            type="checkbox"
-            .checked=${material.flatShading ?? true}
-            @change=${(e: Event) => this.putMaterial({ flatShading: (e.target as HTMLInputElement).checked })}
-          />
-          ${i18next.t('figure.label.flat-shading')}
-        </label>
-        <label toggle>
-          <input
-            type="checkbox"
-            .checked=${!!material.transparent}
-            @change=${(e: Event) => this.putMaterial({ transparent: (e.target as HTMLInputElement).checked })}
-          />
-          ${i18next.t('figure.label.transparent')}
-        </label>
-
-        <div field>
-          <label>${i18next.t('figure.label.emissive')}${this.help('figure.text.emissive-explained')}</label>
-
-          <div slider>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              .value=${String(glow?.intensity ?? 0)}
-              @input=${(e: Event) => this.putEmissive(Number((e.target as HTMLInputElement).value))}
-            />
-            <output>${(glow?.intensity ?? 0).toFixed(2)}</output>
-          </div>
-        </div>
-
-        ${glow
-          ? html`
-              <div field>
-                <label>${i18next.t('figure.label.emissive-color')}</label>
-                <div swatches>
-                  <button
-                    swatch
-                    same
-                    ?on=${!glow.token}
-                    title=${i18next.t('figure.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('figure.label.same-as-off')}</span>
-              </div>
-
-              <label toggle>
-                <input
-                  type="checkbox"
-                  .checked=${!!glow.on}
-                  @change=${(e: Event) =>
-                    this.putMaterial({ emissive: { ...glow, on: (e.target as HTMLInputElement).checked } })}
-                />
-                ${i18next.t('figure.label.on-by-default')}
-              </label>
-              ${this.help('figure.text.on-by-default-explained')}
-            `
-          : ''}
-
-      </section>
-    `
-  }
-
-  /**
-   * 인스턴스 크기가 바뀔 때 이 부품이 어떻게 변하나.
-   *
-   * ## 늘어나는 축은 아직 못 보여 준다
-   *
-   * `stretch` 는 형식에 축을 적는 자리가 없어서 그리는 쪽이 **가장 길게 뻗은 축**으로
-   * 정한다. 그 답을 화면에 적어 주려면 규칙을 가진 쪽에 물어야 하는데, 그 함수
-   * (`stretchAxisOf` · `stretchAxis`)가 아직 배포된 판에 없다.
-   *
-   * 화면이 제 나름대로 계산하지 않는다. 규칙이 두 벌이 되면 보이는 축과 실제로 늘어나는
-   * 축이 갈리고, 그 어긋남은 화면을 믿게 만든 다음에 드러난다. 배포되면 잇는다.
-   *
-   * ## 값이 있는 것을 밝힌다
-   *
-   * `scale` 이 아닌 부품은 합쳐 그릴 수 없어 draw call 을 하나 더 쓴다. 그 비용이
-   * 성숙도의 묶음 수에 그대로 잡힌다. 고르는 자리에서 미리 말해 준다.
-   */
-  private renderBehaviour(part: FigurePart) {
-    const sizing = part.sizing ?? 'scale'
-    const repeat = part.repeat ?? { axis: 'x' as Axis, pitch: 0 }
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.sizing-rule')}${this.help('figure.text.sizing-' + sizing + '-explained')}</h3>
-        <div sizing-choices>
-          ${SIZING_RULES.map(
-            rule => html`
-              <button sizing-choice ?on=${rule === sizing} @click=${() => this.put({ sizing: rule })}>
-                <b>${i18next.t('figure.label.sizing-' + rule)}</b>
-                <small>${i18next.t('figure.text.sizing-' + rule + '-explained')}</small>
-              </button>
-            `
-          )}
-        </div>
-        ${sizing === 'scale'
-          ? nothing
-          : html`<p cost>${i18next.t('figure.text.sizing-costs-one-draw-call')}</p>`}
-
-        ${this.renderAnchors(part)}
-
-        ${sizing === 'repeat'
-          ? html`
-              <div inline-field>
-                <label>${i18next.t('figure.label.repeat-axis')}</label>
-                <select
-                  @change=${(e: Event) =>
-                    this.put({ repeat: { ...repeat, axis: (e.target as HTMLSelectElement).value as Axis } })}
-                >
-                  ${(['x', 'y', 'z'] as const).map(
-                    axis => html`<option value=${axis} ?selected=${axis === repeat.axis}>${axis}</option>`
-                  )}
-                </select>
-              </div>
-              <div inline-field>
-                <label>${i18next.t('figure.label.repeat-pitch')}${this.helpButton('figure.text.repeat-pitch-explained')}</label>
-                ${this.number('', repeat.pitch, value => this.put({ repeat: { ...repeat, pitch: value } }), 1)}
-                ${this.helpHint('figure.text.repeat-pitch-explained')}
-              </div>
-              ${this.renderRepeatCount(part)}
-            `
-          : nothing}
-      </section>
-    `
-  }
-
-  /**
-   * ── 몇 개가 되나 ──────────────────────────────────────────────────────────
-   *
-   * 저작 화면은 축과 피치만 받고 있었다. 형식이 가진 반복 설정이 그 둘뿐이므로 편집할 것은
-   * 다 있었는데, **결과인 개수를 어디에도 표시하지 않았다.** 피치 300 을 적은 저작자가 몇 개가
-   * 되는지 알려면 미리보기를 세어야 했다.
-   *
-   * 개수는 그리는 쪽이 쓰는 `repeatPlan` 을 그대로 불러 얻는다. 여기서 다시 계산하면 화면이
-   * 말하는 개수와 실제로 그려지는 개수가 달라진다.
-   *
-   * ## 두 가지 반복이 있다
-   *
-   * 컨베이어의 롤러는 길어지면 **개수가 늘고** 한 칸 간격은 그대로다. 셀트레이의 셀은 커지면
-   * **셀이 커지고** 개수는 그대로다 — 몇 셀짜리 트레이냐는 화면 크기와 무관하다. 그 갈림을
-   * 이 축의 anchor 가 정하는데 화면에는 그 말이 없었다. 그래서 어느 쪽인지 함께 적는다.
-   */
-  private renderRepeatCount(part: FigurePart) {
-    const draft = this.draft
-    if (!draft) return nothing
-
-    const base = { x: draft.width, y: draft.depth, z: draft.height }
-    const plan = repeatPlanOfPart(part, { x: 1, y: 1, z: 1 }, base)
-    if (!plan) return nothing
-
-    const grows = anchorOfPart(part, base, plan.axis) !== 'scale'
-
-    return html`
-      <div field>
-        <label>${i18next.t('figure.label.repeat-count')}</label>
-        <p quiet>
-          ${i18next.t('figure.text.repeat-count-now', { count: plan.count })}
-          ${plan.count >= REPEAT_LIMIT
-            ? html`<br />${i18next.t('figure.text.repeat-count-capped', { limit: REPEAT_LIMIT })}`
-            : ''}
-          <br />${i18next.t(grows ? 'figure.text.repeat-grows-with-instance' : 'figure.text.repeat-keeps-count')}
-        </p>
-      </div>
-    `
-  }
-
-  /**
-   * ── 어느 면을 붙잡나 ──────────────────────────────────────────────────────
-   *
-   * **이 자리가 없었다.** 형식은 축마다 `anchor` 를 지고 다니고(`figure-source.ts` 가 왕복시킨다),
-   * 발행 게이트는 「valve-wheel 의 anchor.z 를 max 로 두라」고 사유까지 말하는데, 저작면에는 그
-   * 값을 바꿀 자리가 없었다 — 고치라는 말만 있고 고칠 문이 없었다.
-   *
-   * ## 「자동」이 기본이다
-   *
-   * 형식에서 `anchor` 는 적지 않아도 된다. 안 적으면 **가까운 면**을 붙잡고, 표본 열넷 중 어느
-   * 것도 이 값을 적지 않고 제대로 선다. 그래서 축마다 첫 항목이 「자동」이고, 지금 자동이 무엇으로
-   * 읽히는지를 **함께 보여 준다** — 그것을 모르면 무엇을 바꾸는지 모른 채 고르게 된다.
-   *
-   * 자동이 무엇인지는 형식에게 묻는다(`anchorOfPart`). 여기서 「위 절반이면 max」를 다시 세면
-   * 화면이 말하는 면과 실제로 그려지는 면이 갈린다.
-   *
-   * ## `scale` 인 부품에도 보여 준다
-   *
-   * 처음에는 감췄다 — 형식 주석에 「`sizing` 이 `scale` 인 부품에는 뜻이 없다」고 적혀 있어서다.
-   * **그 문장은 기본값에 대한 것이다.** `anchorOf` 는 적힌 값을 가장 먼저 보고(`if (said) return
-   * said`), 그 뒤에야 `sizing` 을 본다. 즉 `scale` 부품에도 면을 적으면 그것이 이긴다.
-   *
-   * 감춰 두면 어긋남이 난다: 발행 게이트가 막는 MIXER 의 `valve-wheel` 이 `scale` 부품이고,
-   * 게이트의 사유는 「그 부품의 anchor.z 를 max 로 두라」다. 고치라는 자리에 문을 닫아 둔 셈이었다.
-   *
-   * 대신 `scale` 일 때는 자동이 무엇인지가 「함께 커진다」로 보이므로, 저작자가 그것을 바꾸는
-   * 것임을 알 수 있다.
-   */
-  /**
-   * ── 도움말은 자리를 먹지 않는다 ─────────────────────────────────────────────
-   *
-   * 설명 문단이 열 줄 있었고 그 줄들이 패널 높이의 상당 부분이었다. 속성은 앞으로 더 늘어난다
-   * (능력 · 포트 · 애니메이션 · 기준정보) — 늘 보이는 설명은 그 자리를 먼저 먹는다.
-   *
-   * 그래서 물음표로 접는다. **지우지 않는다** — 그 문장들은 「이걸 고르면 무엇이 달라지나」를
-   * 말하는 것이고, 없으면 닫힌 목록을 고를 수 없다. 한 번 읽으면 되는 것이라 접어 두는 것이 맞다.
-   *
-   * 편 것은 **부품을 바꿔도 그대로 둔다**(`opened` 는 부품에 딸린 상태가 아니다). 같은 것을
-   * 계속 고치는 사람이 매번 다시 펴야 하면 접은 것이 되레 방해가 된다.
-   */
-  private help(key: string) {
-    return html`${this.helpButton(key)}${this.helpHint(key)}`
-  }
-
-  private helpButton(key: string) {
-    const shown = this.opened.has(key)
-
-    return html`
-      <button
-        help
-        aria-label=${i18next.t('figure.label.help')}
-        aria-expanded=${shown ? 'true' : 'false'}
-        @click=${() => {
-          shown ? this.opened.delete(key) : this.opened.add(key)
-          this.requestUpdate()
-        }}
-      >
-        <md-icon>${shown ? 'help' : 'help_outline'}</md-icon>
-      </button>
-    `
-  }
-
-  private helpHint(key: string) {
-    return this.opened.has(key) ? html`<p hint>${i18next.t(key)}</p>` : nothing
-  }
-
-  private renderAnchors(part: FigurePart) {
-    /*
-      The scene draft stores the box height as depth, so format y is draft.depth and z is draft.height.
-      This used to pass them swapped, and every automatic anchor still came out the same: the
-      nearest-face rule reads the sign of a centred position, which does not depend on the box size.
-      It is fixed so the next rule that does read the box does not inherit the mistake.
-    */
-    const base = this.draft
-      ? { x: this.draft.width, y: this.draft.depth, z: this.draft.height }
-      : { x: 0, y: 0, z: 0 }
-    const nameOf = (rule: string, axis: Axis) =>
-      `${i18next.t(rule === 'min' || rule === 'max' ? `figure.label.anchor-${rule}-${axis}` : `figure.label.anchor-${rule}`)} (${rule})`
-    const setAnchor = (axis: Axis, rule?: AnchorRule) => {
-      const anchor = { ...(part.anchor ?? {}) }
-      /* 「자동」은 칸을 지우는 것이다 — 빈 값을 넣어 두면 형식이 그것을 값으로 읽는다. */
-      if (rule) anchor[axis] = rule
-      else delete anchor[axis]
-      this.put({ anchor: Object.keys(anchor).length ? anchor : undefined })
-    }
-    const shortNameOf = (rule: AnchorRule | 'auto', axis: Axis) => {
-      if (rule === 'auto') return i18next.t('figure.label.anchor-choice-auto')
-      if (rule === 'min' || rule === 'max') return i18next.t(`figure.label.anchor-choice-${rule}-${axis}`)
-      return i18next.t(`figure.label.anchor-choice-${rule}`)
-    }
-
-    return html`
-      <div field>
-        <!-- 저장 키(anchor)는 남기되, 사용자는 축마다 어느 면을 기준으로 삼는지 읽는다. -->
-        <label>${i18next.t('figure.label.anchor')} (anchor)${this.help('figure.text.anchor-explained')}</label>
-        <div anchor-rows>
-          ${(['x', 'y', 'z'] as const).map(axis => {
-          const said = part.anchor?.[axis]
-          const auto = anchorOfPart(part, base, axis)
-
-          /*
-            **면 이름은 축마다 다르다.** 처음에는 min 을 「아래·왼쪽·뒤 면」으로 한 줄에 다 적었는데,
-            x 줄에서 「아래」와 「뒤」는 관계가 없어 읽는 사람이 무엇을 고르는지 몰랐다.
-
-            그리고 이름씨가 아니라 **동작**으로 적는다 — 「오른쪽 면」이 아니라 「오른쪽 면에 붙어
-            있는다」다. 「anchor.x 를 max 로 둔다」가 무슨 뜻인지 모르겠다는 말이 그 자리에서 나왔다.
-          */
-          /*
-            **값 이름을 함께 보인다.** 동작만 적었더니(「오른쪽 면에 붙어 있는다») 발행 게이트가
-            「anchor.x 를 max 로 두라」고 말할 때 화면에서 그 낱말을 찾을 수 없었다 — 사용자가
-            그 자리에서 지적했다.
-
-            `max` 는 정본에 저장되는 이름이고 서버 오류·형식 문서·게이트 사유가 다 그 이름을 쓴다.
-            숨기면 안 되는 종류다. 동작이 먼저고 이름이 괄호로 따라온다.
-          */
-          return html`
-            <div anchor-row>
-              <label>${i18next.t('figure.label.axis-name', { axis: axis.toUpperCase() })}</label>
-              <div anchor-options>
-                ${(['auto', 'scale', 'min', 'center', 'max', 'span'] as const).map(rule => {
-                  const selected = rule === 'auto' ? !said : rule === said
-                  const fullName = rule === 'auto' ? i18next.t('figure.label.anchor-auto', { rule: nameOf(auto, axis) }) : nameOf(rule, axis)
-                  return html`
-                    <button
-                      anchor-choice
-                      ?on=${selected}
-                      aria-pressed=${selected ? 'true' : 'false'}
-                      title=${fullName}
-                      @click=${() => setAnchor(axis, rule === 'auto' ? undefined : rule)}
-                    >${shortNameOf(rule, axis)}</button>
-                  `
-                })}
-              </div>
-              <details anchor-advanced>
-                <summary>${i18next.t('figure.label.anchor-advanced')}</summary>
-                <div anchor-options>
-                  ${ANCHOR_RULES.filter(rule => rule.startsWith('aspect-')).map(rule => html`
-                    <button
-                      anchor-choice
-                      ?on=${rule === said}
-                      aria-pressed=${rule === said ? 'true' : 'false'}
-                      title=${nameOf(rule, axis)}
-                      @click=${() => setAnchor(axis, rule)}
-                    >${i18next.t(`figure.label.anchor-choice-${rule}`)}</button>
-                  `)}
-                </div>
-              </details>
-            </div>
-          `
-          })}
-        </div>
-      </div>
-    `
-  }
-
-  /**
-   * 숫자 칸.
-   *
-   * 빈 칸이나 글자를 넣었을 때 0 으로 바꿔치지 않는다 — 저작자가 지우는 중일 수 있고,
-   * 조용히 0 이 되면 부품이 사라진 것처럼 보인다. 숫자가 아니면 그냥 안 받는다.
-   */
-  private number(label: string, value: number, set: (value: number) => void, min?: number) {
-    return html`
-      <div cell>
-        ${label ? html`<span axis>${label}</span>` : nothing}
-        <input
-          type="number"
-          .value=${String(value)}
-          min=${min ?? nothing}
-          @change=${(e: Event) => {
-            const raw = (e.target as HTMLInputElement).value
-            const parsed = Number(raw)
-            if (raw === '' || !Number.isFinite(parsed)) {
-              // 되돌려 놓는다. 안 그러면 화면과 정본이 갈린다.
-              ;(e.target as HTMLInputElement).value = String(value)
-              return
-            }
-            set(parsed)
-          }}
-        />
-      </div>
-    `
-  }
-
-  /**
-   * 도형을 바꾼다.
-   *
-   * 도형이 바뀌면 그 도형에 뜻 없는 값이 남는다. 남겨 두면 검증이 「무시됨」 위반을
-   * 내므로 여기서 걷는다.
-   */
-  private changePrimitive(primitive: PrimitiveKind) {
-    this.change(part => {
-      const next: FigurePart = { ...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
-    })
-  }
-
-  private put(patch: Partial<FigurePart>) {
-    this.change(part => ({ ...part, ...patch }))
-  }
-
-  private putTransform(patch: Record<string, unknown>) {
-    this.change(part => ({ ...part, transform: { ...part.transform, ...patch } as FigurePart['transform'] }))
-  }
-
-  /**
-   * 발광 세기를 고친다. **0 이면 블록을 통째로 지운다.**
-   *
-   * 세기 0 인 발광을 남겨 두면 「안 빛나는데 램프인 것」이 되어, 재질 키가 갈려 묶음이
-   * 헛되이 하나 는다. 0 은 「램프가 아니다」로 읽는 것이 맞다.
-   *
-   * `Number(value) || undefined` 를 쓰면 안 된다 — 0 이 falsy 라 변경으로 안 잡혀 옛
-   * 값이 그대로 남는다. 실제로 램프가 안 꺼졌다.
-   */
-  private putEmissive(intensity: number) {
-    // `chosen` 은 씬 모델이다. 형식으로 옮긴 값은 `partToFigure` 이 만든 것이라 여기서 다시 꺼낸다.
-    const glow = this.draft && this.chosen ? partToFigure(this.chosen, this.draft).material?.emissive : undefined
-
-    this.putMaterial({ emissive: intensity > 0 ? { ...glow, intensity } : undefined })
-  }
-
-  private putMaterial(patch: Record<string, unknown>) {
-    this.change(part => ({
-      ...part,
-      material: { ...(part.material ?? {}), ...patch } as FigurePart['material']
-    }))
-  }
-
-  /**
-   * 수정한 것을 씬 모델로 되돌려 알린다.
-   *
-   * 사용자는 X·Y·Z 로 수정하고, 모델러 페이지는 씬 모델을 갖는다. 그 사이를 여기서
-   * 잇는다 — 변환해서 수정하고 다시 되돌린다. **왕복 변환이 무손실이라야** 위치 하나
-   * 고쳤을 뿐인데 회전값이 조금씩 밀리는 일이 없다(`fold.test.ts` 가 이를 확인한다).
-   */
-  private change(edit: (part: FigurePart) => FigurePart) {
-    const part = this.chosen
-    const draft = this.draft
-    if (!part || !draft) return
-
-    this.emit(partFromFigure(edit(partToFigure(part, draft)), draft))
-  }
-
-  /** 정밀 도구를 시킨다. 정본은 저작면이 갖는다 — 여기서는 알리기만 한다. */
-  private ask(what: string, axis: string) {
-    this.dispatchEvent(
-      new CustomEvent('part-tool', {
-        detail: { index: this.selected, tool: what, axis },
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  private emit(part: PartModel) {
-    this.dispatchEvent(
-      new CustomEvent('update-part', { detail: { index: this.selected, part }, bubbles: true, composed: true })
-    )
-  }
-}