@things-factory/figure-ui 10.1.85 → 10.1.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.85",
+  "version": "10.1.87",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -27,7 +27,7 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.2.0",
+    "@hatiolab/figure-model": "^0.2.3",
     "@hatiolab/things-scene": "^10.1.63",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
@@ -40,9 +40,9 @@
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/ai-assistant": "^10.1.81",
+    "@things-factory/ai-assistant": "^10.1.87",
     "@things-factory/figure-service": "^10.1.84",
     "three": "^0.185.1"
   },
-  "gitHead": "cbca21a8021b950f558f5547d5df4d12c199a3ef"
+  "gitHead": "dc552c2a7b7f97e3377a26c378ee15d3a1de612a"
 }

package/test/browser/acceptance-page.js

@@ -40,6 +40,13 @@ export const MODELS = {
   ceiling: () => box('ceiling', { x: 200, y: -200, z: 150 }),
   wall: () => box('wall', { x: 200, y: 200, z: 200 }),
   center: () => box('center', { x: 200, y: 200, z: 150 }),
+  /* A triangle pushed up: its section edited point by point (ADR-0100 stage 2). */
+  wedge: () => {
+    let a = createFigureAsset('Wedge')
+    a.palette = { ...a.palette, ...PALETTE }
+    a = addFigurePrimitive(a, { id: 'wedge', kind: 'polygon', dimensions: { height: 200 }, points: [{ x: -300, z: -200 }, { x: 300, z: -200 }, { x: 0, z: 250 }], position: { x: 0, y: 100, z: 0 } })
+    return serializeFigureAsset(a)
+  },
   /* A box and a drum: rounded corners and an inside from the properties tab (ADR-0100 stage 1). */
   shapes: () => {
     let a = createFigureAsset('Box and drum')

package/test/section-editor.test.ts

@@ -0,0 +1,232 @@
+/*
+ * **단면 편집 — 점을 옮기고 더하고 지운다** (ADR-0100 2단계, 2026-09-30).
+ *
+ * 편집 창이 하는 점 편집이 figure-model 의 한 명령으로 받아들여지는지, 잘못된 단면을 커널의 말 그대로 사람의 말로 하는지,
+ * 점 번호가 편집 내내 제 이름의 번호인지를 잰다. 2단계 종료 조건: 삼각형 → 사다리꼴, 점 추가·삭제, 오목 단면, 자기 교차 거절.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { addFigurePrimitive, applyFigureAuthoring, compileFigureAsset, createFigureAsset } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureEvaluatedShape, FigureSectionPoint } from '@hatiolab/figure-model'
+
+import { extentOf, insertAfter, issueWords, issuesOf, markedBy, movePoint, nextPointId, pointLabel, removePoint } from '../client/modeller/section-drawing.ts'
+import { livePartsOf } from '../client/modeller/live.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+/* A source file is a big string: a failing assert.match on it spends minutes building the diff and looks hung. */
+const has = (source: string, re: RegExp, message?: string) => assert.ok(re.test(source), message ?? `missing: ${re}`)
+const hasNot = (source: string, re: RegExp, message?: string) => assert.ok(!re.test(source), message ?? `present: ${re}`)
+const editorPanel = read('../client/modeller/figure-section-editor.ts')
+const sectionPanel = read('../client/modeller/figure-section-panel.ts')
+const editor = read('../client/modeller/editor.ts')
+const ko = JSON.parse(read('../translations/ko.json')) as Record<string, string>
+const say = (key: string, params: Record<string, string>) => Object.entries(params).reduce((s, [k, v]) => s.replace(`{${k}}`, v), ko[key] ?? key)
+
+const triangle = () =>
+  addFigurePrimitive(createFigureAsset('Drawn'), {
+    id: 'wedge',
+    kind: 'polygon',
+    dimensions: { height: 100 },
+    points: [{ x: -50, z: -40 }, { x: 50, z: -40 }, { x: 0, z: 40 }],
+    position: { x: 0, y: 50, z: 0 }
+  })
+const shapeOf = (asset: FigureAsset) =>
+  (compileFigureAsset(asset).evaluate().geometry.find(g => (g as { id: string }).id === 'wedge') as unknown as { shape: FigureEvaluatedShape }).shape
+const pointsOf = (asset: FigureAsset) => {
+  const s = shapeOf(asset).extrusion!.section
+  return s.kind === 'polygon' ? s.points : []
+}
+const apply = (asset: FigureAsset, points: readonly FigureSectionPoint[]) =>
+  applyFigureAuthoring(asset, { kind: 'set-section', part: 'wedge', points: [...points] })
+
+test('삼각형 → 사다리꼴: 선을 눌러 점을 더하고 옮기면, 한 명령으로 들어가고 옛 점은 제 번호를 지킨다', () => {
+  const t = triangle()
+  const start = pointsOf(t)
+  const apex = start.find(p => p.z === 40)!
+  /* The side from the apex to the next point gains a point in its middle, then both move out to the top corners. */
+  const added = insertAfter(start, apex.id, 'y')
+  assert.equal(added.id, 'p4', 'one past the highest number')
+  /* The loop runs 1 → 3 (apex) → 2, so the new point stands between the apex and 2: the apex goes left, the new one right. */
+  let working = movePoint(added.points, apex.id, { x: -25, z: 40 })
+  working = movePoint(working, added.id, { x: 25, z: 40 })
+  const next = apply(t, working)
+  const after = pointsOf(next)
+  assert.equal(after.length, 4)
+  assert.deepEqual(after.find(p => p.id === apex.id), { id: apex.id, x: -25, z: 40 })
+  assert.deepEqual(after.map(p => pointLabel(p.id)).sort(), ['1', '2', '3', '4'])
+})
+
+test('점을 지우면 남은 점은 제 번호 그대로이고, 세 점 밑으로는 까닭과 함께 막는다', () => {
+  const t = triangle()
+  /* A point added on a side is valid where it stands (a straight angle); moved out, the section is a quadrilateral. */
+  const added = insertAfter(pointsOf(t), 'p1', 'y')
+  assert.deepEqual(issuesOf(added.points, 'y'), [], 'a point on a side is taken before it is moved')
+  const four = apply(t, movePoint(added.points, added.id, { x: -60, z: 10 }))
+  const three = removePoint(pointsOf(four), 'p2')
+  assert.ok(Array.isArray(three))
+  const after = pointsOf(apply(four, three as FigureSectionPoint[]))
+  assert.deepEqual(after.map(p => p.id).sort(), ['p1', 'p3', 'p4'], 'deleting 2 leaves 1, 3 and 4')
+  assert.deepEqual(removePoint(after, 'p1'), { refused: 'too-few' })
+  assert.equal(nextPointId(after), 'p5', 'a new point does not take the gap')
+})
+
+test('오목 단면은 받고, 교차하는 선은 표시한 선·점과 사람의 말로 거절한다', () => {
+  const t = triangle()
+  const notch: FigureSectionPoint[] = [
+    { id: 'p1', x: -50, z: -40 },
+    { id: 'p2', x: 50, z: -40 },
+    { id: 'p3', x: 50, z: 40 },
+    { id: 'p4', x: 0, z: 0 },
+    { id: 'p5', x: -50, z: 40 }
+  ]
+  assert.deepEqual(issuesOf(notch, 'y'), [])
+  assert.equal(pointsOf(apply(t, notch)).length, 5)
+  const bow: FigureSectionPoint[] = [
+    { id: 'p1', x: -50, z: -40 },
+    { id: 'p2', x: 50, z: 40 },
+    { id: 'p3', x: 50, z: -40 },
+    { id: 'p4', x: -50, z: 40 }
+  ]
+  const issues = issuesOf(bow, 'y')
+  assert.equal(issues[0]!.code, 'SIDES_CROSS')
+  const words = issueWords(issues[0]!, bow, 'y')
+  assert.equal(say(words.key, words.params), '1–2 선과 3–4 선이 교차합니다. 표시된 점을 옮겨 주세요.')
+  const marked = markedBy(issues)
+  assert.deepEqual([...marked.points].sort(), ['p1', 'p2', 'p3', 'p4'])
+  assert.throws(() => apply(t, bow), /SECTION_INVALID/)
+})
+
+test('치는 동안 입체는 그 점으로 그려지고, 잘못된 동안은 마지막으로 유효했던 모양으로 그린다', () => {
+  const t = triangle()
+  const square: FigureSectionPoint[] = [
+    { id: 'p1', x: -50, z: -40 },
+    { id: 'p2', x: 50, z: -40 },
+    { id: 'p3', x: 50, z: 40 },
+    { id: 'p4', x: -50, z: 40 }
+  ]
+  const drawn = livePartsOf(t, { values: {}, action: { kind: 'set-section', part: 'wedge', points: square } })!
+  const body = drawn.find(p => p.id === 'wedge') as unknown as { shape: FigureEvaluatedShape }
+  assert.equal((body.shape.extrusion!.section as { points: unknown[] }).points.length, 4)
+  assert.equal(pointsOf(t).length, 3, 'the figure itself is not changed')
+  has(editorPanel, /detail: \{ action: this\.action\(this\.lastValid\) \}/, 'the preview is always of a valid shape')
+  has(editorPanel, /figure\.text\.section-editor-last-valid/)
+})
+
+test('적용은 한 명령, 취소·Esc 는 아무것도 보내지 않는다 — 창을 연 뒤 도형이 바뀌면 적용을 막는다', () => {
+  has(editorPanel, /private apply\(\) \{\s*if \(this\.stale \|\| !this\.valid\(this\.working\)\) return/)
+  has(editorPanel, /private cancel\(\) \{\s*this\.dispatchEvent\(new CustomEvent\('command-live', \{ detail: \{ action: null \}/)
+    has(editorPanel, /return this\.revision !== this\.openedAt/)
+  has(editor, /<figure-section-editor[\s\S]*?\.revision=\$\{this\.session\?\.read\(\)\.revision \?\? 0\}[\s\S]*?@command=\$\{\(e: CustomEvent\) => this\.linkCommand\(e\.detail\.action\)\}/)
+  has(editor,
+    /protected willUpdate[\s\S]*?if \(this\.sectionEditing && this\.sectionEditing !== this\.selected\) this\.closeSectionEditor\(\)\s*\}/,
+    'the selection moved off the part by any way closes it and lets go of the preview'
+  )
+  has(editor, /private closeSectionEditor\(\) \{\s*this\.sectionEditing = null\s*this\.holdAction\(null\)/)
+  has(sectionPanel, /section-editor-open/)
+})
+
+test('Delete 키는 칸 안에서는 글자를, 밖에서는 고른 점을 지운다 — 창이 먼저 듣고, 받은 키는 뒤의 장면에 넘기지 않는다', () => {
+  has(editorPanel, /\(e\.key === 'Delete' \|\| e\.key === 'Backspace'\) && !inField && this\.selected/)
+  /* The scene listens on its own element and stops the key there: heard later, Esc selected nothing and Delete took the part. */
+  has(editorPanel, /window\.addEventListener\('keydown', this\.keys, true\)/)
+  has(editorPanel, /const take = \(\) => \(e\.preventDefault\(\), e\.stopImmediatePropagation\(\)\)/)
+  has(editorPanel, /if \(e\.key === 'Escape'\) \{\s*take\(\)\s*this\.cancel\(\)/)
+})
+
+test('그림은 점을 다 담고 여유를 둔다 — 50 mm 단위로', () => {
+  assert.equal(extentOf([{ id: 'p1', x: -50, z: -40 }, { id: 'p2', x: 50, z: -40 }, { id: 'p3', x: 0, z: 40 }], 'y'), 150)
+})
+
+test('편집 창의 말은 다섯 말 모두에 있다', () => {
+  const keys = [...new Set([...editorPanel.matchAll(/'(figure\.(?:label|text|button)\.section-[\w-]+)'/g)].map(m => m[1]!))]
+  const drawing = read('../client/modeller/section-drawing.ts')
+  keys.push(...new Set([...drawing.matchAll(/'(figure\.text\.section-issue-[\w-]+)'/g)].map(m => m[1]!)))
+  assert.ok(keys.length >= 20, String(keys.length))
+  for (const lang of ['ko', 'en', 'ja', 'zh', 'ms']) {
+    const words = JSON.parse(read(`../translations/${lang}.json`)) as Record<string, string>
+    for (const key of keys) assert.ok(words[key], `${lang} has ${key}`)
+  }
+})
+
+test('창의 네 줄은 줄 번호로 선다 — 넓은 화면에서 탭 줄이 숨어도 적용·취소가 밀려 나가지 않는다', () => {
+  for (const [part, row] of [['header', 1], ['nav\\[tabs\\]', 2], ['div\\[body\\]', 3], ['footer', 4]] as const)
+    has(editorPanel, new RegExp(`${part} \\{\\s*grid-row: ${row};`))
+})
+
+test('치는 동안의 명령이 쓴 입력은 명령의 값으로 그린다 — 지금 값이 옮긴 점·다시 친 반지름을 되돌리지 않는다', async () => {
+  const { liveOverSession } = await import('../client/modeller/live.ts')
+  const t = triangle()
+  const moved = pointsOf(t).map(p => (p.id === 'p3' ? { ...p, x: -30 } : p))
+  const drawn = liveOverSession(t, { ...t.designInputs }, { values: {}, action: { kind: 'set-section', part: 'wedge', points: moved } })!
+  const wedge = drawn.find(p => p.id === 'wedge') as unknown as { shape: FigureEvaluatedShape }
+  assert.equal((wedge.shape.extrusion!.section as { points: FigureSectionPoint[] }).points.find(p => p.id === 'p3')!.x, -30)
+  /* Stage 1's corner, typed a second time: the radius drawn is the one typed, not the one applied before. */
+  const { addFigureBox } = await import('@hatiolab/figure-model')
+  const rounded = applyFigureAuthoring(addFigureBox(createFigureAsset('B'), { id: 'b', size: { x: 400, y: 100, z: 300 }, position: { x: 0, y: 50, z: 0 } }), { kind: 'set-section-corner', part: 'b', corner: 20 })
+  const again = liveOverSession(rounded, { ...rounded.designInputs }, { values: {}, action: { kind: 'set-section-corner', part: 'b', corner: 80 } })!
+  const b = again.find(p => p.id === 'b') as unknown as { shape: FigureEvaluatedShape }
+  assert.deepEqual((b.shape.extrusion!.section as { corner: unknown }).corner, { x: 80, z: 80 })
+})
+
+test('편집 창이 열린 동안 모델러의 키는 비켜선다 — Esc 가 선택을, Delete 가 부품을, Ctrl+Z 가 도형의 기록을 건드리지 않는다', () => {
+  const onKey = editor.slice(editor.indexOf('  private onKey = '), editor.indexOf('  connectedCallback() {', editor.indexOf('  private onKey = ')))
+  has(onKey, /if \(this\.sectionEditing\) return\s*const canvas/)
+  assert.ok(onKey.indexOf('if (this.sectionEditing) return') < onKey.indexOf('keyActionOf('), 'before any key is taken')
+})
+
+test('속성 칸의 점 좌표도 커널 이름이 아니라 「점 1 Z」로 부른다 — 편집 창과 같은 말', () => {
+  has(editor, /const point = \/\^point\\\.p\(\\d\+\)\\\.\(\[xyz\]\)\$\/\.exec\(name\)/)
+  has(editor, /i18next\.t\('figure\.label\.section-editor-coordinate', \{ point: point\[1\]!, axis: point\[2\]!\.toUpperCase\(\) \}\)/)
+  assert.equal(say('figure.label.section-editor-coordinate', { point: '1', axis: 'Z' }), '점 1 Z')
+})
+
+test('편집 창 옆에 입체를 볼 자리가 없으면 윤곽과 입체 결과를 번갈아 본다 (§7)', async () => {
+  const { NARROW_BELOW } = { NARROW_BELOW: Number(/export const NARROW_BELOW = (\d+)/.exec(editorPanel)![1]) }
+  assert.ok(NARROW_BELOW > 560, 'wider than the editor itself')
+  has(editorPanel, /:host\(\[narrow\]\) nav\[tabs\] \{\s*display: flex;/)
+  has(editorPanel, /:host\(\[narrow\]\[show='solid'\]\) div\[body\] \{\s*display: none;/)
+  has(editorPanel, /this\.room\.observe\(this\.parentElement\)/)
+})
+
+test('사각형·원도 같은 창에서 — 폭·지름·길이를 한 명령으로, 바꾸지 않은 치수는 보내지 않는다', async () => {
+  const { addFigureBox, figureSectionMeasuresOf } = await import('@hatiolab/figure-model')
+  const { workingOf, workingIssuesOf, sectionOf } = await import('../client/modeller/section-drawing.ts')
+  const box = applyFigureAuthoring(addFigureBox(createFigureAsset('B'), { id: 'b', size: { x: 400, y: 200, z: 300 }, position: { x: 0, y: 100, z: 0 } }), { kind: 'set-placement', placement: 'floor' })
+  const shape = (compileFigureAsset(box).evaluate().geometry.find(g => (g as { id: string }).id === 'b') as unknown as { shape: FigureEvaluatedShape }).shape
+  const w = workingOf(shape)
+  assert.deepEqual(w, { points: [], across: { x: 400, z: 300 }, length: 200 })
+  assert.deepEqual(sectionOf(shape, { ...w, across: { x: 500, z: 300 } }), { kind: 'rectangle', size: { x: 500, z: 300 } })
+  assert.deepEqual(figureSectionMeasuresOf(box, 'b')!.measures, { y: 'editable', x: 'editable', z: 'editable' })
+  /* The editor sends only what changed: a measure left alone may follow another value and must not be written. */
+  has(editorPanel, /const across = Object\.fromEntries\(Object\.entries\(w\.across\)\.filter\(\(\[k, v\]\) => changed\(v, o\.across\[k as Axis\]\)\)\)/)
+  const next = applyFigureAuthoring(box, { kind: 'set-section', part: 'b', across: { x: 500 }, length: 260 })
+  const b = (compileFigureAsset(next).evaluate().geometry.find(g => (g as { id: string }).id === 'b') as unknown as { shape: FigureEvaluatedShape; pose: { t: number[] } })
+  assert.deepEqual(b.shape.extrusion!.section, { kind: 'rectangle', size: { x: 500, z: 300 } })
+  assert.equal(b.pose.t[1]! + b.shape.extrusion!.start, 0, 'a floor figure keeps its bottom')
+  /* A corner that no longer fits, and a length of 0, are said before anything is sent. */
+  const rounded = applyFigureAuthoring(box, { kind: 'set-section-corner', part: 'b', corner: 100 })
+  const r = (compileFigureAsset(rounded).evaluate().geometry.find(g => (g as { id: string }).id === 'b') as unknown as { shape: FigureEvaluatedShape }).shape
+  const narrow = workingIssuesOf(r, { ...workingOf(r), across: { x: 150, z: 300 } }).words
+  assert.equal(say(narrow[0]!.key, narrow[0]!.params), '이 폭에서는 모서리 반지름이 75 mm 까지입니다. 폭을 넓히거나 모서리를 줄입니다.')
+  assert.equal(workingIssuesOf(r, { ...workingOf(r), length: 0 }).words[0]!.key, 'figure.text.section-issue-length')
+})
+
+test('속 공간이 있으면 폭·길이가 그 벽과 막힌 끝을 남기는지도 커널로 묻는다', async () => {
+  const { addFigureBox } = await import('@hatiolab/figure-model')
+  const { workingOf, workingIssuesOf } = await import('../client/modeller/section-drawing.ts')
+  const tray = applyFigureAuthoring(addFigureBox(createFigureAsset('T'), { id: 't', size: { x: 400, y: 200, z: 300 }, position: { x: 0, y: 100, z: 0 } }), { kind: 'set-cavity', part: 't', cavity: { wall: 40, start: { closed: 30 }, end: 'open' } })
+  const shape = (compileFigureAsset(tray).evaluate().geometry.find(g => (g as { id: string }).id === 't') as unknown as { shape: FigureEvaluatedShape }).shape
+  assert.equal(workingIssuesOf(shape, { ...workingOf(shape), across: { x: 70, z: 300 } }).words[0]!.key, 'figure.text.section-issue-cavity-walls')
+  assert.equal(workingIssuesOf(shape, { ...workingOf(shape), length: 25 }).words[0]!.key, 'figure.text.section-issue-cavity-length')
+  assert.deepEqual(workingIssuesOf(shape, { ...workingOf(shape), across: { x: 90, z: 300 } }).words, [])
+})
+
+test('길이를 바꿀 때 남는 면은 부품의 관계가 정한 것을 읽어 보여 준다 (§4.1) — 다른 값을 따르는 치수는 칸을 막는다', () => {
+  has(editor, /const kept = figureScaleAnchorOf\(asset, this\.selected\)\?\.\[part\.shape\.extrusion\.axis\]/)
+  has(editorPanel, /m\?\.\[this\.axis\] === 'linked' \? linked : this\.keptWords\(\)/)
+  has(editorPanel, /m\?\.\[this\.axis\] !== 'editable'/)
+  assert.equal(say('figure.text.section-editor-keeps', { face: ko['figure.label.face-bottom']! }), '아랫면 유지')
+})

package/test/section-panel.test.ts

@@ -26,6 +26,9 @@ import { livePartsOf } from '../client/modeller/live.ts'
 import { editRefusalOf } from '../client/modeller/refusals.ts'
 
 const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+/* A source file is a big string: a failing assert.match on it spends minutes building the diff and looks hung. */
+const has = (source: string, re: RegExp, message?: string) => assert.ok(re.test(source), message ?? `missing: ${re}`)
+const hasNot = (source: string, re: RegExp, message?: string) => assert.ok(!re.test(source), message ?? `present: ${re}`)
 const panel = read('../client/modeller/figure-section-panel.ts')
 const editor = read('../client/modeller/editor.ts')
 const ko = JSON.parse(read('../translations/ko.json')) as Record<string, string>
@@ -50,7 +53,7 @@ test('모서리 반지름은 네 모서리를 한 값으로 둥글게 하고, 0
   const sharp = applyFigureAuthoring(round, { kind: 'set-section-corner', part: 'body', corner: null })
   assert.equal(shapeOf(sharp).extrusion!.section.kind, 'rectangle')
   assert.equal('corner' in shapeOf(sharp).extrusion!.section, false)
-  assert.match(panel, /corner: value > 0 \? value : null/, 'the field sends 0 as no rounding')
+  has(panel, /corner: value > 0 \? value : null/, 'the field sends 0 as no rounding')
 })
 
 test('속을 비우면 기본 벽·막힌 바닥·열린 윗면의 쟁반이 되고, 끝과 벽을 하나씩 바꾼다', () => {
@@ -84,9 +87,9 @@ test('벽이 단면을 다 채우거나 모서리가 변의 절반을 넘으면,
 })
 
 test('편집기는 단면 칸의 명령을 세션의 이력 하나로 돌리고, 치는 동안의 값은 그리기만 한다', () => {
-  assert.match(editor, /<figure-section-panel[\s\S]*?@command=\$\{\(e: CustomEvent\) => this\.linkCommand\(e\.detail\.action\)\}/)
-  assert.match(editor, /@command-live=\$\{\(e: CustomEvent\) => this\.holdAction\(e\.detail\.action\)\}/)
-  assert.match(editor, /private linkCommand\(action: FigureAuthoringAction\) \{\s*\/\*[^*]*\*\/\s*this\.holdAction\(null\)/, 'a command sent lets go of the one in hand')
+  has(editor, /<figure-section-panel[\s\S]*?@command=\$\{\(e: CustomEvent\) => this\.linkCommand\(e\.detail\.action\)\}/)
+  has(editor, /@command-live=\$\{\(e: CustomEvent\) => this\.holdAction\(e\.detail\.action\)\}/)
+  has(editor, /private linkCommand\(action: FigureAuthoringAction\) \{\s*\/\*[^*]*\*\/\s*this\.holdAction\(null\)/, 'a command sent lets go of the one in hand')
   for (const lang of ['ko', 'en', 'ja', 'zh', 'ms']) {
     const words = JSON.parse(read(`../translations/${lang}.json`)) as Record<string, string>
     const used = [...new Set([...panel.matchAll(/'(figure\.(?:label|text)\.section-[\w-]+|figure\.label\.group-section)'/g)].map(m => m[1]!))]
@@ -133,7 +136,7 @@ test('속 공간은 무엇이 되었는지와 깊이로 보인다 — 한쪽이
   assert.equal(cavityDepthOf(tray), 170, 'the 200 mm push less its 30 mm floor')
   assert.equal(cavityResultOf({ ...tray.cavity!, start: 'open' }), 'pipe')
   assert.equal(cavityResultOf({ ...tray.cavity!, end: { closed: 5 } }), 'sealed')
-  assert.match(panel, /figure\.text\.section-depth/)
+  has(panel, /figure\.text\.section-depth/)
 })
 
 test('치는 동안의 값은 사본에 그려지고 원본은 그대로다 — 받을 수 없는 값은 그리지 않는다', () => {
@@ -146,7 +149,7 @@ test('치는 동안의 값은 사본에 그려지고 원본은 그대로다 —
 })
 
 test('다각 단면에는 속 공간을 만들 수 없다고 그 자리에서 말한다', () => {
-  assert.match(panel, /kind === 'rectangle' \|\| kind === 'ellipse'\s*\? this\.renderCavity\(body, e\.axis\)\s*: html`[\s\S]*?figure\.text\.section-cavity-unavailable/)
+  has(panel, /kind === 'rectangle' \|\| kind === 'ellipse'\s*\? this\.renderCavity\(body, e\.axis\)\s*: html`[\s\S]*?figure\.text\.section-cavity-unavailable/)
   assert.match(ko['figure.text.section-cavity-unavailable']!, /이 윤곽에는 속 공간을 만들 수 없습니다/)
 })
 
@@ -159,8 +162,8 @@ test('붙어 있는 것이 기대는 면을 없애는 편집은 거절되고,
 })
 
 test('치는 동안 그려진 도형이 칸의 글자를 덮어쓰지 않는다 — 친 것은 보낼 때까지 칸이 든다', () => {
-  assert.match(panel, /\.value=\$\{live\(this\.typed\[key\] \?\? shown\)\}/)
-  assert.match(panel, /this\.typed = \{ \.\.\.this\.typed, \[key\]: \(ev\.target as HTMLInputElement\)\.value \}/)
+  has(panel, /\.value=\$\{live\(this\.typed\[key\] \?\? shown\)\}/)
+  has(panel, /this\.typed = \{ \.\.\.this\.typed, \[key\]: \(ev\.target as HTMLInputElement\)\.value \}/)
 })
 
 test('면마다 벽 두께를 치는 동안에도 그려진다 — 명령이 없앤 입력(한 벽 두께)의 지금 값은 미리보기를 막지 않는다', async () => {
@@ -188,5 +191,5 @@ test('한 면의 벽 한도는 그 방향의 너비에서 맞은편 벽을 뺀
   /* The kernel agrees: just under takes, the limit refuses. */
   assert.equal(cavityRefusalOf(shape, cavityRequestOf(shape, { wall: { ...walls, 'x-': 359 } })), null)
   assert.equal(cavityRefusalOf(shape, cavityRequestOf(shape, { wall: { ...walls, 'x-': 360 } }))!.code, 'wall-too-thick')
-  assert.match(panel, /sideWallLimitOf\(body\.shape, cavity\.wall, side\)/)
+  has(panel, /sideWallLimitOf\(body\.shape, cavity\.wall, side\)/)
 })

package/translations/en.json

@@ -188,6 +188,40 @@
   "figure.label.palette-token": "palette token",
   "figure.label.part": "part",
   "figure.label.part-material": "material",
+  "figure.text.section-editor-hint-sized": "Drag a handle or type the measures.",
+  "figure.label.section-editor-length": "push length (mm)",
+  "figure.label.section-editor-across": "{axis} width (mm)",
+  "figure.label.section-editor-diameter": "diameter (mm)",
+  "figure.text.section-editor-linked": "Follows another value.",
+  "figure.text.section-editor-keeps": "keeps {face}",
+  "figure.text.section-editor-keeps-centre": "keeps the centre",
+  "figure.text.section-issue-corner": "At this width the corner radius can be at most {max} mm. Widen it or make the corner smaller.",
+  "figure.text.section-issue-length": "The push length must be more than 0.",
+  "figure.text.section-issue-cavity-walls": "The inside walls take the whole width. Widen it or make the walls thinner.",
+  "figure.text.section-issue-cavity-length": "The closed ends take the whole length. Lengthen it or make the ends thinner.",
+  "figure.button.section-editor-open": "edit section",
+  "figure.label.section-editor": "edit section",
+  "figure.label.section-editor-outline": "outline",
+  "figure.label.section-editor-solid": "solid",
+  "figure.button.section-editor-back": "undo",
+  "figure.text.section-editor-hint": "Drag a point or type its coordinates. Press a side to add a point in its middle.",
+  "figure.text.section-editor-stale": "The figure changed after this was opened. Close it and open it again.",
+  "figure.button.section-editor-cancel": "cancel",
+  "figure.button.section-editor-apply": "apply",
+  "figure.text.section-editor-last-valid": "The solid shows the last valid shape.",
+  "figure.text.section-editor-units": "mm · from the origin · {h} right, {v} down",
+  "figure.text.section-editor-add-here": "add a point in the middle of side {a}–{b}",
+  "figure.label.section-editor-points": "points",
+  "figure.label.section-editor-coordinate": "point {point} {axis}",
+  "figure.button.section-editor-remove": "delete {point}",
+  "figure.text.section-issue-cross": "Sides {a} and {b} cross. Move the marked points.",
+  "figure.text.section-issue-touch": "Sides {a} and {b} touch. Move the marked points.",
+  "figure.text.section-issue-fold": "Side {b} turns back over side {a}. Move the marked points.",
+  "figure.text.section-issue-zero-length": "The two points of side {a} are in one place. Move one or delete it.",
+  "figure.text.section-issue-zero-area": "The points lie on one line and enclose nothing.",
+  "figure.text.section-issue-too-few": "A section needs three points or more.",
+  "figure.text.section-issue-too-many": "A section can have up to {limit} points.",
+  "figure.text.section-issue-number": "Type a number.",
   "figure.text.section-cavity-unavailable": "This outline cannot have an inside. An inside is made in a rectangle or circle section.",
   "figure.text.section-corner-over": "The corner radius can be at most {max} mm.",
   "figure.text.section-at-most": "at most {max} mm",

package/translations/ja.json

@@ -188,6 +188,40 @@
   "figure.label.palette-token": "palette token",
   "figure.label.part": "part",
   "figure.label.part-material": "material",
+  "figure.text.section-editor-hint-sized": "ハンドルをドラッグするか寸法を入力します。",
+  "figure.label.section-editor-length": "押し出し長さ (mm)",
+  "figure.label.section-editor-across": "{axis} 幅 (mm)",
+  "figure.label.section-editor-diameter": "直径 (mm)",
+  "figure.text.section-editor-linked": "他の値に従います。",
+  "figure.text.section-editor-keeps": "{face}を保持",
+  "figure.text.section-editor-keeps-centre": "中心を保持",
+  "figure.text.section-issue-corner": "この幅では角の半径は {max} mm までです。幅を広げるか角を小さくしてください。",
+  "figure.text.section-issue-length": "押し出し長さは 0 より大きくしてください。",
+  "figure.text.section-issue-cavity-walls": "内部の壁が幅全体を占めています。幅を広げるか壁を薄くしてください。",
+  "figure.text.section-issue-cavity-length": "閉じた端が長さ全体を占めています。長さを伸ばすか端を薄くしてください。",
+  "figure.button.section-editor-open": "断面を編集",
+  "figure.label.section-editor": "断面を編集",
+  "figure.label.section-editor-outline": "輪郭",
+  "figure.label.section-editor-solid": "立体",
+  "figure.button.section-editor-back": "元に戻す",
+  "figure.text.section-editor-hint": "点をドラッグするか座標を入力します。辺を押すと中点に点が追加されます。",
+  "figure.text.section-editor-stale": "開いた後に図形が変わりました。閉じて開き直してください。",
+  "figure.button.section-editor-cancel": "キャンセル",
+  "figure.button.section-editor-apply": "適用",
+  "figure.text.section-editor-last-valid": "立体は最後に有効だった形です。",
+  "figure.text.section-editor-units": "mm · 原点基準 · 右 {h}、下 {v}",
+  "figure.text.section-editor-add-here": "辺 {a}–{b} の中点に点を追加",
+  "figure.label.section-editor-points": "点",
+  "figure.label.section-editor-coordinate": "点 {point} {axis}",
+  "figure.button.section-editor-remove": "{point} を削除",
+  "figure.text.section-issue-cross": "辺 {a} と辺 {b} が交差しています。示された点を動かしてください。",
+  "figure.text.section-issue-touch": "辺 {a} と辺 {b} が接しています。示された点を動かしてください。",
+  "figure.text.section-issue-fold": "辺 {b} が辺 {a} の上に折り返しています。示された点を動かしてください。",
+  "figure.text.section-issue-zero-length": "辺 {a} の二点が同じ位置にあります。一方を動かすか削除してください。",
+  "figure.text.section-issue-zero-area": "点が一直線上にあり面積がありません。",
+  "figure.text.section-issue-too-few": "断面には三点以上が必要です。",
+  "figure.text.section-issue-too-many": "点は {limit} 個までです。",
+  "figure.text.section-issue-number": "数値を入力してください。",
   "figure.text.section-cavity-unavailable": "この輪郭には内部の空間をつくれません。内部の空間は四角形と円の断面につくります。",
   "figure.text.section-corner-over": "角の半径は {max} mm までです。",
   "figure.text.section-at-most": "最大 {max} mm",

package/translations/ko.json

@@ -188,6 +188,40 @@
   "figure.label.palette-token": "팔레트 토큰",
   "figure.label.part": "부품",
   "figure.label.part-material": "재질",
+  "figure.text.section-editor-hint-sized": "손잡이를 끌거나 치수를 입력합니다.",
+  "figure.label.section-editor-length": "돌출 길이 (mm)",
+  "figure.label.section-editor-across": "{axis} 폭 (mm)",
+  "figure.label.section-editor-diameter": "지름 (mm)",
+  "figure.text.section-editor-linked": "다른 값을 따릅니다.",
+  "figure.text.section-editor-keeps": "{face} 유지",
+  "figure.text.section-editor-keeps-centre": "가운데 유지",
+  "figure.text.section-issue-corner": "이 폭에서는 모서리 반지름이 {max} mm 까지입니다. 폭을 넓히거나 모서리를 줄입니다.",
+  "figure.text.section-issue-length": "돌출 길이는 0 보다 커야 합니다.",
+  "figure.text.section-issue-cavity-walls": "속 공간의 벽이 폭을 다 차지합니다. 폭을 넓히거나 벽을 얇게 합니다.",
+  "figure.text.section-issue-cavity-length": "막힌 끝이 길이를 다 차지합니다. 길이를 늘리거나 끝을 얇게 합니다.",
+  "figure.button.section-editor-open": "단면 편집",
+  "figure.label.section-editor": "단면 편집",
+  "figure.label.section-editor-outline": "윤곽",
+  "figure.label.section-editor-solid": "입체 결과",
+  "figure.button.section-editor-back": "되돌리기",
+  "figure.text.section-editor-hint": "점을 끌거나 좌표를 입력합니다. 선을 누르면 가운데에 점이 생깁니다.",
+  "figure.text.section-editor-stale": "창을 연 뒤 도형이 바뀌었습니다. 닫고 다시 여세요.",
+  "figure.button.section-editor-cancel": "취소",
+  "figure.button.section-editor-apply": "적용",
+  "figure.text.section-editor-last-valid": "입체 결과는 마지막으로 유효했던 모양입니다.",
+  "figure.text.section-editor-units": "mm · 원점 기준 · 오른쪽 {h}, 아래 {v}",
+  "figure.text.section-editor-add-here": "{a}–{b} 선 가운데에 점 추가",
+  "figure.label.section-editor-points": "점",
+  "figure.label.section-editor-coordinate": "점 {point} {axis}",
+  "figure.button.section-editor-remove": "{point} 지우기",
+  "figure.text.section-issue-cross": "{a} 선과 {b} 선이 교차합니다. 표시된 점을 옮겨 주세요.",
+  "figure.text.section-issue-touch": "{a} 선과 {b} 선이 서로 닿습니다. 표시된 점을 옮겨 주세요.",
+  "figure.text.section-issue-fold": "{b} 선이 {a} 선 위로 되돌아갑니다. 표시된 점을 옮겨 주세요.",
+  "figure.text.section-issue-zero-length": "{a} 선의 두 점이 같은 자리에 있습니다. 한 점을 옮기거나 지워 주세요.",
+  "figure.text.section-issue-zero-area": "점들이 한 줄에 있어 면적이 없습니다.",
+  "figure.text.section-issue-too-few": "점이 세 개보다 적으면 단면이 되지 않습니다.",
+  "figure.text.section-issue-too-many": "점은 {limit}개까지 둘 수 있습니다.",
+  "figure.text.section-issue-number": "숫자를 입력해 주세요.",
   "figure.text.section-cavity-unavailable": "이 윤곽에는 속 공간을 만들 수 없습니다. 속 공간은 사각형과 원 단면에 만듭니다.",
   "figure.text.section-corner-over": "모서리 반지름은 {max} mm 까지입니다.",
   "figure.text.section-at-most": "최대 {max} mm",

package/translations/ms.json

@@ -188,6 +188,40 @@
   "figure.label.palette-token": "palette token",
   "figure.label.part": "part",
   "figure.label.part-material": "material",
+  "figure.text.section-editor-hint-sized": "Seret pemegang atau taip ukurannya.",
+  "figure.label.section-editor-length": "panjang tolakan (mm)",
+  "figure.label.section-editor-across": "lebar {axis} (mm)",
+  "figure.label.section-editor-diameter": "diameter (mm)",
+  "figure.text.section-editor-linked": "Mengikut nilai lain.",
+  "figure.text.section-editor-keeps": "kekalkan {face}",
+  "figure.text.section-editor-keeps-centre": "kekalkan tengah",
+  "figure.text.section-issue-corner": "Pada lebar ini jejari sudut paling banyak {max} mm. Lebarkan atau kecilkan sudut.",
+  "figure.text.section-issue-length": "Panjang tolakan mesti lebih daripada 0.",
+  "figure.text.section-issue-cavity-walls": "Dinding dalam memenuhi seluruh lebar. Lebarkan atau nipiskan dinding.",
+  "figure.text.section-issue-cavity-length": "Hujung tertutup memenuhi seluruh panjang. Panjangkan atau nipiskan hujung.",
+  "figure.button.section-editor-open": "sunting keratan",
+  "figure.label.section-editor": "sunting keratan",
+  "figure.label.section-editor-outline": "garis luar",
+  "figure.label.section-editor-solid": "pepejal",
+  "figure.button.section-editor-back": "buat asal",
+  "figure.text.section-editor-hint": "Seret titik atau taip koordinatnya. Tekan sisi untuk menambah titik di tengahnya.",
+  "figure.text.section-editor-stale": "Rajah berubah selepas ini dibuka. Tutup dan buka semula.",
+  "figure.button.section-editor-cancel": "batal",
+  "figure.button.section-editor-apply": "guna",
+  "figure.text.section-editor-last-valid": "Pepejal menunjukkan bentuk sah yang terakhir.",
+  "figure.text.section-editor-units": "mm · dari asalan · {h} ke kanan, {v} ke bawah",
+  "figure.text.section-editor-add-here": "tambah titik di tengah sisi {a}–{b}",
+  "figure.label.section-editor-points": "titik",
+  "figure.label.section-editor-coordinate": "titik {point} {axis}",
+  "figure.button.section-editor-remove": "padam {point}",
+  "figure.text.section-issue-cross": "Sisi {a} dan {b} bersilang. Alihkan titik yang ditanda.",
+  "figure.text.section-issue-touch": "Sisi {a} dan {b} bersentuhan. Alihkan titik yang ditanda.",
+  "figure.text.section-issue-fold": "Sisi {b} berpatah balik di atas sisi {a}. Alihkan titik yang ditanda.",
+  "figure.text.section-issue-zero-length": "Dua titik sisi {a} berada di tempat yang sama. Alihkan atau padam satu.",
+  "figure.text.section-issue-zero-area": "Titik-titik berada pada satu garis dan tiada luas.",
+  "figure.text.section-issue-too-few": "Keratan memerlukan tiga titik atau lebih.",
+  "figure.text.section-issue-too-many": "Keratan boleh mempunyai sehingga {limit} titik.",
+  "figure.text.section-issue-number": "Taip nombor.",
   "figure.text.section-cavity-unavailable": "Garis luar ini tidak boleh mempunyai ruang dalam. Ruang dalam dibuat dalam keratan segi empat atau bulatan.",
   "figure.text.section-corner-over": "Jejari sudut paling banyak {max} mm.",
   "figure.text.section-at-most": "paling banyak {max} mm",

package/translations/zh.json

@@ -188,6 +188,40 @@
   "figure.label.palette-token": "palette token",
   "figure.label.part": "part",
   "figure.label.part-material": "material",
+  "figure.text.section-editor-hint-sized": "拖动手柄或输入尺寸。",
+  "figure.label.section-editor-length": "拉伸长度 (mm)",
+  "figure.label.section-editor-across": "{axis} 宽度 (mm)",
+  "figure.label.section-editor-diameter": "直径 (mm)",
+  "figure.text.section-editor-linked": "跟随其他值。",
+  "figure.text.section-editor-keeps": "保持{face}",
+  "figure.text.section-editor-keeps-centre": "保持中心",
+  "figure.text.section-issue-corner": "此宽度下圆角半径最大为 {max} mm。请加宽或减小圆角。",
+  "figure.text.section-issue-length": "拉伸长度必须大于 0。",
+  "figure.text.section-issue-cavity-walls": "内壁占满了整个宽度。请加宽或减薄壁。",
+  "figure.text.section-issue-cavity-length": "封闭端占满了整个长度。请加长或减薄端部。",
+  "figure.button.section-editor-open": "编辑截面",
+  "figure.label.section-editor": "编辑截面",
+  "figure.label.section-editor-outline": "轮廓",
+  "figure.label.section-editor-solid": "立体",
+  "figure.button.section-editor-back": "撤销",
+  "figure.text.section-editor-hint": "拖动点或输入坐标。点击边可在其中点添加点。",
+  "figure.text.section-editor-stale": "打开后图形已更改。请关闭后重新打开。",
+  "figure.button.section-editor-cancel": "取消",
+  "figure.button.section-editor-apply": "应用",
+  "figure.text.section-editor-last-valid": "立体显示的是最后一个有效形状。",
+  "figure.text.section-editor-units": "mm · 以原点为准 · 右 {h}，下 {v}",
+  "figure.text.section-editor-add-here": "在边 {a}–{b} 的中点添加点",
+  "figure.label.section-editor-points": "点",
+  "figure.label.section-editor-coordinate": "点 {point} {axis}",
+  "figure.button.section-editor-remove": "删除 {point}",
+  "figure.text.section-issue-cross": "边 {a} 与边 {b} 相交。请移动标出的点。",
+  "figure.text.section-issue-touch": "边 {a} 与边 {b} 相接。请移动标出的点。",
+  "figure.text.section-issue-fold": "边 {b} 折回到边 {a} 上。请移动标出的点。",
+  "figure.text.section-issue-zero-length": "边 {a} 的两个点在同一位置。请移动或删除其中一个。",
+  "figure.text.section-issue-zero-area": "点在一条直线上，没有面积。",
+  "figure.text.section-issue-too-few": "截面至少需要三个点。",
+  "figure.text.section-issue-too-many": "最多可有 {limit} 个点。",
+  "figure.text.section-issue-number": "请输入数字。",
   "figure.text.section-cavity-unavailable": "此轮廓不能创建内部空间。内部空间只能在矩形和圆形截面中创建。",
   "figure.text.section-corner-over": "圆角半径最大为 {max} mm。",
   "figure.text.section-at-most": "最大 {max} mm",