@things-factory/figure-ui 10.1.27 → 10.1.28

package/client/graphql/index.ts

@@ -323,6 +323,29 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
 }
 
 /** 발행된 판들 — 최근 것부터 열 개. */
+/**
+ * 직전 발행판의 정본. 한 번도 발행 안 했으면 `undefined`.
+ *
+ * 저작 중에 「이 고침이 이미 놓인 것을 깨나」를 그 자리에서 보여 주려면 견줄 것이 필요하다. 저장
+ * 전 초안은 서버가 모르므로 판정도 화면에서 한다 — 형식의 `contractChanges` 를 같이 쓴다.
+ */
+export async function fetchReleasedSource(id: string): Promise<string | undefined> {
+  const response = await client.query({
+    query: gql`
+      query FigureReleased($id: String!) {
+        figureReleased(id: $id) {
+          version
+          source
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<{ source?: string }>(response, 'figureReleased')?.source ?? undefined
+}
+
 export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {
   const response = await client.query({
     query: gql`

package/client/modeller/base-box.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import type { FigureDraft, PartModel } from './figure-source.js'
+
+/**
+ * 기준 상자를 고친다 — **부품은 제자리에 둔 채.**
+ *
+ * ## 왜 화면에 있어야 하나
+ *
+ * 기준 상자는 도면에 놓일 때의 배율을 정하는 수다(ADR-0044 ①). 부품이 그 상자를 넘으면 발행이
+ * 막히고, 고치는 길은 「상자 숫자 하나를 키우는 것」인데 **화면에 그 칸이 없었다.** 저작자는
+ * 넘쳤다는 말만 듣고 고칠 자리를 못 찾았다.
+ *
+ * ## 상자를 키우면 부품이 움직인다 — 그것을 되돌린다
+ *
+ * 저작면의 부품 자리는 판의 왼쪽 위에서 잰 값이고, 저장 형식의 자리는 **상자의 한가운데**에서 잰
+ * 값이다(`toFigureSource` 가 절반을 뺀다). 그래서 상자만 키우면 한가운데가 옮겨 가고 부품이 전부
+ * 반대로 밀린다. 여기서 늘어난 절반만큼 부품을 함께 옮겨, 저장되는 자리가 한 값도 안 바뀌게 한다.
+ *
+ * ## 「부품에 맞추기」는 한가운데를 지킨다
+ *
+ * 부품을 감싸는 가장 작은 상자를 만들 때, 부품 쪽을 **옮기지 않는다.** 한가운데에서 가장 먼
+ * 부품까지의 거리를 양쪽으로 잡는다. 부품이 한쪽으로 치우쳐 있으면 반대쪽에 여유가 남는데,
+ * 그것이 사실이다 — 치우친 것을 가운데로 끌어오면 저작자가 놓은 자리가 소리 없이 달라지고,
+ * 발행된 도형에서는 문(port)의 자리가 함께 움직인다.
+ *
+ * 높이는 밑면이 바닥이라 한쪽만 늘린다. 바닥 아래로 내려간 부품이 있으면 그 부품은 상자 밖에
+ * 남는다 — 그것을 담으려면 부품을 올려야 하고, 그것은 저작자가 정할 일이다. 발행 관문이 이미
+ * `part-outside-base` 로 말한다.
+ */
+
+export interface BaseSize {
+  /** 저작면의 가로 — 형식의 `base.x`. */
+  width: number
+  /** 저작면의 세로 — 형식의 `base.z`. */
+  height: number
+  /** 높이 — 형식의 `base.y`. */
+  depth: number
+}
+
+/** 상자는 밀리미터 하나보다 작아질 수 없다. 0 이 되면 배율이 0 으로 나뉜다. */
+const LEAST = 1
+
+const round = (value: number) => Math.round(value)
+
+export const baseOf = (draft: FigureDraft): BaseSize => ({
+  width: draft.width,
+  height: draft.height,
+  depth: draft.depth
+})
+
+/** 부품 전부를 담는 가장 작은 상자. 부품이 없으면 잴 것이 없다. */
+export function baseFittingParts(draft: FigureDraft, parts: readonly PartModel[]): BaseSize | undefined {
+  if (parts.length === 0) return undefined
+
+  const middle = { x: draft.width / 2, y: draft.height / 2 }
+  let half = { x: 0, y: 0 }
+  let tallest = 0
+
+  for (const part of parts) {
+    half = {
+      x: Math.max(half.x, Math.abs(part.left - middle.x), Math.abs(part.left + part.width - middle.x)),
+      y: Math.max(half.y, Math.abs(part.top - middle.y), Math.abs(part.top + part.height - middle.y))
+    }
+    tallest = Math.max(tallest, part.zPos + part.depth)
+  }
+
+  return {
+    width: Math.max(LEAST, round(half.x * 2)),
+    height: Math.max(LEAST, round(half.y * 2)),
+    depth: Math.max(LEAST, round(tallest))
+  }
+}
+
+/**
+ * 상자를 이 크기로. 부품은 저장되는 자리가 그대로이도록 함께 옮긴다.
+ *
+ * 달라질 것이 없으면 **받은 것을 그대로 돌려준다** — 고친 것이 없는데 「저장 안 됨」이 붙지 않게.
+ */
+export function resizeBase(
+  draft: FigureDraft,
+  parts: readonly PartModel[],
+  next: BaseSize
+): { draft: FigureDraft; parts: readonly PartModel[] } {
+  const size = {
+    width: Math.max(LEAST, round(next.width)),
+    height: Math.max(LEAST, round(next.height)),
+    depth: Math.max(LEAST, round(next.depth))
+  }
+
+  if (size.width === draft.width && size.height === draft.height && size.depth === draft.depth) {
+    return { draft, parts }
+  }
+
+  const shift = { x: (size.width - draft.width) / 2, y: (size.height - draft.height) / 2 }
+  const moved =
+    shift.x === 0 && shift.y === 0
+      ? parts
+      : parts.map(part => ({ ...part, left: part.left + shift.x, top: part.top + shift.y }))
+
+  return { draft: { ...draft, ...size }, parts: moved }
+}

package/client/modeller/figure-animations.ts

@@ -130,6 +130,18 @@ function freeName(taken: readonly { name: string }[], stem: string): string {
   for (let n = 2; ; n++) if (!used.has(`${stem}-${n}`)) return `${stem}-${n}`
 }
 
+/**
+ * 파라미터 범위에 적히는 단위 — **권하는 것이지 가두는 것이 아니다.**
+ *
+ * 관절이 만드는 파라미터가 `deg` 와 `mm` 을 쓰고(회전과 직선), 그리퍼·문 같은 값은 `%` 를 쓴다.
+ * 속도는 `mm/s` 와 `rpm`, 시간은 `s` 다. 이 여섯이 지금 쓰이는 전부이고, 목록에 없는 말을 적는
+ * 길은 그대로 열려 있다.
+ */
+const PARAMETER_UNITS = ['deg', 'mm', '%', 'mm/s', 'rpm', 's'] as const
+
+/** 목록 대신 손으로 적겠다는 표. `select` 의 값으로 쓴다. */
+const UNIT_TYPE_IT = '__type-it'
+
 @customElement('figure-animations')
 export class FigureAnimations extends localize(i18next)(LitElement) {
   static styles = [
@@ -225,6 +237,21 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
         min-width: 3.2em;
         color: var(--md-sys-color-on-surface-variant);
       }
+      /*
+        칸이 줄어들 줄 알아야 한다. 숫자 입력칸은 제 기본 너비(20자 남짓)를 갖고 있고 flex 는
+        기본 크기 아래로는 안 줄이므로, 범위처럼 한 줄에 셋이 서는 줄은 패널 밖으로 밀려
+        오른쪽 칸이 잘렸다.
+      */
+      div[row] > input {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      /* 단위는 「mm」 정도의 짧은 말이라 숫자 칸보다 좁게 둔다. 고르는 칸도 같은 폭이다. */
+      div[row] > input[unit],
+      div[row] > select[unit] {
+        flex: 0 1 5.5em;
+        min-width: 0;
+      }
 
       /* ── keyframe ─────────────────────────────────────────────────── */
 
@@ -341,6 +368,9 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   @state() private open = ''
   @state() private recipeTarget = ''
 
+  /** 단위를 손으로 적는 중인 파라미터. 목록에 없는 말을 적으려고 연 칸이다. */
+  @state() private typingUnit = new Set<number>()
+
   private get clips(): Clip[] {
     return this.draft?.animations ?? []
   }
@@ -542,14 +572,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
             aria-label="max"
             @change=${(e: Event) => this.setRange(at, { max: Number((e.target as HTMLInputElement).value) || 0 })}
           />
-          <input
-            unit
-            .value=${live(range.unit ?? '')}
-            placeholder="mm"
-            aria-label="unit"
-            title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
-            @change=${(e: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
-          />
+          ${this.renderUnit(at, range.unit ?? '')}
         </div>
         ${backwards ? html`<p warn>${i18next.t('figure.text.range-needs-room')}</p>` : nothing}
 
@@ -1009,6 +1032,56 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     this.patchParameter(at, { name: name.trim() })
   }
 
+  /**
+   * 단위 칸 — **목록이 보이는 채로, 적는 길도 열어 둔다.**
+   *
+   * 처음에는 `datalist` 를 붙였다. 그것은 브라우저가 쥐고 있는 기능이라 **눌러 보기 전에는 목록이
+   * 있는지조차 안 보인다** — 화살표도 없고, 어디에 어떻게 뜨는지도 브라우저가 정한다. 고를 수
+   * 있다는 것을 알리는 것이 이 칸의 목적이므로 `select` 로 바꿨다.
+   *
+   * 형식은 단위를 규칙으로 쓰지 않으므로(표시용 말이다) 목록에 가두지 않는다. 마지막 줄이
+   * 「직접 적기」이고, 목록에 없는 말이 이미 적혀 있으면 처음부터 적는 칸으로 연다.
+   */
+  private renderUnit(at: number, unit: string) {
+    const listed = (PARAMETER_UNITS as readonly string[]).includes(unit)
+    const typing = this.typingUnit.has(at) || (unit !== '' && !listed)
+
+    if (typing) {
+      return html`<input
+        unit
+        .value=${live(unit)}
+        placeholder="mm"
+        aria-label="unit"
+        title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+        @change=${(e: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
+      />`
+    }
+
+    return html`<select
+      unit
+      aria-label="unit"
+      title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+      @change=${(e: Event) => this.chooseUnit(at, (e.target as HTMLSelectElement).value)}
+    >
+      <option value="" ?selected=${unit === ''}>${i18next.t('figure.label.unit-none')}</option>
+      ${PARAMETER_UNITS.map(one => html`<option value=${one} ?selected=${one === unit}>${one}</option>`)}
+      <option value=${UNIT_TYPE_IT}>${i18next.t('figure.label.unit-type-it')}</option>
+    </select>`
+  }
+
+  /** 고른 것을 넣는다. 「직접 적기」는 값이 아니라 **칸을 바꾸는 것**이다. */
+  private chooseUnit(at: number, value: string): void {
+    if (value === UNIT_TYPE_IT) {
+      this.typingUnit = new Set([...this.typingUnit, at])
+      return
+    }
+
+    const next = new Set(this.typingUnit)
+    next.delete(at)
+    this.typingUnit = next
+    this.setRange(at, { unit: value })
+  }
+
   private setRange(at: number, patch: Partial<Parameter['range']>): void {
     const parameter = this.parameters[at]
     if (!parameter) return

package/client/modeller/figure-canvas.ts

@@ -192,6 +192,14 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   /** 지금 고른 부품 이름. 목록에서 고른 것을 캔버스에 알린다. */
   @property({ type: String }) picked?: string
 
+  /**
+   * 관절이 도는 자리를 그리는 부채꼴(`joint-gizmo.ts`). 저작면에만 있고 저장되지 않는다.
+   *
+   * 부품과 같은 길로 세운다 — 씬에 겹쳐 그리는 통로를 따로 뚫지 않는다. `locked` 라 클릭도
+   * 마퀴도 집지 않는다.
+   */
+  @property({ type: Object }) gizmo?: PartModel
+
   /**
    * 보기 전용 — 씬에서 일어난 일을 밖에 알리지 않는다.
    *
@@ -278,6 +286,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
 
     if (changed.has('revision')) this.standing = undefined
     if (changed.has('draft') || changed.has('parts') || changed.has('figureId') || changed.has('revision')) this.standUp()
+    else if (changed.has('gizmo')) this.syncParts()
     if (changed.has('view')) this.applyView()
     if (changed.has('picked')) this.showPicked()
   }
@@ -358,7 +367,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
             없어야 한다: 좌표 모눈과 겹쳐 싸우고 원점 아래쪽을 가린다.
           */
           fillStyle: PAPER,
-          components: this.parts.map(part => ({ ...part }))
+          components: this.standing3d().map(part => ({ ...part }))
         },
         // **편집 모드**로 만든다. 도면의 3D 모델러가 그 모드에서 카메라 시점 버튼 ·
         // 기즈모 모드 · 도움말 · 단축키를 띄운다.
@@ -449,11 +458,17 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
    * 다시 세우면 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로
    * 돌아간다.
    */
+  /** 판에 세울 것 전부 — 저작한 부품과, 있으면 관절 부채꼴. */
+  private standing3d(): PartModel[] {
+    return this.gizmo ? [...this.parts, this.gizmo] : this.parts
+  }
+
   private syncParts() {
     const root = this.scene?.root
     if (!root) return
 
-    const wanted = new Map(this.parts.map(part => [part.name, part]))
+    const all = this.standing3d()
+    const wanted = new Map(all.map(part => [part.name, part]))
     const standing = this.partsOnCanvas()
 
     // 없어진 것을 제거한다
@@ -464,7 +479,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
       }
     }
 
-    for (const part of this.parts) {
+    for (const part of all) {
       const found = standing.get(part.name)
       if (found) {
         /*

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],
@@ -815,6 +869,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 +1040,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 +1073,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) {
@@ -1147,6 +1275,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,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 { poseChanges } from './pose-defaults.js'
+import type { FigureDraft } from './figure-source.js'
 
 /**
  * 저작 중인 것을 **도면에 놓았을 때**의 모습.
@@ -144,6 +146,24 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       align-items: center;
       gap: 8px;
     }
+    /*
+      막대 위에 놓는 단추. 자세를 만든 자리에 있어야 「지금 이것을 기본으로」가 읽힌다.
+      앉힐 것이 있을 때만 나오므로, 늘 서 있는 칸이 아니다.
+    */
+    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 +196,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 +254,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
@@ -292,6 +335,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 })

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'
@@ -507,8 +507,9 @@ export class FigureReport extends localize(i18next)(LitElement) {
    * 직접 답하지 않는다 — 형상이 선언된 한도 안인지를 말할 뿐이다. 그래서 개수를
    * 머리에 올리고 등급은 옆의 badge 로 내린다.
    *
-   * 근거를 함께 낸다. 이 개수의 분모는 실측이 아니라 설계 문서의 목표치이고(미결
-   * D-20), 그 사실이 화면에 없으면 재 본 값처럼 읽힌다.
+   * 근거를 함께 낸다. 묶음으로 갈리는 개수의 분모는 **실측**이고(2026-09-18, Apple M5), 잰
+   * 기계와 날짜를 함께 적는다 — 적지 않으면 어디서나 참인 수로 읽힌다. 삼각형 쪽은 아직 설계
+   * 문서의 목표치라 그렇다고 적는다.
    */
   private renderVerdict() {
     const score = this.score
@@ -544,7 +545,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>
     `

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
@@ -198,6 +204,8 @@ export class FigureSide extends localize(i18next)(LitElement) {
         .figureTags=${this.figureTags}
         .draft=${this.draft}
         .parts=${this.parts}
+        .contract=${this.contract}
+        .contractFailure=${this.contractFailure}
         .selected=${this.selected}
       ></figure-inspector>