@things-factory/figure-ui 10.1.203 → 10.1.205

package/client/modeller/editor.ts

@@ -6,7 +6,7 @@ import { openPopup } from '@operato/layout'
 import { OxPrompt } from '@operato/popup'
 import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
-import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
+import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditOf, figureSizeEditorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
 import type { FigureAsset, FigureAuthoringAction, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement, FigureFaceMappingNeed, FigureFaceRemap } from '@hatiolab/figure-model'
@@ -30,7 +30,8 @@ import './figure-preview.js'
 import './figure-settings.js'
 import { DEFAULT_VIEW, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 import './figure-capability-panel.js'
-import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './gizmo.js'
+import { gizmoChanges, gizmoReachOf, sizeKeepOf, type GizmoReach, type GizmoResult } from './gizmo.js'
+import { keptBySizeOf, partsAtFrame, SIZE_KEEPS_WORDS, startSizeDrag, throughPlaneOf, type SizeDrag, type SizeDragFrame } from './size-drag.js'
 import type { KeyAction } from './keys.js'
 import { ModellerKeys } from './modeller-keys.js'
 import { PaneFold } from './pane-fold.js'
@@ -52,7 +53,7 @@ const NO_MARKS: FigureRenderPart[] = []
 import { apexOver, drawnOf } from './section-drawing.js'
 import { END_FACE } from './section-controls.js'
 import type { FigureCanvas } from './canvas.js'
-import { nudgeOf, placementOf, type ScaleAnchor } from './stage-model.js'
+import { nudgeOf, placementOf } from './stage-model.js'
 
 /** The numbers a rule gives a part's position, turn and size, per axis, for the cells that have no field. */
 type HeldValues = { position?: number[]; rotation?: number[]; size?: (number | undefined)[]; sizeRuled?: boolean }
@@ -62,7 +63,8 @@ import type { FigureGateFinding } from '../types.js'
 import { editRefusalOf, inDeclaredRoom, narrowingRetryOf, partNameRefusalOf, partRefusalOf, placedRefusalOf, recipeRefusalOf, removalNoticeOf } from './refusals.js'
 import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.js'
-import { endPlaceKeyOf, fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
+import { HelpToggles } from './help.js'
+import { endPlaceKeyOf, fieldWordsOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
 import { jointFanOf } from './joint-fan.js'
 import { derivedOf, type FigureRevision } from './revision.js'
 import { jointDragOf } from './joint-drag.js'
@@ -114,8 +116,8 @@ export class FigureEditor extends LitElement {
   /** Why the last recipe was refused, in the kernel's words. */
   @state() private recipeError = ''
   @property({ type: Number }) revision = 0
-  /** The verdict's count, drawn on its tab so it stays in sight while another tab is open. */
-  @property({ type: Number }) instances?: number
+  /** The 「?」 beside a group's title and the sentence it opens. */
+  private readonly help = new HelpToggles(this)
   /** The cost line the parts list shows, from the maturity report. */
   @property({ attribute: false }) budget?: FigureBudgetLine
   /**
@@ -139,12 +141,21 @@ export class FigureEditor extends LitElement {
   /** The view settings or the release history, open over the work from the bar. */
   @state() private overlay?: BarOverlay
   /**
-   * The fastening window open for the selected part (user 2026-10-17): chosen there, applied once. It stands over the
-   * side panel, not over the canvas, so what is chosen is seen in 3D as it is chosen (user 2026-10-19: the standard
-   * popup, always modal, covered the preview). It closes with nothing written when the part, the tab, the middle or a
-   * bar panel changes under it.
+   * The fastening window open for the selected part (user 2026-10-17), in the standard popup, moved by its head
+   * (2026-10-18; put back 2026-10-20 -- the side panel it was moved to could not be moved), with no backdrop, so the
+   * canvas can be pressed while it is open: chosen there, applied once. It closes with nothing written when the part,
+   * the tab or the middle changes under it.
    */
   @state() private fastening = false
+  private fastenPopup?: { close: () => void }
+  private fastenWindow?: HTMLElement & {
+    revision?: FigureRevision
+    partId: string
+    locked: boolean
+    previewWords: string[]
+    error: string
+    aimAt?: (at: { id: string; point?: number[]; normal?: number[] }) => void
+  }
   /** Why the window's 「적용」 was refused, said in it. */
   @state() private fastenError = ''
   /** The face of the part a row of the window's list is on, lit on the canvas while the pointer or the arrows are there. */
@@ -205,6 +216,8 @@ export class FigureEditor extends LitElement {
   @state() private hiddenParts = new Set<string>()
   /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
   @state() private live: LiveValues = NOTHING_LIVE
+  /** A size drag in hand, drawn from figure-model each frame (ADR-0140 4.4); gone with the release. */
+  @state() private sizing?: { part: string; drag: SizeDrag; frame?: SizeDragFrame; through?: number }
   /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
   @state() private sectionEditing: string | null = null
   private lastContext: string | null = null
@@ -234,7 +247,7 @@ export class FigureEditor extends LitElement {
           aria-pressed=${String(this.gizmoMode === tool.mode)}
           ?disabled=${!tool.can}
           aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
-          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + (tool.mode === 'scale' && this.sizeDragTurned(this.asset()!, this.selected) ? this.sizeDragRefusalOf(this.selected) : i18next.t('figure.text.gizmo-not-own'))}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t('figure.text.gizmo-not-own')}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -292,7 +305,7 @@ export class FigureEditor extends LitElement {
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
     if (_changed.has('selected')) this.gizmoMode = undefined
     /* The window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
-    if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit' || this.overlay)) this.closeFastening()
+    if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit')) this.closeFastening()
     /*
      * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
      * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
@@ -322,13 +335,10 @@ export class FigureEditor extends LitElement {
   private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
     /*
       R does what the bar's resize tool does: on a part whose size is not its own to drag the tool is off, so no gizmo is
-      put on it to drag in vain (:3300, 10.1.196) -- the tool's own words are said instead, and a part turned is sent to
-      its size fields.
+      put on it to drag in vain (:3300, 10.1.196) -- the tool's own words are said instead.
     */
     if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale' && !this.reachOf(this.selected).scale) {
-      const asset = this.asset()
-      if (asset && this.sizeDragTurned(asset, this.selected)) this.tellSizeByFields(this.selected)
-      else this.refusals.say(i18next.t('figure.text.gizmo-not-own'))
+      this.refusals.say(i18next.t('figure.text.gizmo-not-own'))
       return
     }
     this.renderRoot.querySelector<FigureCanvas>('figure-canvas')?.gizmo(mode)
@@ -354,6 +364,7 @@ export class FigureEditor extends LitElement {
     } finally {
       /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
       this.live = NOTHING_LIVE
+      this.sizing = undefined
     }
   }
   /** The bodies drawn with the value in hand, or null when nothing is in hand (or the figure cannot take it). */
@@ -363,7 +374,8 @@ export class FigureEditor extends LitElement {
   /** What the canvas draws: the figure with the value in hand when there is one, and without the parts hidden on the workbench. */
   private drawnParts(geometry: Parameters<typeof drawableFigureParts>[0] | undefined, live: FigureRenderPart[] | null) {
     const parts = live ?? drawableFigureParts(geometry ?? [])
-    return parts.filter(body => !this.hiddenParts.has(ownerOf((body as { id: string }).id)))
+    const frame = this.sizing?.frame
+    return (frame ? partsAtFrame(parts, frame.moved) : parts).filter(body => !this.hiddenParts.has(ownerOf((body as { id: string }).id)))
   }
   /**
    * Where the selected part turns and how far, with the pose as it is drawn now -- a value in hand included, so the
@@ -563,60 +575,42 @@ export class FigureEditor extends LitElement {
     if (!id || !this.session || !this.session.read().geometry.some(g => g.id === id)) return none
     try {
       const asset = this.shown()!.asset
-      const reach = gizmoReachOf(asset, id)
-      /*
-        A size drag shows the face it keeps and the commit keeps the same (figureScaleAnchorOf). Where figure-model cannot
-        say which face that is -- a part fastened turned or twisted -- the drag would show one result and write another,
-        so sizing by the gizmo is not offered there; the fields still size it (designer 2026-09-27).
-      */
-      if (reach.scale && this.sizeDragUnsure(asset, id)) return { ...reach, scale: false }
-      return reach
+      /* Turned any way, fastened or not: a size drag is drawn from figure-model's one size function, frame by frame (ADR-0140 4.4). */
+      return gizmoReachOf(asset, id)
     } catch {
       return none
     }
   }
   /**
-   * Whether this part's size is its own to drag but the drag is withheld because it is turned: then the size fields are
-   * the way, and the notice says so. A part whose size is worked out from another part or from the figure's size is not
-   * its own to drag at all; it is not told it is attached turned, nor sent to fields it cannot type in (:3300,
-   * 2026-10-19, the fan's blade-2). Its tool says it is placed by something else, as before.
+   * A size drag in hand, a frame of it: the sizes the handle comes to, through figure-model's size function and the
+   * evaluator stepped to them, drawn and written nowhere (ADR-0140 4.4). Begun at the first frame, from the figure as it
+   * is drawn and the handle the scene says was held; the release writes the last frame's changes.
    */
-  private sizeDragTurned(asset: FigureAsset, id: string): boolean {
-    try {
-      return gizmoReachOf(asset, id).scale && this.sizeDragUnsure(asset, id)
-    } catch {
-      return false
-    }
-  }
-  /** Whether a size drag on this part could not show what is written: figure-model gives no face it keeps. */
-  private sizeDragUnsure(asset: FigureAsset, id: string): boolean {
+  private resizing(id: string, result: GizmoResult) {
+    const part = ownerOf(id)
+    const shown = this.shown()
+    if (!shown || !result.scale) return
     try {
-      return !figureScaleAnchorOf(asset, ownerOf(id))
+      const drawn = drawableFigureParts(this.session!.read().geometry ?? [])
+      if (this.sizing?.part !== part)
+        this.sizing = { part, drag: startSizeDrag(shown.asset, part, shown.inputs, sizeKeepOf(result.grab)), through: throughPlaneOf(shown.asset, drawn, part) }
+      const sizes = gizmoChanges(id, this.reachOf(id), { scale: result.scale }, { ...shown.inputs })
+      this.sizing = { ...this.sizing, frame: this.sizing.drag.frame(sizes) }
     } catch {
-      return true
+      /* A size the figure cannot take on the way: the figure as it stands is drawn, and the release says why. */
+      this.sizing = undefined
     }
   }
   /**
-   * Why this part's size is not dragged, in one line (user 2026-10-19: the reason told the faces kept, and was not
-   * understood): attached turned or twisted, or turned off its upright.
+   * A free part a size change takes past the mounting plane: said, with 「…에 붙이기」 to fasten it there (ADR-0140 5). The
+   * size rule is not changed for it: what the author picks is the fastening, one step of the history.
    */
-  private sizeDragRefusalOf(id: string): string {
-    const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(id))
-    return i18next.t(fastened ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-size-tilted', { part: partLabelOf(id) })
-  }
-  /** The size drag refused, said as a notice with the way to the part's size fields. */
-  private tellSizeByFields(id: string) {
-    this.refusals.point(this.sizeDragRefusalOf(id), { label: i18next.t('figure.button.to-size-fields'), run: () => this.toSizeFields(id) })
-  }
-  /** To the part's first size field it takes typed, on the properties tab, ready to type over. */
-  private async toSizeFields(id: string) {
-    this.middle = 'edit'
-    this.tab = 'properties'
-    this.selected = id
-    await this.updateComplete
-    const field = this.renderRoot.querySelector<HTMLInputElement>('[slot="size"] input:not([disabled]):not([readonly])')
-    field?.focus()
-    field?.select()
+  private tellThroughPlane(part: string, mm: number) {
+    const plane = i18next.t('figure.label.resize-place-' + (this.asset()?.placement ?? 'floor'))
+    this.refusals.point(i18next.t('figure.text.size-through-plane', { part: partLabelOf(part), plane, mm: String(mm) }), {
+      label: i18next.t('figure.button.fasten-to-plane', { plane }),
+      run: () => this.run(() => this.session!.command({ kind: 'attach', part, to: { plane: 'mounting-plane' } }))
+    })
   }
   /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
   private transformed(id: string, result: GizmoResult) {
@@ -642,21 +636,21 @@ export class FigureEditor extends LitElement {
       the shift had been taken for a move of the joint, and the size was dropped).
     */
     const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id))
-    /* A size drag this part cannot show truly is not written: it springs back, and the reason is said. */
-    if (result.scale && result.scale.some(k => Math.abs(k - 1) > 1e-4) && this.sizeDragTurned(asset, id)) {
-      this.tellSizeByFields(id)
-      return this.requestUpdate()
-    }
     /*
-      A size dragged keeps the face the figure's placement keeps, as a size typed does (figure-model's one rule): the
-      gizmo's own anchoring on the opposite face is what the drag shows, not what is written (designer 2026-09-27).
+      A size dragged is written as its last frame was drawn: figure-model's one size function, keeping the side opposite
+      the handle held -- or, fastened, its fastening (ADR-0140 4.1 · 4.4). What the scene put the part at is not read.
     */
     const scaled = !!result.scale && !result.rotation && result.scale.some(k => Math.abs(k - 1) > 1e-4)
     const taken = jointed || scaled ? { scale: result.scale } : result
     const written = gizmoChanges(id, this.reachOf(id), taken, sizes)
-    const changes = scaled && !jointed ? figureSizeEditChanges(asset, ownerOf(id), written) : written
+    const drawnLast = this.sizing?.part === ownerOf(id) ? this.sizing.frame : undefined
+    const changes = !scaled ? written : drawnLast ? drawnLast.changes : figureSizeEditOf(asset, ownerOf(id), written, sizeKeepOf(result.grab)).changes
     if (changes.length) {
+      const through = scaled ? (this.sizing?.part === ownerOf(id) ? this.sizing.through : undefined) ?? throughPlaneOf(asset, drawableFigureParts(view.geometry), ownerOf(id)) : 0
       this.run(() => this.session!.apply(changes))
+      /* Taken past the mounting plane by the size it was given: said with how far, once it is written, and the way to fasten it (ADR-0140 5). */
+      const now = scaled ? throughPlaneOf(this.shown()!.asset, drawableFigureParts(this.session!.read().geometry ?? []), ownerOf(id)) : 0
+      if (now > through + 0.5) this.tellThroughPlane(ownerOf(id), now)
       return
     }
     if (jointed && result.scale) {
@@ -850,6 +844,7 @@ export class FigureEditor extends LitElement {
               ${groups.singles.length
                 ? html`<div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
                 : nothing}
+              ${this.renderSizeKeeps()}
             </div>`
           : nothing}
         ${place.length && !placeLocked
@@ -934,24 +929,6 @@ export class FigureEditor extends LitElement {
     return html`${panel('view', 'figure.label.tab-environment', html`<figure-settings .view=${this.view} @update-view=${(e: CustomEvent) => this.setView(e.detail.view)}></figure-settings>`)}
       ${panel('history', 'figure.button.release', html`<slot name="history"></slot>`)}`
   }
-  /**
-   * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
-   * while dragging and the commit keeps it, so nothing jumps on release. A part whose fastening is turned has none the
-   * rule can say, and the gizmo keeps its own (the face across from the handle).
-   */
-  private anchorsOf(asset: FigureAsset | undefined): Record<string, ScaleAnchor> {
-    let next: Record<string, ScaleAnchor> = {}
-    try {
-      const anchor = asset && this.selected ? figureScaleAnchorOf(asset, this.selected) : undefined
-      if (anchor) next = { [this.selected]: anchor }
-    } catch {
-      next = {}
-    }
-    /* The same object while it says the same thing: the canvas stands its parts up again when this changes. */
-    if (JSON.stringify(next) !== JSON.stringify(this.lastAnchors)) this.lastAnchors = next
-    return this.lastAnchors
-  }
-  private lastAnchors: Record<string, ScaleAnchor> = {}
   /** Data tried in the data tab, given to the preview's figures as their `data`; null when none is (ADR-0051 §8). */
   @state() private dataSample: unknown = null
   /** The figure's controls: try a value, name it, set its range and travel time, keep the pose. */
@@ -1037,17 +1014,38 @@ export class FigureEditor extends LitElement {
   private changeField(field: { id: string; unit: FigureInputChange['unit']; role?: string }, event: Event) {
     const input = event.target as HTMLInputElement,
       value = input.valueAsNumber
-    /* A size typed in keeps the face the figure's placement keeps -- figure-model's one rule, as the gizmo and "follow the size" do. */
+    /* A number typed keeps the part's middle, or its fastening -- figure-model's one size function (ADR-0140 4.1). */
     const part = this.selected
     const change: FigureInputChange = { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value }
-    this.run(() => this.session!.apply(field.role !== 'state' && part ? figureSizeEditChanges(this.shown()!.asset, part, [change]) : [change]))
+    const asset = this.shown()?.asset
+    const before = asset && part ? throughPlaneOf(asset, drawableFigureParts(this.session!.read().geometry ?? []), part) : 0
+    this.run(() => this.session!.apply(field.role !== 'state' && part ? figureSizeEditOf(this.shown()!.asset, part, [change], { keep: 'centre' }).changes : [change]))
+    /* Typed past the mounting plane: said, with the way to fasten it there (ADR-0140 5). */
+    const after = asset && part && field.role !== 'state' ? throughPlaneOf(this.shown()!.asset, drawableFigureParts(this.session!.read().geometry ?? []), part) : 0
+    if (after > before + 0.5) this.tellThroughPlane(part, after)
     // Rejected edits must also restore the displayed numeric value.
     input.value = String(this.session!.read().fields.find(i => i.id === field.id)!.value)
   }
   /** Typing or a held spinner: each number on the way is drawn; the field's change records it. */
-  private typing(field: { id: string }, event: Event) {
+  private typing(field: { id: string; unit?: FigureInputChange['unit']; role?: string }, event: Event) {
     const value = (event.target as HTMLInputElement).valueAsNumber
-    if (Number.isFinite(value)) this.hold({ [field.id]: value })
+    if (Number.isFinite(value)) this.hold(this.heldOf(field, value))
+  }
+  /**
+   * The values in hand for a number typed or scrubbed: what its release writes -- a size with the part's middle kept,
+   * or its fastening (figure-model's one size function, ADR-0140 4.1), so the figure does not jump on the release.
+   */
+  private heldOf(field: { id: string; unit?: FigureInputChange['unit']; role?: string }, value: number, sized?: ReturnType<typeof figureSizeEditorOf>): Record<string, number> {
+    const part = this.selected
+    const asset = this.shown()?.asset
+    if (field.role === 'state' || !part || !asset) return { [field.id]: value }
+    const change: FigureInputChange = { kind: 'set-design', input: field.id, unit: field.unit ?? 'mm', value }
+    try {
+      const { changes } = sized ? sized([change], { keep: 'centre' }) : figureSizeEditOf(asset, part, [change], { keep: 'centre' })
+      return Object.fromEntries(changes.map(c => [c.input, c.value as number]))
+    } catch {
+      return { [field.id]: value }
+    }
   }
   /**
    * Drag a field's label (or an axis letter) sideways to scrub its value, as vector tools do: the figure follows the
@@ -1062,10 +1060,13 @@ export class FigureEditor extends LitElement {
     label.setPointerCapture(down.pointerId)
     const start = field.value
     let value = start
+    /* Prepared once for the scrub: each move is a size through the same function its release writes with. */
+    const asset = this.shown()?.asset
+    const sized = asset && this.selected && field.role !== 'state' ? (() => { try { return figureSizeEditorOf(asset, this.selected) } catch { return undefined } })() : undefined
     const move = (e: PointerEvent) => {
       value = scrubbed(start, e.clientX - down.clientX, scrubStep(field.unit, start, e.shiftKey))
       input.value = String(value)
-      this.hold({ [field.id]: value })
+      this.hold(this.heldOf(field, value, sized))
     }
     const up = (e: PointerEvent) => {
       label.removeEventListener('pointermove', move)
@@ -1106,27 +1107,35 @@ export class FigureEditor extends LitElement {
       return { of, toDeclare }
     })
     const range = measured.of
-    /* No size yet: the figure is declared its size from its parts, so a board can resize it and parts can follow it. */
+    /*
+      In words a person reads (user 2026-10-19/20): what the figure does on a drawing, not the inputs behind it. Fixed,
+      it says the size it is always drawn at; resizable, the sizes it may take on each axis and the parts that change
+      with it. The way to it stays one press -- a figure no part follows (a robot scaled whole) reaches the one-ratio
+      rule only from here -- and the help mark says how parts are made to follow.
+    */
+    const mm = (v: number) => Math.round(v).toLocaleString()
     const toDeclare = measured.toDeclare
+    const title = (explained: string) =>
+      html`<h3>${i18next.t('figure.label.board-size')}${this.help.button(explained)}</h3>${this.help.hint(explained)}`
     if (!range && toDeclare)
-      return html`<section>
-        <h3>${i18next.t('figure.label.instance-range')}</h3>
-        <p hint>${i18next.t('figure.text.instance-size-undeclared')}</p>
+      return html`<section board-size>
+        ${title('figure.text.board-size-fixed-explained')}
+        <p fixed-size>${i18next.t('figure.text.board-size-fixed', { x: mm(toDeclare.at.x), y: mm(toDeclare.at.y), z: mm(toDeclare.at.z) })}</p>
         <button act ?disabled=${unavailable} @click=${() => this.linkCommand({ kind: 'declare-instance-size', range: toDeclare.range, at: toDeclare.at })}>
-          <md-icon>straighten</md-icon>${i18next.t('figure.button.declare-instance-size')}
+          <md-icon>open_in_full</md-icon>${i18next.t('figure.button.declare-instance-size')}
         </button>
       </section>`
     if (!range) return nothing
-    const mm = (v: number) => Math.round(v).toLocaleString()
     const differs = rangeDiffers(range.declared, range.measured)
-    return html`<section>
-      <h3>${i18next.t('figure.label.instance-range')}</h3>
+    const followers = sizeFollowersOf(asset)
+    return html`<section board-size>
+      ${title('figure.text.board-size-range-explained')}
       ${(['x', 'y', 'z'] as const).map(
         axis => html`<div inline-field>
-          <label>${axis.toUpperCase()} <span unit>mm</span></label>
-          <div pair>
+          <label>${i18next.t('figure.label.resize-' + axis)} <span unit>mm</span></label>
+          <div pair range>
             ${(['min', 'max'] as const).map(
-              bound => html`<input
+              (bound, i) => html`${i ? html`<span dash aria-hidden="true">–</span>` : nothing}<input
                 aria-label=${`size.${axis}.${bound}`}
                 type="number"
                 step="any"
@@ -1141,6 +1150,13 @@ export class FigureEditor extends LitElement {
           </div>
         </div>`
       )}
+      <p followers>
+        ${followers.length
+          ? i18next.t('figure.text.board-size-followers', {
+              parts: followers.length > 4 ? i18next.t('figure.text.board-size-followers-more', { first: followers.slice(0, 4).join(', '), rest: String(followers.length - 4) }) : followers.join(', ')
+            })
+          : i18next.t('figure.text.board-size-no-followers')}
+      </p>
       ${differs
         ? html`<p hint>
               ${i18next.t('figure.text.instance-range-can-widen', {
@@ -1488,44 +1504,49 @@ export class FigureEditor extends LitElement {
     this.openFastening()
   }
   private openFastening() {
-    if (!this.selected || this.fastening) return
+    if (!this.selected || this.fastenPopup) return
     this.fastenError = ''
     this.fastenHover = null
-    /* One panel over the side at a time: the view or the history gives way to the window. */
-    this.overlay = undefined
     this.fastening = true
+    const content = document.createElement('figure-fasten-dialog') as NonNullable<typeof this.fastenWindow>
+    content.addEventListener('preview-command', e => this.commandPreview.ask((e as CustomEvent).detail))
+    content.addEventListener('fasten-hover', e => this.hoverFastening((e as CustomEvent).detail))
+    content.addEventListener('fasten-apply', e => this.applyFastening((e as CustomEvent).detail.action))
+    content.addEventListener('fasten-cancel', () => this.closeFastening())
+    this.fastenWindow = content
+    this.tellFastening()
+    /* No backdrop: the canvas stays reachable while it is open -- a part pressed there is aimed at (ADR-0140 stage 4). */
+    const popup = openPopup(html`${content}`, { title: i18next.t('figure.label.fastening'), size: 'fit', backdrop: false, movable: true, closable: true, escapable: true })
+    this.fastenPopup = popup
+    /* Closed by its own X or Esc as well: the editor lets go of it the same way. */
+    popup.result.then(() => this.fastenPopup === popup && this.fastenClosed())
   }
   private closeFastening() {
+    const popup = this.fastenPopup
+    this.fastenClosed()
+    popup?.close()
+  }
+  private fastenClosed() {
+    this.fastenPopup = undefined
+    this.fastenWindow = undefined
     this.fastening = false
     this.fastenError = ''
     this.fastenHover = null
   }
-  /**
-   * The fastening window over the side panel, as the bar's panels stand there: the figure on screen, the part, and what
-   * the preview and a refusal said are the editor's. Its own Esc and 「취소」 close it, as its X does.
-   */
-  private renderFastening(unavailable: boolean) {
-    if (!this.fastening || !this.selected) return nothing
-    return html`<div side-overlay fasten-panel>
-      <div overlay-head>
-        <h3>${i18next.t('figure.label.fastening')}</h3>
-        <button quiet fasten-close aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${() => this.closeFastening()}>
-          <md-icon>close</md-icon>
-        </button>
-      </div>
-      <figure-fasten-dialog
-        overlay-body
-        .revision=${this.shown()}
-        .partId=${this.selected}
-        ?locked=${unavailable}
-        .previewWords=${this.commandPreview.words()}
-        .error=${this.fastenError}
-        @preview-command=${(e: CustomEvent) => this.commandPreview.ask(e.detail)}
-        @fasten-hover=${(e: CustomEvent) => this.hoverFastening(e.detail)}
-        @fasten-apply=${(e: CustomEvent) => this.applyFastening(e.detail.action)}
-        @fasten-cancel=${() => this.closeFastening()}
-      ></figure-fasten-dialog>
-    </div>`
+  /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+  private tellFastening() {
+    const content = this.fastenWindow
+    const view = this.session?.read()
+    if (!content || !view) return
+    content.revision = this.shown()
+    content.partId = this.selected
+    content.locked = view.loading || !!view.error || view.saving || !view.context
+    content.previewWords = this.commandPreview.words()
+    content.error = this.fastenError
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.closeFastening()
   }
   /** 「적용」: the command, one step; refused, the window stays open and says why. */
   private applyFastening(action: FigureAuthoringAction) {
@@ -1584,15 +1605,16 @@ export class FigureEditor extends LitElement {
     return this.shown()?.asset
   }
   /** A side tab says what it is in words under its icon: the icons alone had to be learnt (designer 2026-09-27, U05). */
-  private renderTab(tab: SideTab, icon: string, label: string, badge?: number) {
+  private renderTab(tab: SideTab, icon: string, label: string) {
     /* Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. */
     const name = i18next.t('figure.label.tab-short-' + tab)
     return html`<button tab ?on=${this.tab === tab} title=${label} aria-label=${name} @click=${() => (this.tab = tab)}>
-      <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
+      <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>
     </button>`
   }
   updated(changed: PropertyValues<this>) {
     super.updated?.(changed)
+    this.tellFastening()
     /* Nothing blocks release any more: the list under the bar closes, and opens fresh when something does again. */
     if (changed.has('releaseBlockers') && !this.releaseBlockers.length && this.blockersOpen) this.blockersOpen = false
     this.refusals.tell(changed)
@@ -1617,7 +1639,8 @@ export class FigureEditor extends LitElement {
     if (!part || !drawn || part.shape.dimensions.jamb !== undefined) return nothing
     const asset = this.asset() as FigureAsset
     const measures = figureSectionMeasuresOf(asset, this.selected)
-    const kept = figureScaleAnchorOf(asset, this.selected)?.[drawn.axis]
+    /* What a measure typed here keeps: the part's middle, or its fastening (ADR-0140 4.1). */
+    const kept = keptBySizeOf(asset, this.selected)
     return html`<figure-section-editor
       .body=${{ ...part, id: this.selected }}
       .measures=${measures}
@@ -1765,13 +1788,12 @@ export class FigureEditor extends LitElement {
       held = undefined
     }
     const roomFields = own.filter(i => roomOnly.includes(i.id))
-    const status = view.loading
-      ? 'figure.text.loading-figure'
-      : view.saving
-        ? 'figure.text.saving-figure'
-        : view.dirty || !view.id
-          ? 'figure.text.unsaved-changes'
-          : 'figure.text.saved'
+    /*
+      Only what is under way is said. Saved or not is the save button's: filled and pressable when there is something
+      to save, dimmed when not -- the saved and unsaved words beside it said the same thing again in the primary
+      colour, read as a button (screen copy rule: a state is the control's).
+    */
+    const status = view.loading ? 'figure.text.loading-figure' : view.saving ? 'figure.text.saving-figure' : ''
     /*
       A figure with no parts yet is not one that failed: what blocks its release is said once it has something to
       release (first 15 minutes, 2026-10-16 evening -- red from the first click read as a failure). The verdict tab
@@ -1799,7 +1821,7 @@ export class FigureEditor extends LitElement {
             ${i18next.t('figure.label.mode-' + mode)}
           </button>`
         )}
-        <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
+        ${status ? html`<span slot="status" class="status" role="status">${i18next.t(status)}</span>` : nothing}
         <span slot="status" release-state>${this.releaseWords(view)}</span>
         ${blockers.length
           ? html`<button slot="commit" release-blocked aria-expanded=${String(this.blockersOpen)} @click=${() => (this.blockersOpen = !this.blockersOpen)}>
@@ -1882,7 +1904,6 @@ export class FigureEditor extends LitElement {
           <figure-canvas
           .view=${this.view}
           .parts=${this.drawnParts(view.geometry, live)}
-          .anchors=${this.anchorsOf(asset)}
           .fan=${this.fanOf(shown, live)}
           .ghost=${this.previewShown().ghost}
           .highlight=${this.previewShown().highlight}
@@ -1890,9 +1911,13 @@ export class FigureEditor extends LitElement {
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
+          ?aiming=${this.fastening}
           .reach=${unavailable ? { translate: false, rotate: false, scale: false } : this.reachOf(this.selected)}
+          @part-sizing=${(e: CustomEvent) => this.resizing(e.detail.id, e.detail.result)}
           @part-transformed=${(e: CustomEvent) => this.transformed(e.detail.id, e.detail.result)}
           @part-selected=${(e: CustomEvent<string>) => this.choose(e.detail)}
+          @part-aimed=${(e: CustomEvent<{ id: string; point?: number[]; normal?: number[] }>) =>
+            this.fastenWindow?.aimAt?.(e.detail)}
           @render-error=${(e: CustomEvent<Error>) => {
             this.error = e.detail.message
           }}
@@ -1904,7 +1929,7 @@ export class FigureEditor extends LitElement {
             ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
             ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
             ${this.renderTab('data', 'sensors', i18next.t('figure.label.tab-data'))}
-            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
+            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'))}
           </div>
           <slot name="notice"></slot>
           <div panel ?off=${tab !== 'properties'}>
@@ -1980,7 +2005,7 @@ export class FigureEditor extends LitElement {
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
         </aside>
       </ox-three-pane>
-      ${this.renderOverlay()} ${this.renderFastening(unavailable)}`
+      ${this.renderOverlay()}`
   }
   /** Position, rotation and size as rows of three cells; the shape's own measures one to a line, under their title. */
   private renderGroups(
@@ -2057,6 +2082,12 @@ export class FigureEditor extends LitElement {
    * rule" named nothing): a fastened part's place and turn are its fastening's; other numbers are worked out from
    * something else. A size that follows something is said at the panel's head, so not again here.
    */
+  /** What a size typed keeps, under the size fields: the part's middle, where it is fastened, or only its size (ADR-0140 4.1). */
+  private renderSizeKeeps() {
+    const asset = this.asset()
+    const kept = asset && this.selected ? keptBySizeOf(asset, this.selected) : undefined
+    return kept ? html`<p hint size-keeps>${i18next.t(SIZE_KEEPS_WORDS[kept])}</p>` : nothing
+  }
   private renderHeldAxes(vectors: FieldGroup[]) {
     const fastened = !!(this.asset())?.joints?.some(j => j.body1.part === ownerOf(this.selected))
     const held = vectors.filter(g => g.kind === 'vector' && g.name !== 'size' && (['x', 'y', 'z'] as const).some(axis => !g.cells[axis]))