@things-factory/figure-ui 10.1.39 → 10.1.42

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. */
@@ -13,35 +16,99 @@ export class FigureV3Canvas extends LitElement {
       min-width: 0;
       min-height: 0;
       position: relative;
-      background: #eef2f4;
+      /*
+        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238
+        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the
+        first paint and the scene agree and there is no flash between them.
+      */
+      background: var(--md-sys-color-surface-container);
     }
     canvas {
       display: block;
       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;
       text-align: center;
       pointer-events: none;
-      color: #526773;
+      color: var(--md-sys-color-on-surface-variant);
     }
   `
   @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()
   private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)
   private controls?: OrbitControls
   private observer?: ResizeObserver
+  private themeObserver?: MutationObserver
   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()
@@ -55,13 +122,28 @@ export class FigureV3Canvas extends LitElement {
     const canvas = this.renderRoot.querySelector('canvas')!
     this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })
     this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
-    this.scene.background = new THREE.Color('#eef2f4')
+    this.paintBackground()
+    /*
+      The app switches theme by the body's class (light · dark). Reading the colour once at start left a light
+      board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.
+    */
+    this.themeObserver = new MutationObserver(() => {
+      this.paintBackground()
+      this.draw()
+    })
+    this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })
     this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))
     const light = new THREE.DirectionalLight(0xffffff, 3)
     light.position.set(1, 2, 3)
     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) {
@@ -78,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 {
@@ -113,10 +262,19 @@ export class FigureV3Canvas extends LitElement {
     this.controls?.update()
     this.draw()
   }
+  /**
+   * The scene's background, taken from the host's computed background — the token resolved and normalised to
+   * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.
+   */
+  private paintBackground() {
+    const colour = getComputedStyle(this).backgroundColor
+    if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent') this.scene.background = new THREE.Color(colour)
+  }
   private draw = () => {
     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(
@@ -134,7 +292,11 @@ export class FigureV3Canvas extends LitElement {
   }
   disconnectedCallback() {
     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

package/client/modeller/v3-editor.ts

@@ -1,10 +1,16 @@
 import { LitElement, html, css, type PropertyValues } from 'lit'
+import { i18next } from '@operato/i18n'
 import { customElement, property, state } from 'lit/decorators.js'
 import type { V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
 import { captureV3Thumbnail } from './v3-thumbnail.js'
 import { drawableV3Parts } from './v3-renderer.js'
 import './v3-canvas.js'
+import './figure-v3-parts.js'
+import './figure-v3-material.js'
+import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
+import { alignChanges, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
+import type { V3PartRow } from './figure-v3-parts.js'
 import type { FigureV3Canvas } from './v3-canvas.js'
 
 const names: Record<string, string> = {
@@ -42,6 +48,12 @@ export class FigureV3Editor extends LitElement {
       flex-direction: column;
       min-height: 0;
       height: 100%;
+      /*
+        The editor folds by the width it is given, not the window's. The rail (208 open, 56 closed) and the page's
+        320 side take their share first, so a window rule was wrong whenever either was there: at 945 with the rail
+        open the editor had 417 and still drew its 660 of columns, over the side (UX ruling, 2026-09-24).
+      */
+      container-type: inline-size;
       font: 13px sans-serif;
       color: var(--md-sys-color-on-surface, #22343f);
     }
@@ -50,7 +62,7 @@ export class FigureV3Editor extends LitElement {
       align-items: center;
       gap: 8px;
       padding: 10px;
-      border-bottom: 1px solid #d4dde2;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
       flex-wrap: wrap;
     }
     main {
@@ -64,11 +76,11 @@ export class FigureV3Editor extends LitElement {
       overflow: auto;
       background: var(--md-sys-color-surface, #fff);
     }
-    aside:first-child {
-      border-right: 1px solid #d4dde2;
+    figure-v3-parts {
+      min-height: 0;
     }
     aside:last-child {
-      border-left: 1px solid #d4dde2;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
     }
     h3 {
       font-size: var(--ui-t-body, 13px);
@@ -83,7 +95,7 @@ export class FigureV3Editor extends LitElement {
       font: inherit;
       box-sizing: border-box;
       height: 34px;
-      border: 1px solid #cbd5dc;
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
       background: var(--md-sys-color-surface, #fff);
       color: inherit;
@@ -98,8 +110,27 @@ export class FigureV3Editor extends LitElement {
       cursor: default;
     }
     button[aria-pressed='true'] {
-      background: #d6edf0;
-      border-color: #337783;
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
+    }
+    div[tools] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin: 0 0 8px;
+    }
+    div[tools] button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      padding: 0;
+    }
+    div[tools] md-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
     }
     .parts {
       display: grid;
@@ -122,25 +153,46 @@ export class FigureV3Editor extends LitElement {
     }
     .error {
       padding: 10px;
-      background: #fff0eb;
-      color: #922716;
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
       white-space: pre-wrap;
     }
     .status {
       margin-left: auto;
     }
     .hint {
-      color: #637783;
+      color: var(--md-sys-color-on-surface-variant);
       line-height: 1.5;
     }
-    @media (max-width: 800px) {
+    /* 660 and over: parts | canvas | inputs. Below that the sum of the columns' least widths no longer fits. */
+    @container (max-width: 659px) {
       main {
         grid-template-columns: 140px minmax(160px, 1fr);
       }
       aside:last-child {
         grid-column: 1/-1;
         max-height: 260px;
-        border-top: 1px solid #d4dde2;
+        border-left: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+    }
+    /* Under 420: one column. The canvas first — seeing what is being made comes before the lists — and main scrolls. */
+    @container (max-width: 419px) {
+      main {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(240px, 45%);
+        grid-auto-rows: auto;
+        overflow-y: auto;
+      }
+      figure-v3-canvas {
+        order: -1;
+      }
+      figure-v3-parts {
+        border-right: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      aside:last-child {
+        max-height: none;
       }
     }
   `
@@ -148,6 +200,11 @@ export class FigureV3Editor extends LitElement {
   @property({ type: Number }) revision = 0
   @state() private selected = ''
   @state() private error = ''
+  /**
+   * Parts hidden on the workbench — the author's view while working, not the asset's visibility. Not saved, as in
+   * the V2 modeller: a part hidden here is still in the figure, still checked, still drawn on a board.
+   */
+  @state() private hiddenParts = new Set<string>()
   private lastContext: string | null = null
   protected willUpdate(_changed: PropertyValues) {
     const view = this.session?.read()
@@ -155,6 +212,7 @@ export class FigureV3Editor extends LitElement {
       this.lastContext = view?.context ?? null
       this.selected = ''
       this.error = ''
+      this.hiddenParts = new Set()
     }
     if (view && !view.geometry.some(g => g.id === this.selected)) this.selected = ''
   }
@@ -224,6 +282,111 @@ export class FigureV3Editor extends LitElement {
       this.selected = part.id
     })
   }
+  /**
+   * The list's own operations, as V3 part edits — each one step of the session's history. The copy and the moved
+   * part stay selected, as they do in the V2 list.
+   */
+  private duplicatePart(id: string) {
+    this.run(() => {
+      const before = new Set(this.session!.read().geometry.map(g => g.id))
+      this.session!.edit({ kind: 'duplicate-part', target: id })
+      this.selected = this.session!.read().geometry.find(g => !before.has(g.id))?.id ?? id
+    })
+  }
+  private movePart(id: string, to: number) {
+    this.run(() => this.session!.edit({ kind: 'move-part', target: id, to }))
+  }
+  private removePart(id: string) {
+    try {
+      this.session!.edit({ kind: 'remove-part', target: id })
+      this.error = ''
+      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 =
+        (error as { code?: string })?.code === 'PART_REFERENCED'
+          ? i18next.t('figure.text.part-is-referenced', { part: id })
+          : error instanceof Error
+            ? error.message
+            : String(error)
+    }
+  }
+  private toggleHiddenPart(id: string) {
+    const next = new Set(this.hiddenParts)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    this.hiddenParts = next
+  }
+  /** What the gizmo may write for the selected part — read off the asset being edited. */
+  private reachOf(id: string): GizmoReach {
+    const none = { translate: false, rotate: false, scale: false }
+    if (!id || !this.session) return none
+    try {
+      return gizmoReachOf(JSON.parse(this.session.source()), id)
+    } catch {
+      return none
+    }
+  }
+  /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
+  private transformed(id: string, result: GizmoResult) {
+    const view = this.session!.read()
+    const sizes = Object.fromEntries(view.fields.map(field => [field.id, field.value as number]))
+    const changes = gizmoChanges(id, this.reachOf(id), result, sizes)
+    if (changes.length) this.run(() => this.session!.apply(changes))
+    else this.requestUpdate()
+  }
+  /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
+  private align(tool: AlignTool) {
+    this.run(() => {
+      const asset = JSON.parse(this.session!.source())
+      const changes = alignChanges(asset, this.selected, this.reachOf(this.selected), tool)
+      if (changes.length) this.session!.apply(changes)
+    })
+  }
+  /** A mirrored copy: duplicate, then place the copy on the other side — two steps, as the V2 list makes it. */
+  private mirror(axis: 'x' | 'z') {
+    this.run(() => {
+      const id = this.selected
+      const before = new Set(this.session!.read().geometry.map(g => g.id))
+      this.session!.edit({ kind: 'duplicate-part', target: id })
+      const copy = this.session!.read().geometry.find(g => !before.has(g.id))?.id
+      if (!copy) return
+      this.session!.apply(mirrorChanges(JSON.parse(this.session!.source()), id, copy, axis))
+      this.selected = copy
+    })
+  }
+  private renderTools(unavailable: boolean) {
+    const reach = this.reachOf(this.selected)
+    if (!this.selected || !reach.translate) return null
+    let asset: unknown
+    try {
+      asset = JSON.parse(this.session!.source())
+    } catch {
+      return null
+    }
+    const tool = (name: AlignTool, icon: string, label: string, title: string) =>
+      html`<button ?disabled=${unavailable} aria-label=${i18next.t(label)} title=${i18next.t(title)} @click=${() => this.align(name)}>
+        <md-icon>${icon}</md-icon>
+      </button>`
+    return html`<div tools title=${i18next.t('figure.text.tools-explained')}>
+      ${tool('centre-x', 'horizontal_distribute', 'figure.button.center-x', 'figure.text.center-on-x')}
+      ${tool('centre-z', 'vertical_align_center', 'figure.button.center-z', 'figure.text.center-on-z')}
+      ${tool('floor', 'vertical_align_bottom', 'figure.button.to-floor', 'figure.text.put-on-floor')}
+      ${(['x', 'z'] as const).map(axis => {
+        const able = canMirror(asset as never, this.selected, axis, reach)
+        return html`<button
+          ?disabled=${unavailable || !able}
+          aria-label=${i18next.t('figure.button.mirror-' + axis)}
+          title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
+          @click=${() => this.mirror(axis)}
+        >
+          <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
+        </button>`
+      })}
+      ${tool('snap', 'grid_on', 'figure.button.snap', 'figure.text.snap-explained')}
+    </div>`
+  }
   private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {
     const input = event.target as HTMLInputElement,
       value = input.valueAsNumber
@@ -262,30 +425,34 @@ export class FigureV3Editor extends LitElement {
       </header>
       ${this.error || view.error ? html`<div role="alert" class="error">${this.error || view.error}</div>` : null}
       <main>
-        <aside>
-          <h3>도형 추가</h3>
-          <div class="recipes">
-            ${(['box', 'cylinder', 'rounded-box', 'portal'] as const).map((kind, i) => html`<button ?disabled=${unavailable} @click=${() => this.add(kind)}>${['상자', '원기둥', '둥근 상자', '문틀'][i]}</button>`)}
-          </div>
-          <h3>부품 ${view.geometry.length}</h3>
-          <div class="parts">
-            ${view.geometry.map(
-              g =>
-                html`<button
-                  aria-pressed=${g.id === this.selected}
-                  @click=${() => {
-                    this.selected = g.id
-                  }}
-                >
-                  ${g.id}
-                </button>`
-            )}
-          </div>
-        </aside>
+        <figure-v3-parts
+          .parts=${view.geometry.map(
+            (g): V3PartRow => ({
+              id: g.id,
+              provider: (g as { shape?: { provider?: string } }).shape?.provider ?? '',
+              hidden: this.hiddenParts.has(g.id),
+              invisible: (g as { visible?: boolean }).visible === false
+            })
+          )}
+          .selected=${this.selected}
+          ?locked=${unavailable}
+          @add-part=${(e: CustomEvent) => this.add(e.detail.kind)}
+          @select-part=${(e: CustomEvent) => (this.selected = e.detail.id)}
+          @toggle-part-hidden=${(e: CustomEvent) => this.toggleHiddenPart(e.detail.id)}
+          @set-all-parts-hidden=${(e: CustomEvent) =>
+            (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => g.id)) : new Set())}
+          @move-part-up=${(e: CustomEvent) => this.movePart(e.detail.id, e.detail.to)}
+          @move-part-down=${(e: CustomEvent) => this.movePart(e.detail.id, e.detail.to)}
+          @duplicate-part=${(e: CustomEvent) => this.duplicatePart(e.detail.id)}
+          @remove-part=${(e: CustomEvent) => this.removePart(e.detail.id)}
+        ></figure-v3-parts>
         <figure-v3-canvas
-          .parts=${drawableV3Parts(view.geometry ?? [])}
+          .parts=${drawableV3Parts(view.geometry ?? []).filter(body => !this.hiddenParts.has((body as { id: string }).id))}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
+          .selected=${this.selected}
+          .reach=${unavailable ? { translate: false, rotate: false, scale: false } : this.reachOf(this.selected)}
+          @part-transformed=${(e: CustomEvent) => this.transformed(e.detail.id, e.detail.result)}
           @part-selected=${(e: CustomEvent<string>) => {
             this.selected = e.detail
           }}
@@ -295,23 +462,16 @@ export class FigureV3Editor extends LitElement {
         ></figure-v3-canvas>
         <aside>
           <h3>${this.selected || '모델 입력'}</h3>
+          ${this.renderTools(unavailable)}
           ${fields.map(field => html`<label><span>${fieldLabel(field.id)} (${field.unit})${field.role === 'state' ? ' · 동작' : ''}</span><input aria-label=${field.id} type="number" step="any" .value=${String(field.value)} ?disabled=${unavailable} @change=${(e: Event) => this.changeField(field, e)} /></label>`)}
           ${
             part
-              ? html`<h3>재질</h3>
-                  <label
-                    ><span>색 역할</span
-                    ><select
-                      .value=${part.material.token}
-                      ?disabled=${unavailable}
-                      @change=${(e: Event) => this.run(() => this.session!.edit({ kind: 'set-material', target: this.selected, material: { ...part.material, token: (e.target as HTMLSelectElement).value } }))}
-                    >
-                      ${Object.keys(view.palette ?? {}).map(token => html`<option value=${token}>${token === 'palette.primary' ? '기본 몸체' : token}</option>`)}
-                    </select></label
-                  >
-                  <p class="hint">
-                    도형과 위치를 결정하는 입력을 편집합니다. 다른 부품과 공유하는 입력은 함께 영향을 줄 수 있습니다.
-                  </p>`
+              ? html`<figure-v3-material
+                  .body=${part}
+                  .palette=${view.palette ?? {}}
+                  ?locked=${unavailable}
+                  @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+                ></figure-v3-material>`
               : null
           }
           ${

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

@@ -0,0 +1,53 @@
+import { parseV3Asset } from '@hatiolab/figure-model'
+import type { V3Asset, V3Face } from '@hatiolab/figure-model'
+
+/*
+ * What the V3 properties tab reads, kept apart from the element so it can be tested without a browser.
+ */
+
+export type Placement = 'floor' | 'ceiling' | 'center'
+
+/** What the properties tab reads off the asset. Absent parts of the asset read as absent, never as a default. */
+export interface V3FigureFacts {
+  name: string
+  parts: string[]
+  declared: boolean
+  placement?: Placement
+  mounting?: { part: string; face: V3Face }
+}
+
+/**
+ * The asset's own facts, as the properties tab shows them.
+ *
+ * The mounting face is read back from the feature `set-mounting-face` writes (`<part>.mount.<face>`): the asset
+ * records the face only as that node, so this is where the screen learns which one is chosen. Parts are the placed
+ * bodies (`place@1`), in the order the model lists them.
+ */
+export function v3FigureFacts(source: string): V3FigureFacts {
+  const asset = parseV3Asset(source) as V3Asset & { document: { model: { nodes: Array<{ id: string; op: string }> } } }
+  const parts = asset.document.model.nodes.filter(node => node.op === 'place@1').map(node => node.id)
+  const feature = (asset.occupancy?.contact as { surface?: { feature?: string } } | undefined)?.surface?.feature
+  const found = feature?.match(/^(.+)\.mount\.(left|right|bottom|top|back|front)\.value$/)
+  return {
+    name: asset.name,
+    parts,
+    declared: !!asset.occupancy,
+    placement: asset.occupancy?.placement as Placement | undefined,
+    mounting: found ? { part: found[1], face: found[2] as V3Face } : undefined
+  }
+}
+
+/**
+ * A tag line as a list — the V2 inspector's rule: split on commas, drop a leading `#`, keep each once. An empty
+ * line is an empty list, so an author can clear every tag.
+ */
+export function tagsOf(raw: string): string[] {
+  return [
+    ...new Set(
+      raw
+        .split(',')
+        .map(one => one.trim().replace(/^#+/, '').trim())
+        .filter(one => one.length > 0)
+    )
+  ]
+}