@things-factory/figure-ui 10.1.70 → 10.1.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.70",
+  "version": "10.1.72",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -27,21 +27,22 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.82",
+    "@hatiolab/figure-model": "^0.1.87",
     "@hatiolab/things-scene": "^10.1.56",
     "@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/markdown": "^10.23.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/ai-assistant": "^10.1.58",
-    "@things-factory/figure-service": "^10.1.70",
+    "@things-factory/figure-service": "^10.1.72",
     "three": "^0.185.1"
   },
-  "gitHead": "7c9c614b0cb1d02d401211db76ec0ca0ead344af"
+  "gitHead": "fdf6d4faac454dbdca62d8fe7409395dff1ada22"
 }

package/scripts/template-thumbnails.mjs

@@ -0,0 +1,53 @@
+/*
+ * Draws each recipe template's thumbnail from its model (ADR-0095 amended: model first, verified, then the recipe).
+ *
+ *   node scripts/template-thumbnails.mjs [name …]
+ *   FIGURE_MODEL=../../../figure-model node scripts/template-thumbnails.mjs     (a figure-model not published yet)
+ *
+ * Reads figure-service/recipes/<name>/models/default.json (the model at the template's defaults) and writes
+ * figure-service/recipes/<name>/thumbnail.png, drawn open when the model has a control, so the card shows the motion.
+ */
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { buildPage } from '../test/browser/build.mjs'
+import { openPage } from '../test/browser/serve.mjs'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const RECIPES = resolve(HERE, '../../figure-service/recipes')
+const only = process.argv.slice(2)
+
+const opened = await openPage(await buildPage('thumbnail-page.js'))
+try {
+  for (const name of readdirSync(RECIPES).filter(n => !only.length || only.includes(n)).sort()) {
+    const model = join(RECIPES, name, 'models', 'default.json')
+    if (!existsSync(model)) continue
+    const text = readFileSync(model, 'utf-8')
+    const asset = JSON.parse(text)
+    /*
+      Each control most of the way from where it rests toward its far end: a door partly open (a left hinge opens toward
+      -90), so the card shows what moves -- a sliding leaf opened all the way hides behind its jamb.
+    */
+    const rest = asset.stateDefaults ?? {}
+    const state = Object.fromEntries(
+      asset.document.model.inputs
+        .filter(i => i.role === 'state')
+        .map(i => {
+          const from = rest[i.id] ?? 0
+          const far = Math.abs(i.max - from) >= Math.abs(i.min - from) ? i.max : i.min
+          return [i.id, from + (far - from) * 0.6]
+        })
+    )
+    const url = await opened.page.evaluate((text, state) => window.shoot(text, state), text, state)
+    if (!url) {
+      console.error(`${name}: not drawn`)
+      process.exitCode = 1
+      continue
+    }
+    writeFileSync(join(RECIPES, name, 'thumbnail.png'), Buffer.from(url.split(',')[1], 'base64'))
+    console.log(`${name}: thumbnail.png`)
+  }
+} finally {
+  await opened.close()
+}

package/test/browser/build.mjs

@@ -19,8 +19,8 @@ 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')
+export async function buildPage(page = 'modeller-page.js') {
+  const out = join(tmpdir(), 'figure-ui-browser-' + page.replace(/\W+/g, '-'))
   const emitted = join(out, 'client')
   rmSync(out, { recursive: true, force: true })
   mkdirSync(out, { recursive: true })
@@ -34,7 +34,7 @@ export async function buildPage() {
   if (figureModel && !existsSync(figureModel)) throw Error(`FIGURE_MODEL has no build: ${figureModel}`)
 
   const bundle = await rollup({
-    input: join(HERE, 'modeller-page.js'),
+    input: join(HERE, page),
     onwarn(warning, warn) {
       if (warning.code === 'CIRCULAR_DEPENDENCY' || warning.code === 'THIS_IS_UNDEFINED' || warning.code === 'EVAL') return
       warn(warning)
@@ -56,6 +56,18 @@ export async function buildPage() {
   const file = join(out, 'page.js')
   await bundle.write({ file, format: 'esm', inlineDynamicImports: true })
   await bundle.close()
+
+  /*
+    ox-markdown renders in a worker it loads from beside its module (\`../../workers/markdown-webworker.js\`); from
+    /page.js that is /workers/. Bundled here and served there, the guides render as in the app -- without it the worker
+    never answers and a guide is drawn empty.
+  */
+  const worker = await rollup({
+    input: join(ROOT, 'node_modules/@operato/markdown/workers/markdown-webworker.js'),
+    plugins: [nodeResolve({ browser: true, modulePaths: [join(PACKAGE, 'node_modules'), join(ROOT, 'node_modules')] }), commonjs()]
+  })
+  await worker.write({ file: join(out, 'workers/markdown-webworker.js'), format: 'esm', inlineDynamicImports: true })
+  await worker.close()
   return file
 }
 

package/test/browser/modeller-page.js

@@ -5,7 +5,7 @@
  */
 import 'figure-ui-client/modeller/v3-editor.js'
 import { createV3ProductSession } from 'figure-ui-client/modeller/v3-product-session.js'
-import { addV3Box, createV3Asset, robotArmV3, serializeV3Asset } from '@hatiolab/figure-model'
+import { addV3Box, addV3Primitive, applyV3Authoring, createV3Asset, robotArmV3, serializeV3Asset } from '@hatiolab/figure-model'
 
 const PALETTE = {
   'palette.dark': '#2b2b2b',
@@ -36,6 +36,20 @@ function sourceOf(kind, text) {
     asset.palette = { ...asset.palette, ...PALETTE }
     return serializeV3Asset(addV3Box(asset, { id: 'room', size: { x: 4000, y: 3000, z: 6000 }, position: { x: 0, y: 1500, z: 0 } }))
   }
+  if (kind === 'rollers') {
+    /* A roller row whose rollers spin in place, each carrying a mark (ADR-0093, 2026-09-26). */
+    let asset = createV3Asset('Rollers')
+    asset.palette = { ...asset.palette, ...PALETTE }
+    asset = addV3Box(asset, { id: 'bed', size: { x: 2000, y: 400, z: 600 }, position: { x: 0, y: 200, z: 0 } })
+    asset = applyV3Authoring(asset, { kind: 'attach', part: 'bed', face: 'bottom', to: { plane: 'mounting-plane' } })
+    asset = addV3Primitive(asset, { id: 'roller', kind: 'cylinder', dimensions: { radius: 40, length: 560 }, position: { x: 0, y: 0, z: 0 }, rotation: { x: 90, y: 0, z: 0 } })
+    asset = applyV3Authoring(asset, { kind: 'attach', part: 'roller', face: 'centre', to: { part: 'bed', face: 'top' }, gap: 40 })
+    asset = addV3Box(asset, { id: 'mark', size: { x: 30, y: 30, z: 560 }, position: { x: 0, y: 0, z: 0 } })
+    asset = applyV3Authoring(asset, { kind: 'attach', part: 'mark', face: 'left', to: { part: 'roller', face: 'right' } })
+    const j = asset.joints.find(o => o.body1.part === 'roller')
+    asset = applyV3Authoring(asset, { kind: 'set-joint', joint: { ...j, type: 'revolute', axis: 'Z', lowerLimit: -360, upperLimit: 360, state: { id: 'spin' } } })
+    return serializeV3Asset(applyV3Authoring(asset, { kind: 'make-repeat', part: 'roller', axis: 'x', pitch: 200 }))
+  }
   throw Error(`no figure for ${kind}`)
 }
 
@@ -139,6 +153,14 @@ window.probe = {
     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 ids of every body drawn. */
+  ids() {
+    return editor().session.read().geometry.map(g => g.id)
+  },
+  /** Whether an input with this label is on the page. */
+  hasInput(label) {
+    return deep('input').some(i => i.getAttribute('aria-label') === label)
+  },
   /** 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)
@@ -191,7 +213,7 @@ window.probe = {
 }
 
 window.harness = {
-  async mount(kind, text, recipes = []) {
+  async mount(kind, text, templates = [], guides = {}) {
     const source = sourceOf(kind, text)
     const session = createV3ProductSession({
       load: async id => ({ id, source }),
@@ -200,7 +222,8 @@ window.harness = {
     await session.open('probe')
     const editor = document.createElement('figure-v3-editor')
     editor.session = session
-    editor.recipes = recipes
+    editor.templates = templates
+    editor.guideOf = async name => guides[name] ?? ''
     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))

package/test/browser/modeller.check.mjs

@@ -13,9 +13,8 @@
  */
 import { test, describe, before, after } from 'node:test'
 import assert from 'node:assert/strict'
-import { readdirSync, readFileSync } from 'node:fs'
-import { createRequire } from 'node:module'
-import { dirname, join, resolve } from 'node:path'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import { buildPage } from './build.mjs'
@@ -674,13 +673,13 @@ describe('a part follows the figure size in one step (follow-size, 2026-09-26)',
   })
 })
 
-describe('a recipe put onto a part: chosen, filled in, one step (ADR-0095, 2026-09-26)', () => {
-  /* The recipes figure-model ships: the build named by FIGURE_MODEL, else the installed one. */
-  const recipeDir = () => {
-    const base = process.env.FIGURE_MODEL ? resolve(process.env.FIGURE_MODEL) : dirname(createRequire(import.meta.url).resolve('@hatiolab/figure-model/package.json'))
-    return join(base, 'recipes')
-  }
-  const recipes = () => readdirSync(recipeDir()).filter(f => f.endsWith('.json')).sort().map(f => JSON.parse(readFileSync(join(recipeDir(), f), 'utf-8')))
+describe('the recipe catalog: a template chosen, filled in, put onto the chosen part in one step (ADR-0095)', () => {
+  /* The product's templates, as the server reads them, as catalog rows. */
+  const templates = () =>
+    ['sliding-door', 'hinged-door', 'roller-row'].map(name => {
+      const recipe = JSON.parse(readFileSync(resolve(HERE, `../../../figure-service/recipes/${name}/recipe.json`), 'utf-8'))
+      return { name, category: recipe.category, tags: recipe.tags, target: recipe.target, title: recipe.title.en, description: recipe.description.en, hasThumbnail: false, recipe }
+    })
   const at = selector =>
     page().evaluate(selector => {
       const deep = (root = document) => [...root.querySelectorAll(selector)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
@@ -688,58 +687,86 @@ describe('a recipe put onto a part: chosen, filled in, one step (ADR-0095, 2026-
       if (!e) return null
       e.scrollIntoView({ block: 'center' })
       const r = e.getBoundingClientRect()
-      return { x: r.left + r.width / 2, y: r.top + r.height / 2, disabled: !!e.disabled }
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2, disabled: !!e.disabled, text: e.textContent.trim() }
     }, selector)
   const parts = () => read(() => document.querySelector('figure-v3-editor').session.read().geometry.map(g => g.id))
+  const type = async (selector, text) => {
+    const field = await page().evaluateHandle(selector => {
+      const deep = (root = document) => [...root.querySelectorAll(selector)].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep()[0] ?? null
+    }, selector)
+    await field.evaluate(i => i.scrollIntoView({ block: 'center' }))
+    await field.click({ clickCount: 3 })
+    await page().keyboard.type(text)
+    await page().keyboard.press('Tab')
+  }
 
-  test('with no part chosen the door waits; on the room it opens its form, and put in makes the frame, the leaves and the lamp', async () => {
-    await read((text, list) => harness.mount('room', text, list), null, recipes())
+  test('the room chosen, the catalog opened: the door told in full, a share typed, put in -- the frame, the leaves and the lamp, and the catalog closes', async () => {
+    const guides = { 'sliding-door': readFileSync(resolve(HERE, '../../../figure-service/recipes/sliding-door/guide.en.md'), 'utf-8') }
+    await read((list, guides) => harness.mount('room', null, list, guides), templates(), guides)
     await sleep(2500)
-    const idle = await at('button[recipe="sliding-door"]')
-    assert.ok(idle, 'the sliding door is offered')
-    assert.ok(idle.disabled, 'it waits for a part to be chosen')
     await click(await read(() => probe.row('room')))
-    await click(await at('button[recipe="sliding-door"]'))
-    const share = await page().evaluateHandle(() => {
-      const deep = (root = document) => [...root.querySelectorAll('input[param="share"]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      return deep()[0] ?? null
+    await click(await at('button[recipe-catalog]'))
+    assert.ok(await at('figure-v3-recipe-catalog'), 'the catalog is open')
+    await click(await at('button[card="hinged-door"]'))
+    /* A search that takes the chosen card away tells the first card it leaves (:3300, 2026-09-26). */
+    await type('input[search]', 'sliding')
+    assert.equal(await read(() => {
+      const deep = (root = document) => [...root.querySelectorAll('button[card][on]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep().map(b => b.getAttribute('card')).join()
+    }), 'sliding-door', 'the card told is one the search shows')
+    assert.ok(await at('li[parts="2–4"]'), 'the parts it adds, worked out from its choices: 2 to 4')
+    /* The guide is drawn as its text, not as the page its words would name (seen on :3300, 2026-09-26). */
+    await sleep(1500)
+    const guide = await read(() => {
+      const deep = (root = document) => [...root.querySelectorAll('ox-markdown')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      const shown = deep()[0]
+      return shown ? { headings: [...shown.shadowRoot.querySelectorAll('h2')].map(h => h.textContent.trim()), app: !!shown.shadowRoot.querySelector('ox-app, things-app, body, html') } : null
     })
-    assert.equal(await share.evaluate(i => i.value), '35', 'a share is typed as a percentage')
-    await share.evaluate(i => i.scrollIntoView({ block: 'center' }))
-    await share.click({ clickCount: 3 })
-    await page().keyboard.type('50')
-    await page().keyboard.press('Tab')
+    assert.ok(guide, 'the guide is shown')
+    assert.ok(guide.headings.includes('When to use it'), `the guide's own headings: ${JSON.stringify(guide.headings)}`)
+    assert.equal(guide.app, false, 'no page drawn inside it')
+    await type('input[param="share"]', '50')
     const start = await state()
-    await click(await at('div[recipe-actions] button[insert]'))
-    const after = await state()
-    assert.equal(after.error, '', 'not refused')
-    assert.equal(await read(() => document.querySelector('figure-v3-editor').recipeError), '', 'the recipe went in')
-    assert.equal(after.revision, start.revision + 1, 'one step')
+    await click(await at('button[insert]'))
+    assert.equal(await read(() => document.querySelector('figure-v3-editor').recipeError), '', 'not refused')
+    assert.equal((await state()).revision, start.revision + 1, 'one step')
     const ids = await parts()
     for (const part of ['frame', 'left', 'right', 'lamp']) assert.ok(ids.includes(`sliding-door-1-${part}`), `${part} is in`)
     const frame = await body('sliding-door-1-frame')
-    assert.equal(Math.round(frame.dimensions.right - frame.dimensions.left), 2000, 'half the room\'s 4000 mm')
+    assert.equal(Math.round(frame.dimensions.right - frame.dimensions.left), 2000, "half the room's 4000 mm")
+    assert.equal(await at('figure-v3-recipe-catalog'), null, 'the catalog closes')
   })
 
-  test('a door the room cannot take is refused in the form, in the kernel\'s words, and nothing is added', async () => {
+  test('a door the room cannot take is refused in the catalog, in the kernel\'s words, and nothing is added', async () => {
+    await click(await read(() => probe.row('room')))
+    await click(await at('button[recipe-catalog]'))
+    await click(await at('button[card="sliding-door"]'))
     const before = await parts()
-    const share = await page().evaluateHandle(() => {
-      const deep = (root = document) => [...root.querySelectorAll('input[param="share"]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      return deep()[0] ?? null
-    })
-    await share.evaluate(i => i.scrollIntoView({ block: 'center' }))
-    await share.click({ clickCount: 3 })
-    await page().keyboard.type('5')
-    await page().keyboard.press('Tab')
+    await type('input[param="share"]', '5')
     const start = await state()
-    await click(await at('div[recipe-actions] button[insert]'))
+    await click(await at('button[insert]'))
     assert.equal((await state()).revision, start.revision, 'no step')
     assert.deepEqual(await parts(), before, 'nothing added')
-    const said = await page().evaluate(() => {
-      const deep = (root = document) => [...root.querySelectorAll('div[recipe-form] p[error]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-      return deep()[0]?.textContent ?? ''
-    })
-    assert.match(said, /steps\[\d+\]/, `the kernel's sentence, with the step: ${said}`)
+    const said = await at('section[detail] p[role="alert"]')
+    assert.ok(said && /steps\[\d+\]/.test(said.text), `the kernel's sentence, with the step: ${said?.text}`)
+    await click(await at('button[close]'))
+  })
+})
+
+describe('a row that carries a part (ADR-0093, 2026-09-26)', () => {
+  test('the list has the roller and its mark, each once; a click on a mark on the canvas picks the mark, and only the roller offers the row', async () => {
+    await mount('rollers')
+    assert.ok(await read(() => probe.row('roller')), 'the roller, once')
+    assert.ok(await read(() => probe.row('mark')), 'the mark it carries, once')
+    const copy = (await read(() => probe.ids())).find(id => id.includes('mark.') && id.includes(',3,'))
+    assert.ok(copy, 'a mark on the fourth roller is drawn')
+    await click(await read(id => probe.partOnPage(id), copy))
+    assert.equal((await state()).selected, 'mark', 'picked by the part it copies')
+    assert.equal(await read(() => probe.hasInput('mark.repeat.pitch')), false, 'the mark has no row of its own to set')
+    await click(await read(() => probe.row('roller')))
+    assert.equal((await state()).selected, 'roller')
+    assert.ok(await read(() => probe.hasInput('roller.repeat.pitch')), 'the roller offers its row')
   })
 })
 

package/test/browser/serve.mjs

@@ -2,7 +2,8 @@
  * 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 { existsSync, readFileSync } from 'node:fs'
+import { dirname, join, normalize } from 'node:path'
 import puppeteer from 'puppeteer'
 
 const HTML = `<!DOCTYPE html>
@@ -16,9 +17,14 @@ const HTML = `<!DOCTYPE html>
 export async function openPage(bundle, { width = 1400, height = 900 } = {}) {
   const js = readFileSync(bundle)
   const server = createServer((req, res) => {
+    /* Scripts built beside the page (the markdown worker) are served as they are. */
+    const beside = join(dirname(bundle), normalize(req.url.split('?')[0]).replace(/^([/\\])+/, ''))
     if (req.url === '/page.js') {
       res.writeHead(200, { 'Content-Type': 'application/javascript' })
       res.end(js)
+    } else if (req.url.endsWith('.js') && existsSync(beside)) {
+      res.writeHead(200, { 'Content-Type': 'application/javascript' })
+      res.end(readFileSync(beside))
     } else {
       res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
       res.end(HTML)

package/test/browser/thumbnail-page.js

@@ -0,0 +1,14 @@
+/*
+ * The page that draws recipe template thumbnails (ADR-0095 amended): a model -- the host and the template's parts -- drawn
+ * the way the modeller draws a figure's card, by the same code (`captureV3Thumbnail`).
+ */
+import { captureV3Thumbnail } from 'figure-ui-client/modeller/v3-thumbnail.js'
+import { drawableV3Parts } from 'figure-ui-client/modeller/v3-renderer.js'
+import { compileV3Asset } from '@hatiolab/figure-model'
+
+window.harness = { ready: true }
+window.shoot = async (text, state = {}) => {
+  const asset = JSON.parse(text)
+  const evaluation = compileV3Asset(asset).evaluate({ ...asset.stateDefaults, ...state })
+  return await captureV3Thumbnail(drawableV3Parts(evaluation.geometry), evaluation.palette ?? asset.palette ?? {})
+}

package/test/v3-fields.test.ts

@@ -53,7 +53,7 @@ test('긴 설명은 제목 옆 「?」 로 연다 — 늘 펼쳐 두지 않는
 
 test('되풀이한 부품은 되풀이의 이름과 몇 번째인지로 읽는다 — 날 id 를 보이지 않는다', () => {
   assert.equal(partLabelOf('["roller.repeat",0,"roller.value"]'), 'roller 1')
-  assert.equal(partLabelOf('["rack.repeat",1,"shelf.repeat",2,"shelf.value"]'), 'rack 2·3')
+  assert.equal(partLabelOf('["roller.repeat",2,"mark.placed"]'), 'mark 3', '줄의 부품에 붙은 것은 제 이름으로 (ADR-0093, 2026-09-26)')
   assert.equal(partLabelOf('deck'), 'deck', '보통 부품은 제 이름')
   assert.equal(partLabelOf('[not json'), '[not json')
   const parts = readFileSync(fileURLToPath(new URL('../client/modeller/figure-v3-parts.ts', import.meta.url)), 'utf8')
@@ -64,6 +64,9 @@ test('되풀이한 부품의 속성 이름 칸도 사람의 이름이고, 몇
   const geometry = Array.from({ length: 16 }, (_, i) => ({ id: JSON.stringify(['roller.repeat', i, 'roller.value']) })).concat([{ id: 'deck' }])
   assert.deepEqual(repeatOf('["roller.repeat",14,"roller.value"]', geometry), { name: 'roller', count: 16, index: 15 })
   assert.equal(repeatOf('deck', geometry), null)
+  const carried = geometry.concat(Array.from({ length: 16 }, (_, i) => ({ id: JSON.stringify(['roller.repeat', i, 'mark.placed']) })))
+  assert.deepEqual(repeatOf('["roller.repeat",14,"roller.value"]', carried), { name: 'roller', count: 16, index: 15 }, '롤러에 붙은 것은 롤러 수에 안 든다')
+  assert.deepEqual(repeatOf('["roller.repeat",2,"mark.placed"]', carried), { name: 'mark', count: 16, index: 3 })
   const editor = readFileSync(fileURLToPath(new URL('../client/modeller/v3-editor.ts', import.meta.url)), 'utf8')
   assert.ok(editor.includes('.value=${partLabelOf(this.selected)}'), '사용자 2026-09-24: 「부품 이름 ???」')
   assert.ok(editor.includes('?disabled=${unavailable || !!repeatOf(this.selected, view.geometry)}'), '복사본에는 바꿀 제 이름이 없다')
@@ -72,6 +75,7 @@ test('되풀이한 부품의 속성 이름 칸도 사람의 이름이고, 몇
 test('편집기는 저작한 부품 단위로 고르고 보인다 — 되풀이는 한 부품, 캔버스에서는 복사본 모두가 골라진다', () => {
   assert.equal(ownerOf('["roller.repeat",14,"roller.value"]'), 'roller')
   assert.equal(ownerOf('deck'), 'deck')
+  assert.equal(ownerOf('["roller.repeat",2,"mark.placed"]'), 'mark', '롤러에 붙은 표시의 복사본을 누르면 그 표시를 고른다')
   assert.deepEqual(repeatOf('roller', [{ id: '["roller.repeat",0,"roller.value"]' }, { id: '["roller.repeat",1,"roller.value"]' }, { id: 'deck' }]), { name: 'roller', count: 2, index: 0 })
   const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
   const canvas = read('../client/modeller/v3-canvas.ts')

package/test/v3-links.test.ts

@@ -618,3 +618,15 @@ test('치수 칸 — 「도형 크기를 따라감」 단추는 follow-size 한
   const ko = JSON.parse(read('../translations/ko.json'))
   assert.match(ko['figure.text.size-declared-to-follow'], /\{x\} × \{y\} × \{z\} mm/)
 })
+
+/* 통 — 속 빈 상자를 팔레트에서, 세 축 모두 크기를 따르고, 손잡이로 키우고, 안쪽 면에 붙인다 (G4, 09-26). */
+test('팔레트의 통은 통의 크기로 서고, 세 축 모두 크기를 따를 수 있고, 손잡이로 키울 수 있다', async () => {
+  const { paletteRecipe } = await import('../client/modeller/v3-palette.ts')
+  const { gizmoReachOf } = await import('../client/modeller/v3-gizmo.ts')
+  const { addV3Primitive: add } = await import('@hatiolab/figure-model')
+  const asset = add(createV3Asset('Tote'), paletteRecipe('hollow-box' as never, 'tote'))
+  assert.deepEqual(followableAxes(asset, 'tote'), ['x', 'y', 'z'])
+  assert.deepEqual(gizmoReachOf(asset as never, 'tote').sizes, ['tote.dimension.width', 'tote.dimension.height', 'tote.dimension.depth'])
+  const ko = JSON.parse(read('../translations/ko.json'))
+  assert.equal(ko['figure.label.face-inside-bottom'], '안쪽 바닥')
+})

package/test/v3-recipes.test.ts

@@ -1,14 +1,17 @@
 /*
- * **조각 칸** (ADR-0095, 2026-09-26). 문 · 롤러 줄을 한 단계로 넣는다 — 부품을 고른 뒤에, 몇 개의 수와 선택으로.
+ * **조각 카탈로그** (ADR-0095, 2026-09-26). 템플릿은 서버의 정적 파일이고, 모델러는 분류 · 찾기 · 설명 · 넣기를 한 창에서 한다.
+ * 부품 수와 작동 방식은 레시피에서 셈한다 — 글로 적지 않는다.
  */
 import { test } from 'node:test'
 import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 
-import { recipeFieldOf, recipeReady, recipesOf, recipeValueOf, recipeWord } from '../client/modeller/v3-recipes.ts'
+import { recipeFieldOf, recipeReady, recipesMatching, recipeValueOf, recipeWord, recipeWorkings, templatesOf } from '../client/modeller/v3-recipes.ts'
 
 const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+/* The product's templates, as the server reads them. */
+const template = (name: string) => read(`../../figure-service/recipes/${name}/recipe.json`)
 const share = { name: 'share', kind: 'ratio' as const, default: 0.35, min: 0.05, max: 0.95 }
 
 test('비율은 백분율로 보이고 받는다; 빈 칸은 기본값; 선택은 선택지 중에서만', () => {
@@ -27,34 +30,53 @@ test('말은 화면의 언어로, 없으면 영어로; 부품용 조각은 부
   assert.equal(recipeWord({ ko: '미닫이 문', en: 'sliding door' }, 'ja'), 'sliding door')
   assert.equal(recipeReady({ target: 'part' }, ''), false)
   assert.equal(recipeReady({ target: 'part' }, 'room'), true)
-  assert.equal(recipeReady({ target: 'figure' }, ''), true)
-  assert.deepEqual(recipesOf([{ source: '{"name":"a","steps":[]}' }, { source: 'not json' }, { source: '{"x":1}' }]).map(r => r.name), ['a'])
+  const row = { category: 'door', tags: [], target: 'part' as const, title: 't', description: 'd', hasThumbnail: false }
+  assert.deepEqual(templatesOf([{ ...row, name: 'a', source: template('sliding-door') }, { ...row, name: 'b', source: 'not json' }]).map(t => t.name), ['a'])
 })
 
-test('편집기는 조각을 도형이 선 그대로 풀어 한 단계로 넣고, 거절은 폼에 커널의 말로', () => {
+test('분류와 낱말로 찾는다 — 제목 · 설명 · 이름 · 태그 어디에 있든, 낱말이 모두 있어야', () => {
+  const list = [
+    { name: 'sliding-door', category: 'door', title: '미닫이 문', description: '앞면에 문틀과 문짝', tags: ['door', 'lamp'] },
+    { name: 'roller-row', category: 'conveyor', title: '롤러 줄', description: '윗면에 롤러', tags: ['roller'] }
+  ]
+  assert.deepEqual(recipesMatching(list, '', '').map(t => t.name), ['sliding-door', 'roller-row'])
+  assert.deepEqual(recipesMatching(list, 'conveyor', '').map(t => t.name), ['roller-row'])
+  assert.deepEqual(recipesMatching(list, '', 'lamp 문').map(t => t.name), ['sliding-door'])
+  assert.deepEqual(recipesMatching(list, 'door', 'roller'), [])
+})
+
+test('작동 방식은 레시피에서 셈한다 — 미닫이 문: 두 문짝이 미끄러지고 하나는 따라가며, 조작값 하나, 램프는 조작값에 따라 보임', () => {
+  const door = JSON.parse(template('sliding-door'))
+  assert.deepEqual(recipeWorkings(door), [
+    { key: 'figure.text.recipe-slides', words: { part: 'left' } },
+    { key: 'figure.text.recipe-moves-with', words: { part: 'right', leader: 'left' } },
+    { key: 'figure.text.recipe-controls', words: { count: 1 } },
+    { key: 'figure.text.recipe-shown-by-control', words: { parts: 'lamp' } }
+  ])
+  /* The rollers spin on one control, every copy (ADR-0093, 2026-09-26). */
+  assert.deepEqual(recipeWorkings(JSON.parse(template('roller-row'))), [
+    { key: 'figure.text.recipe-turns', words: { part: 'roller' } },
+    { key: 'figure.text.recipe-controls', words: { count: 1 } },
+    { key: 'figure.text.recipe-row', words: { part: 'roller' } }
+  ])
+})
+
+test('모델러 — 부품 칸의 단추가 카탈로그를 열고, 넣으면 한 단계로 들어가고 창이 닫힌다; 목록은 페이지가 서버에서 한 번 읽는다', () => {
+  const parts = read('../client/modeller/figure-v3-parts.ts')
+  assert.ok(parts.includes("this.ask('open-recipe-catalog', {})"))
   const editor = read('../client/modeller/v3-editor.ts')
   const insert = editor.slice(editor.indexOf('  private insertRecipe('), editor.indexOf('  /** The design values of the asset being edited. */'))
-  assert.ok(insert.includes('v3RecipeIdFor(asset, checked)') && insert.includes('resolveV3Recipe(checked'), '다음 빈 이름으로 푼다')
-  assert.ok(insert.includes('this.session!.applyRecipe(steps)'), '한 단계')
-  assert.ok(insert.includes('this.recipeError = error instanceof Error ? error.message : String(error)'), '거절은 그대로')
-  const session = read('../client/modeller/v3-product-session.ts')
-  assert.ok(session.includes("workspace.applyProposal({ origin: 'ui', context: at.context, expectedRevision: at.expectedRevision, steps })"), '사람이 넣은 것')
+  assert.ok(insert.includes('v3RecipeIdFor(asset, checked)') && insert.includes('this.session!.applyRecipe(steps)') && insert.includes('this.catalogOpen = false'))
+  assert.ok(insert.includes('this.recipeError = error instanceof Error ? error.message : String(error)'), '거절은 커널의 말로')
   const page = read('../client/pages/figure-v3-modeller-page.ts')
-  assert.ok(page.includes('.recipes=${this.recipes}') && page.includes('fetchFigureRecipes()'), '페이지가 목록을 읽어 건넨다')
+  assert.ok(page.includes("availableRecipes(i18next.language || 'en')") && page.includes('.templates=${this.templates}'))
+  const catalog = read('../client/modeller/figure-v3-recipe-catalog.ts')
+  assert.ok(catalog.includes('describeV3Recipe(t.recipe)'), '부품 수는 셈한다')
+  assert.ok(catalog.includes("${this.guide ? html`<ox-markdown"), '설명이 없으면 아무것도 두지 않는다 — 「준비 중」 없음')
 })
 
-test('관리 화면 — 주소에서 도메인을 읽고, 제 조각과 상위 도메인 조각을 가르고, 값이 받는 범위를 적는다', async () => {
-  const { subdomainOf, recipeIsOwn, paramRangeOf } = await import('../client/modeller/v3-recipes.ts')
-  assert.equal(subdomainOf('/domain/plant-1/figure-recipes'), 'plant-1')
-  assert.equal(subdomainOf('/figure-recipes'), '')
-  assert.equal(recipeIsOwn({ domain: { subdomain: 'plant-1' } }, 'plant-1'), true)
-  assert.equal(recipeIsOwn({ domain: { subdomain: 'system' } }, 'plant-1'), false)
-  assert.equal(recipeIsOwn({ domain: { subdomain: 'system' } }, ''), false, '주소가 도메인을 말하지 않으면 제 것이 아니다')
-  assert.equal(paramRangeOf(share), '5 – 95 %')
-  assert.equal(paramRangeOf({ name: 'leaves', kind: 'choice', default: 2, options: [1, 2] }), '1 / 2')
-  const page = read('../client/pages/figure-recipe-page.ts')
-  assert.ok(page.includes('applyV3Recipe(room.asset, parseV3Recipe(recipe)'), '미리보기는 검사하는 방에 넣은 모습')
-  assert.ok(page.includes("saveFigureRecipe(row.source, 'draft')"), '상위 도메인 것은 초안으로 복사해 고친다')
-  assert.ok(page.includes('OxPrompt.open('), '지우기 전에 앱의 확인 창으로 묻는다')
-  assert.ok(read('../things-factory.config.js').includes("{ tagname: 'figure-recipe-page', page: 'figure-recipes' }"))
+test('넣기는 카탈로그에서 온다 — 편집기는 카탈로그 요소에서 insert-recipe 를 듣는다 (잘못 옮겨진 연결, 09-26)', () => {
+  const editor = read('../client/modeller/v3-editor.ts')
+  const catalog = editor.slice(editor.indexOf('<figure-v3-recipe-catalog'), editor.indexOf('</figure-v3-recipe-catalog>'))
+  assert.ok(catalog.includes('@insert-recipe=${(e: CustomEvent) => this.insertRecipe(e.detail.recipe, e.detail.values)}'))
 })

package/things-factory.config.js

@@ -5,7 +5,6 @@ export default {
   route,
   routes: [
     { tagname: 'figure-list-page', page: 'figure-list' },
-    { tagname: 'figure-recipe-page', page: 'figure-recipes' },
     /* One modeller since ADR-0087 step 5; the old V3 address is an alias. The shell builds the DOM from this table. */
     { tagname: 'figure-v3-modeller-page', page: 'figure-modeller' },
     { tagname: 'figure-v3-modeller-page', page: 'figure-v3-modeller' }