@things-factory/figure-ui 10.1.45 → 10.1.47

package/client/modeller/v3-editor.ts

@@ -1,7 +1,9 @@
-import { LitElement, html, css, type PropertyValues } from 'lit'
+import { LitElement, html, css, nothing, type PropertyValues } from 'lit'
 import { i18next } from '@operato/i18n'
+import type { OxThreePane } from '@operato/layout'
+import '@operato/layout'
 import { customElement, property, state } from 'lit/decorators.js'
-import type { V3AuthoringAction, V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
+import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, 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'
@@ -9,96 +11,184 @@ import './v3-canvas.js'
 import './figure-v3-parts.js'
 import './figure-v3-material.js'
 import './figure-v3-links.js'
+import './figure-v3-controls.js'
+import './figure-v3-clips.js'
+import './figure-v3-preview.js'
+import './figure-settings.js'
+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 { SidePanelStyles } from './side-panel-styles.js'
 import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
-import type { V3PartRow } from './figure-v3-parts.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 { isLive, livePartsOf, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './v3-live.js'
 
-const names: Record<string, string> = {
-  position: '위치',
-  rotation: '회전',
-  size: '크기',
-  dimension: '치수',
-  width: '너비',
-  height: '높이',
-  depth: '깊이',
-  radius: '반지름',
-  length: '길이',
-  round: '모서리 반경',
-  left: '왼쪽',
-  right: '오른쪽',
-  bottom: '아랫면',
-  top: '윗면',
-  openingLeft: '개구부 왼쪽',
-  openingRight: '개구부 오른쪽',
-  openingTop: '개구부 윗면'
-}
-function fieldLabel(id: string) {
-  return id
-    .split('.')
-    .map(p => names[p] ?? p.toUpperCase())
-    .join(' · ')
-}
+
+/**
+ * The side's tabs, V2's six in V2's order where V3 has them: properties, what it does (places), motion, the verdict,
+ * the release history. A figure-level tab (verdict, history) gives way to properties when a part is chosen; a tab about
+ * parts keeps showing the newly chosen part.
+ */
+type SideTab = 'properties' | 'capability' | 'motion' | 'verdict' | 'view' | 'history'
 
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 @customElement('figure-v3-editor')
 export class FigureV3Editor extends LitElement {
-  static styles = css`
+  static styles = [SidePanelStyles, css`
     :host {
       display: flex;
       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).
-      */
+      /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */
       container-type: inline-size;
       font: 13px sans-serif;
-      color: var(--md-sys-color-on-surface, #22343f);
+      color: var(--md-sys-color-on-surface);
+    }
+    /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and
+       fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */
+    ox-canvas-bar button[mode] {
+      height: 28px;
+      padding: 0 10px;
+      border-radius: 999em;
+      border-color: transparent;
+      background: none;
+    }
+    ox-canvas-bar button[mode][aria-pressed='true'] {
+      border-color: var(--md-sys-color-primary);
     }
-    header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      flex-wrap: wrap;
+    figure-v3-preview {
+      min-width: 0;
+      min-height: 0;
+    }
+    ox-canvas-bar .status {
+      padding: 0 8px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    ox-canvas-bar .status[dirty] {
+      color: var(--md-sys-color-primary);
+      font-weight: 600;
     }
-    main {
+    ox-canvas-bar button[save] {
+      height: 32px;
+      padding: 0 14px;
+      border: none;
+      border-radius: 999em;
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+    }
+    /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under
+       860px and one column with the middle first under 560px are the frame's, as are the dividers. */
+    ox-three-pane {
       flex: 1;
       min-height: 0;
-      display: grid;
-      grid-template-columns: 180px minmax(180px, 1fr) 300px;
     }
+    figure-v3-parts {
+      min-height: 0;
+    }
+    figure-v3-canvas {
+      min-width: 0;
+      min-height: 0;
+    }
+    /* The side: tabs over one panel at a time, each using the whole height (V2's side, and why it had tabs). */
     aside {
-      padding: 12px;
-      overflow: auto;
-      background: var(--md-sys-color-surface, #fff);
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      background: var(--md-sys-color-surface-container-lowest);
     }
-    figure-v3-parts {
+    div[tabs] {
+      display: flex;
+      flex: none;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    button[tab] {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 38px;
+      padding: 0;
+      border: none;
+      border-radius: 0;
+      border-bottom: 2px solid transparent;
+      background: none;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    button[tab]:hover:not([on]) {
+      background: var(--md-sys-color-surface-container);
+    }
+    button[tab][on] {
+      color: var(--md-sys-color-primary);
+      border-bottom-color: var(--md-sys-color-primary);
+    }
+    button[tab] md-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+    span[badge] {
+      position: absolute;
+      top: 3px;
+      right: 2px;
+      padding: 0 5px;
+      font-size: 0.62rem;
+      font-weight: 700;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container);
+      border-radius: 999em;
+      pointer-events: none;
+    }
+    /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */
+    div[panel] {
+      flex: 1;
       min-height: 0;
+      overflow: auto;
+      padding: 0;
     }
-    aside:last-child {
-      border-left: 1px solid var(--md-sys-color-outline-variant);
+    div[panel][flush] {
+      padding: 0;
     }
-    h3 {
-      font-size: var(--ui-t-body, 13px);
-      margin: 22px 0 10px;
+    /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */
+    [off] {
+      display: none !important;
     }
-    h3:first-child {
-      margin-top: 0;
+    /* Which part the panel speaks of, and the way back to the whole figure. */
+    div[subject] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px 0;
     }
-    button,
-    input,
-    select {
+    div[subject] button[chip] {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      height: 26px;
+      padding: 0 10px 0 6px;
+      border-radius: 999em;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    div[subject] md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    button {
       font: inherit;
       box-sizing: border-box;
-      height: 34px;
+      height: 32px;
       border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
-      background: var(--md-sys-color-surface, #fff);
+      background: var(--md-sys-color-surface);
       color: inherit;
       padding: 0 8px;
       min-width: 0;
@@ -115,104 +205,80 @@ export class FigureV3Editor extends LitElement {
       color: var(--md-sys-color-on-secondary-container);
       border-color: var(--md-sys-color-primary);
     }
-    label[name-field] {
-      margin: 0 0 8px;
-    }
-    label[name-field] input {
-      font-weight: 600;
-    }
-    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;
-      gap: 6px;
-    }
-    .recipes {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 6px;
-    }
-    label {
-      display: grid;
-      grid-template-columns: 112px minmax(0, 1fr);
-      align-items: center;
-      gap: 8px;
-      margin: 8px 0;
-    }
-    label span {
-      overflow-wrap: anywhere;
-    }
     .error {
       padding: 10px;
       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: var(--md-sys-color-on-surface-variant);
       line-height: 1.5;
     }
-    /* 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-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;
-      }
-    }
-  `
+  `]
   @property({ attribute: false }) session?: V3ProductSession
   @property({ type: Number }) revision = 0
+  /** The verdict's count, drawn on its tab so it stays in sight while another tab is open (V2's badge). */
+  @property({ type: Number }) instances?: number
+  /** The cost line the parts list shows, from the maturity report. */
+  @property({ attribute: false }) budget?: V3BudgetLine
   @state() private selected = ''
   @state() private error = ''
+  @state() private tab: SideTab = 'properties'
+  /** The frame the bar folds - found after the first render, since the bar is drawn before it. */
+  @state() private panes?: OxThreePane
+  /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes (V2's two modes). */
+  @state() private middle: 'edit' | 'preview' = 'edit'
+  /**
+   * How the workbench shows the figure -- V2's view settings, the board's own state names. The viewer's, kept in
+   * their browser, never in the figure.
+   */
+  @state() private view: ViewSettings = FigureV3Editor.storedView()
+  private static storedView(): ViewSettings {
+    try {
+      const stored = JSON.parse(localStorage.getItem('figure-v3-view') ?? 'null')
+      return stored && typeof stored === 'object' ? { ...DEFAULT_VIEW, ...stored } : { ...DEFAULT_VIEW }
+    } catch {
+      return { ...DEFAULT_VIEW }
+    }
+  }
+  private setView(view: ViewSettings) {
+    this.view = { ...DEFAULT_VIEW, ...view }
+    try {
+      localStorage.setItem('figure-v3-view', JSON.stringify(this.view))
+    } catch {
+      /* A browser that keeps nothing still shows the change for this visit. */
+    }
+  }
   /**
    * 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>()
+  /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
+  @state() private live: LiveValues = NOTHING_LIVE
   private lastContext: string | null = null
+  /** The modeller's keys (`v3-keys.ts`): undo, redo, duplicate, remove, back to the whole figure. */
+  private onKey = (e: KeyboardEvent) => {
+    const view = this.session?.read()
+    if (!view || view.loading || view.saving || !view.context || !this.isConnected) return
+    const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: e.composedPath()[0] as HTMLElement }, this.selected)
+    if (!action) return
+    e.preventDefault()
+    if (action === 'undo') view.canUndo && this.run(() => this.session!.undo())
+    else if (action === 'redo') view.canRedo && this.run(() => this.session!.redo())
+    else if (action === 'duplicate') this.duplicatePart(this.selected)
+    else if (action === 'remove') this.removePart(this.selected)
+    else this.selected = ''
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener('keydown', this.onKey)
+  }
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.onKey)
+    super.disconnectedCallback()
+  }
   protected willUpdate(_changed: PropertyValues) {
     const view = this.session?.read()
     if (view?.context !== this.lastContext) {
@@ -230,8 +296,20 @@ export class FigureV3Editor extends LitElement {
       this.changed()
     } catch (error) {
       this.error = error instanceof Error ? error.message : String(error)
+    } finally {
+      /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
+      this.live = NOTHING_LIVE
     }
   }
+  /** What the canvas draws: the figure with the value in hand when there is one, and without the parts hidden on the workbench. */
+  private drawnParts(geometry: Parameters<typeof drawableV3Parts>[0] | undefined, asset: unknown) {
+    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))
+  }
+  /** 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 } : {}) }
+  }
   private changed() {
     this.requestUpdate()
     this.dispatchEvent(new CustomEvent('v3-changed', { bubbles: true, composed: true }))
@@ -256,35 +334,13 @@ export class FigureV3Editor extends LitElement {
       this.changed()
     }
   }
-  private add(kind: V3PrimitiveCreation['kind']) {
+  private add(kind: V3PaletteKind) {
     if (!this.session) return
     this.run(() => {
       const ids = new Set(this.session!.read().geometry.map(g => g.id))
       let n = 1
       while (ids.has(`${kind}-${n}`)) n++
-      const common = { id: `${kind}-${n}`, position: { x: 0, y: 50, z: 0 } }
-      const part: V3PrimitiveCreation =
-        kind === 'box'
-          ? { ...common, kind, dimensions: { width: 100, height: 100, depth: 100 } }
-          : kind === 'cylinder'
-            ? { ...common, kind, dimensions: { radius: 50, length: 100 } }
-            : kind === 'rounded-box'
-              ? { ...common, kind, dimensions: { width: 100, height: 100, depth: 100, round: 10 } }
-              : {
-                  ...common,
-                  position: { x: 0, y: 0, z: 0 },
-                  kind: 'portal',
-                  dimensions: {
-                    left: -100,
-                    right: 100,
-                    bottom: 0,
-                    top: 200,
-                    openingLeft: -70,
-                    openingRight: 70,
-                    openingTop: 170,
-                    depth: 30
-                  }
-                }
+      const part = paletteRecipe(kind, `${kind}-${n}`)
       this.session!.add(part)
       this.selected = part.id
     })
@@ -422,7 +478,7 @@ export class FigureV3Editor extends LitElement {
     }
   }
   /** Size response, fastening and motion for the selected part (parity ④ ⑤ ⑥), as authoring commands. */
-  private renderLinks(unavailable: boolean) {
+  private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion') {
     let asset
     try {
       asset = JSON.parse(this.session!.source())
@@ -437,12 +493,40 @@ export class FigureV3Editor extends LitElement {
     }
     return html`<figure-v3-links
       .asset=${asset}
+      .section=${section}
       .partId=${this.selected}
       .dims=${dims}
       ?locked=${unavailable}
       @v3-command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
     ></figure-v3-links>`
   }
+  /** The figure's controls: try a value, name it, set its range and travel time, keep the pose (parity row ⑥). */
+  private renderControls(view: { fields: Array<{ id: string; role?: string; value: number }> }, unavailable: boolean) {
+    let asset
+    try {
+      asset = JSON.parse(this.session!.source())
+    } catch {
+      return null
+    }
+    const values = Object.fromEntries(view.fields.filter(f => f.role === 'state').map(f => [f.id, f.value]))
+    return html`<figure-v3-controls
+      .asset=${asset}
+      .values=${values}
+      ?locked=${unavailable}
+      @v3-state=${(e: CustomEvent) => this.run(() => this.session!.apply([{ kind: 'set-state', input: e.detail.input, unit: e.detail.unit, value: e.detail.value }]))}
+      @v3-state-live=${(e: CustomEvent) => this.hold({ [e.detail.input]: e.detail.value })}
+      @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+    ></figure-v3-controls>
+    <figure-v3-clips
+      .asset=${asset}
+      .values=${values}
+      ?locked=${unavailable}
+      @v3-states=${(e: CustomEvent) => this.run(() => this.session!.apply(e.detail.changes))}
+      @v3-states-live=${(e: CustomEvent) => this.hold(e.detail.values)}
+      @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+    ></figure-v3-clips>`
+  }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
   private linkCommand(action: V3AuthoringAction) {
     try {
@@ -472,34 +556,164 @@ export class FigureV3Editor extends LitElement {
     // Rejected edits must also restore the displayed numeric value.
     input.value = String(this.session!.read().fields.find(i => i.id === field.id)!.value)
   }
+  /** Typing or a held spinner: each number on the way is drawn; the field's change records it. */
+  private typing(field: { id: string }, event: Event) {
+    const value = (event.target as HTMLInputElement).valueAsNumber
+    if (Number.isFinite(value)) this.hold({ [field.id]: value })
+  }
+  /**
+   * Drag a field's label (or an axis letter) sideways to scrub its value, as vector tools do: the figure follows the
+   * pointer, and the release records one step. The field's number follows too, so the value in hand is always read.
+   */
+  private scrub(field: { id: string; unit: V3InputChange['unit']; role?: string; value: number }, down: PointerEvent, unavailable: boolean) {
+    if (unavailable || down.button !== 0) return
+    const label = down.currentTarget as HTMLElement
+    const input = (label.closest('div[cell]')?.querySelector('input') ?? label.nextElementSibling) as HTMLInputElement | null
+    if (!input) return
+    down.preventDefault()
+    label.setPointerCapture(down.pointerId)
+    const start = field.value
+    let value = start
+    const move = (e: PointerEvent) => {
+      value = scrubbed(start, e.clientX - down.clientX, scrubStep(field.unit, start, e.shiftKey))
+      input.value = String(value)
+      this.hold({ [field.id]: value })
+    }
+    const up = (e: PointerEvent) => {
+      label.removeEventListener('pointermove', move)
+      label.removeEventListener('pointerup', up)
+      label.removeEventListener('pointercancel', up)
+      /* A drag the system took away is not the author's value: the field goes back to where it was. */
+      if (e.type === 'pointercancel') value = start
+      if (value === start) {
+        input.value = String(start)
+        this.live = NOTHING_LIVE
+        return
+      }
+      input.value = String(value)
+      this.changeField(field, { target: input } as unknown as Event)
+    }
+    label.addEventListener('pointermove', move)
+    label.addEventListener('pointerup', up)
+    label.addEventListener('pointercancel', up)
+  }
+  /** The measured range, kept for the revision it was measured at: measuring evaluates the figure at its edges. */
+  private range?: { at: string; of: ReturnType<typeof instanceRangeOf> }
+  /** The sizes a board may give the figure, and the way to measure them again after its parts changed. */
+  private renderInstanceRange(asset: V3Asset | undefined, unavailable: boolean) {
+    if (!asset) return nothing
+    /* Another figure, or another step of this one, is measured again. */
+    const at = `${this.session?.read().context ?? ''}:${this.revision}`
+    if (this.range?.at !== at) {
+      let of: ReturnType<typeof instanceRangeOf>
+      try {
+        of = instanceRangeOf(asset)
+      } catch {
+        of = undefined
+      }
+      this.range = { at, of }
+    }
+    const range = this.range.of
+    if (!range) return nothing
+    const mm = (v: number) => Math.round(v).toLocaleString()
+    const differs = rangeDiffers(range.declared, range.measured)
+    return html`<section>
+      <h3>${i18next.t('figure.label.instance-range')}</h3>
+      ${(['x', 'y', 'z'] as const).map(
+        axis => html`<div inline-field>
+          <label>${axis.toUpperCase()}</label><span>${mm(range.declared[axis].min)} – ${mm(range.declared[axis].max)} mm</span>
+        </div>`
+      )}
+      ${differs
+        ? html`<p hint>
+              ${i18next.t('figure.text.instance-range-can-widen', {
+                ranges: (['x', 'y', 'z'] as const)
+                  .filter(axis => rangeDiffers(range.declared, { ...range.declared, [axis]: range.measured[axis] }))
+                  .map(axis => `${axis.toUpperCase()} ${mm(range.measured[axis].min)} – ${mm(range.measured[axis].max)}`)
+                  .join(' · ')
+              })}
+            </p>
+            <button act ?disabled=${unavailable} @click=${() => this.linkCommand({ kind: 'declare-instance-size', range: range.measured, replace: true })}>
+              <md-icon>straighten</md-icon>${i18next.t('figure.button.remeasure-range')}
+            </button>`
+        : nothing}
+    </section>`
+  }
+  /** 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
+    if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history')) this.tab = 'properties'
+  }
+  private asset(): unknown {
+    try {
+      return JSON.parse(this.session!.source())
+    } catch {
+      return undefined
+    }
+  }
+  private renderTab(tab: SideTab, 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>`}
+    </button>`
+  }
+  updated(changed: PropertyValues<this>) {
+    super.updated?.(changed)
+    const panes = this.renderRoot.querySelector<OxThreePane>('ox-three-pane') ?? undefined
+    if (panes !== this.panes) this.panes = panes
+  }
+  /** Which part the panel speaks of, with the way back to the whole figure. */
+  private renderSubject() {
+    if (!this.selected) return null
+    return html`<div subject>
+      <button chip title=${i18next.t('figure.button.whole-figure')} @click=${() => (this.selected = '')}>
+        <md-icon>arrow_back</md-icon>${i18next.t('figure.button.whole-figure')}
+      </button>
+    </div>`
+  }
   render() {
     const view = this.session?.read()
-    if (!view) return html`<p>모델을 여는 중입니다.</p>`
+    if (!view) return html`<p>${i18next.t('figure.text.opening-model')}</p>`
     const unavailable = view.loading || !!view.error || view.saving || !view.context
     const part = view.geometry.find(g => g.id === this.selected)
-    // Shared/root parameters remain available even when a part is selected.
-    const own = view.fields.filter(i => this.selected && i.id.startsWith(this.selected + '.'))
-    const common = view.fields.filter(i => !view.geometry.some(g => i.id.startsWith(g.id + '.')))
-    const fields = this.selected ? [...own, ...common] : view.fields
-    return html` <header>
-        <strong>V3 모델링</strong>
-        <button ?disabled=${unavailable || !view.canUndo} @click=${() => this.run(() => this.session!.undo())}>
-          실행 취소
-        </button>
-        <button ?disabled=${unavailable || !view.canRedo} @click=${() => this.run(() => this.session!.redo())}>
-          다시 실행
-        </button>
-        <button @click=${() => this.renderRoot.querySelector<FigureV3Canvas>('figure-v3-canvas')?.fit()}>
-          전체 보기
-        </button>
-        <span class="status" role="status"
-          >${view.loading ? '불러오는 중' : view.saving ? '저장 중' : view.dirty || !view.id ? '저장 안 됨' : '저장됨'}</span
-        >
-        <button ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>저장</button>
-      </header>
+    /* The controls (state inputs) have their own place in the motion tab; these are the design values. */
+    const design = view.fields.filter(i => i.role !== 'state')
+    const own = design.filter(i => this.selected && i.id.startsWith(this.selected + '.'))
+    const common = design.filter(i => !view.geometry.some(g => i.id.startsWith(g.id + '.')))
+    const status = view.loading
+      ? 'figure.text.loading-figure'
+      : view.saving
+        ? 'figure.text.saving-figure'
+        : view.dirty || !view.id
+          ? 'figure.text.unsaved-changes'
+          : 'figure.text.saved'
+    const asset = this.asset()
+    const tab = this.tab
+    return html`<ox-canvas-bar
+        history
+        fit
+        undo-shortcut="Ctrl+Z"
+        redo-shortcut="Ctrl+Y"
+        ?can-undo=${!unavailable && view.canUndo}
+        ?can-redo=${!unavailable && view.canRedo}
+        .pane=${this.panes}
+        @canvas-undo=${() => this.run(() => this.session!.undo())}
+        @canvas-redo=${() => this.run(() => this.session!.redo())}
+        @canvas-fit=${() => this.renderRoot.querySelector<FigureV3Canvas>('figure-v3-canvas')?.fit()}
+      >
+        ${(['edit', 'preview'] as const).map(
+          mode => html`<button slot="mode" mode aria-pressed=${String(this.middle === mode)} title=${i18next.t('figure.text.mode-' + mode + '-explained')} @click=${() => (this.middle = mode)}>
+            ${i18next.t('figure.label.mode-' + mode)}
+          </button>`
+        )}
+        <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
+        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>${i18next.t('figure.button.save')}</button>
+      </ox-canvas-bar>
       ${this.error || view.error ? html`<div role="alert" class="error">${this.error || view.error}</div>` : null}
-      <main>
+      <ox-three-pane>
         <figure-v3-parts
+          slot="start"
+          .budget=${this.budget}
+          @show-maturity=${() => (this.tab = 'verdict')}
           .parts=${view.geometry.map(
             (g): V3PartRow => ({
               id: g.id,
@@ -511,7 +725,7 @@ export class FigureV3Editor extends LitElement {
           .selected=${this.selected}
           ?locked=${unavailable}
           @add-part=${(e: CustomEvent) => this.add(e.detail.kind)}
-          @select-part=${(e: CustomEvent) => (this.selected = e.detail.id)}
+          @select-part=${(e: CustomEvent) => this.choose(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())}
@@ -520,50 +734,145 @@ export class FigureV3Editor extends LitElement {
           @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 ?? []).filter(body => !this.hiddenParts.has((body as { id: string }).id))}
+        ${this.middle === 'preview'
+          ? html`<figure-v3-preview
+              .asset=${asset}
+              .context=${view.context ?? ''}
+              .view=${this.view}
+              @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+            ></figure-v3-preview>`
+          : html`<figure-v3-canvas
+          .view=${this.view}
+          .parts=${this.drawnParts(view.geometry, asset)}
           .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
-          }}
+          @part-selected=${(e: CustomEvent<string>) => this.choose(e.detail)}
           @render-error=${(e: CustomEvent<Error>) => {
             this.error = e.detail.message
           }}
-        ></figure-v3-canvas>
-        <aside>
-          ${this.selected && part
-            ? html`<label name-field
-                ><span>${i18next.t('figure.label.name')}</span
-                ><input
-                  aria-label=${i18next.t('figure.label.name')}
-                  .value=${this.selected}
-                  ?disabled=${unavailable}
-                  @change=${(e: Event) => this.renamePart(e.target as HTMLInputElement)}
-              /></label>`
-            : html`<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`${this.renderLinks(unavailable)}<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
-          }
-          ${
-            view.bindings.length
-              ? html`<h3>배치 연결점</h3>
-                  ${view.bindings.map(b => html`<p>${b.label} · ${b.role}</p>`)}`
-              : null
-          }
+        ></figure-v3-canvas>`}
+        <aside slot="end">
+          <div tabs>
+            ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
+            ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
+            ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
+            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
+            ${this.renderTab('view', 'wb_sunny', i18next.t('figure.label.tab-environment'))}
+            ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
+          </div>
+          <slot name="notice"></slot>
+          <div panel ?off=${tab !== 'properties'}>
+            ${this.selected && part
+              ? html`${this.renderSubject()}
+                  <section>
+                    <h3>${i18next.t('figure.label.group-part')}</h3>
+                    <div inline-field>
+                      <label>${i18next.t('figure.label.name')}</label>
+                      <input
+                        name-field
+                        aria-label=${i18next.t('figure.label.name')}
+                        .value=${this.selected}
+                        ?disabled=${unavailable}
+                        @change=${(e: Event) => this.renamePart(e.target as HTMLInputElement)}
+                      />
+                    </div>
+                  </section>
+                  ${this.renderGroups(groupFields(design, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
+                  ${this.renderLinks(unavailable, 'shape')}
+                  <figure-v3-material
+                    .body=${part}
+                    .palette=${view.palette ?? {}}
+                    ?locked=${unavailable}
+                    @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+                    @v3-part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
+                  ></figure-v3-material>`
+              : html`<slot name="figure"></slot>
+                  ${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
+                  ${this.renderInstanceRange(asset as V3Asset | undefined, unavailable)}`}
+          </div>
+          <div panel ?off=${tab !== 'capability'}>
+            ${this.renderSubject()}
+            ${this.selected && part ? this.renderLinks(unavailable, 'places') : null}
+            <figure-v3-capability
+              .asset=${asset}
+              .selected=${this.selected}
+              ?locked=${unavailable}
+              @select-part=${(e: CustomEvent) => this.choose(e.detail.id)}
+              @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+            ></figure-v3-capability>
+          </div>
+          <div panel ?off=${tab !== 'motion'}>
+            ${this.renderSubject()}
+            ${this.selected && part ? this.renderLinks(unavailable, 'motion') : html`<section><p hint>${i18next.t('figure.text.choose-a-part-to-move')}</p></section>`}
+            ${this.renderControls(view, unavailable)}
+          </div>
+          <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
+          <div panel flush ?off=${tab !== 'view'}>
+            <figure-settings .view=${this.view} @update-view=${(e: CustomEvent) => this.setView(e.detail.view)}></figure-settings>
+          </div>
+          <div panel flush ?off=${tab !== 'history'}><slot name="history"></slot></div>
         </aside>
-      </main>`
+      </ox-three-pane>`
+  }
+  /** Position, rotation and size as rows of three cells; the shape's own measures one to a line, under their title. */
+  private renderGroups(
+    groups: { vectors: FieldGroup[]; singles: FieldGroup[] },
+    vectorTitle: string,
+    singleTitle: string,
+    unavailable: boolean,
+    tools: unknown = null
+  ) {
+    return html`${groups.vectors.length || tools
+      ? html`<section>
+          <h3>${i18next.t(vectorTitle)}</h3>
+          ${groups.vectors.map(g => this.renderVector(g, unavailable))}
+          ${tools ? html`<div vector-row><label>${i18next.t('figure.label.tools')}</label>${tools}</div>` : nothing}
+        </section>`
+      : nothing}
+    ${groups.singles.length
+      ? html`<section>
+          <h3>${i18next.t(singleTitle)}</h3>
+          <div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>
+        </section>`
+      : nothing}`
+  }
+  private renderVector(group: FieldGroup, unavailable: boolean) {
+    if (group.kind !== 'vector') return nothing
+    const unit = group.cells.x.unit === 'deg' ? '°' : group.cells.x.unit
+    return html`<div vector-row>
+      <label>${i18next.t('figure.label.group-' + group.name)}${group.name === 'rotation' ? '' : html` <span unit>${unit}</span>`}</label>
+      <div triple>
+        ${(['x', 'y', 'z'] as const).map(
+          axis => html`<div cell>
+            <span axis ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(group.cells[axis] as never, e, unavailable)}>${axis.toUpperCase()}</span>
+            <input
+              aria-label=${group.cells[axis].id}
+              type="number"
+              step="any"
+              .value=${String(group.cells[axis].value)}
+              ?disabled=${unavailable}
+              @input=${(e: Event) => this.typing(group.cells[axis] as never, e)}
+              @change=${(e: Event) => this.changeField(group.cells[axis] as never, e)}
+            />
+          </div>`
+        )}
+      </div>
+    </div>`
+  }
+  private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
+    const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
+    return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
+      ><input
+        aria-label=${field.id}
+        type="number"
+        step="any"
+        .value=${String(field.value)}
+        ?disabled=${unavailable}
+        @input=${(e: Event) => this.typing(field as never, e)}
+        @change=${(e: Event) => this.changeField(field as never, e)}
+      />`
   }
 }