@things-factory/figure-ui 10.1.81 → 10.1.83

package/dist-client/modeller/editor.js

@@ -7,13 +7,15 @@ import { notify } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 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 { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figurePlaneAlignChanges, figurePartFaceOf, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } 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 { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf } from './command-preview.js';
+import { motionEndsOf } from './motion-ends.js';
 import './figure-links.js';
 import './figure-controls.js';
 import './figure-clips.js';
@@ -21,16 +23,17 @@ 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 { gizmoChanges, gizmoReachOf } 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 { nudgeOf, placementOf } from './stage-model.js';
+import { roomRefitRowsOf } from './occupancy.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 { fieldWordsOf, followOf, measureNow, partSummaryOf, 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';
@@ -60,6 +63,8 @@ let FigureEditor = class FigureEditor extends LitElement {
          * 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.
          */
+        /** The page offers an AI draft for a new figure (the modeller page, through the app's assistant dock). */
+        this.aiDraft = false;
         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;
@@ -94,6 +99,9 @@ let FigureEditor = class FigureEditor extends LitElement {
             else
                 this.selected = '';
         };
+        this.foldedForWidth = false;
+        this.keptOpenByAuthor = false;
+        this.widthWatch = new ResizeObserver(([entry]) => this.fitPanesTo(entry.contentRect.width));
         /**
          * Refusals and notices go to the app's shared surfaces, as every screen's do (user, 2026-09-27: 「왜 모두가 사용하는
          * notification 오류 표현 방법을 사용하지 않고」 · 「혹은 oxprompt 에서 확인하고 진행하던지」). A refusal with a way on --
@@ -101,6 +109,19 @@ let FigureEditor = class FigureEditor extends LitElement {
          * other refusal is the app's notification, which stays until it is closed.
          */
         this.toldViewError = '';
+        /*
+          Per model and per part, how far its properties panel was scrolled and which of its folds were open, so going back
+          to one finds it as it was left (designer 2026-09-27, B.1). The path stays held at the top, so a scroll kept cannot
+          hide which part the panel speaks of. Another model starts clean.
+        */
+        this.panelMemory = new Map();
+        this.lastAnchors = {};
+        /** To the release that exists: the history tab's release section, not a second one here. */
+        this.goRelease = async () => {
+            this.tab = 'history';
+            await this.updateComplete;
+            await this.querySelector('figure-history-panel')?.showRelease?.();
+        };
     }
     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. */
@@ -158,6 +179,17 @@ let FigureEditor = class FigureEditor extends LitElement {
       opacity: 0.38;
       cursor: default;
     }
+    /*
+      Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they
+      showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.
+    */
+    ox-canvas-bar button[tool] md-icon {
+      --md-icon-size: 20px;
+    }
+    ox-canvas-bar button[tool]:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
     figure-preview {
       min-width: 0;
       min-height: 0;
@@ -188,9 +220,76 @@ let FigureEditor = class FigureEditor extends LitElement {
       min-height: 0;
     }
     figure-canvas {
+      flex: 1;
       min-width: 0;
       min-height: 0;
     }
+    div[middle] {
+      position: relative;
+      display: flex;
+      min-width: 0;
+      min-height: 0;
+    }
+    /* A new figure's first question, over the empty canvas. */
+    div[start] {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 10;
+      color: var(--md-sys-color-on-surface);
+      transform: translate(-50%, -50%);
+      width: min(440px, calc(100% - 32px));
+      box-sizing: border-box;
+      padding: 20px;
+      border-radius: 12px;
+      background: var(--md-sys-color-surface, #fff);
+      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+    }
+    div[start] button[start-button] {
+      width: auto;
+      margin: 0;
+      font-size: var(--ui-t-body);
+      height: 36px;
+      padding: 0 16px;
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: 999em;
+      color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-surface, #fff);
+      cursor: pointer;
+    }
+    div[start] button[start-button]:hover:not(:disabled) {
+      background: var(--md-sys-color-primary-container);
+    }
+    div[start] button[start-button][pressed] {
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+      border-color: var(--md-sys-color-primary);
+    }
+    div[start] button[start-button]:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    div[start] h2 {
+      margin: 0 0 12px;
+      font-size: var(--ui-t-title);
+    }
+    div[start-paths] {
+      display: grid;
+      gap: 14px;
+    }
+    div[start-paths] h3 {
+      margin: 0 0 6px;
+      font-size: var(--ui-t-body);
+    }
+    div[start-shapes] {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    div[start] small {
+      display: block;
+      margin-top: 4px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
     /* The side: tabs over one panel at a time, each using the whole height. */
     aside {
       display: flex;
@@ -207,9 +306,12 @@ let FigureEditor = class FigureEditor extends LitElement {
       flex: 1;
       position: relative;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 38px;
+      gap: 1px;
+      min-width: 0;
+      height: 48px;
       padding: 0;
       border: none;
       border-radius: 0;
@@ -229,6 +331,14 @@ let FigureEditor = class FigureEditor extends LitElement {
       width: 20px;
       height: 20px;
     }
+    button[tab] span[tab-label] {
+      max-width: 100%;
+      overflow: hidden;
+      font-size: 0.66rem;
+      line-height: 1.2;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
     span[badge] {
       position: absolute;
       top: 3px;
@@ -258,24 +368,60 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /* Which part the panel speaks of, and the way back to the whole figure. */
     div[subject] {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: grid;
+      gap: 4px;
+      padding: 8px 10px;
+      background: var(--md-sys-color-surface-container-lowest);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    nav[path] {
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 6px 10px 0;
+      min-width: 0;
     }
-    div[subject] button[chip] {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
-      height: 26px;
-      padding: 0 10px 0 6px;
+    nav[path] button[model-crumb] {
+      flex: none;
+      max-width: 55%;
+      height: 28px;
+      padding: 0 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 999em;
+      background: none;
+      color: var(--md-sys-color-primary);
+      cursor: pointer;
+    }
+    nav[path] button[model-crumb][on] {
+      border-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary-container);
+    }
+    nav[path] button[model-crumb]:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
+    nav[path] span[current] {
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: 600;
+    }
+    div[subject-summary] {
+      display: grid;
+      gap: 1px;
+    }
+    div[subject-summary] b span {
+      font-weight: 400;
       color: var(--md-sys-color-on-surface-variant);
     }
-    div[subject] md-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
+    div[subject-summary] small {
+      color: var(--md-sys-color-on-surface-variant);
     }
     button {
       font: inherit;
@@ -341,7 +487,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           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')}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t(tool.mode === 'scale' && this.sizeDragUnsure(this.asset(), this.selected) ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-not-own', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -351,11 +497,39 @@ let FigureEditor = class FigureEditor extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('keydown', this.onKey, true);
+        this.widthWatch.observe(this);
     }
     disconnectedCallback() {
         window.removeEventListener('keydown', this.onKey, true);
+        this.widthWatch.disconnect();
         super.disconnectedCallback();
     }
+    /*
+      Narrow, the parts list gives way to the canvas rather than all three shrinking (designer 2026-09-27, U11): under
+      FOLD_START_UNDER px the canvas would be left under about 560 px beside both sides. The fold is said once, and the
+      bar's own toggle opens it again; opened by the author, it is not folded again until the screen has been wide.
+    */
+    static { this.FOLD_START_UNDER = 1100; }
+    fitPanesTo(width) {
+        const panes = this.panes;
+        if (!panes || !width)
+            return;
+        if (this.foldedForWidth && !panes.foldStart)
+            this.keptOpenByAuthor = true;
+        if (width < FigureEditor_1.FOLD_START_UNDER) {
+            if (!panes.foldStart && !this.keptOpenByAuthor) {
+                panes.foldStart = true;
+                this.foldedForWidth = true;
+                notify({ level: 'info', message: i18next.t('figure.text.parts-panel-folded-narrow') });
+            }
+        }
+        else {
+            if (this.foldedForWidth && panes.foldStart)
+                panes.foldStart = false;
+            this.foldedForWidth = false;
+            this.keptOpenByAuthor = false;
+        }
+    }
     tell(changed) {
         if (changed.has('error') && this.error) {
             const retry = this.retry;
@@ -371,6 +545,38 @@ let FigureEditor = class FigureEditor extends LitElement {
             notify({ level: 'error', message: viewError });
         this.toldViewError = viewError;
     }
+    /*
+      An edit that would stop clips is refused by figure-model with the clips named (CLIPS_DROPPED). The person is told
+      which, and why, before anything is written; agreed, the same edit is made again letting exactly those go, as one
+      step undo brings back (designer 2026-09-27).
+    */
+    askClipLoss(error, again) {
+        if (error?.code !== 'CLIPS_DROPPED')
+            return false;
+        const clips = error.clips;
+        /* The consent is for this edit, on this figure as it is now: held with it while the person reads. */
+        const session = this.session;
+        const { context, revision } = session.read();
+        void this.confirmClipLoss(clips, again, { session, context: context, revision: revision });
+        return true;
+    }
+    async confirmClipLoss(clips, again, asked) {
+        const agreed = await OxPrompt.open({
+            type: 'warning',
+            text: i18next.t('figure.text.clips-would-go', { clips: clips.map(c => i18next.t(`figure.text.clip-${c.why}`, { clip: c.clip })).join(', ') }),
+            confirmButton: { text: i18next.t('figure.button.let-clips-go') },
+            cancelButton: { text: i18next.t('figure.button.keep-editing') }
+        });
+        if (!agreed)
+            return;
+        /* Changed while the person read -- another figure, or an edit in between: the consent was not for this; nothing is applied. */
+        const now = this.session === asked.session ? asked.session.read() : undefined;
+        if (!now || now.context !== asked.context || now.revision !== asked.revision) {
+            this.error = i18next.t('figure.text.clips-consent-stale');
+            return;
+        }
+        asked.session.withConsent({ dropClips: clips.map(c => c.id), context: asked.context, revision: asked.revision }, again);
+    }
     async ask(message, retry) {
         const agreed = await OxPrompt.open({
             type: 'question',
@@ -385,6 +591,15 @@ let FigureEditor = class FigureEditor extends LitElement {
         else
             this.linkCommand(retry.action);
     }
+    propertiesPanel() {
+        return this.renderRoot.querySelector('div[panel]');
+    }
+    foldsOf(panel) {
+        const folds = [...panel.querySelectorAll('details')];
+        for (const inner of panel.querySelectorAll('figure-links'))
+            folds.push(...(inner.shadowRoot?.querySelectorAll('details') ?? []));
+        return folds;
+    }
     willUpdate(_changed) {
         const view = this.session?.read();
         if (view?.context !== this.lastContext) {
@@ -392,6 +607,14 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.selected = '';
             this.error = '';
             this.hiddenParts = new Set();
+            this.panelMemory.clear();
+        }
+        else if (_changed.has('selected')) {
+            const panel = this.propertiesPanel();
+            const was = _changed.get('selected') ?? '';
+            if (panel)
+                this.panelMemory.set(was || '@model', { top: panel.scrollTop, open: this.foldsOf(panel).map(d => d.open) });
+            this.restorePanelFor = this.selected || '@model';
         }
         if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected))
             this.selected = '';
@@ -400,6 +623,13 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /** The scene toggles: the mode already shown takes the gizmo away. */
     useGizmo(mode) {
+        if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale') {
+            const asset = this.asset();
+            if (asset && this.sizeDragUnsure(asset, this.selected)) {
+                this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() });
+                return;
+            }
+        }
         this.renderRoot.querySelector('figure-canvas')?.gizmo(mode);
         this.gizmoMode = this.gizmoMode === mode ? undefined : mode;
     }
@@ -419,6 +649,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.changed();
         }
         catch (error) {
+            if (this.askClipLoss(error, () => this.run(action)))
+                return;
             const say = (key, params) => i18next.t(key, params);
             this.error = sizeRangeRefusalOf(error, say) ?? inputRangeRefusalOf(error, say) ?? this.said(error);
         }
@@ -492,7 +724,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.error = '';
         }
         catch (error) {
-            this.error = this.said(error);
+            /* Not reached: whether it was written is not known, and the edits are still here -- said so, not "not saved". */
+            this.error = error?.code === 'SAVE_UNREACHABLE' ? i18next.t('figure.text.save-unreachable') : this.said(error);
         }
         finally {
             this.changed();
@@ -537,6 +770,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.changed();
         }
         catch (error) {
+            if (this.askClipLoss(error, () => this.removePart(id, refitRoom)))
+                return;
             /*
               A part in the declared space goes, and the space is fitted to the parts left, in the same click: every space
               this product declares is fitted to the parts (「부품에 맞추기」, the AI's fit-room -- no padding), so fitting it
@@ -600,12 +835,30 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (!id || !this.session || !this.session.read().geometry.some(g => g.id === id))
             return none;
         try {
-            return gizmoReachOf(JSON.parse(this.session.source()), id);
+            const asset = JSON.parse(this.session.source());
+            const reach = gizmoReachOf(asset, id);
+            /*
+              A size drag shows the face it keeps and the commit keeps the same (figureScaleAnchorOf). Where figure-model cannot
+              say which face that is -- a part fastened turned or twisted -- the drag would show one result and write another,
+              so sizing by the gizmo is not offered there; the fields still size it (designer 2026-09-27).
+            */
+            if (reach.scale && this.sizeDragUnsure(asset, id))
+                return { ...reach, scale: false };
+            return reach;
         }
         catch {
             return none;
         }
     }
+    /** Whether a size drag on this part could not show what is written: figure-model gives no face it keeps. */
+    sizeDragUnsure(asset, id) {
+        try {
+            return !figureScaleAnchorOf(asset, ownerOf(id));
+        }
+        catch {
+            return true;
+        }
+    }
     /** 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();
@@ -631,7 +884,19 @@ let FigureEditor = class FigureEditor extends LitElement {
           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);
+        /* A size drag this part cannot show truly is not written: it springs back, and the reason is said. */
+        if (result.scale && result.scale.some(k => Math.abs(k - 1) > 1e-4) && this.sizeDragUnsure(asset, id)) {
+            this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(id), extreme: this.keptExtremeWord() });
+            return this.requestUpdate();
+        }
+        /*
+          A size dragged keeps the face the figure's placement keeps, as a size typed does (figure-model's one rule): the
+          gizmo's own anchoring on the opposite face is what the drag shows, not what is written (designer 2026-09-27).
+        */
+        const scaled = !!result.scale && !result.rotation && result.scale.some(k => Math.abs(k - 1) > 1e-4);
+        const taken = jointed || scaled ? { scale: result.scale } : result;
+        const written = gizmoChanges(id, this.reachOf(id), taken, sizes);
+        const changes = scaled && !jointed ? figureSizeEditChanges(asset, ownerOf(id), written) : written;
         if (changes.length) {
             this.run(() => this.session.apply(changes));
             return;
@@ -700,6 +965,53 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.selected = copy;
         });
     }
+    /**
+     * The one-off "put it on the plane", by the figure's placement (designer 2026-09-27): figure-model's rule
+     * (`figurePlaneAlignChanges`) -- a floor figure's part to the floor by its bottom, a ceiling one's to the ceiling by
+     * its top, a wall one's to the wall by its back, a centred one's centre to the origin's height. Once: nothing is
+     * fastened. Refused, it says why.
+     */
+    /* What a tilted part's typed size keeps, by the figure's placement: not the floor's lowest point everywhere (designer 2026-09-27). */
+    keptExtremeWord() {
+        const placement = this.asset()?.placement ?? 'floor';
+        return i18next.t(`figure.label.kept-extreme-${placement}`);
+    }
+    planeContactOf(source, part) {
+        if (this.planeContact?.source !== source || this.planeContact.part !== part) {
+            let contact;
+            try {
+                contact = figurePlaneAlignChanges(parseFigureAsset(source), part).contact;
+            }
+            catch {
+                contact = undefined;
+            }
+            this.planeContact = { source, part, contact };
+        }
+        return this.planeContact.contact;
+    }
+    renderPlaneAlign(asset, unavailable) {
+        const placement = asset.placement ?? 'floor';
+        const icon = { floor: 'vertical_align_bottom', ceiling: 'vertical_align_top', wall: 'flip_to_back', center: 'vertical_align_center' }[placement];
+        /* A tilted part touches the plane at a point or an edge, a ball at its lowest; the tooltip says so rather than promise a face (designer 2026-09-27). */
+        const contact = this.planeContactOf(this.session.source(), this.selected);
+        const told = contact === 'tilted' || contact === 'extreme' ? `-${contact}` : '';
+        return html `<button plane-align=${placement} ?disabled=${unavailable} aria-label=${i18next.t(`figure.button.align-to-${placement}`)}
+      title=${i18next.t(`figure.text.align-to-${placement}${told}`)} @click=${() => this.alignToPlane()}>
+      <md-icon>${icon}</md-icon>
+    </button>`;
+    }
+    alignToPlane() {
+        const asset = parseFigureAsset(this.session.source());
+        const { changes, contact, refusal } = figurePlaneAlignChanges(asset, this.selected);
+        if (refusal) {
+            this.error = i18next.t(`figure.text.align-refused-${refusal.toLowerCase().replace(/_/g, '-')}`, { part: partLabelOf(this.selected) });
+            return;
+        }
+        if (changes.length)
+            this.run(() => this.session.apply(changes));
+        if ((contact === 'tilted' || contact === 'extreme') && !this.error)
+            this.notice = i18next.t(`figure.text.aligned-${contact}-${asset.placement ?? 'floor'}`);
+    }
     renderTools(unavailable) {
         const reach = this.reachOf(this.selected);
         if (!this.selected || !reach.translate)
@@ -717,7 +1029,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         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')}
+      ${this.renderPlaneAlign(asset, unavailable)}
       ${['x', 'z'].map(axis => {
             const able = canMirror(asset, this.selected, axis, reach);
             return html `<button
@@ -791,9 +1103,36 @@ let FigureEditor = class FigureEditor extends LitElement {
       .dims=${dims}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
+      .previewWords=${previewWordsOf(this.currentPreview(), this.selected, (key, params) => i18next.t(key, params))}
+      .detachWords=${this.detachWords(asset)}
+      .overhangWords=${section === 'shape' ? this.overhangWords(asset) : []}
+      .overhangNote=${section === 'shape' ? this.overhangNote(asset) : []}
+      .motionEnds=${section === 'motion' ? this.motionEnds() : null}
+      @go-fasten=${() => this.goFasten()}
+      @preview-command=${(e) => this.previewCommand(e.detail)}
       @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
     ></figure-links>`;
     }
+    /**
+     * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
+     * while dragging and the commit keeps it, so nothing jumps on release. A part whose fastening is turned has none the
+     * rule can say, and the gizmo keeps its own (the face across from the handle).
+     */
+    anchorsOf(asset) {
+        let next = {};
+        try {
+            const anchor = asset && this.selected ? figureScaleAnchorOf(asset, this.selected) : undefined;
+            if (anchor)
+                next = { [this.selected]: anchor };
+        }
+        catch {
+            next = {};
+        }
+        /* The same object while it says the same thing: the canvas stands its parts up again when this changes. */
+        if (JSON.stringify(next) !== JSON.stringify(this.lastAnchors))
+            this.lastAnchors = next;
+        return this.lastAnchors;
+    }
     /** The figure's controls: try a value, name it, set its range and travel time, keep the pose. */
     renderControls(view, unavailable) {
         let asset;
@@ -841,6 +1180,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.changed();
         }
         catch (error) {
+            if (this.askClipLoss(error, () => this.linkCommand(action)))
+                return;
             const code = error?.code;
             const narrowing = narrowingRetryOf(action, error, (key, params) => i18next.t(key, params));
             if (narrowing) {
@@ -860,13 +1201,10 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     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. */
+        /* A size typed in keeps the face the figure's placement keeps -- figure-model's one rule, as the gizmo and "follow the size" do. */
         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
-        ]));
+        const change = { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value };
+        this.run(() => this.session.apply(field.role !== 'state' && part ? figureSizeEditChanges(parseFigureAsset(this.session.source()), part, [change]) : [change]));
         // Rejected edits must also restore the displayed numeric value.
         input.value = String(this.session.read().fields.find(i => i.id === field.id).value);
     }
@@ -1014,7 +1352,12 @@ let FigureEditor = class FigureEditor extends LitElement {
      * 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) {
+    partRows(geometry, asset) {
+        /* Where each part is fastened, straight above it: `part · face`, or the mounting plane (ADR-0097 §5.5). */
+        const fastened = new Map((asset?.joints ?? []).map(j => [
+            j.body1.part,
+            'plane' in j.body0 ? i18next.t('figure.label.mounting-plane') : `${partLabelOf(j.body0.part)} · ${i18next.t(`figure.label.face-${j.body0.face}`)}`
+        ]));
         const rows = new Map();
         for (const g of geometry) {
             const id = ownerOf(g.id);
@@ -1028,7 +1371,8 @@ let FigureEditor = class FigureEditor extends LitElement {
                 provider: g.shape?.provider ?? '',
                 hidden: this.hiddenParts.has(id),
                 invisible: g.visible === false,
-                ...(id !== g.id ? { copies: 1 } : {})
+                ...(id !== g.id ? { copies: 1 } : {}),
+                ...(fastened.has(id) ? { fastenedTo: fastened.get(id) } : {})
             });
         }
         return [...rows.values()];
@@ -1084,6 +1428,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           @change=${(e) => this.setPitch(field, e)}
         />
       </div>
+      <ul row-reading>${rowWordsOf(this.rowNow(asset), (key, params) => i18next.t(key, params)).map(line => html `<li>${line}</li>`)}</ul>
       <p hint>
         ${fits && length !== undefined && longest !== undefined && limit !== undefined
             ? i18next.t('figure.text.repeat-what-pitch-gives', {
@@ -1102,6 +1447,15 @@ let FigureEditor = class FigureEditor extends LitElement {
             : nothing}
     </section>`;
     }
+    /** The selected row as it is drawn now, read by figure-model: nothing when it cannot be read. */
+    rowNow(asset) {
+        try {
+            return figureRowOf(asset, this.selected, this.currentInputs());
+        }
+        catch {
+            return undefined;
+        }
+    }
     /** 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;
@@ -1211,6 +1565,183 @@ let FigureEditor = class FigureEditor extends LitElement {
         }
     }
     /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */
+    /*
+      Saving and releasing told apart, beside the save (ADR-0097 §5.6, Q-D2): what the saved figure is -- a draft never
+      released, a draft while boards use an earlier release, a release -- as the server said it. Edits not saved are the
+      status before it. Boards read a draft's latest release (figureBlueprint), so that is what is said.
+    */
+    releaseWords(view) {
+        if (!view.id || !this.releaseState?.state)
+            return '';
+        const { state, version } = this.releaseState;
+        if (state === 'released')
+            return i18next.t('figure.text.release-state-released', { version: String(version) });
+        return version > 0 ? i18next.t('figure.text.release-state-draft-over', { version: String(version) }) : i18next.t('figure.text.release-state-draft-new');
+    }
+    /** The fastening form's command, seen before it is done; null clears what was shown. */
+    previewCommand(candidate) {
+        if (!candidate || !this.session || !this.selected) {
+            this.preview = undefined;
+            return;
+        }
+        const view = this.session.read();
+        const held = { context: view.context, revision: view.revision, key: JSON.stringify(candidate), part: this.selected };
+        try {
+            const seen = this.session.previewCommand(candidate.action);
+            let face;
+            if (candidate.face) {
+                try {
+                    face = figurePartFaceOf(parseFigureAsset(this.session.source()), candidate.face.part, candidate.face.face, this.currentInputs());
+                }
+                catch {
+                    face = undefined;
+                }
+            }
+            /* A row is read on the figure the command would make, by figure-model, as drawn. */
+            const row = candidate.action.kind === 'make-repeat' ? figureRowOf(seen.asset, this.selected, this.currentInputs()) : undefined;
+            this.preview = {
+                ...held,
+                context: seen.context,
+                revision: seen.revision,
+                geometry: seen.geometry,
+                moves: seen.moves,
+                added: seen.added,
+                ...(row ? { row } : {}),
+                clipsWouldGo: seen.clipsWouldGo,
+                face,
+                faceUnknown: !!candidate.face && !face
+            };
+        }
+        catch (error) {
+            /* Refused: nothing of an earlier result stays on screen, and the reason is said. */
+            this.preview = { ...held, refused: this.said(error) };
+        }
+    }
+    /** The preview, while it still speaks of what is on screen: this figure, this version, this part. */
+    currentPreview() {
+        const p = this.preview;
+        const view = this.session?.read();
+        /* Only where its form is: the properties panel stays in the page on another tab, and did not clear it (2026-09-27, :3391). */
+        if (!p || !view || p.context !== view.context || p.revision !== view.revision || p.part !== this.selected || this.middle !== 'edit' || this.tab !== 'properties')
+            return undefined;
+        return p;
+    }
+    detachWords(asset) {
+        const view = this.session?.read();
+        const joint = asset?.joints?.find(j => j.body1.part === this.selected);
+        if (!asset || !view || !joint || !this.session)
+            return [];
+        const key = `${view.context}|${view.revision}|${this.selected}`;
+        if (this.detachSaid?.key === key)
+            return this.detachSaid.words;
+        const say = (k, params) => i18next.t(k, params);
+        const from = 'plane' in joint.body0 ? say('figure.label.mounting-plane') : partLabelOf(joint.body0.part);
+        let words;
+        try {
+            const seen = this.session.previewCommand({ kind: 'detach', part: this.selected });
+            const own = seen.moves.some(m => m.body === this.selected);
+            words = own
+                ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key, moves: seen.moves }, this.selected, say)]
+                : [say('figure.text.detach-stays', { from })];
+            const children = (asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === this.selected).map(j => partLabelOf(j.body1.part));
+            if (children.length)
+                words.push(say('figure.text.detach-keeps-children', { parts: children.join(', ') }));
+            if (seen.clipsWouldGo.length)
+                words.push(say('figure.text.detach-clips', { clips: seen.clipsWouldGo.map(c => c.clip).join(', ') }));
+        }
+        catch (error) {
+            words = [say('figure.text.detach-refused', { reason: this.said(error) })];
+        }
+        this.detachSaid = { key, words };
+        return words;
+    }
+    /** Wider than its face: a fact of the relation, said in its details, not as a warning (designer 2026-09-27). */
+    overhangNote(asset) {
+        this.overhangWords(asset);
+        return this.overhangSaid?.note ?? [];
+    }
+    overhangWords(asset) {
+        const view = this.session?.read();
+        if (!asset || !view || !this.selected)
+            return [];
+        const key = `${view.context}|${view.revision}|${this.selected}`;
+        if (this.overhangSaid?.key === key)
+            return this.overhangSaid.words;
+        const say = (k, params) => i18next.t(k, params);
+        const where = (o) => ({ on: partLabelOf(o.on.part), face: say(`figure.label.face-${o.on.face}`) });
+        const sides = (o) => o.sides.map(s => say(`figure.text.overhang-side-${s.side}`, { axis: s.axis.toUpperCase(), mm: String(s.mm) })).join(', ');
+        const words = [];
+        const note = [];
+        try {
+            const inputs = this.currentInputs();
+            const own = figureFaceOverhangOf(asset, this.selected, inputs);
+            if (own?.state === 'larger') {
+                note.push(say('figure.text.overhang-larger', { ...where(own), sides: sides(own) }));
+                if (own.lopsided.length)
+                    note.push(say('figure.text.overhang-lopsided', { axes: own.lopsided.map(a => a.toUpperCase()).join(', ') }));
+            }
+            if (own?.state === 'out')
+                words.push(say('figure.text.overhang-out', { ...where(own), sides: sides(own) }));
+            else if (own?.state === 'possible')
+                words.push(say('figure.text.overhang-possible', where(own)));
+            else if (own?.state === 'unknown')
+                words.push(say('figure.text.overhang-unknown', where(own)));
+            const held = (asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === this.selected).map(j => figureFaceOverhangOf(asset, j.body1.part, inputs));
+            const past = held.filter((o) => o?.state === 'out' || o?.state === 'possible');
+            if (past.length)
+                words.push(say('figure.text.overhang-held', { parts: past.map(o => partLabelOf(o.part)).join(', ') }));
+        }
+        catch {
+            /* Not read: nothing said rather than a guess. */
+        }
+        this.overhangSaid = { key, words, note };
+        return words;
+    }
+    motionEnds() {
+        const view = this.session?.read();
+        if (!view || !this.selected)
+            return null;
+        const key = `${view.context}|${view.revision}|${this.selected}`;
+        if (this.motionEndsSaid?.key !== key) {
+            let ends = null;
+            try {
+                ends = motionEndsOf(parseFigureAsset(this.session.source()), this.selected, this.currentInputs());
+            }
+            catch {
+                ends = null;
+            }
+            this.motionEndsSaid = { key, ends };
+        }
+        return this.motionEndsSaid.ends;
+    }
+    /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+    async goFasten() {
+        this.tab = 'properties';
+        await this.updateComplete;
+        const links = [...this.renderRoot.querySelectorAll('figure-links')].find(l => l.section === 'shape');
+        await links?.showFastening?.();
+    }
+    /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
+    previewShown() {
+        const p = this.currentPreview();
+        /* On the motion tab, with nothing being tried: where the selected part's motion takes it, at both ends. */
+        if (!p && this.tab === 'motion' && this.middle === 'edit')
+            return { ghost: this.motionEnds()?.ghost ?? [], highlight: null };
+        if (!p || p.refused)
+            return { ghost: [], highlight: null };
+        if (this.previewDrawn?.of !== p)
+            this.previewDrawn = { of: p, ghost: ghostPartsOf(p), highlight: faceHighlightOf(p.face) };
+        return this.previewDrawn;
+    }
+    /**
+     * What the author has in view, for the AI dock to hear with a request (ADR-0097 §5.6 item 5): the part selected and
+     * what the preview is trying. Read at the moment of sending, never cached, and never a reason to start a new
+     * conversation -- selecting is not a new subject.
+     */
+    assistantFocus() {
+        const trying = this.middle === 'preview' ? this.renderRoot.querySelector('figure-preview')?.tried?.() : undefined;
+        return { ...(this.selected ? { part: this.selected } : {}), ...(trying ? { trying } : {}) };
+    }
     choose(id) {
         /* A copy on the canvas selects its repeat: the part the author made. */
         this.selected = id ? ownerOf(id) : id;
@@ -1225,28 +1756,125 @@ let FigureEditor = class FigureEditor extends LitElement {
             return undefined;
         }
     }
+    /** A side tab says what it is in words under its icon: the icons alone had to be learnt (designer 2026-09-27, U05). */
     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>`}
+        /* Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. */
+        const name = i18next.t('figure.label.tab-short-' + tab);
+        return html `<button tab ?on=${this.tab === tab} title=${label} aria-label=${name} @click=${() => (this.tab = tab)}>
+      <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>${badge == null ? '' : html `<span badge>${badge.toLocaleString()}</span>`}
     </button>`;
     }
     updated(changed) {
         super.updated?.(changed);
         this.tell(changed);
+        if (this.restorePanelFor !== undefined) {
+            const key = this.restorePanelFor;
+            this.restorePanelFor = undefined;
+            requestAnimationFrame(async () => {
+                const panel = this.propertiesPanel();
+                if (!panel || (this.selected || '@model') !== key)
+                    return;
+                await Promise.all([...panel.querySelectorAll('figure-links')].map(el => el.updateComplete));
+                const kept = this.panelMemory.get(key);
+                if (kept)
+                    this.foldsOf(panel).forEach((fold, i) => i < kept.open.length && (fold.open = kept.open[i]));
+                panel.scrollTop = kept?.top ?? 0;
+            });
+        }
         const panes = this.renderRoot.querySelector('ox-three-pane') ?? undefined;
-        if (panes !== this.panes)
+        if (panes !== this.panes) {
             this.panes = panes;
+            this.fitPanesTo(this.getBoundingClientRect().width);
+        }
     }
-    /** Which part the panel speaks of, with the way back to the whole figure. */
+    /**
+     * A new figure's first question, on the canvas where the work will be (designer 2026-09-27, U04): a basic shape, a
+     * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
+     * mounting face and the tags are not asked for first.
+     */
+    renderStart() {
+        const shapes = ['box', 'cylinder', 'plate'];
+        /* Where it is authored from, chosen before any part (ADR-0097): the figure's own setting, no room made up for it. */
+        const placement = (this.asset()?.placement ?? 'floor');
+        return html `<div start role="region" aria-label=${i18next.t('figure.text.start-question')}>
+      <h2>${i18next.t('figure.text.start-question')}</h2>
+      <div start-paths>
+        <section>
+          <h3>${i18next.t('figure.label.start-placement')}</h3>
+          <div start-shapes role="radiogroup" aria-label=${i18next.t('figure.label.start-placement')}>
+            ${['floor', 'ceiling', 'wall', 'center'].map(one => html `<button start-button role="radio" aria-checked=${String(one === placement)} ?pressed=${one === placement}
+                @click=${() => one !== placement && this.linkCommand({ kind: 'set-placement', placement: one })}>
+                ${i18next.t(`figure.label.resize-place-${one}`)}
+              </button>`)}
+          </div>
+          <small>${i18next.t('figure.text.placement-is-intent')}</small>
+        </section>
+        <section>
+          <h3>${i18next.t('figure.label.start-shape')}</h3>
+          <div start-shapes>
+            ${shapes.map(kind => html `<button start-button start-shape=${kind} @click=${() => this.add(kind)}>
+                ${i18next.t(kind === 'box' ? 'figure.label.primitive-cube' : `figure.label.primitive-${kind}`)}
+              </button>`)}
+          </div>
+          <small>${i18next.t('figure.text.start-shape-more')}</small>
+        </section>
+        <section>
+          <h3>${i18next.t('figure.label.start-recipe')}</h3>
+          <button start-button start-recipe ?disabled=${!this.templates.length} @click=${() => ((this.catalogOpen = true), (this.recipeError = ''))}>
+            ${i18next.t('figure.button.start-recipe')}
+          </button>
+          ${this.templates.length ? nothing : html `<small>${i18next.t('figure.text.start-no-recipes')}</small>`}
+        </section>
+        ${this.aiDraft
+            ? html `<section>
+              <h3>${i18next.t('figure.label.start-ai')}</h3>
+              <button start-button start-ai @click=${() => this.dispatchEvent(new CustomEvent('ask-ai-draft', { bubbles: true, composed: true }))}>
+                ${i18next.t('figure.button.start-ai')}
+              </button>
+              <small>${i18next.t('figure.text.start-ai-optional')}</small>
+            </section>`
+            : nothing}
+      </div>
+    </div>`;
+    }
+    /**
+     * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,
+     * with the part's three lines: its kind, how its size answers, what holds it (designer 2026-09-27, B and B.1). The
+     * model name is the same move as the parts list's root; there is no separate "whole figure" link.
+     */
     renderSubject() {
-        if (!this.selected)
-            return null;
+        const name = this.session?.read()?.name || i18next.t('figure.text.new-figure-name');
+        let summary;
+        try {
+            summary = this.selected ? partSummaryOf(parseFigureAsset(this.session.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params)) : undefined;
+        }
+        catch {
+            summary = undefined;
+        }
         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>
+      <nav path aria-label=${i18next.t('figure.label.panel-path')}>
+        <button model-crumb ?on=${!this.selected} title=${`${i18next.t('figure.button.show-model-settings')} · ${name}`}
+          aria-label=${`${i18next.t('figure.button.show-model-settings')}: ${name}`} @click=${() => this.showModelSettings()}>${name}</button>
+        ${this.selected
+            ? html `<span aria-hidden="true">›</span><span current aria-current="location" title=${partLabelOf(this.selected)}>${partLabelOf(this.selected)}</span>`
+            : html `<span aria-hidden="true">·</span><span current aria-current="location">${i18next.t('figure.label.model-settings')}</span>`}
+      </nav>
+      ${summary
+            ? html `<div subject-summary>
+            ${summary.kind ? html `<b>${summary.kind}</b>` : nothing}
+            <small>${summary.size}</small><small>${summary.relation}</small>
+          </div>`
+            : nothing}
     </div>`;
     }
+    /**
+     * The model's settings: the same move from the parts list's root and from the panel's path (B.1). It shows them on
+     * the properties tab whatever tab was open; it changes no data, no camera, no history and no AI conversation.
+     */
+    showModelSettings() {
+        this.selected = '';
+        this.tab = 'properties';
+    }
     render() {
         const view = this.session?.read();
         if (!view)
@@ -1258,6 +1886,37 @@ let FigureEditor = class FigureEditor extends LitElement {
         /* 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) + '.')));
+        /*
+          A part's field only the declared room still reads -- its old height position once the floor holds it -- moves
+          nothing; it is shown apart as what it is, not as a position (ADR-0097, designer 2026-09-27).
+        */
+        let roomOnly = [];
+        try {
+            roomOnly = this.selected ? figureRoomOnlyInputsOf(parseFigureAsset(this.session.source()), this.selected) : [];
+        }
+        catch {
+            roomOnly = [];
+        }
+        const partFields = own.filter(i => !roomOnly.includes(i.id));
+        /* The numbers a rule gives the axes that have no field of their own -- shown read-only, never as a blank. */
+        let held;
+        try {
+            const body = view.geometry.find(g => g.id === this.selected);
+            const placed = body ? placementOf(body) : undefined;
+            const parsed = this.selected ? parseFigureAsset(this.session.source()) : undefined;
+            if (placed && parsed)
+                held = {
+                    position: placed.position,
+                    rotation: placed.rotation,
+                    size: ['x', 'y', 'z'].map(axis => measureNow(parsed, ownerOf(this.selected), axis)),
+                    /* Only a size a rule sets: a palette part's own numbers are its shape's fields, not a rule's (found in the browser). */
+                    sizeRuled: ['x', 'y', 'z'].every(axis => followOf(parsed, ownerOf(this.selected), axis).of !== 'own')
+                };
+        }
+        catch {
+            held = undefined;
+        }
+        const roomFields = own.filter(i => roomOnly.includes(i.id));
         const status = view.loading
             ? 'figure.text.loading-figure'
             : view.saving
@@ -1284,6 +1943,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             ${i18next.t('figure.label.mode-' + mode)}
           </button>`)}
         <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
+        <span slot="status" release-state>${this.releaseWords(view)}</span>
+        <button slot="commit" publish ?disabled=${!view.id} title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')} @click=${this.goRelease}>${i18next.t('figure.button.release')}</button>
         <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.catalogOpen
@@ -1303,10 +1964,12 @@ let FigureEditor = class FigureEditor extends LitElement {
           slot="start"
           .budget=${this.budget}
           @show-maturity=${() => (this.tab = 'verdict')}
-          .parts=${this.partRows(view.geometry)}
+          .parts=${this.partRows(view.geometry, asset)}
           .partBudget=${this.partBudgetOf(asset)}
           @set-detail-level=${(e) => this.linkCommand({ kind: 'set-detail-level', level: e.detail.level })}
           .selected=${this.selected}
+          .modelName=${view.name ?? ''}
+          @show-model-settings=${() => this.showModelSettings()}
           ?locked=${unavailable}
           @add-part=${(e) => this.add(e.detail.kind)}
           .recipeCount=${this.templates.length}
@@ -1324,12 +1987,25 @@ let FigureEditor = class FigureEditor extends LitElement {
               .asset=${asset}
               .context=${view.context ?? ''}
               .view=${this.view}
+              @configure-size=${async (e) => {
+                this.middle = 'edit';
+                this.selected = e.detail.part;
+                this.tab = 'properties';
+                await this.updateComplete;
+                this.renderRoot.querySelector('figure-links')?.scrollIntoView({ block: 'nearest' });
+            }}
               @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
             ></figure-preview>`
-            : html `<figure-canvas
+            : html `<div middle>
+          ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
+          <figure-canvas
+          ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
           .parts=${this.drawnParts(view.geometry, asset)}
+          .anchors=${this.anchorsOf(asset)}
           .fan=${this.fanOf(asset)}
+          .ghost=${this.previewShown().ghost}
+          .highlight=${this.previewShown().highlight}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
@@ -1339,7 +2015,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           @render-error=${(e) => {
                 this.error = e.detail.message;
             }}
-        ></figure-canvas>`}
+        ></figure-canvas></div>`}
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
@@ -1368,7 +2044,8 @@ let FigureEditor = class FigureEditor extends LitElement {
                     ${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.renderGroups(this.withSizeRow(groupFields(partFields, this.selected), held), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable), held)}
+                  ${roomFields.length ? this.renderRoomOnly(roomFields, unavailable) : nothing}
                   ${this.renderLinks(unavailable, 'shape')}
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
@@ -1377,7 +2054,15 @@ let FigureEditor = class FigureEditor extends LitElement {
                     @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>
+            : view.geometry.length === 0
+                ? html `${this.renderSubject()}<section empty-figure>
+                    <p>${i18next.t('figure.text.empty-figure-next')}</p>
+                    <details>
+                      <summary>${i18next.t('figure.label.figure-info-later')}</summary>
+                      <slot name="figure"></slot>
+                    </details>
+                  </section>`
+                : html `${this.renderSubject()}<slot name="figure"></slot>
                   ${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
                   ${this.renderInstanceRange(asset, unavailable)}`}
           </div>
@@ -1406,11 +2091,11 @@ let FigureEditor = class FigureEditor extends LitElement {
       </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) {
+    renderGroups(groups, vectorTitle, singleTitle, unavailable, tools = null, held) {
         return html `${groups.vectors.length || tools
             ? html `<section>
           <h3>${i18next.t(vectorTitle)}</h3>
-          ${groups.vectors.map(g => this.renderVector(g, unavailable))}
+          ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
           ${tools ? html `<div vector-row><label>${i18next.t('figure.label.tools')}</label>${tools}</div>` : nothing}
         </section>`
             : nothing}
@@ -1421,14 +2106,38 @@ let FigureEditor = class FigureEditor extends LitElement {
         </section>`
             : nothing}`;
     }
-    renderVector(group, unavailable) {
+    /**
+     * A box-like part's size row stands when a rule sets every side -- each following the figure's size -- with the
+     * numbers the rule gives, as its position and turn rows do (designer 2026-09-27: not a blank, not gone).
+     */
+    withSizeRow(groups, held) {
+        if (groups.vectors.some(v => v.kind === 'vector' && v.name === 'size'))
+            return groups;
+        if (!held?.sizeRuled || !held.size || held.size.length !== 3 || held.size.some(v => v === undefined))
+            return groups;
+        const at = groups.vectors.findIndex(v => v.kind === 'vector' && v.name === 'rotation');
+        const vectors = [...groups.vectors];
+        vectors.splice(at < 0 ? vectors.length : at + 1, 0, { kind: 'vector', name: 'size', cells: {} });
+        return { ...groups, vectors };
+    }
+    renderVector(group, unavailable, held) {
         if (group.kind !== 'vector')
             return nothing;
-        const unit = group.cells.x.unit === 'deg' ? '°' : group.cells.x.unit;
+        const unit = group.name === 'rotation' ? '°' : 'mm';
+        const ruled = ['x', 'y', 'z'].filter(axis => !group.cells[axis]);
+        const given = (axis) => {
+            const v = held?.[group.name]?.[['x', 'y', 'z'].indexOf(axis)];
+            return v === undefined || !Number.isFinite(v) ? '—' : String(Math.round(v * 10) / 10);
+        };
         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>
+        ${['x', 'y', 'z'].map(axis => !group.cells[axis]
+            ? html `<div cell held title=${i18next.t('figure.text.axis-held-by-rule')}>
+                <span axis>${axis.toUpperCase()}</span>
+                <input type="text" readonly .value=${given(axis)} aria-label=${`${group.name}.${axis} · ${i18next.t('figure.text.axis-held-by-rule')}`} />
+              </div>`
+            : 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}
@@ -1441,7 +2150,60 @@ let FigureEditor = class FigureEditor extends LitElement {
             />
           </div>`)}
       </div>
-    </div>`;
+    </div>
+    ${ruled.length ? html `<p hint held-axes>${i18next.t('figure.text.axes-held-by-rule', { group: i18next.t('figure.label.group-' + group.name), axes: ruled.map(a => a.toUpperCase()).join(' · ') })}</p>` : nothing}`;
+    }
+    /**
+     * A part's fields only the declared room still reads (ADR-0097, designer 2026-09-27): shown as what they are and not
+     * typed into -- they move nothing. Declaring the room again is offered; nothing is deleted or widened on the way.
+     */
+    renderRoomOnly(fields, unavailable) {
+        return html `<section room-only>
+      <h3>${i18next.t('figure.label.room-only-inputs')}</h3>
+      <p hint>${i18next.t('figure.text.room-only-inputs')}</p>
+      <div form>
+        ${fields.map(f => html `<span>${fieldWordsOf(f.id, key => i18next.t(key))} (${f.unit})</span><input aria-label=${f.id} type="number" .value=${String(f.value)} disabled />`)}
+      </div>
+      <button act room-refit ?disabled=${unavailable} @click=${() => this.askRoomRefit()}>${i18next.t('figure.button.room-refit')}</button>
+    </section>`;
+    }
+    /** The room as declared and as proposed, and what lies outside each as measured, before the author confirms. */
+    async askRoomRefit() {
+        let refit;
+        try {
+            refit = figureRoomRefitOf(parseFigureAsset(this.session.source()));
+        }
+        catch (error) {
+            this.error = this.said(error);
+            return;
+        }
+        if (!refit)
+            return;
+        const rows = roomRefitRowsOf(refit);
+        const outside = (list) => list.length
+            ? list.map(o => i18next.t('figure.text.room-part-outside', { part: partLabelOf(o.part), axis: o.axis.toUpperCase(), mm: String(o.mm) })).join(' · ')
+            : i18next.t('figure.text.room-nothing-outside');
+        const agreed = await OxPrompt.open({
+            type: 'question',
+            title: i18next.t('figure.label.room-refit'),
+            template: html `<table room-refit>
+          <tr><th></th><th>${i18next.t('figure.label.room-declared')}</th><th>${i18next.t('figure.label.room-proposed')}</th></tr>
+          ${rows.map(r => html `<tr>
+              <td>${i18next.t(`figure.label.room-at-${r.at}`)} ${r.axis.toUpperCase()}</td>
+              <td>${r.declared}</td>
+              <td>${r.same ? i18next.t('figure.text.room-same') : r.proposed}</td>
+            </tr>`)}
+        </table>
+        <p>${i18next.t('figure.label.room-declared')}: ${outside(refit.outside.declared)}</p>
+        <p>${i18next.t('figure.label.room-proposed')}: ${outside(refit.outside.proposed)}</p>
+        ${refit.drops.length
+                ? html `<p>${i18next.t('figure.text.room-drops', { fields: [...new Set(refit.drops.map(id => `${partLabelOf(id.split('.')[0])} ${fieldWordsOf(id, key => i18next.t(key))}`))].join(' · ') })}</p>`
+                : nothing}`,
+            confirmButton: { text: i18next.t('figure.button.room-refit-confirm') },
+            cancelButton: { text: i18next.t('figure.button.keep-editing') }
+        });
+        if (agreed)
+            this.linkCommand(refit.step);
     }
     renderSingle(name, field, unavailable) {
         const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
@@ -1461,6 +2223,10 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "session", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "releaseState", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Array)
@@ -1537,6 +2303,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "view", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "aiDraft", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -1545,6 +2315,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "live", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "preview", void 0);
 FigureEditor = FigureEditor_1 = __decorate([
     customElement('figure-editor')
 ], FigureEditor);