@things-factory/figure-ui 10.1.204 → 10.1.205

package/dist-client/modeller/editor.js

@@ -7,7 +7,7 @@ import { openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
+import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditOf, figureSizeEditorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -28,7 +28,8 @@ import './figure-preview.js';
 import './figure-settings.js';
 import { DEFAULT_VIEW } from '@things-factory/figure-viewer/dist-client/figure-view.js';
 import './figure-capability-panel.js';
-import { gizmoChanges, gizmoReachOf } from './gizmo.js';
+import { gizmoChanges, gizmoReachOf, sizeKeepOf } from './gizmo.js';
+import { keptBySizeOf, partsAtFrame, SIZE_KEEPS_WORDS, startSizeDrag, throughPlaneOf } from './size-drag.js';
 import { ModellerKeys } from './modeller-keys.js';
 import { PaneFold } from './pane-fold.js';
 import { PanelMemory } from './panel-memory.js';
@@ -50,7 +51,8 @@ import { nudgeOf, placementOf } from './stage-model.js';
 import { occupancyFromParts, roomRefitRowsOf } from './occupancy.js';
 import { gateFindingStyles, renderGateFinding } from './gate-findings.js';
 import { editRefusalOf, inDeclaredRoom, narrowingRetryOf, partNameRefusalOf, partRefusalOf, placedRefusalOf, recipeRefusalOf, removalNoticeOf } from './refusals.js';
-import { endPlaceKeyOf, fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
+import { HelpToggles } from './help.js';
+import { endPlaceKeyOf, fieldWordsOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
 import { jointFanOf } from './joint-fan.js';
 import { derivedOf } from './revision.js';
 import { jointDragOf } from './joint-drag.js';
@@ -76,14 +78,16 @@ let FigureEditor = class FigureEditor extends LitElement {
         /** Why the last recipe was refused, in the kernel's words. */
         this.recipeError = '';
         this.revision = 0;
+        /** The 「?」 beside a group's title and the sentence it opens. */
+        this.help = new HelpToggles(this);
         this.selected = '';
         this.error = '';
         this.tab = 'properties';
         /**
-         * The fastening window open for the selected part (user 2026-10-17): chosen there, applied once. It stands over the
-         * side panel, not over the canvas, so what is chosen is seen in 3D as it is chosen (user 2026-10-19: the standard
-         * popup, always modal, covered the preview). It closes with nothing written when the part, the tab, the middle or a
-         * bar panel changes under it.
+         * The fastening window open for the selected part (user 2026-10-17), in the standard popup, moved by its head
+         * (2026-10-18; put back 2026-10-20 -- the side panel it was moved to could not be moved), with no backdrop, so the
+         * canvas can be pressed while it is open: chosen there, applied once. It closes with nothing written when the part,
+         * the tab or the middle changes under it.
          */
         this.fastening = false;
         /** Why the window's 「적용」 was refused, said in it. */
@@ -145,7 +149,6 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.panelMemory = new PanelMemory(() => this.renderRoot);
         /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
         this.previewMounted = false;
-        this.lastAnchors = {};
         /** Data tried in the data tab, given to the preview's figures as their `data`; null when none is (ADR-0051 §8). */
         this.dataSample = null;
         /*
@@ -221,7 +224,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 ? '' : ' · ' + (tool.mode === 'scale' && this.sizeDragTurned(this.asset(), this.selected) ? this.sizeDragRefusalOf(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('figure.text.gizmo-not-own')}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -263,7 +266,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (_changed.has('selected'))
             this.gizmoMode = undefined;
         /* The window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
-        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit' || this.overlay))
+        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit'))
             this.closeFastening();
         /*
          * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
@@ -296,15 +299,10 @@ let FigureEditor = class FigureEditor extends LitElement {
     useGizmo(mode) {
         /*
           R does what the bar's resize tool does: on a part whose size is not its own to drag the tool is off, so no gizmo is
-          put on it to drag in vain (:3300, 10.1.196) -- the tool's own words are said instead, and a part turned is sent to
-          its size fields.
+          put on it to drag in vain (:3300, 10.1.196) -- the tool's own words are said instead.
         */
         if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale' && !this.reachOf(this.selected).scale) {
-            const asset = this.asset();
-            if (asset && this.sizeDragTurned(asset, this.selected))
-                this.tellSizeByFields(this.selected);
-            else
-                this.refusals.say(i18next.t('figure.text.gizmo-not-own'));
+            this.refusals.say(i18next.t('figure.text.gizmo-not-own'));
             return;
         }
         this.renderRoot.querySelector('figure-canvas')?.gizmo(mode);
@@ -333,6 +331,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         finally {
             /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
             this.live = NOTHING_LIVE;
+            this.sizing = undefined;
         }
     }
     /** The bodies drawn with the value in hand, or null when nothing is in hand (or the figure cannot take it). */
@@ -342,7 +341,8 @@ let FigureEditor = class FigureEditor extends LitElement {
     /** 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, live) {
         const parts = live ?? drawableFigureParts(geometry ?? []);
-        return parts.filter(body => !this.hiddenParts.has(ownerOf(body.id)));
+        const frame = this.sizing?.frame;
+        return (frame ? partsAtFrame(parts, frame.moved) : 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
@@ -560,64 +560,45 @@ let FigureEditor = class FigureEditor extends LitElement {
             return none;
         try {
             const asset = this.shown().asset;
-            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;
+            /* Turned any way, fastened or not: a size drag is drawn from figure-model's one size function, frame by frame (ADR-0140 4.4). */
+            return gizmoReachOf(asset, id);
         }
         catch {
             return none;
         }
     }
     /**
-     * Whether this part's size is its own to drag but the drag is withheld because it is turned: then the size fields are
-     * the way, and the notice says so. A part whose size is worked out from another part or from the figure's size is not
-     * its own to drag at all; it is not told it is attached turned, nor sent to fields it cannot type in (:3300,
-     * 2026-10-19, the fan's blade-2). Its tool says it is placed by something else, as before.
+     * A size drag in hand, a frame of it: the sizes the handle comes to, through figure-model's size function and the
+     * evaluator stepped to them, drawn and written nowhere (ADR-0140 4.4). Begun at the first frame, from the figure as it
+     * is drawn and the handle the scene says was held; the release writes the last frame's changes.
      */
-    sizeDragTurned(asset, id) {
-        try {
-            return gizmoReachOf(asset, id).scale && this.sizeDragUnsure(asset, id);
-        }
-        catch {
-            return false;
-        }
-    }
-    /** Whether a size drag on this part could not show what is written: figure-model gives no face it keeps. */
-    sizeDragUnsure(asset, id) {
+    resizing(id, result) {
+        const part = ownerOf(id);
+        const shown = this.shown();
+        if (!shown || !result.scale)
+            return;
         try {
-            return !figureScaleAnchorOf(asset, ownerOf(id));
+            const drawn = drawableFigureParts(this.session.read().geometry ?? []);
+            if (this.sizing?.part !== part)
+                this.sizing = { part, drag: startSizeDrag(shown.asset, part, shown.inputs, sizeKeepOf(result.grab)), through: throughPlaneOf(shown.asset, drawn, part) };
+            const sizes = gizmoChanges(id, this.reachOf(id), { scale: result.scale }, { ...shown.inputs });
+            this.sizing = { ...this.sizing, frame: this.sizing.drag.frame(sizes) };
         }
         catch {
-            return true;
+            /* A size the figure cannot take on the way: the figure as it stands is drawn, and the release says why. */
+            this.sizing = undefined;
         }
     }
     /**
-     * Why this part's size is not dragged, in one line (user 2026-10-19: the reason told the faces kept, and was not
-     * understood): attached turned or twisted, or turned off its upright.
+     * A free part a size change takes past the mounting plane: said, with 「…에 붙이기」 to fasten it there (ADR-0140 5). The
+     * size rule is not changed for it: what the author picks is the fastening, one step of the history.
      */
-    sizeDragRefusalOf(id) {
-        const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(id));
-        return i18next.t(fastened ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-size-tilted', { part: partLabelOf(id) });
-    }
-    /** The size drag refused, said as a notice with the way to the part's size fields. */
-    tellSizeByFields(id) {
-        this.refusals.point(this.sizeDragRefusalOf(id), { label: i18next.t('figure.button.to-size-fields'), run: () => this.toSizeFields(id) });
-    }
-    /** To the part's first size field it takes typed, on the properties tab, ready to type over. */
-    async toSizeFields(id) {
-        this.middle = 'edit';
-        this.tab = 'properties';
-        this.selected = id;
-        await this.updateComplete;
-        const field = this.renderRoot.querySelector('[slot="size"] input:not([disabled]):not([readonly])');
-        field?.focus();
-        field?.select();
+    tellThroughPlane(part, mm) {
+        const plane = i18next.t('figure.label.resize-place-' + (this.asset()?.placement ?? 'floor'));
+        this.refusals.point(i18next.t('figure.text.size-through-plane', { part: partLabelOf(part), plane, mm: String(mm) }), {
+            label: i18next.t('figure.button.fasten-to-plane', { plane }),
+            run: () => this.run(() => this.session.command({ kind: 'attach', part, to: { plane: 'mounting-plane' } }))
+        });
     }
     /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
     transformed(id, result) {
@@ -645,21 +626,22 @@ 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));
-        /* 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.sizeDragTurned(asset, id)) {
-            this.tellSizeByFields(id);
-            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).
+          A size dragged is written as its last frame was drawn: figure-model's one size function, keeping the side opposite
+          the handle held -- or, fastened, its fastening (ADR-0140 4.1 · 4.4). What the scene put the part at is not read.
         */
         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;
+        const drawnLast = this.sizing?.part === ownerOf(id) ? this.sizing.frame : undefined;
+        const changes = !scaled ? written : drawnLast ? drawnLast.changes : figureSizeEditOf(asset, ownerOf(id), written, sizeKeepOf(result.grab)).changes;
         if (changes.length) {
+            const through = scaled ? (this.sizing?.part === ownerOf(id) ? this.sizing.through : undefined) ?? throughPlaneOf(asset, drawableFigureParts(view.geometry), ownerOf(id)) : 0;
             this.run(() => this.session.apply(changes));
+            /* Taken past the mounting plane by the size it was given: said with how far, once it is written, and the way to fasten it (ADR-0140 5). */
+            const now = scaled ? throughPlaneOf(this.shown().asset, drawableFigureParts(this.session.read().geometry ?? []), ownerOf(id)) : 0;
+            if (now > through + 0.5)
+                this.tellThroughPlane(ownerOf(id), now);
             return;
         }
         if (jointed && result.scale) {
@@ -859,6 +841,7 @@ let FigureEditor = class FigureEditor extends LitElement {
               ${groups.singles.length
                 ? html `<div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
                 : nothing}
+              ${this.renderSizeKeeps()}
             </div>`
             : nothing}
         ${place.length && !placeLocked
@@ -942,26 +925,6 @@ let FigureEditor = class FigureEditor extends LitElement {
         return html `${panel('view', 'figure.label.tab-environment', html `<figure-settings .view=${this.view} @update-view=${(e) => this.setView(e.detail.view)}></figure-settings>`)}
       ${panel('history', 'figure.button.release', html `<slot name="history"></slot>`)}`;
     }
-    /**
-     * 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) {
         const asset = this.shown()?.asset;
@@ -1049,10 +1012,16 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     changeField(field, event) {
         const input = event.target, value = input.valueAsNumber;
-        /* 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. */
+        /* A number typed keeps the part's middle, or its fastening -- figure-model's one size function (ADR-0140 4.1). */
         const part = this.selected;
         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(this.shown().asset, part, [change]) : [change]));
+        const asset = this.shown()?.asset;
+        const before = asset && part ? throughPlaneOf(asset, drawableFigureParts(this.session.read().geometry ?? []), part) : 0;
+        this.run(() => this.session.apply(field.role !== 'state' && part ? figureSizeEditOf(this.shown().asset, part, [change], { keep: 'centre' }).changes : [change]));
+        /* Typed past the mounting plane: said, with the way to fasten it there (ADR-0140 5). */
+        const after = asset && part && field.role !== 'state' ? throughPlaneOf(this.shown().asset, drawableFigureParts(this.session.read().geometry ?? []), part) : 0;
+        if (after > before + 0.5)
+            this.tellThroughPlane(part, after);
         // Rejected edits must also restore the displayed numeric value.
         input.value = String(this.session.read().fields.find(i => i.id === field.id).value);
     }
@@ -1060,7 +1029,25 @@ let FigureEditor = class FigureEditor extends LitElement {
     typing(field, event) {
         const value = event.target.valueAsNumber;
         if (Number.isFinite(value))
-            this.hold({ [field.id]: value });
+            this.hold(this.heldOf(field, value));
+    }
+    /**
+     * The values in hand for a number typed or scrubbed: what its release writes -- a size with the part's middle kept,
+     * or its fastening (figure-model's one size function, ADR-0140 4.1), so the figure does not jump on the release.
+     */
+    heldOf(field, value, sized) {
+        const part = this.selected;
+        const asset = this.shown()?.asset;
+        if (field.role === 'state' || !part || !asset)
+            return { [field.id]: value };
+        const change = { kind: 'set-design', input: field.id, unit: field.unit ?? 'mm', value };
+        try {
+            const { changes } = sized ? sized([change], { keep: 'centre' }) : figureSizeEditOf(asset, part, [change], { keep: 'centre' });
+            return Object.fromEntries(changes.map(c => [c.input, c.value]));
+        }
+        catch {
+            return { [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
@@ -1077,10 +1064,18 @@ let FigureEditor = class FigureEditor extends LitElement {
         label.setPointerCapture(down.pointerId);
         const start = field.value;
         let value = start;
+        /* Prepared once for the scrub: each move is a size through the same function its release writes with. */
+        const asset = this.shown()?.asset;
+        const sized = asset && this.selected && field.role !== 'state' ? (() => { try {
+            return figureSizeEditorOf(asset, this.selected);
+        }
+        catch {
+            return undefined;
+        } })() : undefined;
         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 });
+            this.hold(this.heldOf(field, value, sized));
         };
         const up = (e) => {
             label.removeEventListener('pointermove', move);
@@ -1125,26 +1120,33 @@ let FigureEditor = class FigureEditor extends LitElement {
             return { of, toDeclare };
         });
         const range = measured.of;
-        /* No size yet: the figure is declared its size from its parts, so a board can resize it and parts can follow it. */
+        /*
+          In words a person reads (user 2026-10-19/20): what the figure does on a drawing, not the inputs behind it. Fixed,
+          it says the size it is always drawn at; resizable, the sizes it may take on each axis and the parts that change
+          with it. The way to it stays one press -- a figure no part follows (a robot scaled whole) reaches the one-ratio
+          rule only from here -- and the help mark says how parts are made to follow.
+        */
+        const mm = (v) => Math.round(v).toLocaleString();
         const toDeclare = measured.toDeclare;
+        const title = (explained) => html `<h3>${i18next.t('figure.label.board-size')}${this.help.button(explained)}</h3>${this.help.hint(explained)}`;
         if (!range && toDeclare)
-            return html `<section>
-        <h3>${i18next.t('figure.label.instance-range')}</h3>
-        <p hint>${i18next.t('figure.text.instance-size-undeclared')}</p>
+            return html `<section board-size>
+        ${title('figure.text.board-size-fixed-explained')}
+        <p fixed-size>${i18next.t('figure.text.board-size-fixed', { x: mm(toDeclare.at.x), y: mm(toDeclare.at.y), z: mm(toDeclare.at.z) })}</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')}
+          <md-icon>open_in_full</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>
+        const followers = sizeFollowersOf(asset);
+        return html `<section board-size>
+      ${title('figure.text.board-size-range-explained')}
       ${['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
+          <label>${i18next.t('figure.label.resize-' + axis)} <span unit>mm</span></label>
+          <div pair range>
+            ${['min', 'max'].map((bound, i) => html `${i ? html `<span dash aria-hidden="true">–</span>` : nothing}<input
                 aria-label=${`size.${axis}.${bound}`}
                 type="number"
                 step="any"
@@ -1158,6 +1160,13 @@ let FigureEditor = class FigureEditor extends LitElement {
               />`)}
           </div>
         </div>`)}
+      <p followers>
+        ${followers.length
+            ? i18next.t('figure.text.board-size-followers', {
+                parts: followers.length > 4 ? i18next.t('figure.text.board-size-followers-more', { first: followers.slice(0, 4).join(', '), rest: String(followers.length - 4) }) : followers.join(', ')
+            })
+            : i18next.t('figure.text.board-size-no-followers')}
+      </p>
       ${differs
             ? html `<p hint>
               ${i18next.t('figure.text.instance-range-can-widen', {
@@ -1504,46 +1513,51 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.openFastening();
     }
     openFastening() {
-        if (!this.selected || this.fastening)
+        if (!this.selected || this.fastenPopup)
             return;
         this.fastenError = '';
         this.fastenHover = null;
-        /* One panel over the side at a time: the view or the history gives way to the window. */
-        this.overlay = undefined;
         this.fastening = true;
+        const content = document.createElement('figure-fasten-dialog');
+        content.addEventListener('preview-command', e => this.commandPreview.ask(e.detail));
+        content.addEventListener('fasten-hover', e => this.hoverFastening(e.detail));
+        content.addEventListener('fasten-apply', e => this.applyFastening(e.detail.action));
+        content.addEventListener('fasten-cancel', () => this.closeFastening());
+        this.fastenWindow = content;
+        this.tellFastening();
+        /* No backdrop: the canvas stays reachable while it is open -- a part pressed there is aimed at (ADR-0140 stage 4). */
+        const popup = openPopup(html `${content}`, { title: i18next.t('figure.label.fastening'), size: 'fit', backdrop: false, movable: true, closable: true, escapable: true });
+        this.fastenPopup = popup;
+        /* Closed by its own X or Esc as well: the editor lets go of it the same way. */
+        popup.result.then(() => this.fastenPopup === popup && this.fastenClosed());
     }
     closeFastening() {
+        const popup = this.fastenPopup;
+        this.fastenClosed();
+        popup?.close();
+    }
+    fastenClosed() {
+        this.fastenPopup = undefined;
+        this.fastenWindow = undefined;
         this.fastening = false;
         this.fastenError = '';
         this.fastenHover = null;
     }
-    /**
-     * The fastening window over the side panel, as the bar's panels stand there: the figure on screen, the part, and what
-     * the preview and a refusal said are the editor's. Its own Esc and 「취소」 close it, as its X does.
-     */
-    renderFastening(unavailable) {
-        if (!this.fastening || !this.selected)
-            return nothing;
-        return html `<div side-overlay fasten-panel>
-      <div overlay-head>
-        <h3>${i18next.t('figure.label.fastening')}</h3>
-        <button quiet fasten-close aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${() => this.closeFastening()}>
-          <md-icon>close</md-icon>
-        </button>
-      </div>
-      <figure-fasten-dialog
-        overlay-body
-        .revision=${this.shown()}
-        .partId=${this.selected}
-        ?locked=${unavailable}
-        .previewWords=${this.commandPreview.words()}
-        .error=${this.fastenError}
-        @preview-command=${(e) => this.commandPreview.ask(e.detail)}
-        @fasten-hover=${(e) => this.hoverFastening(e.detail)}
-        @fasten-apply=${(e) => this.applyFastening(e.detail.action)}
-        @fasten-cancel=${() => this.closeFastening()}
-      ></figure-fasten-dialog>
-    </div>`;
+    /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+    tellFastening() {
+        const content = this.fastenWindow;
+        const view = this.session?.read();
+        if (!content || !view)
+            return;
+        content.revision = this.shown();
+        content.partId = this.selected;
+        content.locked = view.loading || !!view.error || view.saving || !view.context;
+        content.previewWords = this.commandPreview.words();
+        content.error = this.fastenError;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closeFastening();
     }
     /** 「적용」: the command, one step; refused, the window stays open and says why. */
     applyFastening(action) {
@@ -1606,15 +1620,16 @@ let FigureEditor = class FigureEditor extends LitElement {
         return this.shown()?.asset;
     }
     /** 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) {
+    renderTab(tab, icon, label) {
         /* 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>`}
+      <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>
     </button>`;
     }
     updated(changed) {
         super.updated?.(changed);
+        this.tellFastening();
         /* Nothing blocks release any more: the list under the bar closes, and opens fresh when something does again. */
         if (changed.has('releaseBlockers') && !this.releaseBlockers.length && this.blockersOpen)
             this.blockersOpen = false;
@@ -1641,7 +1656,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             return nothing;
         const asset = this.asset();
         const measures = figureSectionMeasuresOf(asset, this.selected);
-        const kept = figureScaleAnchorOf(asset, this.selected)?.[drawn.axis];
+        /* What a measure typed here keeps: the part's middle, or its fastening (ADR-0140 4.1). */
+        const kept = keptBySizeOf(asset, this.selected);
         return html `<figure-section-editor
       .body=${{ ...part, id: this.selected }}
       .measures=${measures}
@@ -1793,13 +1809,12 @@ let FigureEditor = class FigureEditor extends LitElement {
             held = undefined;
         }
         const roomFields = own.filter(i => roomOnly.includes(i.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';
+        /*
+          Only what is under way is said. Saved or not is the save button's: filled and pressable when there is something
+          to save, dimmed when not -- the saved and unsaved words beside it said the same thing again in the primary
+          colour, read as a button (screen copy rule: a state is the control's).
+        */
+        const status = view.loading ? 'figure.text.loading-figure' : view.saving ? 'figure.text.saving-figure' : '';
         /*
           A figure with no parts yet is not one that failed: what blocks its release is said once it has something to
           release (first 15 minutes, 2026-10-16 evening -- red from the first click read as a failure). The verdict tab
@@ -1825,7 +1840,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         ${['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>
+        ${status ? html `<span slot="status" class="status" role="status">${i18next.t(status)}</span>` : nothing}
         <span slot="status" release-state>${this.releaseWords(view)}</span>
         ${blockers.length
             ? html `<button slot="commit" release-blocked aria-expanded=${String(this.blockersOpen)} @click=${() => (this.blockersOpen = !this.blockersOpen)}>
@@ -1907,7 +1922,6 @@ let FigureEditor = class FigureEditor extends LitElement {
           <figure-canvas
           .view=${this.view}
           .parts=${this.drawnParts(view.geometry, live)}
-          .anchors=${this.anchorsOf(asset)}
           .fan=${this.fanOf(shown, live)}
           .ghost=${this.previewShown().ghost}
           .highlight=${this.previewShown().highlight}
@@ -1915,9 +1929,12 @@ let FigureEditor = class FigureEditor extends LitElement {
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
+          ?aiming=${this.fastening}
           .reach=${unavailable ? { translate: false, rotate: false, scale: false } : this.reachOf(this.selected)}
+          @part-sizing=${(e) => this.resizing(e.detail.id, e.detail.result)}
           @part-transformed=${(e) => this.transformed(e.detail.id, e.detail.result)}
           @part-selected=${(e) => this.choose(e.detail)}
+          @part-aimed=${(e) => this.fastenWindow?.aimAt?.(e.detail)}
           @render-error=${(e) => {
             this.error = e.detail.message;
         }}
@@ -1929,7 +1946,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
             ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
             ${this.renderTab('data', 'sensors', i18next.t('figure.label.tab-data'))}
-            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
+            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'))}
           </div>
           <slot name="notice"></slot>
           <div panel ?off=${tab !== 'properties'}>
@@ -2005,7 +2022,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
         </aside>
       </ox-three-pane>
-      ${this.renderOverlay()} ${this.renderFastening(unavailable)}`;
+      ${this.renderOverlay()}`;
     }
     /** 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, held) {
@@ -2076,6 +2093,12 @@ let FigureEditor = class FigureEditor extends LitElement {
      * rule" named nothing): a fastened part's place and turn are its fastening's; other numbers are worked out from
      * something else. A size that follows something is said at the panel's head, so not again here.
      */
+    /** What a size typed keeps, under the size fields: the part's middle, where it is fastened, or only its size (ADR-0140 4.1). */
+    renderSizeKeeps() {
+        const asset = this.asset();
+        const kept = asset && this.selected ? keptBySizeOf(asset, this.selected) : undefined;
+        return kept ? html `<p hint size-keeps>${i18next.t(SIZE_KEEPS_WORDS[kept])}</p>` : nothing;
+    }
     renderHeldAxes(vectors) {
         const fastened = !!(this.asset())?.joints?.some(j => j.body1.part === ownerOf(this.selected));
         const held = vectors.filter(g => g.kind === 'vector' && g.name !== 'size' && ['x', 'y', 'z'].some(axis => !g.cells[axis]));
@@ -2196,10 +2219,6 @@ __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)
@@ -2284,6 +2303,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "live", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "sizing", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)