@things-factory/figure-ui 10.1.74 → 10.1.76

package/dist-client/modeller/editor.js

@@ -0,0 +1,1526 @@
+var FigureEditor_1;
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { i18next } from '@operato/i18n';
+import '@operato/layout';
+import { customElement, property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor } from '@hatiolab/figure-model';
+import './figure-recipe-catalog.js';
+import { captureFigureThumbnail } from './thumbnail.js';
+import { drawableFigureParts } from './renderer.js';
+import './canvas.js';
+import './figure-parts.js';
+import './figure-material-panel.js';
+import './figure-links.js';
+import './figure-controls.js';
+import './figure-clips.js';
+import './figure-preview.js';
+import './figure-settings.js';
+import { DEFAULT_VIEW } from './figure-view.js';
+import './figure-capability-panel.js';
+import { gizmoChanges, gizmoReachOf, keepBottomChanges } from './gizmo.js';
+import { keyActionOf } from './keys.js';
+import { groupFields, ownerOf, partLabelOf, repeatOf } from './fields.js';
+import { SidePanelStyles } from './side-panel-styles.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { alignChanges, boxOf, canMirror, mirrorChanges } from './align.js';
+import { paletteRecipe } from './palette.js';
+import { nudgeOf } from './stage-model.js';
+import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, sizeRangeRefusalOf } from './refusals.js';
+import { instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
+import { jointFanOf } from './joint-fan.js';
+import { jointDragOf } from './joint-drag.js';
+import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './live.js';
+/** Product editor surface. The injected session is shared by page persistence and AI commands. */
+let FigureEditor = class FigureEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The recipe templates (ADR-0095), read by the page from the server. */
+        this.templates = [];
+        this.catalogOpen = false;
+        /** Why the last recipe was refused, in the kernel's words. */
+        this.recipeError = '';
+        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. */
+        this.middle = 'edit';
+        /** A line saying what a command did besides what was asked; gone at the next command. */
+        this.notice = '';
+        /**
+         * How the workbench shows the figure, in the board's own state names. The viewer's, kept in
+         * their browser, never in the figure.
+         */
+        this.view = FigureEditor_1.storedView();
+        /**
+         * Parts hidden on the workbench — the author's view while working, not the asset's visibility. Not saved: 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 (`keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
+        this.onKey = (e) => {
+            const view = this.session?.read();
+            if (!view || view.loading || view.saving || !view.context || !this.isConnected)
+                return;
+            const canvas = this.renderRoot.querySelector('figure-canvas');
+            const path = e.composedPath();
+            const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: path[0], inScene: !!canvas && path.includes(canvas) }, this.selected);
+            if (!action)
+                return;
+            e.preventDefault();
+            /*
+              The session's history is the only one. With the canvas focused the scene took Ctrl+Z as well, undoing on its own
+              board the last value the canvas had written -- which the canvas then told as a drag: an undo of a drag on a
+              part placed by a rule wrote the drag again (2026-09-25). Heard first (capture) and kept from the scene.
+            */
+            e.stopPropagation();
+            if (action === 'translate' || action === 'rotate' || action === 'scale')
+                canvas && this.useGizmo(action);
+            else 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 { FigureEditor_1 = this; }
+    /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
+    static { this.styles = [ScrollbarStyles, 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 (UX ruling, 2026-09-24). */
+      container-type: inline-size;
+      font: 13px sans-serif;
+      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);
+    }
+    /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */
+    ox-canvas-bar .gizmo-tools {
+      display: inline-flex;
+      gap: 2px;
+      padding-left: 4px;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
+    }
+    ox-canvas-bar button[tool] {
+      display: inline-grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: none;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant);
+      cursor: pointer;
+    }
+    ox-canvas-bar button[tool]:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-high);
+      color: var(--md-sys-color-on-surface);
+    }
+    ox-canvas-bar button[tool][aria-pressed='true'] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    ox-canvas-bar button[tool]:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
+    figure-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;
+    }
+    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;
+    }
+    figure-parts {
+      min-height: 0;
+    }
+    figure-canvas {
+      min-width: 0;
+      min-height: 0;
+    }
+    /* The side: tabs over one panel at a time, each using the whole height. */
+    aside {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+    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;
+    }
+    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;
+    }
+    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: 32px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface);
+      color: inherit;
+      padding: 0 8px;
+      min-width: 0;
+    }
+    button {
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button[aria-pressed='true'] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
+    }
+    .error {
+      padding: 10px;
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
+      white-space: pre-wrap;
+    }
+    .notice {
+      padding: 8px 10px;
+      background: var(--md-sys-color-surface-container);
+      color: var(--md-sys-color-on-surface);
+    }
+    .hint {
+      color: var(--md-sys-color-on-surface-variant);
+      line-height: 1.5;
+    }
+  `]; }
+    static storedView() {
+        try {
+            const stored = JSON.parse(localStorage.getItem('figure-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-view', JSON.stringify(this.view));
+        }
+        catch {
+            /* A browser that keeps nothing still shows the change for this visit. */
+        }
+    }
+    /**
+     * Move, turn and size on the canvas, in the bar's tools: the gizmo the W · E · R keys give, found without knowing the
+     * keys (2026-09-26 -- a person dragging the part turned the camera). Each is offered only where the part's own
+     * numbers can take it (`gizmoReachOf`).
+     */
+    renderGizmoTools(editing) {
+        const reach = editing && this.selected ? this.reachOf(this.selected) : undefined;
+        const tools = [
+            { mode: 'translate', icon: 'open_with', key: 'W', can: !!reach?.translate },
+            { mode: 'rotate', icon: '3d_rotation', key: 'E', can: !!reach?.rotate },
+            { mode: 'scale', icon: 'open_in_full', key: 'R', can: !!reach?.scale }
+        ];
+        return html `<span class="gizmo-tools" role="group" aria-label=${i18next.t('figure.label.gizmo-tools')}>
+      ${tools.map(tool => html `<button
+          tool
+          aria-pressed=${String(this.gizmoMode === tool.mode)}
+          ?disabled=${!tool.can}
+          aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t('figure.text.gizmo-not-own')}`}
+          @click=${() => this.useGizmo(tool.mode)}
+        >
+          <md-icon>${tool.icon}</md-icon>
+        </button>`)}
+    </span>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('keydown', this.onKey, true);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keydown', this.onKey, true);
+        super.disconnectedCallback();
+    }
+    willUpdate(_changed) {
+        const view = this.session?.read();
+        if (view?.context !== this.lastContext) {
+            this.lastContext = view?.context ?? null;
+            this.selected = '';
+            this.error = '';
+            this.hiddenParts = new Set();
+        }
+        if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected))
+            this.selected = '';
+        if (_changed.has('selected'))
+            this.gizmoMode = undefined;
+    }
+    /** The scene toggles: the mode already shown takes the gizmo away. */
+    useGizmo(mode) {
+        this.renderRoot.querySelector('figure-canvas')?.gizmo(mode);
+        this.gizmoMode = this.gizmoMode === mode ? undefined : mode;
+    }
+    /**
+     * A refusal no particular sentence knows: figure-model's code said as a refusal, never its English; any other error
+     * (the network, the server) as it came.
+     */
+    said(error) {
+        return error?.code ? editRefusalOf(error, (key, params) => i18next.t(key, params)) : error instanceof Error ? error.message : String(error);
+    }
+    run(action) {
+        try {
+            action();
+            this.error = '';
+            /* The next step stands on its own: what the last removal let go of is no longer the news. */
+            this.notice = '';
+            this.changed();
+        }
+        catch (error) {
+            const say = (key, params) => i18next.t(key, params);
+            this.error = sizeRangeRefusalOf(error, say) ?? inputRangeRefusalOf(error, say) ?? this.said(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 = (asset ? liveOverSession(asset, this.currentInputs(), this.live) : null) ?? drawableFigureParts(geometry ?? []);
+        return parts.filter(body => !this.hiddenParts.has(ownerOf(body.id)));
+    }
+    /**
+     * Where the selected part turns and how far, with the pose as it is drawn now -- a value in hand included, so the
+     * fan follows the arm while a control is dragged. Its size comes from what the joint turns (`joint-fan`).
+     */
+    fanOf(asset) {
+        if (!asset || !this.selected || this.hiddenParts.has(this.selected))
+            return null;
+        try {
+            return jointFanOf(asset, this.selected, { ...this.currentInputs(), ...this.live.values });
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Every input as the session holds it now -- the pose the author has set with the controls, and design values. The
+     * asset's source carries only the saved defaults, so drawing a value in hand over it put every other joint back to its
+     * saved angle while one slider moved, and the arm jumped when released (user, 2026-09-24).
+     */
+    currentInputs() {
+        const view = this.session?.read();
+        return view ? Object.fromEntries(view.fields.map(field => [field.id, field.value])) : {};
+    }
+    /** 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();
+        this.dispatchEvent(new CustomEvent('changed', { bubbles: true, composed: true }));
+    }
+    async save() {
+        if (!this.session)
+            return;
+        try {
+            /*
+              The card's picture is taken before the save starts, from a canvas of its own at the card's size —
+              not from the one on screen, which stands wherever the author left it turned. A picture that cannot
+              be taken is not an error: the save goes on without it (see `thumbnail.ts`).
+            */
+            let type;
+            if (!this.session.read().id && this.firstSave) {
+                const answer = await this.firstSave(this.session.read().name ?? '');
+                if (!answer)
+                    return;
+                /* The name is the figure's own, in the asset: one step of the history, like typing it in the properties. */
+                if (answer.name !== this.session.read().name) {
+                    this.session.command({ kind: 'rename', name: answer.name });
+                    this.changed();
+                }
+                type = answer.type;
+            }
+            const view = this.session.read();
+            const thumbnail = await captureFigureThumbnail(drawableFigureParts(view.geometry ?? []), view.palette ?? {});
+            const promise = this.session.save({ thumbnail, type });
+            this.changed();
+            await promise;
+            this.error = '';
+        }
+        catch (error) {
+            this.error = this.said(error);
+        }
+        finally {
+            this.changed();
+        }
+    }
+    add(kind) {
+        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 part = paletteRecipe(kind, `${kind}-${n}`);
+            this.session.add(part);
+            this.selected = part.id;
+        });
+    }
+    /**
+     * The list's own operations, as part edits — each one step of the session's history. The copy and the moved
+     * part stay selected.
+     */
+    duplicatePart(id) {
+        this.run(() => {
+            const before = new Set(this.session.read().geometry.map(g => g.id));
+            this.session.edit({ kind: 'duplicate-part', target: id });
+            this.selected = this.session.read().geometry.find(g => !before.has(g.id))?.id ?? id;
+        });
+    }
+    movePart(id, to) {
+        this.run(() => this.session.edit({ kind: 'move-part', target: id, to }));
+    }
+    removePart(id, refitRoom = false) {
+        this.retry = undefined;
+        try {
+            const view = this.session.edit({ kind: 'remove-part', target: id, ...(refitRoom ? { refitRoom: true } : {}) });
+            this.error = '';
+            /* What else the removal let go of, named (chief architect, 2026-09-27); undo brings it back. */
+            this.notice = removalNoticeOf(view.removal, (key, params) => i18next.t(key, params)) ?? '';
+            if (this.selected === id)
+                this.selected = '';
+            this.changed();
+        }
+        catch (error) {
+            /* The refusal a person meets most: another part stands on this one or follows its size. Said in their words. */
+            this.error = partRefusalOf(error, id, (key, params) => i18next.t(key, params)) ?? this.said(error);
+            /* In the declared room only: the way on is to delete it and fit the room to the parts left, in one step. */
+            if (!refitRoom && inDeclaredRoom(error))
+                this.retry = { label: i18next.t('figure.button.remove-and-refit-room', { part: id }), run: () => this.removePart(id, true) };
+        }
+    }
+    toggleHiddenPart(id) {
+        const next = new Set(this.hiddenParts);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.hiddenParts = next;
+    }
+    /** Whether the figure declares its size (the three size inputs). */
+    hasSize() {
+        const values = this.designValues();
+        return ['x', 'y', 'z'].every(axis => typeof values[`size.${axis}`] === 'number');
+    }
+    /**
+     * A recipe put in (ADR-0095): resolved on the figure as it stands -- its parts take the next free name, onto the part
+     * chosen -- and applied as one step. Refused, the kernel's sentence goes to the form as it is (condition 3).
+     */
+    insertRecipe(recipe, values) {
+        try {
+            const asset = JSON.parse(this.session.source());
+            const checked = parseFigureRecipe(recipe);
+            const id = figureRecipeIdFor(asset, checked);
+            const steps = resolveFigureRecipe(checked, { id, ...(checked.target === 'part' ? { target: this.selected } : {}), values });
+            this.session.applyRecipe(steps);
+            this.recipeError = '';
+            this.catalogOpen = false;
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            this.recipeError = recipeRefusalOf(error, (key, params) => i18next.t(key, params)) ?? this.said(error);
+        }
+    }
+    /** The design values of the asset being edited. */
+    designValues() {
+        try {
+            return this.session ? (JSON.parse(this.session.source()).designInputs ?? {}) : {};
+        }
+        catch {
+            return {};
+        }
+    }
+    /** What the gizmo may write for the selected part — read off the asset being edited. */
+    reachOf(id) {
+        const none = { translate: false, rotate: false, scale: false };
+        /* A repeat is moved and sized through its row, not by a gizmo on one copy. */
+        if (!id || !this.session || !this.session.read().geometry.some(g => g.id === id))
+            return none;
+        try {
+            return gizmoReachOf(JSON.parse(this.session.source()), id);
+        }
+        catch {
+            return none;
+        }
+    }
+    /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
+    transformed(id, result) {
+        const view = this.session.read();
+        /* A part hanging from a joint: the drag edits the joint -- its value, or where it sits (ADR-0093). */
+        const asset = JSON.parse(this.session.source());
+        const drawn = view.geometry.find(g => g.id === id);
+        const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, this.currentInputs()) : null;
+        if (drag) {
+            if (drag.kind === 'value')
+                this.run(() => this.session.apply([{ kind: 'set-state', input: drag.input, unit: drag.unit, value: drag.value }]));
+            else if (drag.kind === 'joint')
+                this.run(() => this.session.command({ kind: 'set-joint', joint: drag.joint }));
+            else {
+                this.error = i18next.t(`figure.text.gizmo-joint-${drag.reason}`, { joint: drag.joint, leader: drag.leader ?? '', axis: drag.axis ?? '' });
+                this.requestUpdate();
+            }
+            return;
+        }
+        const sizes = Object.fromEntries(view.fields.map(field => [field.id, field.value]));
+        /*
+          A part a joint places, scaled: only its measures change. The shift of its centre that an anchored scale makes is
+          the joint's to give -- the face on the joint stays there by itself (user, 2026-09-25: 「'R'모드에서 크기가 변하지 않는다」;
+          the shift had been taken for a move of the joint, and the size was dropped).
+        */
+        const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id));
+        const changes = gizmoChanges(id, this.reachOf(id), jointed && result.scale ? { scale: result.scale } : result, sizes);
+        if (changes.length) {
+            this.run(() => this.session.apply(changes));
+            return;
+        }
+        if (jointed && result.scale) {
+            /* Only measures that follow another were pulled: the relation says their size, and it is not broken here. */
+            const axes = ['x', 'y', 'z'].filter((_, i) => Math.abs(result.scale[i] - 1) > 1e-4);
+            this.error = i18next.t('figure.text.gizmo-size-follows', { part: partLabelOf(id), axis: axes.join(', ').toUpperCase() });
+            return this.requestUpdate();
+        }
+        /*
+          A part whose place is worked out has no numbers for the gizmo to write: the drag is added beside
+          its rule (`nudge-part`). A part a joint or a fastening places, or a size that is worked out, is refused -- said in
+          words, not by the part silently springing back (user, 2026-09-24: 「기즈모 컨트롤도 전혀 작동이 안되는군」).
+        */
+        const body = view.geometry.find(g => g.id === id);
+        if (!body)
+            return this.requestUpdate();
+        const { by, turn } = nudgeOf(body, result);
+        /* A size worked out from the figure's: the drag's factor beside its rule, so it still follows. */
+        const grow = {};
+        if (result.scale)
+            ['x', 'y', 'z'].forEach((axis, i) => Math.abs(result.scale[i] - 1) > 1e-6 && (grow[axis] = Math.round(result.scale[i] * 1e6) / 1e6));
+        if (!Object.keys(by).length && !Object.keys(turn).length && !Object.keys(grow).length)
+            return this.requestUpdate();
+        try {
+            this.session.command({
+                kind: 'nudge-part',
+                part: id,
+                ...(Object.keys(by).length ? { by } : {}),
+                ...(Object.keys(turn).length ? { turn } : {}),
+                ...(Object.keys(grow).length ? { grow } : {})
+            });
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            this.error = /carried by a joint/.test(message)
+                ? i18next.t('figure.text.gizmo-joint-places', { part: partLabelOf(id) })
+                : /is fastened to/.test(message)
+                    ? i18next.t('figure.text.gizmo-fastening-places', { part: partLabelOf(id) })
+                    : this.said(error);
+            this.requestUpdate();
+        }
+    }
+    /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
+    align(tool) {
+        this.run(() => {
+            const asset = JSON.parse(this.session.source());
+            const changes = alignChanges(asset, this.selected, this.reachOf(this.selected), tool);
+            if (changes.length)
+                this.session.apply(changes);
+        });
+    }
+    /** A mirrored copy: duplicate, then place the copy on the other side — two steps. */
+    mirror(axis) {
+        this.run(() => {
+            const id = this.selected;
+            const before = new Set(this.session.read().geometry.map(g => g.id));
+            this.session.edit({ kind: 'duplicate-part', target: id });
+            const copy = this.session.read().geometry.find(g => !before.has(g.id))?.id;
+            if (!copy)
+                return;
+            this.session.apply(mirrorChanges(JSON.parse(this.session.source()), id, copy, axis));
+            this.selected = copy;
+        });
+    }
+    renderTools(unavailable) {
+        const reach = this.reachOf(this.selected);
+        if (!this.selected || !reach.translate)
+            return null;
+        let asset;
+        try {
+            asset = JSON.parse(this.session.source());
+        }
+        catch {
+            return null;
+        }
+        const tool = (name, icon, label, title) => html `<button ?disabled=${unavailable} aria-label=${i18next.t(label)} title=${i18next.t(title)} @click=${() => this.align(name)}>
+        <md-icon>${icon}</md-icon>
+      </button>`;
+        return html `<div tools title=${i18next.t('figure.text.tools-explained')}>
+      ${tool('centre-x', 'horizontal_distribute', 'figure.button.center-x', 'figure.text.center-on-x')}
+      ${tool('centre-z', 'vertical_align_center', 'figure.button.center-z', 'figure.text.center-on-z')}
+      ${tool('floor', 'vertical_align_bottom', 'figure.button.to-floor', 'figure.text.put-on-floor')}
+      ${['x', 'z'].map(axis => {
+            const able = canMirror(asset, this.selected, axis, reach);
+            return html `<button
+          ?disabled=${unavailable || !able}
+          aria-label=${i18next.t('figure.button.mirror-' + axis)}
+          title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
+          @click=${() => this.mirror(axis)}
+        >
+          <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
+        </button>`;
+        })}
+      ${tool('snap', 'grid_on', 'figure.button.snap', 'figure.text.snap-explained')}
+    </div>`;
+    }
+    /**
+     * A part's name. It renames every value the part owns, and what refers to them follows
+     * (figure-model's rename-part), as one step of the history.
+     */
+    /**
+     * A repeated body is one of its repeat's copies and is named after it -- the list and this field read `roller 15`, not
+     * its path through the repeat (user, 2026-09-24: 「부품 이름 ???」). A copy has no name of its own to change.
+     */
+    renderRepeatNote(geometry) {
+        const repeat = repeatOf(this.selected, geometry);
+        return repeat?.index ? html `<p hint>${i18next.t('figure.text.repeat-member', { name: repeat.name, count: repeat.count, index: repeat.index })}</p>` : nothing;
+    }
+    renamePart(input) {
+        const name = input.value.trim();
+        const from = this.selected;
+        if (!name || name === from) {
+            input.value = from;
+            return;
+        }
+        try {
+            this.session.edit({ kind: 'rename-part', target: from, name });
+            this.selected = name;
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            input.value = from;
+            const code = error?.code;
+            this.error =
+                code === 'PART_ID'
+                    ? i18next.t(/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(name) ? 'figure.text.part-name-taken' : 'figure.text.part-name-invalid', { name })
+                    : error instanceof Error
+                        ? error.message
+                        : String(error);
+        }
+    }
+    /** Size response, fastening and motion for the selected part, as authoring commands. */
+    renderLinks(unavailable, section) {
+        let asset;
+        try {
+            asset = JSON.parse(this.session.source());
+        }
+        catch {
+            return null;
+        }
+        let dims;
+        try {
+            dims = boxOf(asset, this.selected)?.dims;
+        }
+        catch {
+            dims = undefined;
+        }
+        return html `<figure-links
+      .asset=${asset}
+      .section=${section}
+      .partId=${this.selected}
+      .dims=${dims}
+      ?locked=${unavailable}
+      @command=${(e) => this.linkCommand(e.detail.action)}
+      @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+    ></figure-links>`;
+    }
+    /** The figure's controls: try a value, name it, set its range and travel time, keep the pose. */
+    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-controls
+      .asset=${asset}
+      .values=${values}
+      ?locked=${unavailable}
+      @state=${(e) => this.run(() => this.session.apply([{ kind: 'set-state', input: e.detail.input, unit: e.detail.unit, value: e.detail.value }]))}
+      @state-live=${(e) => this.hold({ [e.detail.input]: e.detail.value })}
+      @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+    ></figure-controls>
+    <figure-clips
+      .asset=${asset}
+      .values=${values}
+      ?locked=${unavailable}
+      @states=${(e) => this.run(() => this.session.apply(e.detail.changes))}
+      @states-live=${(e) => this.hold(e.detail.values)}
+      @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+    ></figure-clips>`;
+    }
+    /** One command, one step of the history. A refusal a person can meet here is said in their words. */
+    linkCommand(action) {
+        this.retry = undefined;
+        this.notice = '';
+        const hadSize = this.hasSize();
+        try {
+            this.session.command(action);
+            this.error = '';
+            /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
+            if (action.kind === 'follow-size' && !hadSize) {
+                const size = this.designValues();
+                this.notice = i18next.t('figure.text.size-declared-to-follow', {
+                    x: Math.round(size['size.x'] ?? 0).toLocaleString(),
+                    y: Math.round(size['size.y'] ?? 0).toLocaleString(),
+                    z: Math.round(size['size.z'] ?? 0).toLocaleString()
+                });
+            }
+            this.changed();
+        }
+        catch (error) {
+            const code = error?.code;
+            const narrowing = narrowingRetryOf(action, error, (key, params) => i18next.t(key, params));
+            if (narrowing) {
+                this.error = narrowing.message;
+                this.retry = { label: narrowing.label, action: narrowing.retry };
+                return;
+            }
+            this.error =
+                code === 'DIMENSION_CYCLE'
+                    ? i18next.t('figure.text.follow-would-loop')
+                    : code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE'
+                        ? i18next.t('figure.text.fasten-would-loop')
+                        : sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ??
+                            placementRefusalOf(error, (key, params) => i18next.t(key, params)) ??
+                            this.said(error);
+        }
+    }
+    changeField(field, event) {
+        const input = event.target, value = input.valueAsNumber;
+        /* A height typed in keeps the part's bottom where it is, as the scale gizmo does. */
+        const part = this.selected;
+        const kept = field.role !== 'state' && part ? keepBottomChanges(part, this.reachOf(part), field.id, value, this.designValues()) : [];
+        this.run(() => this.session.apply([
+            { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value },
+            ...kept
+        ]));
+        // 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;
+            let toDeclare;
+            try {
+                of = instanceRangeOf(asset);
+            }
+            catch {
+                of = undefined;
+            }
+            try {
+                toDeclare = of ? undefined : instanceRangeToDeclare(asset);
+            }
+            catch {
+                toDeclare = undefined;
+            }
+            this.range = { at, of, toDeclare };
+        }
+        const range = this.range.of;
+        /* No size yet: the figure is declared its size from its parts, so a board can resize it and parts can follow it. */
+        const toDeclare = this.range.toDeclare;
+        if (!range && toDeclare)
+            return html `<section>
+        <h3>${i18next.t('figure.label.instance-range')}</h3>
+        <p hint>${i18next.t('figure.text.instance-size-undeclared')}</p>
+        <button act ?disabled=${unavailable} @click=${() => this.linkCommand({ kind: 'declare-instance-size', range: toDeclare.range, at: toDeclare.at })}>
+          <md-icon>straighten</md-icon>${i18next.t('figure.button.declare-instance-size')}
+        </button>
+      </section>`;
+        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()} <span unit>mm</span></label>
+          <div pair>
+            ${['min', 'max'].map(bound => html `<input
+                aria-label=${`size.${axis}.${bound}`}
+                type="number"
+                step="any"
+                .value=${live(String(Math.round(range.declared[axis][bound])))}
+                ?disabled=${unavailable}
+                @change=${(e) => {
+            const next = rangeWith(range.declared, axis, bound, e.target.valueAsNumber);
+            if (next)
+                this.linkCommand({ kind: 'declare-instance-size', range: next, replace: true });
+        }}
+              />`)}
+          </div>
+        </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}
+      ${this.renderSizingRule(asset, unavailable)}
+    </section>`;
+    }
+    /**
+     * How the figure grows. One ratio (`sizing: 'uniform'`) is said as it is; a figure with joints that has not declared
+     * it is offered it -- a mechanism does not shear -- and the author decides (chief architect's ruling 2026-09-24).
+     */
+    renderSizingRule(asset, unavailable) {
+        if (asset.sizing === 'uniform') {
+            /* One ratio reaches only what reads the size: every other length is offered to follow it, in one step. */
+            const follow = proportionToFollow(asset);
+            return html `<div inline-field><label>${i18next.t('figure.label.sizing-rule')}</label><span>${i18next.t('figure.label.sizing-uniform')}</span></div>
+        ${follow?.count
+                ? html `<p hint>${i18next.t('figure.text.proportion-to-follow', { count: follow.count })}</p>
+              <button act ?disabled=${unavailable} @click=${() => this.linkCommand({ kind: 'follow-size-in-proportion' })}>
+                <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size-in-proportion')}
+              </button>`
+                : nothing}
+        ${follow?.kept.length ? html `<p hint>${i18next.t('figure.text.proportion-kept', { what: follow.kept.join(', ') })}</p>` : nothing}`;
+        }
+        return html `${turnsAboutAJoint(asset) ? html `<p hint>${i18next.t('figure.text.sizing-uniform-proposed')}</p>` : nothing}
+      <button act ?disabled=${unavailable} title=${i18next.t('figure.text.sizing-uniform-explained')} @click=${() => this.linkCommand({ kind: 'scale-uniformly' })}>
+        <md-icon>aspect_ratio</md-icon>${i18next.t('figure.button.scale-uniformly')}
+      </button>`;
+    }
+    /**
+     * The parts list, one row per part the author made: a repeat is one row with how many copies it makes now
+     * (user, 2026-09-24: the conveyor's sixteen rollers were sixteen rows).
+     */
+    partRows(geometry) {
+        const rows = new Map();
+        for (const g of geometry) {
+            const id = ownerOf(g.id);
+            const row = rows.get(id);
+            if (row) {
+                row.copies = (row.copies ?? 1) + 1;
+                continue;
+            }
+            rows.set(id, {
+                id,
+                provider: g.shape?.provider ?? '',
+                hidden: this.hiddenParts.has(id),
+                invisible: g.visible === false,
+                ...(id !== g.id ? { copies: 1 } : {})
+            });
+        }
+        return [...rows.values()];
+    }
+    /** The detail level's part budget for the list's head, from figure-model's count (a repeat once). */
+    partBudgetOf(asset) {
+        if (!asset)
+            return undefined;
+        try {
+            return { level: asset.detailLevel ?? null, used: figurePartCountOf(asset), limit: asset.detailLevel ? PART_LIMIT[asset.detailLevel] : null };
+        }
+        catch {
+            return undefined;
+        }
+    }
+    /**
+     * A repeat: which way its copies run, how many there are now, and how far apart.
+     * The pitch of a row that fills its length is edited as a number (`set-repeat` makes it the part's own the first
+     * time); a row of a fixed count says its pitch cannot be set yet (figure-model refuses it the same way).
+     */
+    renderRepeat(asset, geometry, unavailable) {
+        const repeat = repeatOf(this.selected, geometry);
+        if (!asset || !repeat || repeat.index)
+            return nothing;
+        /* The row is set on its part; what hangs from that part is copied with it and has no row of its own. */
+        if (!asset.document.model.nodes.some(n => n.id === `${this.selected}.repeat`))
+            return nothing;
+        const model = asset.document.model;
+        const layout = model.nodes.find(n => n.id === `${this.selected}.layout`);
+        const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?';
+        const own = `${this.selected}.repeat.pitch`;
+        /* The pitch as it stands: the part's own number, a constant, or what a pitch that follows a length comes to. */
+        const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(asset, layout?.args[4]);
+        const fits = layout?.op === 'fit-pitch@1';
+        /* What the pitch gives, in numbers: this many copies at the length it is authored, and how long it may be placed. */
+        const lengthRef = layout?.args[0] ?? '';
+        const length = asset.designInputs[lengthRef];
+        const longest = model.inputs.find(i => i.id === lengthRef)?.max;
+        const limit = model.constants.find(c => c.id === layout?.args[6])?.value;
+        const field = { id: own, unit: 'mm', role: 'design', value: pitch ?? 0 };
+        return html `<section>
+      <h3>${i18next.t('figure.label.repeat')}</h3>
+      <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
+      <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
+      <div inline-field>
+        <label>${i18next.t('figure.label.repeat-gap')} <span unit>mm</span></label>
+        <input
+          type="number"
+          step="any"
+          aria-label=${own}
+          .value=${String(pitch ?? '')}
+          ?disabled=${unavailable || !fits}
+          @change=${(e) => this.setPitch(field, e)}
+        />
+      </div>
+      <p hint>
+        ${fits && length !== undefined && longest !== undefined && limit !== undefined
+            ? i18next.t('figure.text.repeat-what-pitch-gives', {
+                length: length.toLocaleString(),
+                count: repeat.count,
+                longest: longest.toLocaleString(),
+                limit
+            })
+            : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
+      </p>
+      ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
+      ${asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
+            ? html `<button act ?disabled=${unavailable} @click=${() => this.run(() => this.session.command({ kind: 'remove-repeat', part: this.selected }))}>
+            <md-icon>close</md-icon>${i18next.t('figure.button.remove-repeat')}
+          </button>`
+            : nothing}
+    </section>`;
+    }
+    /** The design input a row's pitch is read from, when it is read from one (ADR-0096). */
+    pitchInputOf(asset, part) {
+        const pitch = asset.joints?.find(j => j.body1.part === part && j.repeat)?.repeat?.pitch;
+        return typeof pitch === 'object' && pitch?.from?.of === 'input' ? pitch.from.input : undefined;
+    }
+    /**
+     * 「보드에서 바꿀 수 있음」 (ADR-0096): the row's pitch made a design input the figure publishes -- a name on the board and
+     * a range the board's value is held to -- in one step; changed or withdrawn the same way. Only a row with a record.
+     */
+    renderPublicPitch(asset, pitch, unavailable) {
+        const part = this.selected;
+        if (!asset.joints?.some(j => j.body1.part === part && j.repeat))
+            return nothing;
+        const from = this.pitchInputOf(asset, part);
+        const listed = from ? asset.publicInputs?.find(p => p.input === from) : undefined;
+        const input = from ? asset.document.model.inputs.find(i => i.id === from) : undefined;
+        const form = this.publishing?.part === part
+            ? this.publishing
+            : listed && input
+                ? { part, label: listed.label, min: input.min, max: input.max }
+                : undefined;
+        const open = !!form;
+        const edit = (key) => (e) => {
+            const target = e.target;
+            const base = form ?? { part, label: '', min: 0, max: 0 };
+            this.publishing = { ...base, [key]: key === 'label' ? target.value : target.valueAsNumber };
+        };
+        const steps = () => {
+            const f = form;
+            const id = from ?? `${part}.pitch`;
+            if (listed)
+                return [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }, { kind: 'publish-input', input: id, label: f.label }];
+            const exists = asset.document.model.inputs.some(i => i.id === id);
+            return [
+                ...(exists ? [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }] : [{ kind: 'add-design-input', id, unit: 'mm', min: f.min, max: f.max, value: pitch }]),
+                ...(from ? [] : [{ kind: 'set-repeat', part, pitch: { from: { of: 'input', input: id } } }]),
+                { kind: 'publish-input', input: id, label: f.label }
+            ];
+        };
+        const run = (list) => {
+            try {
+                this.session.applyRecipe(list);
+                this.publishing = undefined;
+                this.error = '';
+                this.changed();
+            }
+            catch (error) {
+                this.error = this.said(error);
+            }
+        };
+        return html `<div public-pitch>
+      <label toggle>
+        <input
+          type="checkbox"
+          aria-label="figure.label.board-sets"
+          .checked=${open}
+          ?disabled=${unavailable}
+          @change=${(e) => e.target.checked
+            ? (this.publishing = { part, label: i18next.t('figure.label.repeat-gap'), min: Math.max(1, Math.round(pitch / 2)), max: Math.round(pitch * 2) })
+            : listed
+                ? run([{ kind: 'unpublish-input', input: from }, { kind: 'set-repeat', part, pitch }])
+                : (this.publishing = undefined)}
+        />
+        ${i18next.t('figure.label.board-sets')}
+      </label>
+      ${open
+            ? html `<div inline-field><label>${i18next.t('figure.label.board-name')}</label><input aria-label="figure.label.board-name" .value=${form.label} @change=${edit('label')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form.min)} @change=${edit('min')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form.max)} @change=${edit('max')} /></div>
+            <button act publish-pitch ?disabled=${unavailable || !form.label.trim()} @click=${() => run(steps())}>
+              <md-icon>${listed ? 'check' : 'ios_share'}</md-icon>${i18next.t(listed ? 'figure.button.apply' : 'figure.button.publish-input')}
+            </button>`
+            : nothing}
+    </div>`;
+    }
+    /**
+     * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
+     * which a plain input edit would not. Refused only when the authored length would already hold more copies than
+     * that -- said with the numbers.
+     */
+    setPitch(field, event) {
+        const input = event.target;
+        const pitch = input.valueAsNumber;
+        if (!Number.isFinite(pitch) || pitch === field.value)
+            return;
+        /* Read from a design input the board may set: the input's value changes, the row keeps reading it (ADR-0096). */
+        const from = this.pitchInputOf(JSON.parse(this.session.source()), this.selected);
+        if (from) {
+            this.run(() => this.session.apply([{ kind: 'set-design', input: from, unit: 'mm', value: pitch }]));
+            input.value = String(this.session.read().fields.find(i => i.id === from)?.value ?? field.value);
+            return;
+        }
+        try {
+            this.session.command({ kind: 'set-repeat', part: this.selected, pitch });
+            this.error = '';
+            this.changed();
+        }
+        catch (error) {
+            input.value = String(field.value);
+            const code = error?.code;
+            const message = error instanceof Error ? error.message : String(error);
+            const found = /\((\d[\d.]*) mm\) a pitch under ([\d.]+) mm makes more than (\d+)/.exec(message);
+            this.error =
+                code === 'INPUT_RANGE' && found
+                    ? i18next.t('figure.text.repeat-pitch-too-small', { length: Number(found[1]).toLocaleString(), min: found[2], limit: found[3] })
+                    : this.said(error);
+        }
+    }
+    /** 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) {
+        /* A copy on the canvas selects its repeat: the part the author made. */
+        this.selected = id ? ownerOf(id) : 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>${i18next.t('figure.text.opening-model')}</p>`;
+        const unavailable = view.loading || !!view.error || view.saving || !view.context;
+        const part = view.geometry.find(g => ownerOf(g.id) === this.selected);
+        /* 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');
+        /* A repeat's own row values (its pitch) have their own section, not the shape's. */
+        const own = design.filter(i => this.selected && i.id.startsWith(this.selected + '.') && !i.id.startsWith(this.selected + '.repeat.'));
+        const common = design.filter(i => !view.geometry.some(g => i.id.startsWith(ownerOf(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-canvas')?.fit()}
+      >
+        ${this.renderGizmoTools(!unavailable && this.middle === 'edit')}
+        ${['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}
+            ${this.retry && this.error
+                ? html `<button act @click=${() => (this.retry.run ? this.retry.run() : this.linkCommand(this.retry.action))}><md-icon>straighten</md-icon>${this.retry.label}</button>`
+                : null}
+          </div>`
+            : null}
+      ${this.notice ? html `<div role="status" class="notice">${this.notice}</div>` : null}
+      ${this.catalogOpen
+            ? html `<figure-recipe-catalog
+            .templates=${this.templates}
+            .selected=${this.selected}
+            .error=${this.recipeError}
+            .guideOf=${this.guideOf}
+            .thumbnailOf=${this.thumbnailOf}
+            ?locked=${unavailable}
+              @insert-recipe=${(e) => this.insertRecipe(e.detail.recipe, e.detail.values)}
+              @close-catalog=${() => (this.catalogOpen = false)}
+          ></figure-recipe-catalog>`
+            : null}
+      <ox-three-pane>
+        <figure-parts
+          slot="start"
+          .budget=${this.budget}
+          @show-maturity=${() => (this.tab = 'verdict')}
+          .parts=${this.partRows(view.geometry)}
+          .partBudget=${this.partBudgetOf(asset)}
+          @set-detail-level=${(e) => this.linkCommand({ kind: 'set-detail-level', level: e.detail.level })}
+          .selected=${this.selected}
+          ?locked=${unavailable}
+          @add-part=${(e) => this.add(e.detail.kind)}
+          .recipeCount=${this.templates.length}
+          @open-recipe-catalog=${() => ((this.catalogOpen = true), (this.recipeError = ''))}
+          @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 => ownerOf(g.id))) : new Set())}
+          @move-part-up=${(e) => this.movePart(e.detail.id, e.detail.to)}
+          @move-part-down=${(e) => this.movePart(e.detail.id, e.detail.to)}
+          @duplicate-part=${(e) => this.duplicatePart(e.detail.id)}
+          @remove-part=${(e) => this.removePart(e.detail.id)}
+        ></figure-parts>
+        ${this.middle === 'preview'
+            ? html `<figure-preview
+              .asset=${asset}
+              .context=${view.context ?? ''}
+              .view=${this.view}
+              @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+            ></figure-preview>`
+            : html `<figure-canvas
+          .view=${this.view}
+          .parts=${this.drawnParts(view.geometry, asset)}
+          .fan=${this.fanOf(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.choose(e.detail)}
+          @render-error=${(e) => {
+                this.error = e.detail.message;
+            }}
+        ></figure-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=${partLabelOf(this.selected)}
+                        ?disabled=${unavailable || !!repeatOf(this.selected, view.geometry)?.index}
+                        @change=${(e) => this.renamePart(e.target)}
+                      />
+                    </div>
+                    ${this.renderRepeatNote(view.geometry)}
+                  </section>
+                  ${this.renderRepeat(asset, view.geometry, unavailable)}
+                  ${this.renderGroups(groupFields(own, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
+                  ${this.renderLinks(unavailable, 'shape')}
+                  <figure-material-panel
+                    .body=${{ ...part, id: this.selected }}
+                    .palette=${view.palette ?? {}}
+                    ?locked=${unavailable}
+                    @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+                    @part-live=${(e) => this.hold({}, e.detail.edit)}
+                  ></figure-material-panel>`
+            : 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-capability-panel
+              .asset=${asset}
+              .selected=${this.selected}
+              ?locked=${unavailable}
+              @select-part=${(e) => this.choose(e.detail.id)}
+              @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+            ></figure-capability-panel>
+          </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>
+      </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([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "session", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureEditor.prototype, "templates", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureEditor.prototype, "guideOf", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureEditor.prototype, "thumbnailOf", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "publishing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "catalogOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "recipeError", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "revision", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], FigureEditor.prototype, "instances", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "budget", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureEditor.prototype, "firstSave", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "selected", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "retry", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureEditor.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Function)
+], FigureEditor.prototype, "panes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureEditor.prototype, "middle", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureEditor.prototype, "gizmoMode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "notice", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "view", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "hiddenParts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "live", void 0);
+FigureEditor = FigureEditor_1 = __decorate([
+    customElement('figure-editor')
+], FigureEditor);
+export { FigureEditor };
+//# sourceMappingURL=editor.js.map