@things-factory/figure-ui 10.1.45 → 10.1.47

package/dist-client/modeller/v3-editor.js

@@ -1,6 +1,8 @@
+var FigureV3Editor_1;
 import { __decorate, __metadata } from "tslib";
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { i18next } from '@operato/i18n';
+import '@operato/layout';
 import { customElement, property, state } from 'lit/decorators.js';
 import { captureV3Thumbnail } from './v3-thumbnail.js';
 import { drawableV3Parts } from './v3-renderer.js';
@@ -8,33 +10,20 @@ 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 } from './figure-view.js';
+import './figure-v3-capability.js';
 import { gizmoChanges, gizmoReachOf } from './v3-gizmo.js';
+import { keyActionOf } from './v3-keys.js';
+import { groupFields } from './v3-fields.js';
+import { SidePanelStyles } from './side-panel-styles.js';
 import { alignChanges, boxOf, canMirror, mirrorChanges } from './v3-align.js';
-const names = {
-    position: '위치',
-    rotation: '회전',
-    size: '크기',
-    dimension: '치수',
-    width: '너비',
-    height: '높이',
-    depth: '깊이',
-    radius: '반지름',
-    length: '길이',
-    round: '모서리 반경',
-    left: '왼쪽',
-    right: '오른쪽',
-    bottom: '아랫면',
-    top: '윗면',
-    openingLeft: '개구부 왼쪽',
-    openingRight: '개구부 오른쪽',
-    openingTop: '개구부 윗면'
-};
-function fieldLabel(id) {
-    return id
-        .split('.')
-        .map(p => names[p] ?? p.toUpperCase())
-        .join(' · ');
-}
+import { paletteRecipe } from './v3-palette.js';
+import { instanceRangeOf, rangeDiffers } from './v3-links.js';
+import { isLive, livePartsOf, NOTHING_LIVE, scrubbed, scrubStep } from './v3-live.js';
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 let FigureV3Editor = class FigureV3Editor extends LitElement {
     constructor() {
@@ -42,69 +31,193 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         this.revision = 0;
         this.selected = '';
         this.error = '';
+        this.tab = 'properties';
+        /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes (V2's two modes). */
+        this.middle = '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.
+         */
+        this.view = FigureV3Editor_1.storedView();
         /**
          * 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.
          */
         this.hiddenParts = new Set();
+        /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
+        this.live = NOTHING_LIVE;
         this.lastContext = null;
+        /** The modeller's keys (`v3-keys.ts`): undo, redo, duplicate, remove, back to the whole figure. */
+        this.onKey = (e) => {
+            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] }, 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 = '';
+        };
     }
-    static { this.styles = css `
+    static { FigureV3Editor_1 = this; }
+    static { this.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;
+    }
+    /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */
+    [off] {
+      display: none !important;
+    }
+    /* 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;
     }
-    h3 {
-      font-size: var(--ui-t-body, 13px);
-      margin: 22px 0 10px;
+    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);
     }
-    h3:first-child {
-      margin-top: 0;
+    div[subject] md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
     }
-    button,
-    input,
-    select {
+    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;
@@ -121,94 +234,43 @@ let FigureV3Editor = 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;
-      }
-    }
-  `; }
+  `]; }
+    static storedView() {
+        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 };
+        }
+    }
+    setView(view) {
+        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. */
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('keydown', this.onKey);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keydown', this.onKey);
+        super.disconnectedCallback();
+    }
     willUpdate(_changed) {
         const view = this.session?.read();
         if (view?.context !== this.lastContext) {
@@ -229,6 +291,19 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         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. */
+    drawnParts(geometry, asset) {
+        const parts = (isLive(this.live) && asset ? livePartsOf(asset, this.live) : null) ?? drawableV3Parts(geometry ?? []);
+        return parts.filter(body => !this.hiddenParts.has(body.id));
+    }
+    /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
+    hold(values, edit) {
+        this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) };
     }
     changed() {
         this.requestUpdate();
@@ -265,28 +340,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             let n = 1;
             while (ids.has(`${kind}-${n}`))
                 n++;
-            const common = { id: `${kind}-${n}`, position: { x: 0, y: 50, z: 0 } };
-            const part = 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;
         });
@@ -436,7 +490,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         }
     }
     /** Size response, fastening and motion for the selected part (parity ④ ⑤ ⑥), as authoring commands. */
-    renderLinks(unavailable) {
+    renderLinks(unavailable, section) {
         let asset;
         try {
             asset = JSON.parse(this.session.source());
@@ -453,12 +507,41 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         }
         return html `<figure-v3-links
       .asset=${asset}
+      .section=${section}
       .partId=${this.selected}
       .dims=${dims}
       ?locked=${unavailable}
       @v3-command=${(e) => this.linkCommand(e.detail.action)}
+      @v3-part-edit=${(e) => 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 ⑥). */
+    renderControls(view, unavailable) {
+        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) => this.run(() => this.session.apply([{ kind: 'set-state', input: e.detail.input, unit: e.detail.unit, value: e.detail.value }]))}
+      @v3-state-live=${(e) => this.hold({ [e.detail.input]: e.detail.value })}
+      @v3-part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+    ></figure-v3-controls>
+    <figure-v3-clips
+      .asset=${asset}
+      .values=${values}
+      ?locked=${unavailable}
+      @v3-states=${(e) => this.run(() => this.session.apply(e.detail.changes))}
+      @v3-states-live=${(e) => this.hold(e.detail.values)}
+      @v3-part-edit=${(e) => 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. */
     linkCommand(action) {
         try {
@@ -486,35 +569,170 @@ let FigureV3Editor = 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. */
+    typing(field, event) {
+        const value = event.target.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.
+     */
+    scrub(field, down, unavailable) {
+        if (unavailable || down.button !== 0)
+            return;
+        const label = down.currentTarget;
+        const input = (label.closest('div[cell]')?.querySelector('input') ?? label.nextElementSibling);
+        if (!input)
+            return;
+        down.preventDefault();
+        label.setPointerCapture(down.pointerId);
+        const start = field.value;
+        let value = start;
+        const move = (e) => {
+            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) => {
+            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 });
+        };
+        label.addEventListener('pointermove', move);
+        label.addEventListener('pointerup', up);
+        label.addEventListener('pointercancel', up);
+    }
+    /** The sizes a board may give the figure, and the way to measure them again after its parts changed. */
+    renderInstanceRange(asset, unavailable) {
+        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;
+            try {
+                of = instanceRangeOf(asset);
+            }
+            catch {
+                of = undefined;
+            }
+            this.range = { at, of };
+        }
+        const range = this.range.of;
+        if (!range)
+            return nothing;
+        const mm = (v) => 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'].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']
+                    .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. */
+    choose(id) {
+        this.selected = id;
+        if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history'))
+            this.tab = 'properties';
+    }
+    asset() {
+        try {
+            return JSON.parse(this.session.source());
+        }
+        catch {
+            return undefined;
+        }
+    }
+    renderTab(tab, icon, label, badge) {
+        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) {
+        super.updated?.(changed);
+        const panes = this.renderRoot.querySelector('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. */
+    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>`;
+            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('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('figure-v3-canvas')?.fit()}
+      >
+        ${['edit', 'preview'].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) => ({
             id: g.id,
             provider: g.shape?.provider ?? '',
@@ -524,7 +742,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
           .selected=${this.selected}
           ?locked=${unavailable}
           @add-part=${(e) => this.add(e.detail.kind)}
-          @select-part=${(e) => (this.selected = e.detail.id)}
+          @select-part=${(e) => this.choose(e.detail.id)}
           @toggle-part-hidden=${(e) => this.toggleHiddenPart(e.detail.id)}
           @set-all-parts-hidden=${(e) => (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => g.id)) : new Set())}
           @move-part-up=${(e) => this.movePart(e.detail.id, e.detail.to)}
@@ -532,47 +750,139 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
           @duplicate-part=${(e) => this.duplicatePart(e.detail.id)}
           @remove-part=${(e) => this.removePart(e.detail.id)}
         ></figure-v3-parts>
-        <figure-v3-canvas
-          .parts=${drawableV3Parts(view.geometry ?? []).filter(body => !this.hiddenParts.has(body.id))}
+        ${this.middle === 'preview'
+            ? html `<figure-v3-preview
+              .asset=${asset}
+              .context=${view.context ?? ''}
+              .view=${this.view}
+              @v3-part-edit=${(e) => 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) => this.transformed(e.detail.id, e.detail.result)}
-          @part-selected=${(e) => {
-            this.selected = e.detail;
-        }}
+          @part-selected=${(e) => this.choose(e.detail)}
           @render-error=${(e) => {
-            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) => this.renamePart(e.target)}
-              /></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) => this.changeField(field, e)} /></label>`)}
-          ${part
-            ? html `${this.renderLinks(unavailable)}<figure-v3-material
-                  .body=${part}
-                  .palette=${view.palette ?? {}}
-                  ?locked=${unavailable}
-                  @v3-part-edit=${(e) => 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}
+                this.error = e.detail.message;
+            }}
+        ></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) => this.renamePart(e.target)}
+                      />
+                    </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) => this.run(() => this.session.edit(e.detail.edit))}
+                    @v3-part-live=${(e) => 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, 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) => this.choose(e.detail.id)}
+              @v3-part-edit=${(e) => 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) => 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. */
+    renderGroups(groups, vectorTitle, singleTitle, unavailable, tools = 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}`;
+    }
+    renderVector(group, unavailable) {
+        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'].map(axis => html `<div cell>
+            <span axis ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(group.cells[axis], 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) => this.typing(group.cells[axis], e)}
+              @change=${(e) => this.changeField(group.cells[axis], e)}
+            />
+          </div>`)}
+      </div>
+    </div>`;
+    }
+    renderSingle(name, field, unavailable) {
+        const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
+        return html `<span ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(field, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
+      ><input
+        aria-label=${field.id}
+        type="number"
+        step="any"
+        .value=${String(field.value)}
+        ?disabled=${unavailable}
+        @input=${(e) => this.typing(field, e)}
+        @change=${(e) => this.changeField(field, e)}
+      />`;
     }
 };
 __decorate([
@@ -583,6 +893,14 @@ __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)
 ], FigureV3Editor.prototype, "revision", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], FigureV3Editor.prototype, "instances", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "budget", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -591,11 +909,31 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureV3Editor.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureV3Editor.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Function)
+], FigureV3Editor.prototype, "panes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureV3Editor.prototype, "middle", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "view", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureV3Editor.prototype, "hiddenParts", void 0);
-FigureV3Editor = __decorate([
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "live", void 0);
+FigureV3Editor = FigureV3Editor_1 = __decorate([
     customElement('figure-v3-editor')
 ], FigureV3Editor);
 export { FigureV3Editor };