@things-factory/figure-ui 10.1.174 → 10.1.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.174",
+  "version": "10.1.176",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -41,11 +41,11 @@
     "@operato/slot-layout-editor": "^10.29.25",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/ai-assistant": "^10.1.170",
-    "@things-factory/figure-service": "^10.1.172",
-    "@things-factory/figure-viewer": "^10.1.174",
-    "@things-factory/setting-base": "^10.1.167",
+    "@things-factory/ai-assistant": "^10.1.176",
+    "@things-factory/figure-service": "^10.1.176",
+    "@things-factory/figure-viewer": "^10.1.176",
+    "@things-factory/setting-base": "^10.1.176",
     "three": "^0.185.1"
   },
-  "gitHead": "501a2ab7dfcda5cf78e2408bb4e914cac902349d"
+  "gitHead": "24928f127d73de0e9946423bd4c3295f54cce03d"
 }

package/test/browser/acceptance-page.js

@@ -214,7 +214,8 @@ async function start() {
   }
   const properties = document.createElement('figure-properties')
   properties.slot = 'figure'
-  const keep = () => (properties.source = editor.session.source())
+  /* As the modeller page gives it: the revision on screen (it gave the source, which the panel no longer reads -- N6). */
+  const keep = () => (properties.revision = editor.session.revisionNow())
   keep()
   editor.addEventListener('changed', keep)
   /* The figure panel's commands, as the modeller page runs them: one step of the session's history. */

package/test/browser/build.mjs

@@ -40,6 +40,14 @@ for (const signal of ['SIGINT', 'SIGTERM'])
  * `standIns` maps a module the page would import to a file beside this one: for a module that cannot run here (the
  * assistant dock needs the whole app's tool bar), a stand-in that records what the product asked of it.
  */
+/*
+  Packages that must stand once on a page: what defines custom elements (lit, the @operato and @material elements) and
+  what holds one state (i18next). A sibling checkout linked into node_modules for local work -- the operato
+  webcomponents, 2026-10-17 -- brought its own @operato/i18n, the page defined ox-i18n twice and stopped before any
+  check could start. Each is taken from this checkout's node_modules, whoever imports it.
+*/
+const ONE_COPY = id => /^(lit|lit-html|lit-element|@lit\/|@lit-labs\/|i18next|@operato\/|@material\/)/.test(id)
+
 export async function buildPage(page = 'modeller-page.js', { standIns = {} } = {}) {
   /*
     The real path: on macOS the temp dir is a link (/var -> /private/var). A module named both through
@@ -87,7 +95,7 @@ export async function buildPage(page = 'modeller-page.js', { standIns = {} } = {
         }
       },
       replace({ preventAssignment: true, values: { 'process.env.NODE_ENV': JSON.stringify('production') } }),
-      nodeResolve({ browser: true, modulePaths: [join(PACKAGE, 'node_modules'), join(ROOT, 'node_modules')] }),
+      nodeResolve({ browser: true, modulePaths: [join(PACKAGE, 'node_modules'), join(ROOT, 'node_modules')], rootDir: PACKAGE, dedupe: ONE_COPY }),
       commonjs()
     ]
   })

package/test/browser/links.check.mjs

@@ -131,6 +131,12 @@ async function press(selector, text, what = text ?? selector) {
     text
   )
   assert.ok(await element.evaluate(e => !!e), `${what} is on the page`)
+  /*
+    In the middle of the panel first, as a hand scrolls to what it presses: brought only just into view, at the panel's
+    top, it lay under the panel's sticky head and the press fell there (2026-10-17, the leaf's fasten-start once the
+    rows were tightened).
+  */
+  await element.evaluate(e => e.scrollIntoView({ block: 'center' }))
   await element.click()
   await settled()
 }

package/test/browser/props.check.mjs

@@ -36,8 +36,8 @@ async function until(fn, args, what, ms = 8000) {
     await sleep(50)
   }
 }
-async function mount(kind) {
-  await read(kind => harness.mount(kind, null), kind)
+async function mount(kind, templates = []) {
+  await read((kind, templates) => harness.mount(kind, null, templates), kind, templates)
   await until(
     () => {
       try {
@@ -172,6 +172,11 @@ describe('a group\'s 「⋯」: its rarer actions, by the mouse or the keyboard'
     await until(() => document.activeElement?.localName === 'ox-popup-menu', [], 'the menu open, with the focus')
     const items = await read(() => [...document.querySelectorAll('ox-popup-menu[active] ox-popup-menuitem')].map(i => i.getAttribute('label')))
     assert.deepEqual(items, ['figure.button.detach'])
+    /*
+      An item can take the focus once it has drawn (ox-popup-menuitem sets its tabindex in firstUpdated); an arrow before
+      that leaves the focus on the menu. A hand is never that quick: one in five runs here was (2026-10-17).
+    */
+    await until(() => !!document.querySelector('ox-popup-menu[active] ox-popup-menuitem[tabindex]'), [], 'the item ready')
     await page().keyboard.press('ArrowDown')
     /* The item takes the focus on the menu's next update; Enter goes to it from then. */
     await until(() => document.activeElement?.localName === 'ox-popup-menuitem', [], 'the item chosen')
@@ -227,15 +232,69 @@ describe('the parts panel stands at the side\'s heights (2026-10-16)', () => {
   before(() => mount('rollers'))
 
   test('the detail level is one height with the side\'s fields, and the palette\'s tiles one height with each other', async () => {
+    await pick('bed')
     const heights = await read(() => {
       const parts = document.querySelector('figure-editor').shadowRoot.querySelector('figure-parts').shadowRoot
       const h = e => Math.round(e.getBoundingClientRect().height)
       const tiles = [...parts.querySelectorAll('div[palette] button[shape]:not([import])')].map(h)
       return { level: h(parts.querySelector('div[level] select')), tiles: [...new Set(tiles)], count: tiles.length, import: h(parts.querySelector('button[shape][import]')) }
     })
-    assert.equal(heights.level, 30, 'the detail level select')
+    const side = await read(() => Math.round(document.querySelector('figure-editor').shadowRoot.querySelector('input[name-field]')?.getBoundingClientRect().height ?? 0))
+    assert.ok(side > 0, 'a side field to measure against')
+    assert.equal(heights.level, side, 'the detail level select, one height with the side\'s fields')
     assert.ok(heights.count >= 9, `the starting shapes: ${heights.count}`)
     assert.equal(heights.tiles.length, 1, `one tile height: ${heights.tiles}`)
-    assert.equal(heights.import, 30, 'the file import on one line, its own row')
+    assert.equal(heights.import, side, 'the file import on one line, its own row, at the fields\' height')
+  })
+
+  /* A static guard sees the sizes written down; an icon with none stands at md-icon's own 24 (the recipe catalog's did). */
+  test('every icon the modeller shows stands in one of the three sizes, the ones with no size of their own too', async () => {
+    /* With a template the parts panel offers the recipe catalog -- the button whose icon had no size. */
+    await mount('rollers', [{ name: 'probe-template', target: 'part' }])
+    assert.ok(await read(() => !!document.querySelector('figure-editor').shadowRoot.querySelector('figure-parts').shadowRoot.querySelector('button[recipe-catalog]')), 'the recipe catalog offered')
+    const sizes = await read(() => {
+      const all = []
+      const walk = root => { for (const e of root.querySelectorAll('*')) { all.push(e); if (e.shadowRoot) walk(e.shadowRoot) } }
+      walk(document.querySelector('figure-editor').shadowRoot)
+      const icons = all.filter(e => e.localName === 'md-icon' && e.checkVisibility() && e.getBoundingClientRect().width > 0)
+      return icons.map(e => `${Math.round(e.getBoundingClientRect().width)} ${e.textContent.trim()}`)
+    })
+    assert.ok(sizes.length > 20, `icons seen: ${sizes.length}`)
+    assert.deepEqual(sizes.filter(s => !['16', '18', '20'].includes(s.split(' ')[0])), [])
   })
 })
+
+describe('a label and its field on one line, the field a line not a box (user 2026-10-17)', () => {
+  before(() => mount('rollers'))
+
+  /* Every visible label beside the control after it: the field's row, not the row above. */
+  const rows = () =>
+    read(() => {
+      const all = []
+      const walk = root => { for (const e of root.querySelectorAll('*')) { all.push(e); if (e.shadowRoot) walk(e.shadowRoot) } }
+      walk(document.querySelector('figure-editor').shadowRoot.querySelector('div[panel]:not([off])'))
+      const out = []
+      for (const field of all.filter(e => e.matches?.('div[field], div[inline-field], div[form]') && e.checkVisibility())) {
+        const label = field.querySelector(':scope > label, :scope > span')
+        const control = field.querySelector(':scope > input, :scope > select, :scope > div[swatches], :scope > div[row]')
+        if (!label || !control || !label.checkVisibility() || !control.checkVisibility()) continue
+        const a = label.getBoundingClientRect(), b = control.getBoundingClientRect()
+        out.push({ label: label.textContent.trim().slice(0, 20), sameLine: a.top < b.bottom && b.top < a.bottom, leftOf: a.right <= b.left + 1 })
+      }
+      const boxed = all.filter(e => e.matches?.('input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select') && e.checkVisibility() && !e.closest('div[cell]'))
+        .map(e => { const s = getComputedStyle(e); return { top: s.borderTopWidth, left: s.borderLeftWidth, bottom: s.borderBottomWidth } })
+      return { out, boxed }
+    })
+
+  /* The figure's own group is the modeller page's (figure-properties), not this page's: its rows are checked in screen.check. */
+  for (const part of ['bed', 'roller']) {
+    test(`${part}: every label beside its field, every field a line`, async () => {
+      await pick(part)
+      const { out, boxed } = await rows()
+      assert.ok(out.length >= 2, `rows read: ${out.length}`)
+      assert.deepEqual(out.filter(r => !r.sameLine || !r.leftOf), [], 'labels on their field\'s line, to its left')
+      assert.ok(boxed.length > 0, 'fields read')
+      assert.deepEqual(boxed.filter(b => b.top !== '0px' || b.left !== '0px' || b.bottom !== '1px'), [], 'only the line under it')
+    })
+  }
+})

package/test/browser/screen.check.mjs

@@ -1008,6 +1008,28 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     }
   })
 
+  /* The figure's own group in the side's one-line rows (user 2026-10-17): the identifier, the name, where it stands. */
+  test('the figure panel\'s labels stand beside their fields, the identifier\'s too, each field a line', async () => {
+    await pressTab(TAB('properties'))
+    const rows = await read(() => {
+      const properties = screenCheck.deep('figure-properties')[0]
+      const out = []
+      const type = properties.querySelector('label[type-field]')
+      const pairs = [[type?.querySelector('span'), type?.querySelector('input, code')]]
+      for (const field of properties.shadowRoot.querySelectorAll('div[field]')) pairs.push([field.querySelector(':scope > label'), field.querySelector(':scope > input, :scope > select, :scope > div[row]')])
+      for (const [label, control] of pairs) {
+        if (!label || !control || !label.checkVisibility() || !control.checkVisibility()) continue
+        const a = label.getBoundingClientRect(), b = control.getBoundingClientRect()
+        const line = control.matches('input, select') ? getComputedStyle(control) : null
+        out.push({ label: label.textContent.trim(), sameLine: a.top < b.bottom && b.top < a.bottom, leftOf: a.right <= b.left + 1, box: line ? line.borderTopWidth !== '0px' || line.borderLeftWidth !== '0px' : false })
+      }
+      return out
+    })
+    assert.ok(rows.length >= 3, `rows read: ${rows.map(r => r.label)}`)
+    assert.deepEqual(rows.filter(r => !r.sameLine || !r.leftOf), [], 'labels on their field\'s line, to its left')
+    assert.deepEqual(rows.filter(r => r.box), [], 'fields drawn as a line, not a box')
+  })
+
   test('the figure\'s type is the first field of the figure panel, under its heading', async () => {
     await pressTab(TAB('properties'))
     const first = await read(() => {

package/test/browser/serve-acceptance.mjs

@@ -24,7 +24,8 @@ import { buildPage } from './build.mjs'
 const HERE = dirname(fileURLToPath(import.meta.url))
 const bundle = await buildPage('acceptance-page.js')
 const dir = dirname(bundle)
-const ko = readFileSync(resolve(HERE, '../../translations/ko.json'))
+/* The figure panel's words are figure-viewer's: both packages' Korean, as the app loads every module's. */
+const ko = Buffer.from(JSON.stringify({ ...JSON.parse(readFileSync(resolve(HERE, '../../../figure-viewer/translations/ko.json'), 'utf-8')), ...JSON.parse(readFileSync(resolve(HERE, '../../translations/ko.json'), 'utf-8')) }))
 const APP = resolve(process.env.OPERATO_APP ?? resolve(HERE, '../../../../../../operato-application/packages/operato-figure'))
 /* The builder's ThemeOverridePlugin, run from the app root so its module order is the app's. */
 const themeFiles = JSON.parse(