@things-factory/figure-ui 10.1.40 → 10.1.43

package/client/graphql/index.ts

@@ -59,6 +59,7 @@ const FIGURE_LIST_FIELDS = `
   score
   triangles
   groups
+  format
   thumbnailUpdatedAt
   updatedAt
   updater { id name }

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

@@ -0,0 +1,248 @@
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model'
+import { activePalette } from '@hatiolab/things-scene'
+import type { V3AssetGeometry, V3Material, V3PartEdit } from '@hatiolab/figure-model'
+
+/** The purpose each palette role is for, by its token — the V2 inspector's words for the same roles. */
+const PURPOSE: Record<string, string> = {
+  'palette.primary': 'primary',
+  'palette.accent': 'accent',
+  'palette.neutral': 'neutral',
+  'palette.dark': 'dark',
+  'palette.light': 'light',
+  'palette.surface': 'surface',
+  'palette.status-danger': 'danger',
+  'palette.status-warning': 'warning',
+  'palette.status-info': 'info',
+  'palette.status-success': 'success'
+}
+export const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)
+
+/** Bodies with a rim — the ones `set-segments` accepts. */
+const ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum'])
+const DEFAULT_SEGMENTS = 12
+
+/**
+ * 재질 — a V3 part's material, drawn as the V2 inspector draws it (V3 parity row ③).
+ *
+ * The V3 editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The V3 material
+ * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This
+ * shows those, with the V2 words: painted colours and lit colours as two groups of swatches, each named for what it
+ * is for.
+ *
+ * Not here, because a V3 material has no place for them: flat shading and casting shadows (V2 fields the converter
+ * does not carry). The glow's colour comes from the lit colours, as in V2.
+ *
+ * Every change leaves as one `v3-part-edit`; the editor runs it through the session, one step of the undo history.
+ */
+@customElement('figure-v3-material')
+export class FigureV3Material extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 10px;
+    }
+    h3 {
+      font-size: var(--ui-t-body, 13px);
+      margin: 12px 0 0;
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[swatches] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    button[swatch] {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border-radius: 50%;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--swatch);
+      cursor: pointer;
+    }
+    button[swatch][on] {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    select,
+    input[type='range'] {
+      font: inherit;
+      min-width: 0;
+    }
+    label[toggle] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    div[segments] {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 4px;
+    }
+    div[segments] button {
+      display: grid;
+      padding: 4px;
+      font: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    div[segments] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
+    }
+  `
+
+  /** The selected body as evaluated — its material, its segments and its shape. */
+  @property({ attribute: false }) body?: V3AssetGeometry & { id: string }
+  /** The asset's palette, token → colour. */
+  @property({ attribute: false }) palette: Record<string, string> = {}
+  @property({ type: Boolean }) locked = false
+
+  render() {
+    const part = this.body
+    if (!part) return nothing
+    const material = part.material
+    /*
+      The roles offered are the app's palette, as in V2, with any the asset carries beyond it. A new asset carries
+      only its primary colour; a role it lacks is sent with its colour and added in the same edit (`put`).
+    */
+    const entries = Object.entries(this.offered())
+    const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))
+    const lit = entries.filter(([token]) => token.startsWith('palette.status-'))
+    const glow = material.emissive
+    return html`
+      <h3>${i18next.t('figure.label.part-material')}</h3>
+      <div field>
+        <label>${i18next.t('figure.label.palette-role')}</label>
+        <div swatches>${this.swatches(painted, material.token, token => this.put({ token }))}</div>
+        ${lit.length
+          ? html`<small>${i18next.t('figure.label.status-colors')}</small>
+              <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`
+          : nothing}
+        <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.preset')}</label>
+        <select
+          ?disabled=${this.locked}
+          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as V3Material['preset'] })}
+        >
+          <option value="" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>
+          ${MATERIAL_PRESETS.map(
+            preset => html`<option value=${preset} ?selected=${preset === material.preset}>${i18next.t('figure.label.preset-' + preset)}</option>`
+          )}
+        </select>
+      </div>
+      <label toggle>
+        <input
+          type="checkbox"
+          ?disabled=${this.locked}
+          .checked=${!!material.transparent}
+          @change=${(e: Event) => this.put({ transparent: (e.target as HTMLInputElement).checked || undefined })}
+        />
+        ${i18next.t('figure.label.transparent')}
+      </label>
+      <div field>
+        <label>${i18next.t('figure.label.emissive')}</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          ?disabled=${this.locked}
+          .value=${String(glow?.intensity ?? 0)}
+          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}
+        />
+        <small>${(glow?.intensity ?? 0).toFixed(2)}</small>
+      </div>
+      ${glow
+        ? html`<div field>
+            <label>${i18next.t('figure.label.emissive-color')}</label>
+            <div swatches>${this.swatches(lit.length ? lit : painted, glow.token, token => this.put({ emissive: { ...glow, token } }))}</div>
+          </div>`
+        : nothing}
+      ${this.renderSegments(part)}
+    `
+  }
+
+  private renderSegments(part: V3AssetGeometry & { id: string }) {
+    const provider = (part as { shape?: { provider?: string } }).shape?.provider ?? ''
+    if (!ROUND.has(provider)) return nothing
+    const current = part.segments ?? DEFAULT_SEGMENTS
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.segments')}</label>
+        <div segments>
+          ${SEGMENT_PRESETS.map(
+            preset => html`<button
+              ?on=${preset === current}
+              ?disabled=${this.locked}
+              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}
+            >
+              <b>${preset}</b>
+              <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>
+            </button>`
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  private swatches(entries: [string, string][], chosen: string | undefined, pick: (token: string) => void) {
+    return entries.map(
+      ([token, colour]) => html`<button
+        swatch
+        ?on=${token === chosen}
+        ?disabled=${this.locked}
+        title=${purposeOf(token)}
+        aria-label=${purposeOf(token)}
+        style="--swatch:${colour}"
+        @click=${() => pick(token)}
+      ></button>`
+    )
+  }
+
+  private offered(): Record<string, string> {
+    return { ...(activePalette() as Record<string, string>), ...this.palette }
+  }
+
+  /** Intensity 0 is no glow at all, as in V2; a new glow takes the part's own colour until another is picked. */
+  private glow(intensity: number) {
+    const material = this.body!.material
+    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined })
+  }
+
+  private put(patch: Partial<V3Material>) {
+    const material: V3Material = { ...this.body!.material, ...patch }
+    for (const key of Object.keys(material) as (keyof V3Material)[]) if (material[key] === undefined) delete material[key]
+    /* The colours this material names that the asset does not carry yet. */
+    const offered = this.offered()
+    const palette = Object.fromEntries(
+      [material.token, material.emissive?.token]
+        .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)
+        .map(token => [token, offered[token]!])
+    )
+    this.edit({ kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) })
+  }
+
+  private edit(edit: V3PartEdit) {
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+  }
+}

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

@@ -47,7 +47,7 @@ const PROVIDER_ICON: Record<string, string> = {
 const RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; icon: string; label: string }> = [
   { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
   { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
-  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rect' },
+  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
   { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 
@@ -66,6 +66,8 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-on-surface);
         font: var(--label-font, inherit);
         font-size: 0.76rem;
+        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */
+        container-type: inline-size;
       }
       section {
         padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
@@ -232,6 +234,19 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         --md-icon-size: 15px;
         color: inherit;
       }
+      /*
+        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
+        2026-09-24). They go to a line of their own under the name.
+      */
+      @container (max-width: 199px) {
+        li[selected] {
+          flex-wrap: wrap;
+        }
+        li[selected] div[ops] {
+          flex-basis: 100%;
+          justify-content: flex-end;
+        }
+      }
       p[quiet] {
         margin: 0;
         font-size: 0.76rem;

package/client/modeller/modeller-route.ts

@@ -0,0 +1,25 @@
+/**
+ * Which modeller opens a figure — by the format of its source, which the server reports (`format`).
+ *
+ * The catalogue sent every figure to the V2 modeller, so a converted figure could only be opened by typing the V3
+ * page's address (2026-09-24). A new figure starts in V3: new V2 figures would only add to what the cutover has to
+ * convert (ADR-0087). A figure is opened in V3 only when the server says it is V3 — an unknown format goes to the
+ * V2 page, which reports what it could not read.
+ */
+export const V3_MODELLER = 'figure-v3-modeller'
+export const V2_MODELLER = 'figure-modeller'
+
+export function modellerPathOf(figure?: { id?: string; format?: string | null }): string {
+  if (!figure?.id) return V3_MODELLER
+  return figure.format === 'v3' ? `${V3_MODELLER}/${figure.id}` : `${V2_MODELLER}/${figure.id}`
+}
+
+/** The version a V3 asset stamps on itself. The V2 page forwards such a figure rather than failing on it. */
+export function isV3Source(source?: string | null): boolean {
+  if (!source) return false
+  try {
+    return (JSON.parse(source) as { version?: unknown })?.version === 'figure-v3-asset-1'
+  } catch {
+    return false
+  }
+}

package/client/modeller/v3-align.ts

@@ -0,0 +1,84 @@
+import { compileV3Asset, v3OccupiedBoxesOf, v3WritersOf } from '@hatiolab/figure-model'
+import type { V3Asset, V3InputChange, V3WorldBox } from '@hatiolab/figure-model'
+
+import { niceStep } from './part-edits.js'
+import type { GizmoReach } from './v3-gizmo.js'
+
+/**
+ * 맞추기 — the V2 inspector's align tools on a V3 part (parity row ③): centre on X, centre on Z, stand on the floor,
+ * mirror on X or Z, snap to the grid.
+ *
+ * V2 measured against its base box, which ran from 0 to its size on each axis. A V3 asset's frame has the floor at
+ * y 0 and X and Z centred on 0, so centring puts the part's box centre on 0 and the floor puts its lowest point on
+ * y 0. The part's box is its evaluated, rotated extent (`v3OccupiedBoxesOf`), so a turned part lands by what it
+ * actually covers, not by its unturned size.
+ *
+ * Every tool writes the part's own position (and, for snap, size) inputs — the same ones the gizmo writes, and only
+ * where the gizmo could (`GizmoReach`).
+ */
+export type AlignTool = 'centre-x' | 'centre-z' | 'floor' | 'snap'
+
+const AXES = ['x', 'y', 'z'] as const
+
+export function boxOf(asset: V3Asset, part: string): V3WorldBox | undefined {
+  const geometry = compileV3Asset(asset).evaluate().geometry
+  return v3OccupiedBoxesOf(geometry, v3WritersOf(asset)).find(box => box.part === part)
+}
+
+/** The grid V2 snaps to: about five steps across the figure, on 1 · 2 · 5 multiples. */
+export function gridStepOf(asset: V3Asset): number {
+  const geometry = compileV3Asset(asset).evaluate().geometry
+  const boxes = v3OccupiedBoxesOf(geometry, v3WritersOf(asset))
+  if (!boxes.length) return 1
+  const span = Math.max(
+    ...AXES.map(axis => {
+      const lo = Math.min(...boxes.map(b => b.centre[axis] - b.extent[axis] / 2))
+      const hi = Math.max(...boxes.map(b => b.centre[axis] + b.extent[axis] / 2))
+      return hi - lo
+    })
+  )
+  return niceStep(span)
+}
+
+export function alignChanges(asset: V3Asset, part: string, reach: GizmoReach, tool: AlignTool): V3InputChange[] {
+  if (!reach.translate) return []
+  const box = boxOf(asset, part)
+  if (!box) return []
+  const value = (id: string) => asset.designInputs[id] ?? 0
+  const set = (input: string, next: number): V3InputChange => ({ kind: 'set-design', input, unit: 'mm', value: Math.round(next) })
+  const at = (axis: 'x' | 'y' | 'z') => `${part}.position.${axis}`
+  switch (tool) {
+    case 'centre-x':
+      return [set(at('x'), value(at('x')) - box.centre.x)]
+    case 'centre-z':
+      return [set(at('z'), value(at('z')) - box.centre.z)]
+    case 'floor':
+      return [set(at('y'), value(at('y')) - (box.centre.y - box.extent.y / 2))]
+    case 'snap': {
+      const step = gridStepOf(asset)
+      const round = (n: number) => Math.round(n / step) * step
+      const changes = AXES.map(axis => set(at(axis), round(value(at(axis)))))
+      /* A size never snaps to 0 — the part would look gone. */
+      if (reach.scale && reach.sizes)
+        for (const id of reach.sizes) changes.push(set(id, Math.max(step, round(value(id)))))
+      return changes
+    }
+  }
+}
+
+/**
+ * Where a mirrored copy goes: the same distance on the other side of the centre plane. The copy is made by
+ * `duplicate-part` first; this is the position the copy is then given.
+ */
+export function mirrorChanges(asset: V3Asset, part: string, copy: string, axis: 'x' | 'z'): V3InputChange[] {
+  const box = boxOf(asset, part)
+  if (!box) return []
+  const id = `${part}.position.${axis}`
+  return [{ kind: 'set-design', input: `${copy}.position.${axis}`, unit: 'mm', value: Math.round((asset.designInputs[id] ?? 0) - 2 * box.centre[axis]) }]
+}
+
+/** Mirroring a part that already sits on the centre plane would put the copy inside it — V2 refuses it too. */
+export function canMirror(asset: V3Asset, part: string, axis: 'x' | 'z', reach: GizmoReach): boolean {
+  const box = reach.translate ? boxOf(asset, part) : undefined
+  return !!box && Math.abs(box.centre[axis]) >= 0.5
+}

package/client/modeller/v3-canvas.ts

@@ -1,7 +1,10 @@
 import { LitElement, html, css, type PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { i18next } from '@operato/i18n'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
+import type { GizmoReach, GizmoResult } from './v3-gizmo.js'
 import { replaceV3Meshes, disposeV3Meshes, type V3RenderPart } from './v3-renderer.js'
 
 /** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */
@@ -25,6 +28,35 @@ export class FigureV3Canvas extends LitElement {
       width: 100%;
       height: 100%;
     }
+    div[gizmo] {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 2px;
+      padding: 2px;
+      border-radius: 6px;
+      background: var(--md-sys-color-surface);
+      border: 1px solid var(--md-sys-color-outline-variant);
+    }
+    div[gizmo] button {
+      font: inherit;
+      font-size: 12px;
+      padding: 3px 8px;
+      border: none;
+      border-radius: 4px;
+      background: none;
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    div[gizmo] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    div[gizmo] button:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
     p {
       position: absolute;
       inset: 45% 1rem auto;
@@ -36,6 +68,17 @@ export class FigureV3Canvas extends LitElement {
   @property({ attribute: false }) parts: V3RenderPart[] = []
   @property({ attribute: false }) palette: Record<string, string> = {}
   @property() context = ''
+  /** The selected part, and what the gizmo may write for it (`gizmoReachOf`). Nothing reachable, no gizmo. */
+  @property() selected = ''
+  @property({ attribute: false }) reach: GizmoReach = { translate: false, rotate: false, scale: false }
+  /** Move · turn · size — W · E · R, as in the V2 modeller. */
+  @property() mode: 'translate' | 'rotate' | 'scale' = 'translate'
+  private transform?: TransformControls
+  /** What the gizmo holds: a stand-in at the body's origin, so the body's own matrix stays the evaluation's. */
+  private readonly proxy = new THREE.Object3D()
+  private dragStart?: { proxy: THREE.Matrix4; mesh: THREE.Matrix4; body: THREE.Mesh }
+  /** The pointerup that ends a drag is not a pick — releasing off the body would otherwise deselect it. */
+  private justDragged = false
   private renderer?: THREE.WebGLRenderer
   private readonly scene = new THREE.Scene()
   private readonly group = new THREE.Group()
@@ -46,8 +89,26 @@ export class FigureV3Canvas extends LitElement {
   private initialized = false
   private contextAtRender = ''
   render() {
-    return html`<canvas aria-label="Figure 3D 모델" @pointerup=${this.pick}></canvas
-      >${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`
+    const any = this.selected && (this.reach.translate || this.reach.rotate || this.reach.scale)
+    return html`<canvas aria-label="Figure 3D 모델" tabindex="0" @pointerup=${this.pick} @keydown=${this.key}></canvas
+      >${any
+        ? html`<div gizmo>
+            ${(['translate', 'rotate', 'scale'] as const).map(
+              (mode, i) => html`<button
+                ?on=${this.mode === mode}
+                ?disabled=${!this.reach[mode]}
+                title=${`${i18next.t('figure.label.gizmo-' + mode)} (${'WER'[i]})`}
+                @click=${() => (this.mode = mode)}
+              >
+                ${i18next.t('figure.label.gizmo-' + mode)}
+              </button>`
+            )}
+          </div>`
+        : null}${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`
+  }
+  private key = (event: KeyboardEvent) => {
+    const mode = ({ w: 'translate', e: 'rotate', r: 'scale' } as const)[event.key.toLowerCase() as 'w' | 'e' | 'r']
+    if (mode && this.reach[mode]) this.mode = mode
   }
   protected firstUpdated() {
     this.initialize()
@@ -77,6 +138,12 @@ export class FigureV3Canvas extends LitElement {
     this.scene.add(light)
     this.controls = new OrbitControls(this.camera, canvas)
     this.controls.addEventListener('change', this.draw)
+    this.transform = new TransformControls(this.camera, canvas)
+    this.transform.setSpace('world')
+    this.transform.addEventListener('change', this.draw)
+    this.transform.addEventListener('dragging-changed', this.dragging)
+    this.transform.addEventListener('objectChange', this.follow)
+    this.scene.add(this.proxy, this.transform.getHelper())
     this.observer = new ResizeObserver(() => {
       const r = this.getBoundingClientRect()
       if (r.width && r.height) {
@@ -93,6 +160,73 @@ export class FigureV3Canvas extends LitElement {
   protected updated(changed: PropertyValues) {
     if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))
       this.updateGeometry(this.contextAtRender !== this.context)
+    if (this.initialized && ['parts', 'selected', 'reach', 'mode', 'context'].some(key => changed.has(key))) this.placeGizmo()
+  }
+  /** Puts the gizmo on the selected body, in a mode it may write — or takes it away. */
+  private placeGizmo() {
+    const transform = this.transform
+    if (!transform || this.dragStart) return
+    if (!this.reach[this.mode]) {
+      const first = (['translate', 'rotate', 'scale'] as const).find(mode => this.reach[mode])
+      if (first && first !== this.mode) {
+        this.mode = first
+        return
+      }
+    }
+    const body = this.group.children.find(child => child.name === this.selected) as THREE.Mesh | undefined
+    if (!body || !this.reach[this.mode]) {
+      transform.detach()
+      this.draw()
+      return
+    }
+    const position = new THREE.Vector3(),
+      quaternion = new THREE.Quaternion(),
+      scale = new THREE.Vector3()
+    body.matrix.decompose(position, quaternion, scale)
+    this.proxy.position.copy(position)
+    this.proxy.quaternion.copy(quaternion)
+    this.proxy.scale.set(1, 1, 1)
+    this.proxy.updateMatrixWorld(true)
+    transform.setMode(this.mode)
+    /* Size follows the body's own axes; moving and turning read in the asset's axes, which the inputs are in. */
+    transform.setSpace(this.mode === 'scale' ? 'local' : 'world')
+    transform.attach(this.proxy)
+    this.draw()
+  }
+  private dragging = (event: { value: unknown }) => {
+    const on = !!event.value
+    if (this.controls) this.controls.enabled = !on
+    const body = this.group.children.find(child => child.name === this.selected) as THREE.Mesh | undefined
+    if (on && body) {
+      this.proxy.updateMatrix()
+      this.dragStart = { proxy: this.proxy.matrix.clone(), mesh: body.matrix.clone(), body }
+      return
+    }
+    const start = this.dragStart
+    this.dragStart = undefined
+    if (!start) return
+    /* Either listener may see the release first; the flag lasts past both, then clears. */
+    this.justDragged = true
+    setTimeout(() => (this.justDragged = false))
+    const result: GizmoResult = {}
+    if (this.mode === 'translate') result.position = this.proxy.position.toArray() as [number, number, number]
+    if (this.mode === 'rotate') {
+      /* rigid@1 composes Rx·Ry·Rz — three's 'XYZ' order — so the angles come back as the inputs mean them. */
+      const euler = new THREE.Euler().setFromQuaternion(this.proxy.quaternion, 'XYZ')
+      result.rotation = [euler.x, euler.y, euler.z].map(THREE.MathUtils.radToDeg) as [number, number, number]
+    }
+    if (this.mode === 'scale') result.scale = this.proxy.scale.toArray() as [number, number, number]
+    this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: this.selected, result }, bubbles: true, composed: true }))
+  }
+  /** While dragging, the body follows the stand-in; the next evaluation replaces it with where the inputs put it. */
+  private follow = () => {
+    const start = this.dragStart
+    if (!start) return
+    this.proxy.updateMatrix()
+    const delta = this.proxy.matrix.clone().multiply(start.proxy.clone().invert())
+    start.body.matrix.copy(delta.multiply(start.mesh))
+    start.body.matrixWorldNeedsUpdate = true
+    this.group.updateMatrixWorld(true)
   }
   private updateGeometry(fit: boolean) {
     try {
@@ -140,6 +274,7 @@ export class FigureV3Canvas extends LitElement {
     if (this.renderer) this.renderer.render(this.scene, this.camera)
   }
   private pick = (event: PointerEvent) => {
+    if (this.justDragged || this.transform?.dragging) return
     const r = (event.currentTarget as HTMLCanvasElement).getBoundingClientRect(),
       ray = new THREE.Raycaster()
     ray.setFromCamera(
@@ -159,6 +294,9 @@ export class FigureV3Canvas extends LitElement {
     this.observer?.disconnect()
     this.themeObserver?.disconnect()
     this.controls?.dispose()
+    this.transform?.detach()
+    this.transform?.dispose()
+    this.transform = undefined
     disposeV3Meshes(this.group)
     this.renderer?.dispose()
     this.renderer = undefined