@things-factory/figure-ui 10.1.49 → 10.1.51

package/dist-client/modeller/figure-v3-first-save.js

@@ -0,0 +1,118 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { closePopup } from '@operato/popup';
+import '@operato/popup/ox-popup-actions.js';
+import { CommonPopupStyles, FormFieldStyles } from '@operato/styles';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import { firstSaveRefusalOf, releasableType, typeOf } from './v3-first-save.js';
+/**
+ * The first save of a new figure: its type and its name, asked once (V2's save dialog, in the suite's popup look).
+ * Closes with the answer, or with nothing when cancelled -- then nothing is saved.
+ */
+let FigureV3FirstSave = class FigureV3FirstSave extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The type the figure has so far -- empty for a temporary one, which is not offered. */
+        this.type = '';
+        this.name = '';
+        /** Type names already used in this domain. */
+        this.taken = [];
+        this.refusal = null;
+        this.onKey = (e) => {
+            if (e.key === 'Enter' && !e.isComposing)
+                this.confirm();
+        };
+        this.confirm = () => {
+            this.refusal = firstSaveRefusalOf(this.type, this.taken);
+            if (this.refusal)
+                return;
+            closePopup(this, { type: this.type, name: this.name.trim() || this.type });
+        };
+    }
+    static { this.styles = [
+        FormFieldStyles,
+        CommonPopupStyles,
+        css `
+      /* The popup's height is a share of the window (small is 40%): on a low window the buttons must still be reached. */
+      :host {
+        overflow-y: auto;
+      }
+      div[field] {
+        display: grid;
+        gap: 4px;
+      }
+      div[field] label {
+        font-size: var(--popup-font-size-small);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[field] input {
+        box-sizing: border-box;
+        width: 100%;
+      }
+      input[type-field] {
+        font-family: var(--mono-font, monospace);
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <div class="what">${i18next.t('figure.text.save-new-figure-desc')}</div>
+      <div field>
+        <label for="type">${i18next.t('figure.label.figure-type')}</label>
+        <input
+          id="type"
+          type-field
+          autofocus
+          .value=${this.type}
+          placeholder=${i18next.t('figure.text.figure-type-example')}
+          @input=${(e) => {
+            this.type = typeOf(e.target.value);
+            e.target.value = this.type;
+            this.refusal = null;
+        }}
+          @keydown=${this.onKey}
+        />
+        ${this.type && !releasableType(this.type) ? html `<div class="note">${i18next.t('figure.text.type-name-will-not-release')}</div>` : nothing}
+      </div>
+      <div field>
+        <label for="name">${i18next.t('figure.label.name')}</label>
+        <input
+          id="name"
+          .value=${this.name}
+          placeholder=${i18next.t('figure.text.figure-name-example')}
+          @input=${(e) => (this.name = e.target.value)}
+          @keydown=${this.onKey}
+        />
+      </div>
+      ${this.refusal ? html `<div class="failure" role="alert">${i18next.t(this.refusal.key, { type: this.refusal.type })}</div>` : nothing}
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${!this.type} @click=${this.confirm}>${i18next.t('figure.button.save')}</md-filled-button>
+      </ox-popup-actions>
+    `;
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureV3FirstSave.prototype, "type", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureV3FirstSave.prototype, "name", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureV3FirstSave.prototype, "taken", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3FirstSave.prototype, "refusal", void 0);
+FigureV3FirstSave = __decorate([
+    customElement('figure-v3-first-save')
+], FigureV3FirstSave);
+export { FigureV3FirstSave };
+//# sourceMappingURL=figure-v3-first-save.js.map

package/dist-client/modeller/figure-v3-first-save.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-v3-first-save.js","sourceRoot":"","sources":["../../client/modeller/figure-v3-first-save.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACpE,OAAO,uCAAuC,CAAA;AAC9C,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,EAAkB,MAAM,oBAAoB,CAAA;AAE/F;;;GAGG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QA2BL,yFAAyF;QAC7E,SAAI,GAAG,EAAE,CAAA;QACT,SAAI,GAAG,EAAE,CAAA;QACrB,8CAA8C;QACd,UAAK,GAAa,EAAE,CAAA;QACnC,YAAO,GAA0C,IAAI,CAAA;QAwC9D,UAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,WAAW;gBAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QACzD,CAAC,CAAA;QAEO,YAAO,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;YACxD,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAM;YACxB,UAAU,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,EAAsB,CAAC,CAAA;QAChG,CAAC,CAAA;IACH,CAAC;aAhFQ,WAAM,GAAG;QACd,eAAe;QACf,iBAAiB;QACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;KACF,AAxBY,CAwBZ;IASD,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC;;4BAE3C,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;;;;;mBAK9C,IAAI,CAAC,IAAI;wBACJ,OAAO,CAAC,CAAC,CAAC,iCAAiC,CAAC;mBACjD,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CACvD;YAAC,CAAC,CAAC,MAA2B,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAA;YACjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACrB,CAAC;qBACU,IAAI,CAAC,KAAK;;UAErB,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,qBAAqB,OAAO,CAAC,CAAC,CAAC,wCAAwC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;;4BAGtH,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mBAGvC,IAAI,CAAC,IAAI;wBACJ,OAAO,CAAC,CAAC,CAAC,iCAAiC,CAAC;mBACjD,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;qBAC9D,IAAI,CAAC,KAAK;;;QAGvB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,qCAAqC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;+CAE3F,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;qDACrD,CAAC,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;KAEpH,CAAA;IACH,CAAC;;AA1CW;IAAX,QAAQ,EAAE;;+CAAU;AACT;IAAX,QAAQ,EAAE;;+CAAU;AAEW;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;gDAAqB;AACnC;IAAhB,KAAK,EAAE;;kDAA8D;AAhC3D,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAiF7B","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport '@operato/popup/ox-popup-actions.js'\nimport { CommonPopupStyles, FormFieldStyles } from '@operato/styles'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { firstSaveRefusalOf, releasableType, typeOf, type FirstSave } from './v3-first-save.js'\n\n/**\n * The first save of a new figure: its type and its name, asked once (V2's save dialog, in the suite's popup look).\n * Closes with the answer, or with nothing when cancelled -- then nothing is saved.\n */\n@customElement('figure-v3-first-save')\nexport class FigureV3FirstSave extends LitElement {\n  static styles = [\n    FormFieldStyles,\n    CommonPopupStyles,\n    css`\n      /* The popup's height is a share of the window (small is 40%): on a low window the buttons must still be reached. */\n      :host {\n        overflow-y: auto;\n      }\n      div[field] {\n        display: grid;\n        gap: 4px;\n      }\n      div[field] label {\n        font-size: var(--popup-font-size-small);\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      div[field] input {\n        box-sizing: border-box;\n        width: 100%;\n      }\n      input[type-field] {\n        font-family: var(--mono-font, monospace);\n      }\n    `\n  ]\n\n  /** The type the figure has so far -- empty for a temporary one, which is not offered. */\n  @property() type = ''\n  @property() name = ''\n  /** Type names already used in this domain. */\n  @property({ attribute: false }) taken: string[] = []\n  @state() private refusal: { key: string; type?: string } | null = null\n\n  render() {\n    return html`\n      <div class=\"what\">${i18next.t('figure.text.save-new-figure-desc')}</div>\n      <div field>\n        <label for=\"type\">${i18next.t('figure.label.figure-type')}</label>\n        <input\n          id=\"type\"\n          type-field\n          autofocus\n          .value=${this.type}\n          placeholder=${i18next.t('figure.text.figure-type-example')}\n          @input=${(e: Event) => {\n            this.type = typeOf((e.target as HTMLInputElement).value)\n            ;(e.target as HTMLInputElement).value = this.type\n            this.refusal = null\n          }}\n          @keydown=${this.onKey}\n        />\n        ${this.type && !releasableType(this.type) ? html`<div class=\"note\">${i18next.t('figure.text.type-name-will-not-release')}</div>` : nothing}\n      </div>\n      <div field>\n        <label for=\"name\">${i18next.t('figure.label.name')}</label>\n        <input\n          id=\"name\"\n          .value=${this.name}\n          placeholder=${i18next.t('figure.text.figure-name-example')}\n          @input=${(e: Event) => (this.name = (e.target as HTMLInputElement).value)}\n          @keydown=${this.onKey}\n        />\n      </div>\n      ${this.refusal ? html`<div class=\"failure\" role=\"alert\">${i18next.t(this.refusal.key, { type: this.refusal.type })}</div>` : nothing}\n      <ox-popup-actions>\n        <md-text-button slot=\"cancel\" @click=${() => closePopup(this)}>${i18next.t('figure.button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" ?disabled=${!this.type} @click=${this.confirm}>${i18next.t('figure.button.save')}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.isComposing) this.confirm()\n  }\n\n  private confirm = () => {\n    this.refusal = firstSaveRefusalOf(this.type, this.taken)\n    if (this.refusal) return\n    closePopup(this, { type: this.type, name: this.name.trim() || this.type } satisfies FirstSave)\n  }\n}\n"]}

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

@@ -30,7 +30,9 @@ export declare class FigureV3Links extends FigureV3Links_base {
     private fasten;
     private motion;
     private place;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private row;
+    willUpdate(changed: Map<string, unknown>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     /** 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. */
@@ -43,6 +45,17 @@ export declare class FigureV3Links extends FigureV3Links_base {
      */
     private renderPositions;
     private renderFastening;
+    /**
+     * 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.
+     */
+    private renderAlignment;
+    /**
+     * 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.
+     */
+    private renderRow;
     private renderMotion;
     private setKind;
     private command;

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

@@ -4,10 +4,24 @@ 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, dimensionNow, followableAxes, positionIsShare, choiceOf, fastenedTo, followOf, hasInstanceSize, holdsThings, motionOf, placeFacesOf, placeIdFor, placesOn, positionsWorkedOut } from './v3-links.js';
+import { acceptsOf, alignAxesOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, fastenedTo, followOf, hasInstanceSize, holdsThings, leadersFor, motionOf, 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 });
+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 (parity rows ④ ⑤ ⑥).
  *
@@ -30,9 +44,10 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
         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 = { 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 };
+        this.fasten = freshFasten();
+        this.motion = freshMotion();
+        this.place = freshPlace();
+        this.row = freshRow();
     }
     static { this.styles = [SidePanelStyles, css `
     :host {
@@ -52,6 +67,18 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
       font-weight: 600;
     }
   `]; }
+    /*
+      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) {
+            this.fasten = freshFasten();
+            this.motion = freshMotion();
+            this.place = freshPlace();
+            this.row = freshRow();
+        }
+    }
     render() {
         const asset = this.asset;
         if (!asset || !this.partId)
@@ -72,6 +99,7 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
         ${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 (parity row ⑤). */
@@ -209,6 +237,13 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
         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));
+        /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
+        const mineFaces = facesOf(asset, this.partId).filter(face => FACES.includes(face));
+        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 `
       ${to
             ? html `<div pair>
@@ -221,7 +256,7 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
       <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>`)}
+          ${mineFaces.map(face => html `<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
         </select>
       </div>
       <label toggle>
@@ -238,7 +273,7 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
             </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>`)}
+              ${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 })}>
@@ -246,9 +281,12 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
               <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
@@ -256,10 +294,12 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
         @click=${() => this.command({
             kind: 'attach',
             part: this.partId,
-            face: f.face,
-            to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: f.targetFace },
+            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: !!to
         })}
       >
@@ -267,56 +307,153 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
       </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>
+          </select>
+          ${how === 'mm'
+                ? 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>`;
+    }
     renderMotion(asset) {
         const now = motionOf(asset, this.partId);
+        const joint = asset.joints?.find(j => j.body1.part === 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}
+          ${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} @click=${() => this.command({ kind: 'remove-motion', part: this.partId })}>
+        <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>
       </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 === 'turn' ? 'deg' : 'mm';
+        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>
-      <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>
+      ${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>
+            <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'
+                ? 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 || !(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 }
-        })}
+        ?disabled=${this.locked || (follow ? !(Number.isFinite(m.multiplier) && m.multiplier !== 0) : m.kind !== 'continuous' && !(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) })}
       >
         <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 };
+        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 }));
@@ -354,6 +491,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureV3Links.prototype, "place", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Links.prototype, "row", void 0);
 FigureV3Links = __decorate([
     customElement('figure-v3-links')
 ], FigureV3Links);