@things-factory/figure-ui 10.1.5 → 10.1.7

package/client/modeller/figure-inspector.ts

@@ -1,7 +1,8 @@
 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'
@@ -14,7 +15,8 @@ import {
   SIZING_RULES,
   trianglesOf
 } from '@hatiolab/figure-model'
-import type { Axis, FigurePart, MaterialPreset, PrimitiveKind } from '@hatiolab/figure-model'
+import { ANCHOR_RULES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repeatPlanOfPart } from '@hatiolab/figure-model'
+import type { AnchorRule, Axis, FigurePart, MaterialPreset, PartRole, PrimitiveKind } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
 
 import { partToFigure, partFromFigure } from './figure-source.js'
@@ -87,12 +89,21 @@ export 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;
@@ -101,12 +112,47 @@ export 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%;
@@ -174,7 +220,8 @@ export 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;
       }
 
       /*
@@ -483,6 +530,13 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   /** 보드. 위치를 보드 중심 기준으로 바꾸려면 이것이 있어야 한다. */
   /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`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 }) board?: BoardModel
   /** 보드 위의 부품들. 씬 모델 그대로다. */
@@ -500,8 +554,8 @@ export 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>
       `
     }
@@ -509,12 +563,125 @@ export class FigureInspector extends localize(i18next)(LitElement) {
     // 여기부터는 사용자 용어다 — X·Y·Z, 위치는 부품 중심, 회전은 도(degree).
     const shown = partToFigure(part, this.board)
 
+    /*
+      역할을 먼저 묻는다.
+
+      자리(slot)로 지정한 부품은 **그려지지 않는다.** 그 사실을 모른 채 재질부터 고르면 안 쓰일
+      색을 고르게 된다. 그리고 자리는 도형이 능력을 질 때만 뜻이 있으므로, 능력이 없으면 이
+      묶음은 아예 나오지 않는다 — 해 둬도 아무 일도 안 일어나는 칸을 보여 주지 않는다.
+    */
+    return html`
+      ${this.renderFigure()} ${this.renderIdentity(shown)} ${this.renderRole(shown)}
+      ${this.renderPlacement(shown)} ${this.renderShape(shown)} ${this.renderMaterial(shown)}
+      ${this.renderBehaviour(shown)}
+    `
+  }
+
+  /**
+   * ── 이 부품이 능력에서 맡는 자리 ────────────────────────────────────────────
+   *
+   * 「능력」 탭이 도형 전체가 무엇을 하는지 정하고, 어느 부품이 그것을 받쳐 주는지는 여기서
+   * 정한다. **부품을 고치는 곳이 한 군데여야** 하기 때문이다 — 목록을 따로 두면 같은 부품을
+   * 두 화면에서 고치게 되고, 저작자는 어느 쪽이 이기는지 매번 생각해야 한다.
+   *
+   * 칸 수는 `repeat` 가 있으면 받지 않는다. 반복하는 자리의 칸 수는 **인스턴스 크기**가 정한다 —
+   * 컨베이어가 길어지면 실을 자리가 늘어나는 것이 그것이고, 여기 적은 값은 안 쓰인다.
+   */
+  private renderRole(part: FigurePart) {
+    if (!this.board?.capabilities?.length) return nothing
+
+    const roles = part.capability?.roles ?? []
+    const repeats = part.sizing === 'repeat' && !!part.repeat
+
     return html`
-      ${this.renderFigure()} ${this.renderIdentity(shown)} ${this.renderPlacement(shown)}
-      ${this.renderShape(shown)} ${this.renderMaterial(shown)} ${this.renderBehaviour(shown)}
+      <section>
+        <h3>${i18next.t('figure.label.role-in-capability')}${this.help('figure.text.anchors-are-not-drawn')}</h3>
+
+        ${(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>
+          `
+        )}
+        ${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>
     `
   }
 
+  /**
+   * 역할 하나를 켜고 끈다.
+   *
+   * **여럿을 함께 맡을 수 있다.** 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']> }
+    })
+  }
+
   /**
    * 도형 자체 — 이름과 타입.
    *
@@ -531,12 +698,12 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   private 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: Event) =>
               this.dispatchEvent(
                 new CustomEvent('figure-rename', {
@@ -548,8 +715,8 @@ export 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>
@@ -557,30 +724,71 @@ export class FigureInspector extends localize(i18next)(LitElement) {
           왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
           알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
         -->
-        <p quiet>${i18next.t('text.type-name-cannot-change')}</p>
+
+        <div field>
+          <label>${i18next.t('figure.label.category')}${this.help('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 })}
+          />
+        </div>
+
+        <div field>
+          <label>${i18next.t('figure.label.tags')}${this.help('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)}
+          />
+        </div>
       </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 }))
+  }
+
   private renderIdentity(part: FigurePart) {
     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: Event) => this.put({ name: (e.target as HTMLInputElement).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: Event) => this.changePrimitive((e.target as HTMLSelectElement).value as PrimitiveKind)}>
             ${PRIMITIVE_KINDS.map(
               kind => html`
                 <option value=${kind} ?selected=${kind === part.primitive}>
-                  ${i18next.t('label.primitive-' + kind)}
+                  ${i18next.t('figure.label.primitive-' + kind)}
                 </option>
               `
             )}
@@ -596,9 +804,9 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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'] as const).map(axis =>
             this.number(axis.toUpperCase(), t.position[axis], value =>
@@ -608,7 +816,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
         </div>
 
         <div field>
-          <label>${i18next.t('label.size')}</label>
+          <label>${i18next.t('figure.label.part-size')}</label>
           <div triple>
             ${(['x', 'y', 'z'] as const).map(axis =>
               this.number(
@@ -622,16 +830,16 @@ export class FigureInspector extends localize(i18next)(LitElement) {
         </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'] as const).map(axis => {
@@ -640,22 +848,22 @@ export 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'] as const).map(axis =>
               this.number(axis.toUpperCase(), rotation[axis] ?? 0, value =>
@@ -676,7 +884,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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}
@@ -700,11 +908,11 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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 })
         )}
@@ -712,7 +920,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
       ${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>
           `
@@ -739,15 +947,15 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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>
@@ -759,7 +967,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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 })
@@ -767,14 +975,14 @@ export 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>
@@ -837,37 +1045,37 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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: Event) => {
               const value = (e.target as HTMLSelectElement).value
               this.putMaterial({ preset: (value || undefined) as MaterialPreset | 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>
               `
             )}
@@ -881,7 +1089,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
             .checked=${material.flatShading ?? true}
             @change=${(e: Event) => this.putMaterial({ flatShading: (e.target as HTMLInputElement).checked })}
           />
-          ${i18next.t('label.flat-shading')}
+          ${i18next.t('figure.label.flat-shading')}
         </label>
         <label toggle>
           <input
@@ -889,12 +1097,11 @@ export class FigureInspector extends localize(i18next)(LitElement) {
             .checked=${!!material.transparent}
             @change=${(e: Event) => this.putMaterial({ transparent: (e.target as HTMLInputElement).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
@@ -912,13 +1119,13 @@ export 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>
@@ -934,7 +1141,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
                     `
                   )}
                 </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>
@@ -944,9 +1151,9 @@ export class FigureInspector extends localize(i18next)(LitElement) {
                   @change=${(e: Event) =>
                     this.putMaterial({ emissive: { ...glow, on: (e.target as HTMLInputElement).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')}
             `
           : ''}
 
@@ -977,27 +1184,23 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
     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: Event) => this.put({ sizing: (e.target as HTMLSelectElement).value as never })}>
           ${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: Event) =>
                     this.put({ repeat: { ...repeat, axis: (e.target as HTMLSelectElement).value as Axis } })}
@@ -1008,16 +1211,176 @@ export 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 가 정하는데 화면에는 그 말이 없었다. 그래서 어느 쪽인지 함께 적는다.
+   */
+  private renderRepeatCount(part: FigurePart) {
+    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` 는 부품에 딸린 상태가 아니다). 같은 것을
+   * 계속 고치는 사람이 매번 다시 펴야 하면 접은 것이 되레 방해가 된다.
+   */
+  private help(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>
+      ${shown ? html`<p hint>${i18next.t(key)}</p>` : nothing}
+    `
+  }
+
+  private renderAnchors(part: FigurePart) {
+    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'] as const).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: string) =>
+            `${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: Event) => {
+                  const value = (e.target as HTMLSelectElement).value
+                  const anchor = { ...(part.anchor ?? {}) }
+                  /* 「자동」은 칸을 지우는 것이다 — 빈 값을 넣어 두면 형식이 그것을 값으로 읽는다. */
+                  if (value) {
+                    anchor[axis] = value as AnchorRule
+                  } 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>
+    `
+  }
+
   /**
    * 숫자 칸.
    *