@things-factory/figure-ui 10.1.39 → 10.1.40

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

@@ -0,0 +1,254 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { V3_FACES } from '@hatiolab/figure-model'
+import type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'
+
+import { occupancyFromParts } from './v3-occupancy.js'
+import { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'
+
+const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']
+const FACES = Object.keys(V3_FACES) as V3Face[]
+
+/**
+ * 속성 — the V3 modeller's figure properties (parity row ②).
+ *
+ * The V2 inspector opens with what the figure is: its name, the face it is placed by, the room it takes up, where
+ * the catalogue files it. The V3 page had only the type. The same rows, in the same order, drawn the way the V2
+ * inspector draws them.
+ *
+ * Two kinds of change leave this tab, and it does neither itself:
+ *  - `v3-command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `v3-catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
+ *    to the saved row at once, so they need a saved figure.
+ *
+ * Not here yet, because V3 has no place for them: editing the declared room by hand (V3 declares it from the
+ * parts, as graph expressions), and the detail level (the converter records it as lost). Both wait on a V3 ruling.
+ */
+@customElement('figure-v3-properties')
+export class FigureV3Properties extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px;
+      overflow: auto;
+      font-size: 0.76rem;
+      color: var(--md-sys-color-on-surface);
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    input,
+    select,
+    button {
+      font: inherit;
+      min-width: 0;
+    }
+    input,
+    select {
+      padding: 5px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 4px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+    }
+    div[row] > select {
+      flex: 1;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border: none;
+      border-radius: 999em;
+      cursor: pointer;
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+    }
+    button:disabled,
+    input:disabled,
+    select:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    button md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `
+
+  /** The source being edited. */
+  @property({ type: String }) source?: string
+  /** The saved row, if any. Category and tags live on it. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureCategory?: string
+  @property({ type: Array }) figureTags?: string[]
+  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */
+  @state() private pickedPart?: string
+  @state() private pickedFace?: V3Face
+
+  private facts(): V3FigureFacts | undefined {
+    try {
+      return this.source ? v3FigureFacts(this.source) : undefined
+    } catch {
+      /* A source the format refuses has no facts to show; the verdict tab says why. */
+      return undefined
+    }
+  }
+
+  render() {
+    const facts = this.facts()
+    if (!facts) return nothing
+    return html`${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+    ${this.renderCatalog()}`
+  }
+
+  private renderName(facts: V3FigureFacts) {
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.name')}</label>
+        <input
+          .value=${facts.name}
+          placeholder=${i18next.t('figure.text.figure-display-name')}
+          @change=${(event: Event) => {
+            const input = event.target as HTMLInputElement
+            if (!input.value.trim()) {
+              /* The format refuses a blank name; put the old one back rather than send a command that fails. */
+              input.value = facts.name
+              return
+            }
+            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })
+          }}
+        />
+      </div>
+    `
+  }
+
+  /**
+   * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room
+   * again from the parts — the only way V3 declares it — with the new face. The hint says so.
+   */
+  private renderPlacement(facts: V3FigureFacts) {
+    const current = facts.placement ?? 'floor'
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.figure-placement')}</label>
+        <select
+          ?disabled=${!facts.parts.length}
+          @change=${(event: Event) => this.declare((event.target as HTMLSelectElement).value as Placement)}
+        >
+          ${PLACEMENTS.map(
+            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`
+          )}
+        </select>
+        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>
+      </div>
+    `
+  }
+
+  private renderSpace(facts: V3FigureFacts) {
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.declared-space')}</label>
+        <div row>
+          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
+          <button fit ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private renderMounting(facts: V3FigureFacts) {
+    const mounting = facts.mounting
+    const part = [this.pickedPart, mounting?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))
+    const face: V3Face = this.pickedFace ?? mounting?.face ?? 'bottom'
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.mounting-face')}</label>
+        <div row>
+          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>
+            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}
+          </select>
+          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as V3Face)}>
+            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+          </select>
+        </div>
+        <div row>
+          <button ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
+            ${i18next.t('figure.button.set-mounting-face')}
+          </button>
+          <button ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+            ${i18next.t('figure.button.clear-mounting-face')}
+          </button>
+        </div>
+        <small>
+          ${facts.declared
+            ? mounting
+              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
+              : i18next.t('figure.label.mounting-face-none')
+            : i18next.t('figure.text.mounting-face-needs-space')}
+        </small>
+      </div>
+    `
+  }
+
+  private renderCatalog() {
+    const saved = !!this.figureId
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.category')}</label>
+        <input
+          .value=${this.figureCategory ?? ''}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.category-placeholder')}
+          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}
+        />
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.tags')}</label>
+        <input
+          .value=${(this.figureTags ?? []).join(', ')}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.tags-placeholder')}
+          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}
+        />
+        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}
+      </div>
+    `
+  }
+
+  private declare(placement: Placement) {
+    if (!this.source) return
+    this.command(occupancyFromParts(this.source, placement))
+  }
+
+  private command(action: V3AuthoringAction) {
+    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))
+  }
+
+  private catalog(patch: { category?: string; tags?: string[] }) {
+    this.dispatchEvent(new CustomEvent('v3-catalog', { detail: patch, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/v3-canvas.ts

@@ -13,7 +13,12 @@ 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;
@@ -25,7 +30,7 @@ export class FigureV3Canvas extends LitElement {
       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[] = []
@@ -37,6 +42,7 @@ export class FigureV3Canvas extends LitElement {
   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() {
@@ -55,7 +61,16 @@ 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)
@@ -113,6 +128,14 @@ 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)
   }
@@ -134,6 +157,7 @@ export class FigureV3Canvas extends LitElement {
   }
   disconnectedCallback() {
     this.observer?.disconnect()
+    this.themeObserver?.disconnect()
     this.controls?.dispose()
     disposeV3Meshes(this.group)
     this.renderer?.dispose()

package/client/modeller/v3-editor.ts

@@ -42,6 +42,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 +56,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 {
@@ -65,10 +71,10 @@ export class FigureV3Editor extends LitElement {
       background: var(--md-sys-color-surface, #fff);
     }
     aside:first-child {
-      border-right: 1px solid #d4dde2;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
     }
     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 +89,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 +104,9 @@ 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);
     }
     .parts {
       display: grid;
@@ -122,25 +129,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;
+      }
+      aside:first-child {
+        border-right: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      aside:last-child {
+        max-height: none;
       }
     }
   `

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)
+    )
+  ]
+}

package/client/modeller/v3-occupancy.ts

@@ -12,11 +12,15 @@ import { parseV3Asset, proposeV3Occupancy, type V3AuthoringAction } from '@hatio
  * 막는다. 배치 기준은 이미 선언된 것을 지키고, 처음 선언하는 도형은 바닥에 선다고 둔다 — 새로 만든 도형의
  * 모델러 기본이 바닥이다.
  */
-export function occupancyFromParts(source: string): V3AuthoringAction {
+export function occupancyFromParts(
+  source: string,
+  /** A different face to place it by — the properties tab's choice. Absent keeps the declared one. */
+  placement?: 'floor' | 'ceiling' | 'center'
+): Extract<V3AuthoringAction, { kind: 'declare-occupancy' }> {
   const asset = parseV3Asset(source)
   return {
     kind: 'declare-occupancy',
     proposal: proposeV3Occupancy(asset, { over: 'range' }),
-    placement: asset.occupancy?.placement ?? 'floor'
+    placement: placement ?? asset.occupancy?.placement ?? 'floor'
   }
 }

package/client/pages/figure-v3-modeller-page.ts

@@ -6,10 +6,12 @@ import { v3ProductStore } from '../graphql/v3-store.js'
 import { i18next } from '@operato/i18n'
 import { fetchFigure, updateFigure } from '../graphql/index.js'
 import { occupancyFromParts } from '../modeller/v3-occupancy.js'
+import type { V3AuthoringAction } from '@hatiolab/figure-model'
 import '../modeller/v3-editor.js'
 import '@material/web/icon/icon.js'
 import '../modeller/figure-history-panel.js'
 import '../modeller/figure-v3-verdict.js'
+import '../modeller/figure-v3-properties.js'
 
 /**
  * The V3 product page has exactly one authoritative workspace for UI and AI input transactions.
@@ -144,15 +146,17 @@ export class FigureV3ModellerPage extends PageView {
    * 발행 판정에 막히는데 그 선언을 할 단추도 없었다(2026-09-24 확인). 서버의 문 하나가 두 형식을 다 읽으므로
    * V2 화면의 패널을 그대로 건다.
    */
-  @state() private row: { state?: 'draft' | 'released'; version: number; type?: string } = { version: 0 }
+  @state() private row: { state?: 'draft' | 'released'; version: number; type?: string; category?: string; tags?: string[] } = {
+    version: 0
+  }
   @state() private typeError = ''
-  /** Why 「부품에 맞추기」 did nothing. Shown beside the tabs — the editor stays, since nothing in it was lost. */
-  @state() private fitError = ''
+  /** Why a command from the side did nothing. Shown beside the tabs — the editor stays, since nothing in it was lost. */
+  @state() private commandError = ''
   /**
    * Which tab the side shows. The verdict comes first: it is what the author needs while editing, and the count on
    * its tab stays in sight while the history is open — as on the V2 page.
    */
-  @state() private tab: 'verdict' | 'history' = 'verdict'
+  @state() private tab: 'properties' | 'verdict' | 'history' = 'verdict'
   @state() private instances?: number
   /**
    * The source the verdict judges. The session refuses to export while it loads or saves, so the last one read is
@@ -168,6 +172,7 @@ export class FigureV3ModellerPage extends PageView {
     return this.draft
   }
   private wasDirty = false
+  private titled?: string | null
   private announce = () => {
     const view = this.session.read()
     if (!this.active || view.loading || view.saving || view.error || !view.context) return
@@ -185,9 +190,14 @@ export class FigureV3ModellerPage extends PageView {
   }
   private changed = () => {
     this.revision++
-    /* Any edit after a failed fit makes the message stale — the author has done something about it. */
-    this.fitError = ''
+    /* Any edit after a failed command makes the message stale — the author has done something about it. */
+    this.commandError = ''
     const view = this.session.read()
+    /* The title bar reads the name through `context`, which the shell asks for only when told — a rename left it stale. */
+    if (view.name !== this.titled) {
+      this.titled = view.name
+      this.updateContext()
+    }
     if (!view.saving) this.announce()
     /* 저장이 끝난 순간 행을 다시 읽는다 — 발행된 도형을 고쳐 저장하면 서버가 초안으로 내린다. */
     if (this.wasDirty && !view.dirty && !view.saving && view.id) this.readRow(view.id)
@@ -197,7 +207,13 @@ export class FigureV3ModellerPage extends PageView {
     try {
       const figure = await fetchFigure(id)
       if (this.session.read().id === id)
-        this.row = { state: figure.state as 'draft' | 'released', version: figure.version ?? 0, type: figure.type }
+        this.row = {
+          state: figure.state as 'draft' | 'released',
+          version: figure.version ?? 0,
+          type: figure.type,
+          category: figure.category ?? undefined,
+          tags: figure.tags ?? undefined
+        }
     } catch {
       /* 행을 못 읽으면 패널은 판 번호 0 으로 보인다 — 발행 문이 서버에서 다시 판단하므로 여기서 지어내지 않는다. */
     }
@@ -226,16 +242,28 @@ export class FigureV3ModellerPage extends PageView {
   }
   /** 「부품에 맞추기」 — 공간을 지금 부품에서 다시 선언한다. 저장은 저작자가 따로 한다. */
   private fitToParts = () => {
+    this.runCommand(() => occupancyFromParts(this.session.source()))
+  }
+  /** A command from the properties tab — rename, declare the room, the mounting face. */
+  private onCommand = (event: Event) => {
+    const action = (event as CustomEvent).detail?.action as V3AuthoringAction | undefined
+    if (action) this.runCommand(() => action)
+  }
+  /**
+   * One step of the session's history, whichever part of the side asked for it — so undo takes it back like any
+   * other edit, and it is saved with the figure.
+   */
+  private runCommand(actionOf: () => V3AuthoringAction) {
     try {
-      this.session.command(occupancyFromParts(this.session.source()))
-      this.fitError = ''
+      this.session.command(actionOf())
+      this.commandError = ''
       this.changed()
     } catch (error) {
       /*
         This used to set the page error, which replaces the whole editor with one raw line — for a figure with no
         parts that line was 「OCCUPANCY_NO_PARTS: occupancy: no part could be measured」 (2026-09-24).
       */
-      this.fitError =
+      this.commandError =
         (error as { code?: string })?.code === 'OCCUPANCY_NO_PARTS'
           ? i18next.t('figure.text.fit-needs-parts')
           : error instanceof Error
@@ -243,9 +271,26 @@ export class FigureV3ModellerPage extends PageView {
             : String(error)
     }
   }
+  /**
+   * Category and tags — the catalogue's, kept on the row, not in the asset. Written at once, as the V2 page does;
+   * the server's refusal is shown as it gave it.
+   */
+  private onCatalog = async (event: Event) => {
+    const patch = (event as CustomEvent).detail as { category?: string; tags?: string[] }
+    const id = this.session.read().id
+    if (!id || !patch) return
+    try {
+      const result = await updateFigure(id, patch)
+      this.commandError = ''
+      this.row = { ...this.row, category: result.figure.category ?? undefined, tags: result.figure.tags ?? undefined }
+    } catch (error) {
+      this.commandError = error instanceof Error ? error.message : String(error)
+    }
+  }
   private released = (event: Event) => {
     const figure = (event as CustomEvent).detail?.figure
-    if (figure?.id && figure.id === this.session.read().id) this.row = { state: figure.state, version: figure.version ?? 0 }
+    /* Keep the rest of the row: rebuilding it from these two dropped the type, and the locked type field went blank. */
+    if (figure?.id && figure.id === this.session.read().id) this.row = { ...this.row, state: figure.state, version: figure.version ?? 0 }
   }
   /** 과거 판으로 되돌렸으면 서버의 원본이 바뀐 것이다 — 다시 연다. 패널은 저장 안 된 것이 있으면 되돌리기를 막는다. */
   private reverted = async () => {
@@ -340,11 +385,21 @@ export class FigureV3ModellerPage extends PageView {
               />`}
           ${this.typeError ? html`<small role="alert">${this.typeError}</small>` : ''}
         </label>
-        ${this.fitError ? html`<p fit-error role="alert">${this.fitError}</p>` : ''}
+        ${this.commandError ? html`<p fit-error role="alert">${this.commandError}</p>` : ''}
         <div tabs>
+          ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
           ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
           ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
         </div>
+        <figure-v3-properties
+          ?off=${this.tab !== 'properties'}
+          .source=${this.draftSource()}
+          .figureId=${view.id}
+          .figureCategory=${this.row.category}
+          .figureTags=${this.row.tags}
+          @v3-command=${this.onCommand}
+          @v3-catalog=${this.onCatalog}
+        ></figure-v3-properties>
         <figure-v3-verdict
           ?off=${this.tab !== 'verdict'}
           .source=${this.draftSource()}
@@ -367,7 +422,7 @@ export class FigureV3ModellerPage extends PageView {
         ></figure-history-panel>
       </aside>`
   }
-  private renderTab(tab: 'verdict' | 'history', icon: string, label: string, badge?: number) {
+  private renderTab(tab: 'properties' | 'verdict' | 'history', icon: string, label: string, badge?: number) {
     return html`
       <button tab ?on=${this.tab === tab} title=${label} aria-label=${label} @click=${() => (this.tab = tab)}>
         <md-icon>${icon}</md-icon>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}