@things-factory/figure-ui 10.1.68 → 10.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.68",
+  "version": "10.1.70",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -27,8 +27,8 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.80",
-    "@hatiolab/things-scene": "^10.1.52",
+    "@hatiolab/figure-model": "^0.1.82",
+    "@hatiolab/things-scene": "^10.1.56",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
     "@operato/graphql": "^10.0.0",
@@ -40,8 +40,8 @@
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
     "@things-factory/ai-assistant": "^10.1.58",
-    "@things-factory/figure-service": "^10.1.68",
+    "@things-factory/figure-service": "^10.1.70",
     "three": "^0.185.1"
   },
-  "gitHead": "0afdbab94f3cc477d0db1807d810e9d01aeb67a1"
+  "gitHead": "7c9c614b0cb1d02d401211db76ec0ca0ead344af"
 }

package/test/browser/modeller-page.js

@@ -23,6 +23,19 @@ function sourceOf(kind, text) {
     asset.palette = { ...asset.palette, ...PALETTE }
     return serializeV3Asset(addV3Box(asset, { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }))
   }
+  if (kind === 'door') {
+    /* A frame, and a leaf set off it: 250 mm to the side and 100 mm in front, by its own numbers. */
+    let asset = createV3Asset('Door')
+    asset.palette = { ...asset.palette, ...PALETTE }
+    asset = addV3Box(asset, { id: 'frame', size: { x: 1600, y: 100, z: 150 }, position: { x: 0, y: 50, z: 0 } })
+    return serializeV3Asset(addV3Box(asset, { id: 'leaf', size: { x: 1400, y: 2200, z: 40 }, position: { x: 250, y: 1100, z: 100 } }))
+  }
+  if (kind === 'room') {
+    /* A room a recipe is put on: a 4 x 3 x 6 m box standing on the floor. */
+    const asset = createV3Asset('Room')
+    asset.palette = { ...asset.palette, ...PALETTE }
+    return serializeV3Asset(addV3Box(asset, { id: 'room', size: { x: 4000, y: 3000, z: 6000 }, position: { x: 0, y: 1500, z: 0 } }))
+  }
   throw Error(`no figure for ${kind}`)
 }
 
@@ -178,7 +191,7 @@ window.probe = {
 }
 
 window.harness = {
-  async mount(kind, text) {
+  async mount(kind, text, recipes = []) {
     const source = sourceOf(kind, text)
     const session = createV3ProductSession({
       load: async id => ({ id, source }),
@@ -187,6 +200,7 @@ window.harness = {
     await session.open('probe')
     const editor = document.createElement('figure-v3-editor')
     editor.session = session
+    editor.recipes = recipes
     editor.revision = 0
     /* The modeller page counts a change the same way: the editor re-reads the session on a new revision. */
     editor.addEventListener('v3-changed', () => (editor.revision = editor.revision + 1))

package/test/browser/modeller.check.mjs

@@ -13,8 +13,9 @@
  */
 import { test, describe, before, after } from 'node:test'
 import assert from 'node:assert/strict'
-import { readFileSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
+import { readdirSync, readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import { buildPage } from './build.mjs'
@@ -528,6 +529,220 @@ describe('a motion is changed where it is (2026-09-25)', () => {
   })
 })
 
+describe('the modeller made easier to find and to keep (2026-09-26 baseline)', () => {
+  /* The element on the page whose attribute or text is `key` (the check loads no translations: labels are keys). */
+  const find = (selector, key) =>
+    page().evaluateHandle(
+      (selector, key) => {
+        const deep = (root = document) => [...root.querySelectorAll(selector)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+        return deep().find(e => e.getAttribute('aria-label') === key || e.textContent?.trim().endsWith(key)) ?? null
+      },
+      selector,
+      key
+    )
+  const centre = handle => handle.evaluate(e => {
+    e.scrollIntoView({ block: 'center' })
+    const r = e.getBoundingClientRect()
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+  })
+
+  test('the bar offers move, turn and resize; a click puts that gizmo on the part, a second takes it off', async () => {
+    await mount('box')
+    await click(await read(() => probe.partOnPage('box')))
+    const resize = await find('button', 'figure.button.gizmo-scale')
+    assert.ok(await resize.evaluate(b => !!b && !b.disabled), 'resize is offered for a part of its own numbers')
+    await click(await centre(resize))
+    let s = await state()
+    assert.equal(s.mode, 'scale')
+    assert.ok(s.attached, 'the resize gizmo is on the box')
+    assert.equal(await resize.evaluate(b => b.getAttribute('aria-pressed')), 'true')
+    await click(await centre(resize))
+    s = await state()
+    assert.ok(!s.attached, 'pressed again, the gizmo goes')
+    assert.equal(await resize.evaluate(b => b.getAttribute('aria-pressed')), 'false')
+  })
+
+  test('a height typed into its field keeps the bottom on the floor, as the gizmo does', async () => {
+    await mount('box')
+    await click(await read(() => probe.partOnPage('box')))
+    const height = await find('input', 'box.size.y')
+    assert.ok(await height.evaluate(i => !!i), 'the height field')
+    const at = await centre(height)
+    await page().mouse.click(at.x, at.y, { clickCount: 3 })
+    await page().keyboard.type('1000')
+    await page().keyboard.press('Enter')
+    await sleep(600)
+    const now = await body('box')
+    assert.equal(Math.round(now.t[1] - now.dimensions.height / 2), 0, `bottom on the floor: centre ${now.t[1]}, height ${now.dimensions.height}`)
+    assert.equal(now.dimensions.height, 1000)
+  })
+
+  test('fastened to the floor, a leaf set off its frame stays where it stood', async () => {
+    await mount('door')
+    await click(await read(() => probe.row('leaf')))
+    const was = await body('leaf')
+    const box = await page().evaluate(() => {
+      const deep = (root = document) => [...root.querySelectorAll('label[toggle]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      const label = deep().find(l => l.textContent.includes('figure.label.stands-on-plane'))
+      label.scrollIntoView({ block: 'center' })
+      const r = label.querySelector('input').getBoundingClientRect()
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+    })
+    await click(box)
+    const fasten = await find('button', 'figure.button.fasten')
+    const start = await state()
+    await click(await centre(fasten))
+    const after = await state()
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    const now = await body('leaf')
+    assert.deepEqual([Math.round(now.t[0]), Math.round(now.t[2])], [Math.round(was.t[0]), Math.round(was.t[2])], `left-right and front-back kept: was ${was.t}, now ${now.t}`)
+  })
+
+  test('a part is shown while a control is at least a value: chosen in the motion tab, one step each, drawn or not', async () => {
+    await mount('arm')
+    await click(await read(() => probe.row('upper-arm')))
+    await click(await read(() => probe.tab('figure.label.motion')))
+    const shownSelect = () =>
+      page().evaluateHandle(() => {
+        const deep = (root = document) => [...root.querySelectorAll('select')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+        return deep().find(s => s.previousElementSibling?.textContent?.trim() === 'figure.label.shown-when') ?? null
+      })
+    const select = await shownSelect()
+    assert.ok(await select.evaluate(s => !!s), 'the motion tab asks when the part is shown')
+    const control = await select.evaluate(s => s.options[1].value)
+    const start = await state()
+    await select.evaluate(s => s.scrollIntoView({ block: 'center' }))
+    await select.select(control)
+    await sleep(500)
+    assert.equal((await state()).revision, start.revision + 1, 'one step')
+    const drawn = () => read(() => document.querySelector('figure-v3-editor').session.read().geometry.find(g => g.id === 'upper-arm')?.visible)
+    const { value, atLeast } = await read(control => {
+      const asset = JSON.parse(document.querySelector('figure-v3-editor').session.source())
+      const node = asset.document.model.nodes.find(n => n.op === 'at-least@1' && n.args[0] === control)
+      return { value: asset.stateDefaults[control], atLeast: asset.document.model.constants.find(c => c.id === node.args[1]).value }
+    }, control)
+    assert.equal(await drawn(), value >= atLeast, `${control} at ${value}, shown from ${atLeast}`)
+    const at = await page().evaluateHandle(() => {
+      const deep = (root = document) => [...root.querySelectorAll('input[type=number]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep().find(i => i.previousElementSibling?.textContent?.trim().startsWith('figure.label.shown-at-least')) ?? null
+    })
+    assert.ok(await at.evaluate(i => !!i), 'with a control chosen, its threshold is asked')
+    await at.evaluate(i => i.scrollIntoView({ block: 'center' }))
+    await at.click({ clickCount: 3 })
+    await page().keyboard.type('100000')
+    await page().keyboard.press('Tab')
+    await sleep(500)
+    assert.equal(await drawn(), false, 'past what the control reaches now, the part is not drawn')
+    const back = await shownSelect()
+    await back.select('')
+    await sleep(500)
+    assert.equal(await drawn(), true, 'always again')
+  })
+})
+
+describe('a part follows the figure size in one step (follow-size, 2026-09-26)', () => {
+  test('one click on a figure with no size: its size is declared from the part, said in a line, and the part follows it', async () => {
+    await mount('box')
+    await click(await read(() => probe.row('box')))
+    const at = await page().evaluate(() => {
+      const deep = (root = document) => [...root.querySelectorAll('button[follow-size]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      const b = deep()[0]
+      if (!b) return null
+      b.scrollIntoView({ block: 'center' })
+      const r = b.getBoundingClientRect()
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+    })
+    assert.ok(at, 'the button is offered for a box that follows nothing')
+    const start = await state()
+    await click(at)
+    const after = await state()
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    assert.deepEqual(await read(() => probe.fields('size.')), { 'size.x': 400, 'size.y': 400, 'size.z': 400 }, 'the size is the box as it stands')
+    const notice = await page().evaluate(() => {
+      const deep = (root = document) => [...root.querySelectorAll('.notice')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep()[0]?.textContent?.trim() ?? null
+    })
+    assert.ok(notice?.includes('figure.text.size-declared-to-follow'), `a line says so: ${notice}`)
+    const grown = await read(() => {
+      const editor = document.querySelector('figure-v3-editor')
+      editor.session.apply([{ kind: 'set-design', input: 'size.x', unit: 'mm', value: 800 }])
+      return editor.session.read().geometry.find(g => g.id === 'box').shape.dimensions
+    })
+    assert.equal(Math.round(grown.width), 800, 'twice the size, twice the box')
+  })
+})
+
+describe('a recipe put onto a part: chosen, filled in, one step (ADR-0095, 2026-09-26)', () => {
+  /* The recipes figure-model ships: the build named by FIGURE_MODEL, else the installed one. */
+  const recipeDir = () => {
+    const base = process.env.FIGURE_MODEL ? resolve(process.env.FIGURE_MODEL) : dirname(createRequire(import.meta.url).resolve('@hatiolab/figure-model/package.json'))
+    return join(base, 'recipes')
+  }
+  const recipes = () => readdirSync(recipeDir()).filter(f => f.endsWith('.json')).sort().map(f => JSON.parse(readFileSync(join(recipeDir(), f), 'utf-8')))
+  const at = selector =>
+    page().evaluate(selector => {
+      const deep = (root = document) => [...root.querySelectorAll(selector)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      const e = deep()[0]
+      if (!e) return null
+      e.scrollIntoView({ block: 'center' })
+      const r = e.getBoundingClientRect()
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2, disabled: !!e.disabled }
+    }, selector)
+  const parts = () => read(() => document.querySelector('figure-v3-editor').session.read().geometry.map(g => g.id))
+
+  test('with no part chosen the door waits; on the room it opens its form, and put in makes the frame, the leaves and the lamp', async () => {
+    await read((text, list) => harness.mount('room', text, list), null, recipes())
+    await sleep(2500)
+    const idle = await at('button[recipe="sliding-door"]')
+    assert.ok(idle, 'the sliding door is offered')
+    assert.ok(idle.disabled, 'it waits for a part to be chosen')
+    await click(await read(() => probe.row('room')))
+    await click(await at('button[recipe="sliding-door"]'))
+    const share = await page().evaluateHandle(() => {
+      const deep = (root = document) => [...root.querySelectorAll('input[param="share"]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep()[0] ?? null
+    })
+    assert.equal(await share.evaluate(i => i.value), '35', 'a share is typed as a percentage')
+    await share.evaluate(i => i.scrollIntoView({ block: 'center' }))
+    await share.click({ clickCount: 3 })
+    await page().keyboard.type('50')
+    await page().keyboard.press('Tab')
+    const start = await state()
+    await click(await at('div[recipe-actions] button[insert]'))
+    const after = await state()
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(await read(() => document.querySelector('figure-v3-editor').recipeError), '', 'the recipe went in')
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    const ids = await parts()
+    for (const part of ['frame', 'left', 'right', 'lamp']) assert.ok(ids.includes(`sliding-door-1-${part}`), `${part} is in`)
+    const frame = await body('sliding-door-1-frame')
+    assert.equal(Math.round(frame.dimensions.right - frame.dimensions.left), 2000, 'half the room\'s 4000 mm')
+  })
+
+  test('a door the room cannot take is refused in the form, in the kernel\'s words, and nothing is added', async () => {
+    const before = await parts()
+    const share = await page().evaluateHandle(() => {
+      const deep = (root = document) => [...root.querySelectorAll('input[param="share"]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep()[0] ?? null
+    })
+    await share.evaluate(i => i.scrollIntoView({ block: 'center' }))
+    await share.click({ clickCount: 3 })
+    await page().keyboard.type('5')
+    await page().keyboard.press('Tab')
+    const start = await state()
+    await click(await at('div[recipe-actions] button[insert]'))
+    assert.equal((await state()).revision, start.revision, 'no step')
+    assert.deepEqual(await parts(), before, 'nothing added')
+    const said = await page().evaluate(() => {
+      const deep = (root = document) => [...root.querySelectorAll('div[recipe-form] p[error]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep()[0]?.textContent ?? ''
+    })
+    assert.match(said, /steps\[\d+\]/, `the kernel's sentence, with the step: ${said}`)
+  })
+})
+
 test('the page raised no error', () => {
   assert.deepEqual(opened.errors, [])
 })

package/test/modeller-route.test.ts

@@ -28,3 +28,12 @@ test('the catalogue opens figures through the one path', () => {
   const list = read('../client/pages/figure-list-page.ts')
   assert.match(list, /navigate\(modellerPathOf\(figure\)\)/)
 })
+
+test('reloading or closing the tab with unsaved work asks first — the shell does not ask canDeactivate then (09-26)', () => {
+  const page = read('../client/pages/figure-v3-modeller-page.ts')
+  const hold = page.slice(page.indexOf('private holdUnsaved'), page.indexOf('connectedCallback()'))
+  assert.match(hold, /session\.read\(\)\.dirty/, 'only when there is something unsaved')
+  assert.match(hold, /event\.preventDefault\(\)/)
+  assert.match(page, /addEventListener\('beforeunload', this\.holdUnsaved\)/)
+  assert.match(page, /removeEventListener\('beforeunload', this\.holdUnsaved\)/)
+})

package/test/v3-gizmo.test.ts

@@ -138,3 +138,47 @@ test('원기둥 · 구도 크기 기즈모가 먹는다 — 단면은 원으로'
   const radii = gizmoChanges('ball', ball, { scale: [1, 1, 0.5] }, values).map((c: any) => c.value / values[c.input])
   assert.equal(new Set(radii.map((r: number) => r.toFixed(2))).size, 1, '구의 세 반지름이 한 배율로 — 타원체가 되지 않는다')
 })
+
+/*
+ * 높이를 숫자로 적어도 아랫면이 그 자리에 있다 — 손잡이로 키울 때와 같게. 2200 을 적은 기둥이 바닥 아래로 933 mm
+ * 묻혔다(09-26). 돌려 세운 부품은 그 높이가 위아래가 아니라 건드리지 않는다.
+ */
+test('높이 칸 — 아랫면을 지킨다, 손잡이처럼', async () => {
+  const { keepBottomChanges } = await import('../client/modeller/v3-gizmo.ts')
+  let asset = createV3Asset('Post')
+  asset = addV3Box(asset, { id: 'post', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } })
+  asset = addV3Primitive(asset, { id: 'drum', kind: 'cylinder', dimensions: { radius: 50, length: 100 }, position: { x: 0, y: 300, z: 0 } })
+  asset = addV3Primitive(asset, { id: 'roller', kind: 'cylinder', dimensions: { radius: 30, length: 500 }, position: { x: 0, y: 30, z: 0 }, rotation: { x: 90, y: 0, z: 0 } })
+  const bottom = (a: typeof asset, part: string) => {
+    const g = compileV3Asset(a).evaluate().geometry.find(o => o.id === part)! as unknown as { pose: { t: number[] } }
+    return g.pose.t[1]!
+  }
+  const grow = (part: string, input: string, value: number) => {
+    const reach = gizmoReachOf(asset, part)
+    const changes = [{ kind: 'set-design', input, unit: 'mm', value } as never, ...keepBottomChanges(part, reach, input, value, asset.designInputs)]
+    return apply(asset, changes)
+  }
+  const postH = gizmoReachOf(asset, 'post').sizes![1]
+  const tall = grow('post', postH, 2200)
+  assert.equal(bottom(tall, 'post') - 2200 / 2, 0, '기둥 아랫면이 바닥에')
+  const drumH = gizmoReachOf(asset, 'drum').round!.along[0]!
+  assert.equal(bottom(grow('drum', drumH, 300), 'drum') - 300 / 2, 300 - 100 / 2, '원기둥도 아랫면이 제자리')
+  const rollerLength = gizmoReachOf(asset, 'roller').round!.along[0]!
+  assert.deepEqual(keepBottomChanges('roller', gizmoReachOf(asset, 'roller'), rollerLength, 800, asset.designInputs), [], '누운 롤러의 길이는 위아래가 아니다')
+  assert.deepEqual(keepBottomChanges('post', gizmoReachOf(asset, 'post'), gizmoReachOf(asset, 'post').sizes![0], 800, asset.designInputs), [], '폭은 가운데 그대로')
+  assert.ok(read('../client/modeller/v3-editor.ts').includes('keepBottomChanges('), '숫자 칸이 부른다')
+})
+
+/* 손잡이는 키를 몰라도 찾는다 — 도구 막대에 옮기기 · 돌리기 · 크기, 제 숫자로 놓인 부품에만 (09-26). */
+test('도구 막대의 옮기기 · 돌리기 · 크기 — 키와 같은 길, 되쓸 수 있는 것만', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  const bar = editor.slice(editor.indexOf('return html`<ox-canvas-bar'), editor.indexOf('</ox-canvas-bar>'))
+  assert.ok(bar.includes("this.renderGizmoTools(!unavailable && this.middle === 'edit')"), '편집 중에만')
+  const tools = editor.slice(editor.indexOf('  private renderGizmoTools('), editor.indexOf("  /** The modeller's keys"))
+  for (const [mode, key, can] of [['translate', 'W', 'translate'], ['rotate', 'E', 'rotate'], ['scale', 'R', 'scale']])
+    assert.ok(tools.includes(`mode: '${mode}'`) && tools.includes(`key: '${key}'`) && tools.includes(`can: !!reach?.${can}`), mode)
+  assert.ok(tools.includes('@click=${() => this.useGizmo(tool.mode)}'))
+  assert.match(editor, /action === 'scale'\) canvas && this\.useGizmo\(action\)/, '키도 같은 길로 — 눌린 단추가 맞다')
+  const ko = JSON.parse(read('../translations/ko.json'))
+  assert.deepEqual(['translate', 'rotate', 'scale'].map(m => ko['figure.button.gizmo-' + m]), ['옮기기', '돌리기', '크기 바꾸기'])
+})

package/test/v3-links.test.ts

@@ -303,6 +303,38 @@ test('붙일 때 면 위 어디에 — 그 면을 가로지르는 두 축만,
   assert.deepEqual(leaf.pose.t.map(Math.round), [500, 1000, 55], '문짝 아래가 문틀 아래에, 앞이 문틀 앞에')
 })
 
+test('붙여도 제자리 — 폼은 지금 서 있는 자리를 가운데서 거리로 채운다 (문짝이 문틀 앞 100 mm 에서 가운데로 옮겨졌다, 09-26)', async () => {
+  const { alignOf, placeKeptOf } = await import('../client/modeller/v3-links.ts')
+  const { compileV3Asset } = await import('@hatiolab/figure-model')
+  let asset = createV3Asset('Door')
+  asset = addV3Box(asset, { id: 'frame', size: { x: 1600, y: 100, z: 150 }, position: { x: 300, y: 50, z: 0 } })
+  asset = addV3Box(asset, { id: 'leaf', size: { x: 1400, y: 2200, z: 40 }, position: { x: 250, y: 1100, z: 100 } })
+  const where = (a: V3Asset) => compileV3Asset(a).evaluate().geometry.find(g => g.id === 'leaf')!.pose.t.map(v => Math.round(v))
+  for (const target of ['plane', { part: 'frame', face: 'top' }] as const) {
+    const kept = placeKeptOf(asset, 'leaf', target)
+    const align = alignOf(asset, 'leaf', target, kept.align, kept.alignMm)
+    const to = target === 'plane' ? { plane: 'mounting-plane' as const } : target
+    const fastened = applyV3Authoring(asset, { kind: 'attach', part: 'leaf', face: 'bottom', to, ...(align ? { align } : {}) } as never)
+    const [before, after] = [where(asset), where(fastened)]
+    assert.deepEqual([after[0], after[2]], [before[0], before[2]], `${JSON.stringify(target)}: 앞뒤·좌우는 그대로`)
+  }
+  assert.deepEqual(placeKeptOf(asset, 'leaf', { part: 'frame', face: 'top' }), { align: { x: 'mm', z: 'mm' }, alignMm: { x: -50, z: 100 } })
+  const centred = addV3Box(createV3Asset('C'), { id: 'a', size: { x: 10, y: 10, z: 10 }, position: { x: 0, y: 5, z: 0 } })
+  assert.deepEqual(placeKeptOf(centred, 'a', 'plane'), { align: {}, alignMm: {} }, '가운데 있던 것은 가운데로')
+
+  /* The form fills it in whenever the aim changes, and does not offer a part that hangs from this one. */
+  const { hangsFrom } = await import('../client/modeller/v3-links.ts')
+  let row = addV3Box(createV3Asset('Row'), { id: 'plate', size: { x: 1000, y: 50, z: 400 }, position: { x: 0, y: 700, z: 0 } })
+  row = addV3Box(row, { id: 'roller', size: { x: 60, y: 60, z: 400 }, position: { x: 0, y: 760, z: 0 } })
+  row = addV3Box(row, { id: 'cap', size: { x: 20, y: 20, z: 20 }, position: { x: 0, y: 800, z: 0 } })
+  row = applyV3Authoring(row, { kind: 'attach', part: 'roller', face: 'bottom', to: { part: 'plate', face: 'top' } })
+  row = applyV3Authoring(row, { kind: 'attach', part: 'cap', face: 'bottom', to: { part: 'roller', face: 'top' } })
+  assert.deepEqual([hangsFrom(row, 'roller', 'plate'), hangsFrom(row, 'cap', 'plate'), hangsFrom(row, 'plate', 'roller')], [true, true, false])
+  const form = read('../client/modeller/figure-v3-links.ts')
+  assert.equal(form.match(/this\.aimAt\(asset, \{ \.\.\.f, (toPlane|target|targetFace):/g)?.length, 3, '바닥 · 상대 부품 · 상대 면을 바꿀 때마다')
+  assert.ok(form.includes('!hangsFrom(asset, one, this.partId)'))
+})
+
 test('따라 움직이는 관절 — 같은 방식으로 움직이고 제 조작값이 있는 관절만 고르고, 기록에는 배율과 더하기만 (집게 두 손가락, 09-25)', async () => {
   const { leadersFor, motionJoint } = await import('../client/modeller/v3-links.ts')
   const { compileV3Asset } = await import('@hatiolab/figure-model')
@@ -343,7 +375,7 @@ test('면은 도형이 정한다 — 문틀(portal)은 바깥 여섯에 개구
   asset = addV3Primitive(asset, {
     id: 'frame',
     kind: 'portal',
-    dimensions: { left: -550, right: 550, bottom: 0, top: 2200, openingLeft: -450, openingRight: 450, openingTop: 2100, depth: 150 },
+    dimensions: { width: 1100, height: 2200, depth: 150, jamb: 100, head: 100 },
     position: { x: 0, y: 0, z: 0 }
   })
   asset = addV3Primitive(asset, { id: 'ball', kind: 'sphere', dimensions: { radiusX: 50, radiusY: 50, radiusZ: 50 }, position: { x: 0, y: 0, z: 0 } })
@@ -528,3 +560,61 @@ test('벽 배치 — 장착 평면은 Z = 0, 등으로 붙이고 가로질러 X
   const form = read('../client/modeller/figure-v3-links.ts')
   assert.ok(form.includes('(!f.toPlane || plane.faces.includes(face as V3Face))'), '평면에 붙일 때는 평면이 받는 면만')
 })
+
+test('부품 칸의 두 제목이 같은 말이 아니다 — 자리 숫자는 「위치와 크기」, 붙이기 칸은 「붙이기」 (09-26)', () => {
+  const ko = JSON.parse(read('../translations/ko.json'))
+  assert.notEqual(ko['figure.label.placement'], ko['figure.label.group-placement-size'])
+  assert.equal(ko['figure.label.placement'], '붙이기')
+})
+
+/*
+ * 부품이 보이는 때 — 늘, 또는 조작값이 얼마 이상일 때(문이 열리면 켜지는 램프). figure-model 에 명령은 있었지만
+ * 고르는 칸이 없었다(09-26 기준 측정).
+ */
+test('보이는 때 — 명령이 남긴 것을 읽고, 폼은 그 명령을 낸다', async () => {
+  const { shownWhenOf, visibilityControlsOf } = await import('../client/modeller/v3-links.ts')
+  const { editV3Part } = await import('@hatiolab/figure-model')
+  let asset = createV3Asset('Gate')
+  asset = addV3Box(asset, { id: 'frame', size: { x: 1200, y: 60, z: 200 }, position: { x: 0, y: 30, z: 0 } })
+  asset = addV3Box(asset, { id: 'door', size: { x: 1000, y: 2000, z: 40 }, position: { x: 0, y: 1060, z: 0 } })
+  asset = addV3Box(asset, { id: 'lamp', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 2200, z: 0 } })
+  asset = applyV3Authoring(asset, { kind: 'attach', part: 'frame', face: 'bottom', to: { plane: 'mounting-plane' } })
+  asset = applyV3Authoring(asset, { kind: 'attach', part: 'door', face: 'bottom', to: { part: 'frame', face: 'top' } })
+  assert.deepEqual(visibilityControlsOf(asset), [], '조작값이 없으면 고를 것도 없다')
+  asset = moving(asset, 'door', { kind: 'slide', axis: 'x', id: 'gate-open', min: 0, max: 900 })
+  assert.deepEqual(visibilityControlsOf(asset).map(c => [c.id, c.min, c.max, c.unit]), [['gate-open', 0, 900, 'mm']])
+  assert.equal(shownWhenOf(asset, 'lamp'), null, '늘 보인다')
+  const shown = editV3Part(asset, { kind: 'set-visibility', target: 'lamp', shownWhen: { input: 'gate-open', atLeast: 9 } })
+  assert.deepEqual(shownWhenOf(shown, 'lamp'), { input: 'gate-open', atLeast: 9 })
+  assert.equal(shownWhenOf(editV3Part(shown, { kind: 'set-visibility', target: 'lamp', shownWhen: null }), 'lamp'), null)
+  const form = read('../client/modeller/figure-v3-links.ts')
+  const section = form.slice(form.indexOf('  private renderShown('), form.indexOf('  private renderMotion('))
+  assert.ok(section.includes("kind: 'set-visibility'"), '폼은 그 명령을 낸다')
+  assert.ok(form.includes('${this.renderShown(asset)}'), '움직임 칸에')
+})
+
+/* 문틀은 폭 · 높이 · 깊이로 — 상자처럼 크기를 따르고, 손잡이로 키운다 (figure-model portal-profile@2, 09-26). */
+test('팔레트의 문틀은 문 크기로 서고, 세 축 모두 크기를 따를 수 있고, 손잡이로 키울 수 있다', async () => {
+  const { paletteRecipe } = await import('../client/modeller/v3-palette.ts')
+  const { gizmoReachOf } = await import('../client/modeller/v3-gizmo.ts')
+  const { addV3Primitive: add } = await import('@hatiolab/figure-model')
+  const asset = add(createV3Asset('Frame'), paletteRecipe('portal', 'frame'))
+  assert.deepEqual(followableAxes(asset, 'frame'), ['x', 'y', 'z'])
+  const reach = gizmoReachOf(asset as never, 'frame')
+  assert.equal(reach.scale, true)
+  assert.deepEqual(reach.sizes, ['frame.dimension.width', 'frame.dimension.height', 'frame.dimension.depth'])
+  assert.deepEqual([asset.designInputs['frame.dimension.width'], asset.designInputs['frame.dimension.height']], [1000, 2200], '문 크기로')
+})
+
+/* 크기를 따라감 한 번 — 치수 칸의 단추 하나, 크기를 대신 정했으면 한 줄로 말한다 (ADR 판정 Q1, 09-26). */
+test('치수 칸 — 「도형 크기를 따라감」 단추는 follow-size 한 번, 다 따르면 사라진다; 크기를 대신 정하면 한 줄', () => {
+  const form = read('../client/modeller/figure-v3-links.ts')
+  const dims = form.slice(form.indexOf('  private renderDimensions('), form.indexOf('  private renderDimensions(') + 1200)
+  assert.ok(dims.includes("this.command({ kind: 'follow-size', part: this.partId })"))
+  assert.ok(dims.includes("followOf(asset, this.partId, axis).of === 'instance'"), '다 따르면 단추가 없다')
+  const editor = read('../client/modeller/v3-editor.ts')
+  assert.ok(editor.includes("if (action.kind === 'follow-size' && !hadSize)"), '크기를 대신 정했을 때만')
+  assert.ok(editor.includes('<div role="status" class="notice">'))
+  const ko = JSON.parse(read('../translations/ko.json'))
+  assert.match(ko['figure.text.size-declared-to-follow'], /\{x\} × \{y\} × \{z\} mm/)
+})

package/test/v3-recipes.test.ts

@@ -0,0 +1,60 @@
+/*
+ * **조각 칸** (ADR-0095, 2026-09-26). 문 · 롤러 줄을 한 단계로 넣는다 — 부품을 고른 뒤에, 몇 개의 수와 선택으로.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { recipeFieldOf, recipeReady, recipesOf, recipeValueOf, recipeWord } from '../client/modeller/v3-recipes.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+const share = { name: 'share', kind: 'ratio' as const, default: 0.35, min: 0.05, max: 0.95 }
+
+test('비율은 백분율로 보이고 받는다; 빈 칸은 기본값; 선택은 선택지 중에서만', () => {
+  assert.equal(recipeFieldOf(share, 0.35), '35')
+  assert.equal(recipeValueOf(share, '50'), 0.5)
+  assert.equal(recipeValueOf(share, ''), 0.35)
+  assert.equal(recipeValueOf({ name: 'pitch', kind: 'mm', default: 200 }, '400'), 400)
+  const leaves = { name: 'leaves', kind: 'choice' as const, default: 2, options: [1, 2] }
+  assert.equal(recipeValueOf(leaves, '1'), 1, '선택지의 값 그대로 — 수는 수로')
+  assert.equal(recipeValueOf(leaves, '3'), 2)
+  assert.equal(recipeValueOf({ name: 'lamp', kind: 'flag', default: true }, false), false)
+})
+
+test('말은 화면의 언어로, 없으면 영어로; 부품용 조각은 부품을 고른 뒤에; 조각이 아닌 행은 빠진다', () => {
+  assert.equal(recipeWord({ ko: '미닫이 문', en: 'sliding door' }, 'ko'), '미닫이 문')
+  assert.equal(recipeWord({ ko: '미닫이 문', en: 'sliding door' }, 'ja'), 'sliding door')
+  assert.equal(recipeReady({ target: 'part' }, ''), false)
+  assert.equal(recipeReady({ target: 'part' }, 'room'), true)
+  assert.equal(recipeReady({ target: 'figure' }, ''), true)
+  assert.deepEqual(recipesOf([{ source: '{"name":"a","steps":[]}' }, { source: 'not json' }, { source: '{"x":1}' }]).map(r => r.name), ['a'])
+})
+
+test('편집기는 조각을 도형이 선 그대로 풀어 한 단계로 넣고, 거절은 폼에 커널의 말로', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  const insert = editor.slice(editor.indexOf('  private insertRecipe('), editor.indexOf('  /** The design values of the asset being edited. */'))
+  assert.ok(insert.includes('v3RecipeIdFor(asset, checked)') && insert.includes('resolveV3Recipe(checked'), '다음 빈 이름으로 푼다')
+  assert.ok(insert.includes('this.session!.applyRecipe(steps)'), '한 단계')
+  assert.ok(insert.includes('this.recipeError = error instanceof Error ? error.message : String(error)'), '거절은 그대로')
+  const session = read('../client/modeller/v3-product-session.ts')
+  assert.ok(session.includes("workspace.applyProposal({ origin: 'ui', context: at.context, expectedRevision: at.expectedRevision, steps })"), '사람이 넣은 것')
+  const page = read('../client/pages/figure-v3-modeller-page.ts')
+  assert.ok(page.includes('.recipes=${this.recipes}') && page.includes('fetchFigureRecipes()'), '페이지가 목록을 읽어 건넨다')
+})
+
+test('관리 화면 — 주소에서 도메인을 읽고, 제 조각과 상위 도메인 조각을 가르고, 값이 받는 범위를 적는다', async () => {
+  const { subdomainOf, recipeIsOwn, paramRangeOf } = await import('../client/modeller/v3-recipes.ts')
+  assert.equal(subdomainOf('/domain/plant-1/figure-recipes'), 'plant-1')
+  assert.equal(subdomainOf('/figure-recipes'), '')
+  assert.equal(recipeIsOwn({ domain: { subdomain: 'plant-1' } }, 'plant-1'), true)
+  assert.equal(recipeIsOwn({ domain: { subdomain: 'system' } }, 'plant-1'), false)
+  assert.equal(recipeIsOwn({ domain: { subdomain: 'system' } }, ''), false, '주소가 도메인을 말하지 않으면 제 것이 아니다')
+  assert.equal(paramRangeOf(share), '5 – 95 %')
+  assert.equal(paramRangeOf({ name: 'leaves', kind: 'choice', default: 2, options: [1, 2] }), '1 / 2')
+  const page = read('../client/pages/figure-recipe-page.ts')
+  assert.ok(page.includes('applyV3Recipe(room.asset, parseV3Recipe(recipe)'), '미리보기는 검사하는 방에 넣은 모습')
+  assert.ok(page.includes("saveFigureRecipe(row.source, 'draft')"), '상위 도메인 것은 초안으로 복사해 고친다')
+  assert.ok(page.includes('OxPrompt.open('), '지우기 전에 앱의 확인 창으로 묻는다')
+  assert.ok(read('../things-factory.config.js').includes("{ tagname: 'figure-recipe-page', page: 'figure-recipes' }"))
+})

package/things-factory.config.js

@@ -5,6 +5,7 @@ export default {
   route,
   routes: [
     { tagname: 'figure-list-page', page: 'figure-list' },
+    { tagname: 'figure-recipe-page', page: 'figure-recipes' },
     /* One modeller since ADR-0087 step 5; the old V3 address is an alias. The shell builds the DOM from this table. */
     { tagname: 'figure-v3-modeller-page', page: 'figure-modeller' },
     { tagname: 'figure-v3-modeller-page', page: 'figure-v3-modeller' }

package/translations/en.json

@@ -189,7 +189,44 @@
   "figure.label.part-position": "position (centre)",
   "figure.label.part-size": "size",
   "figure.label.parts": "parts",
-  "figure.label.placement": "position and size",
+  "figure.label.gizmo-tools": "drag to change",
+  "figure.button.gizmo-translate": "move",
+  "figure.button.gizmo-rotate": "turn",
+  "figure.button.gizmo-scale": "resize",
+  "figure.text.gizmo-not-own": "this part is placed by another part or by the size, so it cannot be dragged",
+  "figure.label.shown-when": "shown when",
+  "figure.label.shown-always": "always",
+  "figure.label.shown-while": "while {control} is at least",
+  "figure.label.shown-at-least": "at least",
+  "figure.button.follow-size": "follow the figure size",
+  "figure.text.size-declared-to-follow": "the figure size to follow was set from its parts: {x} × {y} × {z} mm.",
+  "figure.label.recipes": "recipes",
+  "figure.text.recipe-needs-a-part": "choose the part to put it on first.",
+  "figure.text.recipe-onto": "onto {part}.",
+  "figure.button.insert-recipe": "put in",
+  "figure.text.recipes-intro": "a recipe is a group of parts made often -- a door, a roller row. In the modeller, choose a part and put it in at once.",
+  "figure.text.recipes-empty": "no recipes yet.",
+  "figure.label.recipe-draft": "draft",
+  "figure.label.recipe-inherited": "parent domain",
+  "figure.text.recipe-target-part": "put onto a chosen part",
+  "figure.text.recipe-target-figure": "put onto the whole figure",
+  "figure.text.recipe-own": "this domain's recipe",
+  "figure.text.recipe-inherited": "the {domain} domain's recipe; copy it here to change it",
+  "figure.label.recipe-param": "value",
+  "figure.label.recipe-default": "default",
+  "figure.label.recipe-range": "range",
+  "figure.label.yes": "yes",
+  "figure.label.no": "no",
+  "figure.button.recipe-release": "release",
+  "figure.button.recipe-to-draft": "back to draft",
+  "figure.button.recipe-delete": "delete",
+  "figure.button.recipe-copy-in": "copy to this domain",
+  "figure.button.recipe-edit-source": "source (JSON)",
+  "figure.text.recipe-edit-source": "saved, it is put into an empty room first and not saved if it does not go in. A new name makes a new recipe.",
+  "figure.text.recipe-preview": "put into a 4 x 3 x 6 m room with its defaults, shown with the room resized.",
+  "figure.text.recipe-delete-confirm": "delete the {name} recipe. figures already made with it do not change.",
+  "figure.title.recipes": "recipes",
+  "figure.label.placement": "fastening",
   "figure.label.placement-ceiling": "ceiling-based (ceiling)",
   "figure.label.placement-center": "center-based (center)",
   "figure.label.placement-floor": "floor-based (floor)",
@@ -523,13 +560,8 @@
   "figure.label.field-radius": "Radius",
   "figure.label.field-length": "Length",
   "figure.label.field-round": "Corner radius",
-  "figure.label.field-left": "Left",
-  "figure.label.field-right": "Right",
-  "figure.label.field-bottom": "Bottom",
-  "figure.label.field-top": "Top",
-  "figure.label.field-openingLeft": "Opening left",
-  "figure.label.field-openingRight": "Opening right",
-  "figure.label.field-openingTop": "Opening top",
+  "figure.label.field-jamb": "jamb",
+  "figure.label.field-head": "head",
   "figure.label.field-radiusX": "Radius X",
   "figure.label.field-radiusY": "Radius Y",
   "figure.label.field-radiusZ": "Radius Z",