@things-factory/figure-ui 10.1.224 → 10.1.225

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.224",
+  "version": "10.1.225",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "npm run build:server && npm run build:client",
     "test": "FIGURE_FREEZE_COMPILED=1 node --import ./test/resolve-ts-siblings.mjs --test test/*.test.ts",
-    "test:browser": "node --test test/browser/build.check.mjs test/browser/modeller.check.mjs test/browser/modeller-revision.check.mjs test/browser/editing.check.mjs test/browser/links.check.mjs test/browser/section.check.mjs test/browser/screen.check.mjs test/browser/product-page.check.mjs test/browser/parts.check.mjs test/browser/places-mesh.check.mjs test/browser/part-ids.check.mjs test/browser/fix-alignment.check.mjs test/browser/mesh-select.check.mjs test/browser/row-preview.check.mjs test/browser/detail-tabs.check.mjs test/browser/props.check.mjs test/browser/retire.check.mjs test/browser/namespace.check.mjs test/browser/public.check.mjs test/browser/category.check.mjs test/browser/property-section.check.mjs test/browser/list.check.mjs test/browser/item.check.mjs",
+    "test:browser": "node --test test/browser/build.check.mjs test/browser/modeller.check.mjs test/browser/modeller-revision.check.mjs test/browser/editing.check.mjs test/browser/links.check.mjs test/browser/section.check.mjs test/browser/screen.check.mjs test/browser/product-page.check.mjs test/browser/parts.check.mjs test/browser/places-mesh.check.mjs test/browser/part-ids.check.mjs test/browser/fix-alignment.check.mjs test/browser/mesh-select.check.mjs test/browser/row-preview.check.mjs test/browser/detail-tabs.check.mjs test/browser/props.check.mjs test/browser/retire.check.mjs test/browser/namespace.check.mjs test/browser/public.check.mjs test/browser/category.check.mjs test/browser/property-section.check.mjs test/browser/list.check.mjs test/browser/item.check.mjs test/browser/side-panel-sweep.check.mjs",
     "copy:files": "copyfiles -e \"./client/**/*.{ts,js,json}\" -u 1 \"./client/**/*\" dist-client",
     "build:client": "npm run copy:files && npx tsc --p ./client/tsconfig.json",
     "build:server": "npx tsc --p ./server/tsconfig.json",
@@ -48,5 +48,5 @@
     "@things-factory/setting-base": "^10.1.223",
     "three": "^0.185.1"
   },
-  "gitHead": "7edcdca6fc9862973e99048812e22f2aa9b2f9c9"
+  "gitHead": "9929ca76f614ff84bea1f61dabe0e1b7f00cd18a"
 }

package/test/ai-proposal.test.ts

@@ -157,7 +157,7 @@ test('the same new figure\'s card in another tab before the first save makes a s
     })
   const made = [{ kind: 'add-part', part: { id: 'lid', kind: 'box', dimensions: { width: 100, height: 10, depth: 100 } } }] as any[]
   const first = tab()
-  first.startNew()
+  first.startNew({ name: 'New' })
   const detail: FigureApplyDetail = { key: K, steps: made, create: true }
   const here = { ...taker({}), offer: (d: FigureApplyDetail) => (takeFigureOffer(first, d, { onSavedFigure: false, say }), d) }
   assert.equal((await runFigureProposal(detail, here, say)).verdict, 'accepted')
@@ -166,7 +166,7 @@ test('the same new figure\'s card in another tab before the first save makes a s
   const there = {
     ...taker({}),
     async openNew(s: FigureProposalStep[], key?: string) {
-      second.startNew()
+      second.startNew({ name: 'New' })
       second.createUnder(key!)
       second.applyProposal(s, second.read().revision!, second.read().context!, key)
       return { applied: true }

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

@@ -173,6 +173,11 @@ describe('the first save of a new figure', () => {
       return { first: popup.shadowRoot.querySelector('input')?.id, type: popup.shadowRoot.querySelector('#type').value, focused: active?.id }
     })
 
+  test('a new figure is named in the screen\'s words, the tab too (sweep 2026-10-27 U8)', async () => {
+    assert.equal(await read(() => product.page().session.read().name), 'figure.text.new-figure-name')
+    assert.equal(await read(() => product.page().context.title), 'figure.text.new-figure-name')
+  })
+
   test('before it is saved: the type can be written, held by the page, and the release waits', async () => {
     const field = await read(() => { const input = product.page().shadowRoot.querySelector('label[type-field] input'); return input && { disabled: input.disabled } })
     assert.deepEqual(field, { disabled: false })
@@ -242,6 +247,22 @@ describe('opening another figure', () => {
     })
   })
 
+  test('nothing open on the page: its properties say nothing of an empty figure (sweep 2026-10-27 U3)', async () => {
+    await open('a')
+    const empty = await read(async () => {
+      const page = product.page()
+      /* The state a page is in before it is told which figure, and after it is left: the session holds none. */
+      page.session.close()
+      const editor = product.deep('figure-editor')[0]
+      editor.requestUpdate()
+      await editor.updateComplete
+      return editor.shadowRoot.querySelectorAll('section[empty-figure]').length
+    })
+    /* Told another figure, the page opens it again: the checks after this one start from an open page. */
+    await open('b')
+    assert.equal(empty, 0)
+  })
+
   test('the row is emptied first: the type of the one before does not stand while the next one loads', async () => {
     const typeField = () => read(() => product.page().shadowRoot.querySelector('label[type-field] input')?.value)
     await open('a')
@@ -258,6 +279,10 @@ describe('opening another figure', () => {
     await until(() => !!window.letB, 'b asked for')
     await read(() => product.page().updateComplete)
     assert.equal(await typeField(), '')
+    /* Still loading, the figure is not an empty one: no 「add a part」 (sweep 2026-10-27 U3). */
+    await read(() => product.deep('figure-editor')[0].updateComplete)
+    assert.equal(await read(() => product.deep('figure-editor >>> section[empty-figure]').length), 0)
+    assert.equal(await read(() => product.page().context.title), 'figure.label.figure')
     await read(() => window.letB())
     await until(() => product.page().shadowRoot.querySelector('label[type-field] input')?.value === 'type-b', 'b\'s type')
   })

package/test/browser/side-panel-sweep.check.mjs

@@ -0,0 +1,182 @@
+/*
+ * What the modeller sweep of 2026-10-27 found on the side panel and the preview, in a real browser
+ * (operato-figure docs/audits/modeller-ux-sweep-2026-10-27.md, U1 U2 U4 U5 U6 U7): each as a person would meet it -- a
+ * box that reads as a box, a heading nothing is drawn over, a delete that looks like one, the empty animation said in
+ * its own words, a field added by Enter, the preview's values starting in one column and its help in the bar's look.
+ * The page loads no translations, so the words read are i18n keys.
+ *
+ * Run:  node --test test/browser/side-panel-sweep.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('links-page.js'))
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+const source = () => read(() => probe.source())
+const settled = () => read(() => document.querySelector('figure-editor').updateComplete)
+
+async function until(fn, args, what, ms = 8000) {
+  const deadline = Date.now() + ms
+  for (;;) {
+    const got = await read(fn, ...args)
+    if (got) return got
+    if (Date.now() > deadline) assert.fail(`waited for ${what}`)
+    await sleep(50)
+  }
+}
+async function mount(kind, text = null) {
+  await read((kind, text) => harness.mount(kind, text), kind, text)
+  await until(
+    () => {
+      try {
+        return probe.ids().some(id => !!probe.partOnPage(id))
+      } catch {
+        return false
+      }
+    },
+    [],
+    'the figure drawn in 3D',
+    15000
+  )
+}
+async function click(point, what) {
+  assert.ok(point, `${what} is on the page to click`)
+  await page().mouse.click(point.x, point.y)
+  await settled()
+}
+const tab = name => read(l => probe.tab(l), `figure.label.tab-short-${name}`)
+
+/** Every element matching the selector through every shadow root, shown on the page. */
+const DEEP = `(selector => {
+  const deep = (root = document) => [...root.querySelectorAll(selector)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+  return deep().filter(e => e.getBoundingClientRect().height > 0)
+})`
+
+describe('the side panel', () => {
+  before(() => mount('box'))
+
+  test('U1 the capability tab: the item box keeps its size beside its long note', async () => {
+    await click(await tab('capability'), 'the capability tab')
+    /* The note as Korean reads it: words that wrap (the key alone is one word that never does). */
+    const width = await read(DEEP => {
+      eval(DEEP)('label[item] em')[0].textContent = '홀더가 자리에 앉혀 나르는 물건의 모양입니다. 릴 · 트레이 · 매거진. 아이템 타입 표에서 이 피규어를 고를 수 있습니다.'
+      return eval(DEEP)('label[item] > input')[0]?.getBoundingClientRect().width
+    }, DEEP)
+    assert.ok(width >= 12, `the item box is ${width}px wide`)
+  })
+
+  test('U2 scrolled under the heading, the places chips are drawn below it, not over it', async () => {
+    /* A short window, so the panel scrolls. */
+    await page().setViewport({ width: 1400, height: 520 })
+    await click(await read(id => probe.row(id), 'box'), 'the box in the parts list')
+    await click(await tab('capability'), 'the capability tab')
+    const hit = await read(DEEP => {
+      const chips = eval(DEEP)('ox-input-select-buttons[places-by]')[0]
+      const subject = eval(DEEP)('div[subject]')[0]
+      if (!chips || !subject) return 'no chips or no heading'
+      let scroller = chips.parentNode
+      for (;;) {
+        if (!scroller) return 'nothing scrolls'
+        if (scroller instanceof ShadowRoot) scroller = scroller.host
+        else if (scroller instanceof Element && /auto|scroll/.test(getComputedStyle(scroller).overflowY) && scroller.scrollHeight > scroller.clientHeight) break
+        else scroller = scroller.parentNode
+      }
+      const head = subject.getBoundingClientRect()
+      const before = chips.getBoundingClientRect()
+      scroller.scrollTop += before.top - (head.top + head.height / 2) + 4
+      const at = chips.getBoundingClientRect()
+      const x = at.left + Math.min(40, at.width / 2),
+        y = at.top + 6
+      if (y > head.bottom || y < head.top) return `the chips stand at ${Math.round(y)}, the heading ${Math.round(head.top)}..${Math.round(head.bottom)}`
+      let el = document.elementFromPoint(x, y)
+      while (el?.shadowRoot) {
+        const inner = el.shadowRoot.elementFromPoint(x, y)
+        if (!inner || inner === el) break
+        el = inner
+      }
+      for (let n = el; n; n = n.parentNode instanceof ShadowRoot ? n.parentNode.host : n.parentNode) if (n === subject) return 'heading'
+      return el?.tagName.toLowerCase()
+    }, DEEP)
+    await page().setViewport({ width: 1400, height: 900 })
+    assert.equal(hit, 'heading')
+  })
+
+  test('U5 the motion tab: no animation yet is said in its own words, the controls\' words said once', async () => {
+    await click(await tab('motion'), 'the motion tab')
+    const hints = await read(DEEP => eval(DEEP)('p[hint]').map(p => p.textContent.trim()), DEEP)
+    assert.ok(hints.includes('figure.text.no-clips'), hints.join(' | '))
+    assert.equal(hints.filter(h => h === 'figure.text.no-controls').length, 1)
+  })
+
+  test('U6 the data tab: a field name and Enter adds the field', async () => {
+    await click(await tab('data'), 'the data tab')
+    await click(await read(() => look.at('input[aria-label="figure.label.data-name"]')), 'the field name')
+    await page().keyboard.type('speed')
+    await page().keyboard.press('Enter')
+    await settled()
+    await until(() => probe.source().dataInterface?.schema?.some(f => f.name === 'speed'), [], 'the field added')
+    assert.equal((await read(DEEP => eval(DEEP)('input[aria-label="figure.label.data-name"]')[0].value, DEEP)), '')
+  })
+
+  test('U4 a field opened: its delete is the bin, not a cross that reads as close', async () => {
+    await click(await read(() => look.at('button', 'speed')), 'the speed field')
+    const icon = await until(DEEP => eval(DEEP)('button[title="figure.button.remove-data-field"] md-icon')[0]?.textContent.trim(), [DEEP], 'the field opened')
+    assert.equal(icon, 'delete')
+    assert.ok((await source()).dataInterface.schema.some(f => f.name === 'speed'))
+  })
+})
+
+describe('the preview', () => {
+  /* A number and a text, of names far apart in length, each read by a table: the preview gives each a field. */
+  const asset = addFigureBox(createFigureAsset('Probe'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } })
+  asset.dataInterface = {
+    version: 'figure-data-interface-2',
+    schema: [
+      { name: 'A', kind: 'number' },
+      { name: 'CARRIERSTATUS', kind: 'text' }
+    ],
+    bindings: [
+      { id: 'a', accessor: 'A', rule: 'table', lookup: 'ranges', targets: { parts: ['box'] }, table: { '~10': { color: '#ff0000' }, default: { color: '#0000ff' } } },
+      { id: 's', accessor: 'CARRIERSTATUS', rule: 'table', lookup: 'code', targets: { parts: ['box'] }, table: { X: { color: '#00ff00' } } }
+    ]
+  }
+  before(async () => {
+    await mount('box', serializeFigureAsset(asset))
+    await click(await read(() => probe.modeButton('preview')), 'the preview')
+    await until(DEEP => eval(DEEP)('figure-preview')[0]?.shadowRoot?.querySelectorAll('div[clips] input').length === 2, [DEEP], 'the two values in the preview')
+  })
+
+  test('U7 a number\'s field and a text\'s start in one column, whatever the names\' lengths', async () => {
+    const lefts = await read(DEEP => [...eval(DEEP)('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] input')].map(i => Math.round(i.getBoundingClientRect().left)), DEEP)
+    assert.equal(lefts[0], lefts[1], `the fields start at ${lefts.join(' and ')}`)
+  })
+
+  test('U7 the size help\'s choice and button are in the bar\'s look, not the browser\'s grey', async () => {
+    const looks = await read(DEEP => {
+      const root = eval(DEEP)('figure-preview')[0].shadowRoot
+      return ['div[setup] select', 'div[setup] button', 'div[clips] input'].map(s => {
+        const c = getComputedStyle(root.querySelector(s))
+        return { radius: c.borderTopLeftRadius, background: c.backgroundColor }
+      })
+    }, DEEP)
+    assert.deepEqual(looks[0], looks[1])
+    assert.deepEqual(looks[0], looks[2])
+    assert.equal(looks[0].radius, '5px')
+    assert.notEqual(looks[0].background, 'rgb(239, 239, 239)')
+  })
+})

package/test/figure-assistant-surface.test.ts

@@ -95,7 +95,7 @@ test('a new figure keeps its creation id through a new figure\'s proposal and th
       return { id: q.id ?? q.creationId!, source: q.source }
     }
   })
-  session.startNew()
+  session.startNew({ name: 'New' })
   const creationId = session.read().creationId
   assert.match(creationId ?? '', /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/)
   const create: FigureApplyDetail = { key: K1, steps: lid, create: true }

package/test/first-save.test.ts

@@ -47,7 +47,7 @@ function recording() {
 test('타입은 새 피규어를 만드는 저장에만 실린다 — 이미 있는 피규어의 저장은 타입을 보내지 않는다', async () => {
   const { store, requests } = recording()
   const session = createFigureProductSession(store)
-  session.startNew()
+  session.startNew({ name: 'New' })
   await session.save({ type: 'agv-lifter' })
   assert.equal(requests[0]!.type, 'agv-lifter')
   assert.equal(requests[0]!.id, undefined, '만드는 저장')
@@ -61,7 +61,7 @@ test('타입은 새 피규어를 만드는 저장에만 실린다 — 이미 있
 test('타입을 주지 않으면 싣지 않는다 — 서버가 임시 이름을 붙인다', async () => {
   const { store, requests } = recording()
   const session = createFigureProductSession(store)
-  session.startNew()
+  session.startNew({ name: 'New' })
   await session.save()
   assert.equal('type' in requests[0]!, false)
 })

package/test/product-session.test.ts

@@ -28,7 +28,7 @@ test('existing model -> new clears geometry, ID, history and derived state', asy
   const s = createFigureProductSession(store)
   await s.open('A')
   assert.equal(s.read().geometry.length, 1)
-  const v = s.startNew()
+  const v = s.startNew({ name: 'New' })
   assert.equal(v.id, undefined)
   assert.equal(v.geometry.length, 0)
   assert.equal(v.canUndo, false)
@@ -46,7 +46,7 @@ test('late load cannot overwrite another model or a new figure', async () => {
   const p = deferred<FigureProductRecord>(),
     t = createFigureProductSession({ ...store, load: () => p.promise })
   const loading = t.open('A')
-  t.startNew()
+  t.startNew({ name: 'New' })
   p.resolve({ id: 'A', source: source() })
   await loading
   assert.equal(t.read().id, undefined)
@@ -95,10 +95,10 @@ test('save carries exact baseline and acknowledges only matching response', asyn
 test('pending save locks edits/navigation and duplicate create', async () => {
   const p = deferred<FigureProductRecord>(),
     s = createFigureProductSession({ ...store, save: () => p.promise })
-  s.startNew()
+  s.startNew({ name: 'New' })
   const text = s.source(),
     saving = s.save()
-  assert.throws(() => s.startNew())
+  assert.throws(() => s.startNew({ name: 'New' }))
   assert.throws(() => s.undo())
   await assert.rejects(s.save())
   p.resolve({ id: 'new', source: text })
@@ -124,7 +124,7 @@ test('retry after a lost create response reuses the same creation identity', asy
       return { id: q.creationId!, source: q.source }
     }
   })
-  s.startNew()
+  s.startNew({ name: 'New' })
   await assert.rejects(s.save())
   await s.save()
   assert.equal(keys.length, 2)

package/test/proposal-record.test.ts

@@ -67,14 +67,14 @@ test('a save names the proposals its text holds: undone, not; redone, again; und
 test('a new figure opened for a proposal is created under its key; one taken on the open new figure keeps its id', async () => {
   const { store, saves } = server()
   const s = createFigureProductSession(store)
-  s.startNew()
+  s.startNew({ name: 'New' })
   s.createUnder(K1)
   s.applyProposal(lid, s.read().revision!, s.read().context!, K1)
   await s.save({ type: 'LIDDED' })
   assert.equal(saves.at(-1)!.creationId, K1, 'created under the proposal key: taken twice, it meets the first figure')
   assert.deepEqual(saves.at(-1)!.proposalKeys, [K1])
 
-  s.startNew({ discard: true })
+  s.startNew({ discard: true, name: 'New' })
   const own = s.read().creationId
   const detail: FigureApplyDetail = { key: K2, steps: lid, create: true }
   assert.equal(takeFigureOffer(s, detail, { onSavedFigure: false, say }), true)
@@ -82,7 +82,7 @@ test('a new figure opened for a proposal is created under its key; one taken on
   assert.deepEqual({ creationId: saves.at(-1)!.creationId, proposalKeys: saves.at(-1)!.proposalKeys }, { creationId: own, proposalKeys: [K2] })
 
   /* A new figure the person has touched is theirs: the proposal is not put on it (NEW_FIGURE_UNSAVED), its id stays. */
-  s.startNew({ discard: true })
+  s.startNew({ discard: true, name: 'New' })
   s.command({ kind: 'rename', name: 'Mine' } as never)
   assert.throws(() => s.createUnder(K2))
   /* Nor on a saved one. */

package/test/revert-keeping.test.ts

@@ -50,7 +50,7 @@ test('the source a revert expects is what the server is confirmed to hold -- not
       return { id: q.id ?? 'a', source: row }
     }
   })
-  session.startNew()
+  session.startNew({ name: 'New' })
   assert.equal(session.confirmedSource(), undefined, 'nothing saved: nothing to revert over')
   await session.open('a')
   const loaded = row

package/translations/en.json

@@ -640,6 +640,7 @@
   "figure.label.controls": "Controls",
   "figure.text.controls-explained": "A board or a connection sets these values to pose the figure. Move a slider to try one.",
   "figure.text.no-controls": "No controls yet. Adding a motion to a part makes one.",
+  "figure.text.no-clips": "No motion to play yet.",
   "figure.button.keep-pose": "Keep this pose as the default",
   "figure.label.control-name": "Name",
   "figure.text.control-starts-at": "Starts at {value} {unit} when placed on a board.",

package/translations/es.json

@@ -640,6 +640,7 @@
   "figure.label.controls": "Controles",
   "figure.text.controls-explained": "Un tablero o una conexión define estos valores para dar postura a la figura. Mueva un control deslizante para probar uno.",
   "figure.text.no-controls": "Aún no hay controles. Al añadir un movimiento a una pieza se crea uno.",
+  "figure.text.no-clips": "Todavía no hay movimientos para reproducir.",
   "figure.button.keep-pose": "Mantener esta postura como predeterminada",
   "figure.label.control-name": "Nombre",
   "figure.text.control-starts-at": "Empieza en {value} {unit} al colocarla en un tablero.",

package/translations/ja.json

@@ -640,6 +640,7 @@
   "figure.label.controls": "操作値",
   "figure.text.controls-explained": "ボードや連携がこの値を変えて図形の姿勢を動かします。スライダーで試せます。",
   "figure.text.no-controls": "操作値はまだありません。部品の「動き」で動きを追加すると作られます。",
+  "figure.text.no-clips": "再生する動きがありません。",
   "figure.button.keep-pose": "今の姿勢を既定にする",
   "figure.label.control-name": "名前",
   "figure.text.control-starts-at": "ボードに置くと {value} {unit} から始まります。",

package/translations/ko.json

@@ -640,6 +640,7 @@
   "figure.label.controls": "조작값",
   "figure.text.controls-explained": "보드나 연결이 이 값을 바꿔 피규어의 자세를 움직입니다. 슬라이더로 움직여 볼 수 있습니다.",
   "figure.text.no-controls": "조작값이 없습니다. 부품의 「움직임」에서 움직임을 추가하면 생깁니다.",
+  "figure.text.no-clips": "재생할 움직임이 없습니다.",
   "figure.button.keep-pose": "지금 자세를 기본으로",
   "figure.label.control-name": "이름",
   "figure.text.control-starts-at": "보드에 놓이면 {value} {unit} 에서 시작합니다.",

package/translations/ms.json

@@ -640,6 +640,7 @@
   "figure.label.controls": "Kawalan",
   "figure.text.controls-explained": "Papan atau sambungan menetapkan nilai ini untuk menggerakkan rajah. Gerakkan peluncur untuk mencuba.",
   "figure.text.no-controls": "Belum ada kawalan. Menambah gerakan pada bahagian akan menciptanya.",
+  "figure.text.no-clips": "Belum ada gerakan untuk dimainkan.",
   "figure.button.keep-pose": "Jadikan pose ini lalai",
   "figure.label.control-name": "Nama",
   "figure.text.control-starts-at": "Bermula pada {value} {unit} apabila diletakkan pada papan.",

package/translations/zh.json

@@ -640,6 +640,7 @@
   "figure.label.controls": "控制值",
   "figure.text.controls-explained": "看板或连接通过设置这些值来改变图形的姿态。拖动滑块即可试用。",
   "figure.text.no-controls": "还没有控制值。在部件的“运动”中添加运动即可生成。",
+  "figure.text.no-clips": "还没有可播放的动作。",
   "figure.button.keep-pose": "将当前姿态设为默认",
   "figure.label.control-name": "名称",
   "figure.text.control-starts-at": "放到看板上时从 {value} {unit} 开始。",