@things-factory/figure-ui 10.1.147 → 10.1.149

package/test/browser/screen.check.mjs

@@ -0,0 +1,1003 @@
+/*
+ * The modeller's screen in a real browser: its frame (three panes, the side's six tabs, the bar over the work), a new
+ * figure's first minute, the side panel as parts are chosen, the view tab, the preview, the verdict tab and the card's
+ * picture -- each read as a person meets it, after doing what a person does (a click, a key, a narrower window).
+ *
+ * These were source-text checks in the unit suite (layout, first-minute, theme, view, preview, verdict, maturity,
+ * thumbnail, scene-canvas); a string found in a file said nothing of what the screen does, and broke on any rewording.
+ *
+ * The page is `screen-product-page.js`: the editor harness (`window.editorHarness`, `window.probe`) and the modeller page
+ * over a server in memory (`window.product`), with the assistant dock's stand-in. The check loads no translations: the
+ * words read are the i18n keys.
+ *
+ * Run:  node --test test/browser/screen.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+let opened
+before(async () => {
+  const bundle = await buildPage('screen-product-page.js', { standIns: { '@things-factory/ai-assistant/dist-client/index.js': 'assistant-stand-in.js' } })
+  opened = await openPage(bundle)
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+/** Until the condition holds in the page; a condition that never holds fails the test with its name. */
+async function until(what, fn, ...args) {
+  try {
+    await page().waitForFunction(fn, { timeout: 15000, polling: 50 }, ...args)
+  } catch {
+    assert.fail(`never: ${what}`)
+  }
+}
+/** Clicks, with the mouse, the element `fn` finds in the page. */
+async function press(what, fn, ...args) {
+  const element = (await page().evaluateHandle(fn, ...args)).asElement()
+  assert.ok(element, `nothing to press: ${what}`)
+  await element.click()
+}
+/** The element `fn` finds, for puppeteer's own select and type. */
+async function element(what, fn, ...args) {
+  const found = (await page().evaluateHandle(fn, ...args)).asElement()
+  assert.ok(found, `not on the page: ${what}`)
+  return found
+}
+
+/** The editor over a figure: a harness kind (`box`, `arm`, `door`) or one of `screen-page.js`'s figures. */
+async function mount(kind) {
+  const harnessKinds = ['box', 'arm', 'door', 'room', 'rollers']
+  await boardsUp()
+  const text = harnessKinds.includes(kind) ? null : await read(name => figureText(name), kind)
+  await read((kind, text) => editorHarness.mount(kind, text), harnessKinds.includes(kind) ? kind : 'given', text)
+  /* Standing: the scene up over a figure with parts, the editor drawn over one without. */
+  await until('the editor stands', () => {
+    const editor = screenCheck.editor()
+    const view = editor?.session?.read()
+    if (!view) return false
+    const canvas = screenCheck.deep('figure-canvas')[0]
+    return view.geometry.length === 0 ? !!canvas : !!canvas?.scene?.root?._threeCapability
+  })
+}
+/*
+ * Every board standing has its 3D up, and two frames drawn: a board taken away while the scene is still bringing its 3D
+ * up throws inside things-scene, so a test leaves the boards standing before the next one replaces them.
+ */
+async function boardsUp() {
+  await until('the boards are up', () => screenCheck.deep('figure-canvas, figure-preview').every(e => !e.scene || !!e.scene.root?._threeCapability))
+  for (let i = 0; i < 2; i++) await page().waitForFunction(() => new Promise(done => requestAnimationFrame(() => requestAnimationFrame(() => done(true)))))
+}
+const revision = () => read(() => screenCheck.editor().session.read().revision)
+const source = () => read(() => screenCheck.editor().session.source())
+const selected = () => read(() => screenCheck.editor().selected)
+/** The side tab now on, by its name (the i18n key). */
+const tabOn = () => read(() => screenCheck.editor().shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') ?? null)
+/** A button of the bar over the work (ox-canvas-bar), by its action. */
+const pressBar = action => press(action, a => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').shadowRoot.querySelector(`button[data-action=${a}]`), action)
+const pressTab = name => press(name, name => screenCheck.editor().shadowRoot.querySelector(`button[tab][aria-label="${name}"]`), name)
+const TAB = name => `figure.label.tab-short-${name}`
+/** A row of the parts list, by the part's name. */
+const pressRow = id => press(`the ${id} row`, id => screenCheck.deep('span[label]').find(s => s.getAttribute('title') === id), id)
+
+describe('the verdict tab over a figure, as the modeller page mounts it', () => {
+  /* The server's answers set here are this describe's. */
+  after(() =>
+    read(() => {
+      product.answer('inspectFigureDraft')
+      product.answer('inspectFigure')
+    })
+  )
+
+  test('it draws the report in its order -- how many fit, by axis, budgets, weight, trend, release -- and its scale from the bounds the grade is computed with', async () => {
+    await read(text => alone.mount(text, { figureId: 'fig-1' }), await read(() => figureText('two')))
+    await until('the report is drawn', () => alone.verdict.shadowRoot.querySelectorAll('section').length >= 6)
+    const headings = await read(() => [...alone.verdict.shadowRoot.querySelectorAll('section > h3')].map(h => h.textContent.trim()))
+    assert.deepEqual(headings, [
+      'figure.label.maturity',
+      'figure.label.by-axis',
+      'figure.label.budgets',
+      'figure.label.weight',
+      'figure.label.reuse-trend',
+      'figure.label.release-verdict'
+    ])
+    const scale = await read(() => [...alone.verdict.shadowRoot.querySelectorAll('p[scale] > span')].slice(1).map(s => s.textContent.replace(/\s+/g, ' ').trim()))
+    assert.deepEqual(scale, ['A ≤ 50%', 'B ≤ 75%', 'C ≤ 100%', 'D > 100%'])
+  })
+
+  test('the release verdict comes from the server\'s door: the source on screen and the figure\'s id are what is sent', async () => {
+    await read(() => product.forget())
+    await read(text => alone.mount(text, { figureId: 'fig-1' }), await read(() => figureText('two')))
+    await until('the server is asked', () => product.calls().some(c => c.field === 'inspectFigureDraft'))
+    const sent = await read(() => product.calls().filter(c => c.field === 'inspectFigureDraft').at(-1).variables)
+    assert.deepEqual(sent, { source: await read(() => alone.verdict.revision.text), id: 'fig-1' })
+    await until('the answer is shown', () => !!alone.verdict.shadowRoot.querySelector('p[clear]'))
+  })
+
+  test('no 「부품에 맞추기」 over a figure with no parts; over one with parts, it is offered for the same finding', async () => {
+    const undeclared = await read(() => [alone.finding('occupancy-undeclared')])
+    await read((text, findings) => alone.mount(text, { findings }), await read(() => figureText('empty')), undeclared)
+    await until('the finding is shown', () => !!alone.verdict.shadowRoot.querySelector('li[finding]'))
+    assert.equal(await read(() => alone.verdict.shadowRoot.querySelectorAll('button[fit]').length), 0, 'nothing to measure, nothing offered')
+    await read((text, findings) => alone.mount(text, { findings }), await read(() => figureText('two')), undeclared)
+    await until('the finding is shown', () => !!alone.verdict.shadowRoot.querySelector('li[finding]'))
+    assert.equal(await read(() => alone.verdict.shadowRoot.querySelectorAll('li[finding] button[fit]').length), 1)
+  })
+
+  test('the verdict tab and the release history offer the fit for the same findings, from questions that ask the same fields', async () => {
+    const findings = await read(() => ['part-outside-occupancy', 'occupancy-undeclared', 'mounting-face-floating'].map(code => alone.finding(code)))
+    await read((text, findings) => alone.mount(text, { figureId: 'fig-1', findings, history: true }), await read(() => figureText('two')), findings)
+    const offered = (host, button) =>
+      read(
+        (host, button) => {
+          const root = document.querySelector(host)?.shadowRoot
+          return root ? [...root.querySelectorAll('li[finding]')].filter(li => li.querySelector(button)).map(li => li.querySelector('span[msg]').textContent.trim()).sort() : null
+        },
+        host,
+        button
+      )
+    await until('both judged', () => ['figure-verdict', 'figure-history-panel'].every(host => document.querySelector(host)?.shadowRoot?.querySelectorAll('li[finding]').length === 3))
+    assert.deepEqual(await offered('figure-verdict', 'button[fit]'), ['occupancy-undeclared', 'part-outside-occupancy'])
+    assert.deepEqual(await offered('figure-history-panel', 'button[fit-base]'), await offered('figure-verdict', 'button[fit]'), 'the same two, in both places')
+    const draft = await read(() => alone.fieldsAsked('inspectFigureDraft'))
+    assert.ok(draft?.includes('why') && draft.includes('how'), `the draft's question asks why and how: ${draft}`)
+    assert.equal(draft, await read(() => alone.fieldsAsked('inspectFigure')), 'the saved figure\'s question asks the same fields')
+  })
+})
+
+describe('the frame: parts · canvas · one side of six tabs, and the bar over the work', () => {
+  before(() => mount('box'))
+
+  test('three panes: the parts list on the left, the canvas in the middle, the side on the right -- one side, nothing under the canvas', async () => {
+    const frame = await read(() => {
+      const root = screenCheck.editor().shadowRoot
+      const panes = root.querySelector('ox-three-pane')
+      if (!panes) return null
+      const left = el => Math.round(el.getBoundingClientRect().left)
+      const parts = panes.querySelector(':scope > figure-parts')
+      const canvas = panes.querySelector('figure-canvas')
+      const side = panes.querySelector(':scope > aside')
+      return {
+        partsSlot: parts?.getAttribute('slot'),
+        sideSlot: side?.getAttribute('slot'),
+        lefts: [parts, canvas, side].map(el => (el ? left(el) : null)),
+        asides: root.querySelectorAll('aside').length,
+        under: (() => {
+          const c = canvas.getBoundingClientRect()
+          return [...panes.children].filter(el => el !== canvas && !el.contains(canvas) && el.getBoundingClientRect().top >= c.bottom - 1 && el.getBoundingClientRect().height > 0).map(el => el.tagName)
+        })()
+      }
+    })
+    assert.ok(frame, 'the frame is ox-three-pane')
+    assert.equal(frame.partsSlot, 'start', 'the parts list is the left pane')
+    assert.equal(frame.sideSlot, 'end', 'the side is the right pane')
+    assert.ok(frame.lefts.every(x => x !== null) && frame.lefts[0] < frame.lefts[1] && frame.lefts[1] < frame.lefts[2], `parts · canvas · side, left to right: ${frame.lefts}`)
+    assert.equal(frame.asides, 1, 'one side')
+    assert.deepEqual(frame.under, [], 'nothing under the canvas')
+  })
+
+  test('the editor answers the width it is given, not the window\'s: it is a size container', async () => {
+    assert.equal(await read(() => getComputedStyle(screenCheck.editor()).containerType), 'inline-size')
+  })
+
+  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', 'capability', 'motion', 'verdict', 'view', 'history'].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')
+  })
+
+  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', 'capability', 'motion', 'verdict', 'view', 'history']
+    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, 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[3].verdict, 'the verdict panel holds the verdict slot whichever tab is on')
+    }
+    await pressTab(TAB('properties'))
+  })
+
+  test('the verdict tab carries the count the page measured', async () => {
+    await read(() => (screenCheck.editor().instances = 42))
+    await until('the count on the tab', () => screenCheck.editor().shadowRoot.querySelector(`button[tab][aria-label="figure.label.tab-short-verdict"] span[badge]`)?.textContent.trim() === '42')
+  })
+
+  test('nothing chosen: the properties panel opens on the figure\'s own settings, with no part head', async () => {
+    const panel = await read(() => {
+      const p = screenCheck.shownPanel()
+      return { figure: !!p.querySelector('slot[name=figure]'), subject: !!p.querySelector('div[subject]') }
+    })
+    assert.deepEqual(panel, { figure: true, subject: false })
+  })
+
+  test('the bar: undo and redo with their keys, the status, save, and the left pane folded to give the canvas its width', async () => {
+    assert.equal(await read(() => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').pane === screenCheck.editor().shadowRoot.querySelector('ox-three-pane')), true, 'the bar folds the editor\'s own frame')
+    const titles = await read(() => ['undo', 'redo'].map(a => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').shadowRoot.querySelector(`button[data-action=${a}]`).title))
+    assert.ok(titles[0].endsWith('(Ctrl+Z)') && titles[1].endsWith('(Ctrl+Y)'), `the keys in the titles: ${titles}`)
+    const status = () => read(() => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar [role=status]')?.textContent.trim())
+    assert.equal(await status(), 'figure.text.saved')
+
+    await pressRow('box')
+    const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'box.size.y'))
+    await height.click({ clickCount: 3 })
+    await page().keyboard.type('600')
+    await page().keyboard.press('Enter')
+    await until('the height is 600', () => probe.value('box.size.y') === 600)
+    await until('said unsaved', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar [role=status]')?.textContent.trim() === 'figure.text.unsaved-changes')
+
+    await pressBar('undo')
+    await until('undone', () => probe.value('box.size.y') === 400)
+    await pressBar('redo')
+    await until('redone', () => probe.value('box.size.y') === 600)
+    await press('save', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[save]'))
+    await until('said saved', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar [role=status]')?.textContent.trim() === 'figure.text.saved')
+
+    const width = () => read(() => Math.round(screenCheck.deep('figure-canvas')[0].getBoundingClientRect().width))
+    const was = await width()
+    await pressBar('fold-start')
+    await until('folded', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === true)
+    await until('the canvas wider', was => Math.round(screenCheck.deep('figure-canvas')[0].getBoundingClientRect().width) > was + 50, was)
+    await pressBar('fold-start')
+    await until('unfolded', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === false)
+  })
+
+  test('fit puts the whole figure back in view after the camera was moved', async () => {
+    const camera = () => read(() => screenCheck.deep('figure-canvas')[0].scene.root._threeCapability.cameraManager.activeCamera.position.toArray().map(v => Math.round(v)))
+    /* Where fit puts the camera for the figure as it stands, once it rests there. */
+    const fitted = async () => {
+      await pressBar('fit')
+      let last = await camera()
+      for (let i = 0; i < 100; i++) {
+        await page().waitForFunction(() => new Promise(done => requestAnimationFrame(() => requestAnimationFrame(() => done(true)))))
+        const now = await camera()
+        if (now.every((v, k) => v === last[k])) return now
+        last = now
+      }
+      assert.fail('the camera never came to rest')
+    }
+    const fit = await fitted()
+    const at = await read(() => {
+      const r = screenCheck.deep('figure-canvas')[0].getBoundingClientRect()
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+    })
+    await page().mouse.move(at.x, at.y)
+    for (let i = 0; i < 5; i++) await page().mouse.wheel({ deltaY: -400 })
+    await until('the camera moved', fit => {
+      const p = screenCheck.deep('figure-canvas')[0].scene.root._threeCapability.cameraManager.activeCamera.position.toArray().map(v => Math.round(v))
+      return p.some((v, i) => Math.abs(v - fit[i]) > 50)
+    }, fit)
+    const again = await fitted()
+    assert.ok(again.every((v, i) => Math.abs(v - fit[i]) <= 5), `back where fit puts it: ${again} against ${fit}`)
+  })
+})
+
+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 shape and material, 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 = () =>
+      read(() => {
+        const panel = screenCheck.shownPanel()
+        const links = panel.querySelector('figure-links')
+        return {
+          subject: !!panel.querySelector('div[subject]'),
+          links: links ? [...links.shadowRoot.querySelectorAll('section > h3')].map(h => screenCheck.ownText(h)) : [],
+          material: !!panel.querySelector('figure-material-panel'),
+          capability: !!panel.querySelector('figure-capability-panel'),
+          controls: screenCheck.deep('input[type=range]', panel.querySelector('figure-controls')?.shadowRoot ?? document.createElement('div')).length
+        }
+      })
+    await pressTab(TAB('properties'))
+    let now = await holds()
+    assert.ok(now.subject, 'the part\'s head')
+    assert.ok(now.links.includes('figure.label.resize-intent') && now.links.includes('figure.label.placement'), `the shape's links: ${now.links}`)
+    assert.ok(now.material, 'its material')
+    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')
+    assert.deepEqual(now.links, ['figure.label.motion'])
+    assert.ok(now.controls > 0, 'the controls that pose it')
+  })
+
+  test('choosing a part from the verdict, view or history tab opens its properties; from a part\'s own tab, that tab stays', async () => {
+    for (const tab of ['verdict', 'view', 'history']) {
+      await pressTab(TAB(tab))
+      await pressRow((await selected()) === 'forearm' ? 'elbow' : 'forearm')
+      await until(`from ${tab}, the properties`, () => screenCheck.editor().shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === 'figure.label.tab-short-properties')
+    }
+    await pressTab(TAB('motion'))
+    const next = (await selected()) === 'forearm' ? 'elbow' : 'forearm'
+    await pressRow(next)
+    await until(`${next} chosen`, next => screenCheck.editor().selected === next, next)
+    assert.equal(await tabOn(), TAB('motion'), 'motion stays, now of the new part')
+  })
+
+  test('the list\'s root shows the model\'s settings on the properties tab, and changes nothing', async () => {
+    await pressTab(TAB('motion'))
+    const before = { revision: await revision(), source: await source() }
+    await press('the model root', () => screenCheck.deep('button[model-root]')[0])
+    await until('nothing chosen', () => screenCheck.editor().selected === '')
+    assert.equal(await tabOn(), TAB('properties'))
+    assert.deepEqual({ revision: await revision(), source: await source() }, before, 'no step, no change')
+  })
+
+  test('the parts list\'s cost line opens the verdict tab', async () => {
+    await pressTab(TAB('properties'))
+    await until('the cost line', () => !!probe.budgetLine())
+    await press('the cost line', () => screenCheck.deep('button[budget]')[0])
+    await until('the verdict tab on', () => screenCheck.editor().shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === 'figure.label.tab-short-verdict')
+  })
+})
+
+describe('the cost line over a figure past a limit', () => {
+  test('graded D, it says which limit it is past', async () => {
+    await mount('glass')
+    await until('the cost line', () => !!probe.budgetLine())
+    const line = await read(() => probe.budgetLine())
+    assert.equal(line.grade, 'D')
+    assert.ok(line.text.includes('figure.text.parts-budget-over'), line.text)
+    await mount('two')
+    await until('the cost line', () => !!probe.budgetLine())
+    assert.ok(!(await read(() => probe.budgetLine())).text.includes('figure.text.parts-budget-over'), 'within its limits, nothing past')
+  })
+})
+
+describe('the tools are words, in two rows: what moves the part, and what makes a copy', () => {
+  before(() => mount('ceiling'))
+
+  test('a part hung from the ceiling: centre, align to the ceiling and snap in one row; the mirrored copies in the other; no icon alone', async () => {
+    await pressRow('box')
+    await until('box chosen', () => screenCheck.editor().selected === 'box')
+    const rows = await read(() => {
+      const panel = screenCheck.shownPanel()
+      return [...panel.querySelectorAll('div[vector-row]')]
+        .filter(row => row.querySelector('div[tools]'))
+        .map(row => ({
+          label: row.querySelector('label').textContent.trim(),
+          buttons: [...row.querySelectorAll('div[tools] button')].map(b => ({ text: b.textContent.trim(), icon: !!b.querySelector('md-icon') }))
+        }))
+    })
+    assert.deepEqual(rows.map(r => r.label), ['figure.label.tools', 'figure.label.mirror-copy'])
+    assert.deepEqual(rows[0].buttons.map(b => b.text), ['figure.button.center-x', 'figure.button.center-z', 'figure.button.align-to-ceiling', 'figure.button.snap'])
+    assert.deepEqual(rows[1].buttons.map(b => b.text), ['figure.button.mirror-x', 'figure.button.mirror-z'])
+    assert.ok(rows.flatMap(r => r.buttons).every(b => !b.icon), 'words, not icons')
+  })
+})
+
+describe('a new figure: what to start with, and nothing added by itself', () => {
+  before(() => mount('empty'))
+
+  test('the stage is bare while there is nothing: no line of its own over it', async () => {
+    const stage = await read(() => {
+      const root = screenCheck.deep('figure-canvas')[0].shadowRoot
+      return { children: [...root.children].filter(e => e.tagName !== 'STYLE').map(e => e.outerHTML.replace(/<!---->/g, '')), text: root.textContent.trim() }
+    })
+    assert.deepEqual(stage, { children: ['<div stage=""></div>'], text: '' })
+  })
+
+  test('the figure\'s own settings wait, folded; the detail level waits for the first part', async () => {
+    const folded = await read(() => {
+      const details = [...screenCheck.shownPanel().querySelectorAll('details')].find(d => d.querySelector('summary')?.textContent.trim() === 'figure.label.figure-info-later')
+      return details ? { open: details.open, figure: !!details.querySelector('slot[name=figure]') } : null
+    })
+    assert.deepEqual(folded, { open: false, figure: true })
+    assert.equal(await read(() => screenCheck.deep('div[level]').length), 0, 'no detail level before a part')
+  })
+
+  test('an AI draft only where the page offers it, and it asks the page', async () => {
+    assert.equal(await read(() => screenCheck.deep('button[start-ai]').length), 0, 'not offered by default')
+    await read(() => {
+      window.__asked = 0
+      document.addEventListener('ask-ai-draft', () => window.__asked++)
+      screenCheck.editor().aiDraft = true
+    })
+    await until('offered', () => screenCheck.deep('button[start-ai]').length === 1)
+    await press('the AI draft', () => screenCheck.deep('button[start-ai]')[0])
+    await until('asked', () => window.__asked === 1)
+  })
+
+  test('the placement is chosen on the start card as the figure\'s own setting: one step, no part made', async () => {
+    const before = await revision()
+    await press('ceiling', () => screenCheck.deep('button[start-button][role=radio]').find(b => b.textContent.trim() === 'figure.label.resize-place-ceiling'))
+    await until('placed', () => JSON.parse(screenCheck.editor().session.source()).placement === 'ceiling')
+    assert.equal(await revision(), before + 1, 'one step')
+    assert.equal(await read(() => screenCheck.editor().session.read().geometry.length), 0, 'no part')
+    assert.equal(await read(() => screenCheck.deep('button[start-button][aria-checked=true]')[0]?.textContent.trim()), 'figure.label.resize-place-ceiling')
+  })
+
+  test('a shape, on the author\'s click: one step, one part, and the card goes; the detail level comes with it', async () => {
+    const shapes = await read(() => screenCheck.deep('button[start-shape]').map(b => b.getAttribute('start-shape')))
+    assert.deepEqual(shapes, ['box', 'cylinder', 'plate'])
+    const before = await revision()
+    await press('a box', () => screenCheck.deep('button[start-shape=box]')[0])
+    await until('one part', () => screenCheck.editor().session.read().geometry.length === 1)
+    assert.equal(await revision(), before + 1, 'one step')
+    await until('the card goes', () => screenCheck.deep('div[start]').length === 0)
+    await until('the detail level', () => screenCheck.deep('div[level]').length === 1)
+    await until('the box stands on the board', () => !!screenCheck.deep('figure-canvas')[0].scene?.root?._threeCapability)
+  })
+})
+
+describe('narrow, the parts list folds for the canvas, said once in this browser, and stays open once the author opens it', () => {
+  /* The editor given a width, as a rail or a narrower window gives it. */
+  const width = px => read(px => (screenCheck.editor().style.flex = px ? `0 0 ${px}px` : ''), px)
+  const folded = () => read(() => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart)
+  const said = () => read(() => screenCheck.told().filter(n => n.message === 'figure.text.parts-panel-folded-narrow').length)
+  const settle = () => page().waitForFunction(() => new Promise(done => requestAnimationFrame(() => requestAnimationFrame(() => done(true)))))
+  before(async () => {
+    await read(() => {
+      localStorage.removeItem('figure-fold-said')
+      screenCheck.forgetTold()
+    })
+    await mount('box')
+  })
+  after(() => width(null))
+
+  test('at 1101 px it stands open; at 1099 it folds and says so once; the browser keeps that it was said', async () => {
+    await width(1101)
+    await settle()
+    assert.equal(await folded(), false)
+    await width(1099)
+    await until('folded', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === true)
+    assert.equal(await said(), 1)
+    assert.equal(await read(() => localStorage.getItem('figure-fold-said')), '1')
+  })
+
+  test('wide again, the fold made for the width is opened again', async () => {
+    await width(1400)
+    await until('open', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === false)
+  })
+
+  test('opened by the author while narrow, it stays open as the editor narrows further', async () => {
+    await width(1099)
+    await until('folded', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === true)
+    await pressBar('fold-start')
+    await until('opened', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === false)
+    await width(1000)
+    await settle()
+    await settle()
+    assert.equal(await folded(), false, 'kept open')
+  })
+
+  test('folded again in this browser, even in another editor, it is not said again', async () => {
+    await width(null)
+    await mount('box')
+    await width(1099)
+    await until('folded', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === true)
+    assert.equal(await said(), 1, 'said once')
+  })
+
+  test('a browser that keeps nothing says it each time, as before', async () => {
+    await width(null)
+    await read(() => {
+      window.__getItem = Storage.prototype.getItem
+      Storage.prototype.getItem = () => {
+        throw Error('storage refused')
+      }
+    })
+    try {
+      await mount('box')
+      const before = await said()
+      await width(1099)
+      await until('folded', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === true)
+      assert.equal(await said(), before + 1, 'said')
+    } finally {
+      await read(() => (Storage.prototype.getItem = window.__getItem))
+    }
+  })
+})
+
+describe('the view tab: the workbench\'s settings, in the board\'s own names, kept in this browser and never in the figure', () => {
+  /* The board's state as the scene holds it, and its renderer's sampling. */
+  const board = () =>
+    read(() => {
+      const root = screenCheck.deep('figure-canvas')[0].scene.root
+      return { sky: root.state.sky, skyColor: root.state.skyColor, grid: root.state.grid, pixelRatio: root._threeCapability.rendererManager.renderer.getPixelRatio() }
+    })
+  before(async () => {
+    await read(() => localStorage.removeItem('figure-view'))
+    await mount('box')
+  })
+  after(() => read(() => localStorage.removeItem('figure-view')))
+
+  test('the canvas stands on the workbench grey, before the scene and in it; the board is sampled twice a pixel', async () => {
+    assert.equal(await read(() => getComputedStyle(screenCheck.deep('figure-canvas')[0]).backgroundColor), 'rgb(124, 124, 124)')
+    const now = await board()
+    assert.deepEqual({ sky: now.sky, skyColor: now.skyColor }, { sky: 'color', skyColor: '#7c7c7c' }, 'the 3D sky is the view\'s colour')
+    assert.equal(now.pixelRatio, await read(() => Math.min(3, (window.devicePixelRatio || 1) * 2)))
+  })
+
+  test('the coordinate ground switched off in the tab: the board follows, the browser keeps it, the figure is untouched', async () => {
+    await pressTab(TAB('view'))
+    assert.ok((await read(() => screenCheck.deep('figure-settings')[0].shadowRoot.textContent)).includes('figure.text.view-settings-are-not-saved'), 'it says these are not saved')
+    const before = { revision: await revision(), source: await source(), grid: (await board()).grid }
+    assert.equal(before.grid, true)
+    await press('the coordinate ground', () => screenCheck.setting('figure.label.coordinate-ground').querySelector('input[type=checkbox]'))
+    await until('the board without its grid', () => screenCheck.deep('figure-canvas')[0].scene.root.state.grid === false)
+    assert.equal(await read(() => JSON.parse(localStorage.getItem('figure-view')).grid), false, 'kept in this browser')
+    assert.deepEqual({ revision: await revision(), source: await source() }, { revision: before.revision, source: before.source }, 'the figure is untouched')
+  })
+
+  test('the sky colour chosen in the tab is the board\'s sky', async () => {
+    const colour = await element('the sky colour', () => screenCheck.setting('figure.label.sky-color').querySelector('input[type=color]'))
+    /* A colour picker is the browser's own window; its value is set as the picker sets it, and changed. */
+    await colour.evaluate(input => {
+      input.value = '#336699'
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+    await until('the sky follows', () => screenCheck.deep('figure-canvas')[0].scene.root.state.skyColor === '#336699')
+    assert.equal(await read(() => JSON.parse(localStorage.getItem('figure-view')).skyColor), '#336699')
+  })
+})
+
+describe('the preview: registered as a board registers it, posed and played, the part chosen kept', () => {
+  const mode = which => press(`the ${which} mode`, which => screenCheck.deep('button[mode]').find(b => b.title === `figure.text.mode-${which}-explained`), which)
+  const preview = () => `screenCheck.deep('figure-preview')[0]`
+  before(() => mount('arm-clip'))
+
+  test('going to the preview and back keeps the part chosen in the edit canvas, and the preview\'s size help starts on it', async () => {
+    await pressRow('forearm')
+    await until('forearm chosen', () => screenCheck.editor().selected === 'forearm')
+    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')
+    await mode('edit')
+    await until('the edit canvas in front', () => screenCheck.deep('figure-preview')[0].hidden)
+    assert.equal(await selected(), 'forearm', 'still chosen')
+  })
+
+  test('each angle is posed with a dial; a pose tried is kept as the default in one step', async () => {
+    await mode('preview')
+    await until('the preview stands', () => !!screenCheck.deep('figure-preview')[0]?.shadowRoot?.querySelector('div[clips] label'))
+    const dials = await read(() => {
+      const labels = [...screenCheck.deep('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] label')]
+      return labels.map(l => ({ name: screenCheck.ownText(l.querySelector('span')), unit: l.querySelector('span[drive]')?.textContent.trim(), dial: !!l.querySelector('svg[dial]') }))
+    })
+    const turns = dials.filter(d => d.unit === 'deg')
+    assert.ok(turns.length >= 6, `the arm's six turns: ${JSON.stringify(dials)}`)
+    assert.ok(turns.every(d => d.dial), 'each with a dial')
+    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) }
+    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')
+    const tried = Number(await slider.evaluate(i => i.value))
+    assert.notEqual(tried, before.pose, 'a pose tried')
+    assert.equal(await revision(), before.revision, 'trying is not an edit')
+    await press('keep this pose', () => screenCheck.deep('figure-preview')[0].shadowRoot.querySelector('button[pose]'))
+    await until('one step', was => screenCheck.editor().session.read().revision === was + 1, before.revision)
+    assert.equal(await read(() => JSON.parse(screenCheck.editor().session.source()).stateDefaults['j2-shoulder']), tried, 'the pose kept is the one tried')
+  })
+
+  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() }
+      })
+    assert.deepEqual(await clip(), { value: 0, shown: '0.00' }, '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')
+    const now = await clip()
+    assert.equal(now.shown, now.value.toFixed(2))
+    const given = await read(() => screenCheck.deep('figure-preview')[0].scene.root.components.map(c => c.state.clips?.cycle))
+    assert.equal(given.length, 8, 'eight instances')
+    assert.ok(given.every(v => v === now.value), `each given the speed shown: ${given}`)
+  })
+
+  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 })
+    try {
+      /* Under 1100 the parts list folds for the canvas; opened again by the author, both sides stand. */
+      await until('folded for the width', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === true)
+      await pressBar('fold-start')
+      await until('both sides open', () => screenCheck.editor().shadowRoot.querySelector('ox-three-pane').foldStart === false)
+      await until('the preview between them', () => screenCheck.deep('figure-preview')[0].getBoundingClientRect().width < 600)
+      for (const width of [1024, 960]) {
+        await page().setViewport({ width, height: 768 })
+        await until(`the preview at ${width}`, width => screenCheck.deep('figure-preview')[0].getBoundingClientRect().right < width - 300, width)
+        await boardsUp()
+        const boxes = await read(() => {
+          const root = screenCheck.deep('figure-preview')[0].shadowRoot
+          const rect = el => {
+            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 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`)
+        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 {
+      await page().setViewport(viewport)
+    }
+  })
+
+  test('the figure is registered under its own preview type while the preview stands, and goes with the editor', async () => {
+    await mode('preview')
+    await until('the preview stands', () => !!screenCheck.deep('figure-preview')[0]?.shadowRoot?.querySelector('div[clips]'))
+    const type = await read(() => screenCheck.previewTypeOf(screenCheck.editor().session.read().context))
+    assert.equal(await read(type => screenCheck.registered(type), type), true, `registered as ${type}`)
+    assert.equal(await read(() => screenCheck.registered('figure-preview-new') && screenCheck.editor().session.read().context !== ''), false, 'not under another figure\'s type')
+    await boardsUp()
+    await read(() => {
+      window.__editor = screenCheck.editor()
+      window.__parent = window.__editor.parentNode
+      window.__editor.remove()
+    })
+    assert.equal(await read(type => screenCheck.registered(type), type), false, 'taken down with the editor')
+    await read(() => window.__parent.appendChild(window.__editor))
+    await boardsUp()
+  })
+
+  test('a canvas taken off the page says nothing of the choice: the editor moved keeps its part', async () => {
+    await boardsUp()
+    await read(() => {
+      const editor = screenCheck.editor()
+      const parent = editor.parentNode
+      editor.remove()
+      parent.appendChild(editor)
+    })
+    await read(() => screenCheck.editor().updateComplete)
+    assert.equal(await selected(), 'forearm')
+    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')
+    await press('the preview mode', () => screenCheck.deep('button[mode]').find(b => b.title === 'figure.text.mode-preview-explained'))
+    await until('the legend', () => !!screenCheck.deep('figure-preview')[0]?.shadowRoot?.querySelector('div[legend]'))
+    const clamped = await read(() => [...screenCheck.deep('figure-preview')[0].shadowRoot.querySelectorAll('div[legend] small[clamp]')].map(s => s.textContent.trim()))
+    assert.ok(clamped.length > 0 && clamped.every(c => c.startsWith('figure.text.preview-clamped')), `said: ${clamped}`)
+    await boardsUp()
+  })
+})
+
+describe('a part\'s size row: a rule\'s numbers only where a rule sets every side', () => {
+  /* The size row of the part chosen, and how many of its cells a rule holds. */
+  const sizeRow = () =>
+    read(() => {
+      const row = [...screenCheck.shownPanel().querySelectorAll('div[vector-row]')].find(r => r.querySelector('label')?.textContent.trim().startsWith('figure.label.group-size'))
+      return row ? { held: row.querySelectorAll('div[cell][held]').length } : null
+    })
+
+  test('a palette drum\'s own sizes are its shape\'s fields: no size row set by a rule', async () => {
+    await mount('drum')
+    await pressRow('drum')
+    await until('drum chosen', () => screenCheck.editor().selected === 'drum')
+    assert.equal(await sizeRow(), null)
+  })
+
+  test('a box made to follow the figure\'s size on every side shows the size the rule gives it', async () => {
+    await mount('box')
+    await pressRow('box')
+    await until('box chosen', () => screenCheck.editor().selected === 'box')
+    await press('follow the figure\'s size', () => screenCheck.deep('button[follow-size]')[0])
+    await until('following', () => ['x', 'y', 'z'].every(axis => !screenCheck.editor().session.read().fields.some(f => f.id === `box.size.${axis}`)))
+    assert.deepEqual(await sizeRow(), { held: 3 }, 'three sides, each held by the rule')
+  })
+})
+
+describe('the side panel is found as it was left, per part', () => {
+  const panelTop = () => read(() => screenCheck.shownPanel().scrollTop)
+  /* The open state of the folds in the properties panel, the fastening form's included. */
+  const folds = () =>
+    read(() => {
+      const panel = screenCheck.shownPanel()
+      return [...panel.querySelectorAll('details'), ...[...panel.querySelectorAll('figure-links')].flatMap(l => [...l.shadowRoot.querySelectorAll('details')])].map(d => d.open)
+    })
+  /* Scrolled with the wheel over the panel, as a hand scrolls it. */
+  async function scrollPanel(by) {
+    const at = await read(() => {
+      const r = screenCheck.shownPanel().getBoundingClientRect()
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+    })
+    await page().mouse.move(at.x, at.y)
+    await page().mouse.wheel({ deltaY: by })
+    await until('scrolled', () => screenCheck.shownPanel().scrollTop > 0)
+  }
+  before(() => mount('arm'))
+
+  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')
+    await press('a fold', () => {
+      const panel = screenCheck.shownPanel()
+      const closed = [...panel.querySelectorAll('figure-links')].flatMap(l => [...l.shadowRoot.querySelectorAll('details')]).find(d => !d.open)
+      return closed?.querySelector('summary')
+    })
+    const opened = await folds()
+    await scrollPanel(400)
+    const top = await panelTop()
+    const subject = await read(() => {
+      const panel = screenCheck.shownPanel()
+      return Math.round(panel.querySelector('div[subject]').getBoundingClientRect().top - panel.getBoundingClientRect().top)
+    })
+    assert.equal(subject, 0, 'the part\'s head stays at the top of the panel, whatever the scroll')
+
+    await pressRow('forearm')
+    await until('forearm chosen, at its top', () => screenCheck.editor().selected === 'forearm' && screenCheck.shownPanel().scrollTop === 0)
+    await pressRow('upper-arm')
+    await until('upper-arm as it was left', top => screenCheck.editor().selected === 'upper-arm' && Math.abs(screenCheck.shownPanel().scrollTop - top) <= 2, top)
+    assert.deepEqual(await folds(), opened, 'its folds as they were')
+  })
+})
+
+describe('the fastening form says whether it changes the fastening the part has or fastens it anew', () => {
+  const preview = () => read(() => screenCheck.deep('[preview-words]').length)
+  const fastenButton = () => read(() => screenCheck.deep('button[act]').filter(b => b.textContent.trim().endsWith('figure.button.fasten')).length)
+  const target = () => element('the target select', () => screenCheck.deep('select').find(s => s.previousElementSibling?.textContent?.trim() === 'figure.label.target-part'))
+
+  test('a part fastened to nothing: 「새로 붙이기」 said, the sentence and what 붙이기 would do shown once a target is chosen, and nothing done until 붙이기', async () => {
+    await mount('door')
+    await pressRow('leaf')
+    await until('leaf chosen', () => screenCheck.editor().selected === 'leaf')
+    await press('start fastening', () => screenCheck.deep('button').find(b => b.textContent.trim().endsWith('figure.button.fasten-start')))
+    await until('the form', () => screenCheck.deep('p[fasten-mode]').length === 1)
+    const before = await revision()
+    await (await target()).select('frame')
+    await until('the sentence', () => screenCheck.deep('p[fasten-sentence]').length === 1)
+    await until('what 붙이기 would do', () => screenCheck.deep('[preview-words]').length === 1)
+    assert.equal(await fastenButton(), 1, '붙이기 for a new one')
+    assert.equal(await revision(), before, 'nothing done until it is pressed')
+  })
+
+  test('a part already fastened: no 「새로 붙이기」, no 붙이기 -- another target is taken at once, in one step', async () => {
+    await mount('arm')
+    await pressRow('forearm')
+    await until('forearm chosen', () => screenCheck.editor().selected === 'forearm')
+    await until('the sentence', () => screenCheck.deep('p[fasten-sentence]').length === 1)
+    assert.equal(await read(() => screenCheck.deep('p[fasten-mode]').length), 0, 'the one it has is not said to be new')
+    assert.equal(await fastenButton(), 0, 'no 붙이기')
+    await until('the fastening seen before it is done: its face lit on the canvas', () => !!screenCheck.deep('figure-canvas')[0].highlight)
+    assert.equal(await preview(), 0, 'no words for a command no button sends')
+    const before = await revision()
+    await (await target()).select('upper-arm')
+    await until('one step', was => screenCheck.editor().session.read().revision === was + 1, before)
+    assert.equal(await read(() => JSON.parse(screenCheck.editor().session.source()).joints.find(j => j.body1.part === 'forearm').body0.part), 'upper-arm')
+  })
+})
+
+describe('the modeller page: the editor with the page\'s figure panel, verdict and history in its tabs', () => {
+  /* A figure saved on the server in memory, opened on the modeller page as the shell opens it. */
+  async function open(id, figure, type) {
+    await boardsUp()
+    if (figure) await read((id, text, type) => product.seed({ id, source: text, type }), id, await read(name => figureText(name), figure), type ?? `probe-${id}`)
+    await read(id => product.open(id ?? undefined), id ?? null)
+    await until('the page\'s editor stands', id => {
+      const editor = screenCheck.editor()
+      const view = editor?.session?.read()
+      if (!view || view.loading || (id && view.id !== id)) return false
+      const canvas = screenCheck.deep('figure-canvas')[0]
+      return view.geometry.length === 0 ? !!canvas : !!canvas?.scene?.root?._threeCapability
+    }, id ?? null)
+  }
+  /* Saved, so another figure opens without asking about the edits in hand. */
+  async function saved() {
+    await press('save', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[save]'))
+    await until('saved', () => !screenCheck.editor().session.read().dirty)
+  }
+  const calls = field => read(field => product.calls().filter(c => c.field === field), field)
+
+  test('one side: the page puts its panels in the editor\'s tabs and has no side of its own', async () => {
+    await open('fig-a', 'two')
+    const asides = await read(() => screenCheck.deep('aside').map(a => a.getRootNode() === screenCheck.editor().shadowRoot))
+    assert.deepEqual(asides, [true], 'the editor\'s side, and no other')
+  })
+
+  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(() => {
+      const properties = screenCheck.deep('figure-properties')[0]
+      const section = properties.shadowRoot.querySelector('section')
+      const heading = section.querySelector('h3')
+      const slot = heading.nextElementSibling
+      const label = slot?.assignedElements?.()[0]
+      const name = section.querySelector('div[field] input')
+      return {
+        heading: heading.textContent.trim(),
+        assigned: label?.matches('label[type-field]') ?? false,
+        order: label ? [heading.getBoundingClientRect().bottom <= label.getBoundingClientRect().top + 0.5, label.getBoundingClientRect().bottom <= name.getBoundingClientRect().top + 0.5] : null
+      }
+    })
+    assert.deepEqual(first, { heading: 'figure.label.group-figure', assigned: true, order: [true, true] })
+  })
+
+  test('the verdict and history tabs show the page\'s verdict and release history', async () => {
+    for (const [tab, host] of [['verdict', 'figure-verdict'], ['history', 'figure-history-panel']]) {
+      await pressTab(TAB(tab))
+      const shown = await read(() => screenCheck.shownPanel().querySelector('slot')?.assignedElements().map(e => ({ tag: e.localName, height: Math.round(e.getBoundingClientRect().height) })))
+      assert.equal(shown?.length, 1, tab)
+      assert.equal(shown[0].tag, host)
+      assert.ok(shown[0].height > 0, `${host} is shown`)
+    }
+  })
+
+  test('the verdict tab\'s count is the report\'s, measured by the verdict', async () => {
+    const expected = await read(() => screenCheck.capacityNow())
+    assert.ok(expected > 0)
+    await until('the count on the tab', expected => screenCheck.editor().shadowRoot.querySelector('button[tab][aria-label="figure.label.tab-short-verdict"] span[badge]')?.textContent.trim() === expected.toLocaleString(), expected)
+  })
+
+  test('a new type asks the verdict again', async () => {
+    await pressTab(TAB('properties'))
+    await pressRow('left')
+    await press('the model root', () => screenCheck.deep('button[model-root]')[0])
+    /* The figure as opened is judged first; what is counted after is asked by the new type. */
+    await until('judged', () => {
+      const said = screenCheck.deep('figure-verdict')[0]?.shadowRoot?.textContent ?? ''
+      return product.calls().some(c => c.field === 'inspectFigureDraft') && !said.includes('figure.text.verdict-waiting') && !said.includes('figure.text.verdict-asking')
+    })
+    const asked = (await calls('inspectFigureDraft')).length
+    const field = await element('the type field', () => screenCheck.deep('label[type-field] input')[0])
+    await field.click({ clickCount: 3 })
+    await page().keyboard.type('probe-renamed')
+    await page().keyboard.press('Tab')
+    await until('the type renamed on the server', () => product.calls().some(c => c.field === 'updateFigure' && c.variables.patch?.type === 'probe-renamed'))
+    await until('asked again', asked => product.calls().filter(c => c.field === 'inspectFigureDraft').length > asked, asked)
+  })
+
+  test('an edit is judged as it stands on screen: the source the server is sent is the one edited', async () => {
+    await pressRow('left')
+    const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'left.size.y'))
+    await height.click({ clickCount: 3 })
+    await page().keyboard.type('600')
+    await page().keyboard.press('Enter')
+    await until('the edit made', () => screenCheck.editor().session.read().fields.find(f => f.id === 'left.size.y')?.value === 600)
+    await until('the edited source judged', () => product.calls().filter(c => c.field === 'inspectFigureDraft').at(-1)?.variables.source === screenCheck.editor().session.revisionNow().text)
+  })
+
+  test('a save sends the card\'s picture with the figure', async () => {
+    /* The edit above is in hand, unsaved. */
+    assert.equal(await read(() => screenCheck.editor().session.read().dirty), true)
+    await read(() => product.forget())
+    await press('save', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[save]'))
+    await until('saved', () => product.calls().some(c => c.field === 'saveFigure'))
+    const thumbnail = await read(() => product.calls().find(c => c.field === 'saveFigure').variables.thumbnail)
+    assert.ok(thumbnail?.startsWith('data:image/webp'), `a picture: ${thumbnail?.slice(0, 30)}`)
+    await until('saved', () => !screenCheck.editor().session.read().dirty)
+  })
+
+  test('the verdict\'s 「부품에 맞추기」 declares the space from the parts, in one step', async () => {
+    await read(finding => product.answer('inspectFigureDraft', () => ({ __typename: 'FigureInspection', blocked: true, findings: [finding] })), await read(() => alone.finding('occupancy-undeclared')))
+    try {
+      await open('fig-b', 'two')
+      assert.equal(await read(() => JSON.parse(screenCheck.editor().session.source()).occupancy), undefined, 'no space declared yet')
+      await pressTab(TAB('verdict'))
+      await until('offered', () => !!screenCheck.deep('figure-verdict')[0]?.shadowRoot?.querySelector('button[fit]'))
+      const before = await revision()
+      await press('fit to the parts', () => screenCheck.deep('figure-verdict')[0].shadowRoot.querySelector('button[fit]'))
+      await until('one step', was => screenCheck.editor().session.read().revision === was + 1, before)
+      assert.ok(await read(() => !!JSON.parse(screenCheck.editor().session.source()).occupancy), 'the space is declared')
+      await saved()
+    } finally {
+      await read(() => product.answer('inspectFigureDraft'))
+    }
+  })
+
+  test('fitting a figure with no parts says so in the app\'s words and leaves the editor standing', async () => {
+    await read(finding => product.answer('inspectFigure', () => ({ __typename: 'FigureInspection', blocked: true, findings: [finding] })), await read(() => alone.finding('occupancy-undeclared')))
+    try {
+      await open('fig-empty', 'empty')
+      await pressTab(TAB('history'))
+      await until('offered', () => !!screenCheck.deep('figure-history-panel')[0]?.shadowRoot?.querySelector('button[fit-base]'))
+      await press('fit to the parts', () => screenCheck.deep('figure-history-panel')[0].shadowRoot.querySelector('button[fit-base]'))
+      await until('said', () => screenCheck.deep('p[fit-error]')[0]?.textContent.trim() === 'figure.text.fit-needs-parts')
+      assert.equal(await read(() => !!screenCheck.editor()?.isConnected), true, 'the editor stands')
+    } finally {
+      await read(() => product.answer('inspectFigure'))
+    }
+  })
+
+  test('the view set in the tab holds for the next figure opened: its board is stood up with it', async () => {
+    await pressTab(TAB('view'))
+    const colour = await element('the sky colour', () => screenCheck.setting('figure.label.sky-color').querySelector('input[type=color]'))
+    /* A colour picker is the browser's own window; its value is set as the picker sets it, and changed. */
+    await colour.evaluate(input => {
+      input.value = '#336699'
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+    await open('fig-c', 'two')
+    try {
+      assert.equal(await read(() => screenCheck.deep('figure-canvas')[0].scene.root.state.skyColor), '#336699', 'the new board\'s sky')
+    } finally {
+      await pressTab(TAB('view'))
+      await press('reset the view', () => screenCheck.deep('figure-settings')[0].shadowRoot.querySelector('button[reset]'))
+      await until('the view as it was', () => screenCheck.deep('figure-canvas')[0].scene.root.state.skyColor === '#7c7c7c')
+    }
+  })
+
+  test('another figure opened starts its panels clean: a part of the same name opens at its top', async () => {
+    await open('fig-p', 'arm-clip')
+    await pressRow('upper-arm')
+    await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
+    const at = await read(() => {
+      const r = screenCheck.shownPanel().getBoundingClientRect()
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+    })
+    await page().mouse.move(at.x, at.y)
+    await page().mouse.wheel({ deltaY: 400 })
+    await until('scrolled', () => screenCheck.shownPanel().scrollTop > 100)
+    /* Leaving the part keeps where its panel was. */
+    await press('the model root', () => screenCheck.deep('button[model-root]')[0])
+    await until('nothing chosen', () => screenCheck.editor().selected === '')
+    await open('fig-q', 'arm-clip')
+    await pressRow('upper-arm')
+    await until('upper-arm chosen', () => screenCheck.editor().selected === 'upper-arm')
+    for (let i = 0; i < 3; i++) await page().waitForFunction(() => new Promise(done => requestAnimationFrame(() => requestAnimationFrame(() => done(true)))))
+    assert.equal(await read(() => screenCheck.shownPanel().scrollTop), 0, 'not where the other figure\'s part was left')
+  })
+
+  test('a new figure\'s AI draft puts a request in the assistant\'s input, and sends nothing', async () => {
+    await read(() => assistant.forget())
+    await open(null)
+    await press('the AI draft', () => screenCheck.deep('button[start-ai]')[0])
+    await until('asked', () => assistant.said().some(s => s.call === 'ask'))
+    assert.deepEqual(await read(() => assistant.said().filter(s => s.call === 'ask')), [{ call: 'ask', draft: 'figure.text.ai-draft-request' }])
+  })
+
+  test('a new figure\'s placement is chosen in the figure panel before any part, in one step', async () => {
+    /* A new figure's own settings wait, folded: opened, the figure panel speaks of this figure. */
+    await press('the figure\'s settings', () => screenCheck.deep('summary').find(s => s.textContent.trim() === 'figure.label.figure-info-later'))
+    await until('the figure panel of the new figure', () => screenCheck.deep('figure-properties')[0]?.shadowRoot?.querySelector('div[field] input')?.value === screenCheck.editor().session.read().name)
+    const select = await element('the placement', () => screenCheck.deep('select', screenCheck.deep('figure-properties')[0].shadowRoot).find(s => s.previousElementSibling?.textContent.trim() === 'figure.label.figure-placement'))
+    assert.equal(await select.evaluate(s => s.disabled), false, 'not waiting for a part')
+    const before = await revision()
+    await select.select('ceiling')
+    await until('placed', () => JSON.parse(screenCheck.editor().session.source()).placement === 'ceiling')
+    assert.equal(await revision(), before + 1, 'one step')
+  })
+})
+
+describe('the card\'s picture: taken from a canvas of its own, through the scene\'s 3D snapshot', () => {
+  before(() => mount('box'))
+
+  test('a figure\'s picture is the card\'s size, as webp', async () => {
+    const url = await read(text => screenCheck.picture(text), await read(() => figureText('two')))
+    assert.ok(url?.startsWith('data:image/webp'), `a webp picture: ${url?.slice(0, 30)}`)
+    assert.deepEqual(await read(url => screenCheck.imageSize(url), url), [480, 360])
+  })
+
+  test('the edit canvas gives the card\'s size when asked for no other', async () => {
+    const url = await read(() => screenCheck.deep('figure-canvas')[0].snapshot())
+    assert.ok(url?.startsWith('data:image/webp'))
+    assert.deepEqual(await read(url => screenCheck.imageSize(url), url), [480, 360])
+  })
+})
+
+test('the page raised no error', () => {
+  assert.deepEqual(opened.errors, [])
+})