@things-factory/figure-ui 10.1.27 → 10.1.29

package/client/modeller/figure-inspector.ts

@@ -20,6 +20,7 @@ import { ANCHOR_RULES, JOINT_TYPES, PART_ROLES, REPEAT_LIMIT, anchorOfPart, repe
 import type {
   AnchorRule,
   Axis,
+  ContractChange,
   FigurePart,
   FigurePlacement,
   JointType,
@@ -34,6 +35,8 @@ import { partToFigure, partFromFigure } from './figure-source.js'
 import type { FigureDraft, PartModel } from './figure-source.js'
 import { canMirror } from './part-edits.js'
 import { jointOf, parentChoices, patchJoint, setJointType } from './joint-edits.js'
+import { baseFittingParts, baseOf, resizeBase } from './base-box.js'
+import type { BaseSize } from './base-box.js'
 
 /** Axis choices for a joint. Written as a direction the author reads, stored as a vector. */
 const JOINT_AXES: readonly { key: string; axis: Vec3 }[] = [
@@ -316,9 +319,60 @@ export class FigureInspector extends localize(i18next)(LitElement) {
         grid-template-columns: repeat(3, 1fr);
         gap: 4px;
       }
+      /*
+        값이 둘인 줄은 셋으로 나누지 않는다. 가동 범위를 세 칸짜리 줄에 넣었더니 칸이 폭의 1/3 이라
+        「최소」라는 말과 -120 이 한 칸에 못 들어가 숫자가 잘렸다.
+      */
+      div[double] {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+      }
+      /* 칸 아래에 붙는 한 줄짜리 행동. 칸과 같은 폭으로 둬야 한 묶음으로 읽힌다. */
+      button[fit] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        width: 100%;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font: inherit;
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-container);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      /* 고친 칸 바로 아래에 붙는 말. 막는 것은 오류 색, 알리는 것은 조용한 색. */
+      p[contract] {
+        display: flex;
+        gap: 4px;
+        margin: 4px 0 0;
+        font-size: 0.68rem;
+        line-height: 1.4;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      p[contract][blocking] {
+        color: var(--md-sys-color-error);
+      }
+      p[contract] md-icon {
+        --md-icon-size: 14px;
+        flex: none;
+      }
+
+      button[fit]:hover {
+        background-color: var(--md-sys-color-surface-container-high);
+      }
+      button[fit] md-icon {
+        --md-icon-size: 15px;
+      }
       div[field] + div[field],
       div[triple] + div[field],
       div[field] + div[triple],
+      div[double] + div[field],
+      div[field] + div[double],
       div[inline-field] + div[inline-field],
       div[inline-field] + div[field],
       div[field] + div[inline-field],
@@ -802,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 = ''
   /** 분류 하나 — 팔레트에서 묶는 기준. */
@@ -815,6 +884,16 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   @property({ type: Object }) draft?: FigureDraft
   /** 초안 위의 부품들. 씬 모델 그대로다. */
   @property({ type: Array }) parts: PartModel[] = []
+
+  /**
+   * 이 고침이 이미 놓인 인스턴스에 무엇을 하나 — 발행된 도형에만 있다(ADR-0063 결정 3).
+   *
+   * 발행 문에서만 말하면 저작자는 열 군데를 고친 뒤에 듣는다. 고치는 칸 옆에서 말한다.
+   */
+  @property({ type: Array }) contract: ContractChange[] = []
+
+  /** 견주지 못한 까닭. 빈 목록과 뜻이 다르다 — 「깨지 않는다」가 아니라 「모른다」다. */
+  @property({ type: String }) contractFailure?: string
   @property({ type: Number }) selected = -1
 
   /** `part` 는 HTMLElement 의 속성(DOMTokenList)이다 — 가리면 형이 어긋난다. */
@@ -976,7 +1055,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
                 ? html`
                     <div vector-row>
                       <label>${i18next.t('figure.label.joint-limits-' + unit)}</label>
-                      <div triple>
+                      <div double>
                         ${this.number(i18next.t('figure.label.joint-limit-min'), joint.limits.min, value =>
                           this.tellDraft(patchJoint(this.draft!, joint.name, { limits: { ...joint.limits!, min: value } }))
                         )}
@@ -1009,9 +1088,73 @@ export class FigureInspector extends localize(i18next)(LitElement) {
     })
   }
 
+  /**
+   * 기준 상자를 고친다 — 부품은 저장되는 자리에 그대로 둔 채(`base-box.ts`).
+   *
+   * 초안과 부품이 함께 바뀌므로 둘을 한 번에 올린다. 따로 올리면 되돌리기가 둘로 갈리고, 그 사이
+   * 한 번만 되돌린 화면은 부품이 반쯤 밀린 모습이 된다.
+   */
+  /**
+   * 기준 상자를 고친 것이 **이미 놓인 인스턴스에 무엇을 하나** — 고친 칸 바로 아래에서 말한다.
+   *
+   * 막는 것과 알리는 것을 가른다. 비율이 달라지면 놓인 것이 찌그러지므로 발행이 막히고, 크기만
+   * 달라지는 것은 실척이 어긋날 뿐이라 알리기만 한다. 까닭은 형식이 적은 것을 그대로 옮긴다 —
+   * 여기서 다시 쓰면 두 벌이 되고 곧 갈린다.
+   */
+  private renderBaseContract() {
+    if (this.contractFailure) {
+      return html`<p contract>
+        <md-icon>help</md-icon>
+        <span>${i18next.t('figure.text.contract-not-compared', { why: this.contractFailure })}</span>
+      </p>`
+    }
+
+    const mine = this.contract.filter(one => one.code === 'base-ratio-changed' || one.code === 'base-size-changed')
+    if (mine.length === 0) return nothing
+
+    return html`${mine.map(
+      one => html`<p contract ?blocking=${one.blocking}>
+        <md-icon>${one.blocking ? 'block' : 'info'}</md-icon>
+        <span><b>${one.message}</b> ${one.why}</span>
+      </p>`
+    )}`
+  }
+
+  private resizeBase(patch: Partial<BaseSize>) {
+    if (!this.draft) return
+
+    const next = resizeBase(this.draft, this.parts, { ...baseOf(this.draft), ...patch })
+    if (next.draft === this.draft) return
+
+    this.dispatchEvent(
+      new CustomEvent('resize-base', {
+        detail: { draft: next.draft, parts: next.parts },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  /** 부품 전부를 감싸는 가장 작은 상자로. 맞출 것이 없으면 아무 일도 안 한다. */
+  private fitBaseToParts() {
+    if (!this.draft) return
+    const fitted = baseFittingParts(this.draft, this.parts)
+    if (fitted) this.resizeBase(fitted)
+  }
+
   private setJointType(part: FigurePart, value: string) {
     if (!this.draft) return
-    this.tellDraft(setJointType(this.draft, part, value === '' ? undefined : (value as JointType)))
+
+    /* 붙은 부품을 함께 준다 — 새 관절이 둘이 맞닿는 자리에 서려면 그쪽 치수를 알아야 한다. */
+    const parent = part.parent ? this.parts.find(one => one.name === part.parent) : undefined
+    this.tellDraft(
+      setJointType(
+        this.draft,
+        part,
+        value === '' ? undefined : (value as JointType),
+        parent ? partToFigure(parent, this.draft) : undefined
+      )
+    )
   }
 
   private setJointAxis(name: string, key: string) {
@@ -1104,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', {
@@ -1147,6 +1290,27 @@ export class FigureInspector extends localize(i18next)(LitElement) {
           ${this.helpHint('figure.text.placement-explained')}
         </div>
 
+        <!--
+          기준 상자 — **고치는 길이 화면에 있어야 한다.** 부품이 이 상자를 넘으면 발행이 막히고,
+          고치는 방법은 상자 숫자를 키우는 것이다(ADR-0044 ④). 그 칸이 없어서 저작자는 넘쳤다는
+          말만 듣고 고칠 자리를 못 찾았다.
+        -->
+        <div field>
+          <label>${i18next.t('figure.label.base-box')}${this.helpButton('figure.text.base-box-explained')}</label>
+          <div triple>
+            ${this.number('X', this.draft?.width ?? 0, value => this.resizeBase({ width: value }), 1)}
+            ${this.number('Y', this.draft?.depth ?? 0, value => this.resizeBase({ depth: value }), 1)}
+            ${this.number('Z', this.draft?.height ?? 0, value => this.resizeBase({ height: value }), 1)}
+          </div>
+          ${this.parts.length > 0
+            ? html`<button fit @click=${() => this.fitBaseToParts()} title=${i18next.t('figure.text.fit-base-explained')}>
+                <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+              </button>`
+            : nothing}
+          ${this.renderBaseContract()}
+          ${this.helpHint('figure.text.base-box-explained')}
+        </div>
+
         <div inline-field>
           <label>${i18next.t('figure.label.category')}${this.helpButton('figure.text.category-explained')}</label>
           <input

package/client/modeller/figure-preview.ts

@@ -8,6 +8,10 @@ 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'
 
 /**
  * 저작 중인 것을 **도면에 놓았을 때**의 모습.
@@ -140,10 +144,45 @@ 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);
+    }
+    /*
+      막대 위에 놓는 단추. 자세를 만든 자리에 있어야 「지금 이것을 기본으로」가 읽힌다.
+      앉힐 것이 있을 때만 나오므로, 늘 서 있는 칸이 아니다.
+    */
+    div[clips] button[pose] {
+      align-self: stretch;
+      padding: 4px 8px;
+      font: inherit;
+      font-size: 0.7rem;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(255, 255, 255, 0.14);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    div[clips] button[pose]:hover {
+      background-color: rgba(255, 255, 255, 0.24);
+    }
     div[clips] span[drive] {
       opacity: 0.6;
       font-size: 0.66rem;
@@ -176,6 +215,14 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   /** 저작 중인 것. 저장 형식으로 받는다 — 도면이 소비하는 것이 이 형식이다. */
   @property({ type: Object }) source?: FigureSource
 
+  /**
+   * 저작 중인 초안. **기본값이 지금 무엇인지 알려고만 쥔다** — 고치지 않는다.
+   *
+   * `source` 로도 파라미터를 읽을 수 있지만, 후보를 미리 볼 때는 `source` 가 후보의 것이고
+   * 초안은 열려 있는 도형의 것이다. 「이 자세를 기본으로」는 열려 있는 도형에만 뜻이 있다.
+   */
+  @property({ type: Object }) draft?: FigureDraft
+
   /**
    * 보기 설정. 저장되지 않는다(`figure-view.ts`).
    *
@@ -226,8 +273,23 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     clips: NonNullable<FigureSource['animations']>,
     parameters: NonNullable<FigureSource['parameters']>
   ) {
+    /*
+      지금 세운 자세를 기본값으로 앉히는 자리. **막대 옆에 둔다** — 자세를 만든 곳이 여기라,
+      값을 읽어 파라미터 칸으로 옮겨 적는 왕복이 없어진다. 앉힐 것이 없으면 아예 안 나온다.
+    */
+    const changes = poseChanges(this.draft, this.giving)
+
     return html`
       <div clips>
+        ${changes.length > 0
+          ? html`<button
+              pose
+              title=${i18next.t('figure.text.pose-as-default-explained')}
+              @click=${() => this.poseAsDefault()}
+            >
+              ${i18next.t('figure.button.pose-as-default')}
+            </button>`
+          : ''}
         ${parameters.map(parameter => {
           const range = parameter.range
           const value = this.giving[parameter.name] ?? parameter.default ?? range?.min ?? 0
@@ -236,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}
@@ -254,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"
@@ -270,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>
+    `
+  }
+
   /**
    * 세워 둔 인스턴스 전부에 같은 값을 준다.
    *
@@ -292,6 +381,18 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     this.tellInstances('parameters', this.giving)
   }
 
+  /**
+   * 세운 자세를 기본값으로 — **셈은 여기서 하지 않는다.**
+   *
+   * 초안을 쥐고 있는 것은 페이지이고, 되돌리기와 「저장 안 됨」도 거기서 매긴다. 여기서
+   * 초안을 만들어 보내면 그 셋이 두 곳으로 갈린다. 민 값만 올린다.
+   */
+  private poseAsDefault(): void {
+    this.dispatchEvent(
+      new CustomEvent('pose-as-default', { detail: { values: { ...this.giving } }, bubbles: true, composed: true })
+    )
+  }
+
   private tellInstances(key: 'clips' | 'parameters', values: Record<string, number>): void {
     for (const component of this.scene?.root?.components ?? []) {
       component.set?.(key, { ...values })
@@ -355,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)
@@ -371,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

@@ -9,7 +9,7 @@ import { ScrollbarStyles } from '@operato/styles'
 import { blocksRelease, compile, costCurveSvg, costOf, scoreOf, sizingReport, validate } from '@hatiolab/figure-model'
 import type { FigureCost, FigureScore, FigureSource } from '@hatiolab/figure-model'
 
-import { capacityOf } from './scene-budget.js'
+import { capacityOf, MEASURED } from './scene-budget.js'
 import { maturityOf } from './maturity.js'
 import type { MaturityAxis } from './maturity.js'
 import type { FigureCapacity } from './scene-budget.js'
@@ -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
   /** 추이 그림을 제 크기로 펼쳤나. */
@@ -507,8 +506,9 @@ export class FigureReport extends localize(i18next)(LitElement) {
    * 직접 답하지 않는다 — 형상이 선언된 한도 안인지를 말할 뿐이다. 그래서 개수를
    * 머리에 올리고 등급은 옆의 badge 로 내린다.
    *
-   * 근거를 함께 낸다. 이 개수의 분모는 실측이 아니라 설계 문서의 목표치이고(미결
-   * D-20), 그 사실이 화면에 없으면 재 본 값처럼 읽힌다.
+   * 근거를 함께 낸다. 묶음으로 갈리는 개수의 분모는 **실측**이고(2026-09-18, Apple M5), 잰
+   * 기계와 날짜를 함께 적는다 — 적지 않으면 어디서나 참인 수로 읽힌다. 삼각형 쪽은 아직 설계
+   * 문서의 목표치라 그렇다고 적는다.
    */
   private renderVerdict() {
     const score = this.score
@@ -544,7 +544,11 @@ export class FigureReport extends localize(i18next)(LitElement) {
             per: capacity.per.toLocaleString(),
             budget: capacity.budget.toLocaleString()
           })}
-          <em>${i18next.t('figure.text.budget-not-measured-yet')}</em>
+          <em>
+            ${capacity.bound === 'groups'
+              ? i18next.t('figure.text.budget-measured-on', { gpu: MEASURED.gpu, on: MEASURED.on })
+              : i18next.t('figure.text.budget-not-measured-yet')}
+          </em>
         </p>
       </section>
     `
@@ -763,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>
 
@@ -780,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)}>
@@ -894,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 = []
@@ -911,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 = []
@@ -933,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 = []
@@ -958,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

@@ -10,7 +10,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import type { FigureSource } from '@hatiolab/figure-model'
+import type { ContractChange, FigureSource } from '@hatiolab/figure-model'
 
 import type { FigureDraft, PartModel } from './figure-source.js'
 import { DEFAULT_VIEW } from './figure-view.js'
@@ -159,6 +159,12 @@ export class FigureSide extends localize(i18next)(LitElement) {
   @property({ type: Object }) draft?: FigureDraft
   @property({ type: Array }) parts: PartModel[] = []
   @property({ type: Object }) source?: FigureSource
+
+  /** 이 고침이 이미 놓인 인스턴스에 무엇을 하나(ADR-0063 결정 3). 발행 전 도형에는 비어 있다. */
+  @property({ type: Array }) contract: ContractChange[] = []
+
+  /** 견주지 못한 까닭. 있으면 화면이 「확인하지 못했다」로 말한다. */
+  @property({ type: String }) contractFailure?: string
   @property({ type: Number }) selected = -1
   /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */
   @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW
@@ -193,11 +199,14 @@ 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}
         .draft=${this.draft}
         .parts=${this.parts}
+        .contract=${this.contract}
+        .contractFailure=${this.contractFailure}
         .selected=${this.selected}
       ></figure-inspector>
 

package/client/modeller/figure-source.ts

@@ -174,6 +174,14 @@ export interface PartModel {
    */
   hidden?: boolean
 
+  /**
+   * 씬이 이것을 **집지 않는다** — 클릭·마퀴·기즈모 어디에도 안 걸린다.
+   *
+   * 저작면에만 서는 것(관절 부채꼴)이 쓴다. 저장 형식에는 없는 칸이라 `toFigureSource` 가
+   * 싣지 않는다.
+   */
+  locked?: boolean
+
   /** 색 토큰 이름 (`palette.primary` 등). */
   token?: string
   /*