@things-factory/figure-ui 10.1.74 → 10.1.76

package/dist-client/modeller/stage-model.js

@@ -0,0 +1,147 @@
+import * as THREE from 'three';
+import { buildFigureGeometry } from '@hatiolab/things-scene';
+const round = (n) => Math.round(n * 1e6) / 1e6;
+export function frameOf(part) {
+    /* The box things-scene's `figure-part` centres the body on: the same builder, measured the same way. */
+    let built;
+    try {
+        built = buildFigureGeometry(part.shape, part.segments);
+    }
+    catch {
+        return null;
+    }
+    if (!built?.getAttribute('position'))
+        return null;
+    built.computeBoundingBox();
+    const box = built.boundingBox;
+    const unit = { centre: box.getCenter(new THREE.Vector3()), extent: box.getSize(new THREE.Vector3()) };
+    built.dispose();
+    const r = part.pose.r;
+    const rotation = new THREE.Matrix4().set(r[0][0], r[0][1], r[0][2], 0, r[1][0], r[1][1], r[1][2], 0, r[2][0], r[2][1], r[2][2], 0, 0, 0, 0, 1);
+    return { centre: unit.centre, extent: unit.extent, rotation, origin: new THREE.Vector3(...part.pose.t) };
+}
+/** The colours a body is drawn in, from the palette the modeller resolved (the asset's, over which the theme wins). */
+function colours(part, palette) {
+    const m = part.material;
+    const glow = m.emissive?.on ? { color: palette[m.emissive.token] ?? palette[m.token] ?? '#9a9a9a', intensity: m.emissive.intensity } : undefined;
+    return { color: palette[m.token] ?? '#9a9a9a', preset: m.preset, transparent: !!m.transparent, ...(glow ? { glow } : {}) };
+}
+/** The component state that draws a body where figure-model put it. */
+export function componentOf(part, palette, board) {
+    const frame = frameOf(part);
+    if (!frame)
+        return null;
+    const { centre, extent, rotation, origin } = frame;
+    const world = centre.clone().applyMatrix4(rotation).add(origin);
+    const euler = new THREE.Euler().setFromRotationMatrix(rotation, 'XYZ');
+    const width = extent.x || 1, depth = extent.y || 1, height = extent.z || 1;
+    return {
+        type: 'figure-part',
+        name: part.id,
+        shape: part.shape,
+        ...(part.segments !== undefined ? { segments: part.segments } : {}),
+        ...colours(part, palette),
+        width: round(width),
+        depth: round(depth),
+        height: round(height),
+        left: round(world.x + board.width / 2 - width / 2),
+        top: round(world.z + board.height / 2 - height / 2),
+        zPos: round(world.y - depth / 2),
+        rotationX: round(euler.x),
+        rotation: round(-euler.y),
+        rotationY: round(euler.z)
+    };
+}
+const num = (v, fallback = 0) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback);
+/**
+ * What the gizmo did, in the inputs' terms: where the body's origin is now, how it is turned (degrees, rigid@1's
+ * order) and how much each of its own axes grew. Only what changed is given; a component the gizmo did not move gives
+ * nothing.
+ */
+export function gizmoResultOf(part, after, board) {
+    const frame = frameOf(part);
+    if (!frame)
+        return {};
+    const { centre, extent, rotation, origin } = frame;
+    const width = num(after.width, extent.x), depth = num(after.depth, extent.y), height = num(after.height, extent.z);
+    const scale = new THREE.Vector3(width / (extent.x || 1), depth / (extent.y || 1), height / (extent.z || 1));
+    const world = new THREE.Vector3(num(after.left) + width / 2 - board.width / 2, num(after.zPos) + depth / 2, num(after.top) + height / 2 - board.height / 2);
+    const euler = new THREE.Euler(num(after.rotationX), -num(after.rotation), num(after.rotationY), 'XYZ');
+    const turnedTo = new THREE.Matrix4().makeRotationFromEuler(euler);
+    const before = new THREE.Quaternion().setFromRotationMatrix(rotation);
+    const now = new THREE.Quaternion().setFromEuler(euler);
+    const turned = before.angleTo(now) > 1e-4;
+    const sized = [scale.x, scale.y, scale.z].some(s => Math.abs(s - 1) > 1e-4);
+    /* The origin that puts the (scaled, turned) box centre where the scene has it. */
+    const newOrigin = world.clone().sub(centre.clone().multiply(scale).applyMatrix4(turnedTo));
+    const moved = newOrigin.distanceTo(origin) > 0.5;
+    const result = {};
+    if (moved || turned)
+        result.position = newOrigin.toArray();
+    if (turned)
+        result.rotation = [euler.x, euler.y, euler.z].map(THREE.MathUtils.radToDeg);
+    if (sized)
+        result.scale = scale.toArray();
+    return result;
+}
+/**
+ * A drag as amounts, for a part whose place is worked out (`nudge-part`): how far its origin moved and how far each of
+ * its angles turned (rigid@1's order, degrees). Nothing on an axis that did not change.
+ */
+export function nudgeOf(part, result) {
+    const axes = ['x', 'y', 'z'];
+    const by = {};
+    const turn = {};
+    if (result.position)
+        axes.forEach((axis, i) => {
+            const d = round(result.position[i] - part.pose.t[i]);
+            if (Math.abs(d) > 1e-6)
+                by[axis] = d;
+        });
+    if (result.rotation) {
+        const r = part.pose.r;
+        const now = new THREE.Euler().setFromRotationMatrix(new THREE.Matrix4().set(r[0][0], r[0][1], r[0][2], 0, r[1][0], r[1][1], r[1][2], 0, r[2][0], r[2][1], r[2][2], 0, 0, 0, 0, 1), 'XYZ');
+        const was = [now.x, now.y, now.z].map(radians => (radians * 180) / Math.PI);
+        axes.forEach((axis, i) => {
+            const d = round(result.rotation[i] - was[i]);
+            if (Math.abs(d) > 1e-6)
+                turn[axis] = d;
+        });
+    }
+    return { by, turn };
+}
+/** The keys of `next` whose values differ from `current` -- only those are set, so the scene raises no echo. */
+export function changedKeys(current, next) {
+    const diff = {};
+    for (const [key, value] of Object.entries(next)) {
+        if (key === 'type')
+            continue;
+        const was = current[key];
+        const same = typeof value === 'object' && value !== null ? JSON.stringify(was) === JSON.stringify(value) : was === value;
+        if (!same)
+            diff[key] = value;
+    }
+    return Object.keys(diff).length ? diff : null;
+}
+/** A board wide and deep enough for the figure, with room around it; its size only grows while a figure is edited. */
+export function boardFor(parts, at = { width: 0, height: 0 }) {
+    const box = new THREE.Box3();
+    for (const part of parts) {
+        const frame = frameOf(part);
+        if (!frame)
+            continue;
+        const half = frame.extent.clone().multiplyScalar(0.5);
+        const corners = [-1, 1].flatMap(x => [-1, 1].flatMap(y => [-1, 1].map(z => new THREE.Vector3(x * half.x, y * half.y, z * half.z))));
+        for (const corner of corners)
+            box.expandByPoint(corner.add(frame.centre).applyMatrix4(frame.rotation).add(frame.origin));
+    }
+    const size = box.isEmpty() ? new THREE.Vector3(1000, 1000, 1000) : box.getSize(new THREE.Vector3());
+    const reach = (axis) => 2 * Math.max(Math.abs(box.isEmpty() ? 500 : box.min[axis]), Math.abs(box.isEmpty() ? 500 : box.max[axis]));
+    return {
+        width: Math.max(at.width, Math.ceil(reach('x') * 1.2), 200),
+        height: Math.max(at.height, Math.ceil(reach('z') * 1.2), 200),
+        /* Only grows, as the plan does: a raised arm made the board taller than it was, and a new board lost the camera. */
+        depth: Math.max(at.depth ?? 0, Math.ceil(size.y * 1.1), 200)
+    };
+}
+//# sourceMappingURL=stage-model.js.map

package/dist-client/modeller/stage-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-model.js","sourceRoot":"","sources":["../../client/modeller/stage-model.ts"],"names":[],"mappings":"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","sourcesContent":["import * as THREE from 'three'\nimport { buildFigureGeometry } from '@hatiolab/things-scene'\n\nimport type { GizmoResult } from './gizmo.js'\nimport type { FigureRenderPart } from './renderer.js'\n\n/*\n * bodies <-> scene components, in one place.\n *\n * The modeller stands on a things-scene board in editing mode: each body figure-model evaluates is a\n * `figure-part` component, and what the scene's gizmo writes back comes here to become a change of the part's\n * inputs. The two vocabularies:\n *\n *     (asset frame, mm, y up)            scene component\n *     ────────────────────────────────      ─────────────────────────────────────────────\n *     body box extent  x · y · z             width · depth · height\n *     body box centre  x                     left + width/2  - board width/2\n *                      y                     zPos + depth/2\n *                      z                     top  + height/2 - board height/2\n *     body rotation (rigid@1, Rx·Ry·Rz)      rotationX · -rotation · rotationY (radians; three 'XYZ')\n *\n * The box is the body's own bounding box in its local frame, so a turned body keeps its size and the gizmo's handles\n * sit on its faces. Its centre is not always the body's origin (a portal rises from its bottom), so a turn about the\n * centre moves the origin: the result gives the origin where the turned body puts it.\n */\n\nexport interface Board {\n  width: number\n  height: number\n}\n\nexport interface BodyFrame {\n  /** The body's box: its centre in the body's own frame, and its extent. */\n  centre: THREE.Vector3\n  extent: THREE.Vector3\n  rotation: THREE.Matrix4\n  origin: THREE.Vector3\n}\n\nconst round = (n: number) => Math.round(n * 1e6) / 1e6\n\nexport function frameOf(part: FigureRenderPart): BodyFrame | null {\n  /* The box things-scene's `figure-part` centres the body on: the same builder, measured the same way. */\n  let built: THREE.BufferGeometry | undefined\n  try {\n    built = buildFigureGeometry(part.shape as never, part.segments) as THREE.BufferGeometry | undefined\n  } catch {\n    return null\n  }\n  if (!built?.getAttribute('position')) return null\n  built.computeBoundingBox()\n  const box = built.boundingBox!\n  const unit = { centre: box.getCenter(new THREE.Vector3()), extent: box.getSize(new THREE.Vector3()) }\n  built.dispose()\n  const r = part.pose.r\n  const rotation = new THREE.Matrix4().set(r[0]![0]!, r[0]![1]!, r[0]![2]!, 0, r[1]![0]!, r[1]![1]!, r[1]![2]!, 0, r[2]![0]!, r[2]![1]!, r[2]![2]!, 0, 0, 0, 0, 1)\n  return { centre: unit.centre, extent: unit.extent, rotation, origin: new THREE.Vector3(...(part.pose.t as [number, number, number])) }\n}\n\n/** The colours a body is drawn in, from the palette the modeller resolved (the asset's, over which the theme wins). */\nfunction colours(part: FigureRenderPart, palette: Record<string, string>) {\n  const m = part.material\n  const glow = m.emissive?.on ? { color: palette[m.emissive.token] ?? palette[m.token] ?? '#9a9a9a', intensity: m.emissive.intensity } : undefined\n  return { color: palette[m.token] ?? '#9a9a9a', preset: m.preset, transparent: !!m.transparent, ...(glow ? { glow } : {}) }\n}\n\n/** The component state that draws a body where figure-model put it. */\nexport function componentOf(part: FigureRenderPart, palette: Record<string, string>, board: Board): Record<string, unknown> | null {\n  const frame = frameOf(part)\n  if (!frame) return null\n  const { centre, extent, rotation, origin } = frame\n  const world = centre.clone().applyMatrix4(rotation).add(origin)\n  const euler = new THREE.Euler().setFromRotationMatrix(rotation, 'XYZ')\n  const width = extent.x || 1,\n    depth = extent.y || 1,\n    height = extent.z || 1\n  return {\n    type: 'figure-part',\n    name: part.id,\n    shape: part.shape,\n    ...(part.segments !== undefined ? { segments: part.segments } : {}),\n    ...colours(part, palette),\n    width: round(width),\n    depth: round(depth),\n    height: round(height),\n    left: round(world.x + board.width / 2 - width / 2),\n    top: round(world.z + board.height / 2 - height / 2),\n    zPos: round(world.y - depth / 2),\n    rotationX: round(euler.x),\n    rotation: round(-euler.y),\n    rotationY: round(euler.z)\n  }\n}\n\nconst num = (v: unknown, fallback = 0) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback)\n\n/**\n * What the gizmo did, in the inputs' terms: where the body's origin is now, how it is turned (degrees, rigid@1's\n * order) and how much each of its own axes grew. Only what changed is given; a component the gizmo did not move gives\n * nothing.\n */\nexport function gizmoResultOf(part: FigureRenderPart, after: Record<string, unknown>, board: Board): GizmoResult {\n  const frame = frameOf(part)\n  if (!frame) return {}\n  const { centre, extent, rotation, origin } = frame\n  const width = num(after.width, extent.x),\n    depth = num(after.depth, extent.y),\n    height = num(after.height, extent.z)\n  const scale = new THREE.Vector3(width / (extent.x || 1), depth / (extent.y || 1), height / (extent.z || 1))\n  const world = new THREE.Vector3(num(after.left) + width / 2 - board.width / 2, num(after.zPos) + depth / 2, num(after.top) + height / 2 - board.height / 2)\n  const euler = new THREE.Euler(num(after.rotationX), -num(after.rotation), num(after.rotationY), 'XYZ')\n  const turnedTo = new THREE.Matrix4().makeRotationFromEuler(euler)\n\n  const before = new THREE.Quaternion().setFromRotationMatrix(rotation)\n  const now = new THREE.Quaternion().setFromEuler(euler)\n  const turned = before.angleTo(now) > 1e-4\n  const sized = [scale.x, scale.y, scale.z].some(s => Math.abs(s - 1) > 1e-4)\n  /* The origin that puts the (scaled, turned) box centre where the scene has it. */\n  const newOrigin = world.clone().sub(centre.clone().multiply(scale).applyMatrix4(turnedTo))\n  const moved = newOrigin.distanceTo(origin) > 0.5\n\n  const result: GizmoResult = {}\n  if (moved || turned) result.position = newOrigin.toArray() as [number, number, number]\n  if (turned) result.rotation = [euler.x, euler.y, euler.z].map(THREE.MathUtils.radToDeg) as [number, number, number]\n  if (sized) result.scale = scale.toArray() as [number, number, number]\n  return result\n}\n\n/**\n * A drag as amounts, for a part whose place is worked out (`nudge-part`): how far its origin moved and how far each of\n * its angles turned (rigid@1's order, degrees). Nothing on an axis that did not change.\n */\nexport function nudgeOf(part: FigureRenderPart, result: GizmoResult): { by: Partial<Record<'x' | 'y' | 'z', number>>; turn: Partial<Record<'x' | 'y' | 'z', number>> } {\n  const axes = ['x', 'y', 'z'] as const\n  const by: Partial<Record<'x' | 'y' | 'z', number>> = {}\n  const turn: Partial<Record<'x' | 'y' | 'z', number>> = {}\n  if (result.position) axes.forEach((axis, i) => {\n    const d = round(result.position![i]! - (part.pose.t[i] as number))\n    if (Math.abs(d) > 1e-6) by[axis] = d\n  })\n  if (result.rotation) {\n    const r = part.pose.r\n    const now = new THREE.Euler().setFromRotationMatrix(new THREE.Matrix4().set(r[0]![0]!, r[0]![1]!, r[0]![2]!, 0, r[1]![0]!, r[1]![1]!, r[1]![2]!, 0, r[2]![0]!, r[2]![1]!, r[2]![2]!, 0, 0, 0, 0, 1), 'XYZ')\n    const was: number[] = [now.x, now.y, now.z].map(radians => (radians * 180) / Math.PI)\n    axes.forEach((axis, i) => {\n      const d = round(result.rotation![i]! - was[i]!)\n      if (Math.abs(d) > 1e-6) turn[axis] = d\n    })\n  }\n  return { by, turn }\n}\n\n/** The keys of `next` whose values differ from `current` -- only those are set, so the scene raises no echo. */\nexport function changedKeys(current: Record<string, unknown>, next: Record<string, unknown>): Record<string, unknown> | null {\n  const diff: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(next)) {\n    if (key === 'type') continue\n    const was = current[key]\n    const same = typeof value === 'object' && value !== null ? JSON.stringify(was) === JSON.stringify(value) : was === value\n    if (!same) diff[key] = value\n  }\n  return Object.keys(diff).length ? diff : null\n}\n\n/** A board wide and deep enough for the figure, with room around it; its size only grows while a figure is edited. */\nexport function boardFor(parts: readonly FigureRenderPart[], at: Board & { depth?: number } = { width: 0, height: 0 }): Board & { depth: number } {\n  const box = new THREE.Box3()\n  for (const part of parts) {\n    const frame = frameOf(part)\n    if (!frame) continue\n    const half = frame.extent.clone().multiplyScalar(0.5)\n    const corners = [-1, 1].flatMap(x => [-1, 1].flatMap(y => [-1, 1].map(z => new THREE.Vector3(x * half.x, y * half.y, z * half.z))))\n    for (const corner of corners) box.expandByPoint(corner.add(frame.centre).applyMatrix4(frame.rotation).add(frame.origin))\n  }\n  const size = box.isEmpty() ? new THREE.Vector3(1000, 1000, 1000) : box.getSize(new THREE.Vector3())\n  const reach = (axis: 'x' | 'z') => 2 * Math.max(Math.abs(box.isEmpty() ? 500 : box.min[axis]), Math.abs(box.isEmpty() ? 500 : box.max[axis]))\n  return {\n    width: Math.max(at.width, Math.ceil(reach('x') * 1.2), 200),\n    height: Math.max(at.height, Math.ceil(reach('z') * 1.2), 200),\n    /* Only grows, as the plan does: a raised arm made the board taller than it was, and a new board lost the camera. */\n    depth: Math.max(at.depth ?? 0, Math.ceil(size.y * 1.1), 200)\n  }\n}\n"]}

package/dist-client/modeller/thumbnail.d.ts

@@ -0,0 +1,3 @@
+import './canvas.js';
+import type { FigureRenderPart } from './renderer.js';
+export declare function captureFigureThumbnail(parts: FigureRenderPart[], palette: Record<string, string>): Promise<string | undefined>;

package/dist-client/modeller/thumbnail.js

@@ -0,0 +1,75 @@
+import './canvas.js';
+/**
+ * 카드에 쓸 그림을 찍는다 — **숨은 자리에 캔버스를 하나 더 세워서.**
+ *
+ * ## 왜 보이는 캔버스를 찍지 않나
+ *
+ * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있다. 그것을 찍으면 카드마다 프레임이
+ * 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이 된다. 목록은 견주는 자리이므로 그림은
+ * **정해진 크기와 정해진 카메라**로 찍는다 — 새로 세운 캔버스(`viewOnly`)가 스스로 `fit()` 한 자리에서
+ * `snapshot()` 으로 찍는다. 캔버스가 씬 위로 옮겨 가면서 찍는 길이 빠졌고, 그동안 저장은 그림 없이 갔다
+ * (사용자 2026-09-24).
+ *
+ * ## 왜 서버가 아니라 브라우저인가
+ *
+ * 백엔드에 GPU 가 없는 배포가 많아 헤드리스로 3D 를 찍는 것이 자주 실패한다. 도형을 그릴 GPU 는
+ * 이미 보는 사람 손에 있다.
+ *
+ * ## 못 찍어도 저장은 간다
+ *
+ * 탭이 뒤로 가면 브라우저가 `requestAnimationFrame` 을 멈춘다. 그 위에 저장이 얹혀 있으면 저장이
+ * 통째로 멈춘다 — 단추는 잠긴 채로, 아무 말도 없이. 그래서 시계와 경주시키고, 늦으면 그림 없이
+ * 간다. 정본이 그림보다 중하고, 그림은 다음에 저작면을 열 때 다시 채운다.
+ */
+/** 카드는 4:3 이다. */
+const WIDTH = 480;
+const HEIGHT = 360;
+/** 넘으면 그림 없이 저장한다. 빠르기가 아니라 저장이 멈추지 않는 것이 목적이다. */
+const PATIENCE = 5000;
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+/** 씬이 서고 카메라가 자리를 잡을 틈. rAF 가 멈춘 탭에서도 풀리도록 시계와 경주시킨다. */
+function settle() {
+    const frames = new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 150))));
+    return Promise.race([frames, delay(600)]);
+}
+function within(work, ms) {
+    return Promise.race([work, delay(ms).then(() => undefined)]);
+}
+export async function captureFigureThumbnail(parts, palette) {
+    if (!parts.length)
+        return undefined;
+    /*
+      화면 밖에 둔다. `display: none` 이면 캔버스가 크기를 못 얻어 아무것도 그리지 못한다.
+      WebGL context 는 브라우저가 8~16개에서 끊으므로 찍은 뒤 반드시 버린다(아래 finally).
+    */
+    const host = document.createElement('div');
+    host.setAttribute('figure-thumbnail-stage', '');
+    host.style.cssText = `position: fixed; left: -10000px; top: 0; width: ${WIDTH}px; height: ${HEIGHT}px; pointer-events: none;`;
+    document.body.appendChild(host);
+    const shooter = document.createElement('figure-canvas');
+    shooter.parts = parts;
+    shooter.palette = palette;
+    shooter.context = 'thumbnail';
+    shooter.viewOnly = true;
+    shooter.style.cssText = 'display: block; width: 100%; height: 100%;';
+    try {
+        host.appendChild(shooter);
+        const shot = await within((async () => {
+            await settle();
+            shooter.fit?.();
+            await settle();
+            return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined;
+        })(), PATIENCE);
+        if (!shot)
+            console.warn(`[thumbnail] ${PATIENCE}ms 안에 못 찍었습니다 — 그림 없이 저장합니다`);
+        return shot;
+    }
+    catch (e) {
+        console.warn(`[thumbnail] 세우지 못했습니다 — ${e.message}`);
+        return undefined;
+    }
+    finally {
+        host.remove();
+    }
+}
+//# sourceMappingURL=thumbnail.js.map

package/dist-client/modeller/thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.js","sourceRoot":"","sources":["../../client/modeller/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,kBAAkB;AAClB,MAAM,KAAK,GAAG,GAAG,CAAA;AACjB,MAAM,MAAM,GAAG,GAAG,CAAA;AAElB,mDAAmD;AACnD,MAAM,QAAQ,GAAG,IAAI,CAAA;AAWrB,MAAM,KAAK,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;AAEnF,yDAAyD;AACzD,SAAS,MAAM;IACb,MAAM,MAAM,GAAG,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE,CACzC,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CACnF,CAAA;IACD,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAC3C,CAAC;AAED,SAAS,MAAM,CAAI,IAAgB,EAAE,EAAU;IAC7C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;AAC9D,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAC1C,KAAyB,EACzB,OAA+B;IAE/B,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,SAAS,CAAA;IAEnC;;;MAGE;IACF,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC1C,IAAI,CAAC,YAAY,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAA;IAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,mDAAmD,KAAK,eAAe,MAAM,2BAA2B,CAAA;IAC7H,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IAE/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAY,CAAA;IAClE,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;IACrB,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;IACzB,OAAO,CAAC,OAAO,GAAG,WAAW,CAAA;IAC7B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,4CAA4C,CAAA;IAEpE,IAAI,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QACzB,MAAM,IAAI,GAAG,MAAM,MAAM,CACvB,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,MAAM,EAAE,CAAA;YACd,OAAO,CAAC,GAAG,EAAE,EAAE,CAAA;YACf,MAAM,MAAM,EAAE,CAAA;YACd,OAAO,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QAC7E,CAAC,CAAC,EAAE,EACJ,QAAQ,CACT,CAAA;QACD,IAAI,CAAC,IAAI;YAAE,OAAO,CAAC,IAAI,CAAC,eAAe,QAAQ,6BAA6B,CAAC,CAAA;QAC7E,OAAO,IAAI,CAAA;IACb,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,2BAA4B,CAAW,CAAC,OAAO,EAAE,CAAC,CAAA;QAC/D,OAAO,SAAS,CAAA;IAClB,CAAC;YAAS,CAAC;QACT,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["import './canvas.js'\n\nimport type { FigureRenderPart } from './renderer.js'\n\n/**\n * 카드에 쓸 그림을 찍는다 — **숨은 자리에 캔버스를 하나 더 세워서.**\n *\n * ## 왜 보이는 캔버스를 찍지 않나\n *\n * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있다. 그것을 찍으면 카드마다 프레임이\n * 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이 된다. 목록은 견주는 자리이므로 그림은\n * **정해진 크기와 정해진 카메라**로 찍는다 — 새로 세운 캔버스(`viewOnly`)가 스스로 `fit()` 한 자리에서\n * `snapshot()` 으로 찍는다. 캔버스가 씬 위로 옮겨 가면서 찍는 길이 빠졌고, 그동안 저장은 그림 없이 갔다\n * (사용자 2026-09-24).\n *\n * ## 왜 서버가 아니라 브라우저인가\n *\n * 백엔드에 GPU 가 없는 배포가 많아 헤드리스로 3D 를 찍는 것이 자주 실패한다. 도형을 그릴 GPU 는\n * 이미 보는 사람 손에 있다.\n *\n * ## 못 찍어도 저장은 간다\n *\n * 탭이 뒤로 가면 브라우저가 `requestAnimationFrame` 을 멈춘다. 그 위에 저장이 얹혀 있으면 저장이\n * 통째로 멈춘다 — 단추는 잠긴 채로, 아무 말도 없이. 그래서 시계와 경주시키고, 늦으면 그림 없이\n * 간다. 정본이 그림보다 중하고, 그림은 다음에 저작면을 열 때 다시 채운다.\n */\n\n/** 카드는 4:3 이다. */\nconst WIDTH = 480\nconst HEIGHT = 360\n\n/** 넘으면 그림 없이 저장한다. 빠르기가 아니라 저장이 멈추지 않는 것이 목적이다. */\nconst PATIENCE = 5000\n\ninterface Shooter extends HTMLElement {\n  parts?: FigureRenderPart[]\n  palette?: Record<string, string>\n  context?: string\n  viewOnly?: boolean\n  snapshot?: (width?: number, height?: number) => Promise<string | undefined>\n  fit?: () => void\n}\n\nconst delay = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms))\n\n/** 씬이 서고 카메라가 자리를 잡을 틈. rAF 가 멈춘 탭에서도 풀리도록 시계와 경주시킨다. */\nfunction settle(): Promise<void> {\n  const frames = new Promise<void>(resolve =>\n    requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 150)))\n  )\n  return Promise.race([frames, delay(600)])\n}\n\nfunction within<T>(work: Promise<T>, ms: number): Promise<T | undefined> {\n  return Promise.race([work, delay(ms).then(() => undefined)])\n}\n\nexport async function captureFigureThumbnail(\n  parts: FigureRenderPart[],\n  palette: Record<string, string>\n): Promise<string | undefined> {\n  if (!parts.length) return undefined\n\n  /*\n    화면 밖에 둔다. `display: none` 이면 캔버스가 크기를 못 얻어 아무것도 그리지 못한다.\n    WebGL context 는 브라우저가 8~16개에서 끊으므로 찍은 뒤 반드시 버린다(아래 finally).\n  */\n  const host = document.createElement('div')\n  host.setAttribute('figure-thumbnail-stage', '')\n  host.style.cssText = `position: fixed; left: -10000px; top: 0; width: ${WIDTH}px; height: ${HEIGHT}px; pointer-events: none;`\n  document.body.appendChild(host)\n\n  const shooter = document.createElement('figure-canvas') as Shooter\n  shooter.parts = parts\n  shooter.palette = palette\n  shooter.context = 'thumbnail'\n  shooter.viewOnly = true\n  shooter.style.cssText = 'display: block; width: 100%; height: 100%;'\n\n  try {\n    host.appendChild(shooter)\n    const shot = await within(\n      (async () => {\n        await settle()\n        shooter.fit?.()\n        await settle()\n        return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined\n      })(),\n      PATIENCE\n    )\n    if (!shot) console.warn(`[thumbnail] ${PATIENCE}ms 안에 못 찍었습니다 — 그림 없이 저장합니다`)\n    return shot\n  } catch (e) {\n    console.warn(`[thumbnail] 세우지 못했습니다 — ${(e as Error).message}`)\n    return undefined\n  } finally {\n    host.remove()\n  }\n}\n"]}

package/dist-client/modeller/v3-clips.d.ts

@@ -34,6 +34,6 @@ export declare const trackEdit: (clip: Clip, track: ClipTrack, patch?: Partial<P
     state: string;
     clip: string;
     keys: ClipKey[];
-    loop: "hold" | "wrap";
+    loop: "wrap" | "hold";
     interpolation: "linear" | "step";
 };

package/dist-client/modeller/v3-editor.d.ts

@@ -79,6 +79,11 @@ export declare class FigureV3Editor extends LitElement {
     protected willUpdate(_changed: PropertyValues): void;
     /** The scene toggles: the mode already shown takes the gizmo away. */
     private useGizmo;
+    /**
+     * A refusal no particular sentence knows: figure-model's code said as a refusal, never its English; any other error
+     * (the network, the server) as it came.
+     */
+    private said;
     private run;
     /** What the canvas draws: the figure with the value in hand when there is one, and without the parts hidden on the workbench. */
     private drawnParts;

package/dist-client/modeller/v3-editor.js

@@ -27,7 +27,7 @@ import { ScrollbarStyles } from '@operato/styles';
 import { alignChanges, boxOf, canMirror, mirrorChanges } from './v3-align.js';
 import { paletteRecipe } from './v3-palette.js';
 import { nudgeOf } from './v3-stage-model.js';
-import { inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, sizeRangeRefusalOf } from './v3-refusals.js';
+import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, sizeRangeRefusalOf } from './v3-refusals.js';
 import { instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './v3-links.js';
 import { jointFanOf } from './v3-joint-fan.js';
 import { jointDragOf } from './v3-joint-drag.js';
@@ -376,15 +376,24 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         this.renderRoot.querySelector('figure-v3-canvas')?.gizmo(mode);
         this.gizmoMode = this.gizmoMode === mode ? undefined : mode;
     }
+    /**
+     * A refusal no particular sentence knows: figure-model's code said as a refusal, never its English; any other error
+     * (the network, the server) as it came.
+     */
+    said(error) {
+        return error?.code ? editRefusalOf(error, (key, params) => i18next.t(key, params)) : error instanceof Error ? error.message : String(error);
+    }
     run(action) {
         try {
             action();
             this.error = '';
+            /* The next step stands on its own: what the last removal let go of is no longer the news. */
+            this.notice = '';
             this.changed();
         }
         catch (error) {
             const say = (key, params) => i18next.t(key, params);
-            this.error = sizeRangeRefusalOf(error, say) ?? inputRangeRefusalOf(error, say) ?? (error instanceof Error ? error.message : String(error));
+            this.error = sizeRangeRefusalOf(error, say) ?? inputRangeRefusalOf(error, say) ?? this.said(error);
         }
         finally {
             /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
@@ -456,7 +465,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.error = '';
         }
         catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
+            this.error = this.said(error);
         }
         finally {
             this.changed();
@@ -492,15 +501,17 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
     removePart(id, refitRoom = false) {
         this.retry = undefined;
         try {
-            this.session.edit({ kind: 'remove-part', target: id, ...(refitRoom ? { refitRoom: true } : {}) });
+            const view = this.session.edit({ kind: 'remove-part', target: id, ...(refitRoom ? { refitRoom: true } : {}) });
             this.error = '';
+            /* What else the removal let go of, named (chief architect, 2026-09-27); undo brings it back. */
+            this.notice = removalNoticeOf(view.removal, (key, params) => i18next.t(key, params)) ?? '';
             if (this.selected === id)
                 this.selected = '';
             this.changed();
         }
         catch (error) {
             /* The refusal a person meets most: another part stands on this one or follows its size. Said in their words. */
-            this.error = partRefusalOf(error, id, (key, params) => i18next.t(key, params)) ?? (error instanceof Error ? error.message : String(error));
+            this.error = partRefusalOf(error, id, (key, params) => i18next.t(key, params)) ?? this.said(error);
             /* In the declared room only: the way on is to delete it and fit the room to the parts left, in one step. */
             if (!refitRoom && inDeclaredRoom(error))
                 this.retry = { label: i18next.t('figure.button.remove-and-refit-room', { part: id }), run: () => this.removePart(id, true) };
@@ -536,7 +547,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.changed();
         }
         catch (error) {
-            this.recipeError = error instanceof Error ? error.message : String(error);
+            this.recipeError = recipeRefusalOf(error, (key, params) => i18next.t(key, params)) ?? this.said(error);
         }
     }
     /** The design values of the asset being edited. */
@@ -629,7 +640,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
                 ? i18next.t('figure.text.gizmo-joint-places', { part: partLabelOf(id) })
                 : /is fastened to/.test(message)
                     ? i18next.t('figure.text.gizmo-fastening-places', { part: partLabelOf(id) })
-                    : message;
+                    : this.said(error);
             this.requestUpdate();
         }
     }
@@ -810,7 +821,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
                         ? i18next.t('figure.text.fasten-would-loop')
                         : sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ??
                             placementRefusalOf(error, (key, params) => i18next.t(key, params)) ??
-                            (error instanceof Error ? error.message : String(error));
+                            this.said(error);
         }
     }
     changeField(field, event) {
@@ -1104,7 +1115,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
                 this.changed();
             }
             catch (error) {
-                this.error = error instanceof Error ? error.message : String(error);
+                this.error = this.said(error);
             }
         };
         return html `<div public-pitch>
@@ -1162,7 +1173,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.error =
                 code === 'INPUT_RANGE' && found
                     ? i18next.t('figure.text.repeat-pitch-too-small', { length: Number(found[1]).toLocaleString(), min: found[2], limit: found[3] })
-                    : message;
+                    : this.said(error);
         }
     }
     /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */