@things-factory/figure-ui 10.1.5 → 10.1.6

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

@@ -1,10 +1,12 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing, svg } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+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, trianglesOf } from '@hatiolab/figure-model';
+import { ANCHOR_RULES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repeatPlanOfPart } from '@hatiolab/figure-model';
 import { activePalette } from '@hatiolab/things-scene';
 import { partToFigure, partFromFigure } from './figure-source.js';
 import { canMirror } from './part-edits.js';
@@ -54,6 +56,8 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         /** 보드. 위치를 보드 중심 기준으로 바꾸려면 이것이 있어야 한다. */
         /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`figure-rename` 으로 알린다). */
         this.figureName = '';
+        /** 펴 둔 도움말. 부품을 바꿔도 유지된다 — 매번 다시 펴게 하지 않는다. */
+        this.opened = new Set();
         /** 보드 위의 부품들. 씬 모델 그대로다. */
         this.parts = [];
         this.selected = -1;
@@ -82,12 +86,21 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         font-size: 0.76rem;
       }
 
+      /*
+        ── 자리를 아끼는 판 ──────────────────────────────────────────────────────
+        속성은 앞으로 더 늘어난다(능력 · 포트 · 애니메이션 · 기준정보). 지금 여백을 그대로 두면
+        그것들이 들어올 자리가 없다. 절 여백을 6/10 으로, 제목 아래를 4px 로 줄였다 — 글자 크기와
+        칸 높이는 건드리지 않는다(작게 만드는 것이 아니라 **빈 곳을 줄이는 것**이다).
+      */
       section {
-        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        padding: 6px 10px;
         border-bottom: 1px solid var(--md-sys-color-outline-variant);
       }
       h3 {
-        margin: 0 0 6px 0;
+        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;
@@ -96,12 +109,47 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       }
 
       label {
-        display: block;
+        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%;
@@ -169,7 +217,8 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
       div[field] + div[field],
       div[triple] + div[field],
       div[field] + div[triple] {
-        margin-top: 7px;
+        /* 칸 사이 7 → 5. 칸 자체는 그대로 두고 사이만 좁힌다. */
+        margin-top: 5px;
       }
 
       /*
@@ -484,18 +533,126 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
             return html `
         ${this.renderFigure()}
         <section>
-          <h3>${i18next.t('label.properties')}</h3>
-          <p quiet>${i18next.t('text.select-a-part-to-edit')}</p>
+          <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.board);
+        /*
+          역할을 먼저 묻는다.
+    
+          자리(slot)로 지정한 부품은 **그려지지 않는다.** 그 사실을 모른 채 재질부터 고르면 안 쓰일
+          색을 고르게 된다. 그리고 자리는 도형이 능력을 질 때만 뜻이 있으므로, 능력이 없으면 이
+          묶음은 아예 나오지 않는다 — 해 둬도 아무 일도 안 일어나는 칸을 보여 주지 않는다.
+        */
         return html `
-      ${this.renderFigure()} ${this.renderIdentity(shown)} ${this.renderPlacement(shown)}
-      ${this.renderShape(shown)} ${this.renderMaterial(shown)} ${this.renderBehaviour(shown)}
+      ${this.renderFigure()} ${this.renderIdentity(shown)} ${this.renderRole(shown)}
+      ${this.renderPlacement(shown)} ${this.renderShape(shown)} ${this.renderMaterial(shown)}
+      ${this.renderBehaviour(shown)}
     `;
     }
+    /**
+     * ── 이 부품이 능력에서 맡는 자리 ────────────────────────────────────────────
+     *
+     * 「능력」 탭이 도형 전체가 무엇을 하는지 정하고, 어느 부품이 그것을 받쳐 주는지는 여기서
+     * 정한다. **부품을 고치는 곳이 한 군데여야** 하기 때문이다 — 목록을 따로 두면 같은 부품을
+     * 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.
+     *
+     * 칸 수는 `repeat` 가 있으면 받지 않는다. 반복하는 자리의 칸 수는 **인스턴스 크기**가 정한다 —
+     * 컨베이어가 길어지면 실을 자리가 늘어나는 것이 그것이고, 여기 적은 값은 안 쓰인다.
+     */
+    renderRole(part) {
+        if (!this.board?.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>
+
+        ${PART_ROLES.map(one => html `
+            <label toggle>
+              <input
+                type="checkbox"
+                .checked=${live(roles.includes(one))}
+                @change=${(e) => this.toggleRole(one, e.target.checked)}
+              />
+              ${i18next.t('figure.label.role-' + one)}
+            </label>
+          `)}
+        ${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) => this.setAccepts(e.target.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>
+    `;
+    }
+    /**
+     * 역할 하나를 켜고 끈다.
+     *
+     * **여럿을 함께 맡을 수 있다.** AGV 의 상판은 물건을 놓는 자리이면서 그 자리로 물건이
+     * 들어오고 나간다. 그래서 하나를 고르는 선택 상자가 아니라 확인 상자다.
+     *
+     * 마지막 역할을 끄면 `capability` 를 통째로 지운다. 빈 배열을 남기면 형식이 오류로 보고,
+     * 저작자가 보기에는 아무 역할도 없는 평범한 부품인데 발행이 막힌다.
+     */
+    toggleRole(role, on) {
+        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;
+            }
+            // 형식이 적은 순서를 지킨다 — 켠 순서대로 두면 같은 뜻이 다른 값으로 저장된다.
+            const ordered = PART_ROLES.filter(one => roles.includes(one));
+            return { ...part, capability: { ...part.capability, roles: ordered } };
+        });
+    }
+    setAccepts(raw) {
+        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'] };
+            // 빈 목록은 제한하지 않는다는 뜻이다. 빈 배열을 저장하면 아무것도 못 받는 것으로 읽힌다.
+            if (accepts.length > 0)
+                spec.accepts = accepts;
+            else
+                delete spec.accepts;
+            return { ...part, capability: spec };
+        });
+    }
+    setCapacity(value) {
+        this.change(part => {
+            const spec = { ...part.capability, roles: part.capability?.roles ?? ['slot'] };
+            if (Number.isFinite(value) && value >= 1)
+                spec.capacity = Math.floor(value);
+            else
+                delete spec.capacity;
+            return { ...part, capability: spec };
+        });
+    }
     /**
      * 도형 자체 — 이름과 타입.
      *
@@ -512,12 +669,12 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
     renderFigure() {
         return html `
       <section>
-        <h3>${i18next.t('label.figure')}</h3>
+        <h3>${i18next.t('figure.label.figure')}</h3>
         <div field>
-          <label>${i18next.t('label.name')}</label>
+          <label>${i18next.t('figure.label.name')}</label>
           <input
             .value=${this.figureName}
-            placeholder=${i18next.t('text.figure-display-name')}
+            placeholder=${i18next.t('figure.text.figure-display-name')}
             @change=${(e) => this.dispatchEvent(new CustomEvent('figure-rename', {
             detail: { name: e.target.value },
             bubbles: true,
@@ -526,8 +683,8 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
           />
         </div>
         <div field>
-          <label>${i18next.t('label.type')}</label>
-          <code fixed title=${i18next.t('text.type-name-cannot-change')}>
+          <label>${i18next.t('figure.label.figure-type')}${this.help('figure.text.type-name-cannot-change')}</label>
+          <code fixed title=${i18next.t('figure.text.type-name-cannot-change')}>
             <md-icon>lock</md-icon>${this.board?.figureType ?? ''}
           </code>
         </div>
@@ -535,28 +692,26 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
           왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
           알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
         -->
-        <p quiet>${i18next.t('text.type-name-cannot-change')}</p>
       </section>
     `;
     }
     renderIdentity(part) {
         return html `
       <section>
-        <h3>${i18next.t('label.part')}</h3>
+        <h3>${i18next.t('figure.label.part')}</h3>
         <div field>
-          <label>${i18next.t('label.name')}</label>
+          <label>${i18next.t('figure.label.name')}${this.help('figure.text.renaming-a-part-breaks-bindings')}</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>
+          <label>${i18next.t('figure.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)}
+                  ${i18next.t('figure.label.primitive-' + kind)}
                 </option>
               `)}
           </select>
@@ -569,31 +724,31 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const rotation = t.rotation ?? {};
         return html `
       <section>
-        <h3>${i18next.t('label.placement')}</h3>
+        <h3>${i18next.t('figure.label.placement')}</h3>
 
-        <label>${i18next.t('label.position')}</label>
+        <label>${i18next.t('figure.label.part-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>
+          <label>${i18next.t('figure.label.part-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>
+          <label>${i18next.t('figure.label.tools')}</label>
           <div tools>
-            <button title=${i18next.t('text.center-on-x')} @click=${() => this.ask('center', 'x')}>
-              ${i18next.t('button.center-x')}
+            <button title=${i18next.t('figure.text.center-on-x')} @click=${() => this.ask('center', 'x')}>
+              ${i18next.t('figure.button.center-x')}
             </button>
-            <button title=${i18next.t('text.center-on-z')} @click=${() => this.ask('center', 'z')}>
-              ${i18next.t('button.center-z')}
+            <button title=${i18next.t('figure.text.center-on-z')} @click=${() => this.ask('center', 'z')}>
+              ${i18next.t('figure.button.center-z')}
             </button>
-            <button title=${i18next.t('text.put-on-floor')} @click=${() => this.ask('floor', 'y')}>
-              ${i18next.t('button.to-floor')}
+            <button title=${i18next.t('figure.text.put-on-floor')} @click=${() => this.ask('floor', 'y')}>
+              ${i18next.t('figure.button.to-floor')}
             </button>
             <span sep></span>
             ${['x', 'z'].map(axis => {
@@ -602,22 +757,22 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
             return html `
                 <button
                   ?disabled=${!able}
-                  title=${i18next.t(able ? 'text.mirror-explained' : 'text.mirror-would-overlap')}
+                  title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
                   @click=${() => this.ask('mirror', axis)}
                 >
-                  ${i18next.t('button.mirror-' + axis)}
+                  ${i18next.t('figure.button.mirror-' + axis)}
                 </button>
               `;
         })}
             <span sep></span>
-            <button title=${i18next.t('text.snap-explained')} @click=${() => this.ask('snap', 'x')}>
-              ${i18next.t('button.snap')}
+            <button title=${i18next.t('figure.text.snap-explained')} @click=${() => this.ask('snap', 'x')}>
+              ${i18next.t('figure.button.snap')}
             </button>
           </div>
         </div>
 
         <div field>
-          <label>${i18next.t('label.rotation-degrees')}</label>
+          <label>${i18next.t('figure.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>
@@ -633,7 +788,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
             return nothing;
         return html `
       <section>
-        <h3>${i18next.t('label.shape-detail')}</h3>
+        <h3>${i18next.t('figure.label.shape-detail')}</h3>
         ${segmented ? this.renderSegments(part) : nothing}
         ${segmented ? this.renderKeepRound(part) : nothing}
         ${extruded ? this.renderExtruded(part) : nothing}
@@ -653,17 +808,17 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const reshape = (over) => this.put({ shape: { ...(part.shape ?? {}), ...over } });
         return html `
       <div field>
-        <label>${i18next.t('label.corner-round')}</label>
+        <label>${i18next.t('figure.label.corner-round')}</label>
         ${this.number('', part.shape?.round ?? 0, value => reshape({ round: value }))}
       </div>
       <div field>
-        <label>${i18next.t('label.hollow-wall')}</label>
+        <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 field>
-              <label>${i18next.t('label.hollow-floor')}</label>
+              <label>${i18next.t('figure.label.hollow-floor')}</label>
               ${this.number('', hollow?.floor ?? wall, value => reshape({ hollow: { ...hollow, wall, floor: value } }))}
             </div>
           `
@@ -688,15 +843,15 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const on = part.keepRound !== false;
         return html `
       <div field>
-        <label>${i18next.t('label.keep-round')}</label>
+        <label>${i18next.t('figure.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>
+            <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('text.keep-round-off')}</b>
-            <small>${i18next.t('text.keep-round-merged')}</small>
+            <b>${i18next.t('figure.text.keep-round-off')}</b>
+            <small>${i18next.t('figure.text.keep-round-merged')}</small>
           </button>
         </div>
       </div>
@@ -706,7 +861,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const current = part.segments ?? SEGMENT_PRESETS[1];
         return html `
       <div field>
-        <label>${i18next.t('label.segments')}</label>
+        <label>${i18next.t('figure.label.segments')}</label>
         <div segments>
           ${SEGMENT_PRESETS.map(preset => {
             const triangles = trianglesOf({ ...part, segments: preset });
@@ -714,14 +869,14 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
               <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>
+                <small>${i18next.t('figure.text.n-triangles', { count: triangles })}</small>
               </button>
             `;
         })}
         </div>
 
         <details free>
-          <summary>${i18next.t('text.other-segment-count')}</summary>
+          <summary>${i18next.t('figure.text.other-segment-count')}</summary>
           ${this.number('', current, value => this.put({ segments: value }), 3)}
         </details>
       </div>
@@ -775,36 +930,36 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const glow = material.emissive;
         return html `
       <section>
-        <h3>${i18next.t('label.material')}</h3>
+        <h3>${i18next.t('figure.label.part-material')}</h3>
 
         <div field>
-          <label>${i18next.t('label.palette-token')}</label>
+          <label>${i18next.t('figure.label.palette-token')}</label>
           <div swatches>
             ${this.swatches(painted, material.token)}
           </div>
           ${lit.length
             ? html `
-                <label group>${i18next.t('label.status-colors')}</label>
+                <label group>${i18next.t('figure.label.status-colors')}</label>
                 <div swatches>
                   ${this.swatches(lit, material.token)}
                 </div>
               `
             : ''}
-          <span token>${material.token ?? i18next.t('label.no-color-chosen')}</span>
+          <span token>${material.token ?? i18next.t('figure.label.no-color-chosen')}</span>
         </div>
 
         <div field>
-          <label>${i18next.t('label.preset')}</label>
+          <label>${i18next.t('figure.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>
+            <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('label.preset-' + preset)}
+                  ${i18next.t('figure.label.preset-' + preset)}
                 </option>
               `)}
           </select>
@@ -817,7 +972,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
             .checked=${material.flatShading ?? true}
             @change=${(e) => this.putMaterial({ flatShading: e.target.checked })}
           />
-          ${i18next.t('label.flat-shading')}
+          ${i18next.t('figure.label.flat-shading')}
         </label>
         <label toggle>
           <input
@@ -825,12 +980,11 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
             .checked=${!!material.transparent}
             @change=${(e) => this.putMaterial({ transparent: e.target.checked })}
           />
-          ${i18next.t('label.transparent')}
+          ${i18next.t('figure.label.transparent')}
         </label>
 
         <div field>
-          <label>${i18next.t('label.emissive')}</label>
-          <p cost>${i18next.t('text.emissive-explained')}</p>
+          <label>${i18next.t('figure.label.emissive')}${this.help('figure.text.emissive-explained')}</label>
 
           <div slider>
             <input
@@ -848,13 +1002,13 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         ${glow
             ? html `
               <div field>
-                <label>${i18next.t('label.emissive-color')}</label>
+                <label>${i18next.t('figure.label.emissive-color')}</label>
                 <div swatches>
                   <button
                     swatch
                     same
                     ?on=${!glow.token}
-                    title=${i18next.t('label.same-as-off')}
+                    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>
@@ -868,7 +1022,7 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
                       ></button>
                     `)}
                 </div>
-                <span token>${glow.token ?? i18next.t('label.same-as-off')}</span>
+                <span token>${glow.token ?? i18next.t('figure.label.same-as-off')}</span>
               </div>
 
               <label toggle>
@@ -877,9 +1031,9 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
                   .checked=${!!glow.on}
                   @change=${(e) => this.putMaterial({ emissive: { ...glow, on: e.target.checked } })}
                 />
-                ${i18next.t('label.on-by-default')}
+                ${i18next.t('figure.label.on-by-default')}
               </label>
-              <p cost>${i18next.t('text.on-by-default-explained')}</p>
+              ${this.help('figure.text.on-by-default-explained')}
             `
             : ''}
 
@@ -908,25 +1062,21 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
         const repeat = part.repeat ?? { axis: 'x', pitch: 0 };
         return html `
       <section>
-        <h3>${i18next.t('label.sizing-rule')}</h3>
+        <h3>${i18next.t('figure.label.sizing-rule')}${this.help('figure.text.sizing-' + sizing + '-explained')}</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>
+              <option value=${rule} ?selected=${rule === sizing}>${i18next.t('figure.label.sizing-' + rule)}</option>
             `)}
         </select>
-        <p warn>${i18next.t('text.sizing-' + sizing + '-explained')}</p>
+        ${sizing === 'scale' ? nothing : this.help('figure.text.sizing-costs-one-draw-call')}
+        ${sizing === 'repeat' ? this.help('figure.text.repeat-edits-the-unit') : nothing}
 
-        ${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}
+        ${this.renderAnchors(part)}
 
         ${sizing === 'repeat'
             ? html `
               <div field>
-                <label>${i18next.t('label.repeat-axis')}</label>
+                <label>${i18next.t('figure.label.repeat-axis')}</label>
                 <select
                   @change=${(e) => this.put({ repeat: { ...repeat, axis: e.target.value } })}
                 >
@@ -934,15 +1084,165 @@ let FigureInspector = class FigureInspector extends localize(i18next)(LitElement
                 </select>
               </div>
               <div field>
-                <label>${i18next.t('label.repeat-pitch')}</label>
+                <label>${i18next.t('figure.label.repeat-pitch')}${this.help('figure.text.repeat-pitch-explained')}</label>
                 ${this.number('', repeat.pitch, value => this.put({ repeat: { ...repeat, pitch: value } }), 1)}
-                <p cost>${i18next.t('text.repeat-pitch-explained')}</p>
               </div>
+              ${this.renderRepeatCount(part)}
             `
             : nothing}
       </section>
     `;
     }
+    /**
+     * ── 몇 개가 되나 ──────────────────────────────────────────────────────────
+     *
+     * 저작 화면은 축과 피치만 받고 있었다. 형식이 가진 반복 설정이 그 둘뿐이므로 편집할 것은
+     * 다 있었는데, **결과인 개수를 어디에도 표시하지 않았다.** 피치 300 을 적은 저작자가 몇 개가
+     * 되는지 알려면 미리보기를 세어야 했다.
+     *
+     * 개수는 그리는 쪽이 쓰는 `repeatPlan` 을 그대로 불러 얻는다. 여기서 다시 계산하면 화면이
+     * 말하는 개수와 실제로 그려지는 개수가 달라진다.
+     *
+     * ## 두 가지 반복이 있다
+     *
+     * 컨베이어의 롤러는 길어지면 **개수가 늘고** 한 칸 간격은 그대로다. 셀트레이의 셀은 커지면
+     * **셀이 커지고** 개수는 그대로다 — 몇 셀짜리 트레이냐는 화면 크기와 무관하다. 그 갈림을
+     * 이 축의 anchor 가 정하는데 화면에는 그 말이 없었다. 그래서 어느 쪽인지 함께 적는다.
+     */
+    renderRepeatCount(part) {
+        const board = this.board;
+        if (!board)
+            return nothing;
+        const base = { x: board.width, y: board.depth, z: board.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` 는 부품에 딸린 상태가 아니다). 같은 것을
+     * 계속 고치는 사람이 매번 다시 펴야 하면 접은 것이 되레 방해가 된다.
+     */
+    help(key) {
+        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>
+      ${shown ? html `<p hint>${i18next.t(key)}</p>` : nothing}
+    `;
+    }
+    renderAnchors(part) {
+        const base = this.board
+            ? { x: this.board.width, y: this.board.height, z: this.board.depth }
+            : { x: 0, y: 0, z: 0 };
+        return html `
+      <div field>
+        <!-- 「anchor.x」로 적힌 사유를 화면에서 찾을 수 있게 칸 이름에 그 낱말을 남긴다 -->
+        <label>${i18next.t('figure.label.anchor')} (anchor)${this.help('figure.text.anchor-explained')}</label>
+        ${['x', 'y', 'z'].map(axis => {
+            const said = part.anchor?.[axis];
+            const auto = anchorOfPart(part, base, axis);
+            /*
+              **면 이름은 축마다 다르다.** 처음에는 min 을 「아래·왼쪽·뒤 면」으로 한 줄에 다 적었는데,
+              x 줄에서 「아래」와 「뒤」는 관계가 없어 읽는 사람이 무엇을 고르는지 몰랐다.
+  
+              그리고 이름씨가 아니라 **동작**으로 적는다 — 「오른쪽 면」이 아니라 「오른쪽 면에 붙어
+              있는다」다. 「anchor.x 를 max 로 둔다」가 무슨 뜻인지 모르겠다는 말이 그 자리에서 나왔다.
+            */
+            /*
+              **값 이름을 함께 보인다.** 동작만 적었더니(「오른쪽 면에 붙어 있는다») 발행 게이트가
+              「anchor.x 를 max 로 두라」고 말할 때 화면에서 그 낱말을 찾을 수 없었다 — 사용자가
+              그 자리에서 지적했다.
+  
+              `max` 는 정본에 저장되는 이름이고 서버 오류·형식 문서·게이트 사유가 다 그 이름을 쓴다.
+              숨기면 안 되는 종류다. 동작이 먼저고 이름이 괄호로 따라온다.
+            */
+            const nameOf = (rule) => `${i18next.t(rule === 'min' || rule === 'max' ? `figure.label.anchor-${rule}-${axis}` : `figure.label.anchor-${rule}`)} (${rule})`;
+            return html `
+            <div cell>
+              <span axis>${axis}</span>
+              <select
+                @change=${(e) => {
+                const value = e.target.value;
+                const anchor = { ...(part.anchor ?? {}) };
+                /* 「자동」은 칸을 지우는 것이다 — 빈 값을 넣어 두면 형식이 그것을 값으로 읽는다. */
+                if (value) {
+                    anchor[axis] = value;
+                }
+                else {
+                    delete anchor[axis];
+                }
+                this.put({ anchor: Object.keys(anchor).length ? anchor : undefined });
+            }}
+              >
+                <option value="" ?selected=${!said}>
+                  ${i18next.t('figure.label.anchor-auto', { rule: nameOf(auto) })}
+                </option>
+                ${ANCHOR_RULES.map(rule => html `<option value=${rule} ?selected=${rule === said}>${nameOf(rule)}</option>`)}
+              </select>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
     /**
      * 숫자 칸.
      *
@@ -1047,6 +1347,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], FigureInspector.prototype, "figureName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureInspector.prototype, "opened", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)