@things-factory/figure-ui 10.1.175 → 10.1.177

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.175",
+  "version": "10.1.177",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -41,11 +41,11 @@
     "@operato/slot-layout-editor": "^10.29.25",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/ai-assistant": "^10.1.170",
-    "@things-factory/figure-service": "^10.1.172",
-    "@things-factory/figure-viewer": "^10.1.175",
-    "@things-factory/setting-base": "^10.1.167",
+    "@things-factory/ai-assistant": "^10.1.177",
+    "@things-factory/figure-service": "^10.1.177",
+    "@things-factory/figure-viewer": "^10.1.176",
+    "@things-factory/setting-base": "^10.1.176",
     "three": "^0.185.1"
   },
-  "gitHead": "36a28986fdfb366ac31516b63369cf5733a82c31"
+  "gitHead": "91da09c945ec5e77ab960074db8f53b9ea8ac534"
 }

package/test/browser/acceptance-page.js

@@ -214,7 +214,8 @@ async function start() {
   }
   const properties = document.createElement('figure-properties')
   properties.slot = 'figure'
-  const keep = () => (properties.source = editor.session.source())
+  /* As the modeller page gives it: the revision on screen (it gave the source, which the panel no longer reads -- N6). */
+  const keep = () => (properties.revision = editor.session.revisionNow())
   keep()
   editor.addEventListener('changed', keep)
   /* The figure panel's commands, as the modeller page runs them: one step of the session's history. */

package/test/browser/build.mjs

@@ -40,6 +40,14 @@ for (const signal of ['SIGINT', 'SIGTERM'])
  * `standIns` maps a module the page would import to a file beside this one: for a module that cannot run here (the
  * assistant dock needs the whole app's tool bar), a stand-in that records what the product asked of it.
  */
+/*
+  Packages that must stand once on a page: what defines custom elements (lit, the @operato and @material elements) and
+  what holds one state (i18next). A sibling checkout linked into node_modules for local work -- the operato
+  webcomponents, 2026-10-17 -- brought its own @operato/i18n, the page defined ox-i18n twice and stopped before any
+  check could start. Each is taken from this checkout's node_modules, whoever imports it.
+*/
+const ONE_COPY = id => /^(lit|lit-html|lit-element|@lit\/|@lit-labs\/|i18next|@operato\/|@material\/)/.test(id)
+
 export async function buildPage(page = 'modeller-page.js', { standIns = {} } = {}) {
   /*
     The real path: on macOS the temp dir is a link (/var -> /private/var). A module named both through
@@ -87,7 +95,7 @@ export async function buildPage(page = 'modeller-page.js', { standIns = {} } = {
         }
       },
       replace({ preventAssignment: true, values: { 'process.env.NODE_ENV': JSON.stringify('production') } }),
-      nodeResolve({ browser: true, modulePaths: [join(PACKAGE, 'node_modules'), join(ROOT, 'node_modules')] }),
+      nodeResolve({ browser: true, modulePaths: [join(PACKAGE, 'node_modules'), join(ROOT, 'node_modules')], rootDir: PACKAGE, dedupe: ONE_COPY }),
       commonjs()
     ]
   })

package/test/browser/editing-page.js

@@ -94,7 +94,8 @@ window.editing = {
   },
   /** The labels of the number fields on the properties tab. */
   propertyInputs() {
-    const panel = editor().renderRoot.querySelector('div[panel]')
+    /* The panel shown: the properties, or the 「반응형」 tab a check pressed. */
+    const panel = editor().renderRoot.querySelector('div[panel]:not([off])')
     return [...panel.querySelectorAll('input')].map(i => i.getAttribute('aria-label'))
   },
   /** The page point of the first element a selector finds -- anywhere on the page, or inside the `host` elements -- and what it says. */

package/test/browser/links.check.mjs

@@ -90,11 +90,6 @@ async function pick(part) {
   await until(id => probe.state().selected === id, [part], `${part} selected`)
 }
 const tab = name => read(l => probe.tab(l), `figure.label.tab-short-${name}`).then(point => click(point, `the ${name} tab`))
-/** What the figure does is a folded group of the properties (chief architect 2026-10-16): its fold opened, as a person opens it. */
-async function openCapability() {
-  const summary = await handle('section[capability] > details > summary')
-  if (!(await summary.evaluate(s => s.parentElement.open))) await summary.click()
-}
 /** A fastening the part has is said in one line; 「바꾸기」 opens its drawing and details. */
 async function changeFastening() {
   await until(() => look.all('button[change-fastening]').length === 1, [], 'the fastening said in one line')
@@ -131,6 +126,12 @@ async function press(selector, text, what = text ?? selector) {
     text
   )
   assert.ok(await element.evaluate(e => !!e), `${what} is on the page`)
+  /*
+    In the middle of the panel first, as a hand scrolls to what it presses: brought only just into view, at the panel's
+    top, it lay under the panel's sticky head and the press fell there (2026-10-17, the leaf's fasten-start once the
+    rows were tightened).
+  */
+  await element.evaluate(e => e.scrollIntoView({ block: 'center' }))
   await element.click()
   await settled()
 }
@@ -205,6 +206,8 @@ describe('a part made to follow the figure size, and let go of it', () => {
     a = applyFigureAuthoring(a, { kind: 'declare-instance-size', range: SIZE, at: { x: 400, y: 400, z: 400 } })
     await mount('sized', applyFigureAuthoring(a, { kind: 'link-dimension', part: 'box', axis: 'x', source: { of: 'instance', axis: 'x' } }))
     await pick('box')
+    /* How a part answers a size is the 「반응형」 tab's (user 2026-10-17). */
+    await tab('response')
   })
 
   test('on a figure with a size, follow-size is one step, says nothing of a size declared, and is not offered again', async () => {
@@ -247,6 +250,8 @@ function sizedPair(turning) {
 describe('the sizes a figure may be placed at, and how it grows', () => {
   test('measured again, the declared range becomes the measured one in one step, and the offer goes', async () => {
     await mount('sized-pair', sizedPair(false))
+    /* The figure's range is the 「반응형」 tab's. */
+    await tab('response')
     const start = await state()
     await click(await at('button', 'figure.button.remeasure-range'), 'remeasure')
     await oneStep(start)
@@ -264,6 +269,7 @@ describe('the sizes a figure may be placed at, and how it grows', () => {
 
   test('a figure that turns about a joint is urged to grow by one ratio', async () => {
     await mount('turning', sizedPair(true))
+    await tab('response')
     assert.equal((await all('p[hint]', 'figure.text.sizing-uniform-proposed')).length, 1)
   })
 })
@@ -279,6 +285,8 @@ describe('a row\'s pitch', () => {
   test('a pitch that follows the frame\'s length shows as the number it comes to, and the row is said as drawn', async () => {
     await mount('pitch-follows', applyFigureAuthoring(conveyor(), { kind: 'set-repeat', part: 'roller', pitch: { from: { of: 'part', part: 'frame', axis: 'x' }, times: 0.1 } }))
     await pick('roller')
+    /* The row is the 「반응형」 tab's. */
+    await tab('response')
     assert.deepEqual((await all('input[aria-label="roller.repeat.pitch"]')).map(i => i.value), ['200'], 'a tenth of 2000')
     assert.ok((await all('ul[row-reading] li')).length > 0, 'the row said as it stands')
   })
@@ -291,6 +299,7 @@ describe('a row\'s pitch', () => {
     ])
     await mount('published-pitch', published)
     await pick('roller')
+    await tab('response')
     const start = await state()
     await type(await handle('input[aria-label="roller.repeat.pitch"]'), '300')
     await oneStep(start)
@@ -304,7 +313,8 @@ describe('holding places on a part', () => {
   test('a place needs kinds it takes; a figure that holds nothing says so, and declaring it holds things is one step', async () => {
     await mount('box')
     await pick('box')
-    await openCapability()
+    /* What the figure does is a tab again (user 2026-10-17). */
+    await tab('capability')
     assert.equal((await at('button[act]', 'figure.button.add-place'))?.disabled, true, 'no kinds: no place')
     await type(await handle('input[placeholder="BOX, TOTE"]'), 'BOX')
     assert.equal((await at('button[act]', 'figure.button.add-place'))?.disabled, false, 'a kind: a place may be made')
@@ -327,6 +337,8 @@ describe('a position worked out from the figure size', () => {
     a.document.model.nodes.find(n => n.id === 'lamp.pose').args[1] = 'lamp.lift.value'
     await mount('lifted', a)
     await pick('lamp')
+    /* A position that follows the figure size is the 「반응형」 tab's. */
+    await tab('response')
     assert.equal((await all('div[pair] span', 'figure.label.position-worked-out')).length, 1)
     const start = await state()
     await click(await at('button[act]', 'figure.button.scale-position'), 'scale position')
@@ -525,13 +537,15 @@ describe('a bench: what each part is fastened to, what detaching would do, a row
 
   test('a part fastened to nothing: the row is folded under its head and says why', async () => {
     await pick('loose')
+    await tab('response')
     assert.deepEqual((await all('details[row-fold] > summary h3')).map(h => h.text), ['figure.label.repeat'])
     assert.deepEqual((await all('details[row-fold]')).map(d => d.open), [false], 'folded')
     assert.deepEqual((await all('p[row-blocked]')).map(p => p.text), ['figure.text.row-blocked-unfastened'])
   })
 
-  test('the row worked on is the one seen: its copies drawn and said; back on the fastening, it folds', async () => {
+  test('the row worked on is the one seen: its copies drawn and said; on the properties tab they are not', async () => {
     await pick('lamp')
+    await tab('response')
     assert.deepEqual((await all('details[row-fold]')).map(d => d.open), [false], 'folded')
     await read(() => look.hear('preview-command'))
     /* One click opens it, and it stays open while the row is worked. */
@@ -543,8 +557,9 @@ describe('a bench: what each part is fastened to, what detaching would do, a row
     assert.equal((await heard('preview-command')).filter(Boolean).at(-1).action.kind, 'make-repeat')
     await until(() => look.drawn().filter(n => n.startsWith('__preview')).length > 1, [], 'the copies drawn')
     await until(() => look.all('section[row] [preview-words]', 'figure.text.row-count-pitch').length === 1, [], 'the row said')
-    await click(await at('section[fastening] h3 button'), 'the fastening section')
-    await until(() => look.all('details[row-fold]').every(d => !d.open), [], 'the row folded again')
+    /* The properties tab shown: what its fastening would do is said, the row's copies are not drawn. */
+    await tab('properties')
+    await until(() => !look.drawn().some(n => n.startsWith('__preview')), [], 'the copies not drawn on the properties tab')
   })
 })
 

package/test/browser/modeller.check.mjs

@@ -53,6 +53,8 @@ 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}`))
 
 const KEYS = { translate: 'KeyW', rotate: 'KeyE', scale: 'KeyR' }
 
@@ -383,6 +385,7 @@ describe('the fastening form belongs to the part it is for', () => {
 describe('a figure made in the modeller is given its size from its parts (user 2026-09-25)', () => {
   before(async () => {
     await mount('box')
+    await tab('response')
   })
 
   test('with nothing picked, the figure offers to declare its size; clicked, its size fields appear', async () => {
@@ -697,6 +700,7 @@ 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')))
+    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 b = deep()[0]
@@ -827,6 +831,7 @@ describe('a row\'s pitch made a board\'s to set (ADR-0096)', () => {
   test('published in one step with a name and a range; the pitch then sets the input; withdrawn, the pitch stays as it is', async () => {
     await mount('rollers')
     await click(await read(() => probe.row('roller')))
+    await tab('response')
     const before = (await read(() => probe.ids())).filter(id => id.includes('"roller.placed"')).length
     await click(await read(() => probe.labelled('figure.label.board-sets')))
     await typeInto('figure.label.board-name', '롤러 간격')
@@ -893,6 +898,7 @@ describe('the row section opens on one click', () => {
   test('a part that can be made a row: one click on the folded heading opens it, a second folds it', async () => {
     await mount('rollers')
     await click(await read(() => probe.row('mark')))
+    await tab('response')
     const summary = await page().evaluateHandle(() => {
       const deep = (root = document) => [...root.querySelectorAll('details[row-fold] > summary')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
       return deep()[0] ?? null

package/test/browser/parts.check.mjs

@@ -320,7 +320,8 @@ describe('a row is one part: selected whole, its pitch one value set by the row
 
   test('the pitch is offered once, and typed it is one step that sets the row again', async () => {
     await pick('roller')
-    await tab('properties')
+    /* The row's pitch is the 「반응형」 tab's (user 2026-10-17). */
+    await tab('response')
     const fields = await read(() => editing.propertyInputs())
     assert.equal(fields.filter(label => /pitch|repeat/i.test(label ?? '')).length, 1, fields.join())
     const label = fields.find(label => /pitch|repeat/i.test(label ?? ''))
@@ -344,18 +345,8 @@ describe('the long explanations open from their 「?」 beside the title, closed
     await mount('box', 'doors')
     await pick('left')
     const seen = new Set()
-    for (const name of ['properties', 'motion']) {
+    for (const name of ['properties', 'response', 'motion', 'capability']) {
       await tab(name)
-      /* What the figure does is a folded group of the properties now (chief architect 2026-10-16): opened as a hand opens it. */
-      if (name === 'properties') {
-        const fold = await read(() => {
-          const summary = document.querySelector('figure-editor').renderRoot.querySelector('div[panel]:not([off]) section[capability] > details > summary')
-          summary.scrollIntoView({ block: 'center' })
-          const r = summary.getBoundingClientRect()
-          return { x: r.left + 20, y: r.top + r.height / 2 }
-        })
-        await click(fold, 'the capability fold')
-      }
       const helps = await read(() =>
         [...document.querySelector('figure-editor').renderRoot.querySelectorAll('figure-links, figure-clips')].flatMap((element, host) =>
           [...element.shadowRoot.querySelectorAll('button[help]')].map((b, i) => ({ host, i, seen: b.getClientRects().length > 0 })).filter(b => b.seen)

package/test/browser/places-mesh.check.mjs

@@ -198,15 +198,10 @@ describe('places made by a rule: the shared slot layout editor on a part\'s face
   before(async () => {
     await mount(addFigureBox(figure('Stacker'), { id: 'fork', size: { x: 1200, y: 50, z: 900 }, position: { x: 0, y: 25, z: 0 } }))
     await pick('fork')
-    /* What the figure does is a folded group of the properties (chief architect 2026-10-16): opened as a hand opens it. */
-    const fold = await read(() => {
-      const summary = document.querySelector('figure-editor').renderRoot.querySelector('div[panel]:not([off]) section[capability] > details > summary')
-      summary.scrollIntoView({ block: 'center' })
-      const r = summary.getBoundingClientRect()
-      return { x: r.left + 20, y: r.top + r.height / 2 }
-    })
-    await page().mouse.click(fold.x, fold.y)
-    await until(() => !!document.querySelector('figure-editor').renderRoot.querySelector('div[panel]:not([off]) section[capability] > details[open]'), [], 'the capability fold open')
+    /* What the figure does is a tab of its own (user 2026-10-17). */
+    const tab = await read(l => probe.tab(l), 'figure.label.tab-short-capability')
+    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-capability', [], 'the capability tab on')
     await settled()
   })
 

package/test/browser/props.check.mjs

@@ -70,8 +70,8 @@ async function press(selector, what) {
 }
 
 /**
- * The groups of the panel shown, top to bottom, by what each is: the part's name, the size, the place and the row the
- * links draw, the look, what the figure does, and 「더 보기」.
+ * 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.
  */
 const groupsInOrder = () =>
   read(() => {
@@ -80,11 +80,11 @@ const groupsInOrder = () =>
     const links = panel.querySelector('figure-links')?.shadowRoot
     const marks = {
       name: panel.querySelector('input[name-field]'),
-      size: links?.querySelector('section[size]'),
+      size: links?.querySelector('section[size], section[size-response]'),
       place: links?.querySelector('section[fastening]'),
+      position: links?.querySelector('section[position-response]'),
       row: panel.querySelector('section[slot=row]') ?? links?.querySelector('section[row]'),
       look: panel.querySelector('figure-material-panel:not([show])'),
-      capability: panel.querySelector('section[capability]'),
       more: panel.querySelector('section[more]')
     }
     return Object.entries(marks)
@@ -93,12 +93,18 @@ const groupsInOrder = () =>
       .map(([name]) => name)
   })
 
-describe('the side: four tabs, the view and the history from the bar', () => {
+/* A side tab pressed, by its name. */
+async function tab(name) {
+  await press(`aside button[tab][aria-label="figure.label.tab-short-${name}"]`, `the ${name} tab`)
+  await read(() => document.querySelector('figure-editor').updateComplete)
+}
+
+describe('the side: six tabs, the view and the history from the bar', () => {
   before(() => mount('rollers'))
 
-  test('properties, motion, data and the verdict -- the four tabs, in that order', async () => {
+  test('properties, responsive, motion, capability, data and the verdict -- the six tabs, in that order (user 2026-10-17)', async () => {
     const tabs = await read(() => [...document.querySelector('figure-editor').shadowRoot.querySelectorAll('aside button[tab]')].map(b => b.getAttribute('aria-label')))
-    assert.deepEqual(tabs, ['properties', 'motion', 'data', 'verdict'].map(t => `figure.label.tab-short-${t}`))
+    assert.deepEqual(tabs, ['properties', 'response', 'motion', 'capability', 'data', 'verdict'].map(t => `figure.label.tab-short-${t}`))
   })
 
   test('the view opens over the work from the bar, pressed while open; Esc closes it', async () => {
@@ -126,18 +132,27 @@ describe('the side: four tabs, the view and the history 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, row, look, what it does, more', async () => {
+  test('a part fastened in a row: name, size, place, look, more; on 「반응형」 its size rules and its row', async () => {
     await pick('roller')
-    assert.deepEqual(await groupsInOrder(), ['name', 'size', 'place', 'row', 'look', 'capability', 'more'])
+    await tab('properties')
+    assert.deepEqual(await groupsInOrder(), ['name', 'size', 'place', 'look', 'more'])
+    await tab('response')
+    assert.deepEqual(await groupsInOrder(), ['size', 'row'])
+    await tab('properties')
   })
 
   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', 'row', 'look', 'capability', 'more'])
+    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. */
+    await tab('response')
+    assert.deepEqual(await groupsInOrder(), ['size', 'position', 'row'])
+    await tab('properties')
   })
 
   test('a fastened part\'s place is one line and 「바꾸기」: no locked cells, no drawing, until it is changed', async () => {
     await pick('mark')
+    await tab('properties')
     const place = () =>
       read(() => {
         const editor = document.querySelector('figure-editor')
@@ -187,6 +202,8 @@ describe('a group\'s 「⋯」: its rarer actions, by the mouse or the keyboard'
 
   test('Esc closes the menu and nothing is done', async () => {
     await pick('roller')
+    /* The row is the 「반응형」 tab's. */
+    await tab('response')
     const start = await revision()
     await press('section[row] button[group-menu]', 'the row\'s 「⋯」')
     await until(() => document.activeElement?.localName === 'ox-popup-menu', [], 'the menu open, with the focus')
@@ -232,16 +249,19 @@ describe('the parts panel stands at the side\'s heights (2026-10-16)', () => {
   before(() => mount('rollers'))
 
   test('the detail level is one height with the side\'s fields, and the palette\'s tiles one height with each other', async () => {
+    await pick('bed')
     const heights = await read(() => {
       const parts = document.querySelector('figure-editor').shadowRoot.querySelector('figure-parts').shadowRoot
       const h = e => Math.round(e.getBoundingClientRect().height)
       const tiles = [...parts.querySelectorAll('div[palette] button[shape]:not([import])')].map(h)
       return { level: h(parts.querySelector('div[level] select')), tiles: [...new Set(tiles)], count: tiles.length, import: h(parts.querySelector('button[shape][import]')) }
     })
-    assert.equal(heights.level, 30, 'the detail level select')
+    const side = await read(() => Math.round(document.querySelector('figure-editor').shadowRoot.querySelector('input[name-field]')?.getBoundingClientRect().height ?? 0))
+    assert.ok(side > 0, 'a side field to measure against')
+    assert.equal(heights.level, side, 'the detail level select, one height with the side\'s fields')
     assert.ok(heights.count >= 9, `the starting shapes: ${heights.count}`)
     assert.equal(heights.tiles.length, 1, `one tile height: ${heights.tiles}`)
-    assert.equal(heights.import, 30, 'the file import on one line, its own row')
+    assert.equal(heights.import, side, 'the file import on one line, its own row, at the fields\' height')
   })
 
   /* A static guard sees the sizes written down; an icon with none stands at md-icon's own 24 (the recipe catalog's did). */
@@ -260,3 +280,38 @@ describe('the parts panel stands at the side\'s heights (2026-10-16)', () => {
     assert.deepEqual(sizes.filter(s => !['16', '18', '20'].includes(s.split(' ')[0])), [])
   })
 })
+
+describe('a label and its field on one line, the field a line not a box (user 2026-10-17)', () => {
+  before(() => mount('rollers'))
+
+  /* Every visible label beside the control after it: the field's row, not the row above. */
+  const rows = () =>
+    read(() => {
+      const all = []
+      const walk = root => { for (const e of root.querySelectorAll('*')) { all.push(e); if (e.shadowRoot) walk(e.shadowRoot) } }
+      walk(document.querySelector('figure-editor').shadowRoot.querySelector('div[panel]:not([off])'))
+      const out = []
+      for (const field of all.filter(e => e.matches?.('div[field], div[inline-field], div[form]') && e.checkVisibility())) {
+        const label = field.querySelector(':scope > label, :scope > span')
+        const control = field.querySelector(':scope > input, :scope > select, :scope > div[swatches], :scope > div[row]')
+        if (!label || !control || !label.checkVisibility() || !control.checkVisibility()) continue
+        const a = label.getBoundingClientRect(), b = control.getBoundingClientRect()
+        out.push({ label: label.textContent.trim().slice(0, 20), sameLine: a.top < b.bottom && b.top < a.bottom, leftOf: a.right <= b.left + 1 })
+      }
+      const boxed = all.filter(e => e.matches?.('input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select') && e.checkVisibility() && !e.closest('div[cell]'))
+        .map(e => { const s = getComputedStyle(e); return { top: s.borderTopWidth, left: s.borderLeftWidth, bottom: s.borderBottomWidth } })
+      return { out, boxed }
+    })
+
+  /* The figure's own group is the modeller page's (figure-properties), not this page's: its rows are checked in screen.check. */
+  for (const part of ['bed', 'roller']) {
+    test(`${part}: every label beside its field, every field a line`, async () => {
+      await pick(part)
+      const { out, boxed } = await rows()
+      assert.ok(out.length >= 2, `rows read: ${out.length}`)
+      assert.deepEqual(out.filter(r => !r.sameLine || !r.leftOf), [], 'labels on their field\'s line, to its left')
+      assert.ok(boxed.length > 0, 'fields read')
+      assert.deepEqual(boxed.filter(b => b.top !== '0px' || b.left !== '0px' || b.bottom !== '1px'), [], 'only the line under it')
+    })
+  }
+})

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

@@ -60,6 +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'))
+    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 click('details[row-fold] > summary', {}, 'the row\'s fold')
   })
 

package/test/browser/screen.check.mjs

@@ -191,13 +191,13 @@ describe('the frame: parts · canvas · one side of seven tabs, and the bar over
     assert.equal(await read(() => getComputedStyle(screenCheck.editor()).containerType), 'inline-size')
   })
 
-  test('the side\'s four tabs, in order, each saying its name under its icon -- the name it is read by', async () => {
+  test('the side\'s six tabs, in order, each saying its name under its icon -- the name it is read by', async () => {
     const tabs = await read(() =>
       [...screenCheck.editor().shadowRoot.querySelectorAll('aside button[tab]')].map(b => ({ label: b.getAttribute('aria-label'), shows: b.querySelector('span[tab-label]')?.textContent.trim() }))
     )
     assert.deepEqual(
       tabs.map(t => t.label),
-      ['properties', 'motion', 'data', 'verdict'].map(TAB)
+      ['properties', 'response', 'motion', 'capability', 'data', 'verdict'].map(TAB)
     )
     for (const tab of tabs) assert.equal(tab.shows, tab.label, `${tab.label} shows its name`)
     assert.equal(await read(() => screenCheck.editor().shadowRoot.querySelector('aside').firstElementChild.matches('div[tabs]')), true, 'the tabs are the side\'s first row')
@@ -206,12 +206,12 @@ describe('the frame: parts · canvas · one side of seven tabs, and the bar over
   test('a tab shows its panel and hides the others without taking them down -- the verdict keeps what it holds', async () => {
     const panels = () =>
       read(() => [...screenCheck.editor().shadowRoot.querySelectorAll('aside > div[panel]')].map(p => ({ seen: p.getBoundingClientRect().height > 0, connected: p.isConnected, verdict: !!p.querySelector('slot[name=verdict]') })))
-    const tabs = ['properties', 'motion', 'data', 'verdict']
+    const tabs = ['properties', 'response', 'motion', 'capability', 'data', 'verdict']
     for (const [at, tab] of tabs.entries()) {
       await pressTab(TAB(tab))
       await until(`${tab} on`, name => screenCheck.editor().shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === name, TAB(tab))
       const now = await panels()
-      assert.equal(now.length, 4, 'four panels, all standing')
+      assert.equal(now.length, 6, 'six panels, all standing')
       assert.deepEqual(now.map(p => p.seen), tabs.map((_, i) => i === at), `${tab}: its panel seen, the rest hidden`)
       assert.ok(now.every(p => p.connected))
       assert.ok(now[tabs.indexOf('verdict')].verdict, 'the verdict panel holds the verdict slot whichever tab is on')
@@ -329,7 +329,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, place, material and, folded, its places; motion its motion and controls -- each under the part\'s head', async () => {
+  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 () => {
     await pressRow('upper-arm')
     await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
     const holds = () =>
@@ -349,16 +349,17 @@ describe('a part chosen: each tab in its place, the figure-wide tabs give way, t
     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}`)
     assert.ok(now.material, 'its material')
-    /* What it does is a folded group of the properties now (chief architect 2026-10-16), its places inside. */
-    await press('the capability fold', () => screenCheck.shownPanel().querySelector('section[capability] > details > summary'))
-    const places = await read(() => {
-      const fold = screenCheck.shownPanel().querySelector('section[capability] > details')
-      const links = fold.querySelector('figure-links')
-      return { open: fold.open, heads: links ? [...links.shadowRoot.querySelectorAll('section > h3')].map(h => screenCheck.ownText(h)) : [], capability: !!fold.querySelector('figure-capability-panel') }
-    })
-    assert.ok(places.open, 'the fold opened')
-    assert.ok(places.heads.length === 1 && places.heads[0].startsWith('figure.label.places-on-part'), `the places on the part: ${places.heads}`)
-    assert.ok(places.capability, 'its capabilities')
+    /* How it answers a size has a tab of its own (user 2026-10-17, 「반응형」). */
+    await pressTab(TAB('response'))
+    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}`)
+    /* What it does is a tab again. */
+    await pressTab(TAB('capability'))
+    now = await holds()
+    assert.ok(now.subject, 'the part\'s head')
+    assert.ok(now.links.length === 1 && now.links[0].startsWith('figure.label.places-on-part'), `the places on the part: ${now.links}`)
+    assert.ok(now.capability, 'its capabilities')
     await pressTab(TAB('motion'))
     now = await holds()
     assert.ok(now.subject, 'the part\'s head')
@@ -812,8 +813,11 @@ describe('a part\'s size row: a rule\'s numbers only where a rule sets every sid
     await mount('box')
     await pressRow('box')
     await until('box chosen', () => screenCheck.editor().selected === 'box')
-    await press('follow the figure\'s size', () => screenCheck.deep('button[follow-size]')[0])
+    /* 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 until('following', () => ['x', 'y', 'z'].every(axis => !screenCheck.editor().session.read().fields.some(f => f.id === `box.size.${axis}`)))
+    await pressTab(TAB('properties'))
     assert.deepEqual(await sizeRow(), { held: 3 }, 'three sides, each held by the rule')
   })
 })
@@ -841,9 +845,12 @@ describe('the side panel is found as it was left, per part', () => {
   test('scrolled and a fold opened on one part; another part opens at its top; back, the first is as it was left', async () => {
     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. */
+    if (await read(() => !!screenCheck.shownPanel().querySelector('section[more] > details[open]')))
+      await press('the more fold', () => screenCheck.shownPanel().querySelector('section[more] > details > summary'))
     await press('a fold', () => {
       const panel = screenCheck.shownPanel()
-      const closed = [...panel.querySelectorAll('figure-links')].flatMap(l => [...l.shadowRoot.querySelectorAll('details')]).find(d => !d.open)
+      const closed = [...panel.querySelectorAll('details'), ...[...panel.querySelectorAll('figure-links')].flatMap(l => [...l.shadowRoot.querySelectorAll('details')])].find(d => !d.open && d.checkVisibility())
       return closed?.querySelector('summary')
     })
     const opened = await folds()
@@ -1008,6 +1015,28 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     }
   })
 
+  /* The figure's own group in the side's one-line rows (user 2026-10-17): the identifier, the name, where it stands. */
+  test('the figure panel\'s labels stand beside their fields, the identifier\'s too, each field a line', async () => {
+    await pressTab(TAB('properties'))
+    const rows = await read(() => {
+      const properties = screenCheck.deep('figure-properties')[0]
+      const out = []
+      const type = properties.querySelector('label[type-field]')
+      const pairs = [[type?.querySelector('span'), type?.querySelector('input, code')]]
+      for (const field of properties.shadowRoot.querySelectorAll('div[field]')) pairs.push([field.querySelector(':scope > label'), field.querySelector(':scope > input, :scope > select, :scope > div[row]')])
+      for (const [label, control] of pairs) {
+        if (!label || !control || !label.checkVisibility() || !control.checkVisibility()) continue
+        const a = label.getBoundingClientRect(), b = control.getBoundingClientRect()
+        const line = control.matches('input, select') ? getComputedStyle(control) : null
+        out.push({ label: label.textContent.trim(), sameLine: a.top < b.bottom && b.top < a.bottom, leftOf: a.right <= b.left + 1, box: line ? line.borderTopWidth !== '0px' || line.borderLeftWidth !== '0px' : false })
+      }
+      return out
+    })
+    assert.ok(rows.length >= 3, `rows read: ${rows.map(r => r.label)}`)
+    assert.deepEqual(rows.filter(r => !r.sameLine || !r.leftOf), [], 'labels on their field\'s line, to its left')
+    assert.deepEqual(rows.filter(r => r.box), [], 'fields drawn as a line, not a box')
+  })
+
   test('the figure\'s type is the first field of the figure panel, under its heading', async () => {
     await pressTab(TAB('properties'))
     const first = await read(() => {
@@ -1143,8 +1172,9 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     await open('fig-p', 'arm-clip')
     await pressRow('upper-arm')
     await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
-    /* The part's panel fits the side now; its places opened make it long enough to scroll. */
-    await press('the capability fold', () => screenCheck.shownPanel().querySelector('section[capability] > details:not([open]) > summary'))
+    /* The part's panel fits the side now: its 「더 보기」 open makes it long enough to scroll. */
+    if (await read(() => !!screenCheck.shownPanel().querySelector('section[more] > details:not([open])')))
+      await press('the more fold', () => screenCheck.shownPanel().querySelector('section[more] > details:not([open]) > summary'))
     const at = await read(() => {
       const r = screenCheck.shownPanel().getBoundingClientRect()
       return { x: r.left + r.width / 2, y: r.top + r.height / 2 }

package/test/browser/serve-acceptance.mjs

@@ -24,7 +24,8 @@ import { buildPage } from './build.mjs'
 const HERE = dirname(fileURLToPath(import.meta.url))
 const bundle = await buildPage('acceptance-page.js')
 const dir = dirname(bundle)
-const ko = readFileSync(resolve(HERE, '../../translations/ko.json'))
+/* The figure panel's words are figure-viewer's: both packages' Korean, as the app loads every module's. */
+const ko = Buffer.from(JSON.stringify({ ...JSON.parse(readFileSync(resolve(HERE, '../../../figure-viewer/translations/ko.json'), 'utf-8')), ...JSON.parse(readFileSync(resolve(HERE, '../../translations/ko.json'), 'utf-8')) }))
 const APP = resolve(process.env.OPERATO_APP ?? resolve(HERE, '../../../../../../operato-application/packages/operato-figure'))
 /* The builder's ThemeOverridePlugin, run from the app root so its module order is the app's. */
 const themeFiles = JSON.parse(

package/test/place-words.test.ts

@@ -0,0 +1,31 @@
+/*
+ * Words that send the author somewhere name a place that is there (chief architect's ruling 2026-10-17: six side tabs,
+ * 「반응형」 holding size behaviour, the position that follows the size, the row and the range). The modeller once said
+ * 「움직임 탭의 치수에서」 and 「「위치와 크기」에서 「여기에 고정」」 after both had moved, and 「성숙도 탭」 for the tab named 검사.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+
+const table = (path: string) => JSON.parse(readFileSync(new URL(path, import.meta.url), 'utf8')) as Record<string, string>
+const GONE: Record<string, RegExp> = {
+  ko: /성숙도 탭|「위치와 크기」|움직임 탭의 (치수|붙이기)/,
+  en: /maturity tab|under placement|under size and placement|(sizes|fastening) in the motion tab/
+}
+
+test('no message sends the author to a tab or group the side no longer has', () => {
+  for (const lang of ['ko', 'en'] as const)
+    for (const path of ['../translations/', '../../figure-service/translations/']) {
+      const said = Object.entries(table(`${path}${lang}.json`)).filter(([, words]) => GONE[lang]!.test(words))
+      assert.deepEqual(said, [], `${path}${lang}.json`)
+    }
+})
+
+test('the places named are the tabs as they are called', () => {
+  const ko = table('../translations/ko.json')
+  const service = table('../../figure-service/translations/ko.json')
+  assert.ok(ko['figure.text.gizmo-size-follows']!.includes(`${ko['figure.label.tab-short-response']} 탭`))
+  assert.ok(ko['figure.text.preview-blocked-by-errors']!.includes(`${ko['figure.label.tab-short-verdict']} 탭`))
+  for (const key of ['figure.gate.parts-split-on-resize.how', 'figure.gate.sizing-not-uniform.how'])
+    assert.ok(service[key]!.includes(`${ko['figure.label.tab-short-response']} 탭의 「${ko['figure.label.group-position-response']}」`), key)
+})