@things-factory/figure-ui 10.1.208 → 10.1.210

package/test/browser/modeller-revision.check.mjs

@@ -72,13 +72,17 @@ async function mode(which) {
 describe('work counted on the robot arm', () => {
   before(() => mount('arm'))
 
-  /* The motion tab is drawn out of sight with the rest: the selected part's motion is evaluated at its two ends. */
-  test('picking a part on the canvas compiles nothing; it evaluates only the two ends of the part\'s motion', async () => {
+  /*
+    The tabs are drawn out of sight with the rest: the selected part's motion is evaluated at its two ends, and the size
+    editor on 「배치」 asks once which of the parent's axes each of the part's own lies along, the figure at rest
+    (figureAxisPairsOf, ADR-0159 3) -- one evaluation for all three rows.
+  */
+  test('picking a part on the canvas compiles nothing; it evaluates the two ends of the part\'s motion and its axes at rest', async () => {
     const part = 'upper-arm'
     const point = await read(id => probe.partOnPage(id), part)
     const { before, spent } = await counted(() => click(point))
     assert.equal((await read(() => probe.state())).selected, part)
-    assert.deepEqual(spent, { compiles: 0, evaluations: 2 })
+    assert.deepEqual(spent, { compiles: 0, evaluations: 3 })
     /*
       Once the screen rests, two commands are seen on copies (ADR-0097 §5.5): taking the part off (its step without the
       joint, and its result) and the fastening the form opens on (its result). Each compiles only what it makes; the
@@ -89,11 +93,18 @@ describe('work counted on the robot arm', () => {
     assert.ok(rested.compiles <= 3, JSON.stringify(rested))
   })
 
-  /* The edit and its read are the kernel's two compiles (its version's asset is the edit's own); then the part's motion ends. */
+  /*
+    The edit and its read are the kernel's two compiles (its version's asset is the edit's own); then the part's motion
+    ends, and its axes paired at rest for the size editor once more on the new version.
+  */
   test('a value typed into its field: the edit and its read, and nothing else while it is drawn', async () => {
+    /* The part's measures are the 「배치」 tab's size editor (2026-10-24). */
+    await click(await read(() => probe.tab('figure.label.tab-arrangement')))
+    await settled()
     const field = await read(() => {
       const deep = (root = document) => [...root.querySelectorAll('input[type=number]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      const input = deep().find(i => !i.disabled && /\.size\.|\.dimension\./.test(i.getAttribute('aria-label') ?? ''))
+      /* A measure of the part in the size editor. */
+      const input = deep().find(i => !i.disabled && / figure\.label\.size-measure$/.test(i.getAttribute('aria-label') ?? ''))
       if (!input) return null
       input.scrollIntoView({ block: 'center' })
       const r = input.getBoundingClientRect()
@@ -105,7 +116,7 @@ describe('work counted on the robot arm', () => {
     await page().keyboard.type(String(field.value + 10))
     const { spent } = await counted(() => page().keyboard.press('Enter'))
     assert.equal((await read(() => probe.state())).revision, revision + 1, `${field.label} is one step`)
-    assert.ok(spent.compiles <= 2 && spent.evaluations <= 5, JSON.stringify(spent))
+    assert.ok(spent.compiles <= 2 && spent.evaluations <= 6, JSON.stringify(spent))
   })
 })
 
@@ -178,7 +189,10 @@ describe('the edit canvas and the preview stay standing', () => {
   test('a value changed beside the preview is drawn inside the scene that stands', async () => {
     await click(await read(() => probe.row('box')))
     await sleep(300)
-    const field = await read(() => probe.labelled('box.size.y'))
+    /* The box's size is the 「배치」 tab's (2026-10-24). */
+    await click(await read(() => probe.tab('figure.label.tab-arrangement')))
+    await sleep(300)
+    const field = await read(() => probe.labelled('box Y figure.label.size-measure'))
     assert.ok(field, 'the height field')
     await page().mouse.click(field.x, field.y, { clickCount: 3 })
     await page().keyboard.type('600')

package/test/browser/modeller.check.mjs

@@ -53,8 +53,11 @@ async function click(point) {
   await page().mouse.click(point.x, point.y)
   await sleep(400)
 }
-/* A side tab pressed, by its short name; how a part answers a size is the 「반응형」 tab's (user 2026-10-17). */
-const tab = async name => click(await read(l => probe.tab(l), `figure.label.tab-short-${name}`))
+/*
+  A side tab pressed, by its short name; how a part answers a size is the 「반응형」 tab's (user 2026-10-17), named
+  「배치」 (figure.label.tab-arrangement) while a part is chosen.
+*/
+const tab = async name => click(await read(n => probe.tab(`figure.label.tab-short-${n}`) ?? (n === 'response' ? probe.tab('figure.label.tab-arrangement') : null), name))
 
 const KEYS = { translate: 'KeyW', rotate: 'KeyE', scale: 'KeyR' }
 
@@ -495,37 +498,33 @@ describe('a figure made in the modeller is given its size from its parts (user 2
     assert.deepEqual(await (await field()).evaluate(i => [i.value, i.placeholder]), ['', '∞'], 'empty, and nothing limits it')
   })
 
+  /*
+    The box's size editor on 「반응형」 (ADR-0159 3): its width made to follow -- on nothing, the figure's own width --
+    then kept a difference from it, and the width typed.
+  */
   test('a part follows the figure\'s width less a difference: chosen and typed, the width is the size less it', async () => {
     await click(await read(() => probe.partOnPage('box')))
     assert.equal((await state()).selected, 'box')
-    const handle = (what, label) =>
-      page().evaluateHandle(
-        (what, label) => {
-          const deep = (root = document) => [...root.querySelectorAll(what)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-          if (what === 'select') return deep().find(s => s.previousElementSibling?.textContent?.trim() === label && [...s.options].some(o => o.value === 'instance:x')) ?? null
-          return deep().find(i => i.closest('label[inline-plus]')) ?? null
-        },
-        what,
-        label
-      )
-    /* The way to make a side follow is folded under the advanced choice (2026-09-28): opened, as a hand does. */
-    await click(await read(() => {
-      const deep = (root = document) => [...root.querySelectorAll('details[resize-choice] > summary')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      const summary = deep()[0]
-      if (!summary) return null
-      summary.scrollIntoView({ block: 'center' })
-      const r = summary.getBoundingClientRect()
-      return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
-    }))
-    const width = await handle('select', 'X')
-    assert.ok(await width.evaluate(s => !!s), 'the width can follow the figure size')
-    await width.select('instance:x')
-    await sleep(600)
-    const plus = await handle('input')
-    assert.ok(await plus.evaluate(i => !!i), 'a following width offers its difference')
-    await plus.evaluate(i => i.scrollIntoView({ block: 'center' }))
-    await plus.click({ clickCount: 3 })
-    await page().keyboard.type('-50')
+    const handle = selector =>
+      page().evaluateHandle(selector => {
+        const deep = (root = document) => [...root.querySelectorAll(selector)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+        return deep()[0] ?? null
+      }, selector)
+    const press = async (selector, what) => {
+      const element = await handle(selector)
+      assert.ok(await element.evaluate(e => !!e), what)
+      await click(await element.evaluate(e => {
+        e.scrollIntoView({ block: 'center' })
+        const r = e.getBoundingClientRect()
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+      }))
+    }
+    await press('input[aria-label="box X figure.label.size-follows"]', 'the width can follow')
+    await press('div.dimension[data-axis=x] div.modes label:nth-of-type(2) input[type=radio]', 'a following width offers its difference')
+    const width = await handle('input[aria-label="box X figure.label.size-measure"]')
+    await width.evaluate(i => i.scrollIntoView({ block: 'center' }))
+    await width.click({ clickCount: 3 })
+    await page().keyboard.type('350')
     await page().keyboard.press('Tab')
     await sleep(600)
     /*
@@ -534,6 +533,11 @@ describe('a figure made in the modeller is given its size from its parts (user 2
     */
     assert.equal((await state()).error, '', 'taken')
     assert.equal((await body('box')).dimensions['size.x'], 350, 'the figure\'s 400 less 50')
+    const said = await read(() => {
+      const deep = (root = document) => [...root.querySelectorAll('div.dimension[data-axis=x] p.result')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep().map(p => p.textContent.trim())
+    })
+    assert.deepEqual(said, ['figure.text.size-difference-less'], 'said as the size less a difference')
     const asked = await read(() => {
       const deep = (root = document) => [...root.querySelectorAll('ox-prompt')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
       return deep().length
@@ -622,7 +626,8 @@ describe('a motion is changed where it is (2026-09-25)', () => {
     assert.equal(after.error, '', 'not refused')
     assert.equal(after.revision, start.revision + 1, 'one step')
     const now = await jointOf('upper-arm')
-    assert.equal(now.upperLimit, 45, 'the new limit')
+    /* A joint is a list of axes (ADR-0159): the form changes its first. */
+    assert.equal(now.motion[0].upperLimit, 45, 'the new limit')
     assert.equal(now.id, was.id, 'the same joint')
   })
 })
@@ -660,16 +665,18 @@ describe('the modeller made easier to find and to keep (2026-09-26 baseline)', (
     assert.equal(await resize.evaluate(b => b.getAttribute('aria-pressed')), 'false')
   })
 
+  /* The part's size is the 「반응형」 tab's size editor (2026-10-24), and what a size typed keeps is said under it. */
   test('a height typed into its field keeps the part\'s middle, and the size group says so (ADR-0140 4.1)', async () => {
     await mount('box')
     await click(await read(() => probe.partOnPage('box')))
+    await tab('response')
     const was = await body('box')
     const middleOf = b => b.t[1] + b.dimensions.start + b.dimensions.length / 2
     assert.ok(await read(() => {
       const deep = (root = document) => [...root.querySelectorAll('p[size-keeps]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
       return deep().some(p => p.textContent.trim() === 'figure.text.size-keeps-centre')
     }), 'said beside the size fields')
-    const height = await find('input', 'box.size.y')
+    const height = await find('input', 'box Y figure.label.size-measure')
     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 })
@@ -744,20 +751,24 @@ describe('the modeller made easier to find and to keep (2026-09-26 baseline)', (
   })
 })
 
+/*
+  The one-click follow-size button is gone (2026-10-24): a side is made to follow by its own 'follows' in the size editor.
+  On a figure with no size, the first one declares the figure's size from its parts in the same step.
+*/
 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 () => {
+  test('a side made to follow 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')))
     await tab('response')
     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 deep = (root = document) => [...root.querySelectorAll('input[aria-label="box X figure.label.size-follows"]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
       const b = deep()[0]
-      if (!b) return null
+      if (!b || b.checked) 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')
+    assert.ok(at, 'the width of a box that follows nothing can be made to follow')
     await page().evaluate(() => {
       window.__told = []
       document.addEventListener('notify', e => window.__told.push(e.detail))
@@ -892,7 +903,7 @@ describe('a row\'s pitch made a board\'s to set (ADR-0096)', () => {
     assert.deepEqual([input.min, input.max, source.designInputs['roller.pitch']], [100, 400, 200])
     assert.deepEqual(source.joints.find(j => j.body1.part === 'roller').repeat.pitch, { from: { of: 'input', input: 'roller.pitch' } })
     assert.equal((await read(() => probe.ids())).filter(id => id.includes('"roller.placed"')).length, before, 'the row as it was')
-    await typeInto('roller.repeat.pitch', '400')
+    await typeInto('figure.label.repeat-gap', '400')
     source = await read(() => probe.source())
     assert.equal(source.designInputs['roller.pitch'], 400, 'the pitch field sets the input')
     assert.ok((await read(() => probe.ids())).filter(id => id.includes('"roller.placed"')).length < before, 'fewer rollers at a wider pitch')
@@ -919,10 +930,11 @@ describe('a row that carries a part (ADR-0093, 2026-09-26)', () => {
     assert.ok(copy, 'a mark on the fourth roller is drawn')
     await click(await read(id => probe.partOnPage(id), copy))
     assert.equal((await state()).selected, 'mark', 'picked by the part it copies')
-    assert.equal(await read(() => probe.hasInput('mark.repeat.pitch')), false, 'the mark has no row of its own to set')
+    /* The row's pitch field is the selected part's own: named by what it is, the centre spacing. */
+    assert.equal(await read(() => probe.hasInput('figure.label.repeat-gap')), false, 'the mark has no row of its own to set')
     await click(await read(() => probe.row('roller')))
     assert.equal((await state()).selected, 'roller')
-    assert.ok(await read(() => probe.hasInput('roller.repeat.pitch')), 'the roller offers its row')
+    assert.ok(await read(() => probe.hasInput('figure.label.repeat-gap')), 'the roller offers its row')
     /* Walk 1 (2026-09-26): the fastening form opens on the roller's own fastening -- by its centre, the drawing's way (2026-10-01). */
     await click(await read(() => probe.button('change-fastening')))
     assert.equal(await read(() => probe.fastenMode()), 'centre', 'the way it is fastened reads centre')

package/test/browser/multipart-response-page.js

@@ -0,0 +1,8 @@
+import './modeller-page.js'
+import { i18next } from '@operato/i18n'
+import { serializeFigureAsset } from '@hatiolab/figure-model'
+import { multipartResponseFixture } from '../multipart-response-fixture.js'
+const ko = await fetch('/ko.json').then(r => r.json())
+i18next.addResourceBundle('ko', 'translations', ko, true, true)
+await i18next.changeLanguage('ko')
+await window.harness.mount('box', serializeFigureAsset(multipartResponseFixture()))

package/test/browser/parts.check.mjs

@@ -76,8 +76,9 @@ async function press(...keys) {
   for (const key of keys.slice(0, -1).reverse()) await page().keyboard.up(key)
   await sleep(400)
 }
+/* A side tab by its short name; with a part chosen, 「반응형」 is named 「배치」 (figure.label.tab-arrangement). */
 async function tab(name) {
-  await click(await read(name => probe.tab(name), `figure.label.tab-short-${name}`), `the ${name} tab`)
+  await click(await read(n => probe.tab(`figure.label.tab-short-${n}`) ?? (n === 'response' ? probe.tab('figure.label.tab-arrangement') : null), name), `the ${name} tab`)
 }
 
 describe('the parts list: each button does what it says, one step of the session each', () => {

package/test/browser/product-page.js

@@ -46,7 +46,7 @@ export function doorSource() {
   a = addFigureBox(a, { id: 'leaf', size: { x: 900, y: 1800, z: 40 }, position: { x: 0, y: 1000, z: 0 } })
   a = applyFigureAuthoring(a, { kind: 'attach', part: 'leaf', to: { part: 'frame', face: 'top' } })
   const j = a.joints.find(k => k.body1.part === 'leaf')
-  a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, type: 'revolute', axis: 'Y', state: { id: 'open' } } })
+  a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, motion: [{ type: 'revolute', axis: 'Y', state: { id: 'open' } }] } })
   a = editFigurePart(a, { kind: 'set-driver', state: 'open', clip: 'swing', duration: 2, keys: [{ seconds: 0, value: 0 }, { seconds: 2, value: 80 }] })
   return serializeFigureAsset(a)
 }

package/test/browser/props.check.mjs

@@ -70,8 +70,9 @@ async function press(selector, what) {
 }
 
 /**
- * The groups of the panel shown, top to bottom, by what each is: the part's name, the size and the place the links
- * draw, the look and 「더 보기」 on the properties tab; on 「반응형」 the size rules, a position that follows, the row.
+ * The groups of the panel shown, top to bottom, by what each is: the part's name, the place the links draw -- and its
+ * shape's own measures, for a shape that has any -- the look and 「더 보기」 on the properties tab; on 「반응형」 its size,
+ * a position that follows, the row.
  */
 const groupsInOrder = () =>
   read(() => {
@@ -80,7 +81,7 @@ const groupsInOrder = () =>
     const links = panel.querySelector('figure-links')?.shadowRoot
     const marks = {
       name: panel.querySelector('input[name-field]'),
-      size: links?.querySelector('section[size], section[size-response]'),
+      size: links?.querySelector('section[size], section[size-response]') ?? panel.querySelector('section[slot=size]'),
       place: links?.querySelector('section[fastening]'),
       position: links?.querySelector('section[position-response]'),
       row: panel.querySelector('section[slot=row]') ?? links?.querySelector('section[row]'),
@@ -93,9 +94,10 @@ const groupsInOrder = () =>
       .map(([name]) => name)
   })
 
-/* A side tab pressed, by its name. */
+/* A side tab pressed, by its name; with a part chosen, 「반응형」 is named 「배치」 (figure.label.tab-arrangement). */
 async function tab(name) {
-  await press(`aside button[tab][aria-label="figure.label.tab-short-${name}"]`, `the ${name} tab`)
+  const named = `aside button[tab][aria-label="figure.label.tab-short-${name}"]`
+  await press(name === 'response' ? `${named}, aside button[tab][aria-label="figure.label.tab-arrangement"]` : named, `the ${name} tab`)
   await read(() => document.querySelector('figure-editor').updateComplete)
 }
 
@@ -150,10 +152,11 @@ describe('the side: six tabs, the view and the releases from the bar', () => {
 describe('a part\'s groups in one order, whatever its state', () => {
   before(() => mount('rollers'))
 
-  test('a part fastened in a row: name, size, place, look, more; on 「반응형」 its size rules and its row', async () => {
+  /* A box's size is the 「배치」 tab's (2026-10-24): it has no measures of its own shape left on the properties. */
+  test('a part fastened in a row: name, place, look, more; on 「반응형」 its size and its row', async () => {
     await pick('roller')
     await tab('properties')
-    assert.deepEqual(await groupsInOrder(), ['name', 'size', 'place', 'look', 'more'])
+    assert.deepEqual(await groupsInOrder(), ['name', 'place', 'look', 'more'])
     await tab('response')
     assert.deepEqual(await groupsInOrder(), ['size', 'row'])
     await tab('properties')
@@ -161,10 +164,10 @@ describe('a part\'s groups in one order, whatever its state', () => {
 
   test('a part on the plane, not in a row: the same order, the row folded where a row would be', async () => {
     await pick('bed')
-    assert.deepEqual(await groupsInOrder(), ['name', 'size', 'place', 'look', 'more'])
-    /* On the plane, its height is worked out from the figure size: the position group stands between. */
+    assert.deepEqual(await groupsInOrder(), ['name', 'place', 'look', 'more'])
+    /* On the plane, its place is its fastening's: no position worked out from the figure size is offered (2026-10-24). */
     await tab('response')
-    assert.deepEqual(await groupsInOrder(), ['size', 'position', 'row'])
+    assert.deepEqual(await groupsInOrder(), ['size', 'row'])
     await tab('properties')
   })
 
@@ -221,14 +224,14 @@ describe('a group\'s 「⋯」: its rarer actions, by the mouse or the keyboard'
     assert.equal(await read(() => JSON.parse(document.querySelector('figure-editor').session.source()).joints.some(j => j.body1.part === 'bed')), false, 'taken off')
   })
 
+  /* The row's 「⋯」 is gone: taking a row off is a button of its own (2026-10-24). The roller's place group has one. */
   test('Esc closes the menu and nothing is done', async () => {
     await pick('roller')
-    /* The row is the 「반응형」 tab's. */
-    await tab('response')
+    await tab('properties')
     const start = await revision()
-    await press('section[row] button[group-menu]', 'the row\'s 「⋯」')
+    await press('section[fastening] button[group-menu]', 'the place group\'s 「⋯」')
     await until(() => document.activeElement?.localName === 'ox-popup-menu', [], 'the menu open, with the focus')
-    assert.deepEqual(await read(() => [...document.querySelectorAll('ox-popup-menu[active] ox-popup-menuitem')].map(i => i.getAttribute('label'))), ['figure.button.remove-repeat'])
+    assert.deepEqual(await read(() => [...document.querySelectorAll('ox-popup-menu[active] ox-popup-menuitem')].map(i => i.getAttribute('label'))), ['figure.button.detach'])
     await page().keyboard.press('Escape')
     await until(() => !document.querySelector('ox-popup-menu[active]'), [], 'the menu closed')
     await sleep(200)

package/test/browser/response-page.js

@@ -0,0 +1,12 @@
+/* Manual CUA check of the real editor, using an in-memory store and a fresh fixed-size part. */
+import './modeller-page.js'
+import { i18next } from '@operato/i18n'
+import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+const ko = await fetch('/ko.json').then(r => r.json())
+i18next.addResourceBundle('ko', 'translations', ko, true, true)
+await i18next.changeLanguage('ko')
+const asset = addFigureBox(createFigureAsset('반응형 치수 검증'), {
+  id: 'frame', size: { x: 1500, y: 80, z: 600 }, position: { x: 0, y: 50, z: 0 }
+})
+await window.harness.mount('box', serializeFigureAsset(asset))

package/test/browser/row-preview.check.mjs

@@ -60,10 +60,10 @@ describe('a row\'s preview follows its basis', () => {
     const at = await read(() => probe.row('bin'))
     await page().mouse.click(at.x, at.y)
     await until(() => probe.state().selected === 'bin', [], 'bin selected')
-    /* The row is the 「반응형」 tab's (user 2026-10-17). */
-    const tab = await read(() => probe.tab('figure.label.tab-short-response'))
+    /* The row is the 「반응형」 tab's (user 2026-10-17), named 「배치」 while a part is chosen (figure.label.tab-arrangement). */
+    const tab = await read(() => probe.tab('figure.label.tab-arrangement'))
     await page().mouse.click(tab.x, tab.y)
-    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === 'figure.label.tab-short-response', [], 'the 반응형 tab on')
+    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === 'figure.label.tab-arrangement', [], 'the 배치 tab on')
     await click('details[row-fold] > summary', {}, 'the row\'s fold')
   })
 

package/test/browser/screen.check.mjs

@@ -82,6 +82,8 @@ const tabOn = () => read(() => screenCheck.editor().shadowRoot.querySelector('bu
 const pressBar = action => press(action, a => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').shadowRoot.querySelector(`button[data-action=${a}]`), action)
 const pressTab = name => press(name, name => screenCheck.editor().shadowRoot.querySelector(`button[tab][aria-label="${name}"]`), name)
 const TAB = name => `figure.label.tab-short-${name}`
+/* 「반응형」 while a part is chosen: named by what it holds for the part, its size and arrangement (2026-10-24). */
+const ARRANGEMENT = 'figure.label.tab-arrangement'
 /*
   The view settings or the releases, opened from the bar over the work (they were tabs once); left open if open. The
   releases open from 「발행」, the bar's one way to them (user 2026-10-18).
@@ -226,7 +228,9 @@ describe('the frame: parts · canvas · one side of seven tabs, and the bar over
     assert.equal(await saveOn(), false, 'saved: the save button is dimmed')
 
     await pressRow('box')
-    const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'box.size.y'))
+    /* A part's size is the 「배치」 tab's (2026-10-24). */
+    await pressTab(ARRANGEMENT)
+    const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'box Y figure.label.size-measure'))
     await height.click({ clickCount: 3 })
     await page().keyboard.type('600')
     await page().keyboard.press('Enter')
@@ -240,6 +244,7 @@ describe('the frame: parts · canvas · one side of seven tabs, and the bar over
     await until('redone', () => probe.value('box.size.y') === 600)
     await press('save', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[save]'))
     await until('saved: dimmed again', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[save]').disabled)
+    await pressTab(TAB('properties'))
 
     const width = () => read(() => Math.round(screenCheck.deep('figure-canvas')[0].getBoundingClientRect().width))
     const was = await width()
@@ -316,7 +321,7 @@ describe('the editor is drawn in the shell\'s tokens (2026-09-27)', () => {
 describe('a part chosen: each tab in its place, the figure-wide tabs give way, the list\'s root goes back', () => {
   before(() => mount('arm'))
 
-  test('properties hold the part\'s size and place; 「반응형」 how it answers a size; capability its places; motion its motion and controls -- each under the part\'s head', async () => {
+  test('properties hold the part\'s place; 「반응형」 its size and how it answers one; capability its places; motion its motion and controls -- each under the part\'s head', async () => {
     await pressRow('upper-arm')
     await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
     const holds = () =>
@@ -334,10 +339,11 @@ describe('a part chosen: each tab in its place, the figure-wide tabs give way, t
     await pressTab(TAB('properties'))
     let now = await holds()
     assert.ok(now.subject, 'the part\'s head')
-    assert.ok(now.links.includes('figure.label.group-size') && now.links.includes('figure.label.group-place'), `the shape's links: ${now.links}`)
+    /* A box's size is the 「배치」 tab's, in its size editor (2026-10-24): the properties keep its place. */
+    assert.ok(now.links.includes('figure.label.group-place') && !now.links.includes('figure.label.group-size'), `the shape's links: ${now.links}`)
     assert.ok(now.material, 'its material')
-    /* How it answers a size has a tab of its own (user 2026-10-17, 「반응형」). */
-    await pressTab(TAB('response'))
+    /* How it answers a size has a tab of its own (user 2026-10-17, 「반응형」), named 「배치」 while a part is chosen. */
+    await pressTab(ARRANGEMENT)
     now = await holds()
     assert.ok(now.subject, 'the part\'s head')
     assert.ok(now.links.includes('figure.label.group-size'), `the response's links: ${now.links}`)
@@ -726,6 +732,8 @@ describe('the camera follows a size typed far from the view (first 15 minutes, 2
   test('a width typed ten times larger fits the view again; a little wider leaves the camera where it is', async () => {
     await mount('box')
     await pressRow('box')
+    /* A part's size is the 「배치」 tab's (2026-10-24). */
+    await pressTab(ARRANGEMENT)
     await read(() => {
       const canvas = screenCheck.deep('figure-canvas')[0]
       const fit = canvas.fit.bind(canvas)
@@ -733,7 +741,7 @@ describe('the camera follows a size typed far from the view (first 15 minutes, 2
       canvas.fit = () => (window.fits++, fit())
     })
     const typeWidth = async mm => {
-      const width = await element('the width field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'box.size.x'))
+      const width = await element('the width field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'box X figure.label.size-measure'))
       await width.click({ clickCount: 3 })
       await page().keyboard.type(String(mm))
       await page().keyboard.press('Enter')
@@ -745,6 +753,7 @@ describe('the camera follows a size typed far from the view (first 15 minutes, 2
     assert.equal(await read(() => window.fits), 0, 'a little wider: the camera stays')
     await typeWidth(4000)
     await until('the view fitted to it', () => window.fits >= 1)
+    await pressTab(TAB('properties'))
     await boardsUp()
   })
 })
@@ -796,16 +805,25 @@ describe('a part\'s size row: a rule\'s numbers only where a rule sets every sid
     assert.equal(await sizeRow(), null)
   })
 
+  /*
+    A box's size is the 「배치」 tab's size editor (2026-10-24), one row a side: made to follow on every side, each row
+    shows the size the rule gives it, and the properties draw no size row.
+  */
   test('a box made to follow the figure\'s size on every side shows the size the rule gives it', async () => {
     await mount('box')
     await pressRow('box')
     await until('box chosen', () => screenCheck.editor().selected === 'box')
-    /* Following the figure's size is the 「반응형」 tab's; the size row it gives is the properties'. */
-    await pressTab(TAB('response'))
-    await press('follow the figure\'s size', () => screenCheck.deep('button[follow-size]').find(b => b.checkVisibility()))
+    await pressTab(ARRANGEMENT)
+    for (const axis of ['X', 'Y', 'Z']) {
+      const before = await revision()
+      await press(`${axis} made to follow`, axis => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === `box ${axis} figure.label.size-follows`), axis)
+      await until(`${axis} following`, before => screenCheck.editor().session.read().revision > before, before)
+    }
     await until('following', () => ['x', 'y', 'z'].every(axis => !screenCheck.editor().session.read().fields.some(f => f.id === `box.size.${axis}`)))
+    const measures = await read(() => ['X', 'Y', 'Z'].map(axis => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === `box ${axis} figure.label.size-measure`)?.value))
+    assert.deepEqual(measures, ['400', '400', '400'], 'each side the size the rule gives it')
     await pressTab(TAB('properties'))
-    assert.deepEqual(await sizeRow(), { held: 3 }, 'three sides, each held by the rule')
+    assert.equal(await sizeRow(), null, 'no size row on the properties')
   })
 })
 
@@ -829,7 +847,20 @@ describe('the side panel is found as it was left, per part', () => {
   }
   before(() => mount('arm'))
 
+  /*
+    The part's properties fit a tall window since its size moved to 「배치」 (2026-10-24): a shorter one gives the panel
+    something to scroll.
+  */
   test('scrolled and a fold opened on one part; another part opens at its top; back, the first is as it was left', async () => {
+    const viewport = page().viewport()
+    await page().setViewport({ ...viewport, height: 600 })
+    try {
+      await scrolledAndBack()
+    } finally {
+      await page().setViewport(viewport)
+    }
+  })
+  async function scrolledAndBack() {
     await pressRow('upper-arm')
     await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
     /* 「더 보기」 starts open on this page: folded first, so the fold opened below is one this part leaves open. */
@@ -854,7 +885,7 @@ describe('the side panel is found as it was left, per part', () => {
     await pressRow('upper-arm')
     await until('upper-arm as it was left', top => screenCheck.editor().selected === 'upper-arm' && Math.abs(screenCheck.shownPanel().scrollTop - top) <= 2, top)
     assert.deepEqual(await folds(), opened, 'its folds as they were')
-  })
+  }
 })
 
 describe('the fastening window says whether it changes the fastening the part has or fastens it anew', () => {
@@ -1075,12 +1106,15 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
 
   test('an edit is judged as it stands on screen: the source the server is sent is the one edited', async () => {
     await pressRow('left')
-    const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'left.size.y'))
+    /* A part's size is the 「배치」 tab's (2026-10-24). */
+    await pressTab(ARRANGEMENT)
+    const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'left Y figure.label.size-measure'))
     await height.click({ clickCount: 3 })
     await page().keyboard.type('600')
     await page().keyboard.press('Enter')
     await until('the edit made', () => screenCheck.editor().session.read().fields.find(f => f.id === 'left.size.y')?.value === 600)
     await until('the edited source judged', () => product.calls().filter(c => c.field === 'inspectFigureDraft').at(-1)?.variables.source === screenCheck.editor().session.revisionNow().text)
+    await pressTab(TAB('properties'))
   })
 
   test('a save sends the card\'s picture with the figure', async () => {
@@ -1114,7 +1148,17 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     }
   })
 
+  /* The part's properties fit a tall window since its size moved to 「배치」 (2026-10-24): a shorter one scrolls. */
   test('another figure opened starts its panels clean: a part of the same name opens at its top', async () => {
+    const viewport = page().viewport()
+    await page().setViewport({ ...viewport, height: 600 })
+    try {
+      await anotherFigureClean()
+    } finally {
+      await page().setViewport(viewport)
+    }
+  })
+  async function anotherFigureClean() {
     await open('fig-p', 'arm-clip')
     await pressRow('upper-arm')
     await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
@@ -1136,7 +1180,7 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
     for (let i = 0; i < 3; i++) await page().waitForFunction(() => new Promise(done => requestAnimationFrame(() => requestAnimationFrame(() => done(true)))))
     assert.equal(await read(() => screenCheck.shownPanel().scrollTop), 0, 'not where the other figure\'s part was left')
-  })
+  }
 
   test('a new figure\'s AI draft puts a request in the assistant\'s input, and sends nothing', async () => {
     await read(() => assistant.forget())

package/test/browser/serve-response.mjs

@@ -0,0 +1,24 @@
+/* Manual browser verification. Uses buildPage's FIGURE_MODEL / THINGS_SCENE overrides when provided. */
+import { buildPage } from './build.mjs'
+import { createServer } from 'node:http'
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { createRequire } from 'node:module'
+const require = createRequire(import.meta.url)
+const bundle = await buildPage(process.argv[2] ?? 'response-page.js')
+const routes = new Map([
+  ['/page.js', [bundle, 'application/javascript']],
+  ['/ko.json', [new URL('../../translations/ko.json', import.meta.url), 'application/json']],
+  ['/icons.woff2', [require.resolve('material-symbols/material-symbols-outlined.woff2'), 'font/woff2']],
+  ['/workers/markdown-webworker.js', [join(dirname(bundle), 'workers/markdown-webworker.js'), 'application/javascript']]
+])
+const html = `<!doctype html><html lang="ko"><meta charset="utf-8"><title>반응형 치수 — 실제 편집기 로컬 검증</title><style>
+@font-face{font-family:"Material Symbols Outlined";src:url(/icons.woff2)}
+html,body{margin:0;height:100%;font-family:sans-serif}body{display:flex}figure-editor{flex:1;min-width:0;min-height:0}
+</style><body><script type="module" src="/page.js"></script></body></html>`
+createServer((req, res) => {
+  const file = routes.get(req.url)
+  if (!file && req.url !== '/') { res.writeHead(404); res.end(); return }
+  res.setHeader('Content-Type', file ? file[1] : 'text/html; charset=utf-8')
+  res.end(file ? readFileSync(file[0]) : html)
+}).listen(Number(process.env.PORT ?? 4391), '127.0.0.1', function () { console.log(`Ready http://127.0.0.1:${this.address().port}/`) })

package/test/clip-ai-proposal.test.ts

@@ -23,7 +23,7 @@ function door(): string {
   a = addFigureBox(a, { id: 'sign', size: { x: 200, y: 100, z: 10 }, position: { x: 0, y: 2200, z: 200 } })
   a = applyFigureAuthoring(a, { kind: 'attach', part: 'leaf', to: { part: 'frame', face: 'top' } })
   const j = a.joints!.find(k => k.body1.part === 'leaf')!
-  a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, type: 'revolute', axis: 'Y', state: { id: 'open' } } })
+  a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, motion: [{ type: 'revolute', axis: 'Y', state: { id: 'open' } }] } })
   a = editFigurePart(a, { kind: 'set-driver', state: 'open', clip: 'swing', duration: 2, keys: [{ seconds: 0, value: 0 }, { seconds: 2, value: 80 }] })
   return serializeFigureAsset(a)
 }

package/test/clip-consent.test.ts

@@ -22,7 +22,7 @@ function doors(): string {
     a = addFigureBox(a, { id, size: { x: 900, y: 1800, z: 40 }, position: { x, y: 1000, z: 0 } })
     a = applyFigureAuthoring(a, { kind: 'attach', part: id, to: { part: 'frame', face: 'top' } })
     const j = a.joints!.find(k => k.body1.part === id)!
-    a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, type: 'revolute', axis: 'Y', state: { id: `${id}-open` } } })
+    a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, motion: [{ type: 'revolute', axis: 'Y', state: { id: `${id}-open` } }] } })
     a = editFigurePart(a, { kind: 'set-driver', state: `${id}-open`, clip: `${id}-swing`, duration: 2, keys: [{ seconds: 0, value: 0 }, { seconds: 2, value: 80 }] })
   }
   return serializeFigureAsset(a)
@@ -31,7 +31,7 @@ const store = { load: async (id: string) => ({ id, source: doors() }), save: asy
 const clipsOf = (s: ReturnType<typeof createFigureProductSession>) => (parseFigureAsset(s.source()) as FigureAsset).drivers?.map(d => d.clip) ?? []
 const fixed = (s: ReturnType<typeof createFigureProductSession>, part: string) => {
   const j = (parseFigureAsset(s.source()) as FigureAsset).joints!.find(k => k.body1.part === part)!
-  return { kind: 'set-joint', joint: { id: j.id, type: 'fixed', body0: j.body0, body1: j.body1, origin: j.origin } } as never
+  return { kind: 'set-joint', joint: { id: j.id, body0: j.body0, body1: j.body1, origin: j.origin } } as never
 }
 
 test('refused and named first; agreed, exactly those go in one step; undo brings them back; consent does not outlive it', async () => {