@things-factory/figure-ui 10.1.208 → 10.1.211

package/client/modeller/figure-links.ts

@@ -3,24 +3,20 @@ import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing } from 'lit'
 import '@operato/input/ox-input-select-buttons.js'
 import './figure-slot-layout-panel.js'
+import './figure-size-editor.js'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { figureFaceOverhangOf } from '@hatiolab/figure-model'
-import type { FigureAsset, FigureAuthoringAction, FigureDimensionSource, FigureFace } from '@hatiolab/figure-model'
+import { figureFaceOverhangOf, figureMotionsOf, motionIdOf } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
 
 import {
   acceptsOf,
   AXES,
   canFasten,
   canFollow,
-  followCommandOf,
-  followableAxes,
   positionIsShare,
-  choiceOf,
-  followWordsOf,
   heldBy,
-  followOf,
   shownWhenOf,
   visibilityControlsOf,
   fasteningOf,
@@ -32,6 +28,8 @@ import {
   motionFormRefusalOf,
   endPlaceKeyOf,
   motionJoint,
+  controlIdFor,
+  withoutAxis,
   placeFacesOf,
   placeIdFor,
   placesOn,
@@ -40,9 +38,7 @@ import {
   fixedJointOf,
   rowOf,
   positionsWorkedOut,
-  measureNow,
   type Axis,
-  type Follow,
   type MotionForm
 } from './links.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
@@ -113,8 +109,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       font-weight: 600;
     }
     /* What each direction does now: read-only rows. */
-    div[resize-now] { display: grid; gap: 4px; margin: 12px 0; }
-    div[resize-now] div[row] { grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; }
+    div[resize-now] { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 8px; margin: 12px 0; }
+    div[resize-now] div[row] { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
     div[resize-now] span[measure] { font-variant-numeric: tabular-nums; }
     /* Size behaviour is a choice about dimensions only. It never implies a placement or a fastening. */
     /* One of the size group's rows: the group's gap spaces it, as it does the rest (a margin on top of it left a hole). */
@@ -124,13 +120,11 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     details { margin-top: 8px; }
     details[row-fold] { margin: 0; }
     details[row-fold] > summary { padding: 0; color: var(--md-sys-color-on-surface); }
-    details[row-fold] > summary h3 { margin: 0; }
+    details[row-fold] > summary h3 { margin: 0; flex: 1; }
     details[row-fold][open] > summary { margin-bottom: 8px; }
     /* What the command would do, said beside the result drawn on the canvas. */
     ul[preview-words] { margin: 8px 0; padding: 8px 12px 8px 26px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); display: grid; gap: 4px; }
     p[preview-words] { margin: 8px 0; padding: 8px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
-    div[row-basis] { display: grid; gap: 4px; margin: 8px 0; }
-    div[row-basis] label { display: flex; align-items: center; gap: 6px; }
     div[overhang] { display: grid; gap: 6px; margin: 8px 0; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--md-sys-color-outline-variant, #8884); }
     div[overhang] p { margin: 0; }
     ul[detach-words] { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 2px; }
@@ -191,6 +185,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   @state() private row = freshRow()
   /** The motion form is open over the part's own motion, to change it where it is. */
   @state() private editingMotion = false
+  /** Which of the joint's axes the form is over (ADR-0159); one past the last is a new axis. */
+  @state() private motionAxis = 0
 
   /*
     The forms describe the next command for the selected part, so another part starts from the defaults: carrying the
@@ -209,7 +205,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.motion = freshMotion()
       this.place = freshPlace()
       this.row = freshRow()
+      this.rowOpen = false
+      this.rowCandidate = undefined
       this.editingMotion = false
+      this.motionAxis = 0
     }
   }
 
@@ -273,13 +272,14 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         How the part answers a size it is placed at (user 2026-10-17, the 「반응형」 tab): its own measures, where it
         stands, and the row it may make -- what Build Once, Fit Anywhere is authored with, in one place.
       */
-      const positions = positionsWorkedOut(asset, this.partId)
+      const positions = held ? [] : positionsWorkedOut(asset, this.partId)
+      this.rowCandidate = undefined
       const response = html`
-        <section size-response>
+        ${canFollow(asset, this.partId) ? html`<section size>
           <h3>${i18next.t('figure.label.group-size')}</h3>
-          <p group-question>${i18next.t('figure.label.resize-intent')}</p>
-          ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.part-cannot-follow')}</p>`}
-        </section>
+          <figure-size-editor .revision=${this.revision} .partId=${this.partId} ?locked=${this.locked}></figure-size-editor>
+          <slot name="size-note"></slot>
+        </section>` : nothing}
         ${positions.length
           ? html`<section position-response>
               <h3>${i18next.t('figure.label.group-position-response')}</h3>
@@ -292,10 +292,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       return response
     }
     const shown = html`
-      <section size>
-        <h3>${i18next.t('figure.label.group-size')}</h3>
-        <slot name="size"></slot>
-      </section>
+      <slot name="size"></slot>
       <section fastening>
         <h3>
           ${i18next.t('figure.label.group-place')}${this.help.button('figure.text.fastening-explained')}
@@ -379,80 +376,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }))
   }
 
-  private renderDimensions(asset: FigureAsset) {
-    const editable = followableAxes(asset, this.partId)
-    const round = editable.length === 2
-    const word = (axis: Axis) => i18next.t(round && axis === 'x' ? 'figure.label.resize-diameter' : `figure.label.resize-${axis}`)
-    const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
-    const followsAll = editable.every(axis => followOf(asset, this.partId, axis).of === 'instance')
-    /* A size of its own on every axis is the usual: nothing to read, only the way to make it follow (user 2026-10-01). */
-    const allOwn = editable.every(axis => followOf(asset, this.partId, axis).of === 'own')
-    return html`${asset.sizing === 'uniform' ? html`<p hint>${i18next.t('figure.text.resize-uniform-warning')}</p>` : nothing}
-      ${allOwn ? nothing : html`<div resize-now>${editable.map(axis => {
-        const now = followOf(asset, this.partId, axis)
-        const following = now.of === 'instance' && now.axis === axis
-        const custom = now.of !== 'own' && !following
-        const mm = measureNow(this.revision!, this.partId, axis)
-        return html`<div row>
-          <b>${word(axis)}</b>
-          <span measure>${mm === undefined ? '—' : `${Math.round(mm)} mm`}</span>
-          <span>${custom ? followWordsOf(now, (key, params) => i18next.t(key, params)) : i18next.t(following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
-          ${following
-            ? html`<button quiet resize-unfollow=${axis} ?disabled=${this.locked}
-                @click=${() => {
-                  this.follow(axis, 'own', now)
-                }}>${i18next.t('figure.button.resize-unfollow')}</button>`
-            : nothing}
-        </div>`
-      })}</div>`}
-      ${followsAll
-        ? nothing
-        : html`<button act follow-size ?disabled=${this.locked || asset.sizing === 'uniform'} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
-            <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
-          </button>`}
-      <details resize-choice><summary>${i18next.t('figure.label.resize-advanced')}</summary><div>${followableAxes(asset, this.partId).map(axis => {
-      const now = followOf(asset, this.partId, axis)
-      const value = choiceOf(now)
-      /* A cylinder's two measures are its radius and its length; its X and Y name them. */
-      const name = round ? i18next.t(axis === 'x' ? 'figure.label.field-radius' : 'figure.label.field-length') : axis.toUpperCase()
-      return html`<div row>
-        <b>${name}</b>
-        <select ?disabled=${this.locked} @change=${(e: Event) => this.follow(axis, (e.target as HTMLSelectElement).value, now)}>
-          <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
-          ${AXES.filter(one => hasInstanceSize(asset, one)).map(
-            one => html`<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
-                ${i18next.t('figure.label.follows-instance-share', { axis: one.toUpperCase() })}
-              </option>
-              <option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
-                ${i18next.t('figure.label.follows-instance', { axis: one.toUpperCase() })}
-              </option>`
-          )}
-          ${others.flatMap(other =>
-            AXES.map(
-              one => html`<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${i18next.t('figure.label.follows-part-axis', { part: other, axis: one.toUpperCase() })}</option>`
-            )
-          )}
-          ${now.of === 'expression' || now.of === 'input'
-            ? html`<option value=${value} selected>${now.of === 'input' ? now.input : i18next.t('figure.label.follows-expression')}</option>`
-            : nothing}
-        </select>
-        ${now.of === 'instance' || now.of === 'part'
-          ? html`<span></span>
-              <label inline-plus>
-                ${i18next.t('figure.label.follows-plus')}
-                <input
-                  type="number"
-                  step="any"
-                  ?disabled=${this.locked}
-                  .value=${String(now.plus ?? 0)}
-                  @change=${(e: Event) => this.followPlus(axis, now, Number((e.target as HTMLInputElement).value) || 0)}
-                />
-              </label>`
-          : nothing}
-      </div>`
-    })}</div></details>`
-  }
-
   /**
    * 정렬·간격 고치기: the part moved inside the face it is fastened on, as one step -- the least move on each side it is
    * out, or centred when it is wider than the face. When nothing of it can be moved, why is said under the button, not
@@ -503,20 +426,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     return where
   }
 
-  /** The same source, the same share, a new difference: a leaf the opening less its gaps (link-dimension's `plus`). */
-  private followPlus(axis: Axis, now: Follow, plus: number) {
-    if (now.of !== 'instance' && now.of !== 'part') return
-    if ((now.plus ?? 0) === plus) return
-    const source: FigureDimensionSource = now.of === 'instance' ? { of: 'instance', axis: now.axis } : { of: 'part', part: now.part, axis: now.axis }
-    const times = now.of === 'instance' ? now.times : (now.times ?? 1)
-    this.command({ kind: 'link-dimension', part: this.partId, axis, source, ...(times !== 1 ? { times } : {}), ...(plus ? { plus } : {}), replace: true })
-  }
-
-  private follow(axis: Axis, choice: string, now: Follow) {
-    const action = followCommandOf(this.revision!, this.partId, axis, choice, now)
-    if (action) this.command(action)
-  }
-
   /**
    * Positions worked out from other values, each with the way to
    * keep it where it is. This is the way out the release gate names when a resize leaves a part in the air.
@@ -617,9 +526,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       Folded, open while it is being worked (2026-10-02): a row is made now and then, and most parts stand on the plane,
       where the section said its reason open on every one. Opened, it says why or asks how.
     */
-    const head = html`<summary><h3>${i18next.t('figure.label.repeat')}</h3></summary>`
+    const head = html`<summary><h3>${i18next.t('figure.label.repeat')} <span section-state>${i18next.t('figure.label.repeat-inactive')}</span></h3></summary>`
     if (blocked || !axes.length)
-      return html`<section row><details row-fold>
+      return html`<section row><details row-fold open>
         ${head}
         <p hint row-blocked>${i18next.t(`figure.text.row-blocked-${blocked ?? 'unfastened'}`, { part: this.partId })}</p>
         ${blocked === 'unfastened'
@@ -640,27 +549,29 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const toggled = (e: Event) => (this.rowOpen = (e.target as HTMLDetailsElement).open)
     return html`<section row><details row-fold ?open=${this.rowOpen} @toggle=${toggled}>
       ${head}
+      <p hint>${i18next.t('figure.text.repeat-intro')}</p>
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>
-        <select @change=${(e: Event) => set({ ...r, axis: (e.target as HTMLSelectElement).value as Axis })}>
+        <select aria-label=${i18next.t('figure.label.repeat-axis')} ?disabled=${this.locked} @change=${(e: Event) => set({ ...r, axis: (e.target as HTMLSelectElement).value as Axis })}>
           ${axes.map(a => html`<option value=${a} ?selected=${a === axis}>${a.toUpperCase()}</option>`)}
         </select>
       </div>
-      <div row-basis role="radiogroup" aria-label=${i18next.t('figure.label.row-basis')}>
-        <label><input type="radio" name="row-basis" .checked=${r.fills} @change=${() => set({ ...r, fills: true })} />${i18next.t('figure.label.repeat-fills')}</label>
-        <label><input type="radio" name="row-basis" .checked=${!r.fills} @change=${() => set({ ...r, fills: false })} />${i18next.t('figure.label.row-by-count')}</label>
+      <p hint>${i18next.t('figure.text.repeat-direction')}</p>
+      <div choice-row role="radiogroup" aria-label=${i18next.t('figure.label.row-basis')}>
+        <label toggle><input type="radio" name="row-basis" ?disabled=${this.locked} .checked=${r.fills} @change=${() => set({ ...r, fills: true })} />${i18next.t('figure.label.repeat-fills')}</label>
+        <label toggle><input type="radio" name="row-basis" ?disabled=${this.locked} .checked=${!r.fills} @change=${() => set({ ...r, fills: false })} />${i18next.t('figure.label.row-by-count')}</label>
       </div>
       ${r.fills
         ? html`<div form>
             <span>${i18next.t('figure.label.repeat-pitch')} · mm</span>
-            <input type="number" step="any" min="0" .value=${String(r.pitch)} @change=${(e: Event) => set({ ...r, pitch: Number((e.target as HTMLInputElement).value) })} />
+            <input aria-label=${i18next.t('figure.label.repeat-pitch')} ?disabled=${this.locked} type="number" step="any" min="0" .value=${String(r.pitch)} @change=${(e: Event) => set({ ...r, pitch: Number((e.target as HTMLInputElement).value) })} />
           </div>`
         : html`<div form>
               <span>${i18next.t('figure.label.repeat-count')}</span>
-              <input type="number" step="1" min="1" .value=${String(r.count)} @change=${(e: Event) => set({ ...r, count: Number((e.target as HTMLInputElement).value) })} />
+              <input aria-label=${i18next.t('figure.label.repeat-count')} ?disabled=${this.locked} type="number" step="1" min="1" .value=${String(r.count)} @change=${(e: Event) => set({ ...r, count: Number((e.target as HTMLInputElement).value) })} />
             </div>
             <p hint>${i18next.t('figure.text.row-count-spreads')}</p>`}
-      ${action && this.rowOpen ? this.renderPreviewWords() : nothing}
+      ${action && this.rowOpen ? html`<p hint>${i18next.t('figure.text.repeat-draft')}</p>${this.renderPreviewWords()}` : nothing}
       <button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
         <md-icon>view_week</md-icon>${i18next.t('figure.button.make-repeat')}
       </button>
@@ -717,6 +628,43 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       /* Which part moves, against what, which way, how far -- by name (ADR-0097 §5.5). */
       const against = joint ? ('plane' in joint.body0 ? i18next.t('figure.label.mounting-plane') : joint.body0.part) : ''
       const ends = this.motionEnds
+      /* One row an axis (ADR-0159): how it moves and by what, changed or taken away where it is; more added under them. */
+      const count = joint ? figureMotionsOf(joint).length : 1
+      const edit = (k: number) => {
+        if (!joint) return
+        this.motionAxis = k
+        this.motion = motionFormOf(joint, k)
+        this.editingMotion = true
+      }
+      const row = (k: number) => {
+        const it = k === 0 ? now : motionOf(asset, this.partId, k)
+        if (!it) return nothing
+        return html`<div pair motion-axis=${k}>
+          <span>
+            ${count > 1 ? html`<b>${i18next.t('figure.label.motion-axis-n', { n: k + 1 })}</b> ` : nothing}${i18next.t('figure.label.motion-' + it.kind)} · ${it.vector ? jointAxisWord(it.vector) : String(it.axis).toUpperCase()}
+            ${it.travel
+              ? html`<small>${i18next.t('figure.label.motion-travel-is', { part: it.travel.part, axis: it.travel.axis.toUpperCase(), plus: it.travel.plus ?? 0 })}</small>`
+              : nothing}
+            ${it.follows?.sum.length === 1
+              ? html`<small>${i18next.t('figure.label.motion-follows', { joint: it.follows.sum[0]!.joint, multiplier: it.follows.sum[0]!.multiplier, offset: it.follows.offset })}</small>`
+              : it.follows
+              ? html`<small>${i18next.t('figure.label.motion-follow')}: ${it.follows.sum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')} + ${it.follows.offset}</small>`
+              : it.control
+                ? html`<small>${it.control.id} (${it.control.unit}) ${it.control.min} … ${it.control.max}</small>`
+                : nothing}
+          </span>
+          ${count > 1
+            ? html`<button act remove-axis ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: withoutAxis(joint, k) })}>
+                <md-icon>close</md-icon>${i18next.t('figure.button.remove-axis')}
+              </button>`
+            : html`<button act ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
+                <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
+              </button>`}
+          <button act ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
+            <md-icon>edit</md-icon>${i18next.t('figure.button.change-motion')}
+          </button>
+        </div>`
+      }
       return html`<p motion-summary>
           ${i18next.t('figure.text.motion-summary', {
             part: this.partId,
@@ -728,39 +676,17 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         ${ends
           ? html`<p hint motion-ends>${i18next.t('figure.text.motion-ends-shown', { min: String(ends.min), max: String(ends.max), unit: ends.unit })}</p>`
           : nothing}
+        ${Array.from({ length: count }, (_, k) => row(k))}
         <div pair>
-        <span>
-          ${i18next.t('figure.label.motion-' + now.kind)} · ${now.vector ? jointAxisWord(now.vector) : 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>`
+          <button act add-axis ?disabled=${this.locked || !joint} @click=${() => edit(count)}>
+            <md-icon>add</md-icon>${i18next.t('figure.button.add-axis')}
+          </button>
+          ${count > 1
+            ? html`<button act ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
+                <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
+              </button>`
             : nothing}
-          ${now.follows?.sum.length === 1
-            ? html`<small>${i18next.t('figure.label.motion-follows', { joint: now.follows.sum[0]!.joint, multiplier: now.follows.sum[0]!.multiplier, offset: now.follows.offset })}</small>`
-            : now.follows
-            ? html`<small>${i18next.t('figure.label.motion-follow')}: ${now.follows.sum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')} + ${now.follows.offset}</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: fixedJointOf(joint) })}
-        >
-          <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>`
+        </div>`
     }
     /* A joint needs a parent (URDF): a part fastened to nothing is fastened first. */
     if (!joint)
@@ -771,10 +697,13 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     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 k = this.motionAxis
+    const leaders = leadersFor(asset, this.partId, m.kind, motionIdOf(joint, k))
+    const adding = k > 0 && k >= figureMotionsOf(joint).length
     const follow = leaders.some(j => j.id === m.follow) ? m.follow : ''
     const refusal = motionFormRefusalOf(m, follow)
     return html`
+      ${k > 0 ? html`<p motion-axis-heading><b>${i18next.t('figure.label.motion-axis-n', { n: k + 1 })}</b></p>` : nothing}
       <div pair>
         <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn' | 'continuous')}>
           <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>
@@ -799,7 +728,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             <span>${i18next.t('figure.label.motion-follow')}</span>
             <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
               <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
-              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.body1.part}${j.state ? ` · ${j.state.id}` : ''}</option>`)}
+              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
             </select>
           </div>`
         : nothing}
@@ -830,7 +759,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                     : nothing}`
               : nothing}
             <span>${i18next.t('figure.label.control-id')}</span>
-            <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
+            <input .value=${m.id} placeholder=${controlIdFor(this.partId, m.kind, k)} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
             ${m.kind === 'continuous' || (m.kind === 'slide' && (m.travel || m.travelSum))
               ? nothing
               : html`<span>${i18next.t('figure.label.control-range')} (${unit})</span>
@@ -844,14 +773,15 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         ?disabled=${this.locked || !!refusal}
         title=${refusal === 'range' ? i18next.t('figure.text.range-needs-room') : ''}
         @click=${() => {
-          this.command({ kind: 'set-joint', joint: motionJoint(joint, { ...m, follow }, this.partId) })
+          this.command({ kind: 'set-joint', joint: motionJoint(joint, { ...m, follow }, this.partId, k) })
           this.editingMotion = false
+          this.motionAxis = 0
         }}
       >
-        <md-icon>animation</md-icon>${i18next.t(this.editingMotion ? 'figure.button.apply-motion-change' : 'figure.button.add-motion')}
+        <md-icon>animation</md-icon>${i18next.t(adding ? 'figure.button.add-axis' : 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>`
+        ? html`<button act @click=${() => ((this.editingMotion = false), (this.motionAxis = 0))}><md-icon>undo</md-icon>${i18next.t('figure.button.cancel-motion-change')}</button>`
         : nothing}
     `
   }