@things-factory/figure-ui 10.1.271 → 10.1.273

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.271",
+  "version": "10.1.273",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -27,7 +27,7 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.12.4",
+    "@hatiolab/figure-model": "^0.12.6",
     "@hatiolab/things-scene": "^10.1.111",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.29.69",
@@ -42,11 +42,12 @@
     "@operato/slot-layout-editor": "^10.29.58",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.29.43",
-    "@things-factory/ai-assistant": "^10.1.271",
-    "@things-factory/figure-service": "^10.1.271",
-    "@things-factory/figure-viewer": "^10.1.266",
-    "@things-factory/setting-base": "^10.1.271",
+    "@things-factory/ai-assistant": "^10.1.273",
+    "@things-factory/figure-service": "^10.1.273",
+    "@things-factory/figure-viewer": "^10.1.273",
+    "@things-factory/setting-base": "^10.1.273",
+    "json5": "^2.2.0",
     "three": "^0.185.1"
   },
-  "gitHead": "843bc2608d8c89348ced871777535966758927db"
+  "gitHead": "0ead3ad069edf9f1ef5076caec85916bdb26728f"
 }

package/test/browser/editing-page.js

@@ -124,7 +124,7 @@ window.editing = {
   },
   /** The page point of a button by its words (the page loads no translations: the words are keys). */
   button(words) {
-    const b = deep('button').find(b => b.textContent.includes(words))
+    const b = deep('button').find(b => b.textContent.includes(words) || b.title === words)
     return b ? { ...centreOf(b), disabled: b.disabled } : null
   },
   /** The first range input inside the `host` elements: where its thumb is and how many pixels one unit of it spans. */

package/test/browser/editing.check.mjs

@@ -353,7 +353,7 @@ describe('the material: colours by purpose, one step each, a glow drawn while dr
   test('a diameter typed on the arrangement tab is written once when it is left, as the radius it halves to', async () => {
     await click(await read(() => probe.tab('figure.label.tab-short-response')))
     const start = await revision()
-    await type('drum X · figure.label.size-diameter figure.label.size-measure', '600')
+    await type('drum X·Z · figure.label.size-diameter figure.label.size-measure', '600')
     assert.equal(await revision(), start, 'nothing written yet')
     await page().keyboard.press('Enter')
     await sleep(400)
@@ -514,7 +514,8 @@ describe('a clip scrubbed and keyed (2026-09-24)', () => {
   const typeInClips = async (label, text) => {
     const field = await page().evaluateHandle(label => {
       const deep = (root = document) => [...root.querySelectorAll('input')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      return deep().find(i => i.type === 'number' && i.getAttribute('aria-label') === label && i.getRootNode().host?.localName === 'figure-clips') ?? null
+      /* The clip's own field, not the pose bar's above the clips: the bar keys the clip last scrubbed (tutorial 2026-11-12). */
+      return deep().find(i => i.type === 'number' && i.getAttribute('aria-label') === label && i.getRootNode().host?.localName === 'figure-clips' && !i.closest('div[pose-bar]')) ?? null
     }, label)
     assert.ok(await field.evaluate(i => !!i), `${label} in the clips`)
     await field.evaluate(i => i.scrollIntoView({ block: 'center' }))
@@ -576,12 +577,12 @@ describe('a track moved round its loop, a clip copied (robot dog 2026-11-03)', (
     await button.click()
   }
 
-  test('a clip in a group is copied in one step; one in none is not offered', async () => {
-    /* The left door's clip is in no group, the right one's is in one. */
+  test('a clip in a group is copied in one step; one in none is offered too, and makes its group (review 2026-11-11)', async () => {
+    /* The left door's clip is in no group, the right one's is in one: both may be copied now. */
     assert.equal(await read(() => {
       const deep = (root = document) => [...root.querySelectorAll('button[copy-clip]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
       return deep().map(b => b.disabled).join()
-    }), 'true,false')
+    }), 'false,false')
     const start = await revision()
     await pressIn('button[copy-clip]', 1)
     await until(async () => (await revision()) === start + 1, 'one step')

package/test/browser/links.check.mjs

@@ -802,6 +802,23 @@ describe('the fastening window: tried freely, written once', () => {
     assert.equal((await state()).revision, start.revision, 'nothing written while trying')
   }
 
+  test('the ways to fasten stand on one line, a small view beside each word (user 2026-11-12)', async () => {
+    await pick('lamp')
+    await changeFastening()
+    const ways = await read(() => {
+      const deep = (s, root = document) => [...root.querySelectorAll(s)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(s, e.shadowRoot)))
+      return deep('div[modes] > button[mode]').map(b => {
+        const r = b.getBoundingClientRect()
+        return { top: Math.round(r.top), height: Math.round(r.height) }
+      })
+    })
+    assert.ok(ways.length >= 2, `ways: ${JSON.stringify(ways)}`)
+    assert.equal(new Set(ways.map(w => w.top)).size, 1, `one line: ${JSON.stringify(ways)}`)
+    assert.ok(ways.every(w => w.height <= 30), `each as tall as a line: ${JSON.stringify(ways)}`)
+    await press('[cancel]')
+    await until(() => !probe.fastenTargets(), [], 'the window closed')
+  })
+
   test('three choices tried, then 취소: nothing written, the window closed, nothing of them drawn', async () => {
     await pick('lamp')
     const was = await lamp()
@@ -905,6 +922,19 @@ describe('a motion on the motion tab', () => {
     await until(() => look.drawn().includes('__preview:min:upper-arm') && look.drawn().includes('__preview:max:upper-arm'), [], 'both ends drawn')
     assert.equal((await all('p[motion-summary]', 'figure.text.motion-summary')).length, 1)
   })
+
+  test('its delete and edit are icons on the motion\'s line, and the size-by-state form is folded until asked for (user 2026-11-12)', async () => {
+    const seen = await read(() => {
+      const deep = (s, root = document) => [...root.querySelectorAll(s)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(s, e.shadowRoot)))
+      const line = deep('div[motion-axis]')[0]
+      const icons = [...line.querySelectorAll('button[act]')].map(b => ({ title: b.title, words: b.textContent.replace(/delete|edit/g, '').trim() }))
+      const fold = deep('details[state-size-add]')[0]
+      return { icons, folded: fold ? !fold.open : null, heading: deep('h4[state-size]').length }
+    })
+    assert.deepEqual(seen.icons.map(i => i.words), ['', ''], 'no words beside the icons')
+    assert.deepEqual(seen.icons.map(i => i.title), ['figure.button.remove-motion', 'figure.button.change-motion'])
+    assert.deepEqual([seen.folded, seen.heading], [true, 0], 'folded, no heading over nothing')
+  })
 })
 
 describe('pressed on the canvas while the fastening window is open (ADR-0140 stage 4)', () => {

package/test/browser/modeller.check.mjs

@@ -603,7 +603,7 @@ describe('a motion is changed where it is (2026-09-25)', () => {
     const button = async text =>
       page().evaluate(text => {
         const deep = (root = document) => [...root.querySelectorAll('button')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-        const b = deep().find(x => x.textContent.includes(text))
+        const b = deep().find(x => x.textContent.includes(text) || x.title === text)
         if (!b) return null
         b.scrollIntoView({ block: 'center' })
         const r = b.getBoundingClientRect()
@@ -641,7 +641,7 @@ describe('a motion is changed where it is (2026-09-25)', () => {
     page().evaluate(
       (text, attribute) => {
         const deep = (root = document) => [...root.querySelectorAll('button')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-        const b = deep().find(x => x.textContent.includes(text) && (!attribute || x.hasAttribute(attribute)))
+        const b = deep().find(x => (x.textContent.includes(text) || x.title === text) && (!attribute || x.hasAttribute(attribute)))
         if (!b) return null
         b.scrollIntoView({ block: 'center' })
         const r = b.getBoundingClientRect()

package/test/browser/parts-page.js

@@ -119,6 +119,10 @@ window.parts = {
     }
     return { row: box(li), name: box(li.querySelector('span[label]')), ops: box(li.querySelector('div[ops]')) }
   },
+  /** Each row's height, the chosen one among them. */
+  rowHeights() {
+    return [...panel().shadowRoot.querySelectorAll('li')].map(li => li.getBoundingClientRect().height)
+  },
   /** The list made this wide (the start pane narrowed by the author). */
   narrow(px) {
     panel().style.width = px ? `${px}px` : ''

package/test/browser/parts.check.mjs

@@ -305,17 +305,23 @@ describe('the list narrowed: the selected row keeps its name and its buttons in
   before(() => mount('box', 'three'))
   after(() => read(() => parts.narrow(0)))
 
-  test('wide, the buttons stand beside the name; under 200 px they go to a line of their own, inside the row', async () => {
+  /*
+    Chosen, a row keeps its height, wide or narrow: its buttons beside the name, the name cut short. Going to a line of
+    their own under 200 px, they pushed every row under it down as a part was chosen, and the next press landed on
+    another part (user 2026-11-12).
+  */
+  test('the buttons stand beside the name, wide or narrow; the chosen row is as tall as the others, inside the list', async () => {
     await pick('b')
-    await read(() => parts.narrow(320))
-    await sleep(200)
-    let at = await read(() => parts.selectedRowBoxes())
-    assert.ok(at.ops.top < at.name.bottom, `beside the name: ${JSON.stringify(at)}`)
-    await read(() => parts.narrow(180))
-    await sleep(200)
-    at = await read(() => parts.selectedRowBoxes())
-    assert.ok(at.ops.top >= at.name.bottom - 1, `under the name: ${JSON.stringify(at)}`)
-    assert.ok(at.ops.right <= at.row.right + 1 && at.name.right <= at.row.right + 1, `inside the row: ${JSON.stringify(at)}`)
+    for (const width of [320, 180]) {
+      await read(width => parts.narrow(width), width)
+      await sleep(200)
+      const at = await read(() => parts.selectedRowBoxes())
+      assert.ok(at.ops.top < at.name.bottom, `${width}: beside the name: ${JSON.stringify(at)}`)
+      assert.ok(at.ops.right <= at.row.right + 1 && at.name.right <= at.row.right + 1, `${width}: inside the row: ${JSON.stringify(at)}`)
+      assert.ok(at.name.right > at.name.left && at.name.right <= at.ops.left + 1, `${width}: the name shows, clear of the buttons: ${JSON.stringify(at)}`)
+      const heights = await read(() => parts.rowHeights())
+      assert.equal(new Set(heights.map(Math.round)).size, 1, `${width}: every row as tall: ${heights}`)
+    }
   })
 })
 

package/test/browser/screen-page.js

@@ -16,6 +16,7 @@ import {
   compileFigureAsset,
   createFigureAsset,
   editFigurePart,
+  figurePartsExtentOf,
   robotArmFigure,
   serializeFigureAsset
 } from '@hatiolab/figure-model'
@@ -51,6 +52,15 @@ const FIGURES = {
   /* A figure hung from the ceiling, its box under it. */
   ceiling: () => applyFigureAuthoring(addFigureBox(named('Hung'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: -200, z: 0 } }), { kind: 'set-placement', placement: 'ceiling' }),
   /* A drum: a palette part whose sizes are its own fields. */
+  /* A box whose every size is held at one value: the board cannot change its size. */
+  fixed: () => {
+    const asset = addFigureBox(named('Fixed'), cube('box', 0))
+    for (const input of asset.document.model.inputs) {
+      const at = asset.designInputs[input.id]
+      if (/^size\.[xyz]$/.test(input.id) && typeof at === 'number') Object.assign(input, { min: at, max: at })
+    }
+    return asset
+  },
   drum: () => addFigurePrimitive(named('Drum'), { id: 'drum', kind: 'cylinder', dimensions: { radius: 200, length: 500 }, position: { x: 0, y: 250, z: 0 } }),
   /* A lighting tower that follows its height only: the wider variants ask a width it does not declare. */
   tower: () => {
@@ -77,7 +87,8 @@ const FIGURES = {
     return applyFigureAuthoring(a, { kind: 'make-repeat', part: 'roller', axis: 'x', pitch: 200 })
   },
   /* The robot arm with a clip that turns its base: controls and a clip in the preview. */
-  'arm-clip': () => editFigurePart(robotArmFigure(), { kind: 'set-driver', state: 'j1-base', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 4, value: 60 }] })
+  /* Declares its size, so the preview offers the size help over it (shown only where the size can change). */
+  'arm-clip': () => editFigurePart(applyFigureAuthoring(robotArmFigure(), { kind: 'declare-instance-size', at: figurePartsExtentOf(robotArmFigure()) }), { kind: 'set-driver', state: 'j1-base', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 4, value: 60 }] })
 }
 
 /** A figure by name, as saved text. */

package/test/browser/screen.check.mjs

@@ -604,6 +604,15 @@ describe('the preview: registered as a board registers it, posed and played, the
     await mode('preview')
     await until('the preview stands', () => !!screenCheck.deep('figure-preview')[0]?.shadowRoot?.querySelector('div[setup] select'))
     assert.equal(await read(() => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[setup] select').value), 'forearm', 'the help speaks of the part chosen')
+    /* One line over the figure, its words in its title: three lines of help covered the figure (user 2026-11-12). */
+    const setup = await read(() => {
+      const box = screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[setup]')
+      const top = s => { const r = box.querySelector(s).getBoundingClientRect(); return Math.round(r.top + r.height / 2) }
+      return { height: box.getBoundingClientRect().height, select: top('select'), button: top('button'), title: box.title }
+    })
+    assert.ok(Math.abs(setup.select - setup.button) <= 2, `one line: ${JSON.stringify(setup)}`)
+    assert.ok(setup.height <= 44, `no taller than a line: ${JSON.stringify(setup)}`)
+    assert.ok(setup.title.length > 0, 'its words in its title')
     await mode('edit')
     await until('the edit canvas in front', () => screenCheck.deep('figure-preview')[0].hidden)
     assert.equal(await selected(), 'forearm', 'still chosen')
@@ -622,6 +631,21 @@ describe('the preview: registered as a board registers it, posed and played, the
     assert.ok(dials.filter(d => d.unit !== 'deg').every(d => !d.dial), 'no dial for what does not turn')
 
     const before = { revision: await revision(), pose: await read(() => JSON.parse(screenCheck.editor().session.source()).stateDefaults['j2-shoulder'] ?? 0) }
+    /*
+      The three buttons stand on one line from the start, unable until there is something to keep or clear: they do not
+      come and go and move the rows under them (user 2026-11-12).
+    */
+    const row = () => ['pose', 'clear-tried', 'fold-controls'].map(name => {
+      const b = screenCheck.deep('figure-preview')[0].shadowRoot.querySelector(`div[clips] button[${name}]`)
+      return b ? { top: Math.round(b.getBoundingClientRect().top + b.getBoundingClientRect().height / 2), height: Math.round(b.getBoundingClientRect().height), disabled: b.disabled } : null
+    })
+    const untried = await read(row)
+    assert.ok(untried.every(Boolean), 'all three there')
+    assert.equal(new Set(untried.map(b => b.top)).size, 1, 'on one line')
+    /* The fold an icon now; keep and clear each one line high, not broken inside a word (user 2026-11-12). */
+    assert.equal(untried[0].height, untried[1].height, `each label on one line, not broken inside a word: ${JSON.stringify(untried)}`)
+    assert.ok(untried[0].height <= 24, `one line high: ${JSON.stringify(untried)}`)
+    assert.equal(untried[2].disabled, false, 'folding is always there to press')
     const slider = await element('the shoulder', () => screenCheck.previewControl('j2-shoulder').querySelector('input[type=range]'))
     await slider.focus()
     for (let i = 0; i < 10; i++) await page().keyboard.press('ArrowRight')
@@ -633,19 +657,45 @@ describe('the preview: registered as a board registers it, posed and played, the
     assert.equal(await read(() => JSON.parse(screenCheck.editor().session.source()).stateDefaults['j2-shoulder']), tried, 'the pose kept is the one tried')
   })
 
+  test('a row\'s name dragged sideways scrubs its value, as the property panel\'s do: a degree a pixel, Shift ten times finer, held in its range (user 2026-11-12)', async () => {
+    const at = () => read(() => {
+      const l = screenCheck.previewControl('j1-base')
+      const r = l.querySelector('span[scrub]').getBoundingClientRect()
+      return { x: r.left + 10, y: r.top + r.height / 2, value: Number(l.querySelector('input[typed]').value), max: Number(l.querySelector('input[type=range]').max), cursor: getComputedStyle(l.querySelector('span[scrub]')).cursor }
+    })
+    const drag = async (dx, shift = false) => {
+      const from = await at()
+      if (shift) await page().keyboard.down('Shift')
+      await page().mouse.move(from.x, from.y)
+      await page().mouse.down()
+      await page().mouse.move(from.x + dx / 2, from.y)
+      await page().mouse.move(from.x + dx, from.y)
+      await page().mouse.up()
+      if (shift) await page().keyboard.up('Shift')
+      return (await at()).value - from.value
+    }
+    assert.equal((await at()).cursor, 'ew-resize', 'the name says it can be dragged')
+    assert.equal(await drag(20), 20, 'a degree a pixel')
+    assert.equal(Math.round((await drag(-20, true)) * 10) / 10, -2, 'Shift: a tenth of a degree a pixel')
+    const top = (await at()).max
+    await drag(5000)
+    assert.equal((await at()).value, top, 'held at the range\'s end')
+  })
+
   test('a clip stands still until it is played: its speed reads 0, and the speed played is what every instance is given', async () => {
     const clip = () =>
       read(() => {
         const l = screenCheck.previewControl('cycle')
-        return { value: Number(l.querySelector('input[type=range]').value), shown: l.querySelector('output').textContent.trim() }
+        return { value: Number(l.querySelector('input[type=range]').value), shown: l.querySelector('input[typed]').value }
       })
-    assert.deepEqual(await clip(), { value: 0, shown: '0.00' }, 'not played yet')
+    assert.deepEqual(await clip(), { value: 0, shown: '0' }, 'not played yet')
     const slider = await element('the clip\'s speed', () => screenCheck.previewControl('cycle').querySelector('input[type=range]'))
     await slider.focus()
     await page().keyboard.press('ArrowRight')
-    await until('played', () => screenCheck.previewControl('cycle').querySelector('output').textContent.trim() !== '0.00')
+    await until('played', () => screenCheck.previewControl('cycle').querySelector('input[typed]').value !== '0')
     const now = await clip()
-    assert.equal(now.shown, now.value.toFixed(2))
+    /* The speed in the same box every slider's value has (user 2026-11-12). */
+    assert.equal(now.shown, String(Math.round(now.value * 100) / 100))
     const given = await read(() => screenCheck.deep('figure-preview')[0].scene.root.components.map(c => c.state.clips?.cycle))
     assert.equal(given.length, 1, 'the one figure the preview stands')
     assert.ok(given.every(v => v === now.value), `each given the speed shown: ${given}`)
@@ -675,7 +725,8 @@ describe('the preview: registered as a board registers it, posed and played, the
     assert.ok((await given()).every(p => p['j2-shoulder'] === 37), 'a control the clip does not drive keeps its value')
     await press('back to the default pose', () => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('button[clear-tried]'))
     await until('all let go', () => screenCheck.deep('figure-preview')[0].scene.root.components.every(c => Object.keys(c.state.parameters ?? {}).length === 0))
-    assert.equal(await read(() => !!screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('button[clear-tried]')), false, 'nothing left to clear')
+    /* Nothing left to clear: the button stays where it is, unable (user 2026-11-12: 「보이다 안보이다 하지마라」). */
+    assert.equal(await read(() => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('button[clear-tried]')?.disabled), true, 'nothing left to clear')
   })
 
   test('the preview looks from the front, the side or above, and its controls fold out of the way (robot dog, 2026-11-03)', async () => {
@@ -690,10 +741,56 @@ describe('the preview: registered as a board registers it, posed and played, the
     await press('fold the controls', () => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('button[fold-controls]'))
     await until('folded', () => !screenCheck.previewControl('j1-base'))
     assert.ok(await read(() => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[clips] button[fold-controls]')), 'the one button stays')
+    /* Folded, it says what it opens, and stands on the stage's bottom, not at its top (user 2026-11-12). */
+    const folded = await read(() => {
+      const host = screenCheck.deep('figure-preview')[0]
+      const clips = host.shadowRoot.querySelector('div[clips]')
+      return { words: clips.querySelector('button[fold-controls]').textContent.replace('unfold_more', '').trim(), gap: Math.round(host.getBoundingClientRect().bottom - clips.getBoundingClientRect().bottom) }
+    })
+    assert.deepEqual(folded, { words: 'figure.button.controls-unfold', gap: 8 })
     await press('unfold the controls', () => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('button[fold-controls]'))
     await until('back', () => !!screenCheck.previewControl('j1-base'))
   })
 
+  test('short (a window 300 high), the controls stay under the legend and scroll, their keep line and size help in sight (user 2026-11-12)', async () => {
+    const viewport = page().viewport()
+    await mode('preview')
+    await page().setViewport({ width: viewport.width, height: 300 })
+    try {
+      await until('the controls held short', () => {
+        const root = screenCheck.deep('figure-preview')[0].shadowRoot
+        const clips = root.querySelector('div[clips]')
+        return clips && clips.scrollHeight > clips.clientHeight + 10
+      })
+      const at = () => read(() => {
+        const host = screenCheck.deep('figure-preview')[0]
+        const root = host.shadowRoot
+        const r = el => el.getBoundingClientRect()
+        const clips = root.querySelector('div[clips]')
+        return {
+          legend: r(root.querySelector('div[legend]')).bottom,
+          stage: r(host).bottom,
+          clips: { top: r(clips).top, bottom: r(clips).bottom },
+          actions: r(root.querySelector('div[clips] div[actions]')).top,
+          setup: r(root.querySelector('div[clips] div[setup]')).bottom
+        }
+      })
+      const top = await at()
+      assert.ok(top.clips.top >= top.legend, `under the legend: ${JSON.stringify(top)}`)
+      assert.ok(top.clips.bottom <= top.stage, `inside the stage: ${JSON.stringify(top)}`)
+      await read(() => { const c = screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[clips]'); c.scrollTop = c.scrollHeight })
+      await new Promise(resolve => setTimeout(resolve, 100))
+      const end = await at()
+      assert.ok(Math.abs(end.actions - end.clips.top) <= 1, `the keep line stays at the top as the rows scroll: ${JSON.stringify(end)}`)
+      assert.ok(Math.abs(end.setup - end.clips.bottom) <= 1, `the size help stays at the bottom: ${JSON.stringify(end)}`)
+      await read(() => { screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[clips]').scrollTop = 0 })
+      const start = await at()
+      assert.ok(Math.abs(start.setup - start.clips.bottom) <= 1, `scrolled back, the size help still at the bottom: ${JSON.stringify(start)}`)
+    } finally {
+      await page().setViewport(viewport)
+    }
+  })
+
   test('narrow (1024 wide and less, both sides open), the size help and the controls share the bottom row without covering each other', async () => {
     const viewport = page().viewport()
     await page().setViewport({ width: 1024, height: 768 })
@@ -713,13 +810,25 @@ describe('the preview: registered as a board registers it, posed and played, the
             const r = el.getBoundingClientRect()
             return { left: r.left, right: r.right, top: r.top, bottom: r.bottom }
           }
-          return { host: rect(screenCheck.deep('figure-preview')[0]), foot: rect(root.querySelector('div[foot]')), setup: rect(root.querySelector('div[foot] > div[setup]')), clips: rect(root.querySelector('div[foot] > div[clips]')) }
+          const clips = root.querySelector('div[foot] > div[clips]')
+          return {
+            host: rect(screenCheck.deep('figure-preview')[0]),
+            foot: rect(root.querySelector('div[foot]')),
+            setup: rect(clips.querySelector(':scope > div[setup] > button')),
+            last: clips.lastElementChild.hasAttribute('setup'),
+            clips: rect(clips),
+            typed: [...clips.querySelectorAll('input[typed]')].map(rect),
+            padding: parseFloat(getComputedStyle(clips).paddingRight)
+          }
         })
         const inside = (a, b) => a.left >= b.left - 0.5 && a.right <= b.right + 0.5 && a.top >= b.top - 0.5 && a.bottom <= b.bottom + 0.5
-        const apart = (a, b) => a.right <= b.left || b.right <= a.left || a.bottom <= b.top || b.bottom <= a.top
-        assert.ok(inside(boxes.setup, boxes.foot) && inside(boxes.clips, boxes.foot), `${width}: both in the bottom row: ${JSON.stringify(boxes)}`)
-        assert.ok(apart(boxes.setup, boxes.clips), `${width}: neither covers the other: ${JSON.stringify(boxes)}`)
-        assert.ok(boxes.setup.bottom >= boxes.clips.bottom - 0.5, `${width}: the help on the bottom line, the controls above it when they wrap`)
+        /* The help is the controls' last row, as wide as they are: a box of its own left a gap at its right (user 2026-11-12). */
+        assert.ok(inside(boxes.clips, boxes.foot), `${width}: in the bottom row: ${JSON.stringify(boxes)}`)
+        assert.ok(boxes.last, `${width}: the help is the controls' last row`)
+        assert.ok(Math.abs(boxes.setup.right - (boxes.clips.right - boxes.padding)) <= 1, `${width}: the help reaches the controls' right edge: ${JSON.stringify(boxes)}`)
+        /* Every slider's value in one column of boxes. */
+        assert.equal(new Set(boxes.typed.map(b => `${Math.round(b.left)}-${Math.round(b.right)}`)).size, 1, `${width}: one column of value boxes`)
+        assert.ok(Math.abs(boxes.typed[0].right - boxes.setup.right) <= 1, `${width}: the value boxes end where the help does`)
         assert.ok(Math.abs(boxes.host.bottom - 8 - boxes.foot.bottom) <= 1, `${width}: the row stands on the stage's bottom edge: ${JSON.stringify(boxes)}`)
       }
     } finally {
@@ -759,6 +868,28 @@ describe('the preview: registered as a board registers it, posed and played, the
   })
 })
 
+describe('the preview of a figure whose size cannot change', () => {
+  test('has no size help over it (user 2026-11-12)', async () => {
+    await mount('fixed')
+    await press('the preview mode', () => screenCheck.deep('button[mode]').find(b => b.title === 'figure.text.mode-preview-explained'))
+    await until('the preview stands', () => !!screenCheck.deep('figure-preview')[0]?.shadowRoot?.querySelector('div[foot]'))
+    assert.equal(await read(() => !!screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[setup]')), false, 'no size help on a figure of one size')
+    /* Its size said at the legend's end, on the legend's one line; no box of sliders under it (user 2026-11-12). */
+    const viewport = page().viewport()
+    await page().setViewport({ ...viewport, width: 2400 })
+    await new Promise(resolve => setTimeout(resolve, 300))
+    const legend = await read(() => {
+      const root = screenCheck.deep('figure-preview')[0].shadowRoot
+      const middle = el => { const r = el.getBoundingClientRect(); return Math.round(r.top + r.height / 2) }
+      return { said: root.querySelector('div[legend] span[said]')?.textContent.trim(), sizes: !!root.querySelector('div[sizes]'), lines: new Set([...root.querySelectorAll('div[legend] button, div[legend] span[said]')].map(middle)).size }
+    })
+    await page().setViewport(viewport)
+    /* This page reads keys, not words, long enough to wrap the legend in a narrower window. */
+    assert.deepEqual(legend, { said: '400 × 400 × 400 mm', sizes: false, lines: 1 })
+    await boardsUp()
+  })
+})
+
 describe('the preview of a figure that does not declare every size', () => {
   test('a variant drawn at another size than it asks says so in the legend', async () => {
     await mount('tower')
@@ -818,7 +949,7 @@ describe('the preview stands one figure the author stretches (first 15 minutes,
     })
     /* The box is the figure's body at 6 m: the frame, as wide as asked (ADR-0145). */
     await until('the figure 6 m wide, its body', () => Math.round(screenCheck.deep('figure-preview')[0].scene.root.components[0].model.width) === 6000)
-    const said = await read(() => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[sizes] p[said]').textContent.trim())
+    const said = await read(() => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('div[legend] span[said]').textContent.trim())
     assert.ok(said.startsWith('6,000 × '), said)
     const box = await read(() => { const m = screenCheck.deep('figure-preview')[0].scene.root.components[0].model; return m.left + m.width / 2 })
     assert.equal(Math.round(box), await read(() => screenCheck.deep('figure-preview')[0].board.width / 2), 'grown about the board\'s centre')

package/test/browser/section.check.mjs

@@ -748,6 +748,27 @@ describe('the fastening drawing in the fastening window', () => {
     assert.deepEqual(joint.body0, { part: 'frame', face: 'front' })
     assert.deepEqual([joint.body1, joint.origin?.facing], [{ part: 'leaf' }, 'meet'], 'set on the front by its real shape (ADR-0140 3.2)')
   })
+
+  /* Tutorial 2026-11-11: the field a size opened did not take the keys; 600 typed and Enter fastened the part where it was. */
+  test('a size pressed in the drawing opens its field with the keys in it: typed and Enter moves the part there, the window stays', async () => {
+    await change()
+    await until(() => !!findDeep('text[dim]', { within: 'figure-fasten-drawing' }), 'a size in the drawing')
+    const start = await state()
+    await press('text[dim]', { within: 'figure-fasten-drawing' })
+    await until(() => {
+      const field = findDeep('div[where] input', { within: 'figure-fasten-drawing' })
+      return !!field && field.getRootNode().activeElement === field
+    }, 'the size\'s field, with the keys in it')
+    await page().keyboard.type('37')
+    await page().keyboard.press('Enter')
+    await sleep(300)
+    assert.ok(await read(() => !!probe.fastenTargets()), 'the window stays open')
+    assert.equal((await state()).revision, start.revision, 'nothing written before 적용')
+    await press('[apply]', { within: 'figure-fasten-dialog' })
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    const align = (await read(() => probe.fastening('leaf'))).origin?.align ?? {}
+    assert.ok(Object.values(align).some(a => a?.mm === 37), `the typed size: ${JSON.stringify(align)}`)
+  })
 })
 
 describe('the face choice: asked where the edit was made, and the same edit goes again with it', () => {

package/test/browser/serve-response.mjs

@@ -1,14 +1,17 @@
 /* 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 { readFileSync, writeFileSync } 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')
+/* The words the modeller reads come from figure-ui and figure-viewer, as the app merges them: one alone showed keys. */
+const koWords = join(process.env.TMPDIR ?? '/tmp', 'figure-ui-harness-ko.json')
+writeFileSync(koWords, JSON.stringify({ ...JSON.parse(readFileSync(require.resolve('@things-factory/figure-viewer/translations/ko.json'), 'utf8')), ...JSON.parse(readFileSync(new URL('../../translations/ko.json', import.meta.url), 'utf8')) }))
 const routes = new Map([
   ['/page.js', [bundle, 'application/javascript']],
-  ['/ko.json', [new URL('../../translations/ko.json', import.meta.url), 'application/json']],
+  ['/ko.json', [koWords, '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']]
 ])