@things-factory/figure-ui 10.1.272 → 10.1.273

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

@@ -10,7 +10,7 @@
 import { test, describe, before, after } from 'node:test'
 import assert from 'node:assert/strict'
 
-import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+import { addFigureBox, applyFigureAuthoring, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
 
 import { buildPage } from './build.mjs'
 import { openPage } from './serve.mjs'
@@ -116,6 +116,17 @@ describe('the side panel', () => {
     assert.equal(hit, 'heading')
   })
 
+  test('the heading is one line, the part\'s name and kind side by side, on a ground the rows under it do not show through (user 2026-11-12)', async () => {
+    const head = await read(DEEP => {
+      const subject = eval(DEEP)('div[subject]')[0]
+      const [name, kind] = [subject.querySelector('b'), subject.querySelector('small')]
+      const middle = el => { const r = el.getBoundingClientRect(); return Math.round(r.top + r.height / 2) }
+      return { oneLine: Math.abs(middle(name) - middle(kind)) <= 3, ground: getComputedStyle(subject).backgroundColor }
+    }, DEEP)
+    assert.equal(head.oneLine, true)
+    assert.ok(!/rgba\(.*, 0\)$|transparent/.test(head.ground), `a solid ground: ${head.ground}`)
+  })
+
   test('U5 the motion tab: no animation yet is said in its own words, the controls\' words said once', async () => {
     await click(await tab('motion'), 'the motion tab')
     const hints = await read(DEEP => eval(DEEP)('p[hint]').map(p => p.textContent.trim()), DEEP)
@@ -125,6 +136,7 @@ describe('the side panel', () => {
 
   test('U6 the data tab: a field name and Enter adds the field', async () => {
     await click(await tab('data'), 'the data tab')
+    assert.equal(await read(DEEP => eval(DEEP)('details[add-field]')[0]?.open, DEEP), true, 'no field yet: the form stands open')
     await click(await read(() => look.at('input[aria-label="figure.label.data-name"]')), 'the field name')
     await page().keyboard.type('speed')
     await page().keyboard.press('Enter')
@@ -143,27 +155,49 @@ describe('the side panel', () => {
 
 describe('the preview', () => {
   /* A number and a text, of names far apart in length, each read by a table: the preview gives each a field. */
-  const asset = addFigureBox(createFigureAsset('Probe'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } })
+  /* Its size declared, so the preview offers the size help over it (shown only where the size can change). */
+  const asset = applyFigureAuthoring(addFigureBox(createFigureAsset('Probe'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }), { kind: 'declare-instance-size', at: { x: 400, y: 400, z: 400 } })
   asset.dataInterface = {
     version: 'figure-data-interface-2',
     schema: [
       { name: 'A', kind: 'number' },
-      { name: 'CARRIERSTATUS', kind: 'text' }
+      { name: 'CARRIERSTATUS', kind: 'text' },
+      { name: 'LOW', kind: 'boolean' },
+      { name: 'HEADING', kind: 'number', unit: 'deg' }
     ],
     bindings: [
       { id: 'a', accessor: 'A', rule: 'table', lookup: 'ranges', targets: { parts: ['box'] }, table: { '~10': { color: '#ff0000' }, default: { color: '#0000ff' } } },
+      { id: 'h', accessor: 'HEADING', rule: 'table', lookup: 'ranges', targets: { parts: ['box'] }, table: { '~180': { color: '#00ffff' }, default: { color: '#ffff00' } } },
+      { id: 'l', accessor: 'LOW', rule: 'table', lookup: 'code', targets: { parts: ['box'] }, table: { true: { color: '#ff00ff' }, default: { color: '#0000ff' } } },
       { id: 's', accessor: 'CARRIERSTATUS', rule: 'table', lookup: 'code', targets: { parts: ['box'] }, table: { X: { color: '#00ff00' } } }
     ]
   }
   before(async () => {
     await mount('box', serializeFigureAsset(asset))
     await click(await read(() => probe.modeButton('preview')), 'the preview')
-    await until(DEEP => eval(DEEP)('figure-preview')[0]?.shadowRoot?.querySelectorAll('div[clips] input').length === 2, [DEEP], 'the two values in the preview')
+    await until(DEEP => eval(DEEP)('figure-preview')[0]?.shadowRoot?.querySelectorAll('div[clips] label input').length === 5, [DEEP], 'the four values in the preview')
   })
 
-  test('U7 a number\'s field and a text\'s start in one column, whatever the names\' lengths', async () => {
-    const lefts = await read(DEEP => [...eval(DEEP)('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] input')].map(i => Math.round(i.getBoundingClientRect().left)), DEEP)
-    assert.equal(lefts[0], lefts[1], `the fields start at ${lefts.join(' and ')}`)
+  test('U7 a number\'s field and a text\'s start in one column, whatever the names\' lengths -- and end in one, with the help', async () => {
+    const edges = await read(DEEP => {
+      const root = eval(DEEP)('figure-preview')[0].shadowRoot
+      return [...root.querySelectorAll('div[clips] label input:not([type=checkbox]):not([type=range]):not([typed])'), root.querySelector('div[clips] div[setup] > button')].map(i => {
+        const r = i.getBoundingClientRect()
+        return { left: Math.round(r.left), right: Math.round(r.right) }
+      })
+    }, DEEP)
+    assert.equal(edges[0].left, edges[1].left, `the fields start at ${JSON.stringify(edges)}`)
+    /* A number with no range and a text are as wide as each other, to the help's right edge (user 2026-11-12: every width differed). */
+    assert.equal(edges[0].right, edges[1].right, `the fields end at ${JSON.stringify(edges)}`)
+    assert.equal(edges[0].right, edges[2].right, `the help ends where they do: ${JSON.stringify(edges)}`)
+  })
+  test('the names stay on one line: a unit is not put under its name (user 2026-11-12)', async () => {
+    const tall = await read(DEEP => [...eval(DEEP)('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] label > span:first-child')].map(s => {
+      const range = document.createRange()
+      range.selectNodeContents(s)
+      return new Set([...range.getClientRects()].map(r => Math.round(r.bottom))).size
+    }), DEEP)
+    assert.ok(tall.every(n => n === 1), `lines per name: ${tall}`)
   })
 
   test('U7 the size help\'s choice and button are in the bar\'s look, not the browser\'s grey', async () => {
@@ -183,13 +217,140 @@ describe('the preview', () => {
   test('a value the sample gives is shown as the sample\'s, not offered as a field; the sample off, the field is back', async () => {
     const rows = () => read(DEEP => {
       const root = eval(DEEP)('figure-preview')[0].shadowRoot
-      return { fields: root.querySelectorAll('div[clips] input, div[clips] select').length, sampled: [...root.querySelectorAll('div[clips] label[sampled] output')].map(o => o.textContent.trim()) }
+      return { fields: root.querySelectorAll('div[clips] label input, div[clips] label select').length, sampled: [...root.querySelectorAll('div[clips] label[sampled] output')].map(o => o.textContent.trim()) }
     }, DEEP)
     await read(DEEP => (eval(DEEP)('figure-preview')[0].sample = { A: 4 }), DEEP)
     await until(DEEP => eval(DEEP)('figure-preview')[0].shadowRoot.querySelector('div[clips] label[sampled]'), [DEEP], 'the sampled row')
-    assert.deepEqual(await rows(), { fields: 1, sampled: ['4'] }, 'A from the sample, CARRIERSTATUS still a field')
+    assert.deepEqual(await rows(), { fields: 4, sampled: ['4'] }, 'A from the sample, the others still fields')
     await read(DEEP => (eval(DEEP)('figure-preview')[0].sample = null), DEEP)
     await until(DEEP => !eval(DEEP)('figure-preview')[0].shadowRoot.querySelector('div[clips] label[sampled]'), [DEEP], 'the field back')
-    assert.deepEqual(await rows(), { fields: 2, sampled: [] })
+    assert.deepEqual(await rows(), { fields: 5, sampled: [] })
+  })
+  test('an angle with no range is a dial, a slider over one turn and a box, as the controls\' angles are (user 2026-11-12)', async () => {
+    const row = await read(DEEP => {
+      const label = [...eval(DEEP)('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] label')].find(l => l.querySelector('span').textContent.trim().startsWith('HEADING'))
+      const slider = label.querySelector('input[type=range]')
+      return { dial: !!label.querySelector('svg[dial]'), min: slider?.min, max: slider?.max, box: !!label.querySelector('input[typed]') }
+    }, DEEP)
+    assert.deepEqual(row, { dial: true, min: '0', max: '360', box: true })
+  })
+  test('a click on a number\'s name gives it nothing; dragged, it gives the value dragged to (user 2026-11-12)', async () => {
+    const name = () => read(DEEP => {
+      const label = [...eval(DEEP)('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] label')].find(l => l.querySelector('span').textContent.trim() === 'A')
+      const r = label.querySelector('span[scrub]').getBoundingClientRect()
+      return { x: r.left + 4, y: r.top + r.height / 2 }
+    }, DEEP)
+    const valuing = () => read(DEEP => eval(DEEP)('figure-preview')[0].valuing.A, DEEP)
+    const at = await name()
+    await page().mouse.click(at.x, at.y)
+    assert.equal(await valuing(), undefined, 'a click is not a value')
+    await page().mouse.move(at.x, at.y)
+    await page().mouse.down()
+    await page().mouse.move(at.x + 15, at.y)
+    await page().mouse.up()
+    assert.equal(await valuing(), 15, 'dragged 15 pixels from nothing given')
+  })
+  test('the data tab\'s fields are a table -- field, kind, what each moves -- one row a field (user 2026-11-12)', async () => {
+    await click(await tab('data'), 'the data tab')
+    const table = await until(DEEP => {
+      const fields = eval(DEEP)('div[fields]')[0]
+      if (!fields) return undefined
+      const cells = row => [...row.querySelectorAll(':scope > span')].map(c => c.textContent.trim().replace(/\s+/g, ' '))
+      return { head: cells(fields.querySelector(':scope > div[head]')), rows: [...fields.querySelectorAll(':scope > button[row]')].map(cells) }
+    }, [DEEP], 'the fields table')
+    assert.deepEqual(table.head, ['figure.label.data-column-field', 'figure.label.data-column-kind', 'figure.label.data-column-moves'])
+    assert.equal(table.rows.length, 4, 'one row a field')
+    assert.ok(table.rows.every(r => r.length === 3), JSON.stringify(table.rows))
+    /* What a field moves is named, not counted. */
+    assert.ok(table.rows.every(r => !r[2].includes('figure.label.data-bound')), JSON.stringify(table.rows))
+    const tops = await read(DEEP => [...eval(DEEP)('div[fields]')[0].querySelectorAll(':scope > button[row]')].map(r => [...r.children].map(c => Math.round(c.getBoundingClientRect().left))), DEEP)
+    assert.equal(new Set(tops.map(t => t.join())).size, 1, `the columns line up: ${JSON.stringify(tops)}`)
+    /* With fields there, the form to add one is folded under its summary; on a figure with none it stands open (U6). */
+    assert.equal(await read(DEEP => eval(DEEP)('details[add-field]')[0]?.open, DEEP), false, 'folded')
+  })
+  test('a field\'s row opened holds its bindings and a folded form to add one; no list of bindings apart (user 2026-11-12)', async () => {
+    await read(DEEP => [...eval(DEEP)('div[fields]')[0].querySelectorAll(':scope > button[row]')].find(r => r.textContent.trim().startsWith('A')).click(), DEEP)
+    const detail = await until(DEEP => {
+      const fields = eval(DEEP)('div[fields]')[0]
+      const d = fields.querySelector(':scope > div[detail]')
+      if (!d) return undefined
+      return {
+        lines: [...d.querySelectorAll('div[bindings] button[line] strong')].map(s => s.textContent.trim()),
+        folded: d.querySelector('details[add-binding]')?.open === false,
+        apart: [...fields.getRootNode().querySelectorAll('section > h3')].map(h => h.textContent.trim()).filter(t => t.startsWith('figure.label.data-bindings'))
+      }
+    }, [DEEP], 'the A row opened')
+    assert.deepEqual(detail, { lines: ['A'], folded: true, apart: [] })
+  })
+  test('a table\'s targets are a property list and each value a box of its settings, one under another (user 2026-11-12)', async () => {
+    /* The A row is open from the test before: open its binding. */
+    await read(DEEP => eval(DEEP)('div[fields]')[0].querySelector(':scope > div[detail] button[line]').click(), DEEP)
+    const editor = await until(DEEP => {
+      const d = eval(DEEP)('div[fields]')[0].querySelector(':scope > div[detail]')
+      const targets = d.querySelector('div[targets]')
+      if (!targets) return undefined
+      const cases = [...d.querySelectorAll('div[cases] > div[case]')].map(c => Math.round(c.getBoundingClientRect().left))
+      const names = [...d.querySelectorAll('div[props] > span:nth-child(odd)')].map(n => Math.round(n.getBoundingClientRect().height))
+      return {
+        targets: [...targets.querySelectorAll(':scope > span:not([none])')].map(t => t.textContent.trim()),
+        ticks: targets.querySelectorAll('input[type=checkbox]').length + d.querySelectorAll('div[chips]').length,
+        stacked: cases.length >= 2 && new Set(cases).size === 1,
+        oneLine: names.length > 0 && new Set(names).size === 1
+      }
+    }, [DEEP], 'the table editor')
+    assert.deepEqual(editor, { targets: ['figure.label.data-target-parts', 'box'], ticks: 0, stacked: true, oneLine: true })
+  })
+  test('a sample typed as JSON5 is read, in a box with room for it (user 2026-11-12)', async () => {
+    await click(await tab('data'), 'the data tab')
+    const box = await until(DEEP => eval(DEEP)('textarea[sample]')[0], [DEEP], 'the sample box')
+    assert.ok(box)
+    const seen = await read(async DEEP => {
+      const area = eval(DEEP)('textarea[sample]')[0]
+      area.value = "{ A: 7, CARRIERSTATUS: 'X', }"
+      area.dispatchEvent(new Event('input'))
+      const panel = area.getRootNode().host
+      await panel.updateComplete
+      return {
+        height: Math.round(area.getBoundingClientRect().height),
+        refused: [...panel.shadowRoot.querySelectorAll('p[hint]')].some(p => p.textContent.includes('figure.text.data-not-json'))
+      }
+    }, DEEP)
+    assert.equal(seen.refused, false, 'read, not refused as not JSON')
+    assert.ok(seen.height >= 240, `room for a record: ${seen.height}px`)
+  })
+  test('a yes or no is a check box in the fields\' column; checked, the figure is given true (user 2026-11-12)', async () => {
+    const box = await read(DEEP => {
+      const root = eval(DEEP)('figure-preview')[0].shadowRoot
+      const check = root.querySelector('div[clips] label input[type=checkbox]')
+      return { found: !!check, choices: root.querySelectorAll('div[clips] label select').length, left: Math.round(check.getBoundingClientRect().left), fields: Math.round(root.querySelector('div[clips] label input:not([type=checkbox])').getBoundingClientRect().left) }
+    }, DEEP)
+    assert.deepEqual(box, { found: true, choices: 0, left: box.fields, fields: box.fields }, 'no list of two words; the box where the fields start')
+    await read(DEEP => eval(DEEP)('figure-preview')[0].shadowRoot.querySelector('div[clips] label input[type=checkbox]').click(), DEEP)
+    assert.equal(await read(DEEP => eval(DEEP)('figure-preview')[0].valuing.LOW, DEEP), true)
+  })
+})
+
+describe('the data table\'s kind column', () => {
+  before(async () => {
+    const asset = addFigureBox(createFigureAsset('Kinds'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } })
+    asset.dataInterface = {
+      version: 'figure-data-interface-2',
+      schema: [
+        { name: 'MODE', kind: 'text', values: ['idle', 'walk', 'run'] },
+        { name: 'ANGLE', kind: 'number', unit: 'deg', min: -45, max: 45 }
+      ],
+      bindings: []
+    }
+    await mount('box', serializeFigureAsset(asset))
+  })
+
+  test('says the kind and unit on one line; the values and range in its title (user 2026-11-12)', async () => {
+    await click(await tab('data'), 'the data tab')
+    const cells = await until(DEEP => {
+      const rows = [...(eval(DEEP)('div[fields]')[0]?.querySelectorAll(':scope > button[row]') ?? [])]
+      return rows.length === 2 ? rows.map(r => { const c = r.children[1]; return { text: c.textContent.trim(), title: c.title } }) : undefined
+    }, [DEEP], 'the two rows')
+    assert.ok(cells.every(c => !/[~(]/.test(c.text)), `no range or values in the cell: ${JSON.stringify(cells)}`)
+    assert.ok(cells[0].title.includes('idle, walk, run') && cells[1].title.includes('-45~45'), `said in the title: ${JSON.stringify(cells)}`)
   })
 })

package/test/data-motion.test.ts

@@ -22,6 +22,7 @@ import {
   fieldOfKind,
   fitsField,
   freeIdOf,
+  freeNumberCodeOf,
   legendRoleOf,
   methodsOf,
   motionWrittenByData,
@@ -29,6 +30,7 @@ import {
   schemaFollowingCodes,
   tableColumnsOf,
   tableDraftOf,
+  tableWithKeep,
   tableWithKeys,
   tableWithLook,
   tableWithTargets,
@@ -97,7 +99,7 @@ test('작동 목록과 방법: 값 그대로 · 배율이 움직일 수 있는
   assert.deepEqual(fits({ name: 'o', kind: 'object', fields: [] }), [])
   assert.deepEqual(fits({ name: 'l', kind: 'list', item: { kind: 'object', fields: [] } }), ['items'])
   const choices = behaviorsOf(DOG)
-  assert.deepEqual(methodsOf({ kind: 'number' }, choices), ['value', 'scale', 'ranges'])
+  assert.deepEqual(methodsOf({ kind: 'number' }, choices), ['value', 'scale', 'code', 'ranges'], '숫자도 코드 표 (ADR-0166 개정 1)')
   assert.deepEqual(methodsOf({ kind: 'text' }, choices), ['value', 'code'])
   assert.deepEqual(methodsOf({ kind: 'boolean' }, choices), ['value', 'code'])
   assert.deepEqual(methodsOf({ kind: 'list', item: { kind: 'text' } }, choices), ['value'])
@@ -169,21 +171,20 @@ test('샘플: 보드의 Figure 와 같은 읽기로 -- 무엇을 움직이는지
   assert.ok(Number.isNaN(typedValueOf(row('cadence'), '') as number), '빈 칸은 0 이 아니다')
 })
 
-test('표 초안: 닫힌 칸은 값마다 줄, 열린 칸은 줄 없이, 숫자는 한 구간 -- 새 필드는 표가 만든다 (ADR-0166 10)', () => {
+test('표 초안: 닫힌 칸은 값마다 줄, 열린 칸은 줄 없이, 숫자는 한 구간 (ADR-0166 10)', () => {
   const mode = tableDraftOf(DOG, { path: 'mode', node: fieldAt(DOG.dataInterface!.schema, 'mode')! }, 'code', { parts: ['body'] })
-  assert.deepEqual([mode.binding.id, mode.binding.accessor, mode.binding.table, mode.schema], ['mode', 'mode', { idle: {}, walk: {}, run: {} }, undefined])
+  assert.deepEqual([mode.binding.id, mode.binding.accessor, mode.binding.table], ['mode', 'mode', { idle: {}, walk: {}, run: {} }])
   editFigurePart(DOG, { kind: 'set-data-binding', binding: mode.binding })
   const open = tableDraftOf(DOG, { path: 'status', node: fieldAt(DOG.dataInterface!.schema, 'status')! }, 'code', { parts: ['head'] })
   assert.deepEqual(open.binding.table, {})
   const pct = tableDraftOf(DOG, { path: 'cadence', node: fieldAt(DOG.dataInterface!.schema, 'cadence')! }, 'ranges', { parts: ['body'] })
   assert.deepEqual(pct.binding.table, { '0~': {} })
   editFigurePart(DOG, { kind: 'set-data-binding', binding: pct.binding })
-  /* 새 이름이면 필드를 만든다: 코드 표는 값 목록이 표의 키인 글자, 구간 표는 숫자. 한 걸음에 둘 다. */
-  const made = tableDraftOf(DOG, { name: 'EMPTYTYPE' }, 'code', { parts: ['body'] })
-  assert.deepEqual(made.schema!.at(-1), { name: 'EMPTYTYPE', kind: 'text', values: ['CODE'] })
+  /* 표는 표의 행이 연 필드에 붙는다: 필드는 먼저 등록한다 (데이터 탭이 필드마다 연결을 둔다, 2026-11-12). */
+  const typed = withField(DOG, { name: 'EMPTYTYPE', kind: 'text', values: ['CODE'] })
+  const made = tableDraftOf(typed, { path: 'EMPTYTYPE', node: fieldAt(typed.dataInterface!.schema, 'EMPTYTYPE')! }, 'code', { parts: ['body'] })
   assert.deepEqual(made.binding.table, { CODE: {} })
-  const asset = editFigurePart(DOG, { kind: 'set-data-binding', binding: made.binding, schema: made.schema })
-  assert.deepEqual(tableDraftOf(DOG, { name: 'RATE' }, 'ranges', { parts: ['body'] }).schema!.at(-1), { name: 'RATE', kind: 'number' })
+  const asset = editFigurePart(typed, { kind: 'set-data-binding', binding: made.binding })
   /* 닫힌 필드의 값 목록은 표의 키를 따라간다: 코드를 더하면 필드에도. */
   const b = asset.dataInterface!.bindings.find(x => x.id === 'emptytype')! as never
   const grown = tableWithKeys(b, [['FULL', { color: '#3b6d11' }], ['EMPTY', {}]])
@@ -194,6 +195,25 @@ test('표 초안: 닫힌 칸은 값마다 줄, 열린 칸은 줄 없이, 숫자
   assert.equal(legendRoleOf('Body_Status'), 'body-status')
 })
 
+/*
+ * ADR-0166 개정 1 (2026-11-12, 튜토리얼): MCS 는 STATUS 를 숫자(4002)로 보낸다. 숫자 칸에도 코드 표를 만들고, 「그 밖의 값」은
+ * 표가 마지막으로 보인 모양을 그대로 둘 수 있다 -- 4004(이동 중)에 포크가 내려가지 않는다.
+ */
+test('숫자 칸의 코드 표: 키는 숫자, 새 코드도 숫자 -- 그 밖의 값은 「그대로 둠」, 대상을 바꿔도 남는다 (ADR-0166 개정 1)', () => {
+  const draft = tableDraftOf(DOG, { path: 'cadence', node: fieldAt(DOG.dataInterface!.schema, 'cadence')! }, 'code', { parts: ['body'] })
+  assert.deepEqual(draft.binding.table, { 0: {} }, '숫자 칸의 첫 코드는 0')
+  assert.equal(draft.binding.lookup, 'code')
+  editFigurePart(DOG, { kind: 'set-data-binding', binding: draft.binding })
+  assert.equal(freeNumberCodeOf([]), '0')
+  assert.equal(freeNumberCodeOf(['4002', '4003']), '4004')
+  assert.equal(freeNumberCodeOf(['-1', 'x']), '0')
+  const kept = tableWithKeep(tableWithKeys(draft.binding, [['4002', { color: '#3b6d11' }], ['4003', {}]]), true)
+  assert.deepEqual(kept.table, { 4002: { color: '#3b6d11' }, 4003: {}, default: { keep: true } })
+  editFigurePart(DOG, { kind: 'set-data-binding', binding: kept })
+  assert.deepEqual(tableWithTargets(kept, { parts: ['head'] }).table.default, { keep: true }, '대상을 바꿔도 그대로 둠은 남는다')
+  assert.deepEqual(tableWithKeep(kept, false).table.default, {}, '끄면 빈 모양(기본값)')
+})
+
 test('표의 대상과 열: 부품은 색·효과, 조작값은 값 하나씩, 동작 그룹은 클립·배속·멈춤 -- 대상을 빼면 그 열도 빠진다', () => {
   const free = editFigurePart(DOG, { kind: 'remove-data-binding', id: 'mode-locomotion' })
   const draftTable = tableDraftOf(free, { path: 'mode', node: fieldAt(free.dataInterface!.schema, 'mode')! }, 'code', { parts: ['body'], inputs: ['fl-knee'], group: 'locomotion' }).binding
@@ -295,6 +315,17 @@ test('데이터 탭 · 클립 패널 · 미리보기의 배선과 문구', () =>
   assert.match(editor, /<figure-data-panel/)
   assert.match(editor, /\.sample=\$\{this\.dataSample\}/)
   assert.match(editor, /this\.dataSample = e\.detail\.data/)
+  /*
+   * 견본 데이터는 미리보기에서만 보인다: 편집 화면에서 「미리보기에 적용」을 켜면 그렇게 말하고, 단추 하나로 미리보기로 간다
+   * (튜토리얼 2026-11-12: 켜도 편집 화면이 그대로라 적용이 안 된 것처럼 보였다). 편집 화면은 기본 자세 그대로다.
+   */
+  assert.match(editor, /\?previewing=\$\{this\.middle === 'preview'\}/)
+  assert.match(editor, /@show-preview=\$\{\(\) => \(this\.middle = 'preview'\)\}/)
+  const panel = read('../client/modeller/figure-data-panel.ts')
+  assert.match(panel, /this\.sampling && !this\.previewing/)
+  assert.match(panel, /'figure\.text\.data-sample-shown-in-preview'/)
+  assert.match(panel, /'figure\.button\.data-sample-show-preview'/)
+  assert.match(panel, /new CustomEvent\('show-preview'/)
   /* 「＋ 회전」은 여러 명령을 되돌리기 한 단계로: 하나가 거절되면 아무것도 바뀌지 않는다. */
   assert.match(editor, /@part-edits=\$\{\(e: CustomEvent\) => this\.run\(\(\) => this\.session!\.applyRecipe\(e\.detail\.edits\)\)\}/)
   const preview = read('../client/modeller/figure-preview.ts')

package/test/fasten-form.test.ts

@@ -134,6 +134,31 @@ test('another way of meeting works the gap out again; a number typed stays; a pr
   assert.equal(fastenChanged(r, 'lid', pressed, { mode: 'flush' }).gap, 0, 'pressed: left at 0')
 })
 
+/*
+ * A part already fastened, aimed again through 「바꾸기」, goes where it is aimed with its fastening as it was -- the
+ * gap and the place across the face carried to the new face or part (tutorial 2026-11-12: a pillar copied from the front
+ * one and turned to the body's back face stayed in front, its gap worked out as the whole body's depth). 「현재 상태로
+ * 붙이기」 is a loose part's: fastening it does not move it.
+ */
+test('a fastened part aimed again goes there with its gap and its place across the face; a loose one stays where it stands', () => {
+  const r = conveyor()
+  const own = fastenFormOf(r, 'roller')
+  const under = fastenChanged(r, 'roller', own, { targetFace: 'bottom' })
+  assert.deepEqual([under.targetFace, under.gap, under.align.x, under.alignMm.x], ['bottom', 0, 'mm', 300], 'its own gap and place, not where it stands')
+  const moved = applyFigureAuthoring(r.asset, fastenPlanOf(r, 'roller', under).action as never)
+  const [x, y] = centreOf(moved, 'roller')
+  assert.ok(Math.abs(x! - 300) < 1e-6, `still 300 mm across: ${x}`)
+  assert.ok(y! < 0, `under the frame now: ${y}`)
+  /* Another part: on it, as fastened before. */
+  const onLid = aimFasten(r, 'roller', own, { part: 'lid' })
+  assert.deepEqual([onLid.target, onLid.gap, onLid.alignMm.x], ['lid', 0, 300])
+  /* A mode changed keeps its gap too; a number typed is the author's. */
+  assert.equal(fastenChanged(r, 'roller', own, { mode: 'flush' }).gap, 0)
+  /* The loose lid is fastened where it stands, as before. */
+  const loose = keptGapOf(floating(), 'lid', aimFasten(floating(), 'lid', fastenFormOf(floating(), 'lid'), { part: 'plate' }))
+  assert.equal(loose.gap, 40)
+})
+
 test('the target list: every other part, the one hanging from this part listed as a loop', () => {
   const r = conveyor()
   assert.deepEqual(fastenTargetsOf(r, 'frame'), [

package/test/fasten-geometry.test.ts

@@ -121,3 +121,16 @@ test('the face drawing shows a part bigger than the face whole when lined up wit
   assert.equal(drawingSpanOf(600, 300), 900)
   assert.equal(drawingSpanOf(undefined, 200), 600)
 })
+
+/*
+ * A part far off the face's centre -- a palette box left 1500 mm up, aimed at a body's front -- is drawn whole with its
+ * size label: the drawing reaches it, not only the face and the part's own size (roll cradle tutorial 2026-11-12: the
+ * label was cut off the drawing's top and could not be pressed).
+ */
+test('the face drawing reaches a part standing far off the face, its far edge inside', () => {
+  const span = drawingSpanOf(1200, 300, 1500)
+  assert.ok(span / 2 >= 1500 + 300 / 2, `span ${span}`)
+  assert.equal(drawingSpanOf(1200, 300, -1500), span, 'either side alike')
+  /* Near the centre it keeps the room it had. */
+  assert.equal(drawingSpanOf(600, 300, 100), 900)
+})

package/translations/en.json

@@ -1052,12 +1052,12 @@
   "figure.label.data-scale": "scale",
   "figure.label.data-offset": "offset",
   "figure.label.data-sample": "sample data",
-  "figure.text.data-sample-explained": "Enter one record as JSON to see what it moves. It is read the way a figure on a board reads its data, and not saved.",
-  "figure.text.data-sample-moves-all": "A position in the data moves every figure in the preview to it; on a board, figures given the same value stand in the same place too.",
+  "figure.text.data-sample-explained": "Enter one record as JSON or JSON5 to see what it moves. It is read the way a figure on a board reads its data, and not saved.",
   "figure.label.data-sample-in-preview": "apply to the preview",
+  "figure.text.data-sample-shown-in-preview": "The sample shows in the preview; the edit view keeps the figure as made.",
+  "figure.button.data-sample-show-preview": "Show the preview",
   "figure.label.data-schema": "data shape",
   "figure.text.data-schema-explained": "The shape of the data a site sends this figure. Name each field as the site's data names it; group fields in objects and lists.",
-  "figure.label.data-bound": "{count} bound",
   "figure.text.data-no-fields": "Add a field to the data shape first.",
   "figure.label.data-name": "field name",
   "figure.label.data-label": "display name",
@@ -1068,17 +1068,18 @@
   "figure.button.remove-data-field": "remove the field",
   "figure.label.data-from-sample": "make from a sample",
   "figure.text.data-from-sample-explained": "Paste one record of the site's data to guess its fields. Units, ranges and value lists are not guessed; set them after.",
-  "figure.text.data-not-json": "This is not JSON.",
+  "figure.text.data-not-json": "This is not JSON or JSON5.",
   "figure.text.data-guessed": "{count} fields found.",
   "figure.text.data-guessed-replaces": "{count} fields found. Using them replaces the current data shape.",
   "figure.button.data-use-guessed": "use this shape",
-  "figure.text.data-bindings-explained": "Connects data values to the figure. A number shows as it is, scaled, or by a range table; a text or true/false by a code table. A table sets, per value, parts' colour and effect, controls and a motion group at once. Select a row to edit it.",
-  "figure.label.data-field": "data value",
+  "figure.text.data-bindings-explained": "Connects data values to the figure. A number applies unchanged, scaled, or by a range table; a text or true/false by a code table. A table sets, per value, parts' colour and effect, controls and a motion group at once. Select a row to edit it.",
   "figure.label.data-behavior": "behaviour",
   "figure.label.data-seconds": "travel time (s)",
   "figure.label.data-paused": "paused",
   "figure.label.data-playing": "playing",
   "figure.label.data-otherwise": "any other value",
+  "figure.label.data-keep": "keep as is",
+  "figure.text.data-keep": "A value with no row of its own leaves the look this table last showed.",
   "figure.label.data-range-from": "from",
   "figure.label.data-range-to": "below",
   "figure.button.add-data-range": "add an interval",
@@ -1101,7 +1102,6 @@
   "figure.button.data-add-rotation": "make the rotation",
   "figure.label.data-none": "none",
   "figure.button.remove-data-binding": "remove the binding",
-  "figure.label.data-items-count": "{count} items",
   "figure.text.data-value-not-a-list": "{path}: not a list.",
   "figure.text.data-value-value-unknown": "{path}: not one of its values.",
   "figure.text.data-value-json-unreadable": "{path}: the JSON text cannot be read.",
@@ -1239,10 +1239,7 @@
   "figure.label.data-legend-role": "Legend role",
   "figure.label.data-legend-swappable": "A board may swap it for a legend",
   "figure.label.data-method": "Method",
-  "figure.label.data-new-field": "New field",
   "figure.label.data-sample-legend": "Sample legend",
-  "figure.label.data-table-legend": "legend {name}",
-  "figure.label.data-table-own": "figure's table",
   "figure.label.data-target-group": "Motion group",
   "figure.label.data-target-inputs": "Controls",
   "figure.label.data-target-parts": "Parts",
@@ -1410,5 +1407,20 @@
   "figure.label.clip-interpolation-smooth": "Ease in and out",
   "figure.label.clip-interpolation-step": "Jump",
   "figure.text.copy-track-off-key": "A smooth track can be shifted only so that it starts at one of its keys. Possible values: {seconds} s",
-  "figure.text.mirror-copies-clips": "The motion in {clips} is copied to the copy too."
+  "figure.text.mirror-copies-clips": "The motion in {clips} is copied to the copy too.",
+  "figure.label.data-bindings-title": "Data bindings",
+  "figure.label.data-column-field": "Field",
+  "figure.label.data-column-kind": "Kind",
+  "figure.label.data-column-moves": "Drives",
+  "figure.text.data-method-does-value": "Applies the data value unchanged.",
+  "figure.text.data-method-does-scale": "Applies the data value multiplied by a scale.",
+  "figure.text.data-method-does-code": "Applies what the table sets for each data value.",
+  "figure.text.data-method-does-ranges": "Applies what the table sets for the range the data value falls in.",
+  "figure.label.data-bindings-without-field": "Bindings without a field",
+  "figure.button.add": "Add",
+  "figure.label.data-targets": "Targets",
+  "figure.label.data-target-add": "Add target",
+  "figure.label.data-target-choose": "Choose a part or control",
+  "figure.text.data-no-targets": "No target chosen.",
+  "figure.button.data-remove-target": "Remove target"
 }

package/translations/es.json

@@ -1052,12 +1052,12 @@
   "figure.label.data-scale": "escala",
   "figure.label.data-offset": "desplazamiento",
   "figure.label.data-sample": "datos de ejemplo",
-  "figure.text.data-sample-explained": "Introduzca un registro en JSON para ver qué mueve. Se lee como una figura en un tablero lee sus datos, y no se guarda.",
-  "figure.text.data-sample-moves-all": "Una posición en los datos lleva todas las figuras de la vista previa a ella; en un tablero, las figuras con el mismo valor también quedan en el mismo lugar.",
+  "figure.text.data-sample-explained": "Introduzca un registro en JSON o JSON5 para ver qué mueve. Se lee como una figura en un tablero lee sus datos, y no se guarda.",
   "figure.label.data-sample-in-preview": "aplicar a la vista previa",
+  "figure.text.data-sample-shown-in-preview": "Los datos de muestra se ven en la vista previa; la edición muestra la figura tal como se hizo.",
+  "figure.button.data-sample-show-preview": "Ver la vista previa",
   "figure.label.data-schema": "forma de los datos",
   "figure.text.data-schema-explained": "La forma de los datos que un sitio envía a esta figura. Nombre cada campo como lo nombran los datos del sitio; agrupe campos en objetos y listas.",
-  "figure.label.data-bound": "{count} vinculados",
   "figure.text.data-no-fields": "Primero añada un campo a la forma de los datos.",
   "figure.label.data-name": "nombre del campo",
   "figure.label.data-label": "nombre visible",
@@ -1068,17 +1068,18 @@
   "figure.button.remove-data-field": "quitar el campo",
   "figure.label.data-from-sample": "crear desde una muestra",
   "figure.text.data-from-sample-explained": "Pegue un registro de los datos del sitio para deducir sus campos. Unidades, rangos y listas de valores no se deducen; fíjelos después.",
-  "figure.text.data-not-json": "No es JSON.",
+  "figure.text.data-not-json": "No es JSON ni JSON5.",
   "figure.text.data-guessed": "Se encontraron {count} campos.",
   "figure.text.data-guessed-replaces": "Se encontraron {count} campos. Usarlos reemplaza la forma de datos actual.",
   "figure.button.data-use-guessed": "usar esta forma",
   "figure.text.data-bindings-explained": "Conecta valores de datos con la figura. Un número se muestra tal cual, escalado o con una tabla de rangos; un texto o verdadero/falso, con una tabla de códigos. Una tabla fija por valor el color y efecto de las piezas, los controles y un grupo de movimiento. Seleccione una fila para editarla.",
-  "figure.label.data-field": "valor de datos",
   "figure.label.data-behavior": "comportamiento",
   "figure.label.data-seconds": "tiempo de desplazamiento (s)",
   "figure.label.data-paused": "en pausa",
   "figure.label.data-playing": "en marcha",
   "figure.label.data-otherwise": "cualquier otro valor",
+  "figure.label.data-keep": "mantener",
+  "figure.text.data-keep": "Un valor sin fila propia deja el aspecto que esta tabla mostró por última vez.",
   "figure.label.data-range-from": "desde",
   "figure.label.data-range-to": "hasta (sin incluir)",
   "figure.button.add-data-range": "añadir intervalo",
@@ -1101,7 +1102,6 @@
   "figure.button.data-add-rotation": "crear la rotación",
   "figure.label.data-none": "ninguno",
   "figure.button.remove-data-binding": "quitar el vínculo",
-  "figure.label.data-items-count": "{count} artículos",
   "figure.text.data-value-not-a-list": "{path}: no es una lista.",
   "figure.text.data-value-value-unknown": "{path}: no es uno de sus valores.",
   "figure.text.data-value-json-unreadable": "{path}: no se puede leer el texto JSON.",
@@ -1239,10 +1239,7 @@
   "figure.label.data-legend-role": "Rol de leyenda",
   "figure.label.data-legend-swappable": "Quien lo usa puede cambiarla por una leyenda",
   "figure.label.data-method": "Método",
-  "figure.label.data-new-field": "Campo nuevo",
   "figure.label.data-sample-legend": "Leyenda de ejemplo",
-  "figure.label.data-table-legend": "leyenda {name}",
-  "figure.label.data-table-own": "tabla de la figura",
   "figure.label.data-target-group": "Grupo de movimiento",
   "figure.label.data-target-inputs": "Controles",
   "figure.label.data-target-parts": "Piezas",
@@ -1410,5 +1407,20 @@
   "figure.label.clip-interpolation-smooth": "Arranque y parada suaves",
   "figure.label.clip-interpolation-step": "Salto",
   "figure.text.copy-track-off-key": "Una pista suave solo puede desplazarse para que empiece en una de sus claves. Valores posibles: {seconds} s",
-  "figure.text.mirror-copies-clips": "El movimiento de {clips} también se copia en la copia."
+  "figure.text.mirror-copies-clips": "El movimiento de {clips} también se copia en la copia.",
+  "figure.label.data-bindings-title": "Vínculos de datos",
+  "figure.label.data-column-field": "Campo",
+  "figure.label.data-column-kind": "Tipo",
+  "figure.label.data-column-moves": "Mueve",
+  "figure.text.data-method-does-value": "Aplica el valor del dato sin convertirlo.",
+  "figure.text.data-method-does-scale": "Aplica el valor del dato multiplicado por una escala.",
+  "figure.text.data-method-does-code": "Aplica lo que la tabla fija para cada valor del dato.",
+  "figure.text.data-method-does-ranges": "Aplica lo que la tabla fija para el intervalo en que cae el valor.",
+  "figure.label.data-bindings-without-field": "Vínculos sin campo",
+  "figure.button.add": "Añadir",
+  "figure.label.data-targets": "Destinos",
+  "figure.label.data-target-add": "Añadir destino",
+  "figure.label.data-target-choose": "Elija una pieza o un control",
+  "figure.text.data-no-targets": "No hay destinos elegidos.",
+  "figure.button.data-remove-target": "Quitar destino"
 }

package/translations/ja.json

@@ -1052,12 +1052,12 @@
   "figure.label.data-scale": "倍率",
   "figure.label.data-offset": "加算",
   "figure.label.data-sample": "サンプルデータ",
-  "figure.text.data-sample-explained": "データを1件JSONで入れて何が動くかを確認します。ボードに置いたFigureと同じ方法で読み、保存しません。",
-  "figure.text.data-sample-moves-all": "位置を決める値はプレビューのFigureをすべてその位置に移します。ボードでも同じ値を受けたFigureは同じ位置に立ちます。",
+  "figure.text.data-sample-explained": "データを1件JSONまたはJSON5で入れて何が動くかを確認します。ボードに置いたFigureと同じ方法で読み、保存しません。",
   "figure.label.data-sample-in-preview": "プレビューに適用",
+  "figure.text.data-sample-shown-in-preview": "サンプルデータはプレビューに表示されます。編集画面は作ったままです。",
+  "figure.button.data-sample-show-preview": "プレビューで見る",
   "figure.label.data-schema": "データ形式",
   "figure.text.data-schema-explained": "現場がこのFigureに送るデータの形です。フィールド名は現場データの名前どおりに書き、オブジェクトとリストでまとめられます。",
-  "figure.label.data-bound": "動作 {count}件",
   "figure.text.data-no-fields": "先にデータ形式にフィールドを追加します。",
   "figure.label.data-name": "フィールド名",
   "figure.label.data-label": "表示名",
@@ -1068,17 +1068,18 @@
   "figure.button.remove-data-field": "フィールドを削除",
   "figure.label.data-from-sample": "サンプルから作る",
   "figure.text.data-from-sample-explained": "現場データを1件貼り付けるとフィールドを推定します。単位・範囲・値の一覧は推定しないので、置き換えた後に決めます。",
-  "figure.text.data-not-json": "JSON形式ではありません。",
+  "figure.text.data-not-json": "JSONまたはJSON5形式ではありません。",
   "figure.text.data-guessed": "フィールドが {count} 件見つかりました。",
   "figure.text.data-guessed-replaces": "フィールドが {count} 件見つかりました。置き換えると今のデータ形式に代わります。",
   "figure.button.data-use-guessed": "この形式に置き換える",
   "figure.text.data-bindings-explained": "データの値をフィギュアにつなぎます。数値はそのまま・倍率・区間表で、文字と真偽はコード表で表示します。表は値ごとに部品の色と効果、操作値、動作グループをまとめて決めます。行を選ぶと編集できます。",
-  "figure.label.data-field": "データ値",
   "figure.label.data-behavior": "動作",
   "figure.label.data-seconds": "移動時間 (秒)",
   "figure.label.data-paused": "一時停止",
   "figure.label.data-playing": "再生",
   "figure.label.data-otherwise": "その他の値",
+  "figure.label.data-keep": "そのまま",
+  "figure.text.data-keep": "表にない値が来ると、この表が最後に示した見た目をそのまま保ちます。",
   "figure.label.data-range-from": "以上",
   "figure.label.data-range-to": "未満",
   "figure.button.add-data-range": "区間を追加",
@@ -1101,7 +1102,6 @@
   "figure.button.data-add-rotation": "回転を作る",
   "figure.label.data-none": "なし",
   "figure.button.remove-data-binding": "連結を削除",
-  "figure.label.data-items-count": "アイテム {count}件",
   "figure.text.data-value-not-a-list": "{path}: リストではありません。",
   "figure.text.data-value-value-unknown": "{path}: 値の一覧にない値です。",
   "figure.text.data-value-json-unreadable": "{path}: JSON文字列を読めません。",
@@ -1239,10 +1239,7 @@
   "figure.label.data-legend-role": "凡例の役割",
   "figure.label.data-legend-swappable": "使う側が凡例に置き換えられる",
   "figure.label.data-method": "方法",
-  "figure.label.data-new-field": "新しいフィールド",
   "figure.label.data-sample-legend": "サンプル凡例",
-  "figure.label.data-table-legend": "凡例 {name}",
-  "figure.label.data-table-own": "フィギュアの表",
   "figure.label.data-target-group": "動作グループ",
   "figure.label.data-target-inputs": "操作値",
   "figure.label.data-target-parts": "部品",
@@ -1410,5 +1407,20 @@
   "figure.label.clip-interpolation-smooth": "滑らかに発進・停止",
   "figure.label.clip-interpolation-step": "即時切り替え",
   "figure.text.copy-track-off-key": "滑らかに動くトラックは、キーのある時点に合わせてのみ時間をずらせます。可能な値: {seconds}秒",
-  "figure.text.mirror-copies-clips": "「{clips}」クリップの動きもコピーに一緒に複製されます。"
+  "figure.text.mirror-copies-clips": "「{clips}」クリップの動きもコピーに一緒に複製されます。",
+  "figure.label.data-bindings-title": "データ連結",
+  "figure.label.data-column-field": "フィールド",
+  "figure.label.data-column-kind": "種類",
+  "figure.label.data-column-moves": "連結先",
+  "figure.text.data-method-does-value": "データ値を変換せずに適用します。",
+  "figure.text.data-method-does-scale": "データ値に倍率を掛けて適用します。",
+  "figure.text.data-method-does-code": "データ値ごとに表で指定した設定を適用します。",
+  "figure.text.data-method-does-ranges": "データ値が属する区間ごとに表で指定した設定を適用します。",
+  "figure.label.data-bindings-without-field": "フィールドのない連結",
+  "figure.button.add": "追加",
+  "figure.label.data-targets": "対象",
+  "figure.label.data-target-add": "対象を追加",
+  "figure.label.data-target-choose": "部品または操作値を選択",
+  "figure.text.data-no-targets": "選択した対象がありません。",
+  "figure.button.data-remove-target": "対象を削除"
 }