@things-factory/figure-ui 10.1.28 → 10.1.29

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'
 
@@ -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
+      }
+    ]
+  })
+}

package/client/modeller/part-edits.ts

@@ -27,6 +27,13 @@ function freeName(taken: Set<string>, base: string): string {
   }
 }
 
+const round = (value: number) => Math.round(value)
+
+/** 값을 두 끝 사이로 당긴다. 끝이 뒤집혀 있으면(부품이 상자보다 크다) 앞의 끝을 따른다. */
+function clamp(value: number, least: number, most: number): number {
+  return Math.max(least, Math.min(most, value))
+}
+
 /** 이 초안에 부품을 몇 개까지 넣을 수 있는지. 디테일 등급이 결정한다. */
 export function partLimit(draft: FigureDraft): number {
   return PART_LIMIT[(draft.detailLevel ?? 'M') as DetailLevel]
@@ -35,26 +42,58 @@ export function partLimit(draft: FigureDraft): number {
 /**
  * 새 부품 하나를 만든다.
  *
- * 기준 상자의 3분의 1 크기로, **바닥 가운데**에 놓는다. 추가하자마자 화면에 보여야 한다 —
- * 크기 0 으로 놓으면 사용자에게는 아무 일도 일어나지 않은 것으로 보인다.
+ * 기준 상자의 3분의 1 크기다. 추가하자마자 화면에 보여야 한다 — 크기 0 으로 놓으면
+ * 사용자에게는 아무 일도 일어나지 않은 것으로 보인다.
+ *
+ * ## 어디에 놓나 — 고른 부품 **위**다
+ *
+ * 전에는 언제나 바닥 한가운데였다. 첫 부품은 그 자리가 맞지만 둘째부터는 **첫 부품 속에**
+ * 들어간다 — 같은 자리에 같은 크기로 놓이니 화면에는 덩어리 하나뿐이고, 저작자는 무엇이
+ * 늘었는지 못 본다. 「추가하자마자 보여야 한다」는 그때 이미 깨져 있었다.
+ *
+ * 그래서 고른 부품이 있으면 그 부품의 **윗면**에 얹고 발자국을 가운데로 맞춘다. 기계는
+ * 대개 그렇게 쌓인다(받침 → 어깨 → 팔). 관절을 걸 때도 이 자리가 필요하다 — 맞닿는 면이
+ * 실제로 있어야 `seamOrigin` 이 회전 중심을 그 면에서 잡는다.
+ *
+ * 위에 얹으면 기준 상자를 넘는 경우에는 바닥 한가운데로 간다. 넘은 채로 놓으면 발행이
+ * 막히고(`part-outside-base`), 그것을 고치는 일이 「부품을 추가했다」의 대가가 된다.
+ * 가로·세로는 상자 안으로 당긴다 — 고른 부품이 가장자리에 있으면 그 위가 상자 밖이다.
  */
-export function newPart(draft: FigureDraft, parts: PartModel[], primitive: PrimitiveKind): PartModel {
+export function newPart(
+  draft: FigureDraft,
+  parts: PartModel[],
+  primitive: PrimitiveKind,
+  onTopOf?: PartModel
+): PartModel {
   const taken = new Set(parts.map(part => part.name))
 
   const width = Math.max(1, Math.round(draft.width / 3))
   const height = Math.max(1, Math.round(draft.height / 3))
   const depth = Math.max(1, Math.round(draft.depth / 3))
 
+  // 바닥 한가운데 — 고를 부품이 없을 때, 그리고 위가 상자 밖일 때의 자리.
+  const middle = {
+    left: Math.round((draft.width - width) / 2),
+    top: Math.round((draft.height - height) / 2),
+    // `zPos` 는 부피의 밑면이라 0 이 곧 상자 바닥이다.
+    zPos: 0
+  }
+  const above = onTopOf && {
+    left: clamp(Math.round(onTopOf.left + onTopOf.width / 2 - width / 2), 0, draft.width - width),
+    top: clamp(Math.round(onTopOf.top + onTopOf.height / 2 - height / 2), 0, draft.height - height),
+    zPos: Math.round(onTopOf.zPos + onTopOf.depth)
+  }
+  const at = above && above.zPos + depth <= draft.depth ? above : middle
+
   const part: PartModel = {
     type: 'figure-part',
     name: freeName(taken, primitive),
     primitive,
-    left: Math.round((draft.width - width) / 2),
-    top: Math.round((draft.height - height) / 2),
+    left: at.left,
+    top: at.top,
     width,
     height,
-    // 바닥에 붙인다. `zPos` 는 부피의 밑면이라 0 이 곧 상자 바닥이다.
-    zPos: 0,
+    zPos: at.zPos,
     depth,
     // 팔레트 토큰은 기존 부품의 것을 물려받는다 — 토큰이 늘어날 때마다 재질 그룹이 하나씩 는다.
     token: parts[0]?.token ?? 'palette.primary'
@@ -79,8 +118,35 @@ export function newPart(draft: FigureDraft, parts: PartModel[], primitive: Primi
   return part
 }
 
-export function addPart(draft: FigureDraft, parts: PartModel[], primitive: PrimitiveKind): PartModel[] {
-  return [...parts, newPart(draft, parts, primitive)]
+/**
+ * 씬에서 온 부품을 밀리미터로 맞춘다.
+ *
+ * 기즈모는 비율을 곱해서 크기를 낸다 — 420 에 1.72 를 곱하면 722.4180046035418 이고, 손대지
+ * 않은 축도 384.99999999999994 처럼 흔들린다. 저작자가 끈 결과가 소수 넷째 자리까지 남을
+ * 까닭이 없고, 칸에는 「722.4…」로 잘려 보인다. 이 편집기의 다른 길은 전부 정수 밀리미터로
+ * 맞춘다(부품을 새로 놓을 때 · 가운데 맞추기 · 격자 맞추기).
+ *
+ * 크기는 1 밑으로 내려가지 않는다 — 0 이면 부피가 사라지고 배율이 0 으로 나뉜다.
+ */
+export function roundPart(part: PartModel): PartModel {
+  return {
+    ...part,
+    left: round(part.left),
+    top: round(part.top),
+    zPos: round(part.zPos),
+    width: Math.max(1, round(part.width)),
+    height: Math.max(1, round(part.height)),
+    depth: Math.max(1, round(part.depth))
+  }
+}
+
+export function addPart(
+  draft: FigureDraft,
+  parts: PartModel[],
+  primitive: PrimitiveKind,
+  onTopOf?: PartModel
+): PartModel[] {
+  return [...parts, newPart(draft, parts, primitive, onTopOf)]
 }
 
 export function removePart(parts: PartModel[], index: number): PartModel[] {

package/client/pages/figure-modeller-page.ts

@@ -1510,8 +1510,15 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.dirty = true
   }
 
+  /**
+   * 타입을 고친다 — **발행 전까지만**(ADR-0063 결정 4).
+   *
+   * 전에는 저장된 도형이면 무조건 돌아섰다. 그래서 기계가 지은 이름이 그대로 굳었다. 발행된
+   * 뒤에는 문이 거절하므로 여기서도 막는다 — 눌러서 되는 것처럼 보이고 저장에서 실패하면
+   * 저작자가 무엇을 잘못했는지 못 읽는다.
+   */
   private typeChanged(type: string) {
-    if (!type || this.figure?.id) return
+    if (!type || (this.figure?.version ?? 0) > 0) return
     const sanitized = type.replace(/[^A-Za-z0-9_]/g, '_').toUpperCase()
     if (this.draft) this.draft.figureType = sanitized
     this.figure = { ...this.figure, type: sanitized } as Figure
@@ -1595,8 +1602,13 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
   private addPart(primitive: PrimitiveKind) {
     if (!this.draft) return
+    /*
+      고른 부품 위에 얹는다 — 그 자리에서 보이고, 관절을 걸면 맞닿는 면이 회전 중심이 된다.
+      고른 것이 없으면 `newPart` 가 바닥 한가운데로 놓는다.
+    */
+    const onTopOf = this.parts[this.selected]
     // 추가한 것을 바로 수정할 수 있게 선택 상태로 둔다.
-    this.put(edits.addPart(this.draft, this.parts, primitive), this.parts.length)
+    this.put(edits.addPart(this.draft, this.parts, primitive, onTopOf), this.parts.length)
   }
 
   private removePart(index: number) {
@@ -1886,6 +1898,12 @@ export class FigureModellerPage extends FigureModellerPageBase {
       const thumbnail = await captureThumbnail(this.draft, this.parts)
 
       const result = await updateFigure(this.figure.id, {
+        /*
+          타입을 함께 보낸다. 정본 안의 `type` 만 고치고 행을 안 고치면 저장된 JSON 과 행이
+          다른 이름을 말하고, 발행할 때 어느 쪽이 도면에 적히는지가 갈린다. 발행된 뒤라면
+          문이 거절하고 그 사유가 화면에 그대로 뜬다.
+        */
+        type: this.figure.type,
         name: this.figure.name,
         category: this.figure.category,
         tags: this.figure.tags,

package/client/types.ts

@@ -80,6 +80,8 @@ export interface NewFigure {
  * 찾으므로, 바꾸면 그 도면이 빈 화면이 된다.
  */
 export interface FigurePatch {
+  /** 발행 전 초안에서만 받는다 — 발행된 뒤에는 문이 거절한다(ADR-0063 결정 4). */
+  type?: string
   name?: string
   description?: string
   category?: string

package/dist-client/modeller/angle-dial.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 막대 옆에 서는 **각도 눈**. 지금 각이 범위의 어디인지를 한 눈에 보인다.
+ *
+ * ## 왜 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;
+}
+/**
+ * 눈의 모양. 값이 범위를 벗어나면 범위 끝에 세운다 — 밖을 가리키는 바늘은 없는 값을 말한다.
+ */
+export declare function dialShape(min: number, max: number, value: number, radius?: number): DialShape;