@things-factory/figure-ui 10.1.81 → 10.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.81",
+  "version": "10.1.83",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -27,8 +27,8 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.93",
-    "@hatiolab/things-scene": "^10.1.61",
+    "@hatiolab/figure-model": "^0.1.94",
+    "@hatiolab/things-scene": "^10.1.62",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
     "@operato/graphql": "^10.0.0",
@@ -41,8 +41,8 @@
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
     "@things-factory/ai-assistant": "^10.1.81",
-    "@things-factory/figure-service": "^10.1.81",
+    "@things-factory/figure-service": "^10.1.82",
     "three": "^0.185.1"
   },
-  "gitHead": "0c4f91d92c8214a9b2eca6690a7ed48bd2d828cc"
+  "gitHead": "b01824bdb3fd266eac06a7241941ac0a119a6e5d"
 }

package/test/ai-proposal.test.ts

@@ -99,14 +99,14 @@ test('an empty card is not applied', async () => {
 })
 
 test('a new figure\'s steps wait for the page once, and lapse if no page takes them', async () => {
-  const waiting = pendNewFigure(steps, 50)
+  const waiting = pendNewFigure(steps, undefined, 50)
   const taken = takePendingNewFigure()!
   assert.equal(taken.steps, steps)
   assert.equal(takePendingNewFigure(), undefined, 'taken once')
   taken.settle({ applied: true })
   assert.deepEqual(await waiting, { applied: true })
 
-  const lapsing = pendNewFigure(steps, 10)
+  const lapsing = pendNewFigure(steps, undefined, 10)
   assert.deepEqual(await lapsing, { applied: false, code: 'not-opened' })
   assert.equal(takePendingNewFigure(), undefined, 'a later new figure does not receive them')
 })

package/test/align.test.ts

@@ -33,12 +33,24 @@ test('가운데 X · Z 는 부품 상자의 가운데를 0 에 둔다', () => {
   assert.equal(Math.round(boxOf(run(probe(), 'centre-z'), 'body')!.centre.z), 0)
 })
 
-test('바닥은 부품의 가장 낮은 점을 y 0 에 둔다 — 돌린 부품은 돈 부피로', () => {
-  const flat = boxOf(run(probe(), 'floor'), 'body')!
-  assert.equal(Math.round(flat.centre.y - flat.extent.y / 2), 0)
+/*
+ * 기준면에 맞추기는 도형의 배치를 따른다 — figure-model 의 한 규칙(`figurePlaneAlignChanges`, 설계자 2026-09-27). 바닥은
+ * 아랫면을 y 0 에, 천장은 윗면을 y 0 에. 한 번 옮길 뿐 붙이지 않는다. 돌린 부품은 돈 부피로.
+ */
+test('기준면 맞추기 — 배치를 따르고, 한 번 옮길 뿐 붙이지 않는다', async () => {
+  const { figurePlaneAlignChanges, applyFigureAuthoring } = await import('@hatiolab/figure-model')
+  const floor = probe()
+  const flat = boxOf(applied(floor, figurePlaneAlignChanges(floor, 'body').changes), 'body')!
+  assert.equal(Math.round(flat.centre.y - flat.extent.y / 2), 0, '바닥: 아랫면이 y 0')
   const turned = probe({ x: 0, y: 300, z: 0 }, { x: 0, y: 0, z: 45 })
-  const landed = boxOf(run(turned, 'floor'), 'body')!
+  const landed = boxOf(applied(turned, figurePlaneAlignChanges(turned, 'body').changes), 'body')!
   assert.ok(Math.abs(landed.centre.y - landed.extent.y / 2) <= 1, `45° 돈 부품의 모서리가 바닥에 닿는다 (${landed.centre.y - landed.extent.y / 2})`)
+  const hung = applyFigureAuthoring(probe({ x: 0, y: -300, z: 0 }), { kind: 'set-placement', placement: 'ceiling' })
+  const top = boxOf(applied(hung, figurePlaneAlignChanges(hung, 'body').changes), 'body')!
+  assert.equal(Math.round(top.centre.y + top.extent.y / 2), 0, '천장: 윗면이 y 0')
+  const editor = read('../client/modeller/editor.ts')
+  assert.ok(editor.includes('const { changes, contact, refusal } = figurePlaneAlignChanges(asset, this.selected)'))
+  assert.ok(!read('../client/modeller/align.ts').includes("case 'floor'"), '화면의 제 산수는 없다')
 })
 
 test('눈금은 1 · 2 · 5 간격으로 자리와 크기를 맞추고, 크기를 0 으로 만들지 않는다', () => {
@@ -59,7 +71,7 @@ test('대칭은 복제본을 가운데 면 반대편 같은 거리에 둔다 ·
 })
 
 test('붙인 부품처럼 옮길 수 없는 것은 맞추기도 없다', () => {
-  assert.deepEqual(alignChanges(probe(), 'body', { translate: false, rotate: false, scale: false }, 'floor'), [])
+  assert.deepEqual(alignChanges(probe(), 'body', { translate: false, rotate: false, scale: false }, 'centre-x'), [])
   assert.match(read('../client/modeller/editor.ts'), /if \(!this\.selected \|\| !reach\.translate\) return null/)
 })
 
@@ -67,3 +79,36 @@ test('the grid step reads well -- 27 or 33 would make coordinates unreadable --
   assert.deepEqual([3000, 1000, 137, 4].map(niceStep), [500, 200, 20, 1])
   assert.ok(niceStep(0) > 0 && niceStep(-100) > 0)
 })
+
+/* Designer 2026-09-27: a tilted part put on the plane touches it at a point or an edge -- said so, before and after; a ball is not said to be tilted. */
+test('a tilted part is told it touches by a point or an edge, a ball by its lowest, in every language', async () => {
+  const { figurePlaneAlignChanges, applyFigureAuthoring } = await import('@hatiolab/figure-model')
+  const tilted = applyFigureAuthoring(probe({ x: 0, y: 300, z: 0 }, { x: 0, y: 0, z: 45 }), { kind: 'set-placement', placement: 'floor' })
+  assert.equal(figurePlaneAlignChanges(tilted, 'body').contact, 'tilted')
+  assert.equal(figurePlaneAlignChanges(probe({ x: 0, y: 300, z: 0 }), 'body').contact, 'face')
+  const editor = read('../client/modeller/editor.ts')
+  assert.ok(editor.includes("const told = contact === 'tilted' || contact === 'extreme' ? `-${contact}` : ''"), 'the tooltip follows the contact')
+  assert.ok(editor.includes("this.notice = i18next.t(`figure.text.aligned-${contact}-${asset.placement ?? 'floor'}`)"), 'and so does the word after')
+  for (const lang of ['en', 'ja', 'ko', 'ms', 'zh']) {
+    const t = JSON.parse(read(`../translations/${lang}.json`))
+    for (const placement of ['floor', 'ceiling', 'wall'])
+      for (const contact of ['tilted', 'extreme'])
+        assert.ok(t[`figure.text.align-to-${placement}-${contact}`] && t[`figure.text.aligned-${contact}-${placement}`], `${lang} ${placement} ${contact}`)
+  }
+  const ko = JSON.parse(read('../translations/ko.json'))
+  assert.equal(ko['figure.text.aligned-tilted-floor'], '기울기를 유지한 채 바닥에 맞췄습니다. 가장 낮은 점 또는 모서리가 닿습니다.')
+  assert.ok(!/기울|기운/.test(ko['figure.text.aligned-extreme-floor'] + ko['figure.text.align-to-floor-extreme']), 'a ball is not said to be tilted')
+})
+
+/* Designer 2026-09-27: the gizmo's reason for a tilted part named the floor's lowest point in every placement. */
+test('the size gizmo\'s reason names what the placement keeps, in every language', () => {
+  const editor = read('../client/modeller/editor.ts')
+  assert.equal(editor.match(/'figure\.text\.gizmo-size-turned-fastening'[^\n]*extreme: this\.keptExtremeWord\(\)/g)?.length, 3, 'every place it is said')
+  for (const lang of ['en', 'ja', 'ko', 'ms', 'zh']) {
+    const t = JSON.parse(read(`../translations/${lang}.json`))
+    assert.ok(t['figure.text.gizmo-size-turned-fastening'].includes('{extreme}'), lang)
+    for (const placement of ['floor', 'ceiling', 'wall', 'center']) assert.ok(t[`figure.label.kept-extreme-${placement}`], `${lang} ${placement}`)
+  }
+  const ko = JSON.parse(read('../translations/ko.json'))
+  assert.equal(ko['figure.label.kept-extreme-ceiling'], '가장 높은 점')
+})

package/test/browser/acceptance-page.js

@@ -0,0 +1,187 @@
+/*
+ * The page a person opens to check ADR-0097 by hand: the modeller as the browser check drives it (`modeller-page.js`),
+ * in Korean, on a store in memory -- nothing is saved to a server, nothing is shared. `?model=<name>` mounts one of the
+ * test figures below; the list is at `?`.
+ *
+ * Run and stop: see serve-acceptance.mjs.
+ */
+import './modeller-page.js'
+import 'figure-ui-client/modeller/figure-properties.js'
+import { createFigureProductSession } from 'figure-ui-client/modeller/product-session.js'
+import { runFigureProposal, takeFigureOffer } from 'figure-ui-client/modeller/ai-proposal.js'
+import { i18next } from '@operato/i18n'
+import { addFigureBox, addFigurePrimitive, 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' }
+
+/** A 400 mm box and nothing else, the figure placed so: the author's first minute (ADR-0097 §5.1). */
+function box(placement, position) {
+  let a = createFigureAsset(`Probe ${placement}`)
+  a.palette = { ...a.palette, ...PALETTE }
+  a = addFigureBox(a, { id: 'box', size: { x: 400, y: 400, z: 400 }, position })
+  return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'declare-occupancy', proposal: proposeFigureOccupancy(a), placement }))
+}
+
+function turned(rotation, placement = 'floor', position = { x: 0, y: 400, z: 0 }) {
+  let a = createFigureAsset(`Turned ${rotation.y ? 'about Y' : 'tilted'}${placement === 'floor' ? '' : ` (${placement})`}`)
+  a.palette = { ...a.palette, ...PALETTE }
+  a = addFigureBox(a, { id: 'box', size: { x: 400, y: 400, z: 400 }, position, rotation })
+  return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'set-placement', placement }))
+}
+
+export const MODELS = {
+  /* A new figure: nothing in it yet (ADR-0097 B, the first minute). */
+  empty: () => {
+    const a = createFigureAsset('New figure')
+    a.palette = { ...a.palette, ...PALETTE }
+    return serializeFigureAsset(a)
+  },
+  floor: () => box('floor', { x: 200, y: 200, z: 150 }),
+  ceiling: () => box('ceiling', { x: 200, y: -200, z: 150 }),
+  wall: () => box('wall', { x: 200, y: 200, z: 200 }),
+  center: () => box('center', { x: 200, y: 200, z: 150 }),
+  /* Two parts, for moving between the model and its parts (B.1). */
+  bench: () => {
+    let a = createFigureAsset('Work bench')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigureBox(a, { id: 'leg', size: { x: 60, y: 700, z: 60 }, position: { x: -400, y: 350, z: 0 } })
+    a = addFigureBox(a, { id: 'top', size: { x: 1200, y: 40, z: 600 }, position: { x: 0, y: 720, z: 0 } })
+    return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'declare-occupancy', proposal: proposeFigureOccupancy(a), placement: 'floor' }))
+  },
+  /* A ceiling figure's part off its ceiling, for the one-off align (to the ceiling, by its top). */
+  'ceiling-off': () => box('ceiling', { x: 0, y: -600, z: 0 }),
+  /* Turned about the vertical: its bottom stays flat on the floor as it is sized. */
+  'turned-y': () => turned({ x: 0, y: 30, z: 0 }),
+  /* Tilted: the size gizmo is withheld; its fields keep its lowest point. */
+  tilted: () => turned({ x: 0, y: 0, z: 30 }),
+  /* Tilted in the other modes: a ceiling keeps its highest point, a wall its backmost, a centred figure its centre. */
+  'tilted-ceiling': () => turned({ x: 0, y: 0, z: 30 }, 'ceiling', { x: 0, y: -400, z: 0 }),
+  'tilted-wall': () => turned({ x: 0, y: 30, z: 0 }, 'wall', { x: 0, y: 300, z: 400 }),
+  'tilted-center': () => turned({ x: 0, y: 0, z: 30 }, 'center', { x: 100, y: 300, z: 50 }),
+  /* Two doors, each swinging on a clip: an edit that would stop a clip is asked first (designer 2026-09-27). */
+  doors: () => {
+    let a = createFigureAsset('Doors')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigureBox(a, { id: 'frame', size: { x: 2000, y: 100, z: 200 }, position: { x: 0, y: 50, z: 0 } })
+    for (const [id, x] of [['left', -500], ['right', 500]]) {
+      a = addFigureBox(a, { id, size: { x: 900, y: 1800, z: 40 }, position: { x, y: 1000, z: 0 } })
+      a = applyFigureAuthoring(a, { kind: 'attach', part: id, face: 'bottom', to: { part: 'frame', face: 'top' } })
+      const j = a.joints.find(k => k.body1.part === id)
+      a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, type: 'revolute', axis: 'Y', state: { id: `${id}-open` } } })
+      a = editFigurePart(a, { kind: 'set-driver', state: `${id}-open`, clip: `${id}-swing`, duration: 2, keys: [{ seconds: 0, value: 0 }, { seconds: 2, value: 80 }] })
+    }
+    return serializeFigureAsset(a)
+  },
+  /* A frame and a roller fastened on it: made into a row on the screen, then its length and pitch changed (C, scenario 2). */
+  conveyor: () => {
+    let a = createFigureAsset('Conveyor')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigureBox(a, { id: 'frame', size: { x: 2000, y: 100, z: 600 }, position: { x: 0, y: 400, z: 0 } })
+    a = addFigureBox(a, { id: 'roller', size: { x: 60, y: 60, z: 560 }, position: { x: 0, y: 480, z: 0 } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'roller', face: 'bottom', to: { part: 'frame', face: 'top' } })
+    return serializeFigureAsset(a)
+  },
+  /* A device fastened on a bench top 300 mm off centre: the top narrowed on the screen brings it past the edge (C, scenario 1, Q3). */
+  'bench-device': () => {
+    let a = createFigureAsset('Bench with device')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigureBox(a, { id: 'leg', size: { x: 60, y: 700, z: 60 }, position: { x: 0, y: 350, z: 0 } })
+    a = addFigureBox(a, { id: 'top', size: { x: 1200, y: 40, z: 600 }, position: { x: 0, y: 720, z: 0 } })
+    a = addFigureBox(a, { id: 'device', size: { x: 100, y: 100, z: 100 }, position: { x: 300, y: 790, z: 100 } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'top', face: 'bottom', to: { part: 'leg', face: 'top' } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'device', face: 'bottom', to: { part: 'top', face: 'top' }, align: { x: { mm: 300 }, z: { mm: 100 } } })
+    return serializeFigureAsset(a)
+  },
+  /* A door leaf fastened to its frame, not moving yet: its motion is set on the screen (C, scenario 3). */
+  door: () => {
+    let a = createFigureAsset('Door')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigureBox(a, { id: 'frame', size: { x: 1200, y: 100, z: 200 }, position: { x: 0, y: 50, z: 0 } })
+    a = addFigureBox(a, { id: 'leaf', size: { x: 900, y: 1800, z: 40 }, position: { x: 0, y: 1000, z: 0 } })
+    a = addFigureBox(a, { id: 'handle', size: { x: 30, y: 150, z: 60 }, position: { x: 350, y: 1000, z: 50 } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'leaf', face: 'bottom', to: { part: 'frame', face: 'top' } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'handle', face: 'back', to: { part: 'leaf', face: 'front' }, align: { x: { mm: 350 } } })
+    return serializeFigureAsset(a)
+  },
+  /* A ball: no face to lay on the floor, and not said to be tilted. */
+  ball: () => {
+    let a = createFigureAsset('Ball')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigurePrimitive(a, { id: 'ball', kind: 'sphere', dimensions: { radiusX: 200, radiusY: 200, radiusZ: 200 }, position: { x: 0, y: 500, z: 0 } })
+    return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'set-placement', placement: 'floor' }))
+  },
+  /* 500 mm above the floor: keep the gap, or be brought onto it. */
+  'floor-gap': () => box('floor', { x: 0, y: 700, z: 0 }),
+  /* 100 mm through the floor: a protrusion may be meant. */
+  'floor-through': () => box('floor', { x: 0, y: 100, z: 0 })
+}
+
+async function start() {
+  const ko = await fetch('/ko.json').then(r => r.json())
+  i18next.addResourceBundle('ko', 'translations', ko, true, true)
+  await i18next.changeLanguage('ko')
+  const name = new URLSearchParams(location.search).get('model')
+  if (!name || !MODELS[name]) {
+    document.body.innerHTML = `<main style="padding:24px;font:15px sans-serif"><h1>ADR-0097 acceptance</h1><ul>${Object.keys(MODELS)
+      .map(m => `<li><a href="?model=${m}">${m}</a></li>`)
+      .join('')}</ul></main>`
+    return
+  }
+  await window.harness.mount('box', MODELS[name]())
+  /*
+    As the modeller page has it: one session for the screen, and another model opened in it by id (B.1: "another model
+    leaves nothing of the last"). The sources are these test figures, in memory; saving keeps them here, nowhere else.
+  */
+  const stored = Object.fromEntries(Object.keys(MODELS).map(id => [id, MODELS[id]()]))
+  const saves = []
+  const session = createFigureProductSession({
+    load: async id => ({ id, source: stored[id] }),
+    save: async request => (saves.push(request.id ?? name), (stored[request.id ?? name] = request.source), { id: request.id ?? name, source: request.source })
+  })
+  await session.open(name)
+  /*
+    As the modeller page slots it: the figure's own panel (name, placement, space, catalog), kept to the draft; and the
+    AI start path, which in the app opens the assistant dock -- here it only says so, there is no dock on this page.
+  */
+  const editor = document.querySelector('figure-editor')
+  editor.session = session
+  /* Opens another test figure in the same session and screen, as following a link to another figure does. */
+  /*
+    An AI proposal, as the dock hands it on (figure-assistant.ts: runFigureProposal, offered by a 'figure-apply' window
+    event) and as the modeller page takes it (figure-modeller-page.ts: takeFigureOffer). The dock and the page element
+    are this page's stand-ins; the two functions are the product's.
+  */
+  const say = (key, params) => i18next.t(key, params)
+  window.addEventListener('figure-apply', event => {
+    if (takeFigureOffer(session, event.detail, { onSavedFigure: false, say })) editor.requestUpdate(), editor.dispatchEvent(new CustomEvent('changed'))
+  })
+  const dock = {
+    offer: detail => (window.dispatchEvent(new CustomEvent('figure-apply', { detail })), detail),
+    openNew: async () => ({ applied: false, code: 'not-opened' })
+  }
+  window.acceptance = {
+    open: async id => (await session.open(id), editor.requestUpdate(), editor.dispatchEvent(new CustomEvent('changed'))),
+    /* The AI proposes these steps on the version open now; what the dock would say comes back. */
+    propose: steps => runFigureProposal({ steps, context: session.read().context, revision: session.read().revision }, dock, say),
+    saves: () => [...saves]
+  }
+  const properties = document.createElement('figure-properties')
+  properties.slot = 'figure'
+  const keep = () => (properties.source = editor.session.source())
+  keep()
+  editor.addEventListener('changed', keep)
+  /* The figure panel's commands, as the modeller page runs them: one step of the session's history. */
+  properties.addEventListener('command', event => {
+    try {
+      session.command(event.detail.action)
+    } catch (error) {
+      alert(String(error.message ?? error))
+    }
+    editor.requestUpdate()
+    keep()
+  })
+  editor.appendChild(properties)
+  editor.aiDraft = true
+  editor.addEventListener('ask-ai-draft', () => alert('(acceptance page) In the app this opens the assistant dock with a draft request.'))
+}
+start()

package/test/browser/build.mjs

@@ -3,7 +3,8 @@
  * a stale bundle passes a check the source fails) and bundles it with the page into one file.
  *
  * FIGURE_MODEL=<dir of a figure-model build> bundles that build instead of the installed one -- for a change to
- * figure-model that is not published yet.
+ * figure-model that is not published yet. THINGS_SCENE=<dir of a things-scene build> does the same for things-scene
+ * (its browser bundle, `things-scene.mjs`).
  */
 import { execFileSync } from 'node:child_process'
 import { mkdirSync, rmSync, existsSync } from 'node:fs'
@@ -32,6 +33,8 @@ export async function buildPage(page = 'modeller-page.js') {
 
   const figureModel = process.env.FIGURE_MODEL ? resolve(process.env.FIGURE_MODEL, 'dist/index.js') : undefined
   if (figureModel && !existsSync(figureModel)) throw Error(`FIGURE_MODEL has no build: ${figureModel}`)
+  const thingsScene = process.env.THINGS_SCENE ? resolve(process.env.THINGS_SCENE, 'things-scene.mjs') : undefined
+  if (thingsScene && !existsSync(thingsScene)) throw Error(`THINGS_SCENE has no build: ${thingsScene}`)
 
   const bundle = await rollup({
     input: join(HERE, page),
@@ -45,6 +48,7 @@ export async function buildPage(page = 'modeller-page.js') {
         resolveId(id) {
           if (id.startsWith('figure-ui-client/')) return join(emitted, id.slice('figure-ui-client/'.length))
           if (figureModel && id === '@hatiolab/figure-model') return figureModel
+          if (thingsScene && id === '@hatiolab/things-scene') return thingsScene
           return null
         }
       },

package/test/browser/revert-page.js

@@ -0,0 +1,47 @@
+/*
+ * The history panel on its own, for checking ADR-0097 §5.6 by hand and by the browser pane: revert keeps the draft it
+ * writes over, a lost answer is asked again with the same request, the newest kept draft can be taken back.
+ *
+ * The panel is the product's. The page around it stands in for the modeller page: it holds the source the server is
+ * confirmed to hold, and reads it again after a revert (the product page reopens the figure). Behind /graphql are
+ * figure-service's own revert functions on sqlite in memory -- see serve-revert.mjs.
+ */
+import 'figure-ui-client/modeller/figure-history-panel.js'
+import { i18next } from '@operato/i18n'
+
+async function ask(operationName, variables = {}) {
+  const response = await fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ operationName, variables }) })
+  return (await response.json()).data?.[operationName]
+}
+
+async function start() {
+  const ko = await fetch('/ko.json').then(r => r.json())
+  i18next.addResourceBundle('ko', 'translations', ko, true, true)
+  await i18next.changeLanguage('ko')
+
+  const figure = await ask('harnessFigure')
+  let confirmed = figure.source
+  const panel = document.createElement('figure-history-panel')
+  panel.figureId = figure.id
+  panel.figureState = figure.state
+  panel.figureVersion = figure.version
+  panel.dirty = false
+  panel.serverSource = () => confirmed
+  panel.saveFirst = async () => ({ ok: true })
+  panel.addEventListener('figure-reverted', async () => {
+    const now = await ask('harnessFigure')
+    confirmed = now.source
+    panel.figureState = now.state
+  })
+  document.body.appendChild(panel)
+
+  window.harness = {
+    /* The server does each revert or undo, then its answer never comes back -- until turned off. */
+    losing: on => ask('harnessLosing', { on }),
+    /* Another session saves meanwhile. */
+    editElsewhere: () => ask('harnessEditElsewhere'),
+    rows: () => ask('harnessRows'),
+    confirmed: () => JSON.parse(confirmed).name
+  }
+}
+start()

package/test/browser/serve-acceptance.mjs

@@ -0,0 +1,85 @@
+/*
+ * Serves the ADR-0097 acceptance page on a port of its own, for a person to check in a browser. No server is shared,
+ * nothing is installed or published: the page runs the modeller on a store in memory.
+ *
+ *   FIGURE_MODEL=<figure-model checkout, built> THINGS_SCENE=<things-scene checkout, built> \
+ *     node test/browser/serve-acceptance.mjs            # from packages/figure-ui; PORT=3391 by default
+ *   open http://localhost:3391/                         # the list of test figures; ?model=floor etc.
+ *   Ctrl+C stops it.
+ *
+ * Unset FIGURE_MODEL or THINGS_SCENE bundle the installed packages instead -- which do not hold the change yet.
+ *
+ * The page wears the product's clothes: OPERATO_APP (an app root, operato-figure by default) gives the theme the app
+ * build assembles -- every module's client/themes, in the builder's order, the first of each name kept -- and the icon
+ * and text fonts its shell links. The body is `light` as the app's theme setting makes it, or `dark` with ?theme=dark.
+ */
+import { createServer } from 'node:http'
+import { existsSync, readFileSync } from 'node:fs'
+import { dirname, join, normalize, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
+import { execFileSync } from 'node:child_process'
+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'))
+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(
+  execFileSync(
+    process.execPath,
+    [
+      '-e',
+      `const path=require('path'),glob=require('glob');const {orderedModuleNames,appRootPath}=require('@things-factory/env');const app=require(appRootPath+'/package.json');const files={};[...orderedModuleNames].reverse().forEach(m=>{const mp=app.name==m?appRootPath:path.dirname(require.resolve(m+'/package.json'));const pj=require(path.join(mp,'package.json'));if(!pj.browser)return;for(const f of glob.sync(path.join(path.dirname(path.join(mp,pj.browser)),'themes','*.css'))){const n=path.basename(f);if(!files[n])files[n]=f}});process.stdout.write('\\n@@THEME@@'+JSON.stringify(Object.values(files)))`
+    ],
+    { cwd: APP, stdio: ['ignore', 'pipe', 'ignore'] }
+  )
+    .toString()
+    /* @things-factory/env prints its module lists as it loads: the list is what follows the marker. */
+    .split('@@THEME@@')
+    .pop()
+)
+const theme = themeFiles.map(f => readFileSync(f, 'utf8')).join('\n')
+const appRequire = createRequire(join(APP, 'package.json'))
+const HTML = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>ADR-0097 acceptance</title>
+<link href="/node_modules/material-symbols/index.css" rel="stylesheet" />
+<link href="/node_modules/@fontsource/roboto/index.css" rel="stylesheet" />
+<link rel="stylesheet" href="/theme.css" />
+<style>html, body { height: 100%; } body { display: flex; } figure-editor { flex: 1; min-width: 0; min-height: 0; }</style>
+<script>addEventListener('DOMContentLoaded', () => document.body.classList.add(new URLSearchParams(location.search).get('theme') === 'dark' ? 'dark' : 'light'))</script>
+</head><body><script type="module" src="/page.js"></script></body></html>`
+/* A file the shell links from /node_modules, resolved from the app as its server resolves it. */
+function fromApp(path) {
+  const [, scope, name, rest] = /^\/node_modules\/((?:@[^/]+\/)?)([^/]+)\/(.*)$/.exec(path) ?? []
+  if (!name) return undefined
+  try {
+    return join(dirname(appRequire.resolve(`${scope}${name}/package.json`)), rest)
+  } catch {
+    return undefined
+  }
+}
+const TYPES = { '.css': 'text/css', '.woff2': 'font/woff2', '.woff': 'font/woff', '.ttf': 'font/ttf' }
+const port = Number(process.env.PORT ?? 3391)
+createServer((req, res) => {
+  const path = req.url.split('?')[0]
+  const file = join(dir, normalize(path).replace(/^([/\\])+/, ''))
+  const asset = path.startsWith('/node_modules/') ? fromApp(path) : undefined
+  if (path === '/theme.css') {
+    res.writeHead(200, { 'Content-Type': 'text/css', 'Cache-Control': 'no-store' })
+    res.end(theme)
+  } else if (asset && existsSync(asset)) {
+    res.writeHead(200, { 'Content-Type': TYPES[asset.slice(asset.lastIndexOf('.'))] ?? 'application/octet-stream' })
+    res.end(readFileSync(asset))
+  } else if (path === '/ko.json') {
+    res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+    res.end(ko)
+  } else if (path.endsWith('.js') && existsSync(file)) {
+    res.writeHead(200, { 'Content-Type': 'application/javascript', 'Cache-Control': 'no-store' })
+    res.end(readFileSync(file))
+  } else {
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
+    res.end(HTML)
+  }
+}).listen(port, () => console.log(`ADR-0097 acceptance on http://localhost:${port}/ -- theme from ${themeFiles.length} files of ${APP}; Ctrl+C stops it`))

package/test/browser/serve-revert.mjs

@@ -0,0 +1,119 @@
+/*
+ * Serves revert-page.js on a port of its own (3392 by default) with figure-service's own revert functions behind
+ * /graphql, on sqlite in memory: nothing is shared, installed or published, and no database but the one in memory is
+ * touched. Build figure-service's server first (its dist-server is what runs).
+ *
+ *   node test/browser/serve-revert.mjs            # from packages/figure-ui
+ *
+ * Seeded: one figure with version 1 released and a draft after it. `harness*` operations are this page's own: drop the
+ * answers, save from another session, read the rows.
+ */
+import { createServer } from 'node:http'
+import { existsSync, readFileSync } from 'node:fs'
+import { dirname, join, normalize, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
+import { buildPage } from './build.mjs'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const SERVICE = resolve(HERE, '../../../figure-service')
+const need = createRequire(join(SERVICE, 'package.json'))
+const DIST = join(SERVICE, 'dist-server/service/figure')
+if (!existsSync(join(DIST, 'figure-revert.js'))) throw Error(`figure-service has no build: ${DIST}`)
+
+const { DataSource } = need('typeorm')
+const { Domain, NamingStrategy } = need('@things-factory/shell')
+const { entityClosure } = need(resolve(SERVICE, '../ops-master/test/support/database.cjs'))
+const { createFigureAsset, addFigureBox, serializeFigureAsset } = need('@hatiolab/figure-model')
+const { Figure } = need(join(DIST, 'figure.js'))
+const { FigureHistory } = need(join(DIST, 'figure-history.js'))
+const { FigureReplacedDraft } = need(join(DIST, 'figure-replaced-draft.js'))
+const { revertKeepingDraft, undoRevert, replacedDraftsOf } = need(join(DIST, 'figure-revert.js'))
+const { compareAndSwapFigure } = need(join(DIST, 'figure-write.js'))
+
+const db = new DataSource({
+  type: 'better-sqlite3',
+  database: ':memory:',
+  synchronize: true,
+  entities: entityClosure([Figure, FigureHistory, FigureReplacedDraft]),
+  namingStrategy: new NamingStrategy()
+})
+await db.initialize()
+const text = (name, height) =>
+  serializeFigureAsset(addFigureBox(createFigureAsset(name), { id: 'body', size: { x: 100, y: height, z: 100 }, position: { x: 0, y: height / 2, z: 0 } }))
+const domain = { id: (await db.getRepository(Domain).save({ name: 'revert', subdomain: 'revert' })).id }
+const figure = await db.getRepository(Figure).save({ type: 'REVERT_PROBE', name: 'probe', source: text('Draft after v1', 300), state: 'draft', version: 1, domain })
+await db.getRepository(FigureHistory).save({ originalId: figure.id, version: 1, type: 'REVERT_PROBE', name: 'probe', source: text('Released v1', 100), state: 'released', comment: 'first release', domain })
+/* Answers of reverts and undos dropped after the server did them -- every one, the browser's own resend too, until turned off. */
+let losing = false
+let edits = 0
+
+const plain = value => JSON.parse(JSON.stringify(value ?? null))
+const OPS = {
+  harnessFigure: () => db.getRepository(Figure).findOneOrFail({ where: { id: figure.id } }),
+  harnessLosing: ({ on }) => ((losing = !!on), losing),
+  harnessEditElsewhere: async () => {
+    const now = await db.getRepository(Figure).findOneOrFail({ where: { id: figure.id } })
+    await compareAndSwapFigure(c => db.getRepository(Figure).update(c, { source: text(`Saved elsewhere ${++edits}`, 500 + edits) }), figure.id, domain.id, now.source)
+    return true
+  },
+  harnessRows: async () => ({
+    figure: JSON.parse((await db.getRepository(Figure).findOneOrFail({ where: { id: figure.id } })).source).name,
+    kept: (await db.getRepository(FigureReplacedDraft).find({ order: { createdAt: 'ASC' } })).map(k => ({
+      kind: k.kind,
+      held: JSON.parse(k.source).name,
+      restored: !!k.restoredAt,
+      requestId: k.requestId
+    }))
+  }),
+  FigureVersions: async () =>
+    (await db.getRepository(FigureHistory).find({ where: { originalId: figure.id }, order: { version: 'DESC' } })).map(v => ({ ...v, updater: null })),
+  InspectFigure: () => ({ blocked: false, findings: [] }),
+  FigureReplacedDrafts: ({ id }) => replacedDraftsOf(db.manager, domain, id),
+  RevertFigureVersion: v => db.transaction(tx => revertKeepingDraft(tx, domain, undefined, v)),
+  UndoFigureRevert: v => db.transaction(tx => undoRevert(tx, domain, undefined, v))
+}
+const LOSABLE = new Set(['RevertFigureVersion', 'UndoFigureRevert'])
+
+const bundle = await buildPage('revert-page.js')
+const dir = dirname(bundle)
+const ko = readFileSync(resolve(HERE, '../../translations/ko.json'))
+const HTML = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Revert keeping</title>
+<style>body { margin: 0; font-family: sans-serif; } figure-history-panel { width: 360px; height: 100vh; }</style>
+</head><body class="light"><script type="module" src="/page.js"></script></body></html>`
+
+const port = Number(process.env.PORT ?? 3392)
+createServer(async (req, res) => {
+  const path = req.url.split('?')[0]
+  if (path === '/graphql' && req.method === 'POST') {
+    let body = ''
+    for await (const chunk of req) body += chunk
+    const { operationName, variables } = JSON.parse(body)
+    const op = OPS[operationName]
+    const field = operationName[0].toLowerCase() + operationName.slice(1)
+    const name = { FigureReplacedDrafts: 'figureReplacedDrafts', InspectFigure: 'inspectFigure' }[operationName] ?? field
+    let payload
+    try {
+      if (!op) throw Object.assign(Error(`not served here: ${operationName}`), { extensions: { code: 'NOT_SERVED' } })
+      const result = plain(await op(variables ?? {}))
+      payload = { data: { [name]: operationName in { RevertFigureVersion: 1, UndoFigureRevert: 1 } ? { violations: [], ...result } : result } }
+    } catch (error) {
+      payload = { errors: [{ message: error.message, extensions: { code: error.extensions?.code } }], data: null }
+    }
+    if (losing && LOSABLE.has(operationName)) {
+      req.socket.destroy()
+      return
+    }
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(JSON.stringify(payload))
+  } else if (path === '/ko.json') {
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(ko)
+  } else if (path.endsWith('.js') && existsSync(join(dir, normalize(path).replace(/^([/\\])+/, '')))) {
+    res.writeHead(200, { 'Content-Type': 'application/javascript', 'Cache-Control': 'no-store' })
+    res.end(readFileSync(join(dir, normalize(path).replace(/^([/\\])+/, ''))))
+  } else {
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
+    res.end(HTML)
+  }
+}).listen(port, () => console.log(`revert keeping on http://localhost:${port}/ -- sqlite in memory; Ctrl+C stops it`))