@things-factory/figure-ui 10.1.49 → 10.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.49",
+  "version": "10.1.50",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -18,6 +18,7 @@
   "scripts": {
     "build": "npm run build:server && npm run build:client",
     "test": "node --import ./test/resolve-ts-siblings.mjs --test --test-force-exit test/*.test.ts",
+    "test:browser": "node --test --test-force-exit test/browser/modeller.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",
@@ -26,19 +27,20 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.55",
-    "@hatiolab/things-scene": "^10.1.33",
+    "@hatiolab/figure-model": "^0.1.57",
+    "@hatiolab/things-scene": "^10.1.34",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
     "@operato/graphql": "^10.0.0",
     "@operato/i18n": "^10.0.0",
     "@operato/layout": "^10.28.0",
     "@operato/p13n": "^10.0.0",
+    "@operato/popup": "^10.23.0",
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/figure-service": "^10.1.49",
+    "@things-factory/figure-service": "^10.1.50",
     "three": "^0.185.1"
   },
-  "gitHead": "f9b29dcbdfecbfdd72e33bbcf74aea05331da75f"
+  "gitHead": "4700d39d70eb5fae4ad56cf47ea0b966c8516ae2"
 }

package/test/browser/build.mjs

@@ -0,0 +1,62 @@
+/*
+ * Builds the page the browser check drives: emits `client/` fresh (never a dist-client left from an earlier build --
+ * 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.
+ */
+import { execFileSync } from 'node:child_process'
+import { mkdirSync, rmSync, existsSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { rollup } from 'rollup'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import replace from '@rollup/plugin-replace'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const PACKAGE = resolve(HERE, '../..')
+const ROOT = resolve(PACKAGE, '../..')
+
+export async function buildPage() {
+  const out = join(tmpdir(), 'figure-ui-browser-check')
+  const emitted = join(out, 'client')
+  rmSync(out, { recursive: true, force: true })
+  mkdirSync(out, { recursive: true })
+
+  /* Types are the unit suite's and tsc's business; here only what runs. */
+  execFileSync(join(ROOT, 'node_modules/.bin/tsc'), ['-p', join(PACKAGE, 'client/tsconfig.json'), '--outDir', emitted, '--noCheck', '--declaration', 'false', '--incremental', 'false'], {
+    stdio: 'inherit'
+  })
+
+  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 bundle = await rollup({
+    input: join(HERE, 'modeller-page.js'),
+    onwarn(warning, warn) {
+      if (warning.code === 'CIRCULAR_DEPENDENCY' || warning.code === 'THIS_IS_UNDEFINED' || warning.code === 'EVAL') return
+      warn(warning)
+    },
+    plugins: [
+      {
+        name: 'figure-ui-client',
+        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
+          return null
+        }
+      },
+      replace({ preventAssignment: true, values: { 'process.env.NODE_ENV': JSON.stringify('production') } }),
+      nodeResolve({ browser: true, modulePaths: [join(PACKAGE, 'node_modules'), join(ROOT, 'node_modules')] }),
+      commonjs()
+    ]
+  })
+  const file = join(out, 'page.js')
+  await bundle.write({ file, format: 'esm', inlineDynamicImports: true })
+  await bundle.close()
+  return file
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) console.log(await buildPage())

package/test/browser/modeller-page.js

@@ -0,0 +1,198 @@
+/*
+ * The page the browser check drives: the V3 editor as the modeller page mounts it, over a store in memory, so the check
+ * needs no server and no sign-in. Everything the editor draws and does is the product's own code, emitted fresh from
+ * `client/` by the runner.
+ */
+import 'figure-ui-client/modeller/v3-editor.js'
+import { createV3ProductSession } from 'figure-ui-client/modeller/v3-product-session.js'
+import { addV3Box, convertV2ToV3, createV3Asset, robotArmV3, serializeV3Asset } from '@hatiolab/figure-model'
+
+const PALETTE = {
+  'palette.dark': '#2b2b2b',
+  'palette.neutral': '#9a9a9a',
+  'palette.primary': '#477b9e',
+  'palette.accent': '#f79c40',
+  'palette.light': '#dddddd'
+}
+
+function sourceOf(kind, v2) {
+  if (kind === 'arm') return serializeV3Asset(robotArmV3())
+  if (kind === 'box') {
+    const asset = createV3Asset('Probe')
+    asset.palette = { ...asset.palette, ...PALETTE }
+    return serializeV3Asset(addV3Box(asset, { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }))
+  }
+  const result = convertV2ToV3(v2, { palette: PALETTE })
+  if (result.status !== 'converted') throw Error(`not converted: ${JSON.stringify(result.refusals)}`)
+  return serializeV3Asset(result.asset)
+}
+
+function deep(selector, root = document) {
+  const found = [...root.querySelectorAll(selector)]
+  for (const element of root.querySelectorAll('*')) if (element.shadowRoot) found.push(...deep(selector, element.shadowRoot))
+  return found
+}
+
+const editor = () => document.querySelector('figure-v3-editor')
+const canvas = () => deep('figure-v3-canvas')[0]
+const three = () => canvas().scene.root._threeCapability
+const controls = () => three().gizmoManager.controls
+
+/** A world point on the page, in CSS pixels. */
+function onPage(world) {
+  const camera = three().cameraManager.activeCamera
+  const box = three().rendererManager.domElement.getBoundingClientRect()
+  const v = world.clone().project(camera)
+  return { x: box.left + ((v.x + 1) / 2) * box.width, y: box.top + ((1 - v.y) / 2) * box.height, inFront: v.z < 1 }
+}
+
+function centreOf(element) {
+  element.scrollIntoView({ block: 'center' })
+  const box = element.getBoundingClientRect()
+  return { x: box.left + box.width / 2, y: box.top + box.height / 2 }
+}
+
+/*
+ * What the check reads. Only reading: every change the check makes goes through the mouse and the keyboard, as a
+ * person's would.
+ */
+window.probe = {
+  state() {
+    const view = editor().session.read()
+    return {
+      revision: view.revision,
+      selected: editor().selected,
+      error: editor().error,
+      mode: three().gizmoManager.mode,
+      attached: three().gizmoManager.attached?.name ?? (three().gizmoManager.attached ? '(object)' : null),
+      axis: controls()?.axis ?? null,
+      dragging: three().gizmoManager.isDragging
+    }
+  },
+  /** The evaluated body of a part: where it is and its size, as the session holds it. */
+  body(id) {
+    const g = editor().session.read().geometry.find(g => g.id === id)
+    return g ? { t: g.pose.t, r: g.pose.r, dimensions: g.shape.dimensions } : null
+  },
+  fields(prefix) {
+    return Object.fromEntries(editor().session.read().fields.filter(f => f.id.startsWith(prefix)).map(f => [f.id, f.value]))
+  },
+  /** The page point of a drawn part's centre, for a click that picks it. */
+  partOnPage(id) {
+    const component = canvas().scene.root.components.find(c => c.state.name === id)
+    const object = component?._realObject?.object3d
+    if (!object) return null
+    object.updateWorldMatrix(true, true)
+    const centre = object.getWorldPosition(object.position.clone())
+    return onPage(centre)
+  },
+  /**
+   * Page points on the gizmo's handle for an axis in the current mode: vertices of the handle's picker (the invisible
+   * shape the gizmo hit-tests), nearest the viewer first. The check hovers them until the gizmo says it holds that axis.
+   */
+  handlePoints(axis) {
+    const c = controls()
+    const picker = c?._gizmo?.picker?.[c.mode]
+    if (!picker) return []
+    picker.updateMatrixWorld(true)
+    const points = []
+    for (const handle of picker.children.filter(h => h.name === axis)) {
+      const position = handle.geometry.attributes.position
+      const v = handle.position.clone()
+      for (let i = 0; i < position.count; i += Math.max(1, Math.floor(position.count / 24))) {
+        v.fromBufferAttribute(position, i).applyMatrix4(handle.matrixWorld)
+        const p = onPage(v)
+        if (p.inFront) points.push(p)
+      }
+    }
+    return points
+  },
+  /**
+   * Which way on the page to pull a rotate ring so it turns: the gizmo turns by the pull along (axis × eye), the
+   * direction to the camera (three's TransformControls). A unit vector in page pixels.
+   */
+  turnDirection(axis) {
+    const c = controls()
+    const object = three().gizmoManager.attached
+    if (!c || !object) return null
+    object.updateWorldMatrix(true, false)
+    const at = object.getWorldPosition(object.position.clone())
+    const camera = three().cameraManager.activeCamera
+    const eye = camera.getWorldPosition(at.clone()).sub(at).normalize()
+    const unit = at.clone().set(axis === 'X' ? 1 : 0, axis === 'Y' ? 1 : 0, axis === 'Z' ? 1 : 0)
+    if (c.space === 'local') unit.applyQuaternion(object.getWorldQuaternion(object.quaternion.clone()))
+    const tangent = unit.cross(eye).normalize()
+    const size = at.distanceTo(camera.getWorldPosition(at.clone())) * 0.05
+    const a = onPage(at), b = onPage(at.clone().add(tangent.multiplyScalar(size)))
+    const l = Math.hypot(b.x - a.x, b.y - a.y) || 1
+    return { x: (b.x - a.x) / l, y: (b.y - a.y) / l }
+  },
+  /** The page point of a part's row in the parts list. */
+  row(id) {
+    const label = deep('span[label]').find(s => s.getAttribute('title') === id)
+    return label ? centreOf(label) : null
+  },
+  /** The page point of a side tab, by its label (the i18n key: the check loads no translations). */
+  tab(label) {
+    const button = deep('button[tab]').find(b => b.getAttribute('aria-label') === label)
+    return button ? centreOf(button) : null
+  },
+  /** Where a slider's thumb is and how many pixels one unit of it spans. */
+  slider(label) {
+    const input = deep('input[type=range]').find(r => r.getAttribute('aria-label') === label)
+    if (!input) return null
+    input.scrollIntoView({ block: 'center' })
+    const box = input.getBoundingClientRect()
+    const min = Number(input.min),
+      max = Number(input.max),
+      value = Number(input.value)
+    const thumb = 8
+    const x = box.left + thumb + ((value - min) / (max - min)) * (box.width - 2 * thumb)
+    return { x, y: box.top + box.height / 2, pxPerUnit: (box.width - 2 * thumb) / (max - min), value }
+  },
+  /** A joint record as the session holds it. */
+  joint(id) {
+    return (JSON.parse(editor().session.source()).joints ?? []).find(j => j.id === id) ?? null
+  },
+  /** A state or design value as the session holds it. */
+  value(id) {
+    return editor().session.read().fields.find(f => f.id === id)?.value ?? null
+  },
+  /** The world centre of a part's top or bottom face, from the session's evaluation. */
+  face(id, which) {
+    const g = editor().session.read().geometry.find(g => g.id === id)
+    if (!g) return null
+    const d = g.shape.dimensions
+    const half = (d.height ?? d.length) / 2
+    const s = which === 'top' ? half : -half
+    return [0, 1, 2].map(i => g.pose.t[i] + g.pose.r[i][1] * s)
+  },
+  /** Whether the joint fan stands on the board now. */
+  fan() {
+    return canvas().scene.root.components.some(c => c.state.name === '__joint-fan')
+  },
+  /** The drawn position of a part's component, as the canvas shows it now. */
+  drawn(id) {
+    const c = canvas().scene.root.components.find(c => c.state.name === id)
+    return c ? [c.state.left, c.state.top, c.state.zPos].map(Math.round) : null
+  }
+}
+
+window.harness = {
+  async mount(kind, v2) {
+    const source = sourceOf(kind, v2)
+    const session = createV3ProductSession({
+      load: async id => ({ id, source }),
+      save: async request => ({ id: request.id ?? 'probe', source: request.source })
+    })
+    await session.open('probe')
+    const editor = document.createElement('figure-v3-editor')
+    editor.session = session
+    editor.revision = 0
+    /* The modeller page counts a change the same way: the editor re-reads the session on a new revision. */
+    editor.addEventListener('v3-changed', () => (editor.revision = editor.revision + 1))
+    document.body.replaceChildren(editor)
+    await editor.updateComplete
+    return session.read().revision
+  }
+}

package/test/browser/modeller.check.mjs

@@ -0,0 +1,334 @@
+/*
+ * The V3 modeller driven with the mouse, in a real browser.
+ *
+ * The unit suite proves the rules; it cannot prove what happens between a pointer going down on a gizmo handle and
+ * coming up -- the scene writes the component on every move, the editor must not fight it, and the drag must land as
+ * one step that stays. Every failure the user found in the gizmo (2026-09-24: selection lost, a converted part
+ * springing back, scale growing then snapping back) lived there, and each had been declared working from code. So
+ * here the check does what a person does: clicks the part, presses the mode key, hovers until the gizmo holds the
+ * handle, drags, lets go -- and then reads the session.
+ *
+ * Needs the sibling figure-model checkout for the V2 robot arm it converts (as things-scene's browser checks do).
+ *
+ * Run:  npm run test:browser
+ *       FIGURE_MODEL=../../../figure-model npm run test:browser   (a figure-model build not published yet)
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const FIXTURE = resolve(HERE, '../../../../../figure-model/src/fixtures/robot-arm-6dof.json')
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+/** The V2 six-axis arm, without the tool-seat marker (a slot anchor with no material, which V3 carries as a place). */
+function robotArm() {
+  const source = JSON.parse(readFileSync(FIXTURE, 'utf-8'))
+  source.parts = source.parts.filter(part => part.material)
+  delete source.slots
+  return source
+}
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage())
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+const state = () => read(() => probe.state())
+const body = id => read(id => probe.body(id), id)
+const fields = id => read(id => probe.fields(id + '.'), id)
+
+async function mount(kind) {
+  await read((kind, v2) => harness.mount(kind, v2), kind, kind === 'box' ? null : robotArm())
+  /* The board is built and the camera fitted after the first frames. */
+  await sleep(2500)
+}
+
+async function click(point) {
+  assert.ok(point, 'nothing on the page to click')
+  await page().mouse.click(point.x, point.y)
+  await sleep(400)
+}
+
+const KEYS = { translate: 'KeyW', rotate: 'KeyE', scale: 'KeyR' }
+
+/**
+ * Drags a gizmo handle `pixels` outward along it, as a hand would: the mode key (the scene's toggle -- pressed only
+ * when the gizmo is not already on in that mode), a hover until the gizmo says it holds the handle, ten moves, release.
+ */
+async function dragHandle(part, mode, axis, pixels) {
+  const s = await state()
+  if (s.mode !== mode || !s.attached) {
+    await page().keyboard.press(KEYS[mode])
+    await sleep(300)
+  }
+  assert.ok((await state()).attached, `the ${mode} gizmo is on the selected part`)
+  const centre = await read(id => probe.partOnPage(id), part)
+  let hold
+  for (const point of await read(axis => probe.handlePoints(axis), axis)) {
+    await page().mouse.move(point.x, point.y)
+    await sleep(20)
+    if ((await state()).axis === axis) {
+      hold = point
+      break
+    }
+  }
+  assert.ok(hold, `the mouse finds the ${mode} ${axis} handle`)
+  let dx = hold.x - centre.x,
+    dy = hold.y - centre.y
+  const length = Math.hypot(dx, dy) || 1
+  dx /= length
+  dy /= length
+  /* A rotate ring turns by the pull along (axis × eye): pull that way. */
+  if (mode === 'rotate') ({ x: dx, y: dy } = await read(axis => probe.turnDirection(axis), axis))
+  await page().mouse.down()
+  for (let i = 1; i <= 10; i++) {
+    await page().mouse.move(hold.x + (dx * pixels * i) / 10, hold.y + (dy * pixels * i) / 10)
+    await sleep(30)
+  }
+  await page().mouse.up()
+  await sleep(600)
+}
+
+/** After the release, and again a second later: a value that springs back shows only in the second reading. */
+async function settled(part) {
+  const now = await body(part)
+  await sleep(1000)
+  assert.deepEqual(await body(part), now, `${part} stays where the drag left it`)
+  return now
+}
+
+const moved = (a, b) => a.map((v, i) => Math.round(b[i] - v))
+
+describe('the gizmo on a part the modeller made (own numbers)', () => {
+  before(async () => {
+    await mount('box')
+    await click(await read(() => probe.partOnPage('box')))
+    assert.equal((await state()).selected, 'box', 'a click on the part selects it')
+  })
+
+  test('translate: one step, the part moves along the handle and stays, still selected', async () => {
+    const start = await state(),
+      was = await body('box')
+    await dragHandle('box', 'translate', 'X', 80)
+    const now = await settled('box')
+    const after = await state()
+    assert.equal(after.revision, start.revision + 1, 'one step of the history')
+    assert.equal(after.selected, 'box')
+    assert.ok(after.attached, 'the gizmo is still on it')
+    const [x, y, z] = moved(was.t, now.t)
+    assert.ok(Math.abs(x) > 20 && y === 0 && z === 0, `moved along X only: ${[x, y, z]}`)
+    assert.deepEqual(now.dimensions, was.dimensions)
+  })
+
+  test('scale: one step, the part grows along the handle and keeps the size', async () => {
+    const start = await state(),
+      was = await body('box')
+    await dragHandle('box', 'scale', 'X', 80)
+    const now = await settled('box')
+    const after = await state()
+    assert.equal(after.revision, start.revision + 1, 'one step of the history')
+    assert.equal(after.selected, 'box')
+    assert.ok(now.dimensions.width > was.dimensions.width * 1.2, `grew: ${was.dimensions.width} → ${now.dimensions.width}`)
+    assert.equal(now.dimensions.height, was.dimensions.height)
+    assert.equal(now.dimensions.depth, was.dimensions.depth)
+  })
+
+  test('rotate: one step, the part turns about the handle axis and keeps the turn', async () => {
+    const start = await state(),
+      was = await fields('box')
+    await dragHandle('box', 'rotate', 'Y', 80)
+    await settled('box')
+    const now = await fields('box')
+    const after = await state()
+    assert.equal(after.revision, start.revision + 1, 'one step of the history')
+    assert.equal(after.selected, 'box')
+    assert.ok(Math.abs(now['box.rotation.y'] - was['box.rotation.y']) > 10, `turned about Y: ${was['box.rotation.y']} → ${now['box.rotation.y']}`)
+    assert.equal(now['box.rotation.x'], was['box.rotation.x'])
+    assert.equal(now['box.rotation.z'], was['box.rotation.z'])
+  })
+})
+
+describe('the gizmo on a converted part (worked-out rules)', () => {
+  before(async () => {
+    await mount('v2')
+    await click(await read(() => probe.row('pedestal')))
+    assert.equal((await state()).selected, 'pedestal', 'a click on the row selects it')
+  })
+
+  test('translate: one step (nudge-part), the part moves and stays, still selected', async () => {
+    const start = await state(),
+      was = await body('pedestal')
+    await dragHandle('pedestal', 'translate', 'X', 80)
+    const now = await settled('pedestal')
+    const after = await state()
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step of the history')
+    assert.equal(after.selected, 'pedestal')
+    const [x, y, z] = moved(was.t, now.t)
+    assert.ok(Math.abs(x) > 20 && y === 0 && z === 0, `moved along X only: ${[x, y, z]}`)
+  })
+
+  test('scale: one step (nudge-part grow), the cylinder widens and keeps it', async () => {
+    const start = await state(),
+      was = await body('pedestal')
+    await dragHandle('pedestal', 'scale', 'X', 80)
+    const now = await settled('pedestal')
+    const after = await state()
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step of the history')
+    assert.equal(after.selected, 'pedestal')
+    assert.ok(now.dimensions.radius > was.dimensions.radius * 1.1, `wider: ${was.dimensions.radius} → ${now.dimensions.radius}`)
+    assert.equal(now.dimensions.length, was.dimensions.length)
+  })
+
+  test('undo with the canvas focused takes the whole drag back, and nothing writes it again', async () => {
+    const was = await body('pedestal')
+    await dragHandle('pedestal', 'translate', 'X', 80)
+    const dragged = await state()
+    const modifier = process.platform === 'darwin' ? 'Meta' : 'Control'
+    await page().keyboard.down(modifier)
+    await page().keyboard.press('KeyZ')
+    await page().keyboard.up(modifier)
+    await sleep(1200)
+    assert.deepEqual(await body('pedestal'), was, 'back where it was before the drag')
+    assert.equal((await state()).revision, dragged.revision + 1, 'the undo, and no write after it')
+  })
+
+  test('a part a joint places is refused, said, and drawn back where the joint puts it', async () => {
+    await click(await read(() => probe.row('upper-arm')))
+    assert.equal((await state()).selected, 'upper-arm')
+    const start = await state(),
+      was = await body('upper-arm'),
+      drawn = await read(() => probe.drawn('upper-arm'))
+    await dragHandle('upper-arm', 'translate', 'X', 80)
+    await sleep(1000)
+    const after = await state()
+    assert.equal(after.revision, start.revision, 'nothing written')
+    assert.notEqual(after.error, '', 'the refusal is said')
+    assert.equal(after.selected, 'upper-arm', 'the selection stays')
+    assert.deepEqual(await body('upper-arm'), was)
+    assert.deepEqual(await read(() => probe.drawn('upper-arm')), drawn, 'the canvas draws it back')
+  })
+})
+
+describe('a pose slider dragged with the mouse (user 2026-09-24: the arm jumped on release)', () => {
+  before(async () => {
+    await mount('v2')
+    await click(await read(() => probe.tab('figure.label.motion')))
+  })
+
+  /** Presses a slider's thumb, moves it `units`, reads the canvas while still held, then releases. */
+  async function dragSlider(label, units) {
+    const thumb = await read(label => probe.slider(label), label)
+    assert.ok(thumb, `the ${label} slider is on the page`)
+    await page().mouse.move(thumb.x, thumb.y)
+    await page().mouse.down()
+    for (let i = 1; i <= 10; i++) {
+      await page().mouse.move(thumb.x + (thumb.pxPerUnit * units * i) / 10, thumb.y)
+      await sleep(40)
+    }
+    await sleep(300)
+    const held = await read(() => probe.drawn('finger-left'))
+    await page().mouse.up()
+    await sleep(700)
+    return { held, released: await read(() => probe.drawn('finger-left')) }
+  }
+
+  test('while one joint is dragged the others keep the pose already set, so the release lands where the drag showed', async () => {
+    const base = await dragSlider('Base pan (J1)', 60)
+    assert.deepEqual(base.held, base.released, 'the first joint: held and released agree')
+    const pan = (await read(() => probe.slider('Base pan (J1)'))).value
+    assert.ok(Math.abs(pan) > 20, `the base turned: ${pan}`)
+
+    const shoulder = await dragSlider('Shoulder lift (J2)', 30)
+    assert.deepEqual(shoulder.held, shoulder.released, `drawn while held ${shoulder.held}, after release ${shoulder.released}`)
+    assert.equal((await read(() => probe.slider('Base pan (J1)'))).value, pan, 'the base keeps its turn')
+    assert.notDeepEqual(shoulder.released, base.released, 'the shoulder moved the tip')
+  })
+})
+
+describe('the V3 robot arm: a drag on a part edits its joint (ADR-0093)', () => {
+  before(async () => {
+    await mount('arm')
+    await click(await read(() => probe.row('upper-arm')))
+    assert.equal((await state()).selected, 'upper-arm')
+  })
+
+  test('the upper arm shows the shoulder joint\'s fan', async () => {
+    assert.equal(await read(() => probe.fan()), true)
+  })
+
+  test('turning the upper arm with the rotate handle turns J2: one step, still on the shoulder, undone whole', async () => {
+    const start = await state()
+    const was = await read(() => probe.value('j2-shoulder'))
+    await dragHandle('upper-arm', 'rotate', 'Z', 120)
+    await sleep(600)
+    const after = await state()
+    const now = await read(() => probe.value('j2-shoulder'))
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    assert.equal(after.selected, 'upper-arm')
+    assert.ok(Math.abs(now - was) > 5, `J2 turned: ${was} -> ${now}`)
+    const gap = (await read(() => probe.face('upper-arm', 'bottom'))).map((v, i) => v - 0)
+    const top = await read(() => probe.face('shoulder', 'top'))
+    assert.ok(Math.hypot(...gap.map((v, i) => v - top[i])) < 1e-6, 'the upper arm still starts on the shoulder top')
+    const modifier = process.platform === 'darwin' ? 'Meta' : 'Control'
+    await page().keyboard.down(modifier)
+    await page().keyboard.press('KeyZ')
+    await page().keyboard.up(modifier)
+    await sleep(900)
+    assert.equal(await read(() => probe.value('j2-shoulder')), was, 'undo takes the turn back')
+  })
+
+  test('scaling the upper arm with the R handle makes it longer: one step, still on the shoulder, the elbow carried', async () => {
+    await click(await read(() => probe.row('upper-arm')))
+    const start = await state()
+    const was = await read(() => probe.value('upper-arm.dimension.height'))
+    await dragHandle('upper-arm', 'scale', 'Y', 80)
+    await sleep(600)
+    const after = await state()
+    const now = await read(() => probe.value('upper-arm.dimension.height'))
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    assert.ok(now > was * 1.1, `longer: ${was} -> ${now}`)
+    const bottom = await read(() => probe.face('upper-arm', 'bottom'))
+    const top = await read(() => probe.face('shoulder', 'top'))
+    assert.ok(Math.hypot(...bottom.map((v, i) => v - top[i])) < 1e-6, 'still starts on the shoulder top')
+    const elbow = await read(() => probe.face('elbow', 'bottom'))
+    const end = await read(() => probe.face('upper-arm', 'top'))
+    assert.ok(Math.hypot(...elbow.map((v, i) => v - end[i])) < 1e-6, 'the elbow sits on the longer arm\'s end')
+  })
+
+  test('moving the elbow block moves where its joint sits; the forearm comes with it', async () => {
+    await click(await read(() => probe.row('elbow')))
+    const start = await state()
+    const forearm = await read(() => probe.face('forearm', 'bottom'))
+    await dragHandle('elbow', 'translate', 'X', 60)
+    await sleep(600)
+    const after = await state()
+    assert.equal(after.error, '', 'not refused')
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    const joint = await read(() => probe.joint('elbow'))
+    assert.ok(joint?.origin?.align?.x?.mm, `the joint's place across the face: ${JSON.stringify(joint?.origin)}`)
+    const moved = await read(() => probe.face('forearm', 'bottom'))
+    const top = await read(() => probe.face('elbow', 'top'))
+    assert.ok(Math.abs(moved[0] - forearm[0]) > 5, 'the forearm moved with it')
+    assert.ok(Math.hypot(...moved.map((v, i) => v - top[i])) < 1e-6, 'and still starts on the elbow top')
+  })
+})
+
+test('the page raised no error', () => {
+  assert.deepEqual(opened.errors, [])
+})

package/test/browser/serve.mjs

@@ -0,0 +1,43 @@
+/*
+ * Opens the built page in a headless browser: a tiny server for page.js, and puppeteer on it at a desktop size.
+ */
+import { createServer } from 'node:http'
+import { readFileSync } from 'node:fs'
+import puppeteer from 'puppeteer'
+
+const HTML = `<!DOCTYPE html>
+<html><head><meta charset="utf-8"><style>
+  html, body { margin: 0; height: 100%; }
+  body { display: flex; font-family: sans-serif; }
+  figure-v3-editor { flex: 1; min-width: 0; min-height: 0; }
+</style></head>
+<body><script type="module" src="/page.js"></script></body></html>`
+
+export async function openPage(bundle, { width = 1400, height = 900 } = {}) {
+  const js = readFileSync(bundle)
+  const server = createServer((req, res) => {
+    if (req.url === '/page.js') {
+      res.writeHead(200, { 'Content-Type': 'application/javascript' })
+      res.end(js)
+    } else {
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
+      res.end(HTML)
+    }
+  })
+  await new Promise(done => server.listen(0, done))
+  const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] })
+  const page = await browser.newPage()
+  await page.setViewport({ width, height })
+  const errors = []
+  page.on('pageerror', e => errors.push(String(e)))
+  await page.goto(`http://localhost:${server.address().port}/`)
+  await page.waitForFunction(() => !!window.harness, { timeout: 30000 })
+  return {
+    page,
+    errors,
+    async close() {
+      await browser.close()
+      server.close()
+    }
+  }
+}