@things-factory/figure-ui 10.1.81 → 10.1.83

package/client/modeller/figure-links.ts

@@ -38,7 +38,12 @@ import {
   placeIdFor,
   placesOn,
   rowAxesOf,
+  rowBlockOf,
+  fixedJointOf,
+  rowOf,
   positionsWorkedOut,
+  fieldWordsOf,
+  measureNow,
   type Alignment,
   type Axis,
   type Follow,
@@ -58,7 +63,8 @@ const freshFasten = () => ({
   gap: 0,
   twist: 0,
   align: {} as Partial<Record<Axis, Alignment>>,
-  alignMm: {} as Partial<Record<Axis, number>>
+  alignMm: {} as Partial<Record<Axis, number>>,
+  alignInput: {} as Partial<Record<Axis, string>>
 })
 const freshMotion = (): MotionForm => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 })
 const freshRow = () => ({ axis: '' as Axis | '', pitch: 200, fills: true, count: 5 })
@@ -97,6 +103,29 @@ export 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; }
+    /* Size behaviour is a choice about dimensions only. It never implies a placement or a fastening. */
+    details[resize-choice] { margin: 12px 0; padding: 0; border: 0; }
+    details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
+    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;
@@ -118,7 +147,31 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   @property({ type: Boolean }) locked = false
   /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
   @property() section: 'shape' | 'places' | 'motion' = 'shape'
+  /** What the fastening command would do, in words (the editor works it out: `command-preview.ts`). */
+  @property({ attribute: false }) previewWords: string[] = []
+  /** Where the selected part's motion takes it, at both ends of its range (the editor draws them on the canvas). */
+  @property({ attribute: false }) motionEnds: { control: string; min: number; max: number; unit: string } | null = null
+  /** Past the edge of the face it is fastened to, or parts fastened to it past theirs (ADR-0097 §5.5, Q3). */
+  @property({ attribute: false }) overhangWords: string[] = []
+  /** Wider than the face it is fastened to: how far past each edge, and whether off to one side -- a fact, not a warning. */
+  @property({ attribute: false }) overhangNote: string[] = []
+  /** What taking this part off would do, said beside the buttons that do it (worked out on a copy by the editor). */
+  @property({ attribute: false }) detachWords: string[] = []
+  /*
+    The fastening command the form describes now, and the face it aims at: told to the editor whenever it changes, so
+    the result is seen before it is done (ADR-0097 §5.5). Nothing is told while no target is chosen.
+  */
+  private candidate?: { action: FigureAuthoringAction; face?: { part: string; face: string } }
+  private told = ''
+  /* Two forms describe a command here: the fastening and the row. The one being worked on is the one seen. */
+  @state() private working: 'fasten' | 'row' = 'fasten'
+  private fastenCandidate?: { action: FigureAuthoringAction; face?: { part: string; face: string } }
+  private rowCandidate?: FigureAuthoringAction
 
+  /** A new fastening starts with a target. Its face and alignment are asked only after that target is chosen. */
+  @state() private choosingFastening = false
+  /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
+  @state() private spotlit = false
   @state() private fasten = freshFasten()
   @state() private motion: MotionForm = freshMotion()
   @state() private place = freshPlace()
@@ -130,8 +183,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     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: Map<string, unknown>) {
-    if (changed.has('partId') && changed.get('partId') !== undefined) {
+  /* The part the forms were loaded for. A panel made with a part already chosen loaded nothing, and said "editing the
+     fastening it has" over an empty target (2026-09-27, :3391, the doors). */
+  private loadedFor?: string
+  willUpdate(_changed: Map<string, unknown>) {
+    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 } as ReturnType<typeof freshFasten>) : freshFasten()
@@ -139,11 +196,32 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.place = freshPlace()
       this.row = freshRow()
       this.editingMotion = false
+      this.choosingFastening = 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')
       return html`<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
@@ -151,18 +229,20 @@ export 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. */
@@ -236,16 +316,36 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   }
 
   private renderDimensions(asset: FigureAsset) {
+    const editable = followableAxes(asset, this.partId)
+    const round = editable.length === 2
+    const word = (axis: Axis) => i18next.t(round && axis === 'x' ? 'figure.label.resize-diameter' : `figure.label.resize-${axis}`)
     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 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 followsAll = editable.every(axis => followOf(asset, this.partId, axis).of === 'instance')
+    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=${() => {
+                  this.follow(asset, axis, 'own', now)
+                }}>${i18next.t('figure.button.resize-unfollow')}</button>`
+            : nothing}
+        </div>`
+      })}</div>
+      ${followsAll
+        ? html`<p hint>${i18next.t('figure.text.resize-all-following')}</p>`
+        : html`<button act follow-size ?disabled=${this.locked || asset.sizing === 'uniform'} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
+            <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
+          </button>`}
+      <details resize-choice><summary>${i18next.t('figure.label.resize-advanced')}</summary><div>${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. */
@@ -285,7 +385,68 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               </label>`
           : nothing}
       </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 fastening's details open, focus in them: where the gap and the place across the face are changed. */
+  private async openDetail() {
+    const detail = this.renderRoot.querySelector<HTMLDetailsElement>('details[fasten-detail]')
+    if (!detail) return
+    detail.open = true
+    this.working = 'fasten'
+    await this.updateComplete
+    detail.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    detail.querySelector<HTMLElement>('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)
+  }
+
+  private async openFastening(asset: FigureAsset) {
+    const own = fasteningOf(asset, this.partId)
+    this.fasten = own ? ({ ...freshFasten(), ...own } as ReturnType<typeof freshFasten>) : freshFasten()
+    this.spotlit = true
+    await this.updateComplete
+    const section = this.renderRoot.querySelector<HTMLElement>('section[fastening]')
+    section?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+    /* Into the form itself, not the section's help button. */
+    ;(section?.querySelector<HTMLElement>('select, input') ?? section?.querySelector<HTMLElement>('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).
+   */
+  private renderHeld(asset: FigureAsset) {
+    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`). */
@@ -347,14 +508,16 @@ export 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' as const) : 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: {} }) }
   }
 
   private renderFastening(asset: FigureAsset) {
     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: string) => 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)
@@ -367,72 +530,130 @@ export 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' as const) : { 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
+          } as FigureAuthoringAction)
+        : 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')
+    /* 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>
+      `
     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>
-        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as FigureFace | 'centre' })}>
-          ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-        </select>
-      </div>
-      <label toggle>
-        <input type="checkbox" .checked=${f.toPlane} @change=${(e: Event) => this.aimAt(asset, { ...f, toPlane: (e.target as HTMLInputElement).checked })} />
-        ${i18next.t('figure.label.stands-on-plane')}
-      </label>
       ${f.toPlane
-        ? nothing
+        ? html`<p hint>${i18next.t('figure.text.fasten-edit-on-plane')}</p>`
         : html`<div form>
-            <span>${i18next.t('figure.label.target-part')}</span>
-            <select @change=${(e: Event) => this.aimAt(asset, { ...f, target: (e.target as HTMLSelectElement).value })}>
-              <option value="" ?selected=${!f.target}>—</option>
-              ${targets.map(one => html`<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
-            </select>
-            <span>${i18next.t('figure.label.target-face')}</span>
-            <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as FigureFace })}>
-              ${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: Event) => (this.fasten = { ...f, facing: (e.target as HTMLSelectElement).value as 'meet' | 'flush' })}>
-              <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: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
-        <span>${i18next.t('figure.label.twist')}</span>
-        <input type="number" step="any" .value=${String(f.twist)} @change=${(e: Event) => (this.fasten = { ...f, twist: Number((e.target as HTMLInputElement).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
-          } as FigureAuthoringAction)}
-      >
-        <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
-      </button>
+              <span>${i18next.t('figure.label.target-part')}</span>
+              <select @change=${(e: Event) => this.aimAt(asset, { ...f, target: (e.target as HTMLSelectElement).value })}>
+                <option value="" ?selected=${!f.target}>${i18next.t('figure.label.target-part-placeholder')}</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>
+            </div>
+            ${f.target
+              ? html`<div form>
+                    <span>${i18next.t('figure.label.my-face')}</span>
+                    <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as FigureFace | 'centre' })}>
+                      ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+                    </select>
+                    <span>${i18next.t('figure.label.target-face')}</span>
+                    <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as FigureFace })}>
+                      ${theirFaces.map(face => html`<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+                    </select>
+                  </div>`
+              : 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')} · <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: Event) => (this.fasten = { ...f, facing: (e.target as HTMLSelectElement).value as 'meet' | 'flush' })}>
+                <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: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
+          <span>${i18next.t('figure.label.twist')}</span>
+          <input type="number" step="any" .value=${String(f.twist)} @change=${(e: Event) => (this.fasten = { ...f, twist: Number((e.target as HTMLInputElement).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>` : nothing}
     `
   }
 
+  private 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.
@@ -451,6 +672,9 @@ export 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>`
@@ -468,37 +692,59 @@ export 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.
    */
+  private 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.
+   */
   private renderRow(asset: FigureAsset) {
+    if (rowOf(asset, this.partId)) return nothing
+    const blocked = rowBlockOf(asset, this.partId)
     const axes = rowAxesOf(asset, this.partId)
-    if (!axes.length) return nothing
     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 as Axis) ? (r.axis as 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 }) } as FigureAuthoringAction)
+      : undefined
+    this.rowCandidate = action
+    const set = (next: typeof r) => ((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: Event) => (this.row = { ...r, axis: (e.target as HTMLSelectElement).value as Axis })}>
+        <select @change=${(e: Event) => set({ ...r, axis: (e.target as HTMLSelectElement).value as Axis })}>
           ${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: Event) => (this.row = { ...r, pitch: Number((e.target as HTMLInputElement).value) })} />
       </div>
-      <label toggle>
-        <input type="checkbox" .checked=${r.fills} @change=${(e: Event) => (this.row = { ...r, fills: (e.target as HTMLInputElement).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: Event) => set({ ...r, pitch: Number((e.target as HTMLInputElement).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: Event) => (this.row = { ...r, count: Number((e.target as HTMLInputElement).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 }) } as FigureAuthoringAction)}
-      >
+              <span>${i18next.t('figure.label.repeat-count')}</span>
+              <input type="number" step="1" min="1" .value=${String(r.count)} @change=${(e: Event) => set({ ...r, count: Number((e.target as HTMLInputElement).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>`
@@ -551,7 +797,21 @@ export 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
@@ -566,7 +826,7 @@ export 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>
@@ -584,7 +844,11 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       </div>`
     }
     /* 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>`
+    if (!joint)
+      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. */
@@ -667,4 +931,3 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))
   }
 }
-