@things-factory/figure-ui 10.1.47 → 10.1.48

package/client/modeller/figure-v3-parts.ts

@@ -59,7 +59,7 @@ const RECIPES: Array<{ kind: V3PaletteKind; icon: string; label: string }> = [
   { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
   { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
   { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
-  { kind: 'wall', icon: 'wall', label: 'figure.label.primitive-wall' },
+  { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
   { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 

package/client/modeller/v3-canvas.ts

@@ -7,6 +7,7 @@ import type { GizmoReach } from './v3-gizmo.js'
 import type { V3RenderPart } from './v3-renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
 import { boardFor, changedKeys, componentOf, gizmoResultOf, type Board } from './v3-stage-model.js'
+import { JOINT_FAN } from './v3-joint-fan.js'
 
 /*
  * The V3 modeller's canvas -- a things-scene board in editing mode, as the V2 modeller's was.
@@ -44,6 +45,9 @@ interface SceneHandle {
   root?: SceneLayer
 }
 
+/* The fan's colour when the figure's palette names no accent. */
+const FAN_COLOUR = '#ff8a00'
+
 /* The 2D side of the board, which the author never sees on this page but the scene paints. */
 const PAPER = '#ffffff'
 
@@ -81,6 +85,14 @@ export class FigureV3Canvas extends LitElement {
   /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */
   @property({ attribute: false }) reach: GizmoReach = { translate: false, rotate: false, scale: false }
   @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW
+  /**
+   * View only: nothing that happens on the board is told out. The card's picture is taken from a second canvas stood up
+   * off screen (`v3-thumbnail.ts`); the scene settles its components as it builds them, and a change told from there
+   * would reach the editor as an edit (V2's `viewOnly`, for the same reason).
+   */
+  @property({ type: Boolean }) viewOnly = false
+  /** Where the selected part turns and how far (`v3-joint-fan`): shown, never picked, never saved. */
+  @property({ attribute: false }) fan: V3RenderPart | null = null
 
   @query('div[stage]') private stage!: HTMLDivElement
 
@@ -103,7 +115,7 @@ export class FigureV3Canvas extends LitElement {
 
   protected updated(changed: PropertyValues) {
     if (!this.hasUpdated) return
-    if (changed.has('parts') || changed.has('palette') || changed.has('context')) this.standUp()
+    if (changed.has('parts') || changed.has('palette') || changed.has('context') || changed.has('fan')) this.standUp()
     if (changed.has('view')) this.applyView()
     if (changed.has('selected')) this.showSelected()
   }
@@ -115,6 +127,25 @@ export class FigureV3Canvas extends LitElement {
     this.teardown()
   }
 
+  /**
+   * The board as a picture, for the card: the 3D view at this size, or nothing when it cannot be taken. The scene's
+   * `toDataURL` renders the 2D board (a white sheet, V2 found), and the 3D renderer keeps no drawing buffer, so the
+   * scene's own `snapshot3d` draws and reads in one task. A picture that cannot be taken is not an error and is not
+   * faked (V2's `snapshot`, lost when this canvas moved onto the scene -- no card had a picture since, user 2026-09-24).
+   */
+  async snapshot(width = 480, height = 360): Promise<string | undefined> {
+    const layer = this.scene?.root as (SceneLayer & { snapshot3d?: (w?: number, h?: number, type?: string, quality?: number) => Promise<string | undefined> }) | undefined
+    if (!layer?.snapshot3d) return undefined
+    try {
+      /* webp: a card needs no alpha, and png is three or four times heavier in every list response. */
+      const url = await layer.snapshot3d(width, height, 'image/webp', 0.85)
+      return typeof url === 'string' && url.startsWith('data:') ? url : undefined
+    } catch (e) {
+      console.warn(`[thumbnail] could not take the picture -- ${(e as Error).message}`)
+      return undefined
+    }
+  }
+
   /** The whole figure in view: the board's fit, then the 3D camera's own, as V2 did. */
   fit() {
     this.scene?.fit?.('ratio')
@@ -167,7 +198,10 @@ export class FigureV3Canvas extends LitElement {
   }
 
   private components(): Record<string, unknown>[] {
-    return this.parts.map(part => componentOf(part, this.palette, this.board!)).filter((c): c is Record<string, unknown> => !!c)
+    const parts = this.parts.map(part => componentOf(part, this.palette, this.board!)).filter((c): c is Record<string, unknown> => !!c)
+    /* The fan in the accent colour, translucent; `capturable: false` keeps clicks, the marquee and the gizmo off it. */
+    const fan = this.fan ? componentOf(this.fan, { ...this.palette, [JOINT_FAN]: this.palette['palette.accent'] ?? FAN_COLOUR }, this.board!) : null
+    return fan ? [...parts, { ...fan, capturable: false, locked: true }] : parts
   }
 
   /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */
@@ -213,7 +247,7 @@ export class FigureV3Canvas extends LitElement {
   private watchScene() {
     const layer = this.scene?.root
     const root = layer?.root
-    if (!layer || !root?.on) return
+    if (!layer || !root?.on || this.viewOnly) return
     root.on('selected', (after: unknown) => {
       const name = (after as SceneComponent[] | undefined)?.[0]?.state?.name
       const id = typeof name === 'string' ? name : ''

package/client/modeller/v3-editor.ts

@@ -19,14 +19,15 @@ import { DEFAULT_VIEW, type ViewSettings } from './figure-view.js'
 import './figure-v3-capability.js'
 import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
 import { keyActionOf } from './v3-keys.js'
-import { groupFields, type FieldLike, type FieldGroup } from './v3-fields.js'
+import { groupFields, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './v3-fields.js'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
 import type { V3PaletteKind, V3PartRow } from './figure-v3-parts.js'
 import { paletteRecipe } from './v3-palette.js'
 import type { FigureV3Canvas } from './v3-canvas.js'
 import type { V3BudgetLine } from './v3-maturity.js'
-import { instanceRangeOf, rangeDiffers } from './v3-links.js'
+import { instanceRangeOf, rangeDiffers, turnsAboutAJoint } from './v3-links.js'
+import { jointFanOf } from './v3-joint-fan.js'
 import { isLive, livePartsOf, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './v3-live.js'
 
 
@@ -306,6 +307,18 @@ export class FigureV3Editor extends LitElement {
     const parts = (isLive(this.live) && asset ? livePartsOf(asset as V3Asset, this.live) : null) ?? drawableV3Parts(geometry ?? [])
     return parts.filter(body => !this.hiddenParts.has((body as { id: string }).id))
   }
+  /**
+   * Where the selected part turns and how far, with the pose as it is drawn now -- a value in hand included, so the
+   * fan follows the arm while a control is dragged. Its size comes from what the joint turns (`v3-joint-fan`).
+   */
+  private fanOf(asset: V3Asset | undefined) {
+    if (!asset || !this.selected || this.hiddenParts.has(this.selected)) return null
+    try {
+      return jointFanOf(asset, this.selected, this.live.values)
+    } catch {
+      return null
+    }
+  }
   /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
   private hold(values: Record<string, number>, edit?: V3PartEdit) {
     this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) }
@@ -454,6 +467,14 @@ export class FigureV3Editor extends LitElement {
    * A part's name — the V2 part name field. It renames every value the part owns, and what refers to them follows
    * (figure-model's rename-part), as one step of the history.
    */
+  /**
+   * A repeated body is one of its repeat's copies and is named after it -- the list and this field read `roller 15`, not
+   * its path through the repeat (user, 2026-09-24: 「부품 이름 ???」). A copy has no name of its own to change.
+   */
+  private renderRepeatNote(geometry: readonly unknown[] | undefined) {
+    const repeat = repeatOf(this.selected, geometry)
+    return repeat ? html`<p hint>${i18next.t('figure.text.repeat-member', { name: repeat.name, count: repeat.count, index: repeat.index })}</p>` : nothing
+  }
   private renamePart(input: HTMLInputElement) {
     const name = input.value.trim()
     const from = this.selected
@@ -637,8 +658,20 @@ export class FigureV3Editor extends LitElement {
               <md-icon>straighten</md-icon>${i18next.t('figure.button.remeasure-range')}
             </button>`
         : nothing}
+      ${this.renderSizingRule(asset, unavailable)}
     </section>`
   }
+  /**
+   * How the figure grows. One ratio (`sizing: 'uniform'`) is said as it is; a figure with joints that has not declared
+   * it is offered it -- a mechanism does not shear -- and the author decides (chief architect's ruling 2026-09-24).
+   */
+  private renderSizingRule(asset: V3Asset, unavailable: boolean) {
+    if (asset.sizing === 'uniform') return html`<div inline-field><label>${i18next.t('figure.label.sizing-rule')}</label><span>${i18next.t('figure.label.sizing-uniform')}</span></div>`
+    return html`${turnsAboutAJoint(asset) ? html`<p hint>${i18next.t('figure.text.sizing-uniform-proposed')}</p>` : nothing}
+      <button act ?disabled=${unavailable} title=${i18next.t('figure.text.sizing-uniform-explained')} @click=${() => this.linkCommand({ kind: 'scale-uniformly' })}>
+        <md-icon>aspect_ratio</md-icon>${i18next.t('figure.button.scale-uniformly')}
+      </button>`
+  }
   /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */
   private choose(id: string) {
     this.selected = id
@@ -744,6 +777,7 @@ export class FigureV3Editor extends LitElement {
           : html`<figure-v3-canvas
           .view=${this.view}
           .parts=${this.drawnParts(view.geometry, asset)}
+          .fan=${this.fanOf(asset as V3Asset | undefined)}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
@@ -774,11 +808,12 @@ export class FigureV3Editor extends LitElement {
                       <input
                         name-field
                         aria-label=${i18next.t('figure.label.name')}
-                        .value=${this.selected}
-                        ?disabled=${unavailable}
+                        .value=${partLabelOf(this.selected)}
+                        ?disabled=${unavailable || !!repeatOf(this.selected, view.geometry)}
                         @change=${(e: Event) => this.renamePart(e.target as HTMLInputElement)}
                       />
                     </div>
+                    ${this.renderRepeatNote(view.geometry)}
                   </section>
                   ${this.renderGroups(groupFields(design, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
                   ${this.renderLinks(unavailable, 'shape')}

package/client/modeller/v3-fields.ts

@@ -60,3 +60,25 @@ export function partLabelOf(id: string): string {
   return places.length ? `${path[0].replace(/\.repeat$/, '')} ${places.join('·')}` : id
 }
 
+/**
+ * The repeat a body is a copy of: its name, how many copies it makes, and which copy this is (counted from 1). Nothing
+ * for a body that is not a copy.
+ */
+export function repeatOf(id: string, geometry: readonly unknown[] | undefined): { name: string; count: number; index: number } | null {
+  const path = pathOf(id)
+  if (!path) return null
+  const count = (geometry ?? []).filter(g => pathOf((g as { id?: string }).id ?? '')?.[0] === path[0]).length
+  const index = path.find((step): step is number => typeof step === 'number')
+  return { name: String(path[0]).replace(/\.repeat$/, ''), count, index: (index ?? 0) + 1 }
+}
+
+function pathOf(id: string): unknown[] | null {
+  if (!id.startsWith('[')) return null
+  try {
+    const path = JSON.parse(id)
+    return Array.isArray(path) && typeof path[0] === 'string' ? path : null
+  } catch {
+    return null
+  }
+}
+

package/client/modeller/v3-joint-fan.ts

@@ -0,0 +1,292 @@
+import { compileV3Asset, compileV3Graph, v3WorldBoxesOf, v3WritersOf } from '@hatiolab/figure-model'
+import type { V3Asset } from '@hatiolab/figure-model'
+
+import type { V3RenderPart } from './v3-renderer.js'
+
+/*
+ * Where the selected part turns, and how far -- a translucent fan on the editing board (V2's joint gizmo, inventory
+ * 3.38). An axis name says nothing about which way a part swings; on a six-axis arm the author went to the preview and
+ * pushed each slider to its end to find out. The fan lies in the plane the part turns in, at the pivot, open from the
+ * control's lowest value to its highest; the edge at the value the figure holds now is where the part is.
+ *
+ * It is found by evaluating, not by reading the graph's shape: the frame that carries the part is sampled across the
+ * control's range, and a point at a fixed distance from the pivot traces the fan. So the direction is right whatever
+ * the slope of the control, and a joint inside other joints is drawn where its parents put it.
+ *
+ * Two ways a part turns are read:
+ *   - a motion made in the modeller (`add-motion`): `<part>.motion`, the frame it moves is its seat, the pivot the
+ *     seat's origin;
+ *   - a joint the converter wrote from V2 (`<joint>.motion` · `<joint>.chain`): the part is composed on the joint's
+ *     chain, the pivot is the joint's origin (`<joint>.frameOnParent`).
+ * A slide has no fan. Nothing is drawn when the turn cannot be found -- a fan in some guessed plane would point the
+ * wrong way.
+ */
+
+/** The fan's name on the board. It is not a part: not in the list, not saved, not picked. */
+export const JOINT_FAN = '__joint-fan'
+
+/** How thick the fan is: thin enough not to hide the part, thick enough to be seen edge-on. */
+const THICKNESS = 6
+/** About one segment every six degrees, so a full turn reads as a circle. */
+const STEP_DEG = 6
+
+type Pose = { r: number[][]; t: number[] }
+interface Node {
+  id: string
+  op: string
+  args: string[]
+  outputs: Record<string, string>
+  params?: Record<string, string>
+}
+
+const apply = (p: Pose, v: number[]) => [0, 1, 2].map(i => p.r[i]![0]! * v[0]! + p.r[i]![1]! * v[1]! + p.r[i]![2]! * v[2]! + p.t[i]!)
+const sub = (a: number[], b: number[]) => a.map((v, i) => v - b[i]!)
+const dot = (a: number[], b: number[]) => a.reduce((s, v, i) => s + v * b[i]!, 0)
+const cross = (a: number[], b: number[]) => [a[1]! * b[2]! - a[2]! * b[1]!, a[2]! * b[0]! - a[0]! * b[2]!, a[0]! * b[1]! - a[1]! * b[0]!]
+const norm = (a: number[]) => {
+  const l = Math.hypot(...a)
+  return l > 1e-9 ? a.map(v => v / l) : null
+}
+
+/** How far outside a part's box a pivot may lie and still be on the part: the kernel's contact skin. */
+const SEAM = 1
+/** An origin this deep in a part's box (a share of its half-measure, on every axis) is housed by the part. */
+const HOUSED = 0.5
+const AXIS_NAMES = ['x', 'y', 'z'] as const
+type WorldBox = { centre: Record<'x' | 'y' | 'z', number>; extent: Record<'x' | 'y' | 'z', number> }
+
+interface Turn {
+  /** The node whose value carries the moving frame into the figure's frame. */
+  carrier: string
+  /** The pivot, in the moving frame. */
+  pivot: number[]
+  /** The axis, in the moving frame. */
+  axis: number[]
+  /** Where the part sits, in the moving frame -- which way the fan's reference edge points. */
+  toward: number[]
+  /** The part the joint turns -- the fan is sized from it, so a joint shows one fan whichever part is selected. */
+  turnedPart: string
+  /** The state input that turns it. */
+  control: { id: string; min: number; max: number }
+}
+
+function turnOf(asset: V3Asset, part: string, values: Record<string, unknown>, box: WorldBox | undefined): Turn | null {
+  const m = asset.document.model as unknown as { nodes: Node[]; constants: { id: string; value: number }[]; inputs: { id: string; role?: string; min?: number; max?: number }[] }
+  const node = (id: string) => m.nodes.find(n => n.id === id)
+  const constant = (ref: string) => m.constants.find(c => c.id === ref)?.value
+  const valueOf = (n: Node | undefined) => (n ? values[Object.values(n.outputs)[0]!] : undefined) as Pose | undefined
+  const controlOf = (ref: string | undefined, seen = new Set<string>()): Turn['control'] | null => {
+    if (!ref || seen.has(ref)) return null
+    seen.add(ref)
+    const input = m.inputs.find(i => i.id === ref && i.role === 'state')
+    if (input) return { id: input.id, min: input.min ?? 0, max: input.max ?? 0 }
+    const writer = m.nodes.find(n => Object.values(n.outputs).includes(ref))
+    for (const arg of writer?.args ?? []) {
+      const found = controlOf(arg, seen)
+      if (found) return found
+    }
+    return null
+  }
+  const axisOf = (motion: Node) => {
+    const axis = motion.args.slice(0, 3).map(constant)
+    return axis.every(v => typeof v === 'number') ? norm(axis as number[]) : null
+  }
+
+  /* Made in the modeller: the part's own motion turns its seat about the seat's origin. */
+  const own = node(`${part}.motion`)
+  if (own) {
+    if (own.op !== 'axis-turn@1') return null
+    const axis = axisOf(own)
+    const control = controlOf(own.args[3])
+    const at = valueOf(node(`${part}.pose`))
+    if (!axis || !control || !at) return null
+    return { carrier: own.id, pivot: [0, 0, 0], axis, toward: at.t, control, turnedPart: part }
+  }
+
+  /*
+    Written by the converter: a joint (`<joint>.motion`, its origin `<joint>.frameOnParent`) carries its own part and
+    everything fastened below it, through its chain (the first joint of a chain has only its attachment). A part shows
+    the joint it is to that part of the mechanism (user, 2026-09-24: 「elbow-housing itself is a axis」 · 「please check
+    all that logic and concept」), tested in this order on the joints as they stand now:
+      1. housing -- a joint's origin lies deep inside the part, which is centred on it: the shoulder housing shows the
+         shoulder and the elbow housing the elbow, though another joint carries them;
+      2. turned -- the joint that carries the part, when its axis passes through the part: through its middle for a
+         body that rolls on it (the wrist roll, the tool flange, the gripper body), through its root for a link (the
+         upper arm, the forearm);
+      3. otherwise none: the pedestal (the base's axis runs through it but turns it not), the fingers.
+    An axis passing through a part is not enough by itself: the wrist roll's axis runs the forearm's length and the
+    tool roll's through the wrist pitch, and neither turns them (an earlier rule said so, and was wrong).
+  */
+  if (!box) return null
+  const carrierOf = (joint: string) => (node(`${joint}.chain`) ? `${joint}.chain` : `${joint}.attach`)
+  const mine = node(`${part}.moved`)?.args.find(arg => /\.(chain|attach)\.value$/.test(arg))?.replace(/\.value$/, '')
+  const centre = AXIS_NAMES.map(a => box.centre[a])
+  const half = AXIS_NAMES.map(a => box.extent[a] / 2)
+  const joints = m.nodes
+    .filter(n => n.op === 'axis-turn@1' && n.id.endsWith('.motion') && node(n.id.replace(/\.motion$/, '.frameOnParent')))
+    .map(motion => {
+      const joint = motion.id.replace(/\.motion$/, '')
+      const carrier = carrierOf(joint)
+      const frame = valueOf(node(carrier))
+      const origin = valueOf(node(`${joint}.frameOnParent`))
+      const local = axisOf(motion)
+      if (!frame || !origin || !local) return null
+      const at = apply(frame, origin.t)
+      const along = norm([0, 1, 2].map(i => dot(frame.r[i]!, local)))
+      if (!along) return null
+      const off = sub(centre, at)
+      return {
+        joint,
+        motion,
+        carrier,
+        origin,
+        /* How deep the origin lies: 0 at the centre, 1 on the box's face, on the axis where it is shallowest. */
+        depth: Math.max(...[0, 1, 2].map(i => Math.abs(off[i]!) / (half[i]! + SEAM))),
+        fromCentre: Math.hypot(...off),
+        through: lineMeetsBox(at, along, centre, half)
+      }
+    })
+    .filter((c): c is NonNullable<typeof c> => !!c)
+  const housing = joints.filter(c => c.depth <= HOUSED).sort((a, b) => a.fromCentre - b.fromCentre)[0]
+  const carrying = joints.find(c => c.carrier === mine)
+  const chosen = housing ?? (carrying && carrying.through ? carrying : undefined)
+  if (!chosen) return null
+  const axis = axisOf(chosen.motion)
+  const control = controlOf(chosen.motion.args[3])
+  if (!axis || !control) return null
+  /* The reference edge points at what the joint turns: of the parts it carries, the one farthest off its axis. */
+  const flatOff = (t: number[]) => {
+    const rel = sub(t, chosen.origin.t)
+    return Math.hypot(...sub(rel, axis.map(v => v * dot(rel, axis))))
+  }
+  const turned = m.nodes
+    .filter(n => n.id.endsWith('.moved') && n.args.includes(`${chosen.carrier}.value`))
+    .map(n => ({ id: n.id.replace(/\.moved$/, ''), t: valueOf(node(n.id.replace(/\.moved$/, '.pose')))?.t }))
+    .filter((one): one is { id: string; t: number[] } => !!one.t)
+    .sort((a, b) => flatOff(b.t) - flatOff(a.t))[0]
+  return { carrier: chosen.carrier, pivot: chosen.origin.t, axis, toward: turned?.t ?? chosen.origin.t, control, turnedPart: turned?.id ?? part }
+}
+
+/**
+ * The fan for the part, as a body to stand on the board, or null when the part does not turn. `values` are the
+ * inputs the figure is drawn with now (a pose in hand included), so the fan follows the arm as it is posed.
+ */
+export function jointFanOf(asset: V3Asset, part: string, values: Record<string, number> = {}): V3RenderPart | null {
+  if (!part) return null
+  let graph: ReturnType<typeof compileV3Graph>
+  try {
+    graph = compileV3Graph(asset.document.model as never)
+  } catch {
+    return null
+  }
+  const inputs = { ...asset.designInputs, ...asset.stateDefaults, ...values }
+  const at = (over: Record<string, number>) => graph.evaluate({ ...inputs, ...over }).values as Record<string, unknown>
+  let now: Record<string, unknown>
+  try {
+    now = at({})
+  } catch {
+    return null
+  }
+  let box: WorldBox | undefined
+  try {
+    box = v3WorldBoxesOf(
+      compileV3Asset({ ...asset, designInputs: { ...asset.designInputs, ...pick(values, asset.designInputs) }, stateDefaults: { ...asset.stateDefaults, ...pick(values, asset.stateDefaults) } })
+        .evaluate()
+        .geometry.filter(g => g.id === part),
+      v3WritersOf(asset)
+    )[0]
+  } catch {
+    box = undefined
+  }
+  const turn = turnOf(asset, part, now, box)
+  if (!turn) return null
+  const carrierRef = Object.values(asset.document.model.nodes.find(n => n.id === turn.carrier)!.outputs)[0]!
+  const carrierNow = now[carrierRef] as Pose | undefined
+  if (!carrierNow) return null
+
+  /* The reference edge points from the pivot toward the part, in the plane it turns in; any perpendicular if it sits on the axis. */
+  const rel = sub(turn.toward, turn.pivot)
+  const inPlane = sub(rel, turn.axis.map(v => v * dot(rel, turn.axis)))
+  const d = norm(inPlane) ?? norm(cross(turn.axis, Math.abs(turn.axis[0]!) < 0.9 ? [1, 0, 0] : [0, 1, 0]))!
+  /*
+    Sized from what the joint turns, as V2 sized it from the joint's child: selecting the elbow housing or the forearm
+    shows the elbow's one fan, not a smaller one for the smaller part (user, 2026-09-24).
+  */
+  const radius = Math.max(60, Math.round(Math.max(largestMeasureOf(asset, turn.turnedPart, inputs), Math.hypot(...inPlane)) * 0.6))
+  const edge = turn.pivot.map((v, i) => v + d[i]! * radius)
+
+  const { min, max } = turn.control
+  if (!(max > min)) return null
+  const steps = Math.max(2, Math.ceil((max - min) / STEP_DEG))
+  const pivot = apply(carrierNow, turn.pivot)
+  const traced: number[][] = []
+  try {
+    for (let i = 0; i <= steps; i++) {
+      const s = min + ((max - min) * i) / steps
+      traced.push(apply(at({ [turn.control.id]: s })[carrierRef] as Pose, edge))
+    }
+  } catch {
+    return null
+  }
+
+  /* The fan's own frame: x toward the first traced point, y along the axis as it stands now, z completing them. */
+  const axisNow = norm([0, 1, 2].map(i => dot(carrierNow.r[i]!, turn.axis)))
+  const first = norm(sub(traced[0]!, pivot))
+  if (!axisNow || !first) return null
+  const zAxis = cross(first, axisNow)
+  const r = [0, 1, 2].map(i => [first[i]!, axisNow[i]!, zAxis[i]!])
+  const local = (p: number[]) => {
+    const v = sub(p, pivot)
+    return { x: dot(v, first), y: dot(v, zAxis) }
+  }
+  const full = max - min >= 359.999
+  const profile = [...(full ? [] : [{ x: 0, y: 0 }]), ...traced.map(local)].map(p => ({ x: Math.round(p.x * 1000) / 1000, y: Math.round(p.y * 1000) / 1000 }))
+
+  return {
+    id: JOINT_FAN,
+    shape: { provider: 'polygon', dimensions: { height: THICKNESS }, profile },
+    pose: { t: pivot, r },
+    material: { token: '__joint-fan', transparent: true },
+    /** Which control turns it: the joint the fan shows. */
+    turns: turn.control.id
+  } as unknown as V3RenderPart
+}
+
+/** The values in hand that belong to a record's keys (design inputs, or state defaults). */
+function pick(values: Record<string, number>, of: Record<string, number>): Record<string, number> {
+  return Object.fromEntries(Object.entries(values).filter(([id]) => id in of))
+}
+
+/** A part's largest own measure (a box side, a diameter, a length) at the inputs given; 0 when it cannot be read. */
+function largestMeasureOf(asset: V3Asset, part: string, inputs: Record<string, number>): number {
+  try {
+    const body = compileV3Asset({ ...asset, designInputs: pick(inputs, asset.designInputs), stateDefaults: pick(inputs, asset.stateDefaults) })
+      .evaluate()
+      .geometry.find(g => g.id === part) as { shape?: { dimensions?: Record<string, number> } } | undefined
+    const dims = Object.entries(body?.shape?.dimensions ?? {}).map(([k, v]) => (k.startsWith('radius') ? v * 2 : v))
+    return dims.length ? Math.max(...dims) : 0
+  } catch {
+    return 0
+  }
+}
+
+/** Whether the line through `at` along `along` passes through the box (centre, half-measures), within the skin. */
+function lineMeetsBox(at: number[], along: number[], centre: number[], half: number[]): boolean {
+  let lo = -Infinity,
+    hi = Infinity
+  for (let i = 0; i < 3; i++) {
+    const min = centre[i]! - half[i]! - SEAM,
+      max = centre[i]! + half[i]! + SEAM
+    if (Math.abs(along[i]!) < 1e-12) {
+      if (at[i]! < min || at[i]! > max) return false
+      continue
+    }
+    const t1 = (min - at[i]!) / along[i]!,
+      t2 = (max - at[i]!) / along[i]!
+    lo = Math.max(lo, Math.min(t1, t2))
+    hi = Math.min(hi, Math.max(t1, t2))
+    if (lo > hi) return false
+  }
+  return true
+}
+

package/client/modeller/v3-links.ts

@@ -252,3 +252,11 @@ export function rangeDiffers(a: V3SizeRange, b: V3SizeRange): boolean {
   return AXES.some(axis => Math.abs(a[axis].min - b[axis].min) > 1e-3 || Math.abs(a[axis].max - b[axis].max) > 1e-3)
 }
 
+/**
+ * Whether the figure is a mechanism -- a part turns about a joint. Such a figure should grow by one ratio (chief
+ * architect's ruling 2026-09-24); the modeller proposes it, the author declares it.
+ */
+export function turnsAboutAJoint(asset: V3Asset): boolean {
+  return modelOf(asset).nodes.some(n => n.op === 'axis-turn@1')
+}
+

package/client/modeller/v3-thumbnail.ts

@@ -11,8 +11,9 @@ import type { V3RenderPart } from './v3-renderer.js'
  *
  * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있다. 그것을 찍으면 카드마다 프레임이
  * 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이 된다. 목록은 견주는 자리이므로 그림은
- * **정해진 크기와 정해진 카메라**로 찍는다. `figure-v3-canvas` 의 `thumbnail()` 은 보이는 캔버스를
- * 그대로 뽑으므로 카드용이 아니다 — 여기서는 새로 세운 캔버스가 스스로 `fit()` 한 자리에서 찍는다.
+ * **정해진 크기와 정해진 카메라**로 찍는다 — 새로 세운 캔버스(`viewOnly`)가 스스로 `fit()` 한 자리에서
+ * `snapshot()` 으로 찍는다. 캔버스가 씬 위로 옮겨 가면서 찍는 길이 빠졌고, 그동안 저장은 그림 없이 갔다
+ * (사용자 2026-09-24).
  *
  * ## 왜 서버가 아니라 브라우저인가
  *
@@ -37,7 +38,8 @@ interface Shooter extends HTMLElement {
   parts?: V3RenderPart[]
   palette?: Record<string, string>
   context?: string
-  thumbnail?: () => string | undefined
+  viewOnly?: boolean
+  snapshot?: (width?: number, height?: number) => Promise<string | undefined>
   fit?: () => void
 }
 
@@ -74,6 +76,7 @@ export async function captureV3Thumbnail(
   shooter.parts = parts
   shooter.palette = palette
   shooter.context = 'thumbnail'
+  shooter.viewOnly = true
   shooter.style.cssText = 'display: block; width: 100%; height: 100%;'
 
   try {
@@ -82,7 +85,8 @@ export async function captureV3Thumbnail(
       (async () => {
         await settle()
         shooter.fit?.()
-        return shooter.thumbnail?.()
+        await settle()
+        return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
       })(),
       PATIENCE
     )

package/dist-client/modeller/figure-v3-capability.d.ts

@@ -15,7 +15,7 @@ export declare class FigureV3Capability extends FigureV3Capability_base {
     /** The selected part, whose places are marked. */
     selected: string;
     locked: boolean;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private setRung;
     private pick;
 }

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

@@ -18,7 +18,7 @@ export declare class FigureV3Clips extends FigureV3Clips_base {
     /** Where each clip is scrubbed to, in seconds. */
     private at;
     private adding;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderClip;
     private renderTrack;
     private renderAdd;

package/dist-client/modeller/figure-v3-controls.d.ts

@@ -22,7 +22,7 @@ export declare class FigureV3Controls extends FigureV3Controls_base {
     private open;
     /** Values in hand while a slider is dragged: the dial and the number follow them before the release commits. */
     private live;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderControl;
     private renderDial;
     private renderSettings;

package/dist-client/modeller/figure-v3-links.d.ts

@@ -30,7 +30,7 @@ export declare class FigureV3Links extends FigureV3Links_base {
     private fasten;
     private motion;
     private place;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     /** Where things are held on this part: a seat things rest on, or a grip things are held in (parity row ⑤). */
     private renderPlaces;
     /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */

package/dist-client/modeller/figure-v3-material.d.ts

@@ -26,7 +26,7 @@ export declare class FigureV3Material extends FigureV3Material_base {
     locked: boolean;
     /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */
     private glowing?;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     private renderSegments;
     private swatches;
     private offered;

package/dist-client/modeller/figure-v3-parts.js

@@ -27,7 +27,7 @@ const RECIPES = [
     { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
     { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
     { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
-    { kind: 'wall', icon: 'wall', label: 'figure.label.primitive-wall' },
+    { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
     { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ];
 let FigureV3Parts = class FigureV3Parts extends localize(i18next)(LitElement) {