@things-factory/figure-ui 10.1.44 → 10.1.46

package/client/modeller/v3-links.ts

@@ -0,0 +1,170 @@
+import { v3AttachmentsOf, v3BindingsOf } from '@hatiolab/figure-model'
+import type { V3Asset, V3BindingPlace, V3Face } 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'
+  }
+}
+
+/** The faces a place can sit on for this part: a box's six, a rounded box's top and bottom, none for a round body. */
+export function placeFacesOf(asset: V3Asset, part: string): V3Face[] {
+  const shape = modelOf(asset).nodes.find(n => n.id === `${part}.shape`)
+  if (shape?.op === 'box-shape@1') return ['left', 'right', 'bottom', 'top', 'back', 'front']
+  if (shape?.op === 'rounded-box@1') return ['bottom', 'top']
+  return []
+}
+
+/** The places things are held that sit on this part. */
+export function placesOn(asset: V3Asset, part: string): V3BindingPlace[] {
+  return v3BindingsOf(asset).filter(one => one.part === part)
+}
+
+/** An id for a new place on this part, not yet taken: `<part>-<role>`, then `-2`, `-3`. */
+export function placeIdFor(asset: V3Asset, part: string, role: 'seat' | 'grip'): string {
+  const taken = new Set(asset.document.capabilities.bindings.map(b => b.id))
+  const base = `${part}-${role}`
+  if (!taken.has(base)) return base
+  let n = 2
+  while (taken.has(`${base}-${n}`)) n++
+  return `${base}-${n}`
+}
+
+/**
+ * Whether a board will hand this figure anything: a place is a slot only on a figure that declares it holds things
+ * (`Capacity`, or `FlowNode`, which includes it). Without it the places are declared and nothing arrives.
+ */
+export const holdsThings = (asset: V3Asset) => (asset.document.capabilities.names ?? []).some(n => n === 'Capacity' || n === 'FlowNode')
+
+/** What `accepts` a person typed: names split on commas, trimmed, blanks and repeats dropped. */
+export const acceptsOf = (typed: string) => [...new Set(typed.split(',').map(one => one.trim()).filter(Boolean))]

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,47 @@
+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;
+    private place;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /** Where things are held on this part: a seat things rest on, or a grip things are held in (parity row ⑤). */
+    private renderPlaces;
+    /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */
+    private declareHolding;
+    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 {};

package/dist-client/modeller/figure-v3-links.js

@@ -0,0 +1,379 @@
+import { __decorate, __metadata } from "tslib";
+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 { acceptsOf, AXES, canFasten, canFollow, choiceOf, fastenedTo, followOf, hasInstanceSize, holdsThings, motionOf, placeFacesOf, placeIdFor, placesOn, positionsWorkedOut } from './v3-links.js';
+const FACES = Object.keys(V3_FACES);
+/**
+ * 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.
+ */
+let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The selected part. */
+        this.partId = '';
+        this.locked = false;
+        this.fasten = { face: 'bottom', toPlane: false, target: '', targetFace: 'top', facing: 'meet', gap: 0 };
+        this.motion = { kind: 'slide', axis: 'x', id: '', min: 0, max: 500 };
+        this.place = { role: 'grip', face: 'top', label: '', accepts: '', capacity: 1 };
+    }
+    static { this.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;
+    }
+  `; }
+    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)}
+      <h3>${i18next.t('figure.label.places')}</h3>
+      ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html `<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}
+    `;
+    }
+    /** Where things are held on this part: a seat things rest on, or a grip things are held in (parity row ⑤). */
+    renderPlaces(asset) {
+        const faces = placeFacesOf(asset, this.partId);
+        const p = this.place;
+        const face = faces.includes(p.face) ? p.face : faces[0];
+        const accepts = acceptsOf(p.accepts);
+        const capacityOk = Number.isSafeInteger(p.capacity) && p.capacity >= 1;
+        const roleName = (role) => i18next.t('figure.label.place-' + role);
+        return html `
+      ${placesOn(asset, this.partId).map(one => html `<div pair>
+          <span>
+            <b bound>${one.label}</b>
+            <small>${roleName(one.role)} · ${one.face ? i18next.t('figure.label.face-' + one.face) : ''} · ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}</small>
+          </span>
+          <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
+            <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}
+          </button>
+        </div>`)}
+      <p hint>${i18next.t('figure.text.place-explained')}</p>
+      ${holdsThings(asset)
+            ? nothing
+            : html `<p hint>${i18next.t('figure.text.place-needs-holding')}</p>
+            <button act ?disabled=${this.locked} @click=${() => this.declareHolding(asset)}>
+              <md-icon>inventory_2</md-icon>${i18next.t('figure.button.declare-holding')}
+            </button>`}
+      <div pair>
+        <select @change=${(e) => (this.place = { ...p, role: e.target.value })}>
+          <option value="grip" ?selected=${p.role === 'grip'}>${roleName('grip')}</option>
+          <option value="seat" ?selected=${p.role === 'seat'}>${roleName('seat')}</option>
+        </select>
+        <select @change=${(e) => (this.place = { ...p, face: e.target.value })}>
+          ${faces.map(one => html `<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+        </select>
+      </div>
+      <div form>
+        <span>${i18next.t('figure.label.place-name')}</span>
+        <input .value=${p.label} placeholder=${roleName(p.role)} @change=${(e) => (this.place = { ...p, label: e.target.value })} />
+        <span>${i18next.t('figure.label.place-accepts')}</span>
+        <input .value=${p.accepts} placeholder="BOX, TOTE" @input=${(e) => (this.place = { ...p, accepts: e.target.value })} />
+        <span>${i18next.t('figure.label.place-capacity')}</span>
+        <input type="number" min="1" step="1" .value=${String(p.capacity)} @change=${(e) => (this.place = { ...p, capacity: e.target.valueAsNumber })} />
+      </div>
+      ${accepts.length ? nothing : html `<small>${i18next.t('figure.text.place-accepts-needed')}</small>`}
+      <button
+        act
+        ?disabled=${this.locked || !accepts.length || !capacityOk}
+        @click=${() => this.command({
+            kind: 'add-binding',
+            id: placeIdFor(asset, this.partId, p.role),
+            label: p.label.trim() || roleName(p.role),
+            role: p.role,
+            part: this.partId,
+            face,
+            accepts,
+            capacity: p.capacity
+        })}
+      >
+        <md-icon>back_hand</md-icon>${i18next.t('figure.button.add-place')}
+      </button>
+    `;
+    }
+    /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */
+    declareHolding(asset) {
+        const names = [...new Set([...(asset.document.capabilities.names ?? []), 'Capacity', 'Holdable'])];
+        this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }));
+    }
+    renderDimensions(asset) {
+        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) => this.follow(axis, e.target.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>`;
+        });
+    }
+    follow(axis, choice, now) {
+        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 = of === 'instance' ? { of: 'instance', axis: a } : { of: 'part', part: a, axis: b };
+        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.
+     */
+    renderPositions(asset) {
+        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>`);
+    }
+    renderFastening(asset) {
+        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) => (this.fasten = { ...f, face: e.target.value })}>
+          ${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) => (this.fasten = { ...f, toPlane: e.target.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) => (this.fasten = { ...f, target: e.target.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) => (this.fasten = { ...f, targetFace: e.target.value })}>
+              ${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) => (this.fasten = { ...f, facing: e.target.value })}>
+              <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) => (this.fasten = { ...f, gap: Number(e.target.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
+        })}
+      >
+        <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
+      </button>
+    `;
+    }
+    renderMotion(asset) {
+        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) => this.setKind(e.target.value)}>
+          <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) => (this.motion = { ...m, axis: e.target.value })}>
+          ${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) => (this.motion = { ...m, id: e.target.value.trim() })} />
+        <span>${i18next.t('figure.label.control-range')} (${unit})</span>
+        <div pair>
+          <input type="number" step="any" .value=${String(m.min)} @change=${(e) => (this.motion = { ...m, min: Number(e.target.value) })} />
+          <input type="number" step="any" .value=${String(m.max)} @change=${(e) => (this.motion = { ...m, max: Number(e.target.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>
+    `;
+    }
+    setKind(kind) {
+        this.motion = kind === 'turn' ? { ...this.motion, kind, min: -90, max: 90 } : { ...this.motion, kind, min: 0, max: 500 };
+    }
+    command(action) {
+        this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "asset", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "partId", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureV3Links.prototype, "dims", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "locked", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "fasten", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "motion", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "place", void 0);
+FigureV3Links = __decorate([
+    customElement('figure-v3-links')
+], FigureV3Links);
+export { FigureV3Links };
+//# sourceMappingURL=figure-v3-links.js.map