@things-factory/figure-ui 10.1.39 → 10.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.39",
+  "version": "10.1.40",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -26,7 +26,7 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.38",
+    "@hatiolab/figure-model": "^0.1.40",
     "@hatiolab/things-scene": "^10.1.26",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
@@ -37,8 +37,8 @@
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/figure-service": "^10.1.39",
+    "@things-factory/figure-service": "^10.1.40",
     "three": "^0.185.1"
   },
-  "gitHead": "fe5257ad8995fe7e79275e287f36e95b5fd32d1c"
+  "gitHead": "51c5d804c14ad8fcc6d4707e6ef80c9deede2766"
 }

package/test/v3-properties.test.ts

@@ -0,0 +1,93 @@
+/*
+ * **V3 화면에서 도형의 속성을 고친다** (V3 동등표 ②, 2026-09-24).
+ *
+ * V2 인스펙터는 이름 · 배치 기준 · 차지하는 공간 · 분류 · 태그를 맨 위에 둔다. V3 화면에는 타입 칸 하나뿐이었다.
+ * 두 축을 본다: 탭이 내는 명령이 figure-model 에서 **정말로** 그 일을 하는가, 그리고 화면이 명령과 행 쓰기를 잇는가.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { addV3Box, applyV3Authoring, createV3Asset, inspectV3Asset, parseV3Asset, serializeV3Asset } from '@hatiolab/figure-model'
+
+import { tagsOf, v3FigureFacts } from '../client/modeller/v3-figure-facts.ts'
+import { occupancyFromParts } from '../client/modeller/v3-occupancy.ts'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+const probe = () => {
+  let asset = createV3Asset('Probe')
+  asset = addV3Box(asset, { id: 'body', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } })
+  return asset
+}
+const facts = (asset: ReturnType<typeof probe>) => v3FigureFacts(serializeV3Asset(asset))
+
+test('탭이 읽는 사실 — 선언 전에는 배치 기준도 장착면도 「없음」이다', () => {
+  const read = facts(probe())
+  assert.equal(read.name, 'Probe')
+  assert.deepEqual(read.parts, ['body'])
+  assert.equal(read.declared, false)
+  assert.equal(read.placement, undefined, '없는 것을 바닥으로 읽지 않는다')
+  assert.equal(read.mounting, undefined)
+})
+
+test('배치 기준을 고르면 그 기준으로 공간을 선언한다 — 판정도 풀린다', () => {
+  const source = serializeV3Asset(probe())
+  const declared = applyV3Authoring(parseV3Asset(source), occupancyFromParts(source, 'ceiling'))
+
+  assert.equal(facts(declared).placement, 'ceiling')
+  assert.equal(facts(declared).declared, true)
+  assert.ok(!inspectV3Asset(declared).violations.some(v => v.code === 'OCCUPANCY_UNDECLARED'))
+})
+
+test('장착면을 정하면 탭이 그 부품과 면을 다시 읽고, 해제하면 없어진다', () => {
+  const source = serializeV3Asset(probe())
+  const declared = applyV3Authoring(parseV3Asset(source), occupancyFromParts(source))
+  const mounted = applyV3Authoring(declared, { kind: 'set-mounting-face', part: 'body', face: 'bottom' })
+
+  assert.deepEqual(facts(mounted).mounting, { part: 'body', face: 'bottom' })
+  assert.equal(facts(applyV3Authoring(mounted, { kind: 'clear-mounting-face' })).mounting, undefined)
+})
+
+test('이름을 바꾸면 자산의 이름이 바뀐다 — 저장하면 목록 이름이 이것을 따른다', () => {
+  assert.equal(facts(applyV3Authoring(probe(), { kind: 'rename', name: 'Roller conveyor' })).name, 'Roller conveyor')
+})
+
+test('태그 줄은 V2 와 같은 규칙으로 목록이 된다', () => {
+  assert.deepEqual(tagsOf('#반출, 컨베이어,, 반출 '), ['반출', '컨베이어'])
+  assert.deepEqual(tagsOf(''), [], '빈 줄은 전부 지우는 것이다')
+})
+
+const page = read('../client/pages/figure-v3-modeller-page.ts')
+
+test('화면이 속성 탭을 걸고, 명령은 세션의 이력 하나로, 분류 · 태그는 행으로 간다', () => {
+  assert.ok(/renderTab\('properties', 'tune'/.test(page), '속성 탭')
+  assert.ok(/<figure-v3-properties\s+\?off=/.test(page), '감추되 떼지 않는다')
+  assert.ok(/@v3-command=\$\{this\.onCommand\}/.test(page) && /@v3-catalog=\$\{this\.onCatalog\}/.test(page))
+  const run = page.slice(page.indexOf('private runCommand'), page.indexOf('private onCatalog'))
+  assert.ok(/this\.session\.command\(actionOf\(\)\)/.test(run), '명령은 세션을 지난다 — 되돌리기가 먹는다')
+  const catalog = page.slice(page.indexOf('private onCatalog'), page.indexOf('private released'))
+  assert.ok(/updateFigure\(id, patch\)/.test(catalog), '분류 · 태그는 행에 쓴다')
+})
+
+test('이름을 바꾸면 제목 줄도 바뀐다 — 셸은 알려 줄 때만 제목을 다시 읽는다', () => {
+  const changed = page.slice(page.indexOf('private changed = () =>'), page.indexOf('private async readRow'))
+  assert.ok(/view\.name !== this\.titled[\s\S]*this\.updateContext\(\)/.test(changed))
+})
+
+test('발행한 뒤에도 행의 타입이 남는다 — 새로 짜면 잠긴 타입 칸이 빈다', () => {
+  const released = page.slice(page.indexOf('private released'), page.indexOf('private reverted'))
+  assert.ok(/this\.row = \{ \.\.\.this\.row, state:/.test(released))
+})
+
+test('속성 탭의 말은 다섯 말 모두에 있다', () => {
+  const tab = read('../client/modeller/figure-v3-properties.ts')
+  assert.ok(tab.includes('occupancyFromParts(this.source, placement)'), '고른 배치 기준으로 선언한다')
+  const keys = [...tab.matchAll(/'(figure\.[a-z.-]*[a-z])'/g)].map(m => m[1])
+  for (const face of ['left', 'right', 'bottom', 'top', 'back', 'front']) keys.push(`figure.label.face-${face}`)
+  for (const one of ['floor', 'ceiling', 'center']) keys.push(`figure.label.placement-${one}`)
+  for (const lang of ['ko', 'en', 'ja', 'zh', 'ms']) {
+    const table = JSON.parse(read(`../translations/${lang}.json`))
+    for (const key of keys) assert.ok(table[key], `${lang}: ${key}`)
+  }
+})

package/test/v3-theme.test.ts

@@ -0,0 +1,67 @@
+/*
+ * **V3 모델러는 테마를 따른다** (V3 동등표 ⑦, 2026-09-24).
+ *
+ * V3 캔버스와 편집기는 색을 박아 두었다. 어두운 테마에서 가운데만 밝은 판이 떴고, 경계선과 눌린 단추 · 오류 칸도
+ * 밝은 색 그대로였다. 색은 셸의 토큰에서 온다(UX 결정 — 바탕은 surface-container, 눌림은 secondary-container,
+ * 오류는 error-container).
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const read = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+const canvas = read('../client/modeller/v3-canvas.ts')
+const editor = read('../client/modeller/v3-editor.ts')
+
+/** Hex colours that are not a `var(--token, #fallback)` fallback. */
+const fixed = (text: string) =>
+  text
+    .replace(/var\(--[\w-]+,\s*#[0-9a-fA-F]{3,8}\)/g, '')
+    .match(/#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b(?![\w-])/g) ?? []
+
+test('캔버스와 편집기에 박힌 색이 없다 — 토큰의 대체값만 남는다', () => {
+  assert.deepEqual(fixed(canvas), [], 'v3-canvas.ts')
+  assert.deepEqual(fixed(editor), [], 'v3-editor.ts')
+})
+
+test('캔버스 바탕은 CSS 와 3D 가 같은 토큰에서 온다', () => {
+  assert.match(canvas, /background: var\(--md-sys-color-surface-container\)/)
+  assert.match(canvas, /this\.scene\.background = new THREE\.Color\(colour\)/)
+  assert.match(canvas, /getComputedStyle\(this\)\.backgroundColor/, '3D 바탕이 호스트의 바탕을 읽는다')
+})
+
+test('테마를 바꾸면 3D 바탕을 다시 읽는다 — 한 번만 읽으면 가운데만 밝은 판이 남는다', () => {
+  assert.match(canvas, /observe\(document\.body, \{ attributes: true, attributeFilter: \['class'\] \}\)/)
+  const onChange = canvas.slice(canvas.indexOf('new MutationObserver'), canvas.indexOf('this.themeObserver.observe'))
+  assert.match(onChange, /this\.paintBackground\(\)/)
+  assert.match(onChange, /this\.draw\(\)/, '다시 읽고 그리지 않으면 다음 움직임까지 옛 색이다')
+  const leave = canvas.slice(canvas.indexOf('disconnectedCallback()'))
+  assert.match(leave, /this\.themeObserver\?\.disconnect\(\)/, '떠난 캔버스가 body 를 계속 지켜본다')
+})
+
+test('눌린 단추와 오류 칸은 셸이 두 테마 대비를 맞춘 칸을 쓴다', () => {
+  const pressed = editor.slice(editor.indexOf("button[aria-pressed='true']"), editor.indexOf('}', editor.indexOf("button[aria-pressed='true']")))
+  assert.match(pressed, /--md-sys-color-secondary-container\)/)
+  assert.match(pressed, /--md-sys-color-on-secondary-container\)/)
+  assert.match(pressed, /border-color: var\(--md-sys-color-primary\)/)
+  const error = editor.slice(editor.indexOf('.error {'), editor.indexOf('}', editor.indexOf('.error {')))
+  assert.match(error, /--md-sys-color-error-container\)/)
+  assert.match(error, /--md-sys-color-on-error-container\)/)
+})
+
+test('편집기는 창이 아니라 자기 폭으로 접는다 — 레일과 오른쪽 칸이 폭을 먼저 가져간다', () => {
+  assert.match(editor, /container-type: inline-size/)
+  assert.doesNotMatch(editor, /@media \(max-width/, '창 폭 기준이 남아 있다 — 레일을 펼치면 편집기가 오른쪽 칸 위로 넘친다')
+  assert.match(editor, /@container \(max-width: 659px\)/, '세 칸의 최소 폭 합(660) 아래에서 두 칸')
+  const one = editor.slice(editor.indexOf('@container (max-width: 419px)'))
+  assert.match(one, /grid-template-columns: minmax\(0, 1fr\)/, '420 아래에서 한 줄')
+  assert.match(one, /figure-v3-canvas \{\s*order: -1;/, '한 줄에서는 캔버스가 먼저')
+})
+
+test('넘침이 없으니 오른쪽 칸은 편집기를 가리지 않는다 — 가림은 우회였다', () => {
+  const page = read('../client/pages/figure-v3-modeller-page.ts')
+  const aside = page.slice(page.indexOf('    aside {'), page.indexOf('}', page.indexOf('    aside {')))
+  assert.doesNotMatch(aside, /z-index/)
+  assert.match(aside, /border-left: 1px solid var\(--md-sys-color-outline-variant\)/, '칸 경계선은 남는다')
+})

package/translations/en.json

@@ -36,6 +36,12 @@
   "figure.button.settle-on-floor": "settle on the floor",
   "figure.button.snap": "snap",
   "figure.button.take-n-changes": "apply {n}",
+  "figure.label.declared-space": "declared space",
+  "figure.text.catalog-needs-a-save": "can be set once the figure is saved.",
+  "figure.text.declared-space-declared": "declared from the parts.",
+  "figure.text.declared-space-none": "not declared yet.",
+  "figure.text.mounting-face-needs-space": "declare the space first to choose one.",
+  "figure.text.placement-redeclares": "changing it declares the space again from the parts as they are now.",
   "figure.text.recommended-fix-explained": "{n} changes rechecked against every resize case. They apply to this draft only; review and save when ready.",
   "figure.text.show-affected-parts": "show affected parts",
   "figure.button.to-floor": "to floor",

package/translations/ja.json

@@ -34,6 +34,12 @@
   "figure.button.settle-on-floor": "床に置く",
   "figure.button.snap": "snap",
   "figure.button.take-n-changes": "apply {n}",
+  "figure.label.declared-space": "空間宣言",
+  "figure.text.catalog-needs-a-save": "保存した後に設定できます。",
+  "figure.text.declared-space-declared": "部品から宣言しました。",
+  "figure.text.declared-space-none": "まだ宣言していません。",
+  "figure.text.mounting-face-needs-space": "先に空間を宣言すると選べます。",
+  "figure.text.placement-redeclares": "変更すると、今の部品で空間を宣言し直します。",
   "figure.text.recommended-fix-explained": "すべてのサイズ変更ケースを再検査した {n} 件の修正です。下書きだけに適用され、保存前に確認できます。",
   "figure.text.show-affected-parts": "影響する部品を見る",
   "figure.button.to-floor": "to floor",

package/translations/ko.json

@@ -36,6 +36,12 @@
   "figure.button.settle-on-floor": "바닥에 앉히기",
   "figure.button.snap": "눈금에",
   "figure.button.take-n-changes": "{n}개 적용",
+  "figure.label.declared-space": "공간 선언",
+  "figure.text.catalog-needs-a-save": "저장한 뒤에 정할 수 있습니다.",
+  "figure.text.declared-space-declared": "부품으로 선언했습니다.",
+  "figure.text.declared-space-none": "아직 선언하지 않았습니다.",
+  "figure.text.mounting-face-needs-space": "공간을 먼저 선언해야 고를 수 있습니다.",
+  "figure.text.placement-redeclares": "바꾸면 지금 부품으로 공간을 다시 선언합니다.",
   "figure.text.recommended-fix-explained": "서버가 전체 크기 변경을 다시 검사한 {n}개 수정입니다. 초안에만 적용되며 저장 전 확인할 수 있습니다.",
   "figure.text.show-affected-parts": "영향 받는 부품 보기",
   "figure.button.to-floor": "바닥에",

package/translations/ms.json

@@ -34,6 +34,12 @@
   "figure.button.settle-on-floor": "letak di lantai",
   "figure.button.snap": "snap",
   "figure.button.take-n-changes": "apply {n}",
+  "figure.label.declared-space": "ruang yang diisytiharkan",
+  "figure.text.catalog-needs-a-save": "boleh ditetapkan selepas disimpan.",
+  "figure.text.declared-space-declared": "diisytiharkan daripada bahagian.",
+  "figure.text.declared-space-none": "belum diisytiharkan.",
+  "figure.text.mounting-face-needs-space": "isytiharkan ruang dahulu untuk memilih.",
+  "figure.text.placement-redeclares": "menukarnya mengisytiharkan semula ruang daripada bahagian semasa.",
   "figure.text.recommended-fix-explained": "{n} pembetulan telah diperiksa semula untuk semua keadaan saiz. Ia hanya digunakan pada draf ini; semak dan simpan apabila sedia.",
   "figure.text.show-affected-parts": "tunjukkan bahagian terjejas",
   "figure.button.to-floor": "to floor",

package/translations/zh.json

@@ -34,6 +34,12 @@
   "figure.button.settle-on-floor": "落到地面",
   "figure.button.snap": "snap",
   "figure.button.take-n-changes": "apply {n}",
+  "figure.label.declared-space": "空间声明",
+  "figure.text.catalog-needs-a-save": "保存后即可设置。",
+  "figure.text.declared-space-declared": "已根据部件声明。",
+  "figure.text.declared-space-none": "尚未声明。",
+  "figure.text.mounting-face-needs-space": "请先声明空间，然后才能选择。",
+  "figure.text.placement-redeclares": "更改后将按当前部件重新声明空间。",
   "figure.text.recommended-fix-explained": "已针对所有尺寸变化情况重新检查的 {n} 项修正。它们只应用到草稿；请确认后再保存。",
   "figure.text.show-affected-parts": "查看受影响部件",
   "figure.button.to-floor": "to floor",