@things-factory/figure-ui 10.1.81 → 10.1.82

package/dist-client/modeller/figure-links.js

@@ -3,8 +3,8 @@ import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { FIGURE_FACES } from '@hatiolab/figure-model';
-import { acceptsOf, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, positionsWorkedOut } from './links.js';
+import { FIGURE_FACES, planFigureResize } from '@hatiolab/figure-model';
+import { acceptsOf, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, resizeAxesOf, fieldWordsOf, measureNow } from './links.js';
 import { SidePanelStyles } from './side-panel-styles.js';
 import { HelpToggles } from './help.js';
 const FACES = Object.keys(FIGURE_FACES);
@@ -17,7 +17,8 @@ const freshFasten = () => ({
     gap: 0,
     twist: 0,
     align: {},
-    alignMm: {}
+    alignMm: {},
+    alignInput: {}
 });
 const freshMotion = () => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 });
 const freshRow = () => ({ axis: '', pitch: 200, fills: true, count: 5 });
@@ -44,6 +45,23 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.locked = false;
         /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
         this.section = 'shape';
+        /** What the fastening command would do, in words (the editor works it out: `command-preview.ts`). */
+        this.previewWords = [];
+        /** Where the selected part's motion takes it, at both ends of its range (the editor draws them on the canvas). */
+        this.motionEnds = null;
+        /** Past the edge of the face it is fastened to, or parts fastened to it past theirs (ADR-0097 §5.5, Q3). */
+        this.overhangWords = [];
+        /** Wider than the face it is fastened to: how far past each edge, and whether off to one side -- a fact, not a warning. */
+        this.overhangNote = [];
+        /** What taking this part off would do, said beside the buttons that do it (worked out on a copy by the editor). */
+        this.detachWords = [];
+        this.told = '';
+        /* Two forms describe a command here: the fastening and the row. The one being worked on is the one seen. */
+        this.working = 'fasten';
+        /** The directions ticked for "follow the size, attached", per part, once the author has ticked or fixed any. */
+        this.pendingAxes = {};
+        /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
+        this.spotlit = false;
         this.fasten = freshFasten();
         this.motion = freshMotion();
         this.place = freshPlace();
@@ -68,6 +86,30 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
     b[bound] {
       font-weight: 600;
     }
+    /* What each direction does now: read-only rows. */
+    div[resize-now] { display: grid; gap: 4px; margin: 12px 0; }
+    div[resize-now] div[row] { grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; }
+    div[resize-now] span[measure] { font-variant-numeric: tabular-nums; }
+    button[link] { background: none; border: none; padding: 0; color: var(--md-sys-color-primary, #477b9e); text-decoration: underline; cursor: pointer; font: inherit; }
+    /* What will be applied: a pending choice, boxed apart from the rows above. */
+    fieldset[resize-pending] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--border-color, #8888); border-radius: 6px; }
+    fieldset[resize-pending] label { display: flex; align-items: center; gap: 6px; }
+    fieldset[resize-pending] small { opacity: 0.7; }
+    div[resize-held] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
+    div[resize-held] p { margin: 0; display: flex; align-items: center; gap: 6px; }
+    p[fasten-mode] { margin: 0; font-weight: 600; }
+    p[fasten-mode][editing] { color: var(--md-sys-color-primary, #477b9e); }
+    section[fastening][spotlit] { outline: 2px solid var(--md-sys-color-primary, #477b9e); outline-offset: 4px; border-radius: 6px; transition: outline-color 0.3s; }
+    details { margin-top: 14px; }
+    summary { cursor: pointer; padding: 8px 0; }
+    /* What the command would do, said beside the result drawn on the canvas. */
+    ul[preview-words] { margin: 10px 0; padding: 8px 12px 8px 26px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); display: grid; gap: 4px; }
+    div[row-basis] { display: grid; gap: 4px; margin: 8px 0; }
+    div[row-basis] label { display: flex; align-items: center; gap: 6px; }
+    div[overhang] { display: grid; gap: 6px; margin: 8px 0; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--md-sys-color-outline-variant, #8884); }
+    div[overhang] p { margin: 0; }
+    ul[detach-words] { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 2px; font-size: 0.8rem; opacity: 0.85; }
+    span[fasten-summary] { opacity: 0.8; }
     /* The difference a following measure keeps: under its choice, on the same line as its words. */
     label[inline-plus] {
       display: flex;
@@ -79,12 +121,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
       min-width: 0;
     }
   `]; }
-    /*
-      The forms describe the next command for the selected part, so another part starts from the defaults: carrying the
-      last part's choices over fastened a shutter curtain level with a right edge nobody chose for it (2026-09-25).
-    */
-    willUpdate(changed) {
-        if (changed.has('partId') && changed.get('partId') !== undefined) {
+    willUpdate(_changed) {
+        if (this.asset && this.partId && this.partId !== this.loadedFor) {
+            this.loadedFor = this.partId;
             /* A part's own fastening is not another part's choices: the form opens on it (walk 1, 2026-09-26). */
             const own = this.asset && this.partId ? fasteningOf(this.asset, this.partId) : null;
             this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
@@ -94,8 +133,29 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.editingMotion = false;
         }
     }
+    updated() {
+        /* Only the section that holds the fastening form speaks of it: the panel has one of these per section, and the
+           others' silence cleared what it showed (2026-09-27, :3391). */
+        if (this.section !== 'shape' && !this.told)
+            return;
+        const said = JSON.stringify(this.candidate ?? null);
+        if (said === this.told)
+            return;
+        this.told = said;
+        this.dispatchEvent(new CustomEvent('preview-command', { detail: this.candidate ?? null, bubbles: true, composed: true }));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        /* The panel left: what it showed goes with it. */
+        if (this.told && this.told !== 'null')
+            this.dispatchEvent(new CustomEvent('preview-command', { detail: null, bubbles: true, composed: true }));
+        this.told = '';
+    }
     render() {
         const asset = this.asset;
+        this.candidate = undefined;
+        this.fastenCandidate = undefined;
+        this.rowCandidate = undefined;
         if (!asset || !this.partId)
             return nothing;
         if (this.section === 'motion')
@@ -104,18 +164,20 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         if (this.section === 'places')
             return html `<section><h3>${i18next.t('figure.label.places-on-part', { part: this.partId })}${this.help.button('figure.text.place-explained')}</h3>${this.help.hint('figure.text.place-explained')}
         ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html `<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`;
-        return html `
+        const shown = html `
       <section>
-        <h3>${i18next.t('figure.label.dimensions')}</h3>
+        <h3>${i18next.t('figure.label.resize-intent')}</h3>
         ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
-      <section>
+      <section fastening ?spotlit=${this.spotlit} @focusin=${() => (this.working = 'fasten')}>
         <h3>${i18next.t('figure.label.placement')}${this.help.button('figure.text.fastening-explained')}</h3>${this.help.hint('figure.text.fastening-explained')}
         ${this.renderPositions(asset)}
         ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
       ${this.renderRow(asset)}
     `;
+        this.candidate = this.working === 'row' && this.rowCandidate ? { action: this.rowCandidate } : this.fastenCandidate;
+        return shown;
     }
     /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
     renderPlaces(asset) {
@@ -183,16 +245,93 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }));
     }
     renderDimensions(asset) {
+        /*
+          The kernel's plan for "follow the size and keep where the figure is placed" (ADR-0097), with the directions the
+          author ticked below -- a pending choice, drawn apart from the rows above, which only say what each direction does
+          now (designer 2026-09-27: the immediate and the pending are not mixed in one look).
+        */
+        const editable = followableAxes(asset, this.partId);
+        const choice = resizeAxesOf(asset, this.partId, this.pendingAxes[this.partId]);
+        const axes = choice.axes;
+        const plan = planFigureResize(asset, { part: this.partId, axes });
+        const mode = plan.mode;
+        const round = editable.length === 2;
+        const word = (axis) => i18next.t(round && axis === 'x' ? 'figure.label.resize-diameter' : `figure.label.resize-${axis}`);
+        const scope = axes.length && axes.length === editable.length
+            ? i18next.t(`figure.text.resize-scope-all-${editable.length}`)
+            : i18next.t('figure.text.resize-scope-only', { axes: axes.map(word).join(' · ') });
+        const ask = (gap) => this.dispatchEvent(new CustomEvent('resize-with-placement', { detail: { request: { part: this.partId, axes, ...(gap ? { gap } : {}) } }, bubbles: true, composed: true }));
+        const gapChoice = plan.refusal?.code === 'GAP_CHOICE' ? plan.refusal : undefined;
+        /* Brought onto the plane, where it moves -- said on the button before it is pressed. */
+        const onto = gapChoice ? planFigureResize(asset, { part: this.partId, axes, gap: 'plane' }).moves[0] : undefined;
+        const place = i18next.t(`figure.label.resize-place-${mode}`);
+        const tick = (axis, on) => {
+            const next = on ? [...new Set([...axes, axis])] : axes.filter(one => one !== axis);
+            this.pendingAxes = { ...this.pendingAxes, [this.partId]: next };
+        };
         const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one));
-        const round = followableAxes(asset, this.partId).length === 2;
         /* One step for the whole part (figure-model follow-size): the size is declared from the parts if there is none. */
-        const followsAll = followableAxes(asset, this.partId).every(axis => followOf(asset, this.partId, axis).of === 'instance');
+        const followsAll = editable.every(axis => followOf(asset, this.partId, axis).of === 'instance');
         const whole = followsAll
             ? nothing
             : html `<button act follow-size ?disabled=${this.locked} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
           <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
         </button>`;
-        return html `${whole}${followableAxes(asset, this.partId).map(axis => {
+        const held = plan.refusal?.code === 'HELD';
+        return html `<p hint>${i18next.t('figure.text.resize-intent')}</p>
+      ${asset.sizing === 'uniform' ? html `<p hint>${i18next.t('figure.text.resize-uniform-warning')}</p>` : nothing}
+      <div resize-now>${editable.map(axis => {
+            const now = followOf(asset, this.partId, axis);
+            const following = now.of === 'instance' && now.axis === axis;
+            const custom = now.of !== 'own' && !following;
+            const mm = measureNow(asset, this.partId, axis);
+            return html `<div row>
+          <b>${word(axis)}</b>
+          <span measure>${mm === undefined ? '—' : `${Math.round(mm)} mm`}</span>
+          <span>${i18next.t(custom ? 'figure.label.resize-custom' : following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
+          ${following
+                ? html `<button link resize-unfollow=${axis} ?disabled=${this.locked}
+                @click=${() => {
+                    /* Set back to fixed: the author's choice for this part from now on, not a blank to fill with "all". */
+                    this.pendingAxes = { ...this.pendingAxes, [this.partId]: axes.filter(one => one !== axis) };
+                    this.follow(asset, axis, 'own', now);
+                }}>${i18next.t('figure.button.resize-unfollow')}</button>`
+                : nothing}
+        </div>`;
+        })}</div>
+      ${held
+            ? this.renderHeld(asset)
+            : html `<fieldset resize-pending ?disabled=${this.locked || asset.sizing === 'uniform'}>
+            <legend>${i18next.t('figure.label.resize-pending')}</legend>
+            ${editable.map(axis => {
+                const now = followOf(asset, this.partId, axis);
+                const following = now.of === 'instance' && now.axis === axis;
+                const custom = now.of !== 'own' && !following;
+                return html `<label>
+                <input type="checkbox" resize-tick=${axis} .checked=${axes.includes(axis)} ?disabled=${following || custom}
+                  @change=${(e) => tick(axis, e.target.checked)} />
+                ${word(axis)}${following ? html ` <small>${i18next.t('figure.text.resize-already-following')}</small>` : nothing}
+              </label>`;
+            })}
+            <p hint resize-basis>${i18next.t(`figure.text.resize-basis-${choice.basis}`)}</p>
+            <p hint>${i18next.t('figure.text.placement-intent-' + mode)}</p>
+            ${gapChoice
+                ? html `<p hint gap-choice>${i18next.t(gapChoice.mm > 0 ? 'figure.text.resize-gap-off' : 'figure.text.resize-gap-through', { place, mm: String(Math.abs(Math.round(gapChoice.mm * 10) / 10)) })}</p>
+                  <button act resize-keep-gap @click=${() => ask('keep')}>
+                    ${i18next.t(gapChoice.mm > 0 ? 'figure.button.resize-keep-gap' : 'figure.button.resize-keep-through', { scope, mm: String(Math.abs(Math.round(gapChoice.mm * 10) / 10)) })}
+                  </button>
+                  <button act resize-onto-plane @click=${() => ask('plane')}>
+                    ${i18next.t('figure.button.resize-onto-plane-' + mode, { scope })}
+                    ${onto ? html `<small>${i18next.t('figure.text.resize-move', { axis: onto.axis.toUpperCase(), mm: String(Math.round((onto.to - onto.from) * 10) / 10) })}</small>` : nothing}
+                  </button>`
+                : html `<button act resize-with-placement ?disabled=${choice.basis === 'none' || plan.refusal?.code === 'UNIFORM_POLICY'} @click=${() => ask()}>
+                  ${i18next.t('figure.button.resize-scoped-' + mode, { scope })}
+                </button>`}
+            ${!plan.refusal && plan.replaces.length
+                ? html `<p hint resize-replaces>${i18next.t('figure.text.resize-replaces', { fields: [...new Set(plan.replaces.map(id => fieldWordsOf(id, key => i18next.t(key))))].join(' · '), place })}</p>`
+                : nothing}
+          </fieldset>`}
+      <details><summary>${i18next.t('figure.label.resize-advanced')}</summary>${whole}${followableAxes(asset, this.partId).map(axis => {
             const now = followOf(asset, this.partId, axis);
             const value = choiceOf(now);
             /* A cylinder's two measures are its radius and its length; its X and Y name them. */
@@ -226,7 +365,65 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
               </label>`
                 : nothing}
       </div>`;
-        })}`;
+        })}</details>`;
+    }
+    /**
+     * "Open attachment settings": the fastening this part has now -- its face, what it is on, the gap -- in the form below,
+     * brought into view with the focus on it. The form is loaded again first: the part was fastened by "follow size,
+     * attached" while it was selected, so the form still held what it had before (designer 2026-09-27: it opened the
+     * holding places instead).
+     */
+    /** The fastening's details open, focus in them: where the gap and the place across the face are changed. */
+    async openDetail() {
+        const detail = this.renderRoot.querySelector('details[fasten-detail]');
+        if (!detail)
+            return;
+        detail.open = true;
+        this.working = 'fasten';
+        await this.updateComplete;
+        detail.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        detail.querySelector('select, input')?.focus({ preventScroll: true });
+    }
+    /** The fastening form, open on this part and in view: for "fasten it first" from elsewhere. */
+    async showFastening() {
+        if (this.asset)
+            await this.openFastening(this.asset);
+    }
+    async openFastening(asset) {
+        const own = fasteningOf(asset, this.partId);
+        this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
+        this.spotlit = true;
+        await this.updateComplete;
+        const section = this.renderRoot.querySelector('section[fastening]');
+        section?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        (section?.querySelector('select, input') ?? section?.querySelector('button'))?.focus({ preventScroll: true });
+        setTimeout(() => (this.spotlit = false), 1600);
+    }
+    /**
+     * What holds the part, said as its state -- 「아랫면을 바닥에 유지 중」 -- with the ways to change it: open the fastening,
+     * or take it off. Right after "follow size, attached" this is the result, not a refusal (designer 2026-09-27).
+     */
+    renderHeld(asset) {
+        const joint = (asset.joints ?? []).find(j => j.body1.part === this.partId);
+        const face = joint ? i18next.t(`figure.label.face-${joint.body1.face}`) : '';
+        const gap = typeof joint?.origin?.gap === 'number' ? joint.origin.gap : 0;
+        const where = !joint
+            ? i18next.t('figure.text.held-by-rule')
+            : 'plane' in joint.body0
+                ? i18next.t('figure.text.held-on-plane', { face, place: i18next.t(`figure.label.resize-place-${asset.placement ?? 'floor'}`), gap: String(gap) })
+                : i18next.t('figure.text.held-on-part', { face, other: joint.body0.part, otherFace: i18next.t(`figure.label.face-${joint.body0.face}`) });
+        return html `<div resize-held>
+      <p><md-icon>link</md-icon> ${where}</p>
+      <button act open-fastening @click=${() => this.openFastening(asset)}>
+        ${i18next.t('figure.button.open-fastening')}
+      </button>
+      ${joint
+            ? html `<button act detach-held ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
+              ${i18next.t('figure.button.detach-held')}
+            </button>
+            ${this.renderDetachWords()}`
+            : nothing}
+    </div>`;
     }
     /** The same source, the same share, a new difference: a leaf the opening less its gaps (link-dimension's `plus`). */
     followPlus(axis, now, plus) {
@@ -286,13 +483,15 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         const theirFaces = f.target ? facesOf(asset, f.target) : FACES;
         const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0];
         const aim = f.toPlane ? 'plane' : f.target ? { part: f.target, face: targetFace } : undefined;
-        this.fasten = { ...f, ...(aim ? placeKeptOf(asset, this.partId, aim, !!f.twist) : { align: {}, alignMm: {} }) };
+        this.fasten = { ...f, ...(aim ? placeKeptOf(asset, this.partId, aim, !!f.twist) : { align: {}, alignMm: {}, alignInput: {} }) };
     }
     renderFastening(asset) {
         const held = heldBy(asset, this.partId);
         const f = this.fasten;
         /* Not a part that hangs from this one: fastening a frame to its own roller would close a loop. */
-        const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one) && !hangsFrom(asset, one, this.partId));
+        const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one));
+        /* Shown, not dropped, and not choosable, with the reason (ADR-0097 §5.5): fastening it would close a loop. */
+        const loops = (one) => hangsFrom(asset, one, this.partId);
         /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
         /* On the mounting plane only the faces it takes: a bottom or a top on the floor, a back on a wall. */
         const plane = mountingPlaneOf(asset);
@@ -305,15 +504,64 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         const theirFaces = f.target ? facesOf(asset, f.target) : FACES;
         const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0];
         const aim = f.toPlane ? 'plane' : { part: f.target, face: targetFace };
-        const align = f.target || f.toPlane ? alignOf(asset, this.partId, aim, f.align, f.alignMm, !!f.twist) : undefined;
+        const align = f.target || f.toPlane ? alignOf(asset, this.partId, aim, f.align, f.alignMm, !!f.twist, f.alignInput) : undefined;
+        const action = f.toPlane || f.target
+            ? {
+                kind: 'attach',
+                part: this.partId,
+                face: myFace,
+                to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: targetFace },
+                ...(f.toPlane ? {} : { facing: f.facing }),
+                ...(f.gap ? { gap: f.gap } : {}),
+                twist: f.twist,
+                ...(align ? { align } : {}),
+                replace: !!held
+            }
+            : undefined;
+        if (action)
+            this.fastenCandidate = { action, ...(f.toPlane ? {} : { face: { part: f.target, face: targetFace } }) };
+        /* What the details hold that is not their default, and where on the face it sits: said while they are folded. */
+        const detail = [
+            ...(f.facing === 'flush' && !f.toPlane ? [i18next.t('figure.label.facing-flush')] : []),
+            ...Object.entries(align ?? {}).map(([axis, one]) => one === 'min' || one === 'max'
+                ? i18next.t(`figure.text.fasten-summary-edge-${one}`, { axis: axis.toUpperCase() })
+                : typeof one.mm === 'number'
+                    ? i18next.t('figure.text.fasten-summary-off-centre', { axis: axis.toUpperCase(), mm: String(Math.round(one.mm * 10) / 10) })
+                    : i18next.t('figure.text.fasten-summary-follows', { axis: axis.toUpperCase() })),
+            ...(f.gap ? [i18next.t('figure.text.fasten-summary-gap', { mm: String(f.gap) })] : []),
+            ...(f.twist ? [i18next.t('figure.text.fasten-summary-twist', { degrees: String(f.twist) })] : [])
+        ];
+        /*
+          Editing the fastening it has, or fastening it anew: said, with the relation named, so the form is not taken for a
+          blank new one while it holds the current (designer 2026-09-27). Applied unchanged, the same fastening is written
+          again, fields and all (resize-with-placement.test).
+        */
+        const current = asset.joints?.find(j => j.body1.part === this.partId);
+        const editing = current
+            ? i18next.t('figure.text.fasten-editing', {
+                face: i18next.t(`figure.label.face-${current.body1.face}`),
+                target: 'plane' in current.body0 ? i18next.t('figure.label.mounting-plane') : `${current.body0.part} · ${i18next.t(`figure.label.face-${current.body0.face}`)}`
+            })
+            : i18next.t('figure.text.fasten-new');
         return html `
+      <p fasten-mode ?editing=${!!current}>${editing}</p>
+      ${this.overhangNote.length ? html `<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
+      ${this.overhangWords.length
+            ? html `<div overhang role="status">
+            ${this.overhangWords.map(line => html `<p>${line}</p>`)}
+            ${current
+                ? html `<button act @click=${() => this.openDetail()}><md-icon>tune</md-icon>${i18next.t('figure.button.fix-alignment')}</button>`
+                : nothing}
+          </div>`
+            : nothing}
       ${held
             ? html `<div pair>
             <span>${i18next.t('figure.label.fastened-to')}: <b bound>${'plane' in held ? i18next.t('figure.label.mounting-plane') : held.part}</b></span>
             <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
               <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
             </button>
-          </div>`
+          </div>
+          ${this.renderDetachWords()}`
             : nothing}
       <div form>
         <span>${i18next.t('figure.label.my-face')}</span>
@@ -331,44 +579,43 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             <span>${i18next.t('figure.label.target-part')}</span>
             <select @change=${(e) => this.aimAt(asset, { ...f, target: e.target.value })}>
               <option value="" ?selected=${!f.target}>—</option>
-              ${targets.map(one => html `<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
+              ${targets.map(one => loops(one)
+                ? html `<option value=${one} disabled>${i18next.t('figure.text.target-would-loop', { part: one, mine: this.partId })}</option>`
+                : html `<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
             </select>
             <span>${i18next.t('figure.label.target-face')}</span>
             <select @change=${(e) => this.aimAt(asset, { ...f, targetFace: e.target.value })}>
               ${theirFaces.map(face => html `<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
             </select>
-            <span>${i18next.t('figure.label.facing-meet')}</span>
-            <select @change=${(e) => (this.fasten = { ...f, facing: e.target.value })}>
-              <option value="meet" ?selected=${f.facing === 'meet'}>${i18next.t('figure.label.facing-meet')}</option>
-              <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
-            </select>
           </div>`}
-      ${this.renderAlignment(f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : [])}
-      <div form>
-        <span>${i18next.t('figure.label.gap')}</span>
-        <input type="number" step="any" .value=${String(f.gap)} @change=${(e) => (this.fasten = { ...f, gap: Number(e.target.value) || 0 })} />
-        <span>${i18next.t('figure.label.twist')}</span>
-        <input type="number" step="any" .value=${String(f.twist)} @change=${(e) => (this.fasten = { ...f, twist: Number(e.target.value) || 0 })} />
-      </div>
-      <button
-        act
-        ?disabled=${this.locked || (!f.toPlane && !f.target)}
-        @click=${() => this.command({
-            kind: 'attach',
-            part: this.partId,
-            face: myFace,
-            to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: targetFace },
-            ...(f.toPlane ? {} : { facing: f.facing }),
-            ...(f.gap ? { gap: f.gap } : {}),
-            twist: f.twist,
-            ...(align ? { align } : {}),
-            replace: !!held
-        })}
-      >
-        <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
+      <details fasten-detail>
+        <summary>${i18next.t('figure.label.fasten-detail')} · <span fasten-summary>${detail.length ? detail.join(' · ') : i18next.t('figure.text.fasten-summary-default')}</span></summary>
+        ${f.toPlane
+            ? nothing
+            : html `<div form>
+              <span>${i18next.t('figure.label.facing')}</span>
+              <select @change=${(e) => (this.fasten = { ...f, facing: e.target.value })}>
+                <option value="meet" ?selected=${f.facing === 'meet'}>${i18next.t('figure.label.facing-meet')}</option>
+                <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
+              </select>
+            </div>`}
+        ${this.renderAlignment(f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : [])}
+        <div form>
+          <span>${i18next.t('figure.label.gap')}</span>
+          <input type="number" step="any" .value=${String(f.gap)} @change=${(e) => (this.fasten = { ...f, gap: Number(e.target.value) || 0 })} />
+          <span>${i18next.t('figure.label.twist')}</span>
+          <input type="number" step="any" .value=${String(f.twist)} @change=${(e) => (this.fasten = { ...f, twist: Number(e.target.value) || 0 })} />
+        </div>
+      </details>
+      ${action && this.working === 'fasten' ? this.renderPreviewWords() : nothing}
+      <button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
+        <md-icon>link</md-icon>${i18next.t(current ? 'figure.button.fasten-update' : 'figure.button.fasten')}
       </button>
     `;
     }
+    renderDetachWords() {
+        return this.detachWords.length ? html `<ul detach-words>${this.detachWords.map(line => html `<li>${line}</li>`)}</ul>` : nothing;
+    }
     /**
      * Where on the target face the part sits, on the two axes across it: centred, level with the target's edge on
      * either side, or a distance off centre. A door hung level with the frame's front edge turns about that edge.
@@ -387,6 +634,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                 ? html `<option value="min" ?selected=${how === 'min'}>${i18next.t(`figure.label.align-${axis}-min`)}</option>
                   <option value="max" ?selected=${how === 'max'}>${i18next.t(`figure.label.align-${axis}-max`)}</option>`
                 : nothing}
+            ${f.alignInput?.[axis]
+                ? html `<option value="input" ?selected=${how === 'input'}>${i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis], key => i18next.t(key)) })}</option>`
+                : nothing}
             <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
             ${this.asset && hasInstanceSize(this.asset, axis)
                 ? html `<option value="share" ?selected=${how === 'share'}>${i18next.t('figure.label.align-share')}</option>`
@@ -403,38 +653,59 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
      * face, copies a pitch apart filling the parent's length, or a count spread over it. Once made, the row's own section
      * (the editor's) shows it and takes it away.
      */
+    renderPreviewWords() {
+        return this.previewWords.length ? html `<ul preview-words role="status">${this.previewWords.map(line => html `<li>${line}</li>`)}</ul>` : nothing;
+    }
+    /**
+     * A row (ADR-0097 §5.5): said as what it makes, "arranged in a row". Where it cannot be made here, why, rather than
+     * nothing. Filling the length, the centre spacing is the author's; a count of their own is spread evenly over the
+     * length -- figure-model draws it so, and the form does not ask for a spacing it would not use.
+     */
     renderRow(asset) {
-        const axes = rowAxesOf(asset, this.partId);
-        if (!axes.length)
+        if (rowOf(asset, this.partId))
             return nothing;
+        const blocked = rowBlockOf(asset, this.partId);
+        const axes = rowAxesOf(asset, this.partId);
         const r = this.row;
+        if (blocked || !axes.length)
+            return html `<section row>
+        <h3>${i18next.t('figure.label.repeat')}</h3>
+        <p hint row-blocked>${i18next.t(`figure.text.row-blocked-${blocked ?? 'unfastened'}`, { part: this.partId })}</p>
+        ${blocked === 'unfastened'
+                ? html `<button act @click=${() => this.openFastening(asset)}><md-icon>link</md-icon>${i18next.t('figure.button.go-fasten')}</button>`
+                : nothing}
+      </section>`;
         const axis = axes.includes(r.axis) ? r.axis : axes[0];
-        const ok = r.pitch > 0 && (r.fills || (Number.isSafeInteger(r.count) && r.count >= 1));
-        return html `<section>
+        const ok = r.fills ? r.pitch > 0 : Number.isSafeInteger(r.count) && r.count >= 1;
+        const action = ok
+            ? { kind: 'make-repeat', part: this.partId, axis, pitch: r.fills ? r.pitch : Math.max(r.pitch, 1), ...(r.fills ? {} : { count: r.count }) }
+            : undefined;
+        this.rowCandidate = action;
+        const set = (next) => ((this.row = next), (this.working = 'row'));
+        return html `<section row @focusin=${() => (this.working = 'row')}>
       <h3>${i18next.t('figure.label.repeat')}</h3>
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>
-        <select @change=${(e) => (this.row = { ...r, axis: e.target.value })}>
+        <select @change=${(e) => set({ ...r, axis: e.target.value })}>
           ${axes.map(a => html `<option value=${a} ?selected=${a === axis}>${a.toUpperCase()}</option>`)}
         </select>
-        <span>${i18next.t('figure.label.repeat-pitch')} (mm)</span>
-        <input type="number" step="any" min="0" .value=${String(r.pitch)} @change=${(e) => (this.row = { ...r, pitch: Number(e.target.value) })} />
       </div>
-      <label toggle>
-        <input type="checkbox" .checked=${r.fills} @change=${(e) => (this.row = { ...r, fills: e.target.checked })} />
-        ${i18next.t('figure.label.repeat-fills')}
-      </label>
+      <div row-basis role="radiogroup" aria-label=${i18next.t('figure.label.row-basis')}>
+        <label><input type="radio" name="row-basis" .checked=${r.fills} @change=${() => set({ ...r, fills: true })} />${i18next.t('figure.label.repeat-fills')}</label>
+        <label><input type="radio" name="row-basis" .checked=${!r.fills} @change=${() => set({ ...r, fills: false })} />${i18next.t('figure.label.row-by-count')}</label>
+      </div>
       ${r.fills
-            ? nothing
+            ? html `<div form>
+            <span>${i18next.t('figure.label.repeat-pitch')} · mm</span>
+            <input type="number" step="any" min="0" .value=${String(r.pitch)} @change=${(e) => set({ ...r, pitch: Number(e.target.value) })} />
+          </div>`
             : html `<div form>
-            <span>${i18next.t('figure.label.repeat-count')}</span>
-            <input type="number" step="1" min="1" .value=${String(r.count)} @change=${(e) => (this.row = { ...r, count: Number(e.target.value) })} />
-          </div>`}
-      <button
-        act
-        ?disabled=${this.locked || !ok}
-        @click=${() => this.command({ kind: 'make-repeat', part: this.partId, axis, pitch: r.pitch, ...(r.fills ? {} : { count: r.count }) })}
-      >
+              <span>${i18next.t('figure.label.repeat-count')}</span>
+              <input type="number" step="1" min="1" .value=${String(r.count)} @change=${(e) => set({ ...r, count: Number(e.target.value) })} />
+            </div>
+            <p hint>${i18next.t('figure.text.row-count-spreads')}</p>`}
+      ${action && this.working === 'row' ? this.renderPreviewWords() : nothing}
+      <button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
         <md-icon>view_week</md-icon>${i18next.t('figure.button.make-repeat')}
       </button>
     </section>`;
@@ -486,7 +757,21 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         const now = motionOf(asset, this.partId);
         const joint = asset.joints?.find(j => j.body1.part === this.partId);
         if (now && !(this.editingMotion && joint)) {
-            return html `<div pair>
+            /* Which part moves, against what, which way, how far -- by name (ADR-0097 §5.5). */
+            const against = joint ? ('plane' in joint.body0 ? i18next.t('figure.label.mounting-plane') : joint.body0.part) : '';
+            const ends = this.motionEnds;
+            return html `<p motion-summary>
+          ${i18next.t('figure.text.motion-summary', {
+                part: this.partId,
+                against,
+                kind: i18next.t('figure.label.motion-' + now.kind),
+                axis: String(now.axis).toUpperCase()
+            })}
+        </p>
+        ${ends
+                ? html `<p hint motion-ends>${i18next.t('figure.text.motion-ends-shown', { min: String(ends.min), max: String(ends.max), unit: ends.unit })}</p>`
+                : nothing}
+        <div pair>
         <span>
           ${i18next.t('figure.label.motion-' + now.kind)} · ${String(now.axis).toUpperCase()}
           ${now.travel
@@ -501,7 +786,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         <button
           act
           ?disabled=${this.locked || !joint}
-          @click=${() => joint && this.command({ kind: 'set-joint', joint: { id: joint.id, type: 'fixed', body0: joint.body0, body1: joint.body1, ...(joint.origin ? { origin: joint.origin } : {}) } })}
+          @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}
         >
           <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
         </button>
@@ -521,7 +806,10 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         }
         /* A joint needs a parent (URDF): a part fastened to nothing is fastened first. */
         if (!joint)
-            return html `<p hint>${i18next.t('figure.text.fasten-before-moving')}</p>`;
+            return html `<p hint>${i18next.t('figure.text.fasten-before-moving')}</p>
+        <button act go-fasten @click=${() => this.dispatchEvent(new CustomEvent('go-fasten', { bubbles: true, composed: true }))}>
+          <md-icon>link</md-icon>${i18next.t('figure.button.go-fasten')}
+        </button>`;
         const m = this.motion;
         const unit = m.kind === 'slide' ? 'mm' : 'deg';
         /* A follower follows a joint that moves the same way; a choice the kind no longer allows is dropped. */
@@ -622,6 +910,38 @@ __decorate([
     property(),
     __metadata("design:type", String)
 ], FigureLinks.prototype, "section", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureLinks.prototype, "previewWords", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "motionEnds", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureLinks.prototype, "overhangWords", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureLinks.prototype, "overhangNote", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureLinks.prototype, "detachWords", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureLinks.prototype, "working", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "pendingAxes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "spotlit", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)