@things-factory/figure-ui 10.1.181 → 10.1.185

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.181",
+  "version": "10.1.185",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@hatiolab/figure-model": "^0.7.2",
-    "@hatiolab/things-scene": "^10.1.91",
+    "@hatiolab/things-scene": "^10.1.92",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.29.39",
     "@operato/graphql": "^10.29.39",
     "@operato/i18n": "^10.0.0",
-    "@operato/input": "^10.29.39",
+    "@operato/input": "^10.29.41",
     "@operato/layout": "^10.29.39",
     "@operato/markdown": "^10.23.0",
     "@operato/p13n": "^10.29.39",
@@ -42,11 +42,11 @@
     "@operato/slot-layout-editor": "^10.29.39",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.29.39",
-    "@things-factory/ai-assistant": "^10.1.181",
-    "@things-factory/figure-service": "^10.1.181",
-    "@things-factory/figure-viewer": "^10.1.176",
-    "@things-factory/setting-base": "^10.1.181",
+    "@things-factory/ai-assistant": "^10.1.183",
+    "@things-factory/figure-service": "^10.1.183",
+    "@things-factory/figure-viewer": "^10.1.185",
+    "@things-factory/setting-base": "^10.1.183",
     "three": "^0.185.1"
   },
-  "gitHead": "a4387dbc9c5be49ac7bd0e85a59fbcd650f47138"
+  "gitHead": "3cfe5c959e7e82d772f46fd280037900fa89fcaa"
 }

package/test/browser/links-page.js

@@ -68,12 +68,12 @@ window.look = {
   },
   /**
    * From now on, keep what every event of this type carries: anywhere on the page, or -- `section` given -- sent by that
-   * part panel to the editor, which it still is once the panel has left the page.
+   * part panel (or the fastening window: `dialog`) to the editor, which it still is once it has left the page.
    */
   hear(type, section) {
     const key = section ? `${section}:${type}` : type
     const keep = e => heard[key].push(e.detail === undefined ? null : JSON.parse(JSON.stringify(e.detail)))
-    if (section) deep('figure-links').find(l => l.section === section).addEventListener(type, keep)
+    if (section) (section === 'dialog' ? deep('figure-fasten-dialog')[0] : deep('figure-links').find(l => l.section === section)).addEventListener(type, keep)
     else if (!heard[key]) document.addEventListener(type, keep, true)
     heard[key] = []
   },
@@ -102,9 +102,9 @@ window.look = {
     const small = label?.querySelector('small[fastened-to]')
     return small ? words(small) : null
   },
-  /** An event a part's panel (`section`: shape, places or motion) sends the editor, as the panel would send it. */
+  /** An event a part's panel (`section`: shape, places or motion) or the fastening window (`dialog`) sends the editor, as it would send it. */
   tell(section, type, detail) {
-    const panel = deep('figure-links').find(l => l.section === section)
+    const panel = section === 'dialog' ? deep('figure-fasten-dialog')[0] : deep('figure-links').find(l => l.section === section)
     panel.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
   },
   /** What the canvas tells the editor when a drag on a part ends. */

package/test/browser/links.check.mjs

@@ -90,11 +90,19 @@ 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`))
-/** A fastening the part has is said in one line; 「바꾸기」 opens its drawing and details. */
+/** A fastening the part has is said in one line; 「바꾸기」 opens the fastening window on it. */
 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')
+  await until(() => !!probe.fastenTargets(), [], 'the fastening window open')
+}
+/** The window's list: each row's part and words, whether chosen, whether it can be. Null while the window is closed. */
+const targets = () => read(() => probe.fastenTargets())
+const windowOpen = () => read(() => !!probe.fastenTargets())
+/** A row of the window's list pressed, as a hand does, and waited for as the one chosen. */
+async function aimAt(part) {
+  await click(await read(p => probe.fastenTarget(p), part), `the row of ${part} in the window`)
+  await until(p => probe.fastenTargets()?.some(t => t.target === p && t.selected), [part], `${part} chosen in the window`)
 }
 /** An element handle found through every shadow root. */
 const handle = (selector, test) =>
@@ -348,36 +356,50 @@ describe('a position worked out from the figure size', () => {
   })
 })
 
-describe('the fastening form on the robot arm', () => {
+describe('the fastening window 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')
-    const forearm = target.options.find(o => o.value === 'forearm')
-    assert.deepEqual(forearm, { value: 'forearm', text: 'figure.text.target-would-loop', disabled: true })
+    const list = await targets()
+    assert.deepEqual(list.filter(t => t.selected).map(t => t.target), [own], 'its own fastening')
+    const forearm = list.find(t => t.target === 'forearm')
+    assert.deepEqual(forearm, { target: 'forearm', text: 'figure.text.target-would-loop', selected: false, disabled: true })
+  })
+
+  test('the parts hanging from it are said in one line, and the chips show the part names as they are written', async () => {
+    const said = await read(() => {
+      const root = document.querySelector('figure-fasten-dialog').shadowRoot
+      const chip = root.querySelector('ox-input-select-buttons').shadowRoot.querySelector('md-filter-chip')
+      const label = chip.shadowRoot.querySelector('.label-text') ?? chip.shadowRoot.querySelector('.label')
+      return { lines: root.querySelectorAll('p[loops]').length, transform: getComputedStyle(label).textTransform }
+    })
+    const hanging = (await targets()).filter(t => t.disabled).map(t => t.target)
+    assert.ok(hanging.length > 1, `several parts hang from the upper arm: ${hanging}`)
+    assert.deepEqual(said, { lines: 1, transform: 'none' })
   })
 })
 
-describe('a new fastening for a door leaf: seen before it is done', () => {
+describe('a new fastening for a door leaf: chosen in the window, seen before it is done', () => {
   before(async () => {
     await mount('door')
     await read(() => look.hear('preview-command'))
   })
   const ghosts = () => read(() => look.drawn().filter(n => n.startsWith('__preview')))
 
-  test('started, it asks what to fasten to, with nothing chosen', async () => {
+  test('started, the window opens in the standard popup, asking what to fasten to, nothing chosen', async () => {
     await pick('leaf')
-    await press('button[act]', 'figure.button.fasten-start')
-    /* The form is the panel's, drawn after the editor's update. */
-    const target = await until(() => look.select('figure.label.target-part'), [], 'the fastening form')
-    assert.deepEqual([target.value, target.options[0].text], ['', 'figure.label.target-part-placeholder'])
+    await press('button[fasten-start]')
+    const list = await until(() => probe.fastenTargets(), [], 'the fastening window')
+    assert.deepEqual(list.filter(t => t.selected), [], 'nothing chosen')
+    assert.ok(list.some(t => t.target === 'frame' && !t.disabled), 'the frame offered')
+    assert.deepEqual((await all('[apply]')).map(b => b.disabled), [true], 'nothing to apply yet')
+    assert.deepEqual(await read(() => probe.fastenPopup()), { title: 'figure.label.fastening', movable: true, backdrop: true, role: 'dialog' })
   })
 
   test('the frame chosen: the editor is told the command, and the canvas draws where the leaf would go and the face it meets', async () => {
-    await choose('figure.label.target-part', 'frame')
+    await aimAt('frame')
     await until(() => look.drawn().includes('__preview:leaf') && look.drawn().includes('__target-face'), [], 'the leaf and the face drawn')
     const told = (await heard('preview-command')).filter(Boolean).at(-1)
     assert.equal(told?.action.kind, 'attach')
@@ -393,51 +415,49 @@ describe('a new fastening for a door leaf: seen before it is done', () => {
     assert.deepEqual((await all('span[fasten-summary]')).map(s => s.text), ['figure.text.fasten-summary-gap'])
   })
 
-  test('on another tab it is not drawn; back on the properties it is', async () => {
-    await tab('motion')
-    await until(() => !look.drawn().some(n => n.startsWith('__preview')), [], 'nothing drawn on the motion tab')
-    await tab('properties')
-    await until(() => look.drawn().includes('__preview:leaf'), [], 'drawn again')
-  })
-
-  test('a refused command clears what was drawn and says why', async () => {
-    await read(() => look.tell('shape', 'preview-command', { action: { kind: 'attach', part: 'leaf', face: 'bottom', to: { part: 'frame', face: 'nowhere' } } }))
+  test('a refused command clears what was drawn and says why, in the window', async () => {
+    await read(() => look.tell('dialog', 'preview-command', { action: { kind: 'attach', part: 'leaf', face: 'bottom', to: { part: 'frame', face: 'nowhere' } } }))
     await until(() => look.all('[preview-words]', 'figure.text.preview-refused').length > 0, [], 'the refusal said')
     assert.deepEqual(await ghosts(), [], 'nothing of the earlier result drawn')
   })
 
-  test('the part let go of, the panel leaving tells the editor to clear it', async () => {
-    await read(() => look.hear('preview-command', 'shape'))
-    await click(await read(id => probe.row(id), 'leaf'), 'the leaf row')
-    await page().keyboard.press('Escape')
-    await until(() => probe.state().selected === '', [], 'nothing selected')
-    assert.deepEqual(await heard('preview-command', 'shape'), [null], 'told once: nothing to show')
+  test('a press outside the window closes it with nothing written, and nothing it tried is drawn', async () => {
+    const start = await state()
+    /* The motion tab, under the popup's backdrop: the press closes the popup, it does not reach the tab. */
+    await click(await read(l => probe.tab(l), 'figure.label.tab-short-motion'), 'outside the window')
+    await until(() => !probe.fastenTargets(), [], 'the window closed')
+    await until(() => !look.drawn().some(n => n.startsWith('__preview')), [], 'nothing it tried drawn')
+    assert.equal(await read(() => look.tab()), 'figure.label.tab-short-properties', 'the press did not reach the tab')
+    assert.equal((await state()).revision, start.revision, 'nothing written')
   })
 
-  test('"fasten it first" from the motion tab opens this part\'s fastening, as it is now, in view, on the properties tab', async () => {
-    await pick('leaf')
-    await press('button[act]', 'figure.button.fasten-start')
-    await choose('figure.label.target-part', 'frame')
-    /* The panel scrolled back to its head, the fastening below the fold. */
-    const panel = await at('section[fastening]')
-    await page().mouse.move(panel.x, panel.y)
-    await page().mouse.wheel({ deltaY: -5000 })
-    await until(() => !look.inView('section[fastening]'), [], 'the fastening section scrolled out of view')
+  test('"fasten it first" from the motion tab opens this part\'s window, on what it has, on the properties tab', async () => {
     await tab('motion')
     await click(await at('button[go-fasten]'), 'go-fasten')
-    await until(() => look.all('section[fastening]').some(s => s.spotlit), [], 'the fastening section marked')
+    const list = await until(() => probe.fastenTargets(), [], 'the window open')
     assert.equal(await read(() => look.tab()), 'figure.label.tab-short-properties', 'on the properties tab, not another')
-    assert.equal((await read(() => look.select('figure.label.target-part'))).value, '', 'the form is the fastening it has: none')
-    await until(() => look.inView('section[fastening]'), [], 'the section in view')
+    assert.deepEqual(list.filter(t => t.selected), [], 'the fastening it has: none')
+  })
+
+  test('Esc closes the window and tells the editor to clear what it tried; the leaf stays selected', async () => {
+    await aimAt('frame')
+    await until(() => look.drawn().includes('__preview:leaf'), [], 'the leaf drawn where it would go')
+    await read(() => look.hear('preview-command', 'dialog'))
+    await page().keyboard.press('Escape')
+    await until(() => !probe.fastenTargets(), [], 'the window closed')
+    assert.equal((await state()).selected, 'leaf', 'Esc was the window\'s, not the modeller\'s')
+    assert.deepEqual(await heard('preview-command', 'dialog'), [null], 'told once: nothing to show')
+    assert.deepEqual(await ghosts(), [])
   })
 
-  test('the frame\'s front chosen in the drawing, fastened: the leaf keeps its place across that face', async () => {
+  test('the frame\'s front chosen in the drawing, 붙이기: one step, the leaf keeps its place across that face', async () => {
+    await pick('leaf')
+    await press('button[fasten-start]')
     const was = (await read(() => probe.body('leaf'))).t.map(Math.round)
-    await choose('figure.label.target-part', 'frame')
+    await aimAt('frame')
     /*
       The frame's faces are offered once the drawing has the frame: a press before that is not a choice. And the press is
-      aimed once the form has drawn what the choice brings -- the leaf where it would go, and the words above the drawing
-      that move it down -- or it lands where the face was.
+      aimed once the window has drawn what the choice brings -- the leaf where it would go -- or it lands where the face was.
     */
     await until(() => look.face('front')?.pickable && look.drawn().includes('__preview:leaf'), [], 'the front face offered, the leaf drawn where it would go')
     await settled()
@@ -445,9 +465,10 @@ describe('a new fastening for a door leaf: seen before it is done', () => {
     await click(await at('path[face="front"]'), 'the front face in the drawing')
     await until(() => look.face('front').chosen, [], 'the front face drawn as the one chosen')
     const start = await state()
-    await click(await at('button[act]', 'figure.button.fasten'), 'fasten')
+    await press('[apply]')
     assert.equal((await state()).error, '', 'not refused')
     await oneStep(start)
+    assert.equal(await windowOpen(), false, 'the window closed')
     assert.equal((await source()).joints.find(j => j.body1.part === 'leaf').body0.face, 'front')
     const now = (await read(() => probe.body('leaf'))).t.map(Math.round)
     assert.deepEqual([now[0], now[1]], [was[0], was[1]], `left-right and height kept: was ${was}, now ${now}`)
@@ -526,6 +547,14 @@ describe('a bench: what each part is fastened to, what detaching would do, a row
     await until(() => look.all('section[fastening] [detach-words]', 'figure.text.detach-keeps-children').length === 1, [], 'said under the fastening')
   })
 
+  test('the part let go of, the panel leaving tells the editor to clear the face it lit', async () => {
+    await read(() => look.hear('preview-command', 'shape'))
+    await page().keyboard.press('Escape')
+    await until(() => probe.state().selected === '', [], 'nothing selected')
+    assert.deepEqual(await heard('preview-command', 'shape'), [null], 'told once: nothing to show')
+    await until(() => !look.drawn().includes('__target-face'), [], 'the face no longer lit')
+  })
+
   test('a part that would stay where it stands: nothing is said under its fastening', async () => {
     await pick('lamp')
     /* Taking it off is the place group's 「⋯」 (chief architect 2026-10-16). */
@@ -639,6 +668,127 @@ async function poll(ask, ms = 5000) {
   }
 }
 
+/*
+ * The fastening window writes once (user 2026-10-17): whatever is tried in it is a preview, 「적용」 is one step of the
+ * history with all of it, and 「취소」 or Esc leave the history as it was.
+ */
+describe('the fastening window: tried freely, written once', () => {
+  before(async () => {
+    let a = fasten(box(createFigureAsset('Bench'), 'leg', [60, 700, 60], [-400, 350, 0]), 'leg', 'plane')
+    a = fasten(box(a, 'top', [1200, 40, 600], [0, 900, 0]), 'top', 'leg')
+    a = fasten(box(a, 'lamp', [80, 80, 80], [200, 960, 100]), 'lamp', 'top')
+    await mount('bench-window', box(a, 'loose', [100, 100, 100], [800, 50, 0]))
+  })
+  const lamp = async () => (await source()).joints.find(j => j.body1.part === 'lamp')
+  const lampTold = () => read(() => look.heard('preview-command').filter(Boolean).at(-1)?.action ?? null)
+  /* Flush, a gap of 40 and the top's front: three choices, each drawn on the canvas, none written. */
+  async function tryThree(start) {
+    await read(() => look.hear('preview-command'))
+    await press('button[mode="flush"]')
+    await click(await at('details[fasten-detail] > summary'), 'the details')
+    await type(await handle('details[fasten-detail] input', 'figure.label.gap'), '40')
+    await until(() => look.face('front')?.pickable, [], 'the front face offered')
+    await click(await at('path[face="front"]'), 'the front face in the drawing')
+    await until(() => look.heard('preview-command').filter(Boolean).at(-1)?.action.to?.face === 'front', [], 'the three told')
+    const told = await lampTold()
+    assert.deepEqual([told.facing, told.gap, told.to], ['flush', 40, { part: 'top', face: 'front' }], 'all three in the command tried')
+    assert.equal((await state()).revision, start.revision, 'nothing written while trying')
+  }
+
+  test('three choices tried, then 취소: nothing written, the window closed, nothing of them drawn', async () => {
+    await pick('lamp')
+    const was = await lamp()
+    await changeFastening()
+    const start = await state()
+    await tryThree(start)
+    await press('[cancel]')
+    await until(() => !probe.fastenTargets(), [], 'the window closed')
+    await settled()
+    await sleep(300)
+    assert.equal((await state()).revision, start.revision, 'the history as it was')
+    assert.deepEqual(await lamp(), was, 'the fastening as it was')
+    await until(() => !look.drawn().some(n => n.startsWith('__preview')), [], 'nothing tried drawn')
+  })
+
+  test('Esc closes it the same way, and leaves the part selected', async () => {
+    await pick('lamp')
+    const was = await lamp()
+    await changeFastening()
+    const start = await state()
+    await press('button[mode="flush"]')
+    await page().keyboard.press('Escape')
+    await until(() => !probe.fastenTargets(), [], 'the window closed')
+    await sleep(300)
+    const now = await state()
+    assert.deepEqual([now.revision, now.selected], [start.revision, 'lamp'], 'nothing written, the lamp still selected')
+    assert.deepEqual(await lamp(), was)
+  })
+
+  test('three choices and one 적용: one step holding all three; one undo takes all three back', async () => {
+    await pick('lamp')
+    const was = await lamp()
+    await changeFastening()
+    const start = await state()
+    await tryThree(start)
+    await press('[apply]')
+    await oneStep(start)
+    assert.equal(await windowOpen(), false, 'the window closed')
+    const now = await lamp()
+    assert.deepEqual([now.body0.face, now.origin?.facing, now.origin?.gap], ['front', 'flush', 40], JSON.stringify(now))
+    await page().keyboard.down('Control')
+    await page().keyboard.press('z')
+    await page().keyboard.up('Control')
+    await until(w => JSON.stringify(JSON.parse(document.querySelector('figure-editor').session.source()).joints.find(j => j.body1.part === 'lamp')) === w, [JSON.stringify(was)], 'one undo: the fastening as it was')
+  })
+
+  test('moved by the popup\'s head out of the way of the canvas: nothing written, still open', async () => {
+    await pick('lamp')
+    await changeFastening()
+    const rect = () => read(() => {
+      const r = document.querySelector('figure-fasten-dialog')?.getBoundingClientRect()
+      return r ? { x: Math.round(r.left), y: Math.round(r.top) } : null
+    })
+    const was = await rect()
+    const head = await read(() => {
+      const h = document.querySelector('figure-fasten-dialog').closest('ox-floating-overlay').shadowRoot.querySelector('[header] h1').getBoundingClientRect()
+      return { x: h.left + h.width / 2, y: h.top + h.height / 2 }
+    })
+    const start = await state()
+    await page().mouse.move(head.x, head.y)
+    await page().mouse.down()
+    for (let i = 1; i <= 6; i++) await page().mouse.move(head.x - 30 * i, head.y + 20 * i)
+    await page().mouse.up()
+    const moved = await rect()
+    assert.deepEqual([moved.x - was.x, moved.y - was.y], [-180, 120], `moved with the pointer: ${JSON.stringify([was, moved])}`)
+    assert.equal(await windowOpen(), true, 'still open')
+    assert.equal((await state()).revision, start.revision, 'nothing written')
+    await press('[cancel]')
+    await until(() => !probe.fastenTargets(), [], 'the window closed')
+  })
+
+  test('the keys: the arrows move among the chips and light that part on the canvas, the pointer lights another, Space chooses, Enter applies', async () => {
+    await pick('lamp')
+    await changeFastening()
+    const litAt = y => Math.abs((document.querySelector('figure-editor').shadowRoot.querySelector('figure-canvas').highlight?.pose.t[1] ?? 0) - y) < 2
+    /* The list has the focus, on the top it is fastened to. */
+    await until(() => document.querySelector('figure-fasten-dialog')?.shadowRoot.querySelector('ox-input-select-buttons')?.shadowRoot.activeElement?.getAttribute('data-value') === 'top', [], 'the focus on the chosen chip')
+    await page().keyboard.press('ArrowLeft')
+    /* The leg's top, 700 high (the lit plate a little over it); moving the focus lights, it does not choose. */
+    await until(litAt, [702], 'the leg\'s top lit')
+    assert.equal((await targets()).find(t => t.selected)?.target, 'top', 'still the top chosen')
+    const loose = await read(() => probe.fastenTarget('loose'))
+    await page().mouse.move(loose.x, loose.y)
+    await until(litAt, [102], 'the loose box\'s top lit under the pointer')
+    await page().keyboard.press('Space')
+    await until(() => probe.fastenTargets().find(t => t.selected)?.target === 'leg', [], 'the leg chosen by Space')
+    const start = await state()
+    await page().keyboard.press('Enter')
+    await oneStep(start)
+    assert.equal((await lamp()).body0.part, 'leg', 'fastened to what was chosen')
+    assert.equal(await windowOpen(), false)
+  })
+})
+
 describe('a motion on the motion tab', () => {
   test('named by its parts, and drawn at both ends of its range', async () => {
     await mount('arm')

package/test/browser/modeller-page.js

@@ -4,6 +4,7 @@
  * `client/` by the runner.
  */
 import 'figure-ui-client/modeller/editor.js'
+import './popup-stand-in.js'
 import { budgetOf, figureReportOf } from 'figure-ui-client/modeller/maturity.js'
 import { createFigureProductSession } from 'figure-ui-client/modeller/product-session.js'
 import { addFigureBox, addFigurePrimitive, applyFigureAuthoring, createFigureAsset, figureWork, robotArmFigure, serializeFigureAsset } from '@hatiolab/figure-model'
@@ -200,6 +201,28 @@ window.probe = {
   fastenMode() {
     return deep('figure-fasten-drawing')[0]?.mode ?? null
   },
+  /** The fastening window's list of what to fasten to, each row's part and words, whether chosen, whether it can be; null while closed. */
+  fastenTargets() {
+    const dialog = deep('figure-fasten-dialog')[0]
+    if (!dialog) return null
+    const root = dialog.shadowRoot
+    const chips = [...(root.querySelector('ox-input-select-buttons')?.shadowRoot?.querySelectorAll('md-filter-chip') ?? [])]
+    return [
+      ...chips.map(c => ({ target: c.getAttribute('data-value'), text: c.getAttribute('label') ?? '', selected: !!c.selected, disabled: false })),
+      /* A part hanging from this one: not a chip, said why under them. */
+      ...[...root.querySelectorAll('p[loops]')].flatMap(p => p.getAttribute('targets').split(',').map(target => ({ target, text: p.textContent.replace(/\s+/g, ' ').trim(), selected: false, disabled: true })))
+    ]
+  },
+  /** The page point of a chip of the fastening window's list. */
+  fastenTarget(part) {
+    const chip = deep('figure-fasten-dialog')[0]?.shadowRoot.querySelector('ox-input-select-buttons')?.shadowRoot?.querySelector(`md-filter-chip[data-value="${CSS.escape(part)}"]`)
+    return chip ? centreOf(chip) : null
+  },
+  /** The fastening window's popup, as the standard overlay holds it: its title, whether its head moves it, its backdrop. */
+  fastenPopup() {
+    const overlay = deep('figure-fasten-dialog')[0]?.closest('ox-floating-overlay')
+    return overlay ? { title: overlay.title, movable: overlay.movable, backdrop: !!overlay.backdrop, role: overlay.querySelector('figure-fasten-dialog').getAttribute('role') } : null
+  },
   /** The page point of an input by its aria-label, or of the part name field. */
   nameField() {
     const input = deep('input[name-field]')[0]

package/test/browser/modeller.check.mjs

@@ -324,17 +324,13 @@ describe('the robot arm: a drag on a part edits its joint (ADR-0093)', () => {
   })
 })
 
-describe('the fastening form belongs to the part it is for', () => {
+describe('the fastening window belongs to the part it is for', () => {
   before(async () => {
     await mount('arm')
   })
 
-  /* The select whose label (the i18n key: the check loads no translations) is `label`, in the parts' links form. */
-  const select = label =>
-    page().evaluateHandle(label => {
-      const deep = (root = document) => [...root.querySelectorAll('select')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      return deep().find(s => s.previousElementSibling?.textContent?.trim() === label) ?? null
-    }, label)
+  /* What the fastening window's list has chosen: the part, or `__plane`. */
+  const targetChosen = () => read(() => probe.fastenTargets()?.find(t => t.selected)?.target ?? null)
   /* Where the part sits across the target face, as the face drawing holds it (the drawing sets it since 2026-10-02). */
   const placing = () =>
     read(() => {
@@ -345,13 +341,13 @@ 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). */
+    /* A fastening the part has is said in one line; 「바꾸기」 opens the window on it (user 2026-10-17). */
     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')
+    assert.equal(await targetChosen(), '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(() => {
       const deep = (root = document) => [...root.querySelectorAll('figure-fasten-drawing')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      const rect = deep()[0]?.shadowRoot.querySelector('div[where] svg > rect')
+      const rect = deep().find(d => d.show === 'face')?.shadowRoot.querySelector('div[where] svg > rect')
       if (!rect) return null
       rect.scrollIntoView({ block: 'center' })
       const r = rect.getBoundingClientRect()
@@ -365,9 +361,13 @@ describe('the fastening form belongs to the part it is for', () => {
     const chosen = await placing()
     assert.equal(chosen?.x, 'mm', `placed off centre for the forearm: ${JSON.stringify(chosen)}`)
     assert.ok(chosen.mm > 0)
+    /* The window is a popup over the work: closed (nothing written) before another part is picked. */
+    await page().keyboard.press('Escape')
+    await sleep(600)
+    assert.equal(await read(() => !!probe.fastenTargets()), false, 'closed by Esc')
 
     await click(await read(() => probe.row('elbow')))
-    /* Another part opens on the line again, the form closed: 「바꾸기」 opens the elbow's own. */
+    /* Another part opens on the line again: 「바꾸기」 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. */
@@ -375,7 +375,7 @@ describe('the fastening form belongs to the part it is for', () => {
       const joint = JSON.parse(document.querySelector('figure-editor').session.source()).joints.find(j => j.body1.part === 'elbow')
       return { target: joint.body0.part, x: Object.keys(joint.origin?.align?.x ?? {})[0] ?? 'centre' }
     })
-    assert.equal(await (await select('figure.label.target-part')).evaluate(s => s?.value), own.target, 'the elbow opens on what it is fastened to')
+    assert.equal(await targetChosen(), own.target, 'the elbow opens on what it is fastened to')
     const next = await placing()
     assert.equal(next?.target, own.target)
     assert.equal(next.x, own.x, 'and on its own placing, not the forearm\'s')
@@ -635,16 +635,13 @@ describe('the modeller made easier to find and to keep (2026-09-26 baseline)', (
     await mount('door')
     await click(await read(() => probe.row('leaf')))
     const was = await body('leaf')
-    /* The floor is chosen as what the leaf is fastened to, in the fastening form; a new fastening waits for 붙이기. */
+    /* The floor is chosen as what the leaf is fastened to, in the fastening window; a new fastening waits for 붙이기. */
     await click(await centre(await find('button', 'figure.button.fasten-start')))
-    const target = await page().evaluateHandle(() => {
-      const deep = (root = document) => [...root.querySelectorAll('select')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      return deep().find(s => s.previousElementSibling?.textContent?.trim() === 'figure.label.target-part') ?? null
-    })
-    assert.ok(await target.evaluate(s => !!s), 'the form asks what the leaf is fastened to')
-    await target.select('__plane')
+    await sleep(300)
+    assert.ok(await read(() => !!probe.fastenTargets()), 'the window asks what the leaf is fastened to')
+    await click(await read(() => probe.fastenTarget('__plane')))
     await sleep(500)
-    const fasten = await find('button[act]', 'figure.button.fasten')
+    const fasten = await find('[apply]', 'figure.button.fasten')
     const start = await state()
     await click(await centre(fasten))
     const after = await state()
@@ -880,6 +877,8 @@ describe('a row that carries a part (ADR-0093, 2026-09-26)', () => {
     /* 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')
+    await page().keyboard.press('Escape')
+    await sleep(600)
     /* And the row's part keeps a name of its own to change. */
     const name = await read(() => probe.nameField())
     assert.equal(name.disabled, false, 'the roller can be renamed')

package/test/browser/namespace-page.js

@@ -4,36 +4,9 @@
  */
 import 'figure-ui-client/setting-let/figure-namespace-setting-let.js'
 import 'figure-ui-client/modeller/figure-first-save.js'
-import { html, render } from 'lit'
+import { html } from 'lit'
 import { openPopup } from '@operato/layout'
-import { setOpenPopupImplementation } from '@operato/popup'
-import '@operato/popup/ox-floating-overlay.js'
-
-/* Popups, drawn as the layout draws them (as product-page.js does): an overlay in the body, the result given when it leaves. */
-let popups = 0
-setOpenPopupImplementation((template, options = {}) => {
-  const name = `$popup-${popups++}`
-  const fragment = document.createDocumentFragment()
-  render(html`<ox-floating-overlay id=${name} name=${name} .backdrop=${!!options.backdrop} .title=${options.title || ''} .size=${options.size || 'small'} .historical=${false}>${template}</ox-floating-overlay>`, fragment)
-  document.body.appendChild(fragment)
-  const handle = {
-    name,
-    close: () => {
-      const popup = document.getElementById(name)
-      if (!popup) return false
-      popup.close()
-      return true
-    },
-    closed: false
-  }
-  document.addEventListener('overlay-closed', function listener(e) {
-    if (e.detail !== name) return
-    document.removeEventListener('overlay-closed', listener)
-    handle.closed = true
-    handle.onclosed && handle.onclosed()
-  })
-  return handle
-})
+import './popup-stand-in.js'
 
 let rows = [
   { id: '1', name: 'acme.example', state: 'active', isDefault: true },

package/test/browser/popup-stand-in.js

@@ -0,0 +1,48 @@
+/*
+ * Popups drawn as the layout draws them -- an overlay of their own in the body, the result given when it leaves -- for
+ * the pages that have no layout to append them to. The popup's own options are passed as the layout passes them: its
+ * title, size, where it hovers, its backdrop, whether it closes by X or Esc and whether its head moves it.
+ */
+import { html, render } from 'lit'
+import { setOpenPopupImplementation } from '@operato/popup'
+import '@operato/popup/ox-floating-overlay.js'
+
+let popups = 0
+setOpenPopupImplementation((template, options = {}) => {
+  const name = `$popup-${popups++}`
+  const fragment = document.createDocumentFragment()
+  render(
+    html`<ox-floating-overlay
+      id=${name}
+      name=${name}
+      .backdrop=${!!options.backdrop}
+      .hovering=${options.hovering}
+      .title=${options.title || ''}
+      .size=${options.size || 'small'}
+      .closable=${!!options.closable}
+      .escapable=${!!options.escapable}
+      .movable=${!!options.movable}
+      .historical=${false}
+      >${template}</ox-floating-overlay
+    >`,
+    fragment
+  )
+  document.body.appendChild(fragment)
+  const handle = {
+    name,
+    close: () => {
+      const popup = document.getElementById(name)
+      if (!popup) return false
+      popup.close()
+      return true
+    },
+    closed: false
+  }
+  document.addEventListener('overlay-closed', function listener(e) {
+    if (e.detail !== name) return
+    document.removeEventListener('overlay-closed', listener)
+    handle.closed = true
+    handle.onclosed && handle.onclosed()
+  })
+  return handle
+})