@things-factory/figure-ui 10.1.181 → 10.1.185

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

@@ -5,31 +5,15 @@ import '@operato/input/ox-input-select-buttons.js';
 import './figure-slot-layout-panel.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { FIGURE_FACES, figureFaceOverhangOf } from '@hatiolab/figure-model';
-import { acceptsOf, alignOf, AXES, canFasten, facesOf, canFollow, followCommandOf, followableAxes, positionIsShare, choiceOf, followWordsOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, fastenGapOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionFormRefusalOf, endPlaceKeyOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, fieldWordsOf, measureNow, ownFacesOf, alignRowsOf } from './links.js';
+import { figureFaceOverhangOf } from '@hatiolab/figure-model';
+import { acceptsOf, AXES, canFasten, canFollow, followCommandOf, followableAxes, positionIsShare, choiceOf, followWordsOf, heldBy, followOf, shownWhenOf, visibilityControlsOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionFormRefusalOf, endPlaceKeyOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, rowBlockOf, fixedJointOf, rowOf, positionsWorkedOut, measureNow } from './links.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
-import './figure-fasten-drawing.js';
-import { faceViewOf, insideAlignmentOf, modeOf, myFaceFor, turnsInPlace } from './fasten-geometry.js';
+import { insideAlignmentOf } from './fasten-geometry.js';
+import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js';
 import { HelpToggles } from './help.js';
 import { groupMenu, GroupMenuStyles } from './group-menu.js';
 import { jointAxisWord } from './joint-axis.js';
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js';
-const FACES = Object.keys(FIGURE_FACES);
-/** The target list's entry for the plane the figure stands by. */
-const PLANE = '__plane';
-const freshFasten = () => ({
-    face: 'bottom',
-    toPlane: false,
-    target: '',
-    targetFace: 'top',
-    facing: 'meet',
-    gap: 0,
-    gapKept: undefined,
-    twist: 0,
-    align: {},
-    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 });
 const freshPlace = () => ({ role: 'grip', face: 'top', label: '', accepts: '', capacity: 1 });
@@ -43,7 +27,8 @@ const freshPlace = () => ({ role: 'grip', face: 'top', label: '', accepts: '', c
  *
  * The sections are dimensions, placement and joint, in that order. Every
  * change is one figure-model authoring command, sent as `command` and run by the editor through the session — one
- * step of the undo history. Choices the command would refuse (a round body fastened, a size following an instance
+ * step of the undo history. The fastening is said here in one line; it is chosen in the fastening window
+ * (`figure-fasten-dialog.ts`), which the editor opens when this asks (`fasten-open`). Choices the command would refuse (a round body fastened, a size following an instance
  * size the figure does not declare) are not offered, so the author is not sent into a refusal.
  */
 let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
@@ -56,11 +41,12 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
         this.section = 'shape';
         /**
-         * Its tab is the one shown. Two sections speak of what a command would draw -- the properties' fastening and the
-         * response's row -- and only the one in sight may: the hidden one's silence would clear what the shown one draws.
+         * Its tab is the one shown, and no window over it speaks instead. The response's row speaks of what a command would
+         * draw, and the properties' says there is none: only the one in sight may, as the hidden one's silence would clear what
+         * the shown one draws. While the fastening window is open it alone speaks (the editor sets this false).
          */
         this.active = true;
-        /** What the fastening command would do, in words (the editor works it out: `command-preview.ts`). */
+        /** What the row's 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;
@@ -71,15 +57,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         /** 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';
-        /** A new fastening starts with a target. Its face and alignment are asked only after that target is chosen. */
-        this.choosingFastening = false;
-        /** The fastening the part has, opened to be changed: until then the place group says it in one line. */
-        this.changingFastening = false;
-        /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
-        this.spotlit = false;
-        this.fasten = freshFasten();
+        this.rowOpen = false;
         /** Why 정렬·간격 고치기 moved nothing, said under it; empty once it moved the part or the part changed. */
         this.fixNote = '';
         this.motion = freshMotion();
@@ -134,7 +112,6 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
     details[resize-choice] { margin: 0; padding: 0; border: 0; }
     details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
     p[fasten-mode] { margin: 0; font-weight: 600; }
-    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: 8px; }
     details[row-fold] { margin: 0; }
     details[row-fold] > summary { padding: 0; color: var(--md-sys-color-on-surface); }
@@ -148,7 +125,6 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
     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; }
-    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;
@@ -172,15 +148,10 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             this.fixNote = '';
         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.revision && this.partId ? fasteningOf(this.revision, this.partId) : null;
-            this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
             this.motion = freshMotion();
             this.place = freshPlace();
             this.row = freshRow();
             this.editingMotion = false;
-            this.choosingFastening = false;
-            this.changingFastening = false;
         }
     }
     updated() {
@@ -260,7 +231,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
                 : nothing}
         ${rowOf(asset, this.partId) ? html `<slot name="row"></slot>` : this.renderRow(asset)}
       `;
-            this.candidate = this.working === 'row' && this.rowCandidate ? { action: this.rowCandidate } : undefined;
+            this.candidate = this.rowOpen && this.rowCandidate ? { action: this.rowCandidate } : undefined;
             return response;
         }
         const shown = html `
@@ -268,7 +239,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         <h3>${i18next.t('figure.label.group-size')}</h3>
         <slot name="size"></slot>
       </section>
-      <section fastening ?spotlit=${this.spotlit} @focusin=${() => (this.working = 'fasten')}>
+      <section fastening>
         <h3>
           ${i18next.t('figure.label.group-place')}${this.help.button('figure.text.fastening-explained')}
           ${groupMenu([{ label: i18next.t('figure.button.detach'), icon: 'link_off', disabled: this.locked || !held, run: () => this.command({ kind: 'detach', part: this.partId }) }])}
@@ -412,50 +383,36 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
       </div>`;
         })}</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 face the part sits on, in view with the focus on it: where the place across the face is dragged or keyed. */
     /**
      * 정렬·간격 고치기: the part moved inside the face it is fastened on, as one step -- the least move on each side it is
      * out, or centred when it is wider than the face. When nothing of it can be moved, why is said under the button, not
-     * nothing at all (:3300, 2026-10-11: the button only scrolled to the drawing, which was already in view).
+     * nothing at all (:3300, 2026-10-11: the button only scrolled to the drawing, which was already in view). The command
+     * is the fastening window's for the same choice (`fasten-form.ts`), with only the place across the face changed.
      */
-    async fixAlignment(view, target) {
+    fixAlignment() {
+        const revision = this.revision;
+        if (!revision)
+            return;
+        const form = fastenFormOf(revision, this.partId);
         /* Whether it is out is the kernel's measure (a round face is not measured there); the drawing's sizes say how far to move. */
-        const own = this.revision ? figureFaceOverhangOf(this.revision.asset, this.partId, this.revision.inputs) : undefined;
+        const own = figureFaceOverhangOf(revision.asset, this.partId, revision.inputs);
         const fixed = own?.state === 'unknown'
             ? { cannot: 'unmeasured' }
             : own?.state === 'out' || own?.state === 'possible'
-                ? insideAlignmentOf(view, this.fasten.align, this.fasten.alignMm)
+                ? insideAlignmentOf(fastenPlanOf(revision, this.partId, form).view, form.align, form.alignMm)
                 : { cannot: 'inside' };
         if ('cannot' in fixed) {
-            this.fixNote = i18next.t(`figure.text.fix-alignment-${fixed.cannot}`, { part: this.partId, on: target });
+            this.fixNote = i18next.t(`figure.text.fix-alignment-${fixed.cannot}`, { part: this.partId, on: form.target });
             return;
         }
         this.fixNote = '';
-        this.fasten = { ...this.fasten, align: fixed.align, alignMm: fixed.alignMm };
-        await this.onFastenRelease(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);
+        const action = fastenPlanOf(revision, this.partId, { ...form, align: fixed.align, alignMm: fixed.alignMm }).action;
+        if (action)
+            this.command(action);
     }
-    async openFastening(asset) {
-        const own = fasteningOf(this.revision, this.partId);
-        this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
-        /* Asked for from elsewhere: the form itself, not the one-line summary of the fastening it has. */
-        this.changingFastening = true;
-        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);
+    /** The fastening window, asked of the editor: it opens over the canvas on what the part has now. */
+    openFastening() {
+        this.dispatchEvent(new CustomEvent('fasten-open', { bubbles: true, composed: true }));
     }
     /**
      * What holds the part, said as its state -- 「아랫면을 바닥에 유지 중」 -- with the ways to change it: open the fastening,
@@ -508,245 +465,61 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
       </div>`);
     }
     /**
-     * A new aim for the fastening: where on the face is filled in as where the part stands now, so fastening it keeps it
-     * there (`placeKeptOf`). The author changes it from there.
+     * The fastening in one line -- what, on which face, how -- and 「바꾸기」 to open the window where it is chosen (chief
+     * architect 2026-10-16; user 2026-10-17: the result here, the editing in a window with room). Taking it off is in the
+     * group's 「⋯」. What hangs over the face, and the way to fix it, stay here: they are about the fastening as it is now.
      */
-    aimAt(asset, f) {
-        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(this.revision, this.partId, aim, !!f.twist) : { align: {}, alignMm: {}, alignInput: {} }) };
-    }
     renderFastening(asset) {
-        const held = heldBy(asset, this.partId);
-        /* Placed by an origin (ADR-0107 decision 4): attach writes faces, so the form would move it off its origin. Said, and taken off only. */
-        if (fasteningOf(this.revision, this.partId)?.atOrigin) {
-            this.fastenCandidate = undefined;
+        const revision = this.revision;
+        const own = fasteningOf(revision, this.partId);
+        /* Placed by an origin (ADR-0107 decision 4): attach writes faces, so the window would move it off its origin. Said, and taken off only. */
+        if (own?.atOrigin)
             return html `<div fastened fasten-at-origin>
         <p>${this.heldWords(asset)}</p>
         ${this.renderDetachWords()}
       </div>`;
-        }
-        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));
-        /* 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);
-        const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'));
-        /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
-        const mineFaces = ownFacesOf(asset, this.partId, f.toPlane);
-        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 };
-        /* The part's own face is not chosen: the target's face and how give it (user 2026-10-01; the kernel takes no other). */
-        const mode = f.toPlane ? 'meet' : modeOf(f.face, f.facing);
-        const derived = f.toPlane || f.target ? myFaceFor(this.revision, this.partId, aim, mode) : undefined;
-        const myFace = derived ?? (mineFaces.includes(f.face) ? f.face : mineFaces[0]);
-        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 }),
-                ...fastenGapOf(f),
-                twist: f.twist,
-                ...(align ? { align } : {}),
-                replace: !!held
-            }
-            : undefined;
-        if (action)
-            this.fastenCandidate = { action, ...(f.toPlane ? {} : { face: { part: f.target, face: targetFace } }) };
-        /*
-          What the folded details hold that is not their default, said while folded; the way and the place on the face are
-          the drawing's, and said there (user 2026-10-02: the details had selects repeating the drawing). Nothing is said
-          for the default.
-        */
-        const detail = [
-            ...(f.gapKept !== undefined
-                ? [i18next.t('figure.text.fasten-summary-gap-worked-out')]
-                : 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) })] : [])
-        ];
-        /* Across the face, a row only where the drawing cannot set it: no drawing of the face, or a share or a field to follow. */
-        const view = f.toPlane || f.target ? faceViewOf(this.revision, this.partId, aim) : undefined;
-        const alignRows = f.toPlane || f.target ? alignRowsOf(asset, this.partId, aim, view, !!f.twist, f.alignInput) : [];
-        /* A fastening the part has is changed as soon as something is chosen, as the drawing does; a new one waits for 붙이기. */
-        const settle = () => this.onFastenRelease(!!held);
-        /*
-          Fastening it anew is said, so the form is not taken for the one it has (designer 2026-09-27). The one it has is
-          said once, by the sentence over the drawing -- the panel's head says it too; a third and a fourth line saying the
-          same (「현재 관계 수정」, 「붙은 곳」) went (user 2026-10-01, the panel checked for balance).
-        */
-        const current = asset.joints?.find(j => j.body1.part === this.partId);
-        const editing = i18next.t('figure.text.fasten-new');
-        /*
-          A fastening the part has, said in one line -- what, on which face, how -- and 「바꾸기」 to open the drawing and the
-          details (chief architect 2026-10-16). They were open on every fastened part, near a screen of the panel, for a
-          choice made once. Taking it off is in the group's 「⋯」. What would hang over still shows: it is about now.
-        */
-        /* What hangs over the face, and the way to fix it: about the fastening as it is now, so said open or folded. */
         const overhang = html `${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 fix-alignment ?disabled=${this.locked} @click=${() => this.fixAlignment(view, held ? f.target : '')}>
+            ${own
+                ? html `<button act fix-alignment ?disabled=${this.locked} @click=${() => this.fixAlignment()}>
                     <md-icon>tune</md-icon>${i18next.t('figure.button.fix-alignment')}
                   </button>
                   ${this.fixNote ? html `<p hint fix-note>${this.fixNote}</p>` : nothing}`
                 : nothing}
           </div>`
             : nothing}`;
-        if (current && held && !this.changingFastening && (f.toPlane || f.target))
+        if (own && heldBy(asset, this.partId)) {
+            const form = fastenFormOf(revision, this.partId);
+            const plan = fastenPlanOf(revision, this.partId, form);
+            if (plan.action)
+                this.fastenCandidate = { action: plan.action, ...(plan.face ? { face: plan.face } : {}) };
+            const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'));
             return html `
         ${overhang}
         <div fastened-summary>
-          <p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
-          <button act change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
+          <p fasten-sentence>${fastenSentenceOf(this.partId, form, plan, planeWord, (key, params) => i18next.t(key, params))}</p>
+          <button act change-fastening ?disabled=${this.locked} @click=${() => this.openFastening()}>${i18next.t('figure.button.change-fastening')}</button>
         </div>
         ${this.renderDetachWords()}
       `;
-        /* A blank attachment is not a form to decipher. Ask for the thing to attach to first. */
-        if (!current && !this.choosingFastening && !f.target)
-            return html `
-        <p hint>${i18next.t('figure.text.fasten-start')}</p>
-        <button act ?disabled=${this.locked} @click=${() => (this.choosingFastening = true)}>
-          <md-icon>link</md-icon>${i18next.t('figure.button.fasten-start')}
-        </button>
-      `;
+        }
+        /* A blank attachment is not a form to decipher: what it does, and the way to the window. */
         return html `
-      ${current ? nothing : html `<p fasten-mode>${editing}</p>`}
       ${overhang}
-      ${held ? this.renderDetachWords() : nothing}
-      <div form>
-        <span>${i18next.t('figure.label.target-part')}</span>
-        <select @change=${(e) => {
-            const value = e.target.value;
-            this.aimAt(asset, value === PLANE ? { ...f, toPlane: true, target: '' } : { ...f, toPlane: false, target: value });
-            if (value)
-                settle();
-        }}>
-          <option value="" ?selected=${!f.target && !f.toPlane}>${i18next.t('figure.label.target-part-placeholder')}</option>
-          <option value=${PLANE} ?selected=${f.toPlane}>${planeWord}</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 && !f.toPlane}>${one}</option>`)}
-        </select>
-      </div>
-      ${f.toPlane || f.target
-            ? html `<p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
-            <figure-fasten-drawing
-              .target=${f.toPlane ? '' : f.target}
-              .planeWord=${planeWord}
-              .faces=${theirFaces}
-              .face=${targetFace}
-              .modes=${f.toPlane ? ['meet'] : ([...['meet', 'flush'], ...(turnsInPlace(asset, this.partId) ? ['centre'] : [])])}
-              .mode=${mode}
-              .view=${view}
-              .align=${f.align}
-              .alignMm=${f.alignMm}
-              .gap=${f.gap}
-              .partName=${this.partId}
-              ?locked=${this.locked}
-              ?said=${!!held}
-              @fasten-change=${(e) => this.onFastenChange(asset, e.detail)}
-              @fasten-release=${() => this.onFastenRelease(!!held)}
-            ></figure-fasten-drawing>`
-            : html `<p hint>${i18next.t('figure.text.fasten-target-first')}</p>`}
-      ${(f.toPlane || f.target) ? html `<details fasten-detail>
-        <summary>${i18next.t('figure.label.fasten-detail')}${detail.length ? html ` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}</summary>
-        ${alignRows.length ? this.renderAlignment(alignRows, settle) : nothing}
-        <div form>
-          <span>${i18next.t('figure.label.gap')}</span>
-          <input
-            type="number"
-            step="any"
-            .value=${f.gapKept !== undefined ? '' : String(f.gap)}
-            placeholder=${f.gapKept !== undefined ? i18next.t('figure.label.follows-expression') : ''}
-            @change=${(e) => ((this.fasten = { ...f, gap: Number(e.target.value) || 0, gapKept: undefined }), settle())}
-          />
-          <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 }), settle())} />
-        </div>
-      </details>
-      ${ /* What 붙이기 would do; a fastening the part has is changed at once, and the canvas shows it. */action && !held && this.working === 'fasten' ? this.renderPreviewWords() : nothing}
-      ${held
-            ? nothing
-            : html `<button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
-            <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
-          </button>`}` : nothing}
+      <p hint>${i18next.t('figure.text.fasten-start')}</p>
+      <button act fasten-start ?disabled=${this.locked} @click=${() => this.openFastening()}>
+        <md-icon>link</md-icon>${i18next.t('figure.button.fasten-start')}
+      </button>
     `;
     }
-    /** 「lid 의 아랫면을 bin 의 윗면에 맞닿게」: what the fastening is, in one line, the part's own face said as a result. */
-    sentenceOf(myFace, to, mode) {
-        return i18next.t(`figure.text.fasten-sentence-${mode}`, { part: this.partId, face: i18next.t('figure.label.face-' + myFace), to });
-    }
-    /** A change the drawing asks: to the form only; the preview behind follows the form. */
-    onFastenChange(asset, c) {
-        const f = this.fasten;
-        if ('targetFace' in c)
-            this.aimAt(asset, { ...f, targetFace: c.targetFace });
-        else if ('mode' in c)
-            this.fasten = { ...f, face: c.mode === 'centre' ? 'centre' : f.face === 'centre' ? 'bottom' : f.face, facing: c.mode === 'flush' ? 'flush' : 'meet' };
-        else if ('gap' in c)
-            this.fasten = { ...f, gap: c.gap, gapKept: undefined };
-        else
-            this.fasten = {
-                ...f,
-                align: { ...f.align, [c.axis]: c.how },
-                alignMm: c.how === 'mm' ? { ...f.alignMm, [c.axis]: c.mm ?? 0 } : f.alignMm
-            };
-    }
-    /** Let go: a fastening the part already has is applied as it now is (one step); a new one waits for 붙이기. */
-    async onFastenRelease(held) {
-        if (!held)
-            return;
-        await this.updateComplete;
-        if (this.fastenCandidate)
-            this.command(this.fastenCandidate.action);
-    }
     renderDetachWords() {
         /* One thing to say is a line, not a list of one. */
         if (this.detachWords.length === 1)
             return html `<p hint detach-words>${this.detachWords[0]}</p>`;
         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.
-     */
-    renderAlignment(axes, settle) {
-        const f = this.fasten;
-        const set = (axis, how) => ((this.fasten = { ...f, align: { ...f.align, [axis]: how } }), settle());
-        const setMm = (axis, mm) => ((this.fasten = { ...f, alignMm: { ...f.alignMm, [axis]: mm } }), settle());
-        return html `<div form>
-      ${axes.map(({ axis, edges }) => {
-            const how = f.align[axis] === 'min' || f.align[axis] === 'max' ? (edges ? f.align[axis] : 'centre') : (f.align[axis] ?? 'centre');
-            return html `<span>${i18next.t('figure.label.align-' + axis)}</span>
-          <select @change=${(e) => set(axis, e.target.value)}>
-            <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
-            ${edges
-                ? 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>`
-                : nothing}
-          </select>
-          ${how === 'mm' || how === 'share'
-                ? html `<span></span><input type="number" step="any" aria-label=${i18next.t('figure.label.align-mm')} .value=${String(f.alignMm[axis] ?? 0)} @change=${(e) => setMm(axis, Number(e.target.value) || 0)} />`
-                : nothing}`;
-        })}
-    </div>`;
-    }
     /**
      * Making the part a row across what it is fastened to (figure-model `make-repeat`): along one of the axes across its
      * face, copies a pitch apart filling the parent's length, or a count spread over it. Once made, the row's own section
@@ -778,7 +551,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         ${head}
         <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>`
+                ? html `<button act @click=${() => this.dispatchEvent(new CustomEvent('go-fasten', { bubbles: true, composed: true }))}><md-icon>link</md-icon>${i18next.t('figure.button.go-fasten')}</button>`
                 : nothing}
       </details></section>`;
         const axis = axes.includes(r.axis) ? r.axis : axes[0];
@@ -787,13 +560,13 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
             ? { 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'));
+        const set = (next) => ((this.row = next), (this.rowOpen = true));
         /*
           Whether the row is being worked follows the fold's own toggle. A press on the heading focuses it before the click;
           set on focus, the fold opened there and the click then folded it again (2026-10-11: it took two clicks to open).
         */
-        const toggled = (e) => (this.working = e.target.open ? 'row' : 'fasten');
-        return html `<section row><details row-fold ?open=${this.working === 'row'} @toggle=${toggled}>
+        const toggled = (e) => (this.rowOpen = e.target.open);
+        return html `<section row><details row-fold ?open=${this.rowOpen} @toggle=${toggled}>
       ${head}
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>
@@ -815,7 +588,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
               <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}
+      ${action && this.rowOpen ? 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>
@@ -1057,26 +830,10 @@ __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, "choosingFastening", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureLinks.prototype, "changingFastening", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureLinks.prototype, "spotlit", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureLinks.prototype, "fasten", void 0);
+], FigureLinks.prototype, "rowOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)