@things-factory/figure-ui 10.1.44 → 10.1.45

package/client/modeller/figure-v3-links.ts

@@ -0,0 +1,303 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { V3_FACES } from '@hatiolab/figure-model'
+import type { V3Asset, V3AuthoringAction, V3DimensionSource, V3Face } from '@hatiolab/figure-model'
+
+import { AXES, canFasten, canFollow, choiceOf, fastenedTo, followOf, hasInstanceSize, motionOf, positionsWorkedOut, type Axis, type Follow } from './v3-links.js'
+
+const FACES = Object.keys(V3_FACES) as V3Face[]
+
+/**
+ * What a part is tied to — its size response, what it is fastened to, how it moves (parity rows ④ ⑤ ⑥).
+ *
+ * 「Build Once, Fit Anywhere」 lives here: a dimension that follows the instance size or another part is what lets
+ * a figure be placed at any size, and a part fastened to the face it rests on is what keeps it there when that
+ * happens. The release gate refuses a figure that falls apart when resized, and tells the author to fasten the
+ * parts that come away — this is where they do it. Motion is the V2 joint: a slide or a turn driven by a control.
+ *
+ * The V2 inspector has these as its dimensions, placement and joint sections, in that order; so does this. Every
+ * change is one figure-model authoring command, sent as `v3-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
+ * size the figure does not declare) are not offered, so the author is not sent into a refusal.
+ */
+@customElement('figure-v3-links')
+export class FigureV3Links extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 10px;
+    }
+    h3 {
+      font-size: var(--ui-t-body, 13px);
+      margin: 12px 0 0;
+    }
+    div[row] {
+      display: grid;
+      grid-template-columns: 24px minmax(0, 1fr);
+      gap: 6px;
+      align-items: center;
+    }
+    div[form] {
+      display: grid;
+      grid-template-columns: 96px minmax(0, 1fr);
+      gap: 6px;
+      align-items: center;
+    }
+    div[pair] {
+      display: flex;
+      gap: 6px;
+    }
+    div[pair] > * {
+      flex: 1;
+      min-width: 0;
+    }
+    select,
+    input,
+    button {
+      font: inherit;
+      min-width: 0;
+    }
+    button[act] {
+      justify-self: start;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border: none;
+      border-radius: 999em;
+      cursor: pointer;
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+    }
+    button[act]:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    button[act] md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    small,
+    p[hint] {
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    b[bound] {
+      font-weight: 600;
+    }
+    label[toggle] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+  `
+
+  /** The asset being edited. */
+  @property({ attribute: false }) asset?: V3Asset
+  /** The selected part. */
+  @property() partId = ''
+  /** The part's own extent along its axes now, in mm — what a dimension is fixed at when it stops following. */
+  @property({ attribute: false }) dims?: [number, number, number]
+  @property({ type: Boolean }) locked = false
+
+  @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0 }
+  @state() private motion = { kind: 'slide' as 'slide' | 'turn', axis: 'x' as Axis, id: '', min: 0, max: 500 }
+
+  render() {
+    const asset = this.asset
+    if (!asset || !this.partId) return nothing
+    return html`
+      <h3>${i18next.t('figure.label.dimensions')}</h3>
+      ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      <h3>${i18next.t('figure.label.placement')}</h3>
+      ${this.renderPositions(asset)}
+      ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      <h3>${i18next.t('figure.label.motion')}</h3>
+      ${this.renderMotion(asset)}
+    `
+  }
+
+  private renderDimensions(asset: V3Asset) {
+    const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
+    return AXES.map(axis => {
+      const now = followOf(asset, this.partId, axis)
+      const value = choiceOf(now)
+      return html`<div row>
+        <b>${axis.toUpperCase()}</b>
+        <select ?disabled=${this.locked || now.of === 'expression'} @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=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
+              ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
+            </option>`
+          )}
+          ${others.flatMap(other =>
+            AXES.map(
+              one => html`<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${other} · ${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>
+      </div>`
+    })
+  }
+
+  private follow(axis: Axis, choice: string, now: Follow) {
+    const following = now.of !== 'own'
+    if (choice === 'own') {
+      if (!following) return
+      const mm = Math.max(1, Math.round(this.dims?.[AXES.indexOf(axis)] ?? 100))
+      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm })
+      return
+    }
+    const [of, a, b] = choice.split(':')
+    const source: V3DimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
+    this.command({ kind: 'link-dimension', part: this.partId, axis, source, replace: following })
+  }
+
+  /**
+   * Positions worked out from other values — V2's anchor rules, as the converter wrote them — 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.
+   */
+  private renderPositions(asset: V3Asset) {
+    return positionsWorkedOut(asset, this.partId).map(
+      axis => html`<div pair>
+        <span>${axis.toUpperCase()} · ${i18next.t('figure.label.position-worked-out')}</span>
+        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'fix-position', part: this.partId, axis })}>
+          <md-icon>push_pin</md-icon>${i18next.t('figure.button.fix-position')}
+        </button>
+      </div>`
+    )
+  }
+
+  private renderFastening(asset: V3Asset) {
+    const to = fastenedTo(asset, this.partId)
+    const f = this.fasten
+    const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one))
+    return html`
+      ${to
+        ? html`<div pair>
+            <span>${i18next.t('figure.label.fastened-to')}: <b bound>${to}</b></span>
+            <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
+              <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
+            </button>
+          </div>`
+        : html`<p hint>${i18next.t('figure.text.fastening-explained')}</p>`}
+      <div form>
+        <span>${i18next.t('figure.label.my-face')}</span>
+        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as V3Face })}>
+          ${FACES.map(face => html`<option value=${face} ?selected=${face === f.face}>${i18next.t('figure.label.face-' + face)}</option>`)}
+        </select>
+      </div>
+      <label toggle>
+        <input type="checkbox" .checked=${f.toPlane} @change=${(e: Event) => (this.fasten = { ...f, toPlane: (e.target as HTMLInputElement).checked })} />
+        ${i18next.t('figure.label.stands-on-plane')}
+      </label>
+      ${f.toPlane
+        ? nothing
+        : html`<div form>
+            <span>${i18next.t('figure.label.target-part')}</span>
+            <select @change=${(e: Event) => (this.fasten = { ...f, target: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!f.target}>—</option>
+              ${targets.map(one => html`<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.target-face')}</span>
+            <select @change=${(e: Event) => (this.fasten = { ...f, targetFace: (e.target as HTMLSelectElement).value as V3Face })}>
+              ${FACES.map(face => html`<option value=${face} ?selected=${face === f.targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.facing-meet')}</span>
+            <select @change=${(e: Event) => (this.fasten = { ...f, facing: (e.target as HTMLSelectElement).value as 'meet' | 'flush' })}>
+              <option value="meet" ?selected=${f.facing === 'meet'}>${i18next.t('figure.label.facing-meet')}</option>
+              <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
+            </select>
+          </div>`}
+      <div form>
+        <span>${i18next.t('figure.label.gap')}</span>
+        <input type="number" step="any" .value=${String(f.gap)} @change=${(e: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
+      </div>
+      <button
+        act
+        ?disabled=${this.locked || (!f.toPlane && !f.target)}
+        @click=${() =>
+          this.command({
+            kind: 'attach',
+            part: this.partId,
+            face: f.face,
+            to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: f.targetFace },
+            ...(f.toPlane ? {} : { facing: f.facing }),
+            ...(f.gap ? { gap: f.gap } : {}),
+            replace: !!to
+          } as V3AuthoringAction)}
+      >
+        <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
+      </button>
+    `
+  }
+
+  private renderMotion(asset: V3Asset) {
+    const now = motionOf(asset, this.partId)
+    if (now) {
+      return html`<div pair>
+        <span>
+          ${i18next.t('figure.label.motion-' + now.kind)} · ${String(now.axis).toUpperCase()}
+          ${now.control ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>` : nothing}
+        </span>
+        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-motion', part: this.partId })}>
+          <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
+        </button>
+      </div>`
+    }
+    const m = this.motion
+    const unit = m.kind === 'turn' ? 'deg' : 'mm'
+    return html`
+      <p hint>${i18next.t('figure.text.motion-explained')}</p>
+      <div pair>
+        <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn')}>
+          <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>
+          <option value="turn" ?selected=${m.kind === 'turn'}>${i18next.t('figure.label.motion-turn')}</option>
+        </select>
+        <select @change=${(e: Event) => (this.motion = { ...m, axis: (e.target as HTMLSelectElement).value as Axis })}>
+          ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
+        </select>
+      </div>
+      <div form>
+        <span>${i18next.t('figure.label.control-id')}</span>
+        <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
+        <span>${i18next.t('figure.label.control-range')} (${unit})</span>
+        <div pair>
+          <input type="number" step="any" .value=${String(m.min)} @change=${(e: Event) => (this.motion = { ...m, min: Number((e.target as HTMLInputElement).value) })} />
+          <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
+        </div>
+      </div>
+      <button
+        act
+        ?disabled=${this.locked || !(m.max > m.min)}
+        @click=${() =>
+          this.command({
+            kind: 'add-motion',
+            part: this.partId,
+            motion: { kind: m.kind, axis: m.axis },
+            state: { id: m.id || `${this.partId}-${m.kind}`, unit, min: m.min, max: m.max, start: m.min }
+          })}
+      >
+        <md-icon>animation</md-icon>${i18next.t('figure.button.add-motion')}
+      </button>
+    `
+  }
+
+  private setKind(kind: 'slide' | 'turn') {
+    this.motion = kind === 'turn' ? { ...this.motion, kind, min: -90, max: 90 } : { ...this.motion, kind, min: 0, max: 500 }
+  }
+
+  private command(action: V3AuthoringAction) {
+    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))
+  }
+}
+

package/client/modeller/modeller-route.ts

@@ -1,25 +1,10 @@
 /**
- * Which modeller opens a figure — by the format of its source, which the server reports (`format`).
- *
- * The catalogue sent every figure to the V2 modeller, so a converted figure could only be opened by typing the V3
- * page's address (2026-09-24). A new figure starts in V3: new V2 figures would only add to what the cutover has to
- * convert (ADR-0087). A figure is opened in V3 only when the server says it is V3 — an unknown format goes to the
- * V2 page, which reports what it could not read.
+ * The one modeller. Every figure is V3 since ADR-0087 step 5 (2026-09-24, user decision: V2 is not kept), so the
+ * catalogue, a new figure and an old address all open the same page. `figure-v3-modeller` stays as an alias so a
+ * link written before the switch still lands.
  */
-export const V3_MODELLER = 'figure-v3-modeller'
-export const V2_MODELLER = 'figure-modeller'
+export const MODELLER = 'figure-modeller'
 
-export function modellerPathOf(figure?: { id?: string; format?: string | null }): string {
-  if (!figure?.id) return V3_MODELLER
-  return figure.format === 'v3' ? `${V3_MODELLER}/${figure.id}` : `${V2_MODELLER}/${figure.id}`
-}
-
-/** The version a V3 asset stamps on itself. The V2 page forwards such a figure rather than failing on it. */
-export function isV3Source(source?: string | null): boolean {
-  if (!source) return false
-  try {
-    return (JSON.parse(source) as { version?: unknown })?.version === 'figure-v3-asset-1'
-  } catch {
-    return false
-  }
+export function modellerPathOf(figure?: { id?: string }): string {
+  return figure?.id ? `${MODELLER}/${figure.id}` : MODELLER
 }

package/client/modeller/v3-editor.ts

@@ -1,15 +1,16 @@
 import { LitElement, html, css, type PropertyValues } from 'lit'
 import { i18next } from '@operato/i18n'
 import { customElement, property, state } from 'lit/decorators.js'
-import type { V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
+import type { V3AuthoringAction, V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
 import { captureV3Thumbnail } from './v3-thumbnail.js'
 import { drawableV3Parts } from './v3-renderer.js'
 import './v3-canvas.js'
 import './figure-v3-parts.js'
 import './figure-v3-material.js'
+import './figure-v3-links.js'
 import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
-import { alignChanges, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
+import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
 import type { V3PartRow } from './figure-v3-parts.js'
 import type { FigureV3Canvas } from './v3-canvas.js'
 
@@ -420,6 +421,46 @@ export class FigureV3Editor extends LitElement {
             : String(error)
     }
   }
+  /** Size response, fastening and motion for the selected part (parity ④ ⑤ ⑥), as authoring commands. */
+  private renderLinks(unavailable: boolean) {
+    let asset
+    try {
+      asset = JSON.parse(this.session!.source())
+    } catch {
+      return null
+    }
+    let dims: [number, number, number] | undefined
+    try {
+      dims = boxOf(asset, this.selected)?.dims
+    } catch {
+      dims = undefined
+    }
+    return html`<figure-v3-links
+      .asset=${asset}
+      .partId=${this.selected}
+      .dims=${dims}
+      ?locked=${unavailable}
+      @v3-command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+    ></figure-v3-links>`
+  }
+  /** One command, one step of the history. A refusal a person can meet here is said in their words. */
+  private linkCommand(action: V3AuthoringAction) {
+    try {
+      this.session!.command(action)
+      this.error = ''
+      this.changed()
+    } catch (error) {
+      const code = (error as { code?: string })?.code
+      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')
+            : error instanceof Error
+              ? error.message
+              : String(error)
+    }
+  }
   private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {
     const input = event.target as HTMLInputElement,
       value = input.valueAsNumber
@@ -508,7 +549,7 @@ export class FigureV3Editor extends LitElement {
           ${fields.map(field => html`<label><span>${fieldLabel(field.id)} (${field.unit})${field.role === 'state' ? ' · 동작' : ''}</span><input aria-label=${field.id} type="number" step="any" .value=${String(field.value)} ?disabled=${unavailable} @change=${(e: Event) => this.changeField(field, e)} /></label>`)}
           ${
             part
-              ? html`<figure-v3-material
+              ? html`${this.renderLinks(unavailable)}<figure-v3-material
                   .body=${part}
                   .palette=${view.palette ?? {}}
                   ?locked=${unavailable}

package/client/modeller/v3-gizmo.ts

@@ -1,4 +1,5 @@
-import type { V3InputChange } from '@hatiolab/figure-model'
+import { v3AttachmentsOf } from '@hatiolab/figure-model'
+import type { V3Asset, V3InputChange } from '@hatiolab/figure-model'
 
 /**
  * What the gizmo may write for a part — the V2 gizmo's move · turn · size, on a V3 asset (parity row ③).
@@ -40,7 +41,17 @@ export function gizmoReachOf(asset: AssetLike, part: string): GizmoReach {
   const allDesign = (ids: string[]) => ids.every(id => design.has(id))
   const pose = nodes.find(node => node.id === `${part}.pose`)
   const placed = nodes.find(node => node.id === part && node.op === 'place@1')
-  const posed = !!pose && pose.op === 'rigid@1' && pose.params?.to === 'asset' && placed?.args[1] === `${part}.poseValue`
+  const direct = !!pose && pose.op === 'rigid@1' && pose.params?.to === 'asset' && placed?.args[1] === `${part}.poseValue`
+  /*
+    A part taken off another (detach) stands on a seat into the asset frame with its own position numbers back. It
+    can be moved like a part never fastened — unless it moves by itself, when where it is drawn is not its position.
+  */
+  const reseated =
+    !!pose &&
+    pose.op === 'rigid@1' &&
+    !nodes.some(node => node.id === `${part}.motion`) &&
+    v3AttachmentsOf(asset as unknown as V3Asset)[part] === null
+  const posed = direct || reseated
   const shape = nodes.find(node => node.id === `${part}.shape`)
   const extent = shape && BOXES.has(shape.op) ? shape.args.slice(0, 3) : []
   const sizes =

package/client/modeller/v3-links.ts

@@ -0,0 +1,138 @@
+import { v3AttachmentsOf } from '@hatiolab/figure-model'
+import type { V3Asset } from '@hatiolab/figure-model'
+
+/*
+ * What a V3 part is tied to — the readers behind the parts' size response, fastening and motion sections (parity rows
+ * ④ ⑤ ⑥). Kept apart from the element so they can be tested without a browser.
+ */
+
+export type Axis = 'x' | 'y' | 'z'
+export const AXES: readonly Axis[] = ['x', 'y', 'z']
+
+interface Node {
+  id: string
+  op: string
+  args: string[]
+  outputs: Record<string, string>
+}
+const modelOf = (asset: V3Asset) =>
+  asset.document.model as unknown as { nodes: Node[]; inputs: Array<{ id: string; role?: string; unit?: string; min?: number; max?: number }>; constants: Array<{ id: string; value: number }> }
+
+/** What one dimension of a part is worked out from. */
+export type Follow =
+  | { of: 'own' }
+  | { of: 'instance'; axis: Axis }
+  | { of: 'part'; part: string; axis: Axis }
+  | { of: 'input'; input: string }
+  /** Worked out some other way (the converter writes expressions) — shown, not offered as a choice. */
+  | { of: 'expression' }
+
+/**
+ * `link-dimension` routes a part's dimension through `<part>.dimension.<axis>` and points its first argument at the
+ * source, directly or through the nodes that scale it. Walking back through those nodes finds the source: the
+ * instance size (`size.<axis>`), another part's dimension (`<part>.dimension.<axis>.value`) or a declared input.
+ */
+export function followOf(asset: V3Asset, part: string, axis: Axis): Follow {
+  const m = modelOf(asset)
+  const node = m.nodes.find(n => n.id === `${part}.dimension.${axis}`)
+  if (!node) return { of: 'own' }
+  const writerOf = (ref: string) => m.nodes.find(n => Object.values(n.outputs).includes(ref))
+  const seen = new Set<string>()
+  const walk = (ref: string): Follow => {
+    if (seen.has(ref)) return { of: 'expression' }
+    seen.add(ref)
+    const instance = /^size\.([xyz])$/.exec(ref)
+    if (instance) return { of: 'instance', axis: instance[1] as Axis }
+    const other = /^(.+)\.dimension\.([xyz])\.value$/.exec(ref)
+    if (other) return { of: 'part', part: other[1]!, axis: other[2] as Axis }
+    const input = m.inputs.find(i => i.id === ref)
+    if (input) return ref.startsWith(`${part}.`) ? { of: 'own' } : { of: 'input', input: ref }
+    const writer = writerOf(ref)
+    if (!writer) return { of: 'expression' }
+    /* Follow the one argument that is not a constant factor. */
+    const onward = writer.args.filter(arg => !m.constants.some(c => c.id === arg))
+    return onward.length === 1 ? walk(onward[0]!) : { of: 'expression' }
+  }
+  return walk(node.args[0]!)
+}
+
+/** Whether the asset declares an instance size on an axis — only then can a dimension follow it. */
+export const hasInstanceSize = (asset: V3Asset, axis: Axis) => modelOf(asset).inputs.some(i => i.id === `size.${axis}` && i.role === 'design')
+
+/** The part this one is fastened to, or `null`. The mounting plane counts as fastened (the model names no part). */
+export function fastenedTo(asset: V3Asset, part: string): string | null {
+  return v3AttachmentsOf(asset)[part] ?? null
+}
+
+/** Whether a dimension of this part can follow something — box-shaped, whose three sizes are X, Y and Z. */
+export function canFollow(asset: V3Asset, part: string): boolean {
+  const shape = modelOf(asset).nodes.find(n => n.id === `${part}.shape`)
+  return !!shape && (shape.op === 'box-shape@1' || shape.op === 'rounded-box@1')
+}
+
+/** Whether `attach` can take this part: a box, or a cylinder (figure-model measures its faces since 0.1.47). */
+export function canFasten(asset: V3Asset, part: string): boolean {
+  const shape = modelOf(asset).nodes.find(n => n.id === `${part}.shape`)
+  return canFollow(asset, part) || shape?.op === 'cylinder-shape@1'
+}
+
+/**
+ * The axes on which the part's position is worked out from other values rather than being its own number — the
+ * converter writes V2's anchor rules that way. `fix-position` makes one its own number where it is now.
+ */
+export function positionsWorkedOut(asset: V3Asset, part: string): Axis[] {
+  const m = modelOf(asset)
+  const pose = m.nodes.find(n => n.id === `${part}.pose`)
+  if (!pose || pose.op !== 'rigid@1' || fastenedTo(asset, part)) return []
+  const own = (ref: string) => ref.startsWith(`${part}.`) && m.inputs.some(i => i.id === ref && i.role === 'design')
+  const constant = (ref: string) => m.constants.some(c => c.id === ref)
+  return AXES.filter((_axis, i) => !own(pose.args[i]!) && !constant(pose.args[i]!))
+}
+
+/** How a part moves, if it does: slide or turn, along which axis, driven by which control. */
+export interface Motion {
+  kind: 'slide' | 'turn'
+  axis: Axis | '?'
+  control?: { id: string; unit?: string; min?: number; max?: number }
+}
+
+export function motionOf(asset: V3Asset, part: string): Motion | undefined {
+  const m = modelOf(asset)
+  const node = m.nodes.find(n => n.id === `${part}.motion`)
+  if (!node) return undefined
+  const kind = node.op === 'axis-turn@1' ? 'turn' : 'slide'
+  const unit = node.args.slice(0, 3).map(ref => m.constants.find(c => c.id === ref)?.value)
+  const axis = AXES[unit.findIndex(v => v !== undefined && v !== 0)] ?? '?'
+  /* The quantity is the fourth argument, a state input directly or through the nodes that scale it. */
+  const quantity = node.args[3]
+  const seen = new Set<string>()
+  const control = (ref?: string): Motion['control'] => {
+    if (!ref || seen.has(ref)) return undefined
+    seen.add(ref)
+    const input = m.inputs.find(i => i.id === ref && i.role === 'state')
+    if (input) return { id: input.id, unit: input.unit, min: input.min, max: input.max }
+    const writer = m.nodes.find(n => Object.values(n.outputs).includes(ref))
+    for (const arg of writer?.args ?? []) {
+      const found = control(arg)
+      if (found) return found
+    }
+    return undefined
+  }
+  return { kind, axis, control: control(quantity) }
+}
+
+/** The select's value for what a dimension follows now. */
+export function choiceOf(follow: Follow): string {
+  switch (follow.of) {
+    case 'own':
+      return 'own'
+    case 'instance':
+      return `instance:${follow.axis}`
+    case 'part':
+      return `part:${follow.part}:${follow.axis}`
+    case 'input':
+      return `input:${follow.input}`
+    case 'expression':
+      return 'expression'
+  }
+}

package/client/pages/figure-v3-modeller-page.ts

@@ -16,11 +16,8 @@ import '../modeller/figure-v3-properties.js'
 /**
  * The V3 product page has exactly one authoritative workspace for UI and AI input transactions.
  *
- * It answers to `figure-v3-modeller` while the catalogue's assets are still V2. The designer's order switches
- * the production data and the consuming paths together (ADR-0087, step 5): until the assets are converted, a
- * `figure-modeller` that opened this page would fail on every figure in the catalogue. Having its own route
- * is what makes steps 3 and 4 — the conversion on a recoverable copy, and the canvas check — possible at all.
- * At step 5 the V2 page goes, and this one takes the `figure-modeller` name and route.
+ * The one modeller since ADR-0087 step 5 (2026-09-24): it answers to `figure-modeller`, and to `figure-v3-modeller`
+ * as an alias for links made before the switch.
  */
 @customElement('figure-v3-modeller-page')
 export class FigureV3ModellerPage extends PageView {

package/client/route.ts

@@ -4,14 +4,10 @@ export default function route(page: string) {
       import('./pages/figure-list-page')
       return page
 
-    case 'figure-modeller':
-      import('./pages/figure-modeller-page')
-      return page
-
     /*
-      The V3 modeller, under its own name until the catalogue's assets are V3 (ADR-0087, step 5). Both pages
-      define a custom element, and an element name may be registered once, so they cannot share one.
+      One modeller since ADR-0087 step 5. `figure-v3-modeller` is kept as an alias for links made before the switch.
     */
+    case 'figure-modeller':
     case 'figure-v3-modeller':
       import('./pages/figure-v3-modeller-page')
       return page

package/dist-client/modeller/figure-v3-links.d.ts

@@ -0,0 +1,42 @@
+import '@material/web/icon/icon.js';
+import { LitElement, nothing } from 'lit';
+import type { V3Asset } from '@hatiolab/figure-model';
+declare const FigureV3Links_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * What a part is tied to — its size response, what it is fastened to, how it moves (parity rows ④ ⑤ ⑥).
+ *
+ * 「Build Once, Fit Anywhere」 lives here: a dimension that follows the instance size or another part is what lets
+ * a figure be placed at any size, and a part fastened to the face it rests on is what keeps it there when that
+ * happens. The release gate refuses a figure that falls apart when resized, and tells the author to fasten the
+ * parts that come away — this is where they do it. Motion is the V2 joint: a slide or a turn driven by a control.
+ *
+ * The V2 inspector has these as its dimensions, placement and joint sections, in that order; so does this. Every
+ * change is one figure-model authoring command, sent as `v3-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
+ * size the figure does not declare) are not offered, so the author is not sent into a refusal.
+ */
+export declare class FigureV3Links extends FigureV3Links_base {
+    static styles: import("lit").CSSResult;
+    /** The asset being edited. */
+    asset?: V3Asset;
+    /** The selected part. */
+    partId: string;
+    /** The part's own extent along its axes now, in mm — what a dimension is fixed at when it stops following. */
+    dims?: [number, number, number];
+    locked: boolean;
+    private fasten;
+    private motion;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private renderDimensions;
+    private follow;
+    /**
+     * Positions worked out from other values — V2's anchor rules, as the converter wrote them — 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.
+     */
+    private renderPositions;
+    private renderFastening;
+    private renderMotion;
+    private setKind;
+    private command;
+}
+export {};