@things-factory/figure-ui 10.1.181 → 10.1.183

package/test/browser/product-page.js

@@ -17,8 +17,8 @@ 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'
 
@@ -129,32 +129,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 +136,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 +157,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')
@@ -227,7 +214,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 +237,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/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.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) {

package/test/browser/section.check.mjs

@@ -521,40 +521,32 @@ describe('the inside\'s drawing in the 단면 group', () => {
   })
 })
 
-describe('the fastening drawing in the fastening form', () => {
+describe('the fastening drawing in the fastening window', () => {
   const labels = () => read(() => probe.fastenForm().map(s => s.label))
-  const target = () => read(() => probe.fastenForm().find(s => s.label === 'figure.label.target-part'))
-  /* A fastening the part has is said in one line; 「바꾸기」 opens the drawing (chief architect 2026-10-16). */
-  const change = () => press('button[change-fastening]')
+  const targets = () => read(() => probe.fastenTargets())
+  /* A fastening the part has is said in one line; 「바꾸기」 opens the window on it (user 2026-10-17). */
+  const change = async () => {
+    await press('button[change-fastening]')
+    await until(() => !!probe.fastenTargets(), 'the fastening window')
+  }
 
-  test('the part\'s own face and the facing are not asked: the target, its face and how are drawn', async () => {
+  test('the part\'s own face and the facing are not asked: what, which face and how, the face and the way drawn', async () => {
     await mount('arm')
     await pick('forearm')
     await change()
     const asked = await labels()
-    assert.ok(asked.includes('figure.label.target-part'))
+    assert.deepEqual(asked.slice(0, 3), ['figure.label.fasten-what', 'figure.label.fasten-face-on-part', 'figure.label.fasten-how'])
     assert.ok(!asked.includes('figure.label.my-face') && !asked.includes('figure.label.facing'), `asked: ${asked}`)
     assert.ok(await read(() => !!probe.fastenDrawing()), 'the drawing in their place')
   })
 
-  test('a fastened part: a face of the target pressed is one step', async () => {
+  test('a fastened part: a face of the target pressed, flush pressed, the footprint dragged -- tried, nothing written', async () => {
     const start = await state()
     const was = await read(() => probe.fastening('forearm'))
     const face = was.body0.face === 'front' ? 'right' : 'front'
     await press(`[face="${face}"]`, { within: 'figure-fasten-drawing' })
-    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
-    assert.equal((await read(() => probe.fastening('forearm'))).body0.face, face)
-  })
-
-  test('a fastened part: flush pressed is one step, and the drawing shows it', async () => {
-    const start = await state()
     await press('button[mode="flush"]', { within: 'figure-fasten-drawing' })
-    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
-    assert.equal(await read(() => probe.fastenMode()), 'flush')
-  })
-
-  test('a fastened part: the footprint dragged on the face and let go is one step', async () => {
-    const start = await state()
+    await until(() => probe.fastenMode() === 'flush', 'the drawing shows flush')
     const foot = await element('g[footprint] rect', { within: 'figure-fasten-drawing' })
     const at = await foot.evaluate(e => {
       e.scrollIntoView({ block: 'center' })
@@ -565,25 +557,46 @@ describe('the fastening drawing in the fastening form', () => {
     await page().mouse.down()
     for (let i = 1; i <= 5; i++) await page().mouse.move(at.x + 6 * i, at.y)
     await page().mouse.up()
+    await sleep(300)
+    assert.equal((await state()).revision, start.revision, 'nothing written while trying')
+    assert.deepEqual(await read(() => probe.fastening('forearm')), was)
+  })
+
+  test('a fastened part: 적용 writes all of it as one step', async () => {
+    const start = await state()
+    const was = await read(() => probe.fastening('forearm'))
+    const face = was.body0.face === 'front' ? 'right' : 'front'
+    await press('[apply]', { within: 'figure-fasten-dialog' })
     await until(r => probe.state().revision === r + 1, 'one step', start.revision)
     await sleep(300)
     assert.equal((await state()).revision, start.revision + 1, 'and only one')
+    const now = await read(() => probe.fastening('forearm'))
+    assert.deepEqual([now.body0.face, now.origin?.facing], [face, 'flush'])
   })
 
   test('fastened to the plane: the plane is named by the placement, chosen, and set on only', async () => {
     await mount('rollers')
     await pick('bed')
     await change()
-    const list = await target()
-    assert.equal(list.value, '__plane')
-    assert.equal(list.options.find(o => o.value === '__plane').text, 'figure.label.resize-place-floor')
+    const list = await targets()
+    const plane = list.find(t => t.target === '__plane')
+    assert.deepEqual([plane.selected, plane.text], [true, 'figure.label.resize-place-floor'])
+    assert.equal((await labels())[1], 'figure.label.fasten-face-on-plane', 'the face asked on the floor, not of a part')
     assert.deepEqual((await read(() => probe.fastenDrawing())).modes, [], 'one way only: no choice offered')
   })
 
+  /* The window is a popup over the work: closed, nothing written, before another part is picked. */
+  const cancel = async () => {
+    await press('[cancel]', { within: 'figure-fasten-dialog' })
+    await until(() => !probe.fastenTargets(), 'the window closed')
+  }
+
   test('a part that turns in place may have its centre on the face; a part that does not, not', async () => {
+    await cancel()
     await pick('roller')
     await change()
     assert.deepEqual((await read(() => probe.fastenDrawing())).modes, ['meet', 'flush', 'centre'])
+    await cancel()
     await pick('mark')
     await change()
     assert.deepEqual((await read(() => probe.fastenDrawing())).modes, ['meet', 'flush'])
@@ -592,19 +605,15 @@ describe('the fastening drawing in the fastening form', () => {
   test('a new fastening waits for 붙이기; the part\'s own face follows the target\'s face and how', async () => {
     await mount('door')
     await pick('leaf')
-    await press('button[act]', { has: 'figure.button.fasten-start' })
-    await until(() => probe.fastenForm().some(s => s.label === 'figure.label.target-part'), 'the target asked')
-    const targetSelect = 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
-    })
-    await targetSelect.select('frame')
+    await press('button[fasten-start]')
+    await until(() => !!probe.fastenTargets(), 'the window')
+    await press('md-filter-chip[data-value="frame"]', { within: 'figure-fasten-dialog' })
     await until(() => !!probe.fastenDrawing(), 'the fastening drawing')
     const start = await state()
     await press('[face="front"]', { within: 'figure-fasten-drawing' })
     await sleep(300)
     assert.equal((await state()).revision, start.revision, 'nothing sent before 붙이기')
-    await press('button[act]', { text: 'linkfigure.button.fasten' })
+    await press('[apply]', { within: 'figure-fasten-dialog', has: 'figure.button.fasten' })
     await until(r => probe.state().revision === r + 1, 'one step', start.revision)
     const joint = await read(() => probe.fastening('leaf'))
     assert.deepEqual(joint.body0, { part: 'frame', face: 'front' })

package/test/fasten-form.test.ts

@@ -0,0 +1,77 @@
+/*
+ * The fastening as it is chosen in the window (`fasten-form.ts`): opened on what the part has, aimed, changed by the
+ * drawing, and the one attach command worked out from it -- the command the window applies, its preview shows and the
+ * panel's 「정렬 고치기」 sends.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { addFigureBox, applyFigureAuthoring, createFigureAsset } from '@hatiolab/figure-model'
+import type { FigureAsset } from '@hatiolab/figure-model'
+
+import { aimFasten, fastenChanged, fastenDetailWordsOf, fastenFormOf, fastenPlanOf, fastenSentenceOf, fastenTargetsOf, freshFasten } from '../client/modeller/fasten-form.ts'
+import { revisionOf } from './revision-of.ts'
+
+const box = (asset: FigureAsset, id: string, [x, y, z]: number[], at = [0, 0, 0]) => addFigureBox(asset, { id, size: { x, y, z }, position: { x: at[0]!, y: at[1]!, z: at[2]! } })
+const fasten = (asset: FigureAsset, part: string, to: string, more = {}) =>
+  applyFigureAuthoring(asset, { kind: 'attach', part, face: 'bottom', to: to === 'plane' ? { plane: 'mounting-plane' } : { part: to, face: 'top' }, ...more } as never)
+
+/* A frame on the floor, a roller on the frame 300 mm off its centre, a loose lid beside them. */
+function conveyor() {
+  let a = fasten(box(createFigureAsset('Conveyor'), 'frame', [2000, 100, 600], [0, 50, 0]), 'frame', 'plane')
+  a = fasten(box(a, 'roller', [60, 60, 560], [300, 130, 0]), 'roller', 'frame', { align: { x: { mm: 300 } } })
+  return revisionOf(box(a, 'lid', [100, 20, 100], [1500, 10, 0]))
+}
+const say = (key: string, params: Record<string, string> = {}) => `${key}(${Object.entries(params).map(([k, v]) => `${k}=${v}`).join(',')})`
+
+test('opened on what the part has; a loose part opens on nothing chosen', () => {
+  const r = conveyor()
+  const own = fastenFormOf(r, 'roller')
+  assert.deepEqual([own.target, own.targetFace, own.toPlane, own.align.x, own.alignMm.x], ['frame', 'top', false, 'mm', 300])
+  assert.deepEqual(fastenFormOf(r, 'lid'), freshFasten())
+  assert.equal(fastenPlanOf(r, 'lid', fastenFormOf(r, 'lid')).action, undefined, 'nothing to apply until something is chosen')
+})
+
+test('the one it has, unchanged, comes to the attach that replaces it with the same place across the face', () => {
+  const r = conveyor()
+  const plan = fastenPlanOf(r, 'roller', fastenFormOf(r, 'roller'))
+  assert.deepEqual(plan.action, { kind: 'attach', part: 'roller', face: 'bottom', to: { part: 'frame', face: 'top' }, facing: 'meet', twist: 0, align: { x: { mm: 300 } }, replace: true })
+  assert.deepEqual(plan.face, { part: 'frame', face: 'top' }, 'the face it meets, lit while tried')
+  assert.equal(fastenSentenceOf('roller', fastenFormOf(r, 'roller'), plan, '바닥', say), 'figure.text.fasten-sentence-meet(part=roller,face=figure.label.face-bottom(),to=frame의 figure.label.face-top())')
+})
+
+test('aimed at a part, the loose lid keeps its place across the face; aimed at the plane, nothing is said of a part face', () => {
+  const r = conveyor()
+  const onFrame = aimFasten(r, 'lid', fastenFormOf(r, 'lid'), { part: 'frame' })
+  assert.deepEqual([onFrame.target, onFrame.toPlane, onFrame.align.x, onFrame.alignMm.x], ['frame', false, 'mm', 1500])
+  const plan = fastenPlanOf(r, 'lid', onFrame)
+  assert.equal((plan.action as { replace: boolean }).replace, false, 'a new fastening')
+  const onPlane = fastenPlanOf(r, 'lid', aimFasten(r, 'lid', onFrame, { plane: true }))
+  assert.deepEqual((onPlane.action as { to: unknown }).to, { plane: 'mounting-plane' })
+  assert.equal(onPlane.face, undefined)
+})
+
+test('the drawing\'s changes: another face aims again, the way, the gap, a place across the face', () => {
+  const r = conveyor()
+  let f = fastenFormOf(r, 'roller')
+  f = fastenChanged(r, 'roller', f, { mode: 'flush' })
+  assert.equal(f.facing, 'flush')
+  f = fastenChanged(r, 'roller', f, { gap: 40 })
+  assert.deepEqual([f.gap, f.gapKept], [40, undefined])
+  f = fastenChanged(r, 'roller', f, { axis: 'x', how: 'max' })
+  assert.equal(f.align.x, 'max')
+  assert.deepEqual(fastenDetailWordsOf(f, say), ['figure.text.fasten-summary-gap(mm=40)'])
+  const action = fastenPlanOf(r, 'roller', f).action as { facing: string; gap: number; align: unknown }
+  assert.deepEqual([action.facing, action.gap, action.align], ['flush', 40, { x: 'max' }])
+  f = fastenChanged(r, 'roller', f, { targetFace: 'front' })
+  assert.equal(fastenPlanOf(r, 'roller', f).targetFace, 'front')
+})
+
+test('the target list: every other part, the one hanging from this part listed as a loop', () => {
+  const r = conveyor()
+  assert.deepEqual(fastenTargetsOf(r, 'frame'), [
+    { part: 'roller', loops: true },
+    { part: 'lid', loops: false }
+  ])
+  assert.deepEqual(fastenTargetsOf(r, 'lid').map(t => t.part), ['frame', 'roller'])
+})

package/test/fasten-geometry.test.ts

@@ -87,6 +87,8 @@ test('the drawing\'s two names do not lie over each other (user 2026-10-16: 「r
   assert.deepEqual(thin.face, { x: 20, y: 55 })
   assert.equal(thin.part.inside, false)
   assert.ok(thin.part.y > 63 + 84 || thin.part.y < 63, 'outside the part')
+  /* As tall as the face, almost: under the part is the face's edge, and the name goes under that line (2026-10-18). */
+  assert.ok(thin.part.y - 11 >= face.y + face.h + 2, `clear of the face's edge: ${thin.part.y}`)
   /* A wide block: its name in it. */
   const wide = fastenLabelsOf(face, { x: 120, y: 80, w: 100, h: 40 }, 'lid', 180)
   assert.deepEqual(wide.part, { x: 170, y: 104, inside: true })

package/test/first-minute.test.ts

@@ -52,11 +52,14 @@ test('the start card and the figure panel choose the placement as the figure\'s
 })
 
 /* B.1 and the designer's items (2026-09-27): each target's panel is found as it was left; the fastening form says which it is. */
-test('the fastening form says whether it edits the current relation or fastens anew', () => {
-  /* Anew is said, the one it has changed at once, 붙이기 only for a new one: the browser check's (test/browser/screen.check.mjs). Here, the words. */
+test('the fastening window says by its button whether it changes the one the part has or fastens anew', () => {
+  /* 붙이기 for a new one, 적용 for the one it has, nothing more said: the browser check's (test/browser/screen.check.mjs). Here, the words. */
   const ko = JSON.parse(read('../translations/ko.json'))
-  assert.equal(ko['figure.text.fasten-new'], '새로 붙이기')
-  assert.equal(ko['figure.button.fasten-update'], undefined)
+  assert.equal(ko['figure.button.fasten'], '붙이기')
+  assert.equal(ko['figure.button.apply'], '적용')
+  assert.equal(ko['figure.text.fasten-new'], undefined)
+  /* The questions point at the result sentence's pieces: which part, which of its faces, how it is set there (user 2026-10-18). */
+  assert.deepEqual(['figure.label.fasten-what', 'figure.label.fasten-face-on-part', 'figure.label.fasten-face-on-plane', 'figure.label.fasten-how'].map(k => ko[k]), ['어느 부품에', '{part}의 어느 면에', '{plane}의 어디에', '어떻게 놓을지'])
 })
 
 test('a measure that follows something says what, where the row once said 「다른 규칙에 연결됨」 (user 2026-10-16)', () => {

package/translations/en.json

@@ -530,7 +530,6 @@
   "figure.label.fastened-to": "fastened to",
   "figure.label.not-fastened": "not fastened",
   "figure.label.my-face": "my face",
-  "figure.label.target-part": "target part",
   "figure.label.target-face": "target face",
   "figure.label.stands-on-plane": "stand on the mounting plane",
   "figure.label.facing-meet": "faces meet",
@@ -560,6 +559,10 @@
   "figure.text.preview-face-unknown": "This face cannot be shown on the canvas.",
   "figure.text.target-would-loop": "{part} — attached to {mine}, cannot be chosen",
   "figure.label.fasten-detail": "Details",
+  "figure.label.fasten-what": "Which part",
+  "figure.label.fasten-face-on-part": "Which face of {part}",
+  "figure.label.fasten-face-on-plane": "Where on the {plane}",
+  "figure.label.fasten-how": "How it sits",
   "figure.label.facing": "How faces meet",
   "figure.text.fasten-summary-gap": "gap {mm} mm",
   "figure.text.fasten-summary-gap-worked-out": "gap worked out by a formula",
@@ -877,10 +880,8 @@
   "figure.button.show-model-settings": "Show model settings",
   "figure.text.new-figure-name": "New figure",
   "figure.text.fasten-editing": "Editing the current attachment: its {face} on {target}",
-  "figure.text.fasten-new": "Attach anew",
   "figure.text.fasten-start": "Attach this part to a face on another part so they keep their relationship when either changes.",
   "figure.button.fasten-start": "Attach to another part",
-  "figure.label.target-part-placeholder": "Choose a part",
   "figure.text.fasten-target-first": "Choose the part to attach to first.",
   "figure.text.fasten-edit-on-plane": "This part is connected to the model's placement reference. Detach it before attaching it to another part.",
   "figure.button.align-to-floor": "set on the floor",