@things-factory/figure-ui 10.1.147 → 10.1.150

package/test/browser/editing.check.mjs

@@ -0,0 +1,550 @@
+/*
+ * Editing a part in the modeller, in a real browser: the bar's gizmo tools, putting a part on its plane, the material,
+ * values drawn while they are in hand and written once on release, the pose sliders and the clips, the question asked
+ * before an edit stops a clip, the keys, the joint fan and the recipe catalog's guide. What is read is what a person
+ * sees -- the tools offered, the part as the canvas draws it, the app's notices and prompts -- and what the session
+ * holds: its revision counts the steps written.
+ *
+ * Run:  node --test test/browser/editing.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const SIX_AXIS = resolve(HERE, '../fixtures/robot-arm-6dof.json')
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('editing-page.js'))
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+const state = () => read(() => probe.state())
+const revision = async () => (await state()).revision
+const look = id => read(id => editing.look(id), id)
+const UNDO = ['Control', 'KeyZ']
+
+/** Waits until `check` holds, reading again every 50 ms; fails with `what` after `ms`. */
+async function until(check, what, ms = 3000) {
+  for (const end = Date.now() + ms; Date.now() < end; await sleep(50)) if (await check()) return
+  assert.fail(`waited for ${what}`)
+}
+
+/** Mounts a figure -- one of the harness's (`box`, `arm`, `room`), the six-axis arm, or one of the page's -- and waits for it to be drawn. */
+async function mount(kind, figure, templates = []) {
+  const text = kind === 'six-axis' ? readFileSync(SIX_AXIS, 'utf-8') : null
+  await read((kind, text, figure, templates) => harness.mount(kind, figure ? figures[figure]() : text, templates), kind === 'six-axis' ? 'box' : kind, text, figure, templates)
+  await until(
+    () =>
+      read(() => {
+        /* Not drawn yet is not an error: until the canvas stands, reading it throws. */
+        try {
+          return probe.ids().some(id => !!probe.partOnPage(id))
+        } catch {
+          return false
+        }
+      }),
+    'the figure drawn',
+    10000
+  )
+  /* The camera is fitted after the first frames. */
+  await sleep(1000)
+}
+
+async function click(point) {
+  assert.ok(point, 'nothing on the page to click')
+  await page().mouse.click(point.x, point.y)
+  await sleep(300)
+}
+const pick = async id => {
+  await click(await read(id => probe.row(id), id))
+  assert.equal((await state()).selected, id, `${id} is picked from the list`)
+}
+/** Keys pressed with nothing focused: the page's, not a field's. */
+async function press(...keys) {
+  await read(() => {
+    const deepest = root => (root.activeElement?.shadowRoot ? deepest(root.activeElement.shadowRoot) : root.activeElement)
+    deepest(document)?.blur?.()
+  })
+  for (const key of keys.slice(0, -1)) await page().keyboard.down(key)
+  await page().keyboard.press(keys.at(-1))
+  for (const key of keys.slice(0, -1).reverse()) await page().keyboard.up(key)
+  await sleep(400)
+}
+/** Types into a field by its label; `commit` is the key that ends it, or none to keep the value in hand. */
+async function type(label, text, commit) {
+  const at = await read(label => probe.labelled(label), label)
+  assert.ok(at, `the field ${label}`)
+  await page().mouse.click(at.x, at.y, { clickCount: 3 })
+  await page().keyboard.type(text)
+  if (commit) await page().keyboard.press(commit)
+  await sleep(400)
+}
+/** Presses at `from`, moves `dx` across in ten steps, calls `held` before letting go, then lets go. */
+async function drag(from, dx, held) {
+  await page().mouse.move(from.x, from.y)
+  await page().mouse.down()
+  for (let i = 1; i <= 10; i++) {
+    await page().mouse.move(from.x + (dx * i) / 10, from.y)
+    await sleep(30)
+  }
+  await sleep(300)
+  const seen = await held()
+  await page().mouse.up()
+  await sleep(500)
+  return seen
+}
+
+const KEYS = { translate: 'KeyW', rotate: 'KeyE', scale: 'KeyR' }
+
+/**
+ * Drags a gizmo handle `pixels` outward along it, as modeller.check.mjs does: hovered until the gizmo holds it, ten moves,
+ * release. With `midway`, the hand holds still half way and `midway()` is read there before the drag goes on.
+ */
+async function dragHandle(part, mode, axis, pixels, midway) {
+  const s = await state()
+  if (s.mode !== mode || !s.attached) {
+    await page().keyboard.press(KEYS[mode])
+    await sleep(300)
+  }
+  assert.ok((await state()).attached, `the ${mode} gizmo is on the selected part`)
+  const centre = await read(id => probe.partOnPage(id), part)
+  let hold
+  for (const point of await read(axis => probe.handlePoints(axis), axis)) {
+    await page().mouse.move(point.x, point.y)
+    await sleep(20)
+    if ((await state()).axis === axis) {
+      hold = point
+      break
+    }
+  }
+  assert.ok(hold, `the mouse finds the ${mode} ${axis} handle`)
+  const length = Math.hypot(hold.x - centre.x, hold.y - centre.y) || 1
+  const dx = (hold.x - centre.x) / length,
+    dy = (hold.y - centre.y) / length
+  let seen
+  await page().mouse.down()
+  for (let i = 1; i <= 10; i++) {
+    await page().mouse.move(hold.x + (dx * pixels * i) / 10, hold.y + (dy * pixels * i) / 10)
+    await sleep(30)
+    if (i === 5 && midway) {
+      /* Longer than the canvas waits after a change before it writes one that came with no pointer down. */
+      await sleep(500)
+      seen = await midway()
+    }
+  }
+  await page().mouse.up()
+  await sleep(600)
+  return seen
+}
+
+/** A box's bottom, from the session: it is drawn up y from its start. */
+const bottomOf = async id => {
+  const b = await read(id => probe.body(id), id)
+  return Math.round(b.t[1] + b.dimensions.start)
+}
+
+describe('the bar\'s move, turn and resize tools: the keys\' way, only where the part\'s own numbers take it (2026-09-26)', () => {
+  before(() => mount('box'))
+
+  test('a part of its own numbers is offered all three, each telling its key', async () => {
+    await pick('box')
+    const tools = await read(() => editing.tools())
+    assert.deepEqual(tools.map(t => [t.label, t.disabled]), [
+      ['figure.button.gizmo-translate', false],
+      ['figure.button.gizmo-rotate', false],
+      ['figure.button.gizmo-scale', false]
+    ])
+    assert.deepEqual(tools.map(t => t.title.match(/\((\w)\)/)?.[1]), ['W', 'E', 'R'])
+  })
+
+  test('R pressed with the part picked from the list puts the resize gizmo on it, and the bar shows resize pressed', async () => {
+    await press('KeyR')
+    const s = await state()
+    assert.equal(s.mode, 'scale')
+    assert.ok(s.attached, 'the gizmo is on the box')
+    assert.deepEqual((await read(() => editing.tools())).filter(t => t.pressed).map(t => t.label), ['figure.button.gizmo-scale'])
+  })
+
+  test('the height dragged with the resize handle keeps the bottom on the floor, in one step', async () => {
+    const start = await revision()
+    const was = await read(() => probe.body('box'))
+    await dragHandle('box', 'scale', 'Y', 80)
+    const now = await read(() => probe.body('box'))
+    assert.equal(await revision(), start + 1, 'one step')
+    assert.ok(now.dimensions.length > was.dimensions.length * 1.1, `taller: ${was.dimensions.length} -> ${now.dimensions.length}`)
+    assert.equal(await bottomOf('box'), 0, 'the bottom stays on the floor, as the placement keeps it')
+  })
+
+  test('a drag held still half way is written once, on release -- nothing while the hand rests', async () => {
+    const start = await revision()
+    const was = await read(() => probe.body('box'))
+    const midway = await dragHandle('box', 'translate', 'X', 80, () => revision())
+    assert.equal(midway, start, 'nothing written while the pointer is down')
+    assert.equal(await revision(), start + 1, 'one step on release')
+    assert.ok(Math.abs((await read(() => probe.body('box'))).t[0] - was.t[0]) > 20, 'moved the whole drag')
+  })
+
+  test('in the preview the tools are not offered; back in the edit view they are', async () => {
+    await click(await read(() => probe.modeButton('preview')))
+    await sleep(1000)
+    assert.deepEqual((await read(() => editing.tools())).map(t => t.disabled), [true, true, true])
+    await click(await read(() => probe.modeButton('edit')))
+    await sleep(1000)
+    assert.deepEqual((await read(() => editing.tools())).map(t => t.disabled), [false, false, false])
+  })
+})
+
+describe('a part a joint places is not moved by the bar, nor put on the plane', () => {
+  before(() => mount('arm'))
+
+  test('the upper arm: move is not offered, and the align tools are not there', async () => {
+    await pick('upper-arm')
+    const move = (await read(() => editing.tools())).find(t => t.label === 'figure.button.gizmo-translate')
+    assert.equal(move.disabled, true, 'not moved by its own numbers')
+    assert.equal(await read(() => editing.at('button[plane-align]')), null, 'no align tools')
+  })
+})
+
+describe('put on the plane by the figure\'s placement: once, not fastened (designer 2026-09-27)', () => {
+  test('a box 500 mm above the floor is put on it by its bottom, in one step', async () => {
+    await mount('box', 'raised')
+    await pick('box')
+    assert.ok((await bottomOf('box')) > 0, 'it starts off the floor')
+    const start = await revision()
+    await click(await read(() => editing.at('button[plane-align]')))
+    assert.equal(await revision(), start + 1, 'one step')
+    assert.equal(await bottomOf('box'), 0)
+  })
+
+  test('a tilted part is told it touches by a point or an edge, before and after', async () => {
+    await mount('box', 'tilted')
+    await pick('box')
+    const tool = await read(() => editing.at('button[plane-align]'))
+    assert.equal(tool.title, 'figure.text.align-to-floor-tilted')
+    await read(() => editing.told())
+    const start = await revision()
+    await click(tool)
+    assert.equal(await revision(), start + 1, 'one step')
+    assert.deepEqual((await read(() => editing.told())).filter(n => n.level === 'info').map(n => n.message), ['figure.text.aligned-tilted-floor'])
+  })
+})
+
+describe('the material: colours by purpose, one step each, a glow drawn while dragged, segments for round bodies only', () => {
+  before(() => mount('box', 'shapes'))
+
+  test('a box has no segments to choose', async () => {
+    await pick('bin')
+    assert.equal(await read(() => editing.at('button[seg]', 'figure-material-panel')), null)
+  })
+
+  test('the colours are named by what they are for, never by their raw names', async () => {
+    const titles = (await read(() => editing.all('button[swatch]', 'figure-material-panel'))).map(s => s.title)
+    assert.ok(titles.length >= 5, `the palette's colours: ${titles}`)
+    assert.deepEqual(titles.filter(t => !t.startsWith('figure.label.palette-purpose-')), [])
+  })
+
+  test('a colour picked is one step, and the part takes it', async () => {
+    const start = await revision()
+    assert.notEqual((await read(() => editing.material('bin'))).token, 'palette.accent')
+    await click(await read(() => editing.at('button[swatch][title="figure.label.palette-purpose-accent"]', 'figure-material-panel')))
+    assert.equal(await revision(), start + 1, 'one step')
+    assert.equal((await read(() => editing.material('bin'))).token, 'palette.accent')
+  })
+
+  test('the glow is drawn while its slider is held, nothing written; the release writes it once', async () => {
+    const start = await revision()
+    const thumb = await read(() => editing.range('figure-material-panel'))
+    assert.ok(thumb, 'the glow slider')
+    assert.equal(await look('bin').then(l => l.glow), 0)
+    const held = await drag(thumb, thumb.pxPerUnit * 0.5, async () => ({ glow: (await look('bin')).glow, revision: await revision() }))
+    assert.ok(held.glow > 0.2, `drawn glowing while held: ${held.glow}`)
+    assert.equal(held.revision, start, 'nothing written while held')
+    assert.equal(await revision(), start + 1, 'the release is one step')
+    assert.ok((await read(() => editing.material('bin'))).emissive?.intensity > 0.2)
+  })
+
+  test('a drum offers the four common segment counts as outlines, the rest folded away', async () => {
+    await pick('drum')
+    const offered = await read(() => {
+      const panel = [...document.querySelector('figure-editor').renderRoot.querySelectorAll('figure-material-panel')][0].shadowRoot
+      const free = panel.querySelector('details[free]')
+      return {
+        common: [...panel.querySelectorAll('div[segments] > button[seg]')].map(b => !!b.querySelector('svg polygon')),
+        folded: free ? { open: free.open, count: free.querySelectorAll('button').length } : null
+      }
+    })
+    assert.deepEqual(offered.common, [true, true, true, true])
+    assert.ok(offered.folded && !offered.folded.open && offered.folded.count > 0, JSON.stringify(offered.folded))
+  })
+
+  test('a single field typed is drawn while it is typed; written when it is left', async () => {
+    const start = await revision()
+    await type('drum.dimension.radius', '300')
+    assert.equal((await look('drum')).size[0], 600, 'drawn 600 across while typed')
+    assert.equal(await revision(), start, 'nothing written yet')
+    await page().keyboard.press('Enter')
+    await sleep(400)
+    assert.equal(await revision(), start + 1)
+    assert.equal(await read(() => probe.value('drum.dimension.radius')), 300)
+  })
+})
+
+describe('values in hand on the properties tab: drawn at once, written on change (user 2026-09-24)', () => {
+  before(async () => {
+    await mount('box')
+    await pick('box')
+  })
+
+  test('a size typed is drawn while it is typed, and written once on Enter', async () => {
+    const start = await revision()
+    await type('box.size.x', '700')
+    assert.equal((await look('box')).size[0], 700, 'drawn 700 wide while typed')
+    assert.equal(await revision(), start, 'nothing written yet')
+    await page().keyboard.press('Enter')
+    await sleep(400)
+    assert.equal(await revision(), start + 1)
+  })
+
+  test('once written, the value in hand is let go: undone, the canvas draws the figure as it stands', async () => {
+    await press(...UNDO)
+    assert.equal(await read(() => probe.value('box.size.x')), 400, 'undone')
+    assert.equal((await look('box')).size[0], 400, 'drawn as it stands, not as last typed')
+  })
+
+  test('a label dragged sideways scrubs the value: drawn while held, one step on release', async () => {
+    const start = await revision()
+    const label = await read(() => editing.fieldLabel('box.size.x'))
+    assert.ok(label, 'the X of the size row')
+    const held = await drag(label, 60, async () => ({ drawn: (await look('box')).size[0], shown: await read(() => editing.fieldValue('box.size.x')), revision: await revision() }))
+    assert.equal(held.drawn, 460, 'one millimetre a pixel at 400 mm')
+    assert.equal(held.shown, '460', 'the field follows')
+    assert.equal(held.revision, start, 'nothing written while held')
+    assert.equal(await revision(), start + 1, 'the release is one step')
+    assert.equal(await read(() => probe.value('box.size.x')), 460)
+  })
+})
+
+describe('the pose sliders: drawn while dragged, one step on release; the pose kept as the default (user 2026-09-24)', () => {
+  before(async () => {
+    await mount('six-axis')
+    await click(await read(() => probe.tab('figure.label.tab-short-motion')))
+  })
+
+  test('one drag of a slider is one step, written on release, none while held', async () => {
+    const start = await revision()
+    const thumb = await read(() => probe.slider('Base pan (J1)'))
+    assert.ok(thumb, 'the J1 slider')
+    const held = await drag(thumb, thumb.pxPerUnit * 60, async () => ({ revision: await revision(), drawn: await read(() => probe.drawn('finger-left')) }))
+    assert.equal(held.revision, start, 'nothing written while held')
+    assert.equal(await revision(), start + 1, 'one step on release')
+    assert.deepEqual(await read(() => probe.drawn('finger-left')), held.drawn, 'the release lands where the drag showed')
+  })
+
+  test('the pose looked at is kept as the one the figure stands in, in one step', async () => {
+    const before = await read(() => editing.pose())
+    assert.notDeepEqual(before.now, { ...before.now, ...before.defaults }, 'the pose looked at differs from the one it stands in')
+    const keep = await read(() => editing.button('figure.button.keep-pose'))
+    assert.ok(keep && !keep.disabled, 'offered')
+    const start = await revision()
+    await click(keep)
+    assert.equal(await revision(), start + 1, 'one step')
+    const after = await read(() => editing.pose())
+    assert.deepEqual(after.defaults, after.now)
+  })
+
+  test('the controls are not offered again among the figure\'s design values', async () => {
+    const controls = Object.keys((await read(() => editing.pose())).now)
+    assert.ok(controls.length > 0)
+    await click(await read(() => probe.tab('figure.label.tab-short-properties')))
+    const shown = await read(() => editing.propertyInputs())
+    assert.deepEqual(shown.filter(label => controls.includes(label)), [])
+  })
+})
+
+describe('a clip scrubbed and keyed (2026-09-24)', () => {
+  before(async () => {
+    await mount('box', 'doors')
+    await click(await read(() => probe.tab('figure.label.tab-short-motion')))
+  })
+
+  test('the clip bar draws the pose at that moment while held, and writes it once on release', async () => {
+    const start = await revision()
+    const was = await look('left')
+    const bar = await read(() => editing.range('figure-clips'))
+    assert.ok(bar, 'the left door\'s clip bar')
+    const held = await drag(bar, bar.pxPerUnit * 1, async () => ({ drawn: await look('left'), revision: await revision() }))
+    assert.notDeepEqual(held.drawn.turn, was.turn, 'the door is drawn turned while the bar is held')
+    assert.equal(held.revision, start, 'nothing written while held')
+    assert.equal(await revision(), start + 1, 'one step on release')
+    const at = (await read(() => editing.range('figure-clips'))).value
+    assert.ok(at > 0.5, `scrubbed to ${at} s`)
+    assert.ok(Math.abs((await read(() => probe.value('left-open'))) - 40 * at) < 1e-6, 'the pose of that moment: 80 degrees over 2 seconds')
+    assert.deepEqual((await look('left')).turn, held.drawn.turn, 'the release lands where the bar showed')
+  })
+
+  test('a key added at that moment is one step, and the clip has it', async () => {
+    const start = await revision()
+    await click(await read(() => editing.button('figure.button.add-key-here')))
+    assert.equal(await revision(), start + 1, 'one step')
+    assert.deepEqual(Object.fromEntries((await read(() => editing.clips())).map(c => [c.clip, c.keys])), { 'left-swing': 3, 'right-swing': 2 })
+  })
+
+  test('a track\'s name stands on its own line, the repeat choice and a small remove button under it', async () => {
+    const head = await read(() => editing.trackHead())
+    assert.ok(head, 'a track')
+    assert.equal(head.name.lines, 1, 'the name is one line, not a letter a line')
+    assert.ok(head.name.bottom <= head.choice.top, 'above the choice')
+    assert.ok(Math.abs(head.choice.top - head.remove.top) < 2, 'the choice and remove side by side')
+    assert.ok(head.remove.width <= 32, `a small button: ${head.remove.width}px`)
+  })
+})
+
+describe('an edit that would stop a clip is asked first (designer 2026-09-27)', () => {
+  before(() => mount('box', 'doors'))
+
+  const asked = () => read(() => editing.prompt())
+  const unchanged = async start => {
+    assert.equal(await revision(), start, 'nothing written')
+    assert.deepEqual((await read(() => editing.clips())).map(c => c.clip), ['left-swing', 'right-swing'])
+  }
+
+  test('the door removed: asked, naming the clip, and nothing is written until it is answered', async () => {
+    await pick('left')
+    const start = await revision()
+    await press('Delete')
+    const prompt = await asked()
+    assert.match(prompt?.text ?? '', /figure\.text\.clips-would-go/)
+    await unchanged(start)
+    await click(prompt.cancel)
+    assert.equal(await asked(), null, 'answered: kept')
+    await unchanged(start)
+  })
+
+  test('its motion taken away: asked the same way', async () => {
+    await pick('left')
+    await click(await read(() => probe.tab('figure.label.tab-short-motion')))
+    const start = await revision()
+    await click(await read(() => editing.button('figure.button.remove-motion')))
+    const prompt = await asked()
+    assert.match(prompt?.text ?? '', /figure\.text\.clips-would-go/)
+    await unchanged(start)
+    await click(prompt.cancel)
+  })
+
+  test('agreed, exactly that clip goes in one step, and one undo brings it back', async () => {
+    const start = await revision()
+    await click(await read(() => editing.button('figure.button.remove-motion')))
+    await click((await asked()).confirm)
+    assert.equal(await revision(), start + 1, 'one step')
+    assert.deepEqual((await read(() => editing.clips())).map(c => c.clip), ['right-swing'], 'only the left door\'s clip')
+    await press(...UNDO)
+    assert.deepEqual((await read(() => editing.clips())).map(c => c.clip), ['left-swing', 'right-swing'], 'back')
+  })
+
+  test('the figure changed while the question was read: the answer is not taken, and the clip stays', async () => {
+    await click(await read(() => editing.button('figure.button.remove-motion')))
+    const prompt = await asked()
+    assert.ok(prompt, 'asked')
+    /* Another change lands meanwhile, as one from elsewhere would. */
+    await read(() => document.querySelector('figure-editor').session.command({ kind: 'rename', name: 'Doors renamed' }))
+    const start = await revision()
+    await click(prompt.confirm)
+    assert.equal((await state()).error, 'figure.text.clips-consent-stale')
+    await unchanged(start)
+  })
+})
+
+describe('the modeller\'s keys are the page\'s, while the editor is on it', () => {
+  before(() => mount('box'))
+
+  test('Delete with nothing focused removes the picked part; taken off the page, the editor hears no key', async () => {
+    await pick('box')
+    await press('Delete')
+    assert.deepEqual(await read(() => probe.ids()), [], 'removed')
+    const removed = await revision()
+    await read(() => {
+      window.__editor = document.querySelector('figure-editor')
+      window.__editor.remove()
+    })
+    await press(...UNDO)
+    assert.deepEqual(await read(() => ({ revision: __editor.session.read().revision, ids: __editor.session.read().geometry.map(g => g.id) })), { revision: removed, ids: [] })
+  })
+})
+
+describe('the joint fan is shown, never picked (ADR-0097 §5.5)', () => {
+  before(async () => {
+    await mount('arm')
+    await pick('upper-arm')
+  })
+
+  test('a click where the fan lies over a part picks the part behind it', async () => {
+    const at = await read(() => editing.fanOverPart())
+    assert.ok(at, 'the fan lies over a part somewhere')
+    await click(at)
+    assert.equal((await state()).selected, at.behind)
+  })
+})
+
+describe('the recipe catalog says nothing where a template has no guide', () => {
+  const templates = () =>
+    ['sliding-door', 'hinged-door'].map(name => {
+      const recipe = JSON.parse(readFileSync(resolve(HERE, `../../../figure-service/recipes/${name}/recipe.json`), 'utf-8'))
+      return { name, category: recipe.category, tags: recipe.tags, target: recipe.target, title: recipe.title.en, description: recipe.description.en, hasThumbnail: false, recipe }
+    })
+
+  test('a card with no guide shows its details and no guide at all', async () => {
+    await mount('room', null, templates())
+    await pick('room')
+    await click(await read(() => editing.at('button[recipe-catalog]')))
+    await click(await read(() => editing.at('button[card="hinged-door"]')))
+    await sleep(800)
+    assert.ok(await read(() => editing.at('button[insert]')), 'the card is told')
+    assert.equal(await read(() => editing.at('section[detail] ox-markdown')), null)
+  })
+})
+
+/*
+  The size gizmo's reason says what the figure's placement keeps (designer 2026-09-27). The page loads no translations;
+  here the two sentences are given words, so the word the reason carries can be read.
+*/
+describe('the size gizmo withheld from a tilted part says what the placement keeps', () => {
+  before(async () => {
+    await mount('box', 'tilted-ceiling')
+    await read(() =>
+      editing.words({
+        'figure.text.gizmo-size-turned-fastening': '{part} is tilted: its size is typed, keeping {extreme}',
+        'figure.label.kept-extreme-ceiling': 'its highest point',
+        'figure.label.kept-extreme-floor': 'its lowest point'
+      })
+    )
+    await pick('box')
+  })
+  after(() => read(() => editing.words(null)))
+
+  test('hung from the ceiling, the tooltip and the refusal of R both name its highest point', async () => {
+    const resize = (await read(() => editing.tools())).find(t => t.label === 'figure.button.gizmo-scale')
+    assert.equal(resize.disabled, true, 'not offered')
+    assert.ok(resize.title.endsWith('box is tilted: its size is typed, keeping its highest point'), resize.title)
+    await read(() => editing.told())
+    await press('KeyR')
+    assert.deepEqual((await read(() => editing.told())).filter(n => n.level === 'error').map(n => n.message), ['box is tilted: its size is typed, keeping its highest point'])
+    assert.equal((await state()).attached, null, 'no gizmo on it')
+  })
+})
+
+test('the page raised no error', () => {
+  assert.deepEqual(opened.errors, [])
+})

package/test/browser/links-page.js

@@ -0,0 +1,113 @@
+/*
+ * The page `links.check.mjs` drives: the editor of `modeller-page.js`, and a few more readings of what is on the page --
+ * an element found through every shadow root by what it says, what the canvas draws, what the panels tell the editor.
+ * Only reading, apart from `tell`: the event a panel sends the editor, for a command no control on the page offers.
+ */
+import './modeller-page.js'
+
+function deep(selector, root = document) {
+  const found = [...root.querySelectorAll(selector)]
+  for (const element of root.querySelectorAll('*')) if (element.shadowRoot) found.push(...deep(selector, element.shadowRoot))
+  return found
+}
+
+const words = element => element.textContent.replace(/\s+/g, ' ').trim()
+/** An element whose words or accessible name hold `text` (the page loads no translations: words are i18n keys). */
+const saying = text => element => text === undefined || words(element).includes(text) || element.getAttribute('aria-label') === text
+const canvas = () => deep('figure-canvas')[0]
+
+/** A point the element itself is hit at: its centre, or the first point of a grid over it that hits it. */
+function pointOf(element) {
+  element.scrollIntoView({ block: 'center' })
+  const box = element.getBoundingClientRect()
+  const root = element.getRootNode()
+  for (const fy of [0.5, 0.3, 0.7, 0.15, 0.85])
+    for (const fx of [0.5, 0.3, 0.7, 0.15, 0.85]) {
+      const x = box.left + box.width * fx,
+        y = box.top + box.height * fy
+      const hit = root.elementFromPoint ? root.elementFromPoint(x, y) : null
+      if (hit && (hit === element || element.contains(hit))) return { x, y }
+    }
+  return { x: box.left + box.width / 2, y: box.top + box.height / 2 }
+}
+
+const heard = {}
+
+window.look = {
+  /** Every element matching the selector that says `text`: its words and state. */
+  all(selector, text) {
+    return deep(selector)
+      .filter(saying(text))
+      .map(e => ({ text: words(e), disabled: !!e.disabled, open: !!e.open, value: e.value ?? null, label: e.getAttribute('aria-label'), readOnly: !!e.readOnly, spotlit: e.hasAttribute('spotlit') }))
+  },
+  /** A face of the target box in the fastening drawing: whether it can be pressed now, and whether it is the one chosen. */
+  face(f) {
+    const path = deep(`path[face="${f}"]`)[0]
+    if (!path) return null
+    const style = path.getAttribute('style') ?? ''
+    return { pickable: style.includes('cursor:pointer'), chosen: style.includes('stroke-width:2') }
+  },
+  /** The page point of the first element matching the selector that says `text`, to click. */
+  at(selector, text) {
+    const element = deep(selector).find(saying(text))
+    return element ? { ...pointOf(element), disabled: !!element.disabled } : null
+  },
+  /** A select by the words just before it: its value and its options. */
+  select(label) {
+    const s = deep('select').find(one => one.previousElementSibling && words(one.previousElementSibling) === label)
+    return s ? { value: s.value, options: [...s.options].map(o => ({ value: o.value, text: words(o), disabled: o.disabled })) } : null
+  },
+  /** What the canvas draws now, by name. */
+  drawn() {
+    return canvas()?.scene?.root?.components?.map(c => c.state.name) ?? []
+  },
+  /** The face a size drag keeps, as the canvas gives it to a drawn part. */
+  scaleAnchor(name) {
+    return canvas()?.scene?.root?.components?.find(c => c.state.name === name)?.state.scaleAnchor ?? null
+  },
+  /**
+   * From now on, keep what every event of this type carries: anywhere on the page, or -- `section` given -- sent by that
+   * part panel to the editor, which it still is once the panel has left the page.
+   */
+  hear(type, section) {
+    const key = section ? `${section}:${type}` : type
+    const keep = e => heard[key].push(e.detail === undefined ? null : JSON.parse(JSON.stringify(e.detail)))
+    if (section) deep('figure-links').find(l => l.section === section).addEventListener(type, keep)
+    else if (!heard[key]) document.addEventListener(type, keep, true)
+    heard[key] = []
+  },
+  heard(type, section) {
+    return heard[section ? `${section}:${type}` : type] ?? []
+  },
+  /** The side tab on now, by its name. */
+  tab() {
+    return deep('button[tab][on]')[0]?.getAttribute('aria-label') ?? null
+  },
+  /** Whether the first element matching is wholly in the window. */
+  inView(selector) {
+    const e = deep(selector)[0]
+    if (!e) return false
+    const r = e.getBoundingClientRect()
+    return r.top >= 0 && r.bottom <= innerHeight
+  },
+  /** Whether the focus inside the first `host` is on an element matching `selector`. */
+  focusedIn(host, selector) {
+    const active = deep(host)[0]?.shadowRoot?.activeElement
+    return !!active && active.matches(selector)
+  },
+  /** What a part's row in the list says it is fastened to; null for none. */
+  fastenedTo(id) {
+    const label = deep('span[label]').find(s => s.getAttribute('title') === id)
+    const small = label?.querySelector('small[fastened-to]')
+    return small ? words(small) : null
+  },
+  /** An event a part's panel (`section`: shape, places or motion) sends the editor, as the panel would send it. */
+  tell(section, type, detail) {
+    const panel = deep('figure-links').find(l => l.section === section)
+    panel.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
+  },
+  /** What the canvas tells the editor when a drag on a part ends. */
+  transformed(id, result) {
+    canvas().dispatchEvent(new CustomEvent('part-transformed', { detail: { id, result }, bubbles: true, composed: true }))
+  }
+}