@things-factory/figure-ui 10.1.45 → 10.1.47

package/test/v3-live.test.ts

@@ -0,0 +1,99 @@
+/*
+ * **끄는 동안 자연스럽게** (사용자 2026-09-24: 「조작값도 인풋값이 변화하는 과정도 모두 이벤트처리해서 편집기에서도
+ * 자연스럽게 움직이면 좋겠다」). 끄는 중간값은 그 자세로 바로 그리고 아무것도 기록하지 않는다; 놓을 때 한 번 기록한다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { addV3Box, applyV3Authoring, createV3Asset } from '@hatiolab/figure-model'
+
+import { liveOverridesOf, livePartsOf, NOTHING_LIVE, scrubbed, scrubStep } from '../client/modeller/v3-live.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+
+const slider = () => {
+  let asset = createV3Asset('Slider')
+  asset = addV3Box(asset, { id: 'block', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } })
+  return applyV3Authoring(asset, { kind: 'add-motion', part: 'block', motion: { kind: 'slide', axis: 'x' }, state: { id: 'shift', unit: 'mm', min: 0, max: 60, start: 0 } })
+}
+
+test('끄는 값으로 그 자세를 바로 그린다 — 도형은 그대로', () => {
+  const asset = slider()
+  const before = JSON.stringify(asset)
+  const parts = livePartsOf(asset, { values: { shift: 45 } })!
+  assert.equal(Math.round(parts.find(p => p.id === 'block')!.pose.t[0]!), 45)
+  assert.equal(JSON.stringify(asset), before, '아무것도 기록하지 않는다')
+  assert.equal(livePartsOf(asset, NOTHING_LIVE), null, '끄는 것이 없으면 평소대로')
+})
+
+test('속성창의 설계 값도 치는 동안 그린다 — 크기가 따라 변하고 도형은 그대로', () => {
+  const asset = slider()
+  const before = JSON.stringify(asset)
+  const size = (parts: { id: string; shape?: unknown }[]) => JSON.stringify((parts.find(p => p.id === 'block') as { shape: unknown }).shape)
+  const now = livePartsOf(asset, { values: { 'block.size.x': 100 } })!
+  const wider = livePartsOf(asset, { values: { 'block.size.x': 300 } })!
+  assert.notEqual(size(wider), size(now), '크기 300 이 바로 그려진다')
+  assert.equal(JSON.stringify(asset), before, '기록은 놓을 때')
+})
+
+test('설계 값과 자세를 가른다 — 모르는 이름은 버린다', () => {
+  assert.deepEqual(liveOverridesOf(slider(), { shift: 10, 'block.size.x': 5, nothing: 1 }), { design: { 'block.size.x': 5 }, state: { shift: 10 } })
+})
+
+test('치는 도중 도형이 못 받는 값이면 지금 모습을 그린다 — 지어낸 도형을 보이지 않는다', () => {
+  assert.equal(livePartsOf(slider(), { values: { 'block.size.x': -5 } }), null)
+})
+
+test('재질의 끄는 값(발광)도 그린다 — 편집 하나를 기록 없이 적용해서', () => {
+  const asset = slider()
+  const glowing = livePartsOf(asset, {
+    values: {},
+    edit: { kind: 'set-material', target: 'block', material: { token: 'palette.primary', emissive: { token: 'palette.primary', intensity: 0.5, on: true } } }
+  })!
+  assert.equal(glowing.find(p => p.id === 'block')!.material.emissive?.intensity, 0.5)
+  assert.equal(asset.appearance[0]!.material.emissive, undefined, '도형은 그대로')
+})
+
+test('이름표를 끌면 값이 크기에 맞는 걸음으로 움직인다 — 각도 1°, 길이는 자릿수에 따라, Shift 는 열 배 곱게', () => {
+  assert.equal(scrubStep('deg', 30), 1)
+  assert.equal(scrubStep('mm', 50), 1)
+  assert.equal(scrubStep('mm', 12000), 100)
+  assert.equal(scrubStep('mm', 1200), 10)
+  assert.equal(scrubStep('mm', 1200, true), 1)
+  assert.equal(scrubStep('ratio', 0.4), 0.01)
+  assert.equal(scrubbed(1200, 7, 10), 1270)
+  assert.equal(scrubbed(0.4, 3, 0.01), 0.43, '0.43000000000000005 가 아니다')
+})
+
+test('속성창 숫자 칸은 치는 동안 알리고, 이름표를 끌 수 있다 — 기록은 change 에서', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  assert.ok(editor.includes('@input=${(e: Event) => this.typing(group.cells[axis] as never, e)}'))
+  assert.ok(editor.includes('@input=${(e: Event) => this.typing(field as never, e)}'))
+  assert.ok(editor.includes('@pointerdown=${(e: PointerEvent) => this.scrub(group.cells[axis] as never, e, unavailable)}'))
+  for (const event of ['@v3-state-live=', '@v3-states-live=', '@v3-part-live=']) assert.ok(editor.includes(event), event)
+  assert.ok(editor.includes('livePartsOf(asset as V3Asset, this.live)') && editor.includes('.parts=${this.drawnParts(view.geometry, asset)}'), '캔버스가 끄는 값을 그린다')
+  const run = editor.slice(editor.indexOf('  private run(action'), editor.indexOf('  private hold('))
+  assert.ok(run.includes('this.live = NOTHING_LIVE'), '기록하거나 거절되면 끄는 값을 버린다')
+  const material = read('../client/modeller/figure-v3-material.ts')
+  assert.ok(material.includes('@input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}'))
+})
+
+test('슬라이더와 클립 막대는 끄는 동안 알리고, 놓을 때 한 번 기록한다', () => {
+  const controls = read('../client/modeller/figure-v3-controls.ts')
+  assert.ok(controls.includes('@input=${(e: Event) => this.drag(c, number(e))}') && controls.includes('@change=${(e: Event) => this.try(c, number(e))}'))
+  assert.ok(controls.includes("new CustomEvent('v3-state-live'"))
+  const clips = read('../client/modeller/figure-v3-clips.ts')
+  assert.ok(clips.includes('@input=${(e: Event) => this.scrub(clip, number(e), true)}'))
+  assert.ok(clips.includes("new CustomEvent('v3-states-live'"))
+})
+
+test('클립 트랙의 머리는 이름 한 줄, 그 아래 반복 방식과 지우기 — 이름이 한 글자씩 쌓이지 않는다', () => {
+  const clips = read('../client/modeller/figure-v3-clips.ts')
+  const head = clips.slice(clips.indexOf('    div[track-head] {'), clips.indexOf('    div[keys] {'))
+  assert.ok(head.includes('display: grid;') && !head.includes('display: flex;'), '공통 스타일의 폭 100% 가 이름을 누르지 않는다')
+  assert.ok(head.includes('grid-column: 1 / -1;'), '이름은 제 줄')
+  assert.ok(head.includes('width: 30px;'), '지우기는 작은 버튼')
+})
+

package/test/v3-material.test.ts

@@ -66,3 +66,9 @@ test('자산에 없는 색 역할은 그 색을 함께 보낸다 — 새 도형
   assert.match(material, /this\.palette\[token\] === undefined && offered\[token\] !== undefined/)
   assert.match(material, /\.\.\.\(Object\.keys\(palette\)\.length \? \{ palette \} : \{\}\)/)
 })
+
+test('분할 수는 V2 처럼 — 흔한 넷은 다각형 윤곽과 삼각형 수로, 나머지는 접어 둔다', () => {
+  const source = readFileSync(fileURLToPath(new URL('../client/modeller/figure-v3-material.ts', import.meta.url)), 'utf8')
+  assert.ok(source.includes('SEGMENT_PRESETS.slice(0, 4).map(') && source.includes('${silhouette(preset)}'))
+  assert.ok(source.includes('<details free') && source.includes('SEGMENT_PRESETS.slice(4)'))
+})

package/test/v3-maturity.test.ts

@@ -0,0 +1,268 @@
+/*
+ * **V3 성숙도 탭은 V2 리포트를 V3 수로 다시 보인다** (사용자 2026-09-24: 「분석부분도 많이 부족하고, 왜 이렇게 너프되었는지」).
+ *
+ * V2 리포트(figure-report.ts)는 개수 · 등급과 눈금 · 등급을 정한 한도 · 여섯 축 radar · 한도 막대 · 그리는 비용 · 재사용
+ * 추이를 보였다. 여기서는 그 수들이 V3 자산에서 V2 의 셈 그대로 나오는지, V3 렌더러가 실제로 나눠 쓰는 것을 세는지,
+ * 화면이 그 순서와 말로 그리는지를 본다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { addV3Box, addV3Primitive, applyV3Authoring, compileV3Asset, createV3Asset, LIMITS, v3ScoreOf } from '@hatiolab/figure-model'
+import type { V3Asset } from '@hatiolab/figure-model'
+import { acquireV3Geometry, releaseV3Geometry } from '@hatiolab/things-scene'
+
+import {
+  BOARD_ASSETS,
+  budgetOf,
+  curveLayout,
+  decadeSteps,
+  GRADE_SCALE,
+  gradeOf,
+  V3_BUDGET_KEYS,
+  v3ReportOf
+} from '../client/modeller/v3-maturity.ts'
+import { capacityFrom } from '../client/modeller/scene-budget.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+const verdict = read('../client/modeller/figure-v3-verdict.ts')
+const maturity = read('../client/modeller/v3-maturity.ts')
+
+/** An asset with the given tokens in its palette, so boxes can differ in colour. */
+function withPalette(...tokens: string[]): V3Asset {
+  const asset = createV3Asset('Probe')
+  for (const token of tokens) asset.palette[token] = '#336699'
+  return asset
+}
+
+const cube = (id: string, x: number, token = 'palette.primary', extra: Record<string, unknown> = {}) => ({
+  id,
+  size: { x: 100, y: 100, z: 100 },
+  position: { x, y: 50, z: 0 },
+  material: { token, ...extra }
+})
+
+test('부품이 없으면 리포트가 없다 — 0 으로 그리지 않는다', () => {
+  assert.equal(v3ReportOf(createV3Asset('Empty')), undefined)
+})
+
+test('등급은 V2 의 눈금이다 — 한도의 절반 A · 4분의 3 B · 한도 C · 넘치면 D', () => {
+  assert.deepEqual(GRADE_SCALE, [
+    ['A', 0.5],
+    ['B', 0.75],
+    ['C', 1]
+  ])
+  assert.equal(gradeOf(0.5), 'A')
+  assert.equal(gradeOf(0.51), 'B')
+  assert.equal(gradeOf(0.75), 'B')
+  assert.equal(gradeOf(1), 'C')
+  assert.equal(gradeOf(1.01), 'D')
+})
+
+test('등급은 figure-model 의 v3ScoreOf 그대로다 — 목록과 이 탭이 한 셈으로 매긴다', () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, cube('a', 0))
+  const one = v3ReportOf(asset)!
+  assert.deepEqual(one.score, v3ScoreOf(asset))
+  assert.deepEqual(V3_BUDGET_KEYS, one.score.budgets.map(b => b.key), '화면이 말을 찾는 키와 셈의 키가 같다')
+})
+
+test('draw call 한도 3 은 없다 — 한 화면 166 대 목표에 견준다(수석 아키텍트 판정 09-24)', () => {
+  let asset = createV3Asset('Probe')
+  for (let i = 0; i < 4; i++) asset = addV3Box(asset, cube(`b${i}`, i * 200))
+  const four = v3ReportOf(asset)!
+  assert.equal(four.score.grade, 'A', '예전 한도 3 으로는 D 였다')
+  const groups = four.score.budgets.find(b => b.key === 'groups')!
+  assert.equal(groups.limit, LIMITS.groupsOnScreen / LIMITS.screenInstances)
+  assert.ok(four.capacity.instances >= 2 * LIMITS.screenInstances, 'A 는 목표의 두 배가 들어간다는 뜻')
+})
+
+test('감춘 부품은 그리지 않으므로 한도에 들지 않는다 — v3CostOf 와 같은 셈', () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, cube('a', 0))
+  asset = addV3Box(asset, cube('b', 200))
+  const report = v3ReportOf(asset)!
+  assert.equal(report.score.budgets.find(b => b.key === 'groups')!.used, report.cost.groups)
+  assert.equal(report.capacity.instances, capacityFrom(report.cost.groups, report.cost.triangles)!.instances)
+})
+
+test('투명 재질은 서로 다른 재질로 센다 — 둘이면 한도 1 을 넘고, 그것이 등급을 정한다', () => {
+  let asset = withPalette('glass.a', 'glass.b')
+  asset = addV3Box(asset, cube('a', 0, 'glass.a', { transparent: true }))
+  asset = addV3Box(asset, cube('b', 200, 'glass.b', { transparent: true }))
+  const report = v3ReportOf(asset)!
+  assert.equal(report.score.budgets.find(b => b.key === 'transparent')!.used, 2)
+  assert.equal(report.score.tightest.key, 'transparent')
+  assert.equal(report.score.grade, 'D')
+
+  let same = withPalette('glass.a')
+  same = addV3Box(same, cube('a', 0, 'glass.a', { transparent: true }))
+  same = addV3Box(same, cube('b', 200, 'glass.a', { transparent: true }))
+  assert.equal(v3ReportOf(same)!.score.budgets.find(b => b.key === 'transparent')!.used, 1, '같은 재질은 하나로 나눠 쓴다')
+})
+
+test('상태를 따라 움직이는 부품을 센다 — V2 의 「따로 움직이는 부품」', () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, cube('base', 0))
+  asset = addV3Box(asset, cube('arm', 200))
+  assert.equal(v3ReportOf(asset)!.score.budgets.find(b => b.key === 'independent')!.used, 0, '전제: 움직임이 없으면 0')
+
+  asset = applyV3Authoring(asset, {
+    kind: 'add-motion',
+    part: 'arm',
+    motion: { kind: 'turn', axis: 'y' },
+    state: { id: 'arm.turn', unit: 'deg', min: 0, max: 90 }
+  })
+  assert.equal(v3ReportOf(asset)!.score.budgets.find(b => b.key === 'independent')!.used, 1, '도는 팔 하나')
+})
+
+test('서로 다른 형상은 things-scene 이 정점 버퍼를 나눠 쓰는 수와 같다', () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, cube('a', 0))
+  asset = addV3Box(asset, cube('b', 200))
+  asset = addV3Box(asset, { id: 'c', size: { x: 100, y: 300, z: 100 }, position: { x: 400, y: 150, z: 0 } })
+  asset = addV3Primitive(asset, { id: 'd', kind: 'cylinder', dimensions: { radius: 40, length: 100 }, position: { x: 600, y: 50, z: 0 } })
+  asset = addV3Primitive(asset, { id: 'e', kind: 'cylinder', dimensions: { radius: 40, length: 100 }, position: { x: 800, y: 50, z: 0 } })
+  asset = addV3Primitive(asset, { id: 'f', kind: 'cylinder', dimensions: { radius: 40, length: 100 }, position: { x: 1000, y: 50, z: 0 } })
+  // The same cylinder, rounder: another vertex buffer in the renderer, so another shape here.
+  asset.appearance.find(look => look.target === 'f')!.segments = 24
+  const report = v3ReportOf(asset)!
+
+  const bodies = compileV3Asset(asset).evaluate().geometry
+  const held = bodies.map(body => acquireV3Geometry((body as { shape: never }).shape, (body as { segments?: number }).segments))
+  try {
+    assert.equal(report.distinctShapes, new Set(held).size, '렌더러의 은행과 같은 키')
+  } finally {
+    held.forEach(geometry => releaseV3Geometry(geometry))
+  }
+  assert.equal(report.distinctShapes, 4, '같은 상자 둘 · 키 큰 상자 · 같은 원기둥 둘 · 분할이 다른 원기둥')
+  assert.deepEqual(report.reuse, { distinct: 4, parts: 6, saved: 2 })
+  assert.equal(report.axes.find(axis => axis.key === 'reuse')!.ratio, 1 - 4 / 6)
+})
+
+test('여섯 축 — V2 의 순서, 잴 수 없는 둘은 비율 없이 까닭을 단다', () => {
+  let asset = withPalette('palette.accent')
+  asset = addV3Box(asset, cube('a', 50))
+  asset = addV3Box(asset, cube('b', 150, 'palette.accent'))
+  const axes = v3ReportOf(asset)!.axes
+
+  assert.deepEqual(
+    axes.map(axis => axis.key),
+    ['scale', 'consistency', 'reuse', 'detail', 'reactive', 'readable']
+  )
+  const byKey = Object.fromEntries(axes.map(axis => [axis.key, axis]))
+  assert.equal(byKey.detail!.ratio, undefined)
+  assert.equal(byKey.detail!.blocked, 'figure.text.maturity-blocked-no-detail-level', '디테일 등급은 V3 에 없다(ADR-0087)')
+  assert.equal(byKey.reactive!.ratio, undefined)
+  assert.equal(byKey.reactive!.blocked, 'figure.text.maturity-blocked-no-binding')
+
+  assert.equal(byKey.scale!.ratio, 1, `두 부품이면 ${BOARD_ASSETS} 개 목표를 넘긴다`)
+  assert.equal(byKey.consistency!.ratio, 1, '재질 둘은 한도 셋 안이다')
+  // Two colours, each half of the footprint, no background: entropy ln 2 over the ceiling ln 4.
+  assert.equal(byKey.readable!.ratio, Math.log(2) / Math.log(LIMITS.distinctMaterials + 1))
+  assert.equal(byKey.readable!.reading, '2')
+})
+
+test('재질이 한도를 넘으면 일관성이 한 칸 내려간다 — V2 의 셋 중 하나', () => {
+  let asset = withPalette('t1', 't2', 't3')
+  asset = addV3Box(asset, cube('a', 0))
+  asset = addV3Box(asset, cube('b', 200, 't1'))
+  asset = addV3Box(asset, cube('c', 400, 't2'))
+  asset = addV3Box(asset, cube('d', 600, 't3'))
+  const report = v3ReportOf(asset)!
+  assert.equal(report.distinctMaterials, 4)
+  const consistency = report.axes.find(axis => axis.key === 'consistency')!
+  assert.equal(consistency.ratio, 2 / 3)
+  assert.equal(consistency.readingKey, 'figure.text.maturity-consistency-faults')
+})
+
+test('한 색이 발자국을 다 덮으면 식별성은 0 이다 — 위에서 보면 한 덩어리', () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, { id: 'slab', size: { x: 400, y: 20, z: 400 }, position: { x: 0, y: 10, z: 0 } })
+  asset = addV3Box(asset, { id: 'under', size: { x: 100, y: 5, z: 100 }, position: { x: 0, y: 2.5, z: 0 } })
+  assert.equal(v3ReportOf(asset)!.axes.find(axis => axis.key === 'readable')!.ratio, 0, '아래 부품은 가려진다')
+})
+
+test('추이 — 1 에서 1만까지 1·2·5, 삼각형과 draw call 은 오르고 정점 버퍼와 재질은 평평하다', () => {
+  assert.deepEqual(decadeSteps(1, 100), [1, 2, 5, 10, 20, 50, 100])
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, cube('a', 0))
+  asset = addV3Box(asset, cube('b', 200))
+  const report = v3ReportOf(asset)!
+  const last = report.curve[report.curve.length - 1]!
+  assert.equal(report.curve[0]!.instances, 1)
+  assert.equal(last.instances, 10000)
+  assert.equal(last.triangles, report.cost.triangles * 10000)
+  assert.equal(last.drawCalls, report.cost.groups * 10000)
+  assert.ok(report.curve.every(p => p.geometries === report.distinctShapes && p.materials === report.distinctMaterials))
+
+  const layout = curveLayout(report.curve)!
+  assert.deepEqual(layout.lines.map(line => [line.key, line.flat, line.dashed]), [
+    ['triangles', false, false],
+    ['drawCalls', false, false],
+    ['geometries', true, false],
+    ['materials', true, true]
+  ])
+  assert.equal(layout.overlap, 1, '형상 하나 · 재질 하나 — 평평한 선이 겹친다고 적는다')
+  assert.deepEqual(layout.xTicks.map(t => t.label), ['1', '10', '100', '1k', '10k'])
+})
+
+test('화면은 V2 리포트의 차례로 그린다 — 개수 · 축 · 한도 · 그리는 비용 · 추이 · 발행 판정', () => {
+  const order = ['this.renderVerdict(report)', 'this.renderAxes(report)', 'this.renderBudgets(report)', 'this.renderMetrics(report)', 'this.renderCurve()', 'this.renderGate()']
+  // From the full report, past the early return that shows only guidance and the release verdict.
+  const at = order.map(call => verdict.indexOf(call, verdict.indexOf('${this.renderVerdict(report)}')))
+  assert.ok(at.every(i => i > 0), `모든 절을 그린다: ${order.filter((_, i) => at[i] < 0)}`)
+  assert.deepEqual([...at].sort((a, b) => a - b), at)
+  assert.ok(verdict.includes('...GRADE_SCALE.map('), '눈금은 등급을 셈한 경계에서 그린다 — 따로 적으면 어긋난다')
+  assert.ok(verdict.includes('SidePanelStyles'), '옆 칸의 한 모양을 쓴다')
+})
+
+test('radar 와 추이 그림의 조각은 svg 템플릿이다 — html 로 만들면 소리 없이 안 그려진다', () => {
+  for (const block of verdict.match(/svg`[\s\S]*?<\/svg>/g) ?? []) {
+    assert.doesNotMatch(block, /html`\s*<\s*(polygon|line|circle|rect|path|text|g)\b/)
+  }
+  assert.ok((verdict.match(/svg`/g) ?? []).length >= 8, '전제: 조각을 센다')
+})
+
+test('화면이 키를 이어 붙여 찾는 말도 다섯 말 모두에 있다', () => {
+  const keys = [
+    ...V3_BUDGET_KEYS.map(key => `figure.label.budget-${key}`),
+    ...['scale', 'consistency', 'reuse', 'detail', 'reactive', 'readable'].flatMap(key => [`figure.label.axis-${key}`, `figure.label.axis-${key}-short`]),
+    'figure.text.bound-by-groups',
+    'figure.text.bound-by-triangles',
+    ...[...maturity.matchAll(/'(figure\.[a-z.-]*[a-z])'/g)].map(m => m[1]!)
+  ]
+  for (const lang of ['ko', 'en', 'ja', 'zh', 'ms']) {
+    const table = JSON.parse(read(`../translations/${lang}.json`))
+    for (const key of keys) assert.ok(table[key], `${lang}: ${key}`)
+  }
+})
+
+test('부품 목록 머리의 값 한 줄 — 삼각형 · 묶음 · 한 화면 몇 대 · 등급, D 면 넘친 한도를 적는다', () => {
+  assert.equal(budgetOf(undefined), undefined, '잴 것이 없으면 줄도 없다')
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, cube('a', 0))
+  const line = budgetOf(v3ReportOf(asset))!
+  assert.deepEqual(
+    { triangles: line.triangles, groups: line.groups, grade: line.grade },
+    { triangles: 12, groups: 1, grade: 'A' }
+  )
+  assert.equal(line.instances, capacityFrom(1, 12)!.instances)
+
+  let glass = withPalette('glass.a', 'glass.b')
+  glass = addV3Box(glass, cube('a', 0, 'glass.a', { transparent: true }))
+  glass = addV3Box(glass, cube('b', 200, 'glass.b', { transparent: true }))
+  const over = budgetOf(v3ReportOf(glass))!
+  assert.equal(over.grade, 'D')
+  assert.deepEqual(over.tightest, { key: 'transparent', used: 2, limit: 1 })
+
+  const parts = read('../client/modeller/figure-v3-parts.ts')
+  const drawn = parts.slice(parts.indexOf('  private renderBudget()'), parts.indexOf('  /** 한꺼번에 감추고'))
+  assert.ok(drawn.includes("const over = b.grade === 'D'") && drawn.includes("'figure.text.parts-budget-over'"), 'D 에서 넘친 한도를 적는다')
+  assert.ok(parts.includes("new CustomEvent('show-maturity'"), '누르면 성숙도로')
+  const editor = read('../client/modeller/v3-editor.ts')
+  assert.ok(editor.includes('.budget=${this.budget}') && editor.includes("@show-maturity=${() => (this.tab = 'verdict')}"))
+  assert.ok(verdict.includes('budget: budgetOf(report)'), '성숙도 탭이 같은 보고서에서 알린다')
+})

package/test/v3-parts-wiring.test.ts

@@ -29,7 +29,9 @@ test('복제 · 순서 · 삭제는 figure-model 의 부품 편집으로, 세션
 })
 
 test('작업대에서 가린 부품은 캔버스에서 빠지고, 다른 도형을 열면 풀린다', () => {
-  assert.match(editor, /drawableV3Parts\(view\.geometry \?\? \[\]\)\.filter\(body => !this\.hiddenParts\.has/)
+  assert.ok(editor.includes('.parts=${this.drawnParts(view.geometry, asset)}'))
+  const drawn = editor.slice(editor.indexOf('  private drawnParts('), editor.indexOf('  private hold('))
+  assert.ok(drawn.includes('parts.filter(body => !this.hiddenParts.has('), '끄는 값을 그릴 때도 가린 부품은 빠진다')
   const reset = editor.slice(editor.indexOf('protected willUpdate'), editor.indexOf('private run('))
   assert.match(reset, /this\.hiddenParts = new Set\(\)/)
 })

package/test/v3-preview.test.ts

@@ -0,0 +1,42 @@
+/*
+ * **미리보기 — V2 의 그것** (사용자 2026-09-24: 「미리보기도 v2 가 낫다」). 저작 중인 도형을 도면처럼 등록하고,
+ * 기준 크기와 한 · 두 · 세 축을 2배로 늘린 일곱을 나란히 FigureInstance 로 세운다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { addV3Box, createV3Asset } from '@hatiolab/figure-model'
+
+import { authoredSizeOf, PREVIEW_WAYS, previewInstances } from '../client/modeller/v3-preview-model.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+
+test('여덟 — 기준과 일곱 조합, 한 줄에 넷, 늘린 축만 두 배 · 높이는 늘 적는다', () => {
+  assert.deepEqual(PREVIEW_WAYS.map(w => w.name), ['base', 'x', 'y', 'z', 'x·y', 'x·z', 'y·z', 'x·y·z'])
+  const { components, board } = previewInstances('T', { x: 1000, y: 500, z: 400 })
+  assert.equal(components.length, 8)
+  assert.deepEqual(components.map(c => [c.width, c.depth, c.height]), [
+    [1000, 500, 400], [2000, 500, 400], [1000, 1000, 400], [1000, 500, 800],
+    [2000, 1000, 400], [2000, 500, 800], [1000, 1000, 800], [2000, 1000, 800]
+  ])
+  assert.ok(components.every(c => c.type === 'T'))
+  assert.deepEqual(board, { width: 10000, height: 2000 }, '가장 큰 것이 들어갈 칸 넷씩 두 줄')
+})
+
+test('크기를 선언하지 않은 도형은 부품이 차지하는 범위를 기준 크기로', () => {
+  const asset = addV3Box(createV3Asset('Fixed'), { id: 'body', size: { x: 300, y: 200, z: 100 }, position: { x: 0, y: 100, z: 0 } })
+  assert.deepEqual(authoredSizeOf(asset), { x: 300, y: 200, z: 100 })
+})
+
+test('편집 | 미리보기 — 띠에서 오가고, 미리보기는 도면처럼 등록해 세우며 제 타입으로 남의 도면을 건드리지 않는다', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  assert.ok(editor.includes("(['edit', 'preview'] as const).map("))
+  assert.ok(editor.includes('<figure-v3-preview'))
+  const preview = read('../client/modeller/figure-v3-preview.ts')
+  assert.ok(preview.includes('registerFigureV3(type, asset)') && preview.includes('unregisterFigureV3(this.registered)'))
+  assert.ok(preview.includes('`figure-v3-preview-${this.context || \'new\'}`'))
+  assert.ok(preview.includes("kind: 'set-state-defaults'"), '이 자세를 기본으로')
+  assert.ok(preview.includes('dialShape('), '각도는 다이얼로')
+})

package/test/v3-properties.test.ts

@@ -61,8 +61,10 @@ test('태그 줄은 V2 와 같은 규칙으로 목록이 된다', () => {
 const page = read('../client/pages/figure-v3-modeller-page.ts')
 
 test('화면이 속성 탭을 걸고, 명령은 세션의 이력 하나로, 분류 · 태그는 행으로 간다', () => {
-  assert.ok(/renderTab\('properties', 'tune'/.test(page), '속성 탭')
-  assert.ok(/<figure-v3-properties\s+\?off=/.test(page), '감추되 떼지 않는다')
+  const editor = read('../client/modeller/v3-editor.ts')
+  assert.ok(/renderTab\('properties', 'tune'/.test(editor), '속성 탭은 편집기의 오른쪽 칸에')
+  assert.ok(/<figure-v3-properties\s+slot="figure"/.test(page), '도형 속성은 부품을 고르지 않았을 때 속성 탭에 선다')
+  assert.ok(editor.includes('<slot name="figure"></slot>'))
   assert.ok(/@v3-command=\$\{this\.onCommand\}/.test(page) && /@v3-catalog=\$\{this\.onCatalog\}/.test(page))
   const run = page.slice(page.indexOf('private runCommand'), page.indexOf('private onCatalog'))
   assert.ok(/this\.session\.command\(actionOf\(\)\)/.test(run), '명령은 세션을 지난다 — 되돌리기가 먹는다')

package/test/v3-scene-canvas.test.ts

@@ -0,0 +1,85 @@
+/*
+ * **편집 캔버스는 V2 처럼 things-scene 편집 모드 위에 선다** (사용자 2026-09-24: 「v2 방식으로 하면 안되냐」).
+ *
+ * 부품마다 `figure-v3-part` 컴포넌트로 판에 세우면 고르기 · 주황 테두리 · 기즈모와 스냅 · 박스 선택 · 카메라(감속 ·
+ * 커서 쪽 확대 · 더블클릭 맞추기 · 시점 1~6) · 스튜디오 환경 · 좌표 바탕 · 조명과 그림자가 씬에서 온다. 여기서는 그
+ * 배선과, 몸체 ↔ 컴포넌트의 대응이 왕복하는지를 잰다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { changedKeys, componentOf, gizmoResultOf } from '../client/modeller/v3-stage-model.ts'
+import type { V3RenderPart } from '../client/modeller/v3-renderer.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+const canvas = read('../client/modeller/v3-canvas.ts')
+const board = { width: 2000, height: 2000 }
+
+const turned = (deg: number) => {
+  const a = (deg * Math.PI) / 180
+  return [
+    [Math.cos(a), 0, Math.sin(a)],
+    [0, 1, 0],
+    [-Math.sin(a), 0, Math.cos(a)]
+  ]
+}
+const box = (t: number[], r = turned(0)): V3RenderPart => ({
+  id: 'block',
+  shape: { provider: 'box', dimensions: { width: 200, height: 100, depth: 60 } },
+  pose: { r, t },
+  material: { token: 'palette.primary' }
+})
+
+test('things-scene 의 판을 편집 모드로 세우고, 보기 설정은 판의 상태 이름 그대로 넣는다', () => {
+  assert.ok(canvas.includes("import { create, Model, niceGridStep } from '@hatiolab/things-scene'"))
+  assert.match(canvas, /type: 'model-layer'/)
+  assert.match(canvas, /mode: 1\n/, '편집 모드 — 시점 단추 · 기즈모 · 도움말 · 단축키')
+  assert.ok(canvas.includes('...sceneLook(this.view ?? DEFAULT_VIEW)'))
+  assert.ok(canvas.includes('pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2)'), 'V2 의 두 배 표본')
+  assert.doesNotMatch(canvas, /new THREE\.|WebGLRenderer|OrbitControls|TransformControls/, '제 장면을 짜지 않는다')
+})
+
+test('몸체는 자기 상자로 서고, 씬의 낱말(width·depth·height · left·top·zPos · 회전)로 적힌다', () => {
+  const state = componentOf(box([100, 50, -30]), { 'palette.primary': '#123456' }, board)!
+  assert.equal(state.type, 'figure-v3-part')
+  assert.equal(state.name, 'block')
+  assert.deepEqual([state.width, state.depth, state.height], [200, 100, 60])
+  assert.equal(state.left, 100 + 1000 - 100)
+  assert.equal(state.top, -30 + 1000 - 30)
+  assert.equal(state.zPos, 0, '가운데가 y 50, 높이 100 이면 바닥이 0')
+  assert.equal(state.color, '#123456')
+})
+
+test('기즈모가 옮기면 원점이, 돌리면 각도가, 늘리면 자기 축의 배율이 돌아온다', () => {
+  const part = box([100, 50, -30])
+  const at = componentOf(part, {}, board)!
+  assert.deepEqual(gizmoResultOf(part, at, board), {}, '안 움직였으면 아무것도')
+
+  const moved = gizmoResultOf(part, { ...at, left: (at.left as number) + 40, zPos: 20 }, board)
+  assert.deepEqual(moved.position!.map(Math.round), [140, 70, -30])
+  assert.equal(moved.rotation, undefined)
+
+  const spun = gizmoResultOf(part, { ...at, rotation: -Math.PI / 6 }, board)
+  assert.deepEqual(spun.rotation!.map(v => Math.round(v * 10) / 10 + 0), [0, 30, 0])
+
+  const grown = gizmoResultOf(part, { ...at, width: 400, left: (at.left as number) - 100 }, board)
+  assert.deepEqual(grown.scale!.map(v => Math.round(v * 1000) / 1000), [2, 1, 1])
+  assert.equal(grown.position, undefined, '가운데서 양쪽으로 늘리면 원점은 그대로')
+})
+
+test('돌린 몸체도 왕복한다 — 판에 적은 상태를 그대로 되읽으면 아무것도 안 바뀐다', () => {
+  const part = box([10, 50, 20], turned(35))
+  const at = componentOf(part, {}, board)!
+  assert.deepEqual(gizmoResultOf(part, at, board), {})
+  assert.equal(changedKeys(at, { ...at }), null, '같은 값은 다시 넣지 않는다 — 씬이 메아리를 내지 않게')
+  assert.deepEqual(changedKeys(at, { ...at, left: 1 }), { left: 1 })
+})
+
+test('고르기와 끌기는 이름으로 알리고, 스스로 적은 것의 메아리는 끌기로 읽지 않는다', () => {
+  assert.ok(canvas.includes("root.on('selected'"))
+  assert.ok(canvas.includes("if (this.writing) return"))
+  assert.ok(canvas.includes("new CustomEvent('part-transformed', { detail: { id: part.id, result }"))
+  assert.ok(canvas.includes('setTimeout(() => this.sync())'), '받지 못한 변경은 입력이 둔 자리로 돌아간다')
+})

package/test/v3-stage-model.test.ts

@@ -0,0 +1,25 @@
+/*
+ * The editing board only grows while a figure is edited (user 2026-09-24: 「조작값을 변경하면, 편집기가 자꾸 리프레시」).
+ * A board that outgrows itself is stood up again and the camera is lost; a raised arm made the height larger and the
+ * height was measured afresh each time.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { addV3Box, compileV3Asset, createV3Asset } from '@hatiolab/figure-model'
+
+import { drawableV3Parts } from '../client/modeller/v3-renderer.ts'
+import { boardFor } from '../client/modeller/v3-stage-model.ts'
+
+const partsOf = (height: number) =>
+  drawableV3Parts(
+    compileV3Asset(addV3Box(createV3Asset('Probe'), { id: 'post', size: { x: 100, y: height, z: 100 }, position: { x: 0, y: height / 2, z: 0 } }))
+      .evaluate().geometry
+  )
+
+test('the board keeps the height it had: a part that shrinks back does not stand a new board up', () => {
+  const tall = boardFor(partsOf(2000))
+  const after = boardFor(partsOf(500), tall)
+  assert.equal(after.depth, tall.depth)
+  assert.ok(boardFor(partsOf(3000), tall).depth > tall.depth, 'it still grows')
+})

package/test/v3-theme.test.ts

@@ -20,24 +20,14 @@ const fixed = (text: string) =>
     .replace(/var\(--[\w-]+,\s*#[0-9a-fA-F]{3,8}\)/g, '')
     .match(/#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b(?![\w-])/g) ?? []
 
-test('캔버스와 편집기에 박힌 색이 없다 — 토큰의 대체값만 남는다', () => {
-  assert.deepEqual(fixed(canvas), [], 'v3-canvas.ts')
+test('편집기에 박힌 색이 없다 — 토큰의 대체값만 남는다', () => {
   assert.deepEqual(fixed(editor), [], 'v3-editor.ts')
 })
 
-test('캔버스 바탕은 CSS 와 3D 가 같은 토큰에서 온다', () => {
-  assert.match(canvas, /background: var\(--md-sys-color-surface-container\)/)
-  assert.match(canvas, /this\.scene\.background = new THREE\.Color\(colour\)/)
-  assert.match(canvas, /getComputedStyle\(this\)\.backgroundColor/, '3D 바탕이 호스트의 바탕을 읽는다')
-})
-
-test('테마를 바꾸면 3D 바탕을 다시 읽는다 — 한 번만 읽으면 가운데만 밝은 판이 남는다', () => {
-  assert.match(canvas, /observe\(document\.body, \{ attributes: true, attributeFilter: \['class'\] \}\)/)
-  const onChange = canvas.slice(canvas.indexOf('new MutationObserver'), canvas.indexOf('this.themeObserver.observe'))
-  assert.match(onChange, /this\.paintBackground\(\)/)
-  assert.match(onChange, /this\.draw\(\)/, '다시 읽고 그리지 않으면 다음 움직임까지 옛 색이다')
-  const leave = canvas.slice(canvas.indexOf('disconnectedCallback()'))
-  assert.match(leave, /this\.themeObserver\?\.disconnect\(\)/, '떠난 캔버스가 body 를 계속 지켜본다')
+test('캔버스 바탕은 V2 의 작업대 회색 — 판의 하늘색이라 환경 탭에서 바꾼다', () => {
+  assert.ok(canvas.includes('background-color: ${unsafeCSS(WORKBENCH)}'), '씬이 서기 전 · 2D 쪽도 같은 색')
+  assert.ok(canvas.includes("sky: 'color'") && canvas.includes('...sceneLook(this.view ?? DEFAULT_VIEW)'), '3D 바탕은 보기 설정의 skyColor')
+  assert.match(read('../client/modeller/figure-view.ts'), /skyColor: WORKBENCH/)
 })
 
 test('눌린 단추와 오류 칸은 셸이 두 테마 대비를 맞춘 칸을 쓴다', () => {
@@ -50,18 +40,19 @@ test('눌린 단추와 오류 칸은 셸이 두 테마 대비를 맞춘 칸을
   assert.match(error, /--md-sys-color-on-error-container\)/)
 })
 
-test('편집기는 창이 아니라 자기 폭으로 접는다 — 레일과 오른쪽 칸이 폭을 먼저 가져간다', () => {
+test('편집기는 창이 아니라 자기 폭으로 접는다 — 레일이 폭을 먼저 가져간다', () => {
+  /* The widths - 200 | 1fr | 340, 160 | 300 under 860px, one column with the canvas first under 560px - are
+     ox-three-pane's, measured in @operato/layout's own test. The editor must not write the grid again. */
   assert.match(editor, /container-type: inline-size/)
-  assert.doesNotMatch(editor, /@media \(max-width/, '창 폭 기준이 남아 있다 — 레일을 펼치면 편집기가 오른쪽 칸 위로 넘친다')
-  assert.match(editor, /@container \(max-width: 659px\)/, '세 칸의 최소 폭 합(660) 아래에서 두 칸')
-  const one = editor.slice(editor.indexOf('@container (max-width: 419px)'))
-  assert.match(one, /grid-template-columns: minmax\(0, 1fr\)/, '420 아래에서 한 줄')
-  assert.match(one, /figure-v3-canvas \{\s*order: -1;/, '한 줄에서는 캔버스가 먼저')
+  assert.doesNotMatch(editor, /@media \(max-width/, '창 폭 기준이 남아 있다 — 레일을 펼치면 편집기가 넘친다')
+  assert.match(editor, /<ox-three-pane>/, '세 칸은 공용 틀')
+  assert.doesNotMatch(editor, /grid-template-columns/, '편집기가 격자를 다시 쓰지 않는다')
 })
 
-test('넘침이 없으니 오른쪽 칸은 편집기를 가리지 않는다 — 가림은 우회였다', () => {
-  const page = read('../client/pages/figure-v3-modeller-page.ts')
-  const aside = page.slice(page.indexOf('    aside {'), page.indexOf('}', page.indexOf('    aside {')))
+test('양쪽 칸은 띠에서 접는다 — 접으면 캔버스가 그 폭을 갖고, 오른쪽 칸은 무엇도 가리지 않는다', () => {
+  assert.ok(editor.includes('.pane=${this.panes}'), '띠가 그 틀을 접는다')
+  assert.match(editor, /querySelector<OxThreePane>\('ox-three-pane'\)/, '띠에 건네는 틀은 편집기의 세 칸')
+  const aside = editor.slice(editor.indexOf('    aside {'), editor.indexOf('}', editor.indexOf('    aside {')))
   assert.doesNotMatch(aside, /z-index/)
-  assert.match(aside, /border-left: 1px solid var\(--md-sys-color-outline-variant\)/, '칸 경계선은 남는다')
+  assert.doesNotMatch(aside, /border-left/, '칸 경계선은 틀이 긋는다 — 두 줄이 되지 않게')
 })