@things-factory/figure-ui 10.1.181 → 10.1.183

package/client/modeller/figure-links.ts

@@ -6,30 +6,24 @@ 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 { figureFaceOverhangOf } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureAuthoringAction, FigureDimensionSource, FigureFace } from '@hatiolab/figure-model'
 
 import {
   acceptsOf,
-  alignOf,
   AXES,
   canFasten,
-  facesOf,
   canFollow,
   followCommandOf,
   followableAxes,
   positionIsShare,
   choiceOf,
   followWordsOf,
-  fastenedTo,
   heldBy,
   followOf,
-  hangsFrom,
   shownWhenOf,
   visibilityControlsOf,
-  placeKeptOf,
   fasteningOf,
-  fastenGapOf,
   hasInstanceSize,
   holdsThings,
   leadersFor,
@@ -46,42 +40,20 @@ import {
   fixedJointOf,
   rowOf,
   positionsWorkedOut,
-  fieldWordsOf,
   measureNow,
-  ownFacesOf,
-  alignRowsOf,
-  type Alignment,
   type Axis,
   type Follow,
   type MotionForm
 } from './links.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
-import './figure-fasten-drawing.js'
-import type { FastenChange } from './figure-fasten-drawing.js'
-import { faceViewOf, insideAlignmentOf, modeOf, myFaceFor, turnsInPlace, type FaceView, type FastenMode } from './fasten-geometry.js'
+import { insideAlignmentOf } from './fasten-geometry.js'
+import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js'
 import type { FigureRevision } from './revision.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) as FigureFace[]
-/** The target list's entry for the plane the figure stands by. */
-const PLANE = '__plane'
-
-const freshFasten = () => ({
-  face: 'bottom' as FigureFace | 'centre',
-  toPlane: false,
-  target: '',
-  targetFace: 'top' as FigureFace,
-  facing: 'meet' as 'meet' | 'flush',
-  gap: 0,
-  gapKept: undefined as unknown,
-  twist: 0,
-  align: {} as Partial<Record<Axis, Alignment>>,
-  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 })
 const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as FigureFace, label: '', accepts: '', capacity: 1 })
@@ -96,7 +68,8 @@ const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as Figu
  *
  * 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.
  */
 @customElement('figure-links')
@@ -148,7 +121,6 @@ export 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); }
@@ -162,7 +134,6 @@ export 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;
@@ -186,11 +157,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
   @property() section: 'shape' | 'response' | 'places' | 'motion' = '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).
    */
   @property({ type: Boolean }) 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`). */
   @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
@@ -201,23 +173,15 @@ export 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). */
   @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.
+    What a section speaks of on the canvas: the response's row while its fold is open; the properties', the fastening the
+    part has -- its face lit, as the one-line result says it.
   */
   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 told = ''
+  @state() private rowOpen = false
   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 the part has, opened to be changed: until then the place group says it in one line. */
-  @state() private changingFastening = false
-  /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
-  @state() private spotlit = false
-  @state() private fasten = freshFasten()
   /** Why 정렬·간격 고치기 moved nothing, said under it; empty once it moved the part or the part changed. */
   @state() private fixNote = ''
   @state() private motion: MotionForm = freshMotion()
@@ -242,15 +206,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     if (changed.has('asset') || changed.has('partId')) 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 } as ReturnType<typeof freshFasten>) : freshFasten()
       this.motion = freshMotion()
       this.place = freshPlace()
       this.row = freshRow()
       this.editingMotion = false
-      this.choosingFastening = false
-      this.changingFastening = false
     }
   }
 
@@ -329,7 +288,7 @@ export 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`
@@ -337,7 +296,7 @@ export 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 }) }])}
@@ -494,53 +453,36 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     })}</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.
    */
-  private async fixAlignment(view: FaceView | undefined, target: string) {
+  private 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' } as const)
         : 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' } as const)
     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)
   }
 
-  private async openFastening(asset: FigureAsset) {
-    const own = fasteningOf(this.revision!, this.partId)
-    this.fasten = own ? ({ ...freshFasten(), ...own } as ReturnType<typeof freshFasten>) : 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<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)
+  /** The fastening window, asked of the editor: it opens over the canvas on what the part has now. */
+  private openFastening() {
+    this.dispatchEvent(new CustomEvent('fasten-open', { bubbles: true, composed: true }))
   }
 
   /**
@@ -597,247 +539,61 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   }
 
   /**
-   * 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.
    */
-  private aimAt(asset: FigureAsset, f: ReturnType<typeof freshFasten>) {
-    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(this.revision!, this.partId, aim, !!f.twist) : { align: {}, alignMm: {}, alignInput: {} }) }
-  }
-
   private renderFastening(asset: FigureAsset) {
-    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: string) => 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' as const) : { 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: FastenMode = 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
-          } as FigureAuthoringAction)
-        : 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: Event) => {
-          const value = (e.target as HTMLSelectElement).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'] as FastenMode[]) : ([...(['meet', 'flush'] as FastenMode[]), ...(turnsInPlace(asset, this.partId) ? (['centre'] as FastenMode[]) : [])])}
-              .mode=${mode}
-              .view=${view}
-              .align=${f.align}
-              .alignMm=${f.alignMm}
-              .gap=${f.gap}
-              .partName=${this.partId}
-              ?locked=${this.locked}
-              ?said=${!!held}
-              @fasten-change=${(e: CustomEvent<FastenChange>) => 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: Event) => ((this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0, gapKept: undefined }), settle())}
-          />
-          <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 }), 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. */
-  private sentenceOf(myFace: string, to: string, mode: FastenMode) {
-    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. */
-  private onFastenChange(asset: FigureAsset, c: FastenChange) {
-    const f = this.fasten
-    if ('targetFace' in c) this.aimAt(asset, { ...f, targetFace: c.targetFace as FigureFace })
-    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 붙이기. */
-  private async onFastenRelease(held: boolean) {
-    if (!held) return
-    await this.updateComplete
-    if (this.fastenCandidate) this.command(this.fastenCandidate.action)
-  }
-
   private 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.
-   */
-  private renderAlignment(axes: { axis: Axis; edges: boolean }[], settle: () => void) {
-    const f = this.fasten
-    const set = (axis: Axis, how: Alignment) => ((this.fasten = { ...f, align: { ...f.align, [axis]: how } }), settle())
-    const setMm = (axis: Axis, mm: number) => ((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: Event) => set(axis, (e.target as HTMLSelectElement).value as Alignment)}>
-            <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: Event) => setMm(axis, Number((e.target as HTMLInputElement).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
@@ -868,7 +624,7 @@ export 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 as Axis) ? (r.axis as Axis) : axes[0]!
@@ -877,13 +633,13 @@ export 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 }) } as FigureAuthoringAction)
       : undefined
     this.rowCandidate = action
-    const set = (next: typeof r) => ((this.row = next), (this.working = 'row'))
+    const set = (next: typeof r) => ((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: Event) => (this.working = (e.target as HTMLDetailsElement).open ? 'row' : 'fasten')
-    return html`<section row><details row-fold ?open=${this.working === 'row'} @toggle=${toggled}>
+    const toggled = (e: Event) => (this.rowOpen = (e.target as HTMLDetailsElement).open)
+    return html`<section row><details row-fold ?open=${this.rowOpen} @toggle=${toggled}>
       ${head}
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>
@@ -905,7 +661,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               <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}
+      ${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>

package/client/modeller/modeller-keys.ts

@@ -36,11 +36,11 @@ export class ModellerKeys implements ReactiveController {
     const canvas = this.of.scene()
     const path = e.composedPath()
     /*
-      A key for something open over the work -- a group's 「⋯」 menu, the view or the history, a question -- is that
-      thing's: heard here first, Esc deselected the part and was kept from the menu, which then could not be closed by
-      the keyboard (2026-10-16).
+      A key for something open over the work -- a group's 「⋯」 menu, the view or the history, a question, a popup -- is
+      that thing's: heard here first, Esc deselected the part and was kept from the menu, which then could not be closed
+      by the keyboard (2026-10-16).
     */
-    if (path.some(node => node instanceof Element && (node.localName.startsWith('ox-popup') || node.getAttribute('role') === 'dialog'))) return
+    if (path.some(node => node instanceof Element && (node.localName.startsWith('ox-popup') || node.localName === 'ox-floating-overlay' || node.getAttribute('role') === 'dialog'))) return
     const action = keyActionOf(
       {
         key: e.key,

package/dist-client/modeller/editor-styles.js

@@ -90,11 +90,27 @@ export const EditorStyles = css `
     color: var(--md-sys-color-primary);
     font-weight: 600;
   }
-  ox-canvas-bar button[save] {
+  /*
+    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):
+    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,
+    a promise to whoever draws the figure, is outlined.
+  */
+  ox-canvas-bar button[save],
+  ox-canvas-bar button[publish] {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     height: 32px;
-    padding: 0 14px;
-    border: none;
+    padding: 0 14px 0 10px;
     border-radius: 999em;
+    font-weight: 600;
+  }
+  ox-canvas-bar button[save] md-icon,
+  ox-canvas-bar button[publish] md-icon {
+    --md-icon-size: 18px;
+  }
+  ox-canvas-bar button[save] {
+    border: 1px solid transparent;
     color: var(--md-sys-color-on-primary);
     background: var(--md-sys-color-primary);
   }
@@ -359,9 +375,10 @@ export const EditorStyles = css `
     align-items: center;
     gap: 4px;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 14px 0 10px;
     border: none;
-    border-radius: 6px;
+    /* Round as save and release beside it: one shape for the bar's end. */
+    border-radius: 999em;
     color: var(--md-sys-color-on-error-container);
     background: var(--md-sys-color-error-container);
   }
@@ -382,12 +399,14 @@ export const EditorStyles = css `
     box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);
   }
   ox-canvas-bar button[publish] {
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
+    border: 1px solid var(--md-sys-color-outline);
+    color: var(--md-sys-color-primary);
     background: var(--md-sys-color-surface);
   }
+  ox-canvas-bar button[publish][aria-pressed='true'] {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
   button:disabled {
     opacity: 0.45;
     cursor: default;