@things-factory/figure-ui 10.1.208 → 10.1.210

package/client/modeller/data-interface.ts

@@ -4,7 +4,7 @@
  * of data is things-scene's; this only lists what there is to choose, drafts a binding the kernel then checks, and edits
  * the schema as a tree. Kept apart from the element so it is tested without a browser.
  */
-import { FIGURE_PART_ID, FIGURE_MOTION_SPEED_MAX, FigureContractError, figureDataRows, parseFigureAccessor } from '@hatiolab/figure-model'
+import { FIGURE_PART_ID, FIGURE_MOTION_SPEED_MAX, FigureContractError, figureAxesOf, figureDataRows, motionStateIdOf, parseFigureAccessor } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureDataBehavior, FigureDataBinding, FigureDataField, FigureDataNode, FigureDataRow, FigureDataValue, FigureDataValueIssue, FigureProposalStep, FigureStatusPort } from '@hatiolab/figure-model'
 import { FigureInputs, type FigureDataResult } from '@hatiolab/things-scene'
 
@@ -286,12 +286,12 @@ export interface EndlessJoint {
   unit: 'deg' | 'rad'
 }
 
-/** The joints that turn without end: revolute, with no limits, leading no one's mimic. */
+/** The axes that turn without end: revolute, with no limits, following no one (ADR-0159: every axis of every joint). */
 export function endlessJointsOf(asset: FigureAsset): EndlessJoint[] {
   const out: EndlessJoint[] = []
-  for (const j of asset.joints ?? []) {
-    if (j.type !== 'revolute' || j.lowerLimit !== undefined || j.upperLimit !== undefined || j.mimic) continue
-    const input = j.state?.id ?? j.id
+  for (const { motion: a } of figureAxesOf(asset.joints)) {
+    if (a.type !== 'revolute' || a.lowerLimit !== undefined || a.upperLimit !== undefined || a.mimic) continue
+    const input = motionStateIdOf(a)
     const unit = asset.document.model.inputs.find(i => i.id === input)?.unit
     if (unit !== 'deg' && unit !== 'rad') continue
     if (!out.some(e => e.input === input)) out.push({ input, label: asset.stateInputs?.[input]?.label ?? input, unit })

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, figureSizeEditOf, figureSizeEditorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang } from '@hatiolab/figure-model'
+import { figureFastenAxesOf, figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditOf, figureSizeEditorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang } 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'
@@ -63,7 +63,8 @@ import { editRefusalOf, partNameRefusalOf, sizeRangeFitsOf, partRefusalOf, place
 import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.js'
 import { HelpToggles } from './help.js'
-import { endPlaceKeyOf, fieldWordsOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceSizeToDeclare, proportionToFollow, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
+import { sizeInputOf } from './size-response.js'
+import { canFollow, followableAxes, endPlaceKeyOf, fieldWordsOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceSizeToDeclare, proportionToFollow, 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'
@@ -360,10 +361,14 @@ export class FigureEditor extends LitElement {
   }
   /**
    * A refusal no particular sentence knows: figure-model's code said as a refusal, never its English; any other error
-   * (the network, the server) as it came.
+   * (the network, the server) as it came. A loop is said as a loop whichever way it was made: a command, or the size
+   * editor's steps (a measure made to follow what follows it, 2026-10-24 -- said as a bare refused step before).
    */
   private said(error: unknown): string {
-    return (error as { code?: string })?.code ? editRefusalOf(error, (key, params) => i18next.t(key, params)) : error instanceof Error ? error.message : String(error)
+    const code = (error as { code?: string })?.code
+    if (code === 'DIMENSION_CYCLE') return i18next.t('figure.text.follow-would-loop')
+    if (code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE') return i18next.t('figure.text.fasten-would-loop')
+    return code ? editRefusalOf(error, (key, params) => i18next.t(key, params)) : error instanceof Error ? error.message : String(error)
   }
   private run(action: () => unknown) {
     try {
@@ -818,6 +823,8 @@ export class FigureEditor extends LitElement {
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      @size-recipe=${(e: CustomEvent) => this.applySizeSteps(e.detail.steps)}
+      @size-input=${(e: CustomEvent) => this.run(() => this.session!.apply(figureSizeEditOf(this.shown()!.asset, e.detail.part, [{ kind: 'set-design', input: e.detail.input, unit: 'mm', value: e.detail.value }], { keep: 'centre' }).changes))}
       @fasten-open=${() => this.openFastening()}
       .previewWords=${this.commandPreview.words()}
       .detachWords=${this.commandPreview.detachWords(shown)}
@@ -837,21 +844,25 @@ export class FigureEditor extends LitElement {
    */
   private renderPartGroups(shown: FigureRevision | undefined, geometry: readonly { id: string }[], fields: FieldLike[], unavailable: boolean, held?: HeldValues) {
     const groups = this.withSizeRow(groupFields(fields, this.selected), held)
-    const size = groups.vectors.filter(g => g.kind === 'vector' && g.name === 'size')
+    const integrated = !!shown && canFollow(shown.asset, this.selected)
+    const dimensionInputs = new Set(integrated ? followableAxes(shown!.asset, this.selected).map(axis => sizeInputOf(shown!.asset, this.selected, axis)) : [])
+    const singles = groups.singles.filter(g => g.kind !== 'single' || !dimensionInputs.has(g.field.id))
+    const size = integrated ? [] : groups.vectors.filter(g => g.kind === 'vector' && g.name === 'size')
     const place = groups.vectors.filter(g => g.kind === 'vector' && g.name !== 'size')
     const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(this.selected))
     const placeLocked = fastened && place.every(g => g.kind === 'vector' && (['x', 'y', 'z'] as const).every(axis => !g.cells[axis]))
     return this.renderLinks(
       unavailable,
       'shape',
-      html`${size.length || groups.singles.length
-          ? html`<div slot="size" group-fields>
+      html`${size.length || singles.length
+          ? html`<section slot="size" group-fields>
+              <h3>${i18next.t(integrated ? 'figure.label.group-shape' : 'figure.label.group-size')}</h3>
               ${size.map(g => this.renderVector(g, unavailable, held))}
-              ${groups.singles.length
-                ? html`<div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
+              ${singles.length
+                ? html`<div form>${singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
                 : nothing}
-              ${this.renderSizeKeeps()}
-            </div>`
+              ${!integrated ? this.renderSizeKeeps() : nothing}
+            </section>`
           : nothing}
         ${place.length && !placeLocked
           ? html`<div slot="place" group-fields>${place.map(g => this.renderVector(g, unavailable, held))}${this.renderHeldAxes(place)}</div>`
@@ -860,7 +871,7 @@ export class FigureEditor extends LitElement {
   }
   /** The 「반응형」 tab of a part: the links' response groups, its row's own section put in by slot. */
   private renderResponse(shown: FigureRevision | undefined, geometry: readonly { id: string }[], unavailable: boolean) {
-    return this.renderLinks(unavailable, 'response', this.renderRepeat(shown, geometry, unavailable))
+    return this.renderLinks(unavailable, 'response', html`<div slot="size-note">${this.renderSizeKeeps()}</div>${this.renderRepeat(shown, geometry, unavailable)}`)
   }
   /**
    * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
@@ -967,6 +978,24 @@ export class FigureEditor extends LitElement {
     const done = this.linkCommand({ ...held.action, remap } as FigureAuthoringAction, held.from)
     if (done && held.from === 'section-editor') this.closeSectionEditor()
   }
+  /** The figure's size, declared for a part to follow, in one line (ADR ruling Q1). */
+  private sizeDeclaredWords() {
+    const size = this.designValues()
+    return i18next.t('figure.text.size-declared-to-follow', {
+      x: Math.round(size['size.x'] ?? 0).toLocaleString(),
+      y: Math.round(size['size.y'] ?? 0).toLocaleString(),
+      z: Math.round(size['size.z'] ?? 0).toLocaleString()
+    })
+  }
+  /**
+   * The size editor's steps, one step of the history. A measure made to follow the figure on a figure with no size
+   * declares it on the way; that is said in one line, as follow-size said it (ADR ruling Q1, 2026-10-24).
+   */
+  private applySizeSteps(steps: readonly FigureProposalStep[]) {
+    const hadSize = this.hasSize()
+    this.run(() => this.session!.applyRecipe(steps))
+    if (!hadSize && !this.error && this.hasSize()) this.notice = this.sizeDeclaredWords()
+  }
   /** Runs a command; true when it was taken. */
   private linkCommand(action: FigureAuthoringAction, from: 'section-editor' | 'panel' = 'panel'): boolean {
     /* Committed or refused, a command in hand is let go of: the figure as it stands is drawn again. */
@@ -978,14 +1007,7 @@ export class FigureEditor extends LitElement {
       this.error = ''
       this.faceMapping = undefined
       /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
-      if (action.kind === 'follow-size' && !hadSize) {
-        const size = this.designValues()
-        this.notice = i18next.t('figure.text.size-declared-to-follow', {
-          x: Math.round(size['size.x'] ?? 0).toLocaleString(),
-          y: Math.round(size['size.y'] ?? 0).toLocaleString(),
-          z: Math.round(size['size.z'] ?? 0).toLocaleString()
-        })
-      }
+      if (action.kind === 'follow-size' && !hadSize) this.notice = this.sizeDeclaredWords()
       this.changed()
       return true
     } catch (error) {
@@ -998,12 +1020,7 @@ export class FigureEditor extends LitElement {
         this.error = ''
         return false
       }
-      this.error =
-        code === 'DIMENSION_CYCLE'
-          ? i18next.t('figure.text.follow-would-loop')
-          : code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE'
-            ? i18next.t('figure.text.fasten-would-loop')
-            : this.said(error)
+      this.error = this.said(error)
       return false
     }
   }
@@ -1243,45 +1260,45 @@ export class FigureEditor extends LitElement {
     const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?'
     const own = `${this.selected}.repeat.pitch`
     /* The pitch as it stands: the part's own number, a constant, or what a pitch that follows a length comes to. */
-    const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(shown, layout?.args[4])
     const fits = layout?.op === 'fit-pitch@1'
-    /* What the pitch gives, in numbers: this many copies at the length it is authored, and how long it may be placed. */
-    const lengthRef = layout?.args[0] ?? ''
-    const length = asset.designInputs[lengthRef]
-    const longest = model.inputs.find(i => i.id === lengthRef)?.max
-    const limit = model.constants.find(c => c.id === layout?.args[6])?.value
+    const pitch = fits ? asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(shown, layout?.args[4]) : this.rowNow(shown)?.pitch
     const field = { id: own, unit: 'mm' as const, role: 'design', value: pitch ?? 0 }
-    const removable = !!asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
+    const record = asset.joints?.find(j => j.body1.part === this.selected && j.repeat)
+    const parent = record && 'part' in record.body0 ? record.body0.part : undefined
+    const removable = !!record
+    const axes = record && 'part' in record.body0 && 'face' in record.body0 ? figureFastenAxesOf(asset, record.body0) : []
+    const update = (change: Partial<NonNullable<typeof record>['repeat']>) => {
+      if (!record?.repeat || unavailable) return
+      this.run(() => this.session!.command({ kind: 'set-joint', joint: { ...record, repeat: { ...record.repeat!, ...change } } }))
+    }
     return html`<section slot="row" row>
       <h3>
         ${i18next.t('figure.label.repeat')}
-        ${groupMenu([{ label: i18next.t('figure.button.remove-repeat'), icon: 'close', disabled: unavailable || !removable, run: () => this.run(() => this.session!.command({ kind: 'remove-repeat', part: this.selected })) }])}
+        <span section-state active>${i18next.t('figure.label.repeat-active')}</span>
       </h3>
-      <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
-      <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
+      <div choice-row role="radiogroup" aria-label=${i18next.t('figure.label.row-basis')}>
+        <label toggle><input type="radio" name="applied-repeat-mode" .checked=${live(fits)} ?disabled=${unavailable || !record} @change=${() => update({ count: undefined, pitch: pitch && pitch > 0 ? pitch : 200 })}>${i18next.t('figure.label.repeat-fills')}</label>
+        <label toggle><input type="radio" name="applied-repeat-mode" .checked=${live(!fits)} ?disabled=${unavailable || !record} @change=${() => update({ count: repeat.count })}>${i18next.t('figure.label.row-by-count')}</label>
+      </div>
+      <p hint>${i18next.t(fits ? 'figure.text.repeat-mode-pitch' : 'figure.text.repeat-mode-count')}</p>
+      <div inline-field><label>${i18next.t('figure.label.size-source')}</label><span value>${parent ?? '—'}</span></div>
+      <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label>${axes.length ? html`<select aria-label=${i18next.t('figure.label.repeat-axis')} ?disabled=${unavailable} .value=${live(axis)} @change=${(e: Event) => update({ axis: (e.target as HTMLSelectElement).value.toUpperCase() as 'X' | 'Y' | 'Z' })}>${axes.map(a => html`<option value=${a} ?selected=${a === axis}>${a.toUpperCase()}</option>`)}</select>` : html`<span value>${axis.toUpperCase()}</span>`}</div>
+      <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label>${!fits && record ? html`<input type="number" min="1" step="1" aria-label=${i18next.t('figure.label.repeat-count')} .value=${live(String(repeat.count))} ?disabled=${unavailable} @change=${(e: Event) => update({ count: (e.target as HTMLInputElement).valueAsNumber })}>` : html`<span value>${repeat.count}</span>`}</div>
       <div inline-field>
         <label>${i18next.t('figure.label.repeat-gap')} <span unit>mm</span></label>
-        <input
+        ${fits ? html`<input
           type="number"
           step="any"
-          aria-label=${own}
-          .value=${String(pitch ?? '')}
-          ?disabled=${unavailable || !fits}
+          aria-label=${i18next.t('figure.label.repeat-gap')}
+          .value=${live(String(pitch ?? ''))}
+          ?disabled=${unavailable}
           @change=${(e: Event) => this.setPitch(field, e)}
-        />
+        />` : html`<span value>${pitch === undefined ? '—' : Number(pitch.toFixed(3))}</span>`}
       </div>
-      <ul row-reading>${rowWordsOf(this.rowNow(shown), (key, params) => i18next.t(key, params)).map(line => html`<li>${line}</li>`)}</ul>
-      <p hint>
-        ${fits && length !== undefined && longest !== undefined && limit !== undefined
-          ? i18next.t('figure.text.repeat-what-pitch-gives', {
-              length: length.toLocaleString(),
-              count: repeat.count,
-              longest: longest.toLocaleString(),
-              limit
-            })
-          : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
-      </p>
-      ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
+      <ul row-reading>${rowWordsOf(this.rowNow(shown), (key, params) => i18next.t(key, params)).slice(1).map(line => html`<li>${line}</li>`)}</ul>
+      <button quiet ?disabled=${unavailable || !removable} @click=${() => this.run(() => this.session!.command({ kind: 'remove-repeat', part: this.selected }))}>${i18next.t('figure.button.remove-repeat')}</button>
+      <p hint>${i18next.t('figure.text.repeat-remove-explained')}</p>
+      ${fits ? this.renderPublicPitch(asset, pitch ?? 0, unavailable) : nothing}
     </section>`
   }
   /** The selected row as it is drawn now, read by figure-model: nothing when it cannot be read. */
@@ -1589,8 +1606,8 @@ export class FigureEditor extends LitElement {
   /** 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) {
     /* 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)}>
+    const name = i18next.t(tab === 'response' && this.selected ? 'figure.label.tab-arrangement' : 'figure.label.tab-short-' + tab)
+    return html`<button tab ?on=${this.tab === tab} title=${tab === 'response' && this.selected ? name : label} aria-label=${name} @click=${() => (this.tab = tab)}>
       <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>
     </button>`
   }
@@ -1717,8 +1734,8 @@ export class FigureEditor extends LitElement {
     if (!summary) return nothing
     return html`<div subject>
       <div subject-summary>
-        ${summary.kind ? html`<b>${summary.kind}</b>` : nothing}
-        ${summary.size ? html`<small>${summary.size}</small>` : nothing}
+        <b>${ownerOf(this.selected)}</b>
+        ${summary.kind ? html`<small>${summary.kind}</small>` : nothing}
       </div>
     </div>`
   }

package/client/modeller/fasten-geometry.ts

@@ -126,7 +126,8 @@ export function overhangOf(view: FaceView, at: Record<Axis, number>): { touching
 }
 
 /** Whether the part turns about a joint: then 가운데를 면에 is offered -- a roller spinning in place. */
-export const turnsInPlace = (asset: FigureAsset, part: string) => (asset.joints ?? []).some(j => j.body1.part === part && (j.type === 'revolute' || j.origin?.facing === 'centre'))
+export const turnsInPlace = (asset: FigureAsset, part: string) =>
+  (asset.joints ?? []).some(j => j.body1.part === part && ((j.motion ?? []).some(a => a.type === 'revolute') || j.origin?.facing === 'centre'))
 
 /**
  * How the face lies on the screen: X across when it is one of the face's axes, else Z; the other down the screen -- up

package/client/modeller/figure-links.ts

@@ -3,24 +3,20 @@ import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing } from 'lit'
 import '@operato/input/ox-input-select-buttons.js'
 import './figure-slot-layout-panel.js'
+import './figure-size-editor.js'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { figureFaceOverhangOf } from '@hatiolab/figure-model'
-import type { FigureAsset, FigureAuthoringAction, FigureDimensionSource, FigureFace } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
 
 import {
   acceptsOf,
   AXES,
   canFasten,
   canFollow,
-  followCommandOf,
-  followableAxes,
   positionIsShare,
-  choiceOf,
-  followWordsOf,
   heldBy,
-  followOf,
   shownWhenOf,
   visibilityControlsOf,
   fasteningOf,
@@ -40,9 +36,7 @@ import {
   fixedJointOf,
   rowOf,
   positionsWorkedOut,
-  measureNow,
   type Axis,
-  type Follow,
   type MotionForm
 } from './links.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
@@ -113,8 +107,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       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] { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 8px; margin: 12px 0; }
+    div[resize-now] div[row] { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
     div[resize-now] span[measure] { font-variant-numeric: tabular-nums; }
     /* Size behaviour is a choice about dimensions only. It never implies a placement or a fastening. */
     /* One of the size group's rows: the group's gap spaces it, as it does the rest (a margin on top of it left a hole). */
@@ -124,13 +118,11 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     details { margin-top: 8px; }
     details[row-fold] { margin: 0; }
     details[row-fold] > summary { padding: 0; color: var(--md-sys-color-on-surface); }
-    details[row-fold] > summary h3 { margin: 0; }
+    details[row-fold] > summary h3 { margin: 0; flex: 1; }
     details[row-fold][open] > summary { margin-bottom: 8px; }
     /* What the command would do, said beside the result drawn on the canvas. */
     ul[preview-words] { margin: 8px 0; padding: 8px 12px 8px 26px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); display: grid; gap: 4px; }
     p[preview-words] { margin: 8px 0; padding: 8px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
-    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; }
@@ -209,6 +201,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.motion = freshMotion()
       this.place = freshPlace()
       this.row = freshRow()
+      this.rowOpen = false
+      this.rowCandidate = undefined
       this.editingMotion = false
     }
   }
@@ -273,13 +267,14 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         How the part answers a size it is placed at (user 2026-10-17, the 「반응형」 tab): its own measures, where it
         stands, and the row it may make -- what Build Once, Fit Anywhere is authored with, in one place.
       */
-      const positions = positionsWorkedOut(asset, this.partId)
+      const positions = held ? [] : positionsWorkedOut(asset, this.partId)
+      this.rowCandidate = undefined
       const response = html`
-        <section size-response>
+        ${canFollow(asset, this.partId) ? html`<section size>
           <h3>${i18next.t('figure.label.group-size')}</h3>
-          <p group-question>${i18next.t('figure.label.resize-intent')}</p>
-          ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.part-cannot-follow')}</p>`}
-        </section>
+          <figure-size-editor .revision=${this.revision} .partId=${this.partId} ?locked=${this.locked}></figure-size-editor>
+          <slot name="size-note"></slot>
+        </section>` : nothing}
         ${positions.length
           ? html`<section position-response>
               <h3>${i18next.t('figure.label.group-position-response')}</h3>
@@ -292,10 +287,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       return response
     }
     const shown = html`
-      <section size>
-        <h3>${i18next.t('figure.label.group-size')}</h3>
-        <slot name="size"></slot>
-      </section>
+      <slot name="size"></slot>
       <section fastening>
         <h3>
           ${i18next.t('figure.label.group-place')}${this.help.button('figure.text.fastening-explained')}
@@ -379,80 +371,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }))
   }
 
-  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 followsAll = editable.every(axis => followOf(asset, this.partId, axis).of === 'instance')
-    /* A size of its own on every axis is the usual: nothing to read, only the way to make it follow (user 2026-10-01). */
-    const allOwn = editable.every(axis => followOf(asset, this.partId, axis).of === 'own')
-    return html`${asset.sizing === 'uniform' ? html`<p hint>${i18next.t('figure.text.resize-uniform-warning')}</p>` : nothing}
-      ${allOwn ? nothing : html`<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(this.revision!, this.partId, axis)
-        return html`<div row>
-          <b>${word(axis)}</b>
-          <span measure>${mm === undefined ? '—' : `${Math.round(mm)} mm`}</span>
-          <span>${custom ? followWordsOf(now, (key, params) => i18next.t(key, params)) : i18next.t(following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
-          ${following
-            ? html`<button quiet resize-unfollow=${axis} ?disabled=${this.locked}
-                @click=${() => {
-                  this.follow(axis, 'own', now)
-                }}>${i18next.t('figure.button.resize-unfollow')}</button>`
-            : nothing}
-        </div>`
-      })}</div>`}
-      ${followsAll
-        ? nothing
-        : 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. */
-      const name = round ? i18next.t(axis === 'x' ? 'figure.label.field-radius' : 'figure.label.field-length') : axis.toUpperCase()
-      return html`<div row>
-        <b>${name}</b>
-        <select ?disabled=${this.locked} @change=${(e: Event) => this.follow(axis, (e.target as HTMLSelectElement).value, now)}>
-          <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
-          ${AXES.filter(one => hasInstanceSize(asset, one)).map(
-            one => html`<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
-                ${i18next.t('figure.label.follows-instance-share', { axis: one.toUpperCase() })}
-              </option>
-              <option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
-                ${i18next.t('figure.label.follows-instance', { axis: one.toUpperCase() })}
-              </option>`
-          )}
-          ${others.flatMap(other =>
-            AXES.map(
-              one => html`<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${i18next.t('figure.label.follows-part-axis', { part: other, axis: one.toUpperCase() })}</option>`
-            )
-          )}
-          ${now.of === 'expression' || now.of === 'input'
-            ? html`<option value=${value} selected>${now.of === 'input' ? now.input : i18next.t('figure.label.follows-expression')}</option>`
-            : nothing}
-        </select>
-        ${now.of === 'instance' || now.of === 'part'
-          ? html`<span></span>
-              <label inline-plus>
-                ${i18next.t('figure.label.follows-plus')}
-                <input
-                  type="number"
-                  step="any"
-                  ?disabled=${this.locked}
-                  .value=${String(now.plus ?? 0)}
-                  @change=${(e: Event) => this.followPlus(axis, now, Number((e.target as HTMLInputElement).value) || 0)}
-                />
-              </label>`
-          : nothing}
-      </div>`
-    })}</div></details>`
-  }
-
   /**
    * 정렬·간격 고치기: 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
@@ -503,20 +421,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     return where
   }
 
-  /** The same source, the same share, a new difference: a leaf the opening less its gaps (link-dimension's `plus`). */
-  private followPlus(axis: Axis, now: Follow, plus: number) {
-    if (now.of !== 'instance' && now.of !== 'part') return
-    if ((now.plus ?? 0) === plus) return
-    const source: FigureDimensionSource = now.of === 'instance' ? { of: 'instance', axis: now.axis } : { of: 'part', part: now.part, axis: now.axis }
-    const times = now.of === 'instance' ? now.times : (now.times ?? 1)
-    this.command({ kind: 'link-dimension', part: this.partId, axis, source, ...(times !== 1 ? { times } : {}), ...(plus ? { plus } : {}), replace: true })
-  }
-
-  private follow(axis: Axis, choice: string, now: Follow) {
-    const action = followCommandOf(this.revision!, this.partId, axis, choice, now)
-    if (action) this.command(action)
-  }
-
   /**
    * Positions worked out from other values, each with the way to
    * keep it where it is. This is the way out the release gate names when a resize leaves a part in the air.
@@ -617,9 +521,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       Folded, open while it is being worked (2026-10-02): a row is made now and then, and most parts stand on the plane,
       where the section said its reason open on every one. Opened, it says why or asks how.
     */
-    const head = html`<summary><h3>${i18next.t('figure.label.repeat')}</h3></summary>`
+    const head = html`<summary><h3>${i18next.t('figure.label.repeat')} <span section-state>${i18next.t('figure.label.repeat-inactive')}</span></h3></summary>`
     if (blocked || !axes.length)
-      return html`<section row><details row-fold>
+      return html`<section row><details row-fold open>
         ${head}
         <p hint row-blocked>${i18next.t(`figure.text.row-blocked-${blocked ?? 'unfastened'}`, { part: this.partId })}</p>
         ${blocked === 'unfastened'
@@ -640,27 +544,29 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const toggled = (e: Event) => (this.rowOpen = (e.target as HTMLDetailsElement).open)
     return html`<section row><details row-fold ?open=${this.rowOpen} @toggle=${toggled}>
       ${head}
+      <p hint>${i18next.t('figure.text.repeat-intro')}</p>
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>
-        <select @change=${(e: Event) => set({ ...r, axis: (e.target as HTMLSelectElement).value as Axis })}>
+        <select aria-label=${i18next.t('figure.label.repeat-axis')} ?disabled=${this.locked} @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>
       </div>
-      <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>
+      <p hint>${i18next.t('figure.text.repeat-direction')}</p>
+      <div choice-row role="radiogroup" aria-label=${i18next.t('figure.label.row-basis')}>
+        <label toggle><input type="radio" name="row-basis" ?disabled=${this.locked} .checked=${r.fills} @change=${() => set({ ...r, fills: true })} />${i18next.t('figure.label.repeat-fills')}</label>
+        <label toggle><input type="radio" name="row-basis" ?disabled=${this.locked} .checked=${!r.fills} @change=${() => set({ ...r, fills: false })} />${i18next.t('figure.label.row-by-count')}</label>
       </div>
       ${r.fills
         ? 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) })} />
+            <input aria-label=${i18next.t('figure.label.repeat-pitch')} ?disabled=${this.locked} 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) => set({ ...r, count: Number((e.target as HTMLInputElement).value) })} />
+              <input aria-label=${i18next.t('figure.label.repeat-count')} ?disabled=${this.locked} 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.rowOpen ? this.renderPreviewWords() : nothing}
+      ${action && this.rowOpen ? html`<p hint>${i18next.t('figure.text.repeat-draft')}</p>${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>
@@ -799,7 +705,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             <span>${i18next.t('figure.label.motion-follow')}</span>
             <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
               <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
-              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.body1.part}${j.state ? ` · ${j.state.id}` : ''}</option>`)}
+              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
             </select>
           </div>`
         : nothing}