@things-factory/figure-ui 10.1.28 → 10.1.31

package/client/{themes → harness-theme}/brand.css

@@ -9,8 +9,19 @@
  * operato-plant 가 같은 문제를 겪고 같은 방식으로 풀었다(`operato-plant/assets/brand.css`).
  * 그 구조를 그대로 따른다 — 값은 여기 한 번만 적고, 앱 팔레트와 하네스가 이 파일을 읽는다.
  *
+ * ── 왜 `themes/` 가 아닌가 ─────────────────────────────────────────────────
+ * `@things-factory/builder` 의 `ThemeOverridePlugin` 이 모든 모듈의 `client/themes/*.css` 를
+ * **파일 이름 하나당 하나만** 골라 테마 묶음에 싣는다(앱이 맨 앞, 나머지는 건너뜀). 그래서
+ * 모듈이 `themes/light.css` 를 두면 앱이 같은 이름을 갖는 순간 통째로 빠지고, 이름을 비켜서
+ * 두면 앞의 것과 **같은 선택자로 md-sys 칸을 덮어** 묶음 순서가 색을 정하게 된다. md-sys 슬롯은
+ * 모듈이 선언하지 않는다 — shell 이 열고 앱이 채운다(ADR-0060 결정 2).
+ *
+ * 이 폴더의 셋은 **하네스가 쓰는 것**이고, `themes` 밖에 있으므로 플러그인이 아예 보지 않는다.
+ * 앱 화면의 색은 앱의 테마 파일이 정한다. 여기 값을 앱 색으로 알고 고치지 말 것 — 지금 이 셋은
+ * navy 이고 앱은 teal 이다(수석 아키텍트가 사용자께 올려 둔 미결이다).
+ *
  * ── 브랜드 색만 여기 둔다 ──────────────────────────────────────────────────
- * 중성색은 여기 없다. 그것은 `client/themes/light.css` 가 갖는다. 여기 있는 것은 **제품을
+ * 중성색은 여기 없다. 그것은 `client/harness-theme/light.css` 가 갖는다. 여기 있는 것은 **제품을
  * 가리키는 색**뿐이고, 그것만 절대 갈라지면 안 된다.
  *
  * ── 밝은 것과 어두운 것을 함께 든다 ────────────────────────────────────────
@@ -37,15 +48,15 @@
    * 고른 부품 색**이다. 틀이 진한 색으로 소리를 내면 캔버스 안의 색을 판단할 수 없다. 그래서
    * 브랜드 색은 깊고 조용하게 두고, 고른 것의 밑줄 · 기본 단추 · 링크에만 좁게 쓴다.
    */
-  --brand-figure: #154473;
+  --figure-brand: #154473;
 
   /*
    * 어두운 면 위에서 쓰는 같은 색. L* 72 · C 0.130.
    *
    * 3D 캔버스의 선택 테두리와 어두운 배경의 강조가 이 값이다. 어두운 면(#12161b) 대비 7.02.
    */
-  --brand-figure-2: #64a9f3;
+  --figure-brand-2: #64a9f3;
 
   /** 아주 옅게 깔 때 — 고른 줄의 바탕. 위 색과 같은 색상각이다. */
-  --brand-figure-wash: #eaf3fd;
+  --figure-brand-wash: #eaf3fd;
 }

package/{dist-client/themes → client/harness-theme}/dark.css

@@ -8,7 +8,7 @@
  *
  * ── 브랜드 색이 밝은 쪽으로 바뀐다 ────────────────────────────────────────
  * `#154473` 은 어두운 바탕에서 대비 1.6 이라 보이지 않는다. 그래서 어두운 면에서는
- * `--brand-figure-2`(#64a9f3)가 브랜드 색이다. 이름이 뜻이고 값은 자리에 따라 다르다 —
+ * `--figure-brand-2`(#64a9f3)가 브랜드 색이다. 이름이 뜻이고 값은 자리에 따라 다르다 —
  * plant · twin 과 같은 규약이다.
  *
  *   [측정] 어두운 면(#12161b) 대비 — #154473 1.60 · #64a9f3 7.02
@@ -40,12 +40,12 @@
   --md-sys-color-on-surface-dim: #7d848d;
 
   /* ── 브랜드 ──────────────────────────────────────────────────────────── */
-  --md-sys-color-primary: var(--brand-figure-2);
+  --md-sys-color-primary: var(--figure-brand-2);
   --md-sys-color-on-primary: #0d1116;
-  --md-sys-color-inverse-primary: var(--brand-figure);
+  --md-sys-color-inverse-primary: var(--figure-brand);
 
   --md-sys-color-primary-container: #1c2b3d;
-  --md-sys-color-on-primary-container: var(--brand-figure-2);
+  --md-sys-color-on-primary-container: var(--figure-brand-2);
 
   --md-sys-color-secondary-container: #1a1f25;
   --md-sys-color-on-secondary-container: #a8afb8;

package/client/{themes → harness-theme}/light.css

@@ -3,8 +3,8 @@
 /*
  * figure 라이트 팔레트 — 이 파일이 이 도구 색의 **정본**이다.
  *
- * 브랜드 색은 `client/themes/brand.css` 가 갖는다. 여기서 쓸 수 있는 이름은 `--brand-figure` ·
- * `--brand-figure-2` · `--brand-figure-wash` 셋이다. 값을 여기 다시 적지 않는다.
+ * 브랜드 색은 `client/harness-theme/brand.css` 가 갖는다. 여기서 쓸 수 있는 이름은 `--figure-brand` ·
+ * `--figure-brand-2` · `--figure-brand-wash` 셋이다. 값을 여기 다시 적지 않는다.
  *
  * ── 이 도구에서 색이 말해야 하는 것 ────────────────────────────────────────
  * **저작자가 고른 부품 색**이다. 화면 한가운데 캔버스가 있고, 거기 놓인 부품의 색을 보고
@@ -52,16 +52,16 @@
   --md-sys-color-on-surface-dim: #6a6f76;
 
   /* ── 브랜드 ──────────────────────────────────────────────────────────── */
-  --md-sys-color-primary: var(--brand-figure);
+  --md-sys-color-primary: var(--figure-brand);
   --md-sys-color-on-primary: #ffffff;
-  --md-sys-color-inverse-primary: var(--brand-figure-2);
+  --md-sys-color-inverse-primary: var(--figure-brand-2);
 
   /*
    * 고른 줄의 바탕. 이것만 유일하게 색이 든 면이고, 그것도 거의 흰색이다(L* 96).
    * 그 위에 오는 글자는 브랜드 색이며 대비 8.90 이다.
    */
-  --md-sys-color-primary-container: var(--brand-figure-wash);
-  --md-sys-color-on-primary-container: var(--brand-figure);
+  --md-sys-color-primary-container: var(--figure-brand-wash);
+  --md-sys-color-on-primary-container: var(--figure-brand);
 
   /*
    * 두 번째 면 — 파스텔을 쓰지 않으므로 무채색이다. 칩과 배지가 이것을 깐다.

package/client/modeller/angle-dial.ts

@@ -0,0 +1,70 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+/**
+ * 막대 옆에 서는 **각도 눈**. 지금 각이 범위의 어디인지를 한 눈에 보인다.
+ *
+ * ## 왜 3D 로는 모자랐나
+ *
+ * 관절이 돌아도 화면이 그대로인 경우가 있다 — 제 축에서 대칭인 부품이 그렇다. 그래서 관절이
+ * 모는 부품에 바늘을 달아 미리보기에서 함께 돌게 했는데(`joint-gizmo.ts` 의 `jointNeedles`),
+ * **미리보기에서는 그 바늘이 4 × 2 픽셀이다**(잰 값: 부품 100mm · 바늘 60 × 12mm · 여덟 대를
+ * 한 화면에 세운 상태). 미리보기는 크기 반응을 보려고 여덟 대를 나란히 놓는 자리라 한 대가
+ * 20 픽셀쯤이고, 그 위의 어떤 표시도 몇 픽셀을 넘지 못한다.
+ *
+ * 각을 읽는 일은 3D 의 배율에서 떼어 놓는다. 눈은 막대 옆 24 픽셀 자리에 서고, 도형이 아무리
+ * 작게 서 있어도 같은 크기로 읽힌다.
+ */
+
+export interface DialShape {
+  /** 가동 범위를 채운 부채꼴. SVG path 의 `d`. */
+  sector: string
+  /** 지금 값이 가리키는 끝점. */
+  needle: { x: number; y: number }
+  centre: { x: number; y: number }
+  radius: number
+}
+
+/** 0 도가 위를 가리키고, 값이 커지면 시계 방향으로 돈다 — 화면의 각과 같은 방향이다. */
+function at(centre: { x: number; y: number }, radius: number, degrees: number) {
+  const rad = (degrees * Math.PI) / 180
+  return {
+    x: +(centre.x + radius * Math.sin(rad)).toFixed(2),
+    y: +(centre.y - radius * Math.cos(rad)).toFixed(2)
+  }
+}
+
+/** 한 바퀴에 가까우면 부채꼴 대신 온전한 원이다. */
+const FULL = 359.9
+
+/**
+ * 눈의 모양. 값이 범위를 벗어나면 범위 끝에 세운다 — 밖을 가리키는 바늘은 없는 값을 말한다.
+ */
+export function dialShape(min: number, max: number, value: number, radius = 9): DialShape {
+  const centre = { x: radius + 1, y: radius + 1 }
+  const span = Math.abs(max - min)
+  const held = Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max))
+
+  if (span >= FULL) {
+    const top = at(centre, radius, 0)
+    const bottom = at(centre, radius, 180)
+    return {
+      sector: `M ${top.x} ${top.y} A ${radius} ${radius} 0 1 1 ${bottom.x} ${bottom.y} A ${radius} ${radius} 0 1 1 ${top.x} ${top.y} Z`,
+      needle: at(centre, radius, held),
+      centre,
+      radius
+    }
+  }
+
+  const from = at(centre, radius, min)
+  const to = at(centre, radius, max)
+  const large = span > 180 ? 1 : 0
+
+  return {
+    sector: `M ${centre.x} ${centre.y} L ${from.x} ${from.y} A ${radius} ${radius} 0 ${large} 1 ${to.x} ${to.y} Z`,
+    needle: at(centre, radius, held),
+    centre,
+    radius
+  }
+}

package/client/modeller/figure-animations.ts

@@ -899,25 +899,25 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   }
 
   /**
-   * 움직이는 부품 예산.
+   * 따로 움직이는 부품 예산.
    *
-   * **넘어도 막지 않는다.** 움직이는 부품은 저마다 단독 묶음이라 draw call 이 늘고 프레임마다
-   * 갱신이 는다 — 그 대가가 수로 보이면 저작자가 아낀다. 랜드마크 설비 하나는 정교해도 되고,
-   * 그 값이 도면 예산에 드러나면 된다.
+   * **넘어도 막지 않는다.** 제 변환을 지는 부품은 저마다 단독 묶음이라 draw call 이 늘고,
+   * 그만큼 한 화면에 함께 세울 수 있는 대수가 준다 — 그 대가가 수로 보이면 저작자가 아낀다.
+   * 랜드마크 설비 하나는 정교해도 되고, 그 값이 도면 예산에 드러나면 된다.
    */
   private renderBudget(): TemplateResult {
     const used = this.movingParts
-    const over = used > LIMITS.animatedParts
+    const over = used > LIMITS.independentParts
 
     return html`
       <section>
-        <h3>${i18next.t('figure.label.budget-animations')}</h3>
+        <h3>${i18next.t('figure.label.budget-independent')}</h3>
         <div budget ?over=${over}>
           <strong>${used}</strong>
-          <span quiet>/ ${LIMITS.animatedParts}</span>
+          <span quiet>/ ${LIMITS.independentParts}</span>
         </div>
-        <p quiet>${i18next.t('figure.text.animated-parts-cost')}</p>
-        ${over ? html`<p warn>${i18next.t('figure.text.animated-parts-over')}</p>` : nothing}
+        <p quiet>${i18next.t('figure.text.independent-parts-cost')}</p>
+        ${over ? html`<p warn>${i18next.t('figure.text.independent-parts-over')}</p>` : nothing}
       </section>
     `
   }

package/client/modeller/figure-canvas.ts

@@ -4,7 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { create, Model } from '@hatiolab/things-scene'
 
-import { gridStep } from './part-edits.js'
+import { gridStep, roundPart } from './part-edits.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 import type { FigureDraft, PartModel } from './figure-source.js'
@@ -536,8 +536,11 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
       const was = this.parts.find(part => part.name === name)
       if (!was) return
 
-      // 씬 모델 그대로 올려 보낸다. 모델러 페이지가 갖고 있는 것도 씬 모델이라 변환할 것이 없다.
-      this.tell('part-changed', { name, part: { ...was, ...changed!.state } as PartModel })
+      /*
+        씬 모델 그대로 올려 보낸다 — 모델러 페이지가 갖고 있는 것도 씬 모델이라 변환할 것이 없다.
+        밀리미터로만 맞춘다: 기즈모는 비율을 곱해 크기를 내므로 소수가 그대로 남는다.
+      */
+      this.tell('part-changed', { name, part: roundPart({ ...was, ...changed!.state } as PartModel) })
     })
   }
 

package/client/modeller/figure-inspector.ts

@@ -856,6 +856,21 @@ export class FigureInspector extends localize(i18next)(LitElement) {
 
   /** 도형의 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 = ''
   /** 분류 하나 — 팔레트에서 묶는 기준. */
@@ -1232,11 +1247,11 @@ export class FigureInspector extends localize(i18next)(LitElement) {
           />
         </div>
         <div inline-field>
-          <label>${i18next.t('figure.label.figure-type')}${this.figureId ? this.helpButton('figure.text.type-name-cannot-change') : nothing}</label>
-          ${!this.figureId
+          <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', { defaultValue: '도형 식별 타입 (예: OHT)' })}
+                placeholder=${i18next.t('figure.text.figure-type-placeholder')}
                 @change=${(e: Event) =>
                   this.dispatchEvent(
                     new CustomEvent('figure-type-change', {

package/client/modeller/figure-preview.ts

@@ -8,6 +8,8 @@ import { create, registerFigure } from '@hatiolab/things-scene'
 
 import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
+import { dialShape } from './angle-dial.js'
+import { jointNeedles } from './joint-gizmo.js'
 import { poseChanges } from './pose-defaults.js'
 import type { FigureDraft } from './figure-source.js'
 
@@ -64,7 +66,7 @@ export const PREVIEW_WAYS: readonly { name: string; axes: readonly ('x' | 'y' |
  *
  * 한동안 배치 기준을 높이로 옮기는 계산을 이 파일이 들고 있었다. 이제 씬이 한다 —
  * `FigureRealObject.effectiveZPos` 가 청사진의 `placement` 와 레이어의 `heights` 로 정한다
- * (ADR-0045, `operato-twin/design/04-decisions.md`). 도면이 그렇게 세우므로 「도면에 놓았을
+ * (ADR-0045, `operato-application/adr/ADR-0045.md`). 도면이 그렇게 세우므로 「도면에 놓았을
  * 때의 모습」을 말하는 이 화면도 그렇게 세워야 한다 — 여기서 `zPos` 를 적으면 **적은 값이
  * 이겨서**, 씬이 무엇을 할지가 이 화면에서만 안 보인다.
  *
@@ -142,10 +144,27 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
     div[clips] label {
       display: grid;
-      grid-template-columns: auto 96px 34px;
+      grid-template-columns: auto 20px 96px 34px;
       align-items: center;
       gap: 8px;
     }
+    /* 각도 눈. 3D 가 아무리 작게 서 있어도 여기서는 같은 크기로 읽힌다. */
+    div[clips] svg[dial] {
+      width: 20px;
+      height: 20px;
+    }
+    div[clips] svg[dial] path {
+      fill: rgba(255, 255, 255, 0.22);
+    }
+    div[clips] svg[dial] line {
+      stroke: var(--md-sys-color-primary, #7cc6ff);
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+    div[clips] svg[dial] circle {
+      fill: none;
+      stroke: rgba(255, 255, 255, 0.35);
+    }
     /*
       막대 위에 놓는 단추. 자세를 만든 자리에 있어야 「지금 이것을 기본으로」가 읽힌다.
       앉힐 것이 있을 때만 나오므로, 늘 서 있는 칸이 아니다.
@@ -279,6 +298,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           return html`
             <label>
               <span>${parameter.label ?? parameter.name} <span drive>${range?.unit ?? ''}</span></span>
+              ${this.renderDial(range, value)}
               <input
                 type="range"
                 min=${range?.min ?? 0}
@@ -297,6 +317,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           return html`
             <label>
               <span>${clip.name} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>
+              <span></span>
               <input
                 type="range"
                 min="0"
@@ -313,6 +334,31 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     `
   }
 
+  /**
+   * 각도 파라미터에만 다는 눈.
+   *
+   * 미리보기의 3D 는 여덟 대를 한 화면에 세우느라 한 대가 20 픽셀쯤이다. 관절이 돌았다는
+   * 표시를 그 안에 그리면 몇 픽셀에 그친다 — 부품에 단 바늘이 4 × 2 픽셀로 나왔다(잰 값).
+   * 각을 읽는 일은 배율에서 떼어 여기에 둔다.
+   *
+   * 각이 아닌 파라미터(밀리미터 · 퍼센트 · 초)에는 안 단다. 눈금이 도는 것이 아니라서
+   * 원으로 그리면 없는 뜻이 생긴다.
+   */
+  private renderDial(range: { unit?: string; min: number; max: number } | undefined, value: number) {
+    if (!range || range.unit !== 'deg') return html`<span></span>`
+
+    const dial = dialShape(range.min, range.max, value)
+    const span = dial.radius * 2 + 2
+
+    return html`
+      <svg dial viewBox="0 0 ${span} ${span}" aria-hidden="true">
+        <path d=${dial.sector}></path>
+        <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>
+        <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>
+      </svg>
+    `
+  }
+
   /**
    * 세워 둔 인스턴스 전부에 같은 값을 준다.
    *
@@ -410,8 +456,14 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
 
     const view = this.view ?? DEFAULT_VIEW
+    /*
+      관절마다 바늘 하나를 붙여 세운다(`joint-gizmo.ts`). 대칭인 부품은 돌아도 그림이 같아서,
+      바늘이 없으면 저작자가 막대를 끝까지 밀고도 관절이 도는 것을 못 본다. 여기서만 붙인다 —
+      저장되는 것도 저작면에 서는 것도 원본 그대로다.
+    */
+    const shown: FigureSource = { ...source, parts: [...source.parts, ...jointNeedles(source)] }
     /* 씬이 이 둘로 인스턴스 높이를 정한다 — 서명에 안 넣으면 다시 세워도 그대로 선다. */
-    const signature = JSON.stringify([source, view.placement, view.ceilingHeight])
+    const signature = JSON.stringify([shown, view.placement, view.ceilingHeight])
     if (this.scene && this.standing === signature) return
 
     const { errors } = validate(source)
@@ -426,7 +478,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     this.driving = {}
 
     try {
-      registerFigure(compile(source) as never)
+      registerFigure(compile(shown) as never)
 
       /*
         도면이 하는 일을 그대로 한다. 컴포넌트에는 타입 이름과 자리·크기만 적는다 —

package/client/modeller/figure-report.ts

@@ -433,7 +433,6 @@ export class FigureReport extends localize(i18next)(LitElement) {
   @state() private score?: FigureScore
   @state() private curve = ''
   /** 1만 개를 놓았을 때. 저작자가 실제로 궁금한 숫자다. */
-  @state() private many?: FigureCost
   /** 몇 개까지 놓을 수 있나. 이 패널의 머리다. */
   @state() private capacity?: FigureCapacity
   /** 추이 그림을 제 크기로 펼쳤나. */
@@ -768,12 +767,6 @@ export class FigureReport extends localize(i18next)(LitElement) {
           <dt>${i18next.t('figure.label.triangles')}</dt>
           <dd>${cost.triangles.toLocaleString()}</dd>
 
-          <dt>${i18next.t('figure.label.triangles-at-100')}</dt>
-          <dd>${cost.at.triangles.toLocaleString()}</dd>
-
-          <dt>${i18next.t('figure.label.draw-calls-at-100')}</dt>
-          <dd>${cost.at.drawCalls.toLocaleString()}</dd>
-
           <dt>${i18next.t('figure.label.distinct-shapes')}</dt>
           <dd>${cost.distinctShapes}</dd>
 
@@ -785,33 +778,26 @@ export class FigureReport extends localize(i18next)(LitElement) {
   }
 
   /**
-   * 재활용 추이 — 「많이 놓으면 어떻게 되나」에 답한다.
+   * 재활용 추이 그림.
+   *
+   * **「몇 개 놓으면 얼마」를 숫자로 적지 않는다.** 놓는 개수는 값을 치르지 않는다 —
+   * 한 화면에 보이는 개수 × 그 도형의 묶음 수가 치른다(실측 2026-09-18, ADR-0051 ③).
+   * 전에는 여기에 「100개 기준 draw call」 · 「1만개 기준」을 적었고, 그 수는 실제로 드는
+   * 값과 어긋났다. 답은 위의 성숙도 칸이 한다 — 잰 기계와 날짜를 달고 「한 화면에 몇 대」를
+   * 말한다.
    *
    * ## 그림을 사이드바에 밀어 넣지 않는다
    *
    * `costCurveSvg` 의 자연 크기는 680x380 이고 글자가 11px 다. 300px 칸에서
    * width:100% 로 줄이면 글자가 4px 이 되어 **아무것도 읽을 수 없다** — 화면을 띄워
-   * 보고서야 드러났다. 읽을 수 없는 그림은 없는 것과 같으므로, 사이드바에는 저작자가
-   * 실제로 궁금한 숫자(1만 개일 때)를 두고 그림은 선택해서 제 크기로 본다.
+   * 보고서야 드러났다. 그림은 선택해서 제 크기로 본다.
    */
   private renderCurve() {
-    const many = this.many
-    if (!many && !this.curve) return nothing
+    if (!this.curve) return nothing
 
     return html`
       <section>
         <h3>${i18next.t('figure.label.reuse-trend')}</h3>
-        ${many
-          ? html`
-              <dl metrics>
-                <dt>${i18next.t('figure.label.triangles-at-10k')}</dt>
-                <dd>${many.at.triangles.toLocaleString()}</dd>
-
-                <dt>${i18next.t('figure.label.draw-calls-at-10k')}</dt>
-                <dd>${many.at.drawCalls.toLocaleString()}</dd>
-              </dl>
-            `
-          : nothing}
         ${this.curve
           ? html`
               <button expand @click=${() => (this.expanded = true)}>
@@ -899,7 +885,6 @@ export class FigureReport extends localize(i18next)(LitElement) {
     if (!source) {
       this.cost = undefined
       this.score = undefined
-      this.many = undefined
       this.capacity = undefined
       this.curve = ''
       this.errors = []
@@ -916,7 +901,6 @@ export class FigureReport extends localize(i18next)(LitElement) {
     if (this.bare) {
       this.cost = undefined
       this.score = undefined
-      this.many = undefined
       this.capacity = undefined
       this.curve = ''
       this.errors = []
@@ -938,7 +922,6 @@ export class FigureReport extends localize(i18next)(LitElement) {
       // 형식을 어겼으면 컴파일이 던진다. 셈을 비우고 오류만 보여 준다.
       this.cost = undefined
       this.score = undefined
-      this.many = undefined
       this.capacity = undefined
       this.curve = ''
       this.sizing = []
@@ -963,9 +946,9 @@ export class FigureReport extends localize(i18next)(LitElement) {
       blocking: finding.code === 'sizing-splits'
     }))
 
-    this.cost = costOf(blueprint, 100)
+    /* 개수 인자는 `cost.at` 만 정한다 — 그 칸을 화면에서 뺐으니 기본값 그대로 둔다. */
+    this.cost = costOf(blueprint)
     // 1만 개는 figure-model 에 다시 묻는다 — 화면이 곱셈으로 짐작하지 않는다.
-    this.many = costOf(blueprint, 10000)
     this.score = scoreOf(blueprint)
     this.capacity = capacityOf(this.cost)
 

package/client/modeller/figure-side.ts

@@ -199,6 +199,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
       <figure-inspector
         ?off=${this.tab !== 'properties'}
         .figureId=${this.figureId}
+        .figureVersion=${this.figureVersion}
         .figureName=${this.figureName}
         .figureCategory=${this.figureCategory}
         .figureTags=${this.figureTags}

package/client/modeller/joint-gizmo.ts

@@ -2,7 +2,7 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import type { FigureJoint, FigurePart } from '@hatiolab/figure-model'
+import type { FigureJoint, FigurePart, FigureSource } from '@hatiolab/figure-model'
 
 import { partFromFigure } from './figure-source.js'
 import type { FigureDraft, PartModel } from './figure-source.js'
@@ -116,3 +116,65 @@ export function gizmoPart(joint: FigureJoint, child: PartModel | undefined, draf
 
   return { ...partFromFigure(part, draft), locked: true }
 }
+
+/*
+ * 미리보기에서 **관절이 돌았다는 것**을 보이게 하는 바늘.
+ *
+ * 상자 위에 원기둥을 얹고 그 축으로 돌리면 화면이 그대로다 — 원기둥은 제 축에서 대칭이라
+ * 돌아도 같은 그림이다. 저작자는 막대를 76도까지 밀고도 아무것도 못 보고 「관절이 안 먹는다」로
+ * 읽는다. 값은 제대로 갔고 부품도 돌았는데 볼 것이 없었을 뿐이다.
+ *
+ * 그래서 관절이 모는 부품에 얇은 막대 하나를 **자식으로** 붙인다. 부모가 관절의 자식이라
+ * 관절이 도는 만큼 같이 돌고, 축에서 비켜나 있어 대칭인 부품에서도 움직임이 보인다. 매 프레임
+ * 무엇을 다시 그릴 일도, 막대를 밀 때마다 씬을 다시 세울 일도 없다.
+ *
+ * **미리보기에만 붙인다.** 저장 형식에도, 저작면에도, 카드 그림에도 안 들어간다 — 미리보기는
+ * 크기 반응을 보는 작업대이고 거기서만 쓰는 표시다.
+ */
+
+/** 미리보기에만 있는 이름. 저장 형식에는 없다. */
+export const NEEDLE = '__needle-'
+
+/**
+ * 막대의 굵기 — **길이에 견주어** 잡는다.
+ *
+ * 8mm 로 고정했더니 미리보기에서 안 보였다. 미리보기는 여덟 대를 한 화면에 세우는 자리라
+ * 100mm 짜리 부품이 화면에서 20 픽셀쯤이고, 그 위의 8mm 는 한 픽셀이 안 된다. 세어 보면
+ * 막대는 분명히 서 있는데(부품 둘짜리 표본의 인스턴스에 mesh 셋 · 삼각형 72) 눈에 안 띈다.
+ */
+const needleThick = (radius: number) => Math.max(6, Math.round(radius / 5))
+
+/** 축에서 비켜날 방향. 그 축과 직각이어야 도는 것이 보인다. */
+const ASIDE: Record<string, 'x' | 'z'> = { x: 'z', y: 'x', z: 'x' }
+
+export function jointNeedles(source: FigureSource): FigurePart[] {
+  const byName = new Map(source.parts.map(part => [part.name, part]))
+
+  return (source.joints ?? []).flatMap(joint => {
+    const axis = axisName(joint.axis)
+    if (!axis) return []
+
+    const child = byName.get(joint.child)
+    const size = child?.transform.size
+    const reach = size ? Math.max(size.x, size.y, size.z) : 0
+    const radius = Math.max(60, Math.round(reach * 0.6))
+    const aside = ASIDE[axis.slice(1)]!
+    const thick = needleThick(radius)
+
+    return [
+      {
+        name: `${NEEDLE}${joint.name}`,
+        primitive: 'cube' as const,
+        transform: {
+          position: { ...joint.origin, [aside]: joint.origin[aside] + radius / 2 },
+          size:
+            aside === 'x'
+              ? { x: radius, y: thick, z: thick }
+              : { x: thick, y: thick, z: radius }
+        },
+        material: { token: 'palette.accent' },
+        parent: joint.child
+      }
+    ]
+  })
+}