@things-factory/figure-ui 10.1.169 → 10.1.171

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.169",
+  "version": "10.1.171",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "npm run build:server && npm run build:client",
     "test": "FIGURE_FREEZE_COMPILED=1 node --import ./test/resolve-ts-siblings.mjs --test test/*.test.ts",
-    "test:browser": "node --test test/browser/build.check.mjs test/browser/modeller.check.mjs test/browser/modeller-revision.check.mjs test/browser/editing.check.mjs test/browser/links.check.mjs test/browser/section.check.mjs test/browser/screen.check.mjs test/browser/product-page.check.mjs test/browser/parts.check.mjs test/browser/places-mesh.check.mjs test/browser/part-ids.check.mjs test/browser/fix-alignment.check.mjs test/browser/mesh-select.check.mjs test/browser/row-preview.check.mjs test/browser/detail-tabs.check.mjs",
+    "test:browser": "node --test test/browser/build.check.mjs test/browser/modeller.check.mjs test/browser/modeller-revision.check.mjs test/browser/editing.check.mjs test/browser/links.check.mjs test/browser/section.check.mjs test/browser/screen.check.mjs test/browser/product-page.check.mjs test/browser/parts.check.mjs test/browser/places-mesh.check.mjs test/browser/part-ids.check.mjs test/browser/fix-alignment.check.mjs test/browser/mesh-select.check.mjs test/browser/row-preview.check.mjs test/browser/detail-tabs.check.mjs test/browser/props.check.mjs",
     "copy:files": "copyfiles -e \"./client/**/*.{ts,js,json}\" -u 1 \"./client/**/*\" dist-client",
     "build:client": "npm run copy:files && npx tsc --p ./client/tsconfig.json",
     "build:server": "npx tsc --p ./server/tsconfig.json",
@@ -27,8 +27,8 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.7.1",
-    "@hatiolab/things-scene": "^10.1.90",
+    "@hatiolab/figure-model": "^0.7.2",
+    "@hatiolab/things-scene": "^10.1.91",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
     "@operato/graphql": "^10.0.0",
@@ -41,11 +41,11 @@
     "@operato/slot-layout-editor": "^10.29.25",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/ai-assistant": "^10.1.169",
-    "@things-factory/figure-service": "^10.1.169",
-    "@things-factory/figure-viewer": "^10.1.169",
+    "@things-factory/ai-assistant": "^10.1.170",
+    "@things-factory/figure-service": "^10.1.171",
+    "@things-factory/figure-viewer": "^10.1.171",
     "@things-factory/setting-base": "^10.1.167",
     "three": "^0.185.1"
   },
-  "gitHead": "9d71d02b443f3e0080b25de1768b982c51a64111"
+  "gitHead": "e88536db0bc3cbb759fe58f9efeef66a67fef2c3"
 }

package/test/browser/editing-page.js

@@ -4,6 +4,7 @@
  * what a person sees of them: a part as the canvas draws it now, the bar's gizmo tools, the app's notices and prompts.
  * Only reading: every change the check makes goes through the mouse and the keyboard.
  */
+import './more-open.js'
 import './modeller-page.js'
 import { i18next } from '@operato/i18n'
 import { Raycaster, Vector2 } from 'three'
@@ -87,8 +88,9 @@ window.editing = {
     return { at: [left, top, zPos].map(Math.round), size: [width, depth, height].map(Math.round), turn: [rotationX, rotation, rotationY].map(v => Math.round((v ?? 0) * 1000) / 1000), glow: glow ? glow.intensity : 0 }
   },
   /** The bar's move, turn and resize tools: pressed, offered, and what their tooltip says. */
+  /** The bar's move, turn and resize tools: the gizmo's group, not the bar's other icon buttons (the view, the history). */
   tools() {
-    return deep('button[tool]').map(b => ({ label: b.getAttribute('aria-label'), title: b.title, disabled: b.disabled, pressed: b.getAttribute('aria-pressed') === 'true', ...centreOf(b) }))
+    return deep('.gizmo-tools button[tool]').map(b => ({ label: b.getAttribute('aria-label'), title: b.title, disabled: b.disabled, pressed: b.getAttribute('aria-pressed') === 'true', ...centreOf(b) }))
   },
   /** The labels of the number fields on the properties tab. */
   propertyInputs() {

package/test/browser/editing.check.mjs

@@ -293,7 +293,8 @@ describe('the material: colours by purpose, one step each, a glow drawn while dr
   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
+      /* Segments are in the material's rarer half, in 「더 보기」. */
+      const panel = document.querySelector('figure-editor').renderRoot.querySelector('figure-material-panel[show="more"]').shadowRoot
       const free = panel.querySelector('details[free]')
       return {
         common: [...panel.querySelectorAll('div[segments] > button[seg]')].map(b => !!b.querySelector('svg polygon')),

package/test/browser/links-page.js

@@ -3,6 +3,7 @@
  * 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 './more-open.js'
 import './modeller-page.js'
 
 function deep(selector, root = document) {

package/test/browser/links.check.mjs

@@ -90,6 +90,17 @@ async function pick(part) {
   await until(id => probe.state().selected === id, [part], `${part} selected`)
 }
 const tab = name => read(l => probe.tab(l), `figure.label.tab-short-${name}`).then(point => click(point, `the ${name} tab`))
+/** What the figure does is a folded group of the properties (chief architect 2026-10-16): its fold opened, as a person opens it. */
+async function openCapability() {
+  const summary = await handle('section[capability] > details > summary')
+  if (!(await summary.evaluate(s => s.parentElement.open))) await summary.click()
+}
+/** A fastening the part has is said in one line; 「바꾸기」 opens its drawing and details. */
+async function changeFastening() {
+  await until(() => look.all('button[change-fastening]').length === 1, [], 'the fastening said in one line')
+  await (await handle('button[change-fastening]')).click()
+  await until(() => look.all('button[change-fastening]').length === 0, [], 'the fastening opened')
+}
 /** An element handle found through every shadow root. */
 const handle = (selector, test) =>
   page().evaluateHandle(
@@ -202,7 +213,9 @@ describe('a part made to follow the figure size, and let go of it', () => {
     await click(await at('button[follow-size]'), 'follow-size')
     await oneStep(start)
     await until(() => !look.at('button[follow-size]'), [], 'the button gone once every side follows')
-    assert.equal((await all('p[hint]', 'figure.text.resize-all-following')).length, 1, 'said that every side follows')
+    /* Each side's row says it follows; no sentence under them says it again (user 2026-10-16). */
+    assert.equal((await all('p[hint]', 'figure.text.resize-all-following')).length, 0, 'no sentence repeats the rows')
+    assert.equal((await all('div[resize-now] span', 'figure.label.resize-following')).length, 3, 'every side said to follow, once')
     const told = (await heard('notify')).filter(n => n?.level === 'info' && String(n.message).includes('figure.text.size-declared-to-follow'))
     assert.deepEqual(told, [], 'the figure had its size: no line says it was declared')
   })
@@ -291,7 +304,7 @@ describe('holding places on a part', () => {
   test('a place needs kinds it takes; a figure that holds nothing says so, and declaring it holds things is one step', async () => {
     await mount('box')
     await pick('box')
-    await tab('capability')
+    await openCapability()
     assert.equal((await at('button[act]', 'figure.button.add-place'))?.disabled, true, 'no kinds: no place')
     await type(await handle('input[placeholder="BOX, TOTE"]'), 'BOX')
     assert.equal((await at('button[act]', 'figure.button.add-place'))?.disabled, false, 'a kind: a place may be made')
@@ -327,6 +340,7 @@ describe('the fastening form on the robot arm', () => {
   test('the upper arm opens on what it is fastened to; a part hanging from it is listed, not choosable, with the reason', async () => {
     await mount('arm')
     await pick('upper-arm')
+    await changeFastening()
     const own = (await source()).joints.find(j => j.body1.part === 'upper-arm').body0.part
     const target = await read(() => look.select('figure.label.target-part'))
     assert.equal(target.value, own, 'its own fastening')
@@ -497,12 +511,13 @@ describe('a bench: what each part is fastened to, what detaching would do, a row
   test('a fastened part picked: the face it is fastened to is lit, and taking it off is said to keep what hangs from it', async () => {
     await pick('top')
     await until(() => look.drawn().includes('__target-face'), [], 'the leg\'s top lit')
-    await until(() => look.all('div[fastened] [detach-words]', 'figure.text.detach-keeps-children').length === 1, [], 'said beside the detach button')
+    await until(() => look.all('section[fastening] [detach-words]', 'figure.text.detach-keeps-children').length === 1, [], 'said under the fastening')
   })
 
-  test('a part that would stay where it stands: nothing is said beside the detach button', async () => {
+  test('a part that would stay where it stands: nothing is said under its fastening', async () => {
     await pick('lamp')
-    await until(() => look.all('section[fastening] button[act]', 'figure.button.detach').length === 1, [], 'the lamp\'s detach button')
+    /* Taking it off is the place group's 「⋯」 (chief architect 2026-10-16). */
+    await until(() => look.all('section[fastening] button[group-menu]').length === 1, [], 'the lamp\'s place menu')
     /* What detaching would do is worked out once the figure rests (150 ms after the pick). */
     await sleep(500)
     assert.deepEqual(await all('[detach-words]'), [])

package/test/browser/modeller.check.mjs

@@ -343,6 +343,8 @@ describe('the fastening form belongs to the part it is for', () => {
 
   test('a choice made for one part is not carried to the next part picked; the next opens on its own fastening (셔터 커튼 2026-09-25, walk 1 2026-09-26)', async () => {
     await click(await read(() => probe.row('forearm')))
+    /* A fastening the part has is said in one line; 「바꾸기」 opens it (chief architect 2026-10-16). */
+    await click(await read(() => probe.button('change-fastening')))
     assert.equal(await (await select('figure.label.target-part')).evaluate(s => s?.value), 'elbow', 'the forearm opens on what it is fastened to')
     /* Placed off centre on the elbow's face, as a hand does: the face drawing focused, the arrows. */
     const face = await read(() => {
@@ -363,6 +365,9 @@ describe('the fastening form belongs to the part it is for', () => {
     assert.ok(chosen.mm > 0)
 
     await click(await read(() => probe.row('elbow')))
+    /* Another part opens on the line again, the form closed: 「바꾸기」 opens the elbow's own. */
+    assert.ok(await read(() => probe.button('change-fastening')), 'the elbow\'s fastening said in one line')
+    await click(await read(() => probe.button('change-fastening')))
     /* The elbow opens on its own fastening (walk 1, 2026-09-26), not on the forearm's choices. */
     const own = await read(() => {
       const joint = JSON.parse(document.querySelector('figure-editor').session.source()).joints.find(j => j.body1.part === 'elbow')
@@ -712,7 +717,9 @@ describe('a part follows the figure size in one step (follow-size, 2026-09-26)',
     assert.equal(after.revision, start.revision + 1, 'one step')
     assert.deepEqual(await read(() => probe.fields('size.')), { 'size.x': 400, 'size.y': 400, 'size.z': 400 }, 'the size is the box as it stands')
     const notice = await read(() => (window.__told ?? []).filter(n => n.level === 'info').at(-1)?.message ?? null)
-    assert.ok(notice?.includes('figure.text.size-declared-to-follow'), `a line says so: ${notice}`)
+    /* The box had no space declared either: the same step declared it, and the one line says both (ruling 2026-10-16, Q1 A). */
+    assert.ok(notice?.includes('figure.text.size-and-space-declared-to-follow'), `a line says so: ${notice}`)
+    assert.equal(await read(() => !!document.querySelector('figure-editor').session.revisionNow().asset.occupancy), true, 'the space declared by the same step')
     const grown = await read(() => {
       const editor = document.querySelector('figure-editor')
       editor.session.apply([{ kind: 'set-design', input: 'size.x', unit: 'mm', value: 800 }])
@@ -866,6 +873,7 @@ describe('a row that carries a part (ADR-0093, 2026-09-26)', () => {
     assert.equal((await state()).selected, 'roller')
     assert.ok(await read(() => probe.hasInput('roller.repeat.pitch')), 'the roller offers its row')
     /* Walk 1 (2026-09-26): the fastening form opens on the roller's own fastening -- by its centre, the drawing's way (2026-10-01). */
+    await click(await read(() => probe.button('change-fastening')))
     assert.equal(await read(() => probe.fastenMode()), 'centre', 'the way it is fastened reads centre')
     /* And the row's part keeps a name of its own to change. */
     const name = await read(() => probe.nameField())

package/test/browser/more-open.js

@@ -0,0 +1,11 @@
+/*
+ * The properties' 「더 보기」 open, as a person who opened it once finds it: the checks that drive what is inside it (the
+ * section, its inside, glow, segments) reach it the way that person does. Imported first by those checks' pages, before
+ * the editor is made; the acceptance page a person looks at does not, and opens as a new person's would. The fold's own
+ * default and its memory are props.check.mjs's.
+ */
+try {
+  localStorage.setItem('figure-properties-more-open', '1')
+} catch {
+  /* A browser that keeps nothing opens the editor with the fold closed; the checks inside it then say so. */
+}

package/test/browser/parts.check.mjs

@@ -344,8 +344,18 @@ describe('the long explanations open from their 「?」 beside the title, closed
     await mount('box', 'doors')
     await pick('left')
     const seen = new Set()
-    for (const name of ['properties', 'capability', 'motion']) {
+    for (const name of ['properties', 'motion']) {
       await tab(name)
+      /* What the figure does is a folded group of the properties now (chief architect 2026-10-16): opened as a hand opens it. */
+      if (name === 'properties') {
+        const fold = await read(() => {
+          const summary = document.querySelector('figure-editor').renderRoot.querySelector('div[panel]:not([off]) section[capability] > details > summary')
+          summary.scrollIntoView({ block: 'center' })
+          const r = summary.getBoundingClientRect()
+          return { x: r.left + 20, y: r.top + r.height / 2 }
+        })
+        await click(fold, 'the capability fold')
+      }
       const helps = await read(() =>
         [...document.querySelector('figure-editor').renderRoot.querySelectorAll('figure-links, figure-clips')].flatMap((element, host) =>
           [...element.shadowRoot.querySelectorAll('button[help]')].map((b, i) => ({ host, i, seen: b.getClientRects().length > 0 })).filter(b => b.seen)

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

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

package/test/browser/product-page.check.mjs

@@ -265,6 +265,11 @@ describe('opening another figure', () => {
 
 const PANEL = 'figure-modeller-page >>> figure-history-panel'
 const TAB = name => `figure-editor >>> button[tab][aria-label="figure.label.tab-short-${name}"]`
+/** The release history opens from the bar beside save (it was a tab); pressed only when it is not open already. */
+const HISTORY = 'figure-editor >>> button[bar-overlay=history]'
+async function openHistory() {
+  if ((await read(s => product.deep(s)[0]?.getAttribute('aria-pressed'), HISTORY)) !== 'true') await press(HISTORY, 'the history button')
+}
 const VERSION_1 = { version: 1, comment: 'first', state: 'released', updatedAt: null, updater: null, score: null, triangles: null, groups: null }
 /** The revert choice popup's buttons: keep editing, let the edits go, save them first. */
 const CHOICE = { cancel: 'figure-revert-choice >>> md-text-button[slot=cancel]', discard: 'figure-revert-choice >>> md-text-button[slot=start]', save: 'figure-revert-choice >>> md-filled-button[slot=confirm]' }
@@ -286,12 +291,12 @@ describe('the history panel on the page', () => {
     await open('h')
   })
 
-  test('the release beside the save leads to the release section of the history tab', async () => {
+  test('the release beside the save leads to the release section of the history, opened from the bar', async () => {
     await press('button[publish]', 'release')
     await until(p => product.deep(p)[0]?.shadowRoot.activeElement?.closest('section[release]'), 'the release section focused', PANEL)
     const panel = await read(p => { const panel = product.deep(p)[0]; return { slot: panel.assignedSlot?.name, visible: panel.checkVisibility() } }, PANEL)
     assert.deepEqual(panel, { slot: 'history', visible: true })
-    assert.equal(await read(() => product.deep('figure-editor >>> button[tab][on]')[0]?.getAttribute('aria-label')), 'figure.label.tab-short-history')
+    assert.equal(await read(s => product.deep(s)[0]?.getAttribute('aria-pressed'), HISTORY), 'true', 'the bar\'s history pressed')
   })
 
   test('a released version downloads as a package by its full reference', async () => {
@@ -307,7 +312,7 @@ describe('the history panel on the page', () => {
     await until(r => product.view().revision === r + 1, 'one step', before.revision)
     await press(TAB('properties'), 'the properties tab')
     await until(() => product.deep('figure-properties >>> div[row] > span')[0]?.textContent === 'figure.text.declared-space-declared', 'the room declared')
-    await press(TAB('history'), 'the history tab')
+    await openHistory()
   })
 
   test('with edits not saved, a revert asks first; kept editing, nothing is sent', async () => {
@@ -774,7 +779,7 @@ describe('the page at a narrow width', () => {
   after(() => page().setViewport({ width: 1400, height: 900 }))
 
   test('the page fits the width it is given: the history panel does not run off its right edge', async () => {
-    await press(TAB('history'), 'the history tab')
+    await openHistory()
     await until(p => product.deep(p)[0]?.checkVisibility(), 'the history panel', PANEL)
     const edges = await read(p => ({ panel: product.deep(p)[0].getBoundingClientRect().right, page: product.page().getBoundingClientRect().right, window: innerWidth }), PANEL)
     assert.ok(edges.panel <= edges.page && edges.page <= edges.window, JSON.stringify(edges))

package/test/browser/props.check.mjs

@@ -0,0 +1,224 @@
+/*
+ * The properties panel's order and its quieter parts in a real browser (chief architect 2026-10-16, after the user's
+ * 「너무 이해하기 어렵고 산만하고, 버튼 박스도 과하게」): four side tabs; a part's groups in one order whatever its state;
+ * a fastening said in one line until it is changed; a group's rarer actions in its 「⋯」, reached by the keyboard too;
+ * 「더 보기」 folded by default and left as the person left it; the view and the history opened from the bar.
+ *
+ * Run:  node --test test/browser/props.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'
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('links-page.js'))
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+const revision = () => read(() => probe.state().revision)
+const MORE = 'figure-properties-more-open'
+
+async function until(fn, args, what, ms = 8000) {
+  const deadline = Date.now() + ms
+  for (;;) {
+    const got = await read(fn, ...args)
+    if (got) return got
+    if (Date.now() > deadline) assert.fail(`waited for ${what}`)
+    await sleep(50)
+  }
+}
+async function mount(kind) {
+  await read(kind => harness.mount(kind, null), kind)
+  await until(
+    () => {
+      try {
+        return probe.ids().some(id => !!probe.partOnPage(id))
+      } catch {
+        return false
+      }
+    },
+    [],
+    'the figure drawn in 3D',
+    15000
+  )
+}
+async function pick(part) {
+  const point = await read(id => probe.row(id), part)
+  assert.ok(point, `the row of ${part}`)
+  await page().mouse.click(point.x, point.y)
+  await until(id => probe.state().selected === id, [part], `${part} selected`)
+  await read(() => document.querySelector('figure-editor').updateComplete)
+}
+/** An element found through every shadow root; clicked where a person clicks it. */
+async function press(selector, what) {
+  const handle = await page().evaluateHandle(s => {
+    const deep = (root = document) => [...root.querySelectorAll(s)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+    return deep()[0] ?? null
+  }, selector)
+  const element = handle.asElement()
+  assert.ok(element, `${what ?? selector} is on the page`)
+  await element.click()
+}
+
+/**
+ * The groups of the panel shown, top to bottom, by what each is: the part's name, the size, the place and the row the
+ * links draw, the look, what the figure does, and 「더 보기」.
+ */
+const groupsInOrder = () =>
+  read(() => {
+    const editor = document.querySelector('figure-editor')
+    const panel = editor.shadowRoot.querySelector('div[panel]:not([off])')
+    const links = panel.querySelector('figure-links')?.shadowRoot
+    const marks = {
+      name: panel.querySelector('input[name-field]'),
+      size: links?.querySelector('section[size]'),
+      place: links?.querySelector('section[fastening]'),
+      row: panel.querySelector('section[slot=row]') ?? links?.querySelector('section[row]'),
+      look: panel.querySelector('figure-material-panel:not([show])'),
+      capability: panel.querySelector('section[capability]'),
+      more: panel.querySelector('section[more]')
+    }
+    return Object.entries(marks)
+      .filter(([, e]) => e && e.getBoundingClientRect().height > 0)
+      .sort((a, b) => a[1].getBoundingClientRect().top - b[1].getBoundingClientRect().top)
+      .map(([name]) => name)
+  })
+
+describe('the side: four tabs, the view and the history from the bar', () => {
+  before(() => mount('rollers'))
+
+  test('properties, motion, data and the verdict -- the four tabs, in that order', async () => {
+    const tabs = await read(() => [...document.querySelector('figure-editor').shadowRoot.querySelectorAll('aside button[tab]')].map(b => b.getAttribute('aria-label')))
+    assert.deepEqual(tabs, ['properties', 'motion', 'data', 'verdict'].map(t => `figure.label.tab-short-${t}`))
+  })
+
+  test('the view opens over the work from the bar, pressed while open; Esc closes it', async () => {
+    const shown = which => read(w => document.querySelector('figure-editor').shadowRoot.querySelector(`div[bar-overlay-panel=${w}]`).getBoundingClientRect().height > 0, which)
+    assert.equal(await shown('view'), false, 'closed at first')
+    await press('ox-canvas-bar button[bar-overlay=view]', 'the view button')
+    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('div[bar-overlay-panel=view]').getBoundingClientRect().height > 0, [], 'the view open')
+    assert.equal(await read(() => document.querySelector('figure-editor').shadowRoot.querySelector('button[bar-overlay=view]').getAttribute('aria-pressed')), 'true')
+    assert.equal(await read(() => !!document.querySelector('figure-editor').shadowRoot.querySelector('div[bar-overlay-panel=view] figure-settings')), true, 'the view settings in it')
+    await read(() => document.querySelector('figure-editor').shadowRoot.querySelector('div[bar-overlay-panel=view] button[quiet]').focus())
+    await page().keyboard.press('Escape')
+    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('div[bar-overlay-panel=view]').getBoundingClientRect().height === 0, [], 'closed by Esc')
+  })
+
+  test('the history opens from the bar beside save, and the view closes for it', async () => {
+    await press('ox-canvas-bar button[bar-overlay=view]', 'the view button')
+    await press('ox-canvas-bar button[bar-overlay=history]', 'the history button')
+    const open = await read(() => ['view', 'history'].map(w => document.querySelector('figure-editor').shadowRoot.querySelector(`div[bar-overlay-panel=${w}]`).getBoundingClientRect().height > 0))
+    assert.deepEqual(open, [false, true], 'one at a time')
+    assert.equal(await read(() => !!document.querySelector('figure-editor').shadowRoot.querySelector('div[bar-overlay-panel=history] slot[name=history]')), true, 'the page\'s history goes in it')
+    await press('ox-canvas-bar button[bar-overlay=history]', 'the history button')
+  })
+})
+
+describe('a part\'s groups in one order, whatever its state', () => {
+  before(() => mount('rollers'))
+
+  test('a part fastened in a row: name, size, place, row, look, what it does, more', async () => {
+    await pick('roller')
+    assert.deepEqual(await groupsInOrder(), ['name', 'size', 'place', 'row', 'look', 'capability', 'more'])
+  })
+
+  test('a part on the plane, not in a row: the same order, the row folded where a row would be', async () => {
+    await pick('bed')
+    assert.deepEqual(await groupsInOrder(), ['name', 'size', 'place', 'row', 'look', 'capability', 'more'])
+  })
+
+  test('a fastened part\'s place is one line and 「바꾸기」: no locked cells, no drawing, until it is changed', async () => {
+    await pick('mark')
+    const place = () =>
+      read(() => {
+        const editor = document.querySelector('figure-editor')
+        const links = editor.shadowRoot.querySelector('div[panel]:not([off]) figure-links').shadowRoot
+        return {
+          sentence: !!links.querySelector('div[fastened-summary] p[fasten-sentence]'),
+          change: !!links.querySelector('button[change-fastening]'),
+          drawing: !!links.querySelector('figure-fasten-drawing'),
+          cells: !!editor.shadowRoot.querySelector('div[panel]:not([off]) div[slot=place]')
+        }
+      })
+    assert.deepEqual(await place(), { sentence: true, change: true, drawing: false, cells: false })
+    await press('button[change-fastening]', '「바꾸기」')
+    await until(() => !!document.querySelector('figure-editor').shadowRoot.querySelector('div[panel]:not([off]) figure-links').shadowRoot.querySelector('figure-fasten-drawing'), [], 'the drawing')
+    /* Another part chosen and back: one line again. */
+    await pick('bed')
+    await pick('mark')
+    assert.equal((await place()).change, true, 'said in one line again')
+  })
+})
+
+describe('a group\'s 「⋯」: its rarer actions, by the mouse or the keyboard', () => {
+  before(() => mount('rollers'))
+
+  test('the place group\'s 「⋯」 takes the fastening off, opened and chosen by the keyboard, in one step', async () => {
+    /* The bed stands on the plane; nothing it carries is in the way of taking it off. */
+    await pick('bed')
+    const start = await revision()
+    await read(() => document.querySelector('figure-editor').shadowRoot.querySelector('div[panel]:not([off]) figure-links').shadowRoot.querySelector('section[fastening] button[group-menu]').focus())
+    await page().keyboard.press('Enter')
+    /* The menu takes the focus on its next frame (ox-popup); the keys go to it from then. */
+    await until(() => document.activeElement?.localName === 'ox-popup-menu', [], 'the menu open, with the focus')
+    const items = await read(() => [...document.querySelectorAll('ox-popup-menu[active] ox-popup-menuitem')].map(i => i.getAttribute('label')))
+    assert.deepEqual(items, ['figure.button.detach'])
+    await page().keyboard.press('ArrowDown')
+    /* The item takes the focus on the menu's next update; Enter goes to it from then. */
+    await until(() => document.activeElement?.localName === 'ox-popup-menuitem', [], 'the item chosen')
+    await page().keyboard.press('Enter')
+    await until(r => probe.state().revision === r + 1, [start], 'one step')
+    assert.equal(await read(() => JSON.parse(document.querySelector('figure-editor').session.source()).joints.some(j => j.body1.part === 'bed')), false, 'taken off')
+  })
+
+  test('Esc closes the menu and nothing is done', async () => {
+    await pick('roller')
+    const start = await revision()
+    await press('section[row] button[group-menu]', 'the row\'s 「⋯」')
+    await until(() => document.activeElement?.localName === 'ox-popup-menu', [], 'the menu open, with the focus')
+    assert.deepEqual(await read(() => [...document.querySelectorAll('ox-popup-menu[active] ox-popup-menuitem')].map(i => i.getAttribute('label'))), ['figure.button.remove-repeat'])
+    await page().keyboard.press('Escape')
+    await until(() => !document.querySelector('ox-popup-menu[active]'), [], 'the menu closed')
+    await sleep(200)
+    assert.equal(await revision(), start, 'nothing done')
+  })
+})
+
+describe('「더 보기」: folded by default, left as the person left it', () => {
+  const fold = () => read(() => document.querySelector('figure-editor').shadowRoot.querySelector('div[panel]:not([off]) section[more] > details')?.open ?? null)
+  before(() => read(key => localStorage.removeItem(key), MORE))
+  after(() => read(key => localStorage.setItem(key, '1'), MORE))
+
+  test('a person who never opened it finds it folded, the rare eight inside', async () => {
+    await mount('box')
+    await pick('box')
+    assert.equal(await fold(), false)
+    const inside = await read(() => {
+      const more = document.querySelector('figure-editor').shadowRoot.querySelector('div[panel]:not([off]) section[more]')
+      return { section: !!more.querySelector('figure-section-panel[embedded]'), material: !!more.querySelector('figure-material-panel[show=more]'), tools: !!more.querySelector('div[tools]') }
+    })
+    assert.deepEqual(inside, { section: true, material: true, tools: true })
+  })
+
+  test('opened, it stays open for the next part, and for the next figure opened in this browser', async () => {
+    await press('section[more] > details > summary', 'the 「더 보기」 fold')
+    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('section[more] > details').open, [], 'open')
+    /* The fold's toggle event comes a task after it opens. */
+    await until(key => localStorage.getItem(key) === '1', [MORE], 'kept in this browser')
+    await mount('box')
+    await pick('box')
+    assert.equal(await fold(), true, 'open again')
+    await press('section[more] > details > summary', 'the 「더 보기」 fold')
+    await until(() => !document.querySelector('figure-editor').shadowRoot.querySelector('section[more] > details').open, [], 'folded')
+    await until(key => localStorage.getItem(key) === '0', [MORE], 'folded, kept so')
+  })
+})

package/test/browser/screen-page.js

@@ -3,6 +3,7 @@
  * `window.editorHarness` -- the modeller page's harness takes `window.harness` after it), the figures the check opens,
  * and what the app shows that is not in the editor: its notices, the card's picture, the scene's registered figures.
  */
+import './more-open.js'
 import './modeller-page.js'
 import { captureFigureThumbnail } from 'figure-ui-client/modeller/thumbnail.js'
 import { drawableFigureParts } from 'figure-ui-client/modeller/renderer.js'
@@ -16,6 +17,7 @@ import {
   compileFigureAsset,
   createFigureAsset,
   editFigurePart,
+  proposeFigureOccupancy,
   robotArmFigure,
   serializeFigureAsset
 } from '@hatiolab/figure-model'
@@ -58,6 +60,22 @@ const FIGURES = {
     a = applyFigureAuthoring(a, { kind: 'attach', part: 'mast', face: 'bottom', to: { plane: 'mounting-plane' } })
     return applyFigureAuthoring(a, { kind: 'declare-instance-size', range: { x: { min: 200, max: 200 }, y: { min: 1000, max: 3000 }, z: { min: 300, max: 300 } } })
   },
+  /* A block fastened on a base: a part with a fastening to take back, under a figure with no size of its own yet. */
+  stack: () => {
+    let a = addFigureBox(named('Stack'), { id: 'base', size: { x: 1000, y: 200, z: 600 }, position: { x: 0, y: 100, z: 0 } })
+    a = addFigureBox(a, { id: 'top', size: { x: 200, y: 200, z: 200 }, position: { x: 0, y: 300, z: 0 } })
+    return applyFigureAuthoring(a, { kind: 'attach', part: 'top', face: 'bottom', to: { part: 'base', face: 'top' } })
+  },
+  /* A conveyor that follows its width, a roller every 200 mm, and the space it takes declared: the one figure stretched. */
+  stretch: () => {
+    let a = addFigureBox(named('Stretch'), { id: 'frame', size: { x: 2000, y: 100, z: 600 }, position: { x: 0, y: 50, z: 0 } })
+    a = addFigurePrimitive(a, { id: 'roller', kind: 'cylinder', dimensions: { radius: 30, length: 560 }, position: { x: 0, y: 0, z: 0 }, rotation: { x: 90, y: 0, z: 0 } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'roller', face: 'bottom', to: { part: 'frame', face: 'top' } })
+    a = applyFigureAuthoring(a, { kind: 'follow-size', part: 'frame', axes: ['x'] })
+    a = applyFigureAuthoring(a, { kind: 'make-repeat', part: 'roller', axis: 'x', pitch: 200 })
+    /* A space wider than the parts, as a spin swept or a padding gives: the box is the space, not the size (2026-10-16). */
+    return applyFigureAuthoring(a, { kind: 'declare-occupancy', proposal: proposeFigureOccupancy(a, { over: 'range' }), padding: { x: 100, y: 0, z: 0 } })
+  },
   /* The robot arm with a clip that turns its base: controls and a clip in the preview. */
   'arm-clip': () => editFigurePart(robotArmFigure(), { kind: 'set-driver', state: 'j1-base', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 4, value: 60 }] })
 }