@things-factory/figure-ui 10.1.181 → 10.1.185

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

@@ -265,8 +265,8 @@ 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]'
+/** The releases open from 「발행」 beside save, the bar's one way to them (user 2026-10-18); pressed only when not open already. */
+const HISTORY = 'figure-editor >>> button[publish]'
 async function openHistory() {
   if ((await read(s => product.deep(s)[0]?.getAttribute('aria-pressed'), HISTORY)) !== 'true') await press(HISTORY, 'the history button')
 }
@@ -296,7 +296,8 @@ describe('the history panel on the page', () => {
     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(s => product.deep(s)[0]?.getAttribute('aria-pressed'), HISTORY), 'true', 'the bar\'s history pressed')
+    assert.equal(await read(s => product.deep(s)[0]?.getAttribute('aria-pressed'), HISTORY), 'true', 'the bar\'s 「발행」 pressed')
+    assert.equal(await read(() => product.deep('figure-editor >>> button[bar-overlay=history]').length), 0, 'no second way to the same panel')
   })
 
   test('a released version downloads as a package by its full reference', async () => {
@@ -310,8 +311,7 @@ describe('the history panel on the page', () => {
     const before = await read(() => product.view())
     await press(`${PANEL} >>> button[fit-base]`, 'fit')
     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 until(() => !!JSON.parse(product.view().source).occupancy, 'the room declared')
     await openHistory()
   })
 
@@ -534,11 +534,30 @@ describe('the page around the figure: the shell, the dock, the properties', () =
     await until(() => product.view().name === 'Door', 'undone')
   })
 
-  test('fitting from the properties declares the room from the parts, as one step', async () => {
+  /*
+    Nothing to set up before work goes on (user 2026-10-18, after a walk without it): the tab names the figure and
+    where it stands. The room is declared where release asks for it; no face is chosen here.
+  */
+  test('the properties tab neither declares the room nor picks a face; where it stands is one step', async () => {
+    const shown = await read(() => {
+      const root = product.deep('figure-modeller-page >>> figure-properties')[0].shadowRoot
+      return {
+        headings: [...root.querySelectorAll('section > h3')].map(h => h.textContent.trim()),
+        actions: root.querySelectorAll('button[act]').length,
+        mounting: !!root.querySelector('div[mounting-face]'),
+        selects: [...root.querySelectorAll('select')].map(s => s.previousElementSibling?.textContent.trim())
+      }
+    })
+    assert.deepEqual(shown, { headings: ['figure.label.group-figure', 'figure.label.group-catalog'], actions: 0, mounting: false, selects: ['figure.label.figure-placement'] })
     const before = await read(() => product.view())
-    await press('figure-properties >>> button[act]', 'fit to the parts')
-    await until(() => product.deep('figure-properties >>> div[row] > span')[0]?.textContent === 'figure.text.declared-space-declared', 'the room declared')
-    assert.equal((await read(() => product.view())).revision, before.revision + 1)
+    await read(() => {
+      const select = product.deep('figure-modeller-page >>> figure-properties')[0].shadowRoot.querySelector('select')
+      select.value = 'ceiling'
+      select.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+    await until(r => product.view().revision === r + 1, 'one step', before.revision)
+    assert.equal(JSON.parse((await read(() => product.view())).source).placement, 'ceiling')
+    assert.equal(JSON.parse((await read(() => product.view())).source).occupancy, undefined, 'no room declared on the way')
   })
 
   test('unsaved: closing or reloading the tab is asked about', async () => {
@@ -769,6 +788,38 @@ describe('the catalogue preview', () => {
   })
 })
 
+/* A mounting face named already -- by the assistant, or before 2026-10-18 -- is said, and can be taken off; nothing more. */
+describe('a mounting face named already', () => {
+  const line = () =>
+    read(() => {
+      const root = product.deep('figure-modeller-page >>> figure-properties')[0]?.shadowRoot
+      const field = root?.querySelector('div[mounting-face]')
+      return field ? { label: field.querySelector('label').textContent.trim(), said: field.querySelector('div[row] > span').textContent.trim(), clear: !!field.querySelector('button[quiet][clear-mounting-face]') } : null
+    })
+
+  test('it is one line with the way to take it off, which is one step', async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'm', type: 'mounted', source: product.mountedSource('floor') }))
+    await open('m')
+    await until(() => !!product.deep('figure-modeller-page >>> figure-properties')[0]?.shadowRoot?.querySelector('div[mounting-face]'), 'the mounting face said')
+    assert.deepEqual(await line(), { label: 'figure.label.mounting-face', said: 'box · figure.label.face-bottom', clear: true })
+    const before = await read(() => product.view())
+    await press('figure-properties >>> button[clear-mounting-face]', 'take the mounting face off')
+    await until(r => product.view().revision === r + 1, 'one step', before.revision)
+    assert.equal(JSON.parse((await read(() => product.view())).source).occupancy.contact, undefined, 'taken off')
+    assert.ok(JSON.parse((await read(() => product.view())).source).occupancy.bounds, 'the room stays')
+    await until(() => !product.deep('figure-modeller-page >>> figure-properties')[0].shadowRoot.querySelector('div[mounting-face]'), 'the line gone')
+  })
+
+  test('on a centred figure it says the face is not checked there', async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'mc', type: 'mounted', source: product.mountedSource('center') }))
+    await open('mc')
+    await until(() => !!product.deep('figure-modeller-page >>> figure-properties')[0]?.shadowRoot?.querySelector('div[mounting-face]'), 'the mounting face said')
+    assert.equal((await line()).said, 'box · figure.label.face-bottom · figure.text.mounting-face-unchecked-at-center')
+  })
+})
+
 describe('the page at a narrow width', () => {
   before(async () => {
     await fresh()

package/test/browser/product-page.js

@@ -17,10 +17,10 @@ import { thumbnailHashOf } from 'figure-ui-client/modeller/thumbnail-hash.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { store } from '@operato/shell'
-import { setOpenPopupImplementation } from '@operato/popup'
-import '@operato/popup/ox-floating-overlay.js'
+import { addressController } from '@operato/utils/address.js'
+import './popup-stand-in.js'
 import { html, render } from 'lit'
-import { addFigureBox, applyFigureAuthoring, createFigureAsset, editFigurePart, serializeFigureAsset } from '@hatiolab/figure-model'
+import { addFigureBox, applyFigureAuthoring, createFigureAsset, editFigurePart, proposeFigureOccupancy, serializeFigureAsset } from '@hatiolab/figure-model'
 
 const PALETTE = { 'palette.dark': '#2b2b2b', 'palette.neutral': '#9a9a9a', 'palette.primary': '#477b9e', 'palette.accent': '#f79c40', 'palette.light': '#dddddd' }
 
@@ -30,6 +30,15 @@ export function boxSource(name = 'Probe') {
   return serializeFigureAsset(addFigureBox(asset, { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }))
 }
 
+/* A box whose bottom is named as its mounting face -- the assistant can name one; the properties tab only takes it off. */
+export function mountedSource(placement = 'floor') {
+  let a = applyFigureAuthoring(createFigureAsset('Mounted'), { kind: 'set-placement', placement })
+  a.palette = { ...a.palette, ...PALETTE }
+  a = addFigureBox(a, { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } })
+  a = applyFigureAuthoring(a, { kind: 'declare-occupancy', proposal: proposeFigureOccupancy(a) })
+  return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'set-mounting-face', part: 'box', face: 'bottom' }))
+}
+
 /* A door whose leaf swings on a clip: a proposal that takes the leaf away would stop the clip. */
 export function doorSource() {
   let a = createFigureAsset('Door')
@@ -129,32 +138,6 @@ function everywhere(selector, root) {
   return found
 }
 
-/* Popups, drawn as the layout draws them: an overlay of their own 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} .hovering=${options.hovering} .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
-})
-
 /* Notices the product raised (`notify`), as the snack bar would show them. */
 const notices = []
 document.addEventListener('notify', e => notices.push({ level: e.detail.level, message: e.detail.message }))
@@ -162,8 +145,20 @@ document.addEventListener('notify', e => notices.push({ level: e.detail.level, m
 /*
   The shell's router, for what the product navigates to: the store's route follows the address, and the modeller page
   is told the figure the address names. Each navigation is kept, with whether the detail preview was still shown then.
+  Like the shell's own router (@operato/shell router.js), it follows the entries the address controller commits;
+  `navigate` sends no `popstate`. The addresses the shell itself moves to below (`goTo`, `open`) are not the product's.
 */
 const navigations = []
+let shellMoving = false
+/** The shell's own move to an address: routed by the caller, not kept as the product's navigation. */
+function shellMoves(move) {
+  shellMoving = true
+  try {
+    move()
+  } finally {
+    shellMoving = false
+  }
+}
 const detailShown = () => !!store.getState().layout?.viewparts?.['figure-detail']?.show
 function route() {
   const [, page = '', resourceId] = location.pathname.match(/^\/([^/]*)\/?([^/]*)/) ?? []
@@ -171,10 +166,11 @@ function route() {
   const element = page === 'figure-modeller' ? document.querySelector('figure-modeller-page') : null
   if (element) element.lifecycle = { ...(element.lifecycle ?? {}), resourceId: resourceId || undefined }
 }
-window.addEventListener('popstate', () => {
+addressController().subscribe(() => {
+  if (shellMoving) return
   navigations.push({ path: location.pathname, entries: history.length, detailShown: detailShown() })
   route()
-})
+}, false)
 
 /* The aside bar's part: the detail viewpart drawn while the store shows it. */
 const aside = document.createElement('div')
@@ -202,6 +198,7 @@ document.head.appendChild(fill)
 window.product = {
   boxSource,
   doorSource,
+  mountedSource,
   page,
   deep,
   calls: () => calls.map(c => ({ ...c })),
@@ -227,7 +224,7 @@ window.product = {
   route: () => ({ page: store.getState().route?.page, resourceId: store.getState().route?.resourceId }),
   /** The shell moved to a page (an address the product did not navigate to itself). */
   goTo(path) {
-    history.pushState({}, '', path)
+    shellMoves(() => history.pushState({}, '', path))
     route()
   },
   /** A row on the server, as a figure saved earlier. */
@@ -250,7 +247,7 @@ window.product = {
       shell.replaceChildren(element)
       document.body.replaceChildren(shell)
     }
-    history.replaceState({}, '', resourceId ? `/figure-modeller/${resourceId}` : '/figure-modeller')
+    shellMoves(() => history.replaceState({}, '', resourceId ? `/figure-modeller/${resourceId}` : '/figure-modeller'))
     store.dispatch({ type: 'UPDATE_PAGE', page: 'figure-modeller', resourceId, params: {} })
     element.lifecycle = { ...(element.lifecycle ?? {}), resourceId }
     element.active = true

package/test/browser/property-section.check.mjs

@@ -26,9 +26,9 @@ const sections = () =>
 describe('sections an app adds', () => {
   test('only for the figures they are for, after the panel\'s own', async () => {
     await page().evaluate(() => harness.show('EQUIPMENT'))
-    assert.deepEqual(await sections(), ['own', 'own', 'own'])
+    assert.deepEqual(await sections(), ['own', 'own'])
     await page().evaluate(() => harness.show('CARRIER'))
-    assert.deepEqual(await sections(), ['own', 'own', 'own', 'carrier'])
+    assert.deepEqual(await sections(), ['own', 'own', 'carrier'])
   })
 
   test('a section changes the figure by the modeller\'s command', async () => {
@@ -41,7 +41,7 @@ describe('sections an app adds', () => {
   test('a section that fails says so in its place; the others stand', async () => {
     await page().evaluate(() => harness.failOn())
     await page().evaluate(() => harness.show('CARRIER'))
-    assert.deepEqual(await sections(), ['own', 'own', 'own', 'carrier', 'broken'])
+    assert.deepEqual(await sections(), ['own', 'own', 'carrier', 'broken'])
     assert.match(await page().evaluate(() => document.querySelector('figure-properties').shadowRoot.querySelector('section[data-section="broken"] [role="alert"]').textContent), /figure\.text\.property-section-failed|no table/)
     await page().evaluate(() => harness.failOff())
   })

package/test/browser/props.check.mjs

@@ -99,7 +99,7 @@ async function tab(name) {
   await read(() => document.querySelector('figure-editor').updateComplete)
 }
 
-describe('the side: six tabs, the view and the history from the bar', () => {
+describe('the side: six tabs, the view and the releases from the bar', () => {
   before(() => mount('rollers'))
 
   test('properties, responsive, motion, capability, data and the verdict -- the six tabs, in that order (user 2026-10-17)', async () => {
@@ -119,13 +119,31 @@ describe('the side: six tabs, the view and the history from the bar', () => {
     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 () => {
+  test('the releases open from 「발행」 beside save, the one way to them, and the view closes for them', async () => {
+    assert.equal(await read(() => document.querySelectorAll('figure-editor')[0].shadowRoot.querySelectorAll('button[bar-overlay=history]').length), 0, 'no history button beside it')
     await press('ox-canvas-bar button[bar-overlay=view]', 'the view button')
-    await press('ox-canvas-bar button[bar-overlay=history]', 'the history button')
+    await press('ox-canvas-bar button[publish]', 'the release 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')
+    await press('ox-canvas-bar button[publish]', 'the release button')
+    assert.equal(await read(() => document.querySelector('figure-editor').shadowRoot.querySelector('div[bar-overlay-panel=history]').getBoundingClientRect().height > 0), false, 'a second press closes it')
+  })
+
+  /* User 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 해주고, 버튼 안에 적절한 아이콘을 추가해주면 혼동되지 않을 것」. */
+  test('save and release: one round shape, one height, an icon inside each', async () => {
+    const look = await read(() => {
+      const bar = document.querySelector('figure-editor').shadowRoot
+      return ['save', 'publish'].map(k => {
+        const b = bar.querySelector(`ox-canvas-bar button[${k}]`)
+        const r = b.getBoundingClientRect()
+        return { height: Math.round(r.height), round: parseFloat(getComputedStyle(b).borderTopLeftRadius) >= r.height / 2, icon: b.querySelector('md-icon')?.textContent.trim() }
+      })
+    })
+    assert.deepEqual(look, [
+      { height: 32, round: true, icon: 'save' },
+      { height: 32, round: true, icon: 'publish' }
+    ])
   })
 })
 
@@ -150,7 +168,7 @@ describe('a part\'s groups in one order, whatever its state', () => {
     await tab('properties')
   })
 
-  test('a fastened part\'s place is one line and 「바꾸기」: no locked cells, no drawing, until it is changed', async () => {
+  test('a fastened part\'s place is one line and 「바꾸기」: no locked cells, no drawing; 「바꾸기」 opens the window, not the panel', async () => {
     await pick('mark')
     await tab('properties')
     const place = () =>
@@ -166,8 +184,11 @@ describe('a part\'s groups in one order, whatever its state', () => {
       })
     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 until(() => !!document.querySelector('figure-fasten-dialog'), [], 'the window')
+    assert.deepEqual(await place(), { sentence: true, change: true, drawing: false, cells: false }, 'the panel still says the result')
+    /* Closed with nothing written; another part chosen and back: one line. */
+    await page().keyboard.press('Escape')
+    await until(() => !document.querySelector('figure-fasten-dialog'), [], 'the window closed')
     await pick('bed')
     await pick('mark')
     assert.equal((await place()).change, true, 'said in one line again')

package/test/browser/screen-page.js

@@ -60,11 +60,16 @@ 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. */
+  /*
+    A block fastened on a base: a part with a fastening to take back, under a figure with no size of its own yet; its
+    base's bottom named as the mounting face, which the figure panel offers to take off.
+  */
   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 = applyFigureAuthoring(a, { kind: 'attach', part: 'top', face: 'bottom', to: { part: 'base', face: 'top' } })
+    a = applyFigureAuthoring(a, { kind: 'declare-occupancy', proposal: proposeFigureOccupancy(a) })
+    return applyFigureAuthoring(a, { kind: 'set-mounting-face', part: 'base', face: 'bottom' })
   },
   /* A conveyor that follows its width, a roller every 200 mm, and the space it takes declared: the one figure stretched. */
   stretch: () => {

package/test/browser/screen.check.mjs

@@ -82,10 +82,14 @@ const tabOn = () => read(() => screenCheck.editor().shadowRoot.querySelector('bu
 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}`
-/** The view settings or the release history, opened from the bar over the work (they were tabs once); left open if open. */
+/*
+  The view settings or the releases, opened from the bar over the work (they were tabs once); left open if open. The
+  releases open from 「발행」, the bar's one way to them (user 2026-10-18).
+*/
+const OVERLAY_BUTTON = { view: 'button[bar-overlay=view]', history: 'button[publish]' }
 async function openOverlay(which) {
-  if (await read(w => screenCheck.editor().shadowRoot.querySelector(`ox-canvas-bar button[bar-overlay=${w}]`)?.getAttribute('aria-pressed') === 'true', which)) return
-  await press(`the ${which} button`, w => screenCheck.editor().shadowRoot.querySelector(`ox-canvas-bar button[bar-overlay=${w}]`), which)
+  if (await read(b => screenCheck.editor().shadowRoot.querySelector(`ox-canvas-bar ${b}`)?.getAttribute('aria-pressed') === 'true', OVERLAY_BUTTON[which])) return
+  await press(`the ${which} button`, b => screenCheck.editor().shadowRoot.querySelector(`ox-canvas-bar ${b}`), OVERLAY_BUTTON[which])
   await until(`${which} open`, w => screenCheck.editor().shadowRoot.querySelector(`div[bar-overlay-panel=${w}]`)?.getBoundingClientRect().height > 0, which)
 }
 /** A row of the parts list, by the part's name. */
@@ -870,39 +874,40 @@ describe('the side panel is found as it was left, per part', () => {
   })
 })
 
-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'))
+describe('the fastening window says whether it changes the fastening the part has or fastens it anew', () => {
+  const applyWords = () => read(() => screenCheck.deep('[apply]').map(b => b.textContent.trim()))
+  /* A chip of the window's list, by its part. */
+  const pressTarget = part => press(`${part} in the list`, part => screenCheck.deep('md-filter-chip').find(o => o.getAttribute('data-value') === part), 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 () => {
+  test('a part fastened to nothing: 「다른 부품에 붙이기」 opens the window; the sentence and what 붙이기 would do once a target is chosen; 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)
+    await until('the window', () => screenCheck.deep('figure-fasten-dialog').length === 1)
     const before = await revision()
-    await (await target()).select('frame')
-    await until('the sentence', () => screenCheck.deep('p[fasten-sentence]').length === 1)
+    await pressTarget('frame')
+    await until('the sentence', () => screenCheck.deep('p[fasten-sentence]').some(p => !p.hasAttribute('hint')))
     await until('what 붙이기 would do', () => screenCheck.deep('[preview-words]').length === 1)
-    assert.equal(await fastenButton(), 1, '붙이기 for a new one')
+    assert.deepEqual((await applyWords()).map(w => w.endsWith('figure.button.fasten')), [true], '붙이기 for a new one')
     assert.equal(await revision(), before, 'nothing done until it is pressed')
   })
 
-  test('a part already fastened: said in one line with 「바꾸기」; opened, no 「새로 붙이기」, no 붙이기 -- another target is taken at once, in one step', async () => {
+  test('a part already fastened: one line with 「바꾸기」; opened, its button says 적용 -- another target tried, nothing written until 적용, then 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('figure-fasten-drawing').length + screenCheck.deep('select').filter(s => s.closest('section[fastening]')).length), 0, 'one line: no drawing, no target to choose')
     await press('change the fastening', () => screenCheck.deep('button[change-fastening]')[0])
-    await until('the drawing', () => screenCheck.deep('figure-fasten-drawing').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 window and its drawings', () => screenCheck.deep('figure-fasten-drawing').length === 2)
+    assert.deepEqual((await applyWords()).map(w => w.endsWith('figure.button.apply')), [true], '적용, not 붙이기')
     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 pressTarget('upper-arm')
+    await until('what 적용 would do', () => screenCheck.deep('[preview-words]').length === 1)
+    assert.equal(await revision(), before, 'nothing written while trying')
+    await press('apply', () => screenCheck.deep('[apply]')[0])
     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')
   })
@@ -982,11 +987,11 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
   /* First 15 minutes (2026-10-16): release was refused for a volume never declared, said only at the foot of the verdict tab. */
   test('what blocks release is said beside 「발행」, with the way out at hand there', async () => {
     const answer = blocked => read(blocked => product.answer('inspectFigureDraft', () => ({ __typename: 'FigureInspection', blocked, findings: blocked ? [alone.finding('occupancy-undeclared')] : [] })), blocked)
-    const bar = () => read(() => [...screenCheck.editor().shadowRoot.querySelectorAll('ox-canvas-bar > button[slot=commit]')].map(b => (b.hasAttribute('bar-overlay') ? 'history' : b.hasAttribute('release-blocked') ? 'blocked' : b.hasAttribute('publish') ? 'publish' : 'save')))
+    const bar = () => read(() => [...screenCheck.editor().shadowRoot.querySelectorAll('ox-canvas-bar > button[slot=commit]')].map(b => (b.hasAttribute('bar-overlay') ? 'overlay' : b.hasAttribute('release-blocked') ? 'blocked' : b.hasAttribute('publish') ? 'publish' : 'save')))
     await answer(true)
     await open('fig-block', 'two', 'probe-block')
     await until('said beside 발행', () => !!screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[release-blocked]'))
-    assert.deepEqual(await bar(), ['history', 'blocked', 'publish', 'save'])
+    assert.deepEqual(await bar(), ['blocked', 'publish', 'save'])
     await press('what blocks release', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[release-blocked]'))
     await until('the list under the bar', () => !!screenCheck.editor().shadowRoot.querySelector('div[release-blockers] li[finding]'))
     assert.equal(await read(() => !!screenCheck.editor().session.revisionNow().asset.occupancy), false)
@@ -994,7 +999,7 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     await press('fit to the parts', () => screenCheck.editor().shadowRoot.querySelector('div[release-blockers] button[act]'))
     await until('the space declared, in one step', () => !!screenCheck.editor().session.revisionNow().asset.occupancy)
     await until('nothing blocks: the word is gone', () => !screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[release-blocked]'))
-    assert.deepEqual(await bar(), ['history', 'publish', 'save'])
+    assert.deepEqual(await bar(), ['publish', 'save'])
     await read(() => product.answer('inspectFigureDraft'))
     await saved()
     await open('fig-a')
@@ -1055,7 +1060,7 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     assert.deepEqual(first, { heading: 'figure.label.group-figure', assigned: true, order: [true, true] })
   })
 
-  test('the verdict tab shows the page\'s verdict, and the bar\'s history button its release history', async () => {
+  test('the verdict tab shows the page\'s verdict, and the bar\'s 「발행」 the releases', async () => {
     const assigned = within =>
       read(w => (w ? screenCheck.editor().shadowRoot.querySelector(w) : screenCheck.shownPanel()).querySelector('slot')?.assignedElements().map(e => ({ tag: e.localName, height: Math.round(e.getBoundingClientRect().height) })), within)
     await pressTab(TAB('verdict'))
@@ -1069,7 +1074,7 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     assert.equal(shown[0].tag, 'figure-history-panel')
     assert.ok(shown[0].height > 0, 'figure-history-panel is shown')
     /* Closed again: it lies over the side, and the checks after this press there. */
-    await press('the history button', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[bar-overlay=history]'))
+    await press('the release button', () => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[publish]'))
   })
 
   test('the verdict tab\'s count is the report\'s, measured by the verdict', async () => {

package/test/browser/section-page.js

@@ -5,39 +5,8 @@
  */
 import './more-open.js'
 import './modeller-page.js'
-import { html, render } from 'lit'
-import { setOpenPopupImplementation } from '@operato/popup'
 import { addFigureBox, addFigurePrimitive, applyFigureAuthoring, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
 
-/*
- * Popups drawn as the layout draws them -- an overlay of their own in the body, the result given when it leaves -- for
- * the section editor's close question: the page has no layout to append it to.
- */
-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
-})
-
 const PALETTE = { 'palette.dark': '#2b2b2b', 'palette.neutral': '#9a9a9a', 'palette.primary': '#477b9e', 'palette.accent': '#f79c40', 'palette.light': '#dddddd' }
 
 function figure(name) {
@@ -203,21 +172,24 @@ Object.assign(window.probe, {
       ends: Object.fromEntries([...root.querySelectorAll('g[end]')].map(g => [g.getAttribute('end'), { text: words(g.querySelector('text')), typed: g.querySelector('text').hasAttribute('typed') }]))
     }
   },
-  /** The fastening drawing as a person sees it: the ways offered and the one on, the faces of the target. */
+  /** The fastening window's drawings as a person sees them: the ways offered and the one on (none drawn when there is one way). */
   fastenDrawing() {
-    const host = deep('figure-fasten-drawing')[0]
-    if (!host) return null
-    const root = host.shadowRoot
+    const hosts = deep('figure-fasten-drawing')
+    if (!hosts.length) return null
+    const how = hosts.find(h => h.show === 'how')?.shadowRoot
     return {
-      modes: [...root.querySelectorAll('button[mode]')].map(b => b.getAttribute('mode')),
-      on: root.querySelector('button[mode][on]')?.getAttribute('mode') ?? null
+      modes: how ? [...how.querySelectorAll('button[mode]')].map(b => b.getAttribute('mode')) : [],
+      on: how?.querySelector('button[mode][on]')?.getAttribute('mode') ?? null
     }
   },
-  /** The labels before the fastening form's lists, and what each holds. */
+  /** The labels before the fastening window's lists, and the questions it asks. */
   fastenForm() {
-    return deep('select')
-      .filter(s => s.previousElementSibling)
-      .map(s => ({ label: words(s.previousElementSibling), value: s.value, options: [...s.options].map(o => ({ value: o.value, text: words(o) })) }))
+    const dialog = deep('figure-fasten-dialog')[0]
+    if (!dialog) return []
+    return [
+      ...[...dialog.shadowRoot.querySelectorAll('h4')].map(h => ({ label: words(h) })),
+      ...deep('select', dialog.shadowRoot).filter(s => s.previousElementSibling).map(s => ({ label: words(s.previousElementSibling), value: s.value }))
+    ]
   },
   /** The page point of one of a part's buttons in the parts list (`remove-part`, ...). */
   partOp(id, op) {