@things-factory/figure-ui 10.1.76 → 10.1.77

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

@@ -1,649 +0,0 @@
-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, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, positionsWorkedOut } from './v3-links.js';
-import { SidePanelStyles } from './side-panel-styles.js';
-import { HelpToggles } from './v3-help.js';
-const FACES = Object.keys(V3_FACES);
-const freshFasten = () => ({
-    face: 'bottom',
-    toPlane: false,
-    target: '',
-    targetFace: 'top',
-    facing: 'meet',
-    gap: 0,
-    twist: 0,
-    align: {},
-    alignMm: {}
-});
-const freshMotion = () => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 });
-const freshRow = () => ({ axis: '', pitch: 200, fills: true, count: 5 });
-const freshPlace = () => ({ role: 'grip', face: 'top', label: '', accepts: '', capacity: 1 });
-/**
- * What a part is tied to — its size response, what it is fastened to, how it moves.
- *
- * 「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 a joint: a slide or a turn driven by a control.
- *
- * The sections are dimensions, placement and joint, in that order. 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);
-        this.help = new HelpToggles(this);
-        /** The selected part. */
-        this.partId = '';
-        this.locked = false;
-        /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
-        this.section = 'shape';
-        this.fasten = freshFasten();
-        this.motion = freshMotion();
-        this.place = freshPlace();
-        this.row = freshRow();
-        /** The motion form is open over the part's own motion, to change it where it is. */
-        this.editingMotion = false;
-    }
-    static { this.styles = [SidePanelStyles, css `
-    :host {
-      display: block;
-    }
-    /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
-    div[row] > b {
-      white-space: nowrap;
-    }
-    div[row] {
-      display: grid;
-      grid-template-columns: minmax(24px, max-content) minmax(0, 1fr);
-      gap: 6px;
-      align-items: center;
-    }
-    b[bound] {
-      font-weight: 600;
-    }
-    /* The difference a following measure keeps: under its choice, on the same line as its words. */
-    label[inline-plus] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    label[inline-plus] input {
-      flex: 1;
-      min-width: 0;
-    }
-  `]; }
-    /*
-      The forms describe the next command for the selected part, so another part starts from the defaults: carrying the
-      last part's choices over fastened a shutter curtain level with a right edge nobody chose for it (2026-09-25).
-    */
-    willUpdate(changed) {
-        if (changed.has('partId') && changed.get('partId') !== undefined) {
-            /* A part's own fastening is not another part's choices: the form opens on it (walk 1, 2026-09-26). */
-            const own = this.asset && this.partId ? fasteningOf(this.asset, this.partId) : null;
-            this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
-            this.motion = freshMotion();
-            this.place = freshPlace();
-            this.row = freshRow();
-            this.editingMotion = false;
-        }
-    }
-    render() {
-        const asset = this.asset;
-        if (!asset || !this.partId)
-            return nothing;
-        if (this.section === 'motion')
-            return html `<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
-        ${this.renderMotion(asset)}${this.renderShown(asset)}</section>`;
-        if (this.section === 'places')
-            return html `<section><h3>${i18next.t('figure.label.places-on-part', { part: this.partId })}${this.help.button('figure.text.place-explained')}</h3>${this.help.hint('figure.text.place-explained')}
-        ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html `<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`;
-        return html `
-      <section>
-        <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>`}
-      </section>
-      <section>
-        <h3>${i18next.t('figure.label.placement')}${this.help.button('figure.text.fastening-explained')}</h3>${this.help.hint('figure.text.fastening-explained')}
-        ${this.renderPositions(asset)}
-        ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
-      </section>
-      ${this.renderRow(asset)}
-    `;
-    }
-    /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
-    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>`)}
-      ${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));
-        const round = followableAxes(asset, this.partId).length === 2;
-        /* One step for the whole part (figure-model follow-size): the size is declared from the parts if there is none. */
-        const followsAll = followableAxes(asset, this.partId).every(axis => followOf(asset, this.partId, axis).of === 'instance');
-        const whole = followsAll
-            ? nothing
-            : html `<button act follow-size ?disabled=${this.locked} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
-          <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
-        </button>`;
-        return html `${whole}${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) => this.follow(asset, 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=${`share:${one}`} ?selected=${value === `share:${one}`}>
-                ${i18next.t('figure.label.follows-instance-share')} · ${one.toUpperCase()}
-              </option>
-              <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>
-        ${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) => this.followPlus(axis, now, Number(e.target.value) || 0)}
-                />
-              </label>`
-                : nothing}
-      </div>`;
-        })}`;
-    }
-    /** The same source, the same share, a new difference: a leaf the opening less its gaps (link-dimension's `plus`). */
-    followPlus(axis, now, plus) {
-        if (now.of !== 'instance' && now.of !== 'part')
-            return;
-        if ((now.plus ?? 0) === plus)
-            return;
-        const source = 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 });
-    }
-    follow(asset, axis, choice, now) {
-        const following = now.of !== 'own';
-        /* The measure as it stands: a dimension stops following at it, and a share is taken of it. */
-        const current = dimensionNow(asset, this.partId, axis) ?? this.dims?.[AXES.indexOf(axis)] ?? 100;
-        if (choice === 'own') {
-            if (!following)
-                return;
-            this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm: Math.max(1, Math.round(current)) });
-            return;
-        }
-        const [of, a, b] = choice.split(':');
-        if (of === 'share') {
-            /* A proportional rule: this measure is the share of the instance size it is now, so it grows with the figure. */
-            const size = asset.designInputs[`size.${a}`];
-            if (!size)
-                return;
-            const times = Math.round((current / size) * 1e6) / 1e6;
-            this.command({ kind: 'link-dimension', part: this.partId, axis, source: { of: 'instance', axis: a }, times, replace: following });
-            return;
-        }
-        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, 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(positionIsShare(asset, this.partId, axis) ? 'figure.label.position-in-proportion' : '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>
-        ${hasInstanceSize(asset, axis) && !positionIsShare(asset, this.partId, axis)
-            ? html `<button act ?disabled=${this.locked} title=${i18next.t('figure.text.scale-position-explained')} @click=${() => this.command({ kind: 'scale-position', part: this.partId, axis })}>
-              <md-icon>open_in_full</md-icon>${i18next.t('figure.button.scale-position')}
-            </button>`
-            : nothing}
-      </div>`);
-    }
-    /**
-     * A new aim for the fastening: where on the face is filled in as where the part stands now, so fastening it keeps it
-     * there (`placeKeptOf`). The author changes it from there.
-     */
-    aimAt(asset, f) {
-        const theirFaces = f.target ? facesOf(asset, f.target) : FACES;
-        const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0];
-        const aim = f.toPlane ? 'plane' : f.target ? { part: f.target, face: targetFace } : undefined;
-        this.fasten = { ...f, ...(aim ? placeKeptOf(asset, this.partId, aim, !!f.twist) : { align: {}, alignMm: {} }) };
-    }
-    renderFastening(asset) {
-        const held = heldBy(asset, this.partId);
-        const f = this.fasten;
-        /* Not a part that hangs from this one: fastening a frame to its own roller would close a loop. */
-        const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one) && !hangsFrom(asset, one, this.partId));
-        /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
-        /* On the mounting plane only the faces it takes: a bottom or a top on the floor, a back on a wall. */
-        const plane = mountingPlaneOf(asset);
-        /* Its outer faces, and its centre -- a roller spins about its middle (ADR-0093); the mounting plane takes a face. */
-        const mineFaces = [
-            ...facesOf(asset, this.partId).filter(face => FACES.includes(face) && (!f.toPlane || plane.faces.includes(face))),
-            ...(f.toPlane ? [] : ['centre'])
-        ];
-        const myFace = mineFaces.includes(f.face) ? f.face : mineFaces[0];
-        const theirFaces = f.target ? facesOf(asset, f.target) : FACES;
-        const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0];
-        const aim = f.toPlane ? 'plane' : { part: f.target, face: targetFace };
-        const align = f.target || f.toPlane ? alignOf(asset, this.partId, aim, f.align, f.alignMm, !!f.twist) : undefined;
-        return html `
-      ${held
-            ? html `<div pair>
-            <span>${i18next.t('figure.label.fastened-to')}: <b bound>${'plane' in held ? i18next.t('figure.label.mounting-plane') : held.part}</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>`
-            : nothing}
-      <div form>
-        <span>${i18next.t('figure.label.my-face')}</span>
-        <select @change=${(e) => (this.fasten = { ...f, face: e.target.value })}>
-          ${mineFaces.map(face => html `<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-        </select>
-      </div>
-      <label toggle>
-        <input type="checkbox" .checked=${f.toPlane} @change=${(e) => this.aimAt(asset, { ...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.aimAt(asset, { ...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.aimAt(asset, { ...f, targetFace: e.target.value })}>
-              ${theirFaces.map(face => html `<option value=${face} ?selected=${face === 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>`}
-      ${this.renderAlignment(f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : [])}
-      <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 })} />
-        <span>${i18next.t('figure.label.twist')}</span>
-        <input type="number" step="any" .value=${String(f.twist)} @change=${(e) => (this.fasten = { ...f, twist: Number(e.target.value) || 0 })} />
-      </div>
-      <button
-        act
-        ?disabled=${this.locked || (!f.toPlane && !f.target)}
-        @click=${() => this.command({
-            kind: 'attach',
-            part: this.partId,
-            face: myFace,
-            to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: targetFace },
-            ...(f.toPlane ? {} : { facing: f.facing }),
-            ...(f.gap ? { gap: f.gap } : {}),
-            twist: f.twist,
-            ...(align ? { align } : {}),
-            replace: !!held
-        })}
-      >
-        <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
-      </button>
-    `;
-    }
-    /**
-     * Where on the target face the part sits, on the two axes across it: centred, level with the target's edge on
-     * either side, or a distance off centre. A door hung level with the frame's front edge turns about that edge.
-     */
-    renderAlignment(axes) {
-        const f = this.fasten;
-        const set = (axis, how) => (this.fasten = { ...f, align: { ...f.align, [axis]: how } });
-        const setMm = (axis, mm) => (this.fasten = { ...f, alignMm: { ...f.alignMm, [axis]: mm } });
-        return html `<div form>
-      ${axes.map(({ axis, edges }) => {
-            const how = f.align[axis] === 'min' || f.align[axis] === 'max' ? (edges ? f.align[axis] : 'centre') : (f.align[axis] ?? 'centre');
-            return html `<span>${i18next.t('figure.label.align-' + axis)}</span>
-          <select @change=${(e) => set(axis, e.target.value)}>
-            <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
-            ${edges
-                ? html `<option value="min" ?selected=${how === 'min'}>${i18next.t(`figure.label.align-${axis}-min`)}</option>
-                  <option value="max" ?selected=${how === 'max'}>${i18next.t(`figure.label.align-${axis}-max`)}</option>`
-                : nothing}
-            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
-            ${this.asset && hasInstanceSize(this.asset, axis)
-                ? html `<option value="share" ?selected=${how === 'share'}>${i18next.t('figure.label.align-share')}</option>`
-                : nothing}
-          </select>
-          ${how === 'mm' || how === 'share'
-                ? html `<span></span><input type="number" step="any" aria-label=${i18next.t('figure.label.align-mm')} .value=${String(f.alignMm[axis] ?? 0)} @change=${(e) => setMm(axis, Number(e.target.value) || 0)} />`
-                : nothing}`;
-        })}
-    </div>`;
-    }
-    /**
-     * Making the part a row across what it is fastened to (figure-model `make-repeat`): along one of the axes across its
-     * face, copies a pitch apart filling the parent's length, or a count spread over it. Once made, the row's own section
-     * (the editor's) shows it and takes it away.
-     */
-    renderRow(asset) {
-        const axes = rowAxesOf(asset, this.partId);
-        if (!axes.length)
-            return nothing;
-        const r = this.row;
-        const axis = axes.includes(r.axis) ? r.axis : axes[0];
-        const ok = r.pitch > 0 && (r.fills || (Number.isSafeInteger(r.count) && r.count >= 1));
-        return html `<section>
-      <h3>${i18next.t('figure.label.repeat')}</h3>
-      <div form>
-        <span>${i18next.t('figure.label.repeat-axis')}</span>
-        <select @change=${(e) => (this.row = { ...r, axis: e.target.value })}>
-          ${axes.map(a => html `<option value=${a} ?selected=${a === axis}>${a.toUpperCase()}</option>`)}
-        </select>
-        <span>${i18next.t('figure.label.repeat-pitch')} (mm)</span>
-        <input type="number" step="any" min="0" .value=${String(r.pitch)} @change=${(e) => (this.row = { ...r, pitch: Number(e.target.value) })} />
-      </div>
-      <label toggle>
-        <input type="checkbox" .checked=${r.fills} @change=${(e) => (this.row = { ...r, fills: e.target.checked })} />
-        ${i18next.t('figure.label.repeat-fills')}
-      </label>
-      ${r.fills
-            ? nothing
-            : html `<div form>
-            <span>${i18next.t('figure.label.repeat-count')}</span>
-            <input type="number" step="1" min="1" .value=${String(r.count)} @change=${(e) => (this.row = { ...r, count: Number(e.target.value) })} />
-          </div>`}
-      <button
-        act
-        ?disabled=${this.locked || !ok}
-        @click=${() => this.command({ kind: 'make-repeat', part: this.partId, axis, pitch: r.pitch, ...(r.fills ? {} : { count: r.count }) })}
-      >
-        <md-icon>view_week</md-icon>${i18next.t('figure.button.make-repeat')}
-      </button>
-    </section>`;
-    }
-    /**
-     * When the part is drawn: always, or while a control is at least a value -- a lamp lit while the gate is open. One
-     * part edit (`set-visibility`), one step. Offered once the figure has a control; a motion is what makes one.
-     */
-    renderShown(asset) {
-        const controls = visibilityControlsOf(asset);
-        if (!controls.length)
-            return nothing;
-        const now = shownWhenOf(asset, this.partId);
-        const send = (shownWhen) => this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-visibility', target: this.partId, shownWhen } }, bubbles: true, composed: true }));
-        const first = (id) => {
-            const c = controls.find(one => one.id === id);
-            return Math.round((c.min + (c.max - c.min) * 0.01) * 1000) / 1000;
-        };
-        const unit = now ? controls.find(c => c.id === now.input)?.unit : '';
-        return html `<div form>
-        <span>${i18next.t('figure.label.shown-when')}</span>
-        <select
-          ?disabled=${this.locked}
-          @change=${(e) => {
-            const id = e.target.value;
-            send(id ? { input: id, atLeast: now?.input === id ? now.atLeast : first(id) } : null);
-        }}
-        >
-          <option value="" ?selected=${!now}>${i18next.t('figure.label.shown-always')}</option>
-          ${controls.map(c => html `<option value=${c.id} ?selected=${now?.input === c.id}>${i18next.t('figure.label.shown-while', { control: c.label })}</option>`)}
-        </select>
-        ${now
-            ? html `<span>${i18next.t('figure.label.shown-at-least')}${unit ? ` (${unit})` : ''}</span>
-              <input
-                type="number"
-                step="any"
-                ?disabled=${this.locked}
-                .value=${String(now.atLeast)}
-                @change=${(e) => {
-                const v = e.target.valueAsNumber;
-                if (Number.isFinite(v))
-                    send({ input: now.input, atLeast: v });
-            }}
-              />`
-            : nothing}
-      </div>`;
-    }
-    renderMotion(asset) {
-        const now = motionOf(asset, this.partId);
-        const joint = asset.joints?.find(j => j.body1.part === this.partId);
-        if (now && !(this.editingMotion && joint)) {
-            return html `<div pair>
-        <span>
-          ${i18next.t('figure.label.motion-' + now.kind)} · ${String(now.axis).toUpperCase()}
-          ${now.travel
-                ? html `<small>${i18next.t('figure.label.motion-travel-is', { part: now.travel.part, axis: now.travel.axis.toUpperCase(), plus: now.travel.plus ?? 0 })}</small>`
-                : nothing}
-          ${now.follows
-                ? html `<small>${i18next.t('figure.label.motion-follows', { joint: now.follows.joint, multiplier: now.follows.multiplier, offset: now.follows.offset ?? 0 })}</small>`
-                : now.control
-                    ? html `<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>`
-                    : nothing}
-        </span>
-        <button
-          act
-          ?disabled=${this.locked || !joint}
-          @click=${() => joint && this.command({ kind: 'set-joint', joint: { id: joint.id, type: 'fixed', body0: joint.body0, body1: joint.body1, ...(joint.origin ? { origin: joint.origin } : {}) } })}
-        >
-          <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
-        </button>
-        <button
-          act
-          ?disabled=${this.locked || !joint}
-          @click=${() => {
-                if (!joint)
-                    return;
-                this.motion = motionFormOf(joint);
-                this.editingMotion = true;
-            }}
-        >
-          <md-icon>edit</md-icon>${i18next.t('figure.button.change-motion')}
-        </button>
-      </div>`;
-        }
-        /* A joint needs a parent (URDF): a part fastened to nothing is fastened first. */
-        if (!joint)
-            return html `<p hint>${i18next.t('figure.text.fasten-before-moving')}</p>`;
-        const m = this.motion;
-        const unit = m.kind === 'slide' ? 'mm' : 'deg';
-        /* A follower follows a joint that moves the same way; a choice the kind no longer allows is dropped. */
-        const leaders = leadersFor(asset, this.partId, m.kind);
-        const follow = leaders.some(j => j.id === m.follow) ? m.follow : '';
-        return html `
-      <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>
-          <option value="continuous" ?selected=${m.kind === 'continuous'}>${i18next.t('figure.label.motion-continuous')}</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>
-      ${leaders.length
-            ? html `<div form>
-            <span>${i18next.t('figure.label.motion-follow')}</span>
-            <select @change=${(e) => (this.motion = { ...m, follow: e.target.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>`)}
-            </select>
-          </div>`
-            : nothing}
-      ${follow
-            ? html `<div form>
-            <span>${i18next.t('figure.label.motion-multiplier')}</span>
-            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e) => (this.motion = { ...m, multiplier: Number(e.target.value) })} />
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e) => (this.motion = { ...m, offset: Number(e.target.value) || 0 })} />
-          </div>`
-            : html `<div form>
-            ${m.kind === 'slide'
-                ? html `<span>${i18next.t('figure.label.motion-travel')}</span>
-                  <select @change=${(e) => (this.motion = { ...m, travel: e.target.value })}>
-                    <option value="" ?selected=${!m.travel}>${i18next.t('figure.label.motion-travel-mm')}</option>
-                    ${asset.appearance
-                    .map(look => look.target)
-                    .filter(one => canFollow(asset, one))
-                    .flatMap(one => AXES.map(a => html `<option value=${`${one}:${a}`} ?selected=${m.travel === `${one}:${a}`}>${one} · ${a.toUpperCase()}</option>`))}
-                  </select>
-                  ${m.travel
-                    ? html `<span>${i18next.t('figure.label.follows-plus')}</span>
-                        <input type="number" step="any" .value=${String(m.travelPlus ?? 0)} @change=${(e) => (this.motion = { ...m, travelPlus: Number(e.target.value) || 0 })} />`
-                    : nothing}`
-                : nothing}
-            <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() })} />
-            ${m.kind === 'continuous' || (m.kind === 'slide' && m.travel)
-                ? nothing
-                : html `<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 || (follow ? !(Number.isFinite(m.multiplier) && m.multiplier !== 0) : m.kind !== 'continuous' && !(m.kind === 'slide' && m.travel) && !(m.max > m.min && m.min <= 0 && 0 <= m.max))}
-        title=${!follow && m.kind !== 'continuous' && !(m.min <= 0 && 0 <= m.max) ? i18next.t('figure.text.joint-range-holds-zero') : ''}
-        @click=${() => {
-            this.command({ kind: 'set-joint', joint: motionJoint(joint, { ...m, follow }, this.partId) });
-            this.editingMotion = false;
-        }}
-      >
-        <md-icon>animation</md-icon>${i18next.t(this.editingMotion ? 'figure.button.apply-motion-change' : 'figure.button.add-motion')}
-      </button>
-      ${this.editingMotion
-            ? html `<button act @click=${() => (this.editingMotion = false)}><md-icon>undo</md-icon>${i18next.t('figure.button.cancel-motion-change')}</button>`
-            : nothing}
-    `;
-    }
-    setKind(kind) {
-        this.motion = kind === 'slide' ? { ...this.motion, kind, min: 0, max: 500 } : { ...this.motion, kind, min: -90, max: 90 };
-    }
-    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([
-    property(),
-    __metadata("design:type", String)
-], FigureV3Links.prototype, "section", 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);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureV3Links.prototype, "row", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureV3Links.prototype, "editingMotion", void 0);
-FigureV3Links = __decorate([
-    customElement('figure-v3-links')
-], FigureV3Links);
-export { FigureV3Links };
-//# sourceMappingURL=figure-v3-links.js.map