@things-factory/figure-ui 10.1.45 → 10.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.45",
+  "version": "10.1.47",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -26,19 +26,19 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.47",
-    "@hatiolab/things-scene": "^10.1.26",
+    "@hatiolab/figure-model": "^0.1.53",
+    "@hatiolab/things-scene": "^10.1.30",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
     "@operato/graphql": "^10.0.0",
     "@operato/i18n": "^10.0.0",
-    "@operato/layout": "^10.0.0",
+    "@operato/layout": "^10.28.0",
     "@operato/p13n": "^10.0.0",
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/figure-service": "^10.1.45",
+    "@things-factory/figure-service": "^10.1.47",
     "three": "^0.185.1"
   },
-  "gitHead": "d72e1fd1285797fcd7839d97a18e31f5bf076ae3"
+  "gitHead": "185f20d7d9a15715a0ee2757a6a8189ec36cfb9d"
 }

package/test/v3-clips.test.ts

@@ -0,0 +1,70 @@
+/*
+ * **클립 — V2 의 애니메이션** (V3 동등표 ⑥, 2026-09-24).
+ *
+ * 조작값을 시간에 따라 움직이는 자리다. 읽는 값은 figure-model 편집을 실제로 적용한 자산에서 재고, 배선은 소스에서 본다.
+ */
+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, editV3Part } from '@hatiolab/figure-model'
+import type { V3Asset } from '@hatiolab/figure-model'
+
+import { clipsOf, poseAt, trackEdit, undrivenOf, withKey, withoutKey } from '../client/modeller/v3-clips.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+
+const machine = (): V3Asset => {
+  let asset = createV3Asset('Machine')
+  asset = addV3Box(asset, { id: 'block', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } })
+  asset = applyV3Authoring(asset, { kind: 'add-motion', part: 'block', motion: { kind: 'slide', axis: 'x' }, state: { id: 'shift', unit: 'mm', min: 0, max: 60, start: 0 } })
+  asset = addV3Box(asset, { id: 'arm', size: { x: 40, y: 200, z: 40 }, position: { x: 0, y: 200, z: 0 } })
+  return applyV3Authoring(asset, { kind: 'add-motion', part: 'arm', motion: { kind: 'turn', axis: 'y' }, state: { id: 'spin', unit: 'deg', min: -180, max: 180, start: 0 } })
+}
+
+test('클립마다 길이와 트랙을, 트랙마다 키를 초로 읽는다', () => {
+  let asset = editV3Part(machine(), { kind: 'set-state-input', input: 'shift', label: '밀기' })
+  asset = editV3Part(asset, { kind: 'set-driver', state: 'shift', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 2, value: 60 }, { seconds: 4, value: 0 }] })
+  assert.deepEqual(undrivenOf(asset), ['spin'], '재생하지 않는 조작값만 새 트랙이 된다')
+  const [clip] = clipsOf(asset)
+  assert.equal(clip!.name, 'cycle')
+  assert.equal(clip!.duration, 4)
+  assert.deepEqual(clip!.tracks.map(t => [t.state, t.label, t.unit, t.keys]), [['shift', '밀기', 'mm', [{ seconds: 0, value: 0 }, { seconds: 2, value: 60 }, { seconds: 4, value: 0 }]]])
+})
+
+test('막대를 옮기면 그 순간의 자세를 한 묶음으로 — 드라이버와 같은 값', () => {
+  const asset = editV3Part(machine(), { kind: 'set-driver', state: 'shift', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 4, value: 60 }] })
+  assert.deepEqual(poseAt(asset, 'cycle', 1), [{ kind: 'set-state', input: 'shift', unit: 'mm', value: 15 }])
+  assert.deepEqual(poseAt(asset, 'nothing', 1), [])
+})
+
+test('키를 그 순간에 더하고 빼며, 쓰면 figure-model 이 받는다 — 양 끝은 남는다', () => {
+  let asset = editV3Part(machine(), { kind: 'set-driver', state: 'shift', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 4, value: 60 }] })
+  const [clip] = clipsOf(asset)
+  const track = clip!.tracks[0]!
+  const keys = withKey(track.keys, { seconds: 2, value: 30 })
+  assert.deepEqual(keys.map(k => k.seconds), [0, 2, 4])
+  assert.deepEqual(withKey(keys, { seconds: 2, value: 45 }).map(k => k.value), [0, 45, 60], '같은 순간이면 바꾼다')
+  asset = editV3Part(asset, trackEdit(clip!, track, { keys }))
+  assert.equal(clipsOf(asset)[0]!.tracks[0]!.keys.length, 3)
+  assert.equal(withoutKey(track.keys, 1), null, '두 개뿐이면 뺄 수 없다')
+  assert.equal(withoutKey(keys, 0), null, '처음 키(0초)는 뺄 수 없다')
+  assert.deepEqual(withoutKey(keys, 1)!.map(k => k.seconds), [0, 4])
+})
+
+test('움직임 탭에 서고, 막대는 입력 한 묶음 · 나머지는 부품 편집으로 편집기에 닿는다', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  const start = editor.indexOf('<figure-v3-clips')
+  const block = editor.slice(start, editor.indexOf('</figure-v3-clips>', start))
+  assert.ok(start >= 0)
+  assert.ok(block.includes('@v3-states=${(e: CustomEvent) => this.run(() => this.session!.apply(e.detail.changes))}'))
+  assert.ok(block.includes('@v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}'))
+  const clips = read('../client/modeller/figure-v3-clips.ts')
+  assert.ok(clips.includes("@change=${(e: Event) => this.scrub(clip, number(e))}"), '막대는 놓을 때 한 번')
+  const keys = [...clips.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}`)
+  }
+})

package/test/v3-controls.test.ts

@@ -0,0 +1,68 @@
+/*
+ * **조작값 — V2 의 파라미터와 자세 도구** (V3 동등표 ⑥, 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, editV3Part } from '@hatiolab/figure-model'
+import type { V3Asset } from '@hatiolab/figure-model'
+
+import { controlsOf, poseAsDefault, poseDiffers } from '../client/modeller/v3-controls.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+
+const slider = (): V3Asset => {
+  let asset = createV3Asset('Slider')
+  asset = addV3Box(asset, { id: 'block', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } })
+  asset = applyV3Authoring(asset, { kind: 'add-motion', part: 'block', motion: { kind: 'slide', axis: 'x' }, state: { id: 'shift', unit: 'mm', min: 0, max: 60, start: 20 } })
+  asset = addV3Box(asset, { id: 'arm', size: { x: 40, y: 200, z: 40 }, position: { x: 0, y: 200, z: 0 } })
+  return applyV3Authoring(asset, { kind: 'add-motion', part: 'arm', motion: { kind: 'turn', axis: 'y' }, state: { id: 'spin', unit: 'deg', min: -90, max: 90, start: 0 } })
+}
+
+test('조작값마다 이름 · 단위 · 범위 · 지금 값 · 시작 값 · 이동 시간을 읽는다', () => {
+  let asset = slider()
+  asset = editV3Part(asset, { kind: 'set-state-input', input: 'shift', label: '밀기', sweep: 2 })
+  const [shift, spin] = controlsOf(asset, { shift: 45 })
+  assert.deepEqual(
+    { ...shift, step: undefined },
+    { id: 'shift', label: '밀기', named: true, unit: 'mm', min: 0, max: 60, value: 45, start: 20, sweep: 2, step: undefined }
+  )
+  assert.equal(shift!.step, 0.6, '길이는 범위의 백분의 일씩')
+  assert.equal(spin!.label, 'spin', '이름이 없으면 id')
+  assert.equal(spin!.named, false)
+  assert.equal(spin!.step, 1, '각도는 1도씩')
+  assert.equal(spin!.value, 0, '편집기 값이 없으면 시작 값')
+})
+
+test('지금 자세를 기본으로 — 보고 있는 자세가 시작 자세와 다를 때만, 한 번의 편집으로', () => {
+  const asset = slider()
+  assert.equal(poseDiffers(controlsOf(asset)), false)
+  const looking = controlsOf(asset, { shift: 50, spin: 30 })
+  assert.equal(poseDiffers(looking), true)
+  const kept = editV3Part(asset, poseAsDefault(looking))
+  assert.deepEqual([kept.stateDefaults['shift'], kept.stateDefaults['spin']], [50, 30])
+  assert.equal(poseDiffers(controlsOf(kept, { shift: 50, spin: 30 })), false)
+})
+
+test('편집기에 닿는다 — 값 바꾸기는 입력으로, 이름 · 범위 · 시간 · 기본 자세는 부품 편집으로', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  const start = editor.indexOf('<figure-v3-controls')
+  const block = editor.slice(start, editor.indexOf('</figure-v3-controls>', start))
+  assert.ok(start >= 0)
+  assert.ok(block.includes("@v3-state=${(e: CustomEvent) => this.run(() => this.session!.apply([{ kind: 'set-state'"))
+  assert.ok(block.includes('@v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}'))
+  assert.ok(editor.includes("const design = view.fields.filter(i => i.role !== 'state')"), '조작값은 설계 값 칸에 두 번 나오지 않는다')
+
+  const controls = read('../client/modeller/figure-v3-controls.ts')
+  assert.ok(controls.includes("@change=${(e: Event) => this.try(c, number(e))}"), '슬라이더는 놓을 때 한 번 — 끄는 동안 기록이 쌓이지 않는다')
+  const keys = [...controls.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}`)
+  }
+})

package/test/v3-fields.test.ts

@@ -0,0 +1,62 @@
+/*
+ * **값 칸의 묶음 — V2 인스펙터처럼** (사용자 2026-09-24: 「적절한 그루핑이 없어서 가시성이 좋지 않다. 크기는 왜
+ * 한줄씩 차지하는가」). 위치 · 회전 · 크기는 X · Y · Z 세 칸 한 줄, 형상의 나머지 치수는 제 제목 아래 한 줄씩.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { groupFields, partLabelOf } from '../client/modeller/v3-fields.ts'
+
+const f = (id: string, value = 1, unit = 'mm') => ({ id, unit, value, role: 'design' })
+
+test('부품의 위치 · 회전 · 크기는 세 칸 한 줄씩, 나머지는 한 줄씩', () => {
+  const fields = [
+    f('arm.position.x'), f('arm.position.y'), f('arm.position.z'),
+    f('arm.rotation.x', 0, 'deg'), f('arm.rotation.y', 0, 'deg'), f('arm.rotation.z', 0, 'deg'),
+    f('arm.dimension.radius'), f('arm.dimension.length'),
+    f('other.position.x'), f('size.x')
+  ]
+  const { vectors, singles } = groupFields(fields, 'arm')
+  assert.deepEqual(vectors.map(g => g.kind === 'vector' && g.name), ['position', 'rotation'])
+  assert.deepEqual(singles.map(g => g.kind === 'single' && g.name), ['radius', 'length'], '다른 부품 · 도형의 값은 섞이지 않는다')
+})
+
+test('도형은 크기(size.x · y · z)가 세 칸 한 줄', () => {
+  const { vectors, singles } = groupFields([f('size.x'), f('size.y'), f('size.z'), f('opening'), f('arm.position.x')])
+  assert.deepEqual(vectors.map(g => g.kind === 'vector' && g.name), ['size'])
+  assert.deepEqual(singles.map(g => g.kind === 'single' && g.name), ['opening'])
+})
+
+test('오른쪽 칸은 한 벌의 규격 — 요소마다 제 제목 · 칸 · 단추 규칙을 두지 않는다', () => {
+  for (const file of ['v3-editor', 'figure-v3-properties', 'figure-v3-links', 'figure-v3-material', 'figure-v3-controls', 'figure-v3-clips', 'figure-v3-capability']) {
+    const source = readFileSync(fileURLToPath(new URL(`../client/modeller/${file}.ts`, import.meta.url)), 'utf8')
+    assert.ok(source.includes('SidePanelStyles'), `${file} 가 공용 규격을 쓴다`)
+    const styles = source.slice(source.indexOf('static styles'), source.indexOf('`]', source.indexOf('static styles')))
+    assert.doesNotMatch(styles, /\n    h3 \{|\n    button\[act\] \{|\n    div\[form\] \{/, `${file} 가 제 규칙을 다시 적는다`)
+  }
+})
+
+test('긴 설명은 제목 옆 「?」 로 연다 — 늘 펼쳐 두지 않는다 (V2)', () => {
+  for (const [file, key] of [
+    ['figure-v3-links', 'figure.text.motion-explained'],
+    ['figure-v3-links', 'figure.text.place-explained'],
+    ['figure-v3-links', 'figure.text.fastening-explained'],
+    ['figure-v3-clips', 'figure.text.clips-explained']
+  ]) {
+    const source = readFileSync(fileURLToPath(new URL(`../client/modeller/${file}.ts`, import.meta.url)), 'utf8')
+    assert.ok(source.includes(`this.help.button('${key}')`) && source.includes(`this.help.hint('${key}')`), `${file}: ${key}`)
+    assert.ok(!source.includes(`<p hint>\${i18next.t('${key}')}</p>`), `${file}: ${key} 가 늘 펼쳐져 있다`)
+  }
+})
+
+test('되풀이한 부품은 되풀이의 이름과 몇 번째인지로 읽는다 — 날 id 를 보이지 않는다', () => {
+  assert.equal(partLabelOf('["roller.repeat",0,"roller.value"]'), 'roller 1')
+  assert.equal(partLabelOf('["rack.repeat",1,"shelf.repeat",2,"shelf.value"]'), 'rack 2·3')
+  assert.equal(partLabelOf('deck'), 'deck', '보통 부품은 제 이름')
+  assert.equal(partLabelOf('[not json'), '[not json')
+  const parts = readFileSync(fileURLToPath(new URL('../client/modeller/figure-v3-parts.ts', import.meta.url)), 'utf8')
+  assert.ok(parts.includes('>${partLabelOf(part.id)}'), '목록이 이 이름으로 그린다')
+})
+

package/test/v3-gizmo.test.ts

@@ -81,12 +81,10 @@ test('끈 것은 세션의 한 걸음이다 — 한 번의 되돌리기로 돌
   assert.match(editor, /if \(changes\.length\) this\.run\(\(\) => this\.session!\.apply\(changes\)\)/)
 })
 
-test('캔버스 — W · E · R, 끄는 동안 궤도 조작을 멈추고, 놓는 순간은 고르기가 아니다', () => {
+test('캔버스 — 기즈모 · W E R · 스냅은 씬의 편집 모드가 한다, V2 처럼', () => {
   const canvas = read('../client/modeller/v3-canvas.ts')
-  assert.match(canvas, /\{ w: 'translate', e: 'rotate', r: 'scale' \}/)
-  assert.match(canvas, /this\.controls\.enabled = !on/)
-  assert.match(canvas, /if \(this\.justDragged \|\| this\.transform\?\.dragging\) return/)
-  assert.match(canvas, /setFromQuaternion\(this\.proxy\.quaternion, 'XYZ'\)/)
+  assert.match(canvas, /mode: 1\n/)
+  assert.doesNotMatch(canvas, /TransformControls|OrbitControls/)
 })
 
 test('기즈모의 말은 다섯 말 모두에 있다', () => {

package/test/v3-keys.test.ts

@@ -0,0 +1,37 @@
+/*
+ * **모델러의 키** — V2 의 Ctrl+Z · Ctrl+Y 에 더해 복제 · 지우기 · 도형 전체로. 칸에 치는 키는 칸의 것이다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { keyActionOf } from '../client/modeller/v3-keys.ts'
+
+test('되돌리기 · 다시 하기 — Ctrl 과 Cmd 모두, 부품을 고르지 않아도', () => {
+  assert.equal(keyActionOf({ key: 'z', ctrlKey: true }, ''), 'undo')
+  assert.equal(keyActionOf({ key: 'Z', metaKey: true, shiftKey: true }, ''), 'redo')
+  assert.equal(keyActionOf({ key: 'y', ctrlKey: true }, ''), 'redo')
+})
+
+test('고른 부품에만 — 복제 · 지우기 · 도형 전체로', () => {
+  assert.equal(keyActionOf({ key: 'd', ctrlKey: true }, 'arm'), 'duplicate')
+  assert.equal(keyActionOf({ key: 'Delete' }, 'arm'), 'remove')
+  assert.equal(keyActionOf({ key: 'Backspace' }, 'arm'), 'remove')
+  assert.equal(keyActionOf({ key: 'Escape' }, 'arm'), 'deselect')
+  for (const key of ['Delete', 'Backspace', 'Escape']) assert.equal(keyActionOf({ key }, ''), null, `${key} 는 고른 부품이 없으면 아무 일도 안 한다`)
+})
+
+test('칸에 치는 키는 칸의 것 — 이름 칸의 Backspace 는 글자를 지운다', () => {
+  for (const tagName of ['INPUT', 'select', 'TEXTAREA'])
+    assert.equal(keyActionOf({ key: 'Backspace', target: { tagName } }, 'arm'), null, tagName)
+  assert.equal(keyActionOf({ key: 'z', ctrlKey: true, target: { tagName: 'INPUT' } }, ''), null, '칸 안의 Ctrl+Z 는 칸의 되돌리기')
+  assert.equal(keyActionOf({ key: 'Delete', target: { tagName: 'DIV', isContentEditable: true } }, 'arm'), null)
+  assert.equal(keyActionOf({ key: 'Delete', target: { tagName: 'CANVAS' } }, 'arm'), 'remove')
+})
+
+test('편집기가 창의 키를 듣고, 떼어지면 놓는다', () => {
+  const editor = readFileSync(fileURLToPath(new URL('../client/modeller/v3-editor.ts', import.meta.url)), 'utf8')
+  assert.ok(editor.includes("window.addEventListener('keydown', this.onKey)") && editor.includes("window.removeEventListener('keydown', this.onKey)"))
+  assert.ok(editor.includes('target: e.composedPath()[0] as HTMLElement'), '그림자 DOM 안의 칸도 칸으로 안다')
+})

package/test/v3-layout.test.ts

@@ -0,0 +1,78 @@
+/*
+ * **V3 모델러의 구성 — V2 의 세 칸과 오른쪽 탭, 그보다 낫게** (사용자 2026-09-24: 「v2 모델러의 구성과 레이아웃이
+ * 좋았다. 그 보다도 더 좋아야지.」).
+ *
+ * V2 는 부품 목록 · 캔버스 · 오른쪽 칸(아이콘 탭 여섯)이었다. V3 는 부품 속성이 캔버스 아래 좁은 칸에 끼어 있었다.
+ * 이 시험은 소스에서 그 구성을 확인한다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+const editor = read('../client/modeller/v3-editor.ts')
+const renderBody = editor.slice(editor.indexOf('  render() {'), editor.indexOf('  private renderField('))
+
+test('세 칸 — 부품 목록 · 캔버스 · 오른쪽 칸, 캔버스 아래에는 아무것도 없다', () => {
+  /* The three panes are ox-three-pane's (ADR-0060 decision 8): parts in start, the canvas in the middle, the side in end. */
+  const main = renderBody.slice(renderBody.indexOf('<ox-three-pane'), renderBody.indexOf('</ox-three-pane>'))
+  const order = ['<figure-v3-parts', '<figure-v3-canvas', '<aside slot="end">'].map(tag => main.indexOf(tag))
+  assert.match(main, /<figure-v3-parts\s+slot="start"/, '부품 목록은 왼쪽 칸')
+  assert.ok(order.every(i => i >= 0) && order[0]! < order[1]! && order[1]! < order[2]!, '부품 · 캔버스 · 오른쪽 칸 순서')
+  assert.equal((main.match(/<aside/g) ?? []).length, 1, '오른쪽 칸은 하나 — 페이지가 따로 칸을 두지 않는다')
+  assert.doesNotMatch(read('../client/pages/figure-v3-modeller-page.ts'), /<aside/)
+})
+
+test('오른쪽 칸의 탭 — V2 의 여섯: 속성 · 능력 · 움직임 · 판정 · 환경 · 이력, 판정의 개수는 탭에 남는다', () => {
+  const tabs = [...renderBody.matchAll(/this\.renderTab\('([a-z]+)'/g)].map(m => m[1])
+  assert.deepEqual(tabs, ['properties', 'capability', 'motion', 'verdict', 'view', 'history'])
+  for (const tab of tabs) assert.ok(renderBody.includes(`?off=\${tab !== '${tab}'}`), `${tab} 는 감추되 떼지 않는다`)
+})
+
+test('부품을 고르면 — 도형 전체의 탭(판정 · 이력)은 그 부품의 속성으로 넘어가고, 부품 탭은 새 부품을 보여 준다', () => {
+  const choose = editor.slice(editor.indexOf('  private choose('), editor.indexOf('  private asset()'))
+  assert.match(choose, /this\.selected = id/)
+  assert.match(choose, /if \(id && \(this\.tab === 'verdict' \|\| this\.tab === 'view' \|\| this\.tab === 'history'\)\) this\.tab = 'properties'/)
+  for (const from of ['@select-part=${(e: CustomEvent) => this.choose(e.detail.id)}', '@part-selected=${(e: CustomEvent<string>) => this.choose(e.detail)}'])
+    assert.ok(renderBody.includes(from), from)
+})
+
+test('부품을 보고 있으면 도형 전체로 돌아가는 칩이 탭마다 있다', () => {
+  assert.ok((renderBody.match(/\$\{this\.renderSubject\(\)\}/g) ?? []).length >= 3)
+  assert.match(editor.slice(editor.indexOf('  private renderSubject()')), /@click=\$\{\(\) => \(this\.selected = ''\)\}/)
+})
+
+test('탭마다 제자리 — 속성엔 부품의 모양 · 재질, 자리와 능력엔 사다리와 자리, 움직임엔 움직임 · 조작값', () => {
+  const panel = (tab: string) => {
+    const start = renderBody.indexOf(`?off=\${tab !== '${tab}'}`)
+    return renderBody.slice(start, renderBody.indexOf('<div panel', start + 1))
+  }
+  assert.ok(panel('properties').includes("this.renderLinks(unavailable, 'shape')") && panel('properties').includes('<figure-v3-material'))
+  assert.ok(panel('capability').includes("this.renderLinks(unavailable, 'places')") && panel('capability').includes('<figure-v3-capability'))
+  assert.ok(panel('motion').includes("this.renderLinks(unavailable, 'motion')") && panel('motion').includes('this.renderControls('))
+})
+
+test('띠 — 칸 접기 · 되돌리기 · 전체 보기 · 저장 상태 · 저장, 말은 번역에서', () => {
+  /* The bar is ox-canvas-bar: folds at its edges (it folds the frame it is given), undo · redo · fit in the suite's places. */
+  const bar = renderBody.slice(renderBody.indexOf('<ox-canvas-bar'), renderBody.indexOf('</ox-canvas-bar>'))
+  for (const piece of ['.pane=${this.panes}', 'history', 'fit', 'undo-shortcut="Ctrl+Z"', 'redo-shortcut="Ctrl+Y"', 'session!.undo()', 'session!.redo()', '.fit()', 'role="status"', '@click=${this.save}'])
+    assert.ok(bar.includes(piece), piece)
+  assert.doesNotMatch(renderBody, /[가-힣]/, '편집기의 화면 말에 한국어가 박혀 있지 않다')
+  const keys = [...editor.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('탭 아이콘은 오른쪽 칸 맨 위 — 타입 칸은 V2 처럼 속성 탭 안의 첫 칸', () => {
+  const aside = renderBody.slice(renderBody.indexOf('<aside slot="end">'), renderBody.indexOf('</aside>'))
+  assert.match(aside, /^<aside slot="end">\s*<div tabs>/, '탭이 첫째')
+  const properties = aside.slice(aside.indexOf("?off=${tab !== 'properties'}"), aside.indexOf("?off=${tab !== 'capability'}"))
+  assert.ok(properties.includes('<slot name="figure"></slot>'))
+  const figure = read('../client/modeller/figure-v3-properties.ts')
+  assert.match(figure, /<h3>\$\{i18next\.t\('figure\.label\.group-figure'\)\}<\/h3>\s*<slot name="type"><\/slot>/, '타입은 「도형」 절의 첫 칸')
+  const page = read('../client/pages/figure-v3-modeller-page.ts')
+  assert.ok(page.includes('<label slot="type" type-field>'))
+})

package/test/v3-links.test.ts

@@ -10,7 +10,7 @@ import assert from 'node:assert/strict'
 import { addV3Box, addV3Primitive, applyV3Authoring, createV3Asset } from '@hatiolab/figure-model'
 import type { V3Asset } from '@hatiolab/figure-model'
 
-import { canFasten, canFollow, fastenedTo, followOf, hasInstanceSize, motionOf, positionsWorkedOut } from '../client/modeller/v3-links.ts'
+import { acceptsOf, canFasten, canFollow, dimensionNow, instanceRangeOf, rangeDiffers, fastenedTo, followableAxes, followOf, hasInstanceSize, positionIsShare, holdsThings, motionOf, placeFacesOf, placeIdFor, placesOn, positionsWorkedOut } from '../client/modeller/v3-links.ts'
 
 const pair = (): V3Asset => {
   let asset = createV3Asset('Pair')
@@ -28,7 +28,7 @@ test('크기 — 제 치수 · 인스턴스 크기 · 다른 부품의 치수를
   const asset = pair()
   assert.deepEqual(followOf(asset, 'plate', 'x'), { of: 'own' })
   const byInstance = applyV3Authoring(asset, { kind: 'link-dimension', part: 'plate', axis: 'x', source: { of: 'instance', axis: 'x' } })
-  assert.deepEqual(followOf(byInstance, 'plate', 'x'), { of: 'instance', axis: 'x' })
+  assert.deepEqual(followOf(byInstance, 'plate', 'x'), { of: 'instance', axis: 'x', times: 1 })
   const byPart = applyV3Authoring(byInstance, { kind: 'link-dimension', part: 'block', axis: 'x', source: { of: 'part', part: 'plate', axis: 'x' }, times: 0.5 })
   assert.deepEqual(followOf(byPart, 'block', 'x'), { of: 'part', part: 'plate', axis: 'x' }, '배율이 끼어도 원천을 찾는다')
   const back = applyV3Authoring(byPart, { kind: 'unlink-dimension', part: 'block', axis: 'x', mm: 300 })
@@ -46,7 +46,8 @@ test('붙이기 — 누구에게 붙었나, 붙일 수 있는 모양인가', ()
   const withDrum = addV3Primitive(asset, { id: 'drum', kind: 'cylinder', dimensions: { radius: 50, length: 100 }, position: { x: 0, y: 50, z: 0 } })
   assert.equal(canFasten(withDrum, 'block'), true)
   assert.equal(canFasten(withDrum, 'drum'), true, '원기둥도 면으로 붙인다(figure-model 0.1.47)')
-  assert.equal(canFollow(withDrum, 'drum'), false, '원기둥의 치수 셋은 X·Y·Z 가 아니라 따르기는 상자만')
+  assert.equal(canFollow(withDrum, 'drum'), true, '원기둥은 반지름(X)과 길이(Y)를 따를 수 있다')
+  assert.deepEqual(followableAxes(withDrum, 'drum'), ['x', 'y'], '원기둥에는 제 Z 가 없다')
 })
 
 test('움직임 — 미끄러짐 · 돌기, 축, 무엇이 모느냐를 읽는다', () => {
@@ -81,7 +82,8 @@ const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.m
 
 test('고르개의 값은 지금 따르는 것을 가리킨다', () => {
   assert.equal(choiceOf({ of: 'own' }), 'own')
-  assert.equal(choiceOf({ of: 'instance', axis: 'y' }), 'instance:y')
+  assert.equal(choiceOf({ of: 'instance', axis: 'y', times: 1 }), 'instance:y')
+  assert.equal(choiceOf({ of: 'instance', axis: 'y', times: 0.25 }), 'share:y', '몫은 비례로')
   assert.equal(choiceOf({ of: 'part', part: 'plate', axis: 'x' }), 'part:plate:x')
 })
 
@@ -95,8 +97,8 @@ test('편집기는 세 칸의 명령을 세션의 이력 하나로 돌리고,
 
 test('떼면 지금 크기로 고정한다 — 따르던 값을 잃지 않는다', () => {
   const links = read('../client/modeller/figure-v3-links.ts')
-  assert.match(links, /kind: 'unlink-dimension', part: this\.partId, axis, mm \}/)
-  assert.match(links, /this\.dims\?\.\[AXES\.indexOf\(axis\)\]/)
+  assert.ok(links.includes("this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm: Math.max(1, Math.round(current)) })"))
+  assert.ok(links.includes('const current = dimensionNow(asset, this.partId, axis) ?? this.dims?.[AXES.indexOf(axis)] ?? 100'))
 })
 
 test('세 칸의 말은 다섯 말 모두에 있다', () => {
@@ -104,7 +106,7 @@ test('세 칸의 말은 다섯 말 모두에 있다', () => {
   const keys = [...links.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, 'figure.text.follow-would-loop', 'figure.text.fasten-would-loop', 'figure.label.motion-slide', 'figure.label.motion-turn'])
+    for (const key of [...keys, 'figure.text.follow-would-loop', 'figure.text.fasten-would-loop', 'figure.label.motion-slide', 'figure.label.motion-turn', 'figure.label.place-grip', 'figure.label.place-seat'])
       assert.ok(table[key], `${lang}: ${key}`)
   }
 })
@@ -121,3 +123,112 @@ test('도형 크기를 따라 움직이는 자리를 가려 읽고, 여기에
   assert.deepEqual(positionsWorkedOut(fixed, 'lamp'), [])
   assert.equal(fixed.designInputs['lamp.position.y'], 110, '지금 자리 그대로 — 100 + 10')
 })
+
+test('자리 — 부품의 면에 둔 집는 자리·놓는 자리를 그 부품에서 읽는다', () => {
+  let asset = pair()
+  asset = addV3Primitive(asset, { id: 'drum', kind: 'cylinder', dimensions: { radius: 100, length: 300 }, position: { x: 0, y: 400, z: 0 } } as never)
+  assert.deepEqual(placeFacesOf(asset, 'block'), ['left', 'right', 'bottom', 'top', 'back', 'front'])
+  assert.deepEqual(placeFacesOf(asset, 'drum'), [], '둥근 몸에는 자리를 권하지 않는다 — 명령이 거절할 것이다')
+
+  assert.equal(placeIdFor(asset, 'block', 'grip'), 'block-grip')
+  asset = applyV3Authoring(asset, { kind: 'add-binding', id: placeIdFor(asset, 'block', 'grip'), label: '집는 자리', role: 'grip', part: 'block', face: 'top', accepts: acceptsOf(' BOX, TOTE,, BOX '), capacity: 2 })
+  assert.equal(placeIdFor(asset, 'block', 'grip'), 'block-grip-2', '같은 부품에 둘째 자리는 다른 id')
+  assert.deepEqual(
+    placesOn(asset, 'block').map(p => [p.id, p.role, p.face, p.accepts, p.capacity]),
+    [['block-grip', 'grip', 'top', ['BOX', 'TOTE'], 2]]
+  )
+  assert.deepEqual(placesOn(asset, 'plate'), [], '다른 부품의 자리는 안 섞인다')
+})
+
+test('담는 능력이 없는 도형은 자리가 있어도 보드가 아무것도 넘기지 않는다 — 화면이 그것을 말한다', () => {
+  const asset = pair()
+  assert.equal(holdsThings(asset), false)
+  asset.document.capabilities.names = ['Capacity', 'Holdable']
+  assert.equal(holdsThings(asset), true)
+  asset.document.capabilities.names = ['FlowNode']
+  assert.equal(holdsThings(asset), true, 'FlowNode 는 Capacity 를 품는다')
+
+  const links = read('../client/modeller/figure-v3-links.ts')
+  assert.match(links, /holdsThings\(asset\)/)
+  assert.match(links, /kind: 'set-capabilities', names/)
+  const editor = read('../client/modeller/v3-editor.ts')
+  /* A slice and `includes`, not a lazy regex over the whole editor: that hangs when it does not match. */
+  const start = editor.indexOf('<figure-v3-links')
+  const block = editor.slice(start, editor.indexOf('</figure-v3-links>', start))
+  assert.ok(start >= 0 && block.includes('@v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}'), '자리 절의 능력 선언이 편집기에 닿는다')
+})
+
+test('받는 종류가 없으면 자리를 만들지 않는다 — 형식에 「아무거나」가 없다', () => {
+  const links = read('../client/modeller/figure-v3-links.ts')
+  assert.match(links, /\?disabled=\$\{this\.locked \|\| !accepts\.length \|\| !capacityOk\}/)
+  assert.deepEqual(acceptsOf(' , ,'), [])
+})
+
+/* ── V2's proportional rules (user 2026-09-24: ROBOT_ARM at twice the size looked broken) ───────────── */
+
+const sizedPair = () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, { id: 'base', size: { x: 200, y: 100, z: 200 }, position: { x: 0, y: 50, z: 0 } })
+  asset = addV3Primitive(asset, { id: 'flange', kind: 'cylinder', dimensions: { radius: 20, length: 10 }, position: { x: 0, y: 95, z: 0 } })
+  asset.document.model.inputs.push({ id: 'size.y', unit: 'mm', min: 1, max: 20000, role: 'design' } as never)
+  asset.designInputs['size.y'] = 100
+  return asset
+}
+
+test('비례 — 인스턴스 크기의 몫을 따르는 치수는 비례로 읽고, 「남은 만큼 채우기」는 비례가 아니다', () => {
+  const asset = sizedPair()
+  assert.equal(dimensionNow(asset, 'flange', 'y'), 10, '원기둥의 Y 는 길이')
+  assert.equal(dimensionNow(asset, 'flange', 'x'), 20, '원기둥의 X 는 반지름')
+  const share = applyV3Authoring(asset, { kind: 'link-dimension', part: 'flange', axis: 'y', source: { of: 'instance', axis: 'y' }, times: 0.1 })
+  assert.deepEqual(followOf(share, 'flange', 'y'), { of: 'instance', axis: 'y', times: 0.1 })
+
+  /* V2's span: the size less what the others take -- a sum, not a share (ROBOT_ARM's tool flange). */
+  const fill = structuredClone(asset)
+  const m = fill.document.model as unknown as { nodes: { id: string; op: string; args: string[]; outputs: Record<string, string> }[]; constants: { id: string; unit: string; value: number }[] }
+  m.constants.push({ id: 'k.gaps', unit: 'mm', value: -90 })
+  m.nodes.push({ id: 'flange.free', op: 'add@1', args: ['size.y', 'k.gaps'], outputs: { value: 'flange.free.value' } })
+  m.nodes.push({ id: 'flange.dimension.y', op: 'mul@1', args: ['flange.free.value', m.constants.find(c => c.value === 1)?.id ?? 'k.one'], outputs: { value: 'flange.dimension.y.value' } })
+  if (!m.constants.some(c => c.value === 1)) m.constants.push({ id: 'k.one', unit: 'ratio', value: 1 })
+  assert.deepEqual(followOf(fill as V3Asset, 'flange', 'y'), { of: 'expression' })
+
+  /* Before any link the shape reads the measure directly; a worked-out one there is not 「고정」 (ROBOT_ARM on :3300). */
+  const direct = structuredClone(asset)
+  const d = direct.document.model as unknown as typeof m
+  d.constants.push({ id: 'k.gaps', unit: 'mm', value: -90 })
+  d.nodes.push({ id: 'flange.free', op: 'add@1', args: ['size.y', 'k.gaps'], outputs: { value: 'flange.free.value' } })
+  d.nodes.find(n => n.id === 'flange.shape')!.args[1] = 'flange.free.value'
+  assert.deepEqual(followOf(direct as V3Asset, 'flange', 'y'), { of: 'expression' })
+  assert.deepEqual(followOf(asset, 'flange', 'y'), { of: 'own' }, '제 숫자는 고정')
+})
+
+test('자리를 크기에 비례로 두면 그렇게 읽고, 다시 권하지 않는다', () => {
+  let asset = sizedPair()
+  asset = applyV3Authoring(asset, { kind: 'scale-position', part: 'flange', axis: 'y' })
+  assert.equal(positionIsShare(asset, 'flange', 'y'), true)
+  assert.equal(positionIsShare(asset, 'base', 'y'), false)
+  const links = read('../client/modeller/figure-v3-links.ts')
+  assert.ok(links.includes("hasInstanceSize(asset, axis) && !positionIsShare(asset, this.partId, axis)"))
+  assert.ok(links.includes("this.command({ kind: 'scale-position', part: this.partId, axis })"))
+  assert.ok(links.includes("const times = Math.round((current / size) * 1e6) / 1e6"), '비례는 지금 치수의 몫')
+})
+
+test('놓일 수 있는 크기 — 남은 만큼 채우던 부품을 비례로 바꾸면 다시 재어 넓힌다', () => {
+  assert.equal(instanceRangeOf(createV3Asset('Probe')), undefined, '크기를 선언하지 않은 도형에는 범위가 없다')
+  let asset = sizedPair()
+  for (const axis of ['x', 'z'] as const) {
+    asset.document.model.inputs.push({ id: `size.${axis}`, unit: 'mm', min: 1, max: 20000, role: 'design' } as never)
+    asset.designInputs[`size.${axis}`] = 200
+  }
+  const y = asset.document.model.inputs.find(i => i.id === 'size.y')!
+  y.min = 90
+  y.max = 1000
+  const range = instanceRangeOf(asset)!
+  assert.deepEqual(range.declared.y, { min: 90, max: 1000 })
+  assert.deepEqual(range.measured.y, { min: 1, max: 1000 }, '기본 범위: 1 mm 에서 열 배')
+  assert.equal(rangeDiffers(range.declared, range.measured), true)
+  asset = applyV3Authoring(asset, { kind: 'declare-instance-size', range: range.measured, replace: true })
+  assert.equal(rangeDiffers(instanceRangeOf(asset)!.declared, instanceRangeOf(asset)!.measured), false, '다시 재면 같다')
+  const editor = read('../client/modeller/v3-editor.ts')
+  assert.ok(editor.includes("this.linkCommand({ kind: 'declare-instance-size', range: range.measured, replace: true })"))
+})
+