@things-factory/figure-ui 10.1.271 → 10.1.273

package/client/modeller/figure-fasten-dialog.ts

@@ -89,7 +89,28 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
       }
       details[fasten-detail] > div[form] {
         margin-top: 8px;
-        max-width: 320px;
+        max-width: 420px;
+      }
+      /* Where across the face, as buttons: a list the system draws is not seen in a recording, nor reached by a key in every browser. */
+      div[align-choices] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+      div[align-choices] button {
+        font: inherit;
+        font-size: var(--ui-t-small, 11.5px);
+        padding: 3px 8px;
+        border-radius: 12px;
+        border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+      div[align-choices] button[aria-pressed='true'] {
+        border-color: var(--md-sys-color-primary, #0d8f86);
+        background: var(--md-sys-color-primary-container, #cdeeea);
+        font-weight: 600;
       }
       span[fasten-summary] {
         opacity: 0.8;
@@ -253,7 +274,7 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
                   <summary>
                     ${i18next.t('figure.label.fasten-detail')}${detail.length ? html` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}
                   </summary>
-                  ${plan.alignRows.length ? this.renderAlignment(plan.alignRows) : nothing}
+                  ${(plan.alignAxes ?? plan.alignRows).length ? this.renderAlignment(plan.alignAxes ?? plan.alignRows) : nothing}
                   <div form>
                     <span>${i18next.t('figure.label.gap')}</span>
                     <input
@@ -384,34 +405,24 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
               : 'centre'
             : (f.align[axis] ?? 'centre')
         return html`<span>${i18next.t('figure.label.align-' + axis)}</span>
-          <select @change=${(e: Event) => set(axis, (e.target as HTMLSelectElement).value as Alignment)}>
-            <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
-            }
-            ${
-              f.alignInput?.[axis]
-                ? html`<option value="input" ?selected=${how === 'input'}>
-                    ${i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis]!, key => i18next.t(key)) })}
-                  </option>`
-                : nothing
-            }
-            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
-            ${
-              this.revision && hasInstanceSize(this.revision.asset, axis)
-                ? html`<option value="share" ?selected=${how === 'share'}>
-                    ${i18next.t('figure.label.align-share')}
-                  </option>`
-                : nothing
-            }
-          </select>
+          <div align-choices role="group" aria-label=${i18next.t('figure.label.align-' + axis)}>
+            ${[
+              { value: 'centre' as Alignment, words: i18next.t('figure.label.align-centre'), shown: true },
+              { value: 'min' as Alignment, words: i18next.t(`figure.label.align-${axis}-min`), shown: edges },
+              { value: 'max' as Alignment, words: i18next.t(`figure.label.align-${axis}-max`), shown: edges },
+              {
+                value: 'input' as Alignment,
+                words: f.alignInput?.[axis] ? i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis]!, key => i18next.t(key)) }) : '',
+                shown: !!f.alignInput?.[axis]
+              },
+              { value: 'mm' as Alignment, words: i18next.t('figure.label.align-mm'), shown: true },
+              { value: 'share' as Alignment, words: i18next.t('figure.label.align-share'), shown: !!this.revision && hasInstanceSize(this.revision.asset, axis) }
+            ]
+              .filter(choice => choice.shown)
+              .map(
+                choice => html`<button type="button" aria-pressed=${String(how === choice.value)} @click=${() => set(axis, choice.value)}>${choice.words}</button>`
+              )}
+          </div>
           ${
             how === 'mm' || how === 'share'
               ? html`<span></span

package/client/modeller/figure-fasten-drawing.ts

@@ -6,6 +6,7 @@ import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-
 import { figureAroundNormalOf, figureAroundOf, figureCaughtAngleOf, figureSurfaceAnglesOf, figureSurfacePlaceOf } from '@hatiolab/figure-model'
 import type { FigureFace, FigureSurfacePlace } from '@hatiolab/figure-model'
 
+import { focusOnRender } from './focus-on-render.js'
 import { alignmentAt, drawingSpanOf, fastenLabelsOf, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { Alignment } from './links.js'
 
@@ -72,22 +73,28 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     svg text {
       font: inherit;
     }
+    /*
+      The ways on one line, a small side view beside each word: three cards of a drawing over a word made the window
+      tall, and the fasten button below went off a laptop's screen (user 2026-11-12). The chosen one's gap is dragged
+      on its small view still; the gap's field is in the details.
+    */
     div[modes] {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
-      gap: 6px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
     }
     div[modes] svg {
-      width: 48px;
-      height: 33px;
+      flex: none;
+      width: 28px;
+      height: 20px;
     }
     /* A choice drawn, not a box to press (the side's rule: no boxed buttons): the chosen one on the primary's ground. */
     div[modes] button {
-      display: grid;
-      justify-items: center;
-      align-content: center;
-      gap: 2px;
-      padding: 4px 4px 6px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px 2px 4px;
+      white-space: nowrap;
       font: inherit;
       color: var(--md-sys-color-on-surface);
       background: none;
@@ -122,8 +129,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       border: 1px solid var(--md-sys-color-primary);
     }
     div[modes] button[on] {
-      background: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container, #d8e2ff);
+      color: var(--md-sys-color-on-primary-container, #001a41);
     }
     /* The box and the face seen from above side by side, one under the other where the window is narrow. */
     div[face-row] {
@@ -332,7 +339,9 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const { h, v, sign } = screenOf(view.axes)
     const W = WHERE_W,
       H = WHERE_H
-    const span = (a: Axis) => drawingSpanOf(view.face[a], view.part[a])
+    /* Where the part is set, not where it is being dragged: the drawing's scale holds still under the pointer. */
+    const set = (a: Axis) => offsetOf(this.align[a], this.alignMm[a], view.face[a], view.part[a])
+    const span = (a: Axis) => drawingSpanOf(view.face[a], view.part[a], set(a))
     const k = Math.min((W - 40) / span(h), (H - 40) / span(v))
     this.scale = k
     const cx = W / 2,
@@ -432,7 +441,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
         this.change({ axis: a, how: 'mm', mm: Math.round(value) })
         this.released()
       }}
-      @blur=${() => (this.typing = undefined)} />`
+      @blur=${() => (this.typing = undefined)}
+      ${focusOnRender()} />`
   }
 
   private grab(ev: PointerEvent, at: Record<Axis, number>, caught: Partial<Record<Axis, string>>) {

package/client/modeller/figure-first-save.ts

@@ -7,7 +7,7 @@ import { CommonPopupStyles, FormFieldStyles } from '@operato/styles'
 import '@material/web/button/filled-button.js'
 import '@material/web/button/text-button.js'
 
-import { firstSaveRefusalOf, offeredTypeOf, releasableType, typeOf, type FirstSave } from './first-save.js'
+import { firstSaveRefusalOf, offeredTypeOf, releasableType, typeOf, typingTypeOf, type FirstSave } from './first-save.js'
 
 /**
  * The first save of a new figure: its type and its name, asked once, in the suite's popup look.
@@ -97,13 +97,13 @@ export class FigureFirstSave extends LitElement {
           .value=${this.type}
           placeholder=${i18next.t('figure.text.figure-type-example')}
           @input=${(e: Event) => {
-            this.type = typeOf((e.target as HTMLInputElement).value)
+            this.type = typingTypeOf((e.target as HTMLInputElement).value)
             ;(e.target as HTMLInputElement).value = this.type
             this.refusal = null
           }}
           @keydown=${this.onKey}
         />
-        ${this.type && !releasableType(this.type)
+        ${typeOf(this.type) && !releasableType(typeOf(this.type))
           ? html`<div class="note">${i18next.t('figure.text.type-name-will-not-release')}</div>`
           : this.suggested && this.type === this.suggested
             ? html`<div class="note">${i18next.t('figure.text.identifier-suggested')}</div>`
@@ -132,6 +132,7 @@ export class FigureFirstSave extends LitElement {
   }
 
   private confirm = () => {
+    this.type = typeOf(this.type)
     this.refusal = firstSaveRefusalOf(this.type, this.taken)
     if (this.refusal) return
     const namespace = this.namespaces.length > 1 ? this.chosenNamespace : undefined

package/client/modeller/figure-links.ts

@@ -50,7 +50,7 @@ import {
   stateSizeFixedOf,
   type StateSizeForm
 } from './links.js'
-import { measureFactor } from './size-response.js'
+import { measureFactor, sizeAxisWord } from './size-response.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { insideAlignmentOf } from './fasten-geometry.js'
 import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js'
@@ -58,9 +58,22 @@ import type { FigureRevision } from './revision.js'
 import { HelpToggles } from './help.js'
 import { groupMenu, GroupMenuStyles } from './group-menu.js'
 import { jointAxisWord } from './joint-axis.js'
+import { PIVOT_POINTS, pivotPointOf, pivotPointsOf, type PivotPoint } from './pivot.js'
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
 
 const freshMotion = (): MotionForm => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 })
+
+/**
+ * The motion a part's form starts from: a part hung on another part most often turns there -- a thigh at the hip, a door
+ * at its frame -- so it starts as a turn; a part on the plane, or on nothing, as a slide (review 2026-11-11: eight
+ * joints of a humanoid, each changed from slide to turn by hand).
+ */
+export function motionStartOf(revision: FigureRevision | undefined, part: string): MotionForm {
+  const own = revision ? fasteningOf(revision, part) : undefined
+  return own && !own.toPlane && own.target ? { ...freshMotion(), kind: 'turn', min: -90, max: 90 } : freshMotion()
+}
+
+const sameMotion = (a: MotionForm, b: MotionForm) => JSON.stringify(a) === JSON.stringify(b)
 const freshRow = () => ({ axis: '' as Axis | '', pitch: 200, fills: true, count: 5 })
 const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as FigureFace, label: '', accepts: '', capacity: 1 })
 
@@ -82,9 +95,31 @@ const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as Figu
 export class FigureLinks extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
   static styles = [SidePanelStyles, GroupMenuStyles, css`
+    /* A motion's delete and edit as icons at the line's end, their words in their titles: two word buttons took the line (user 2026-11-12). */
+    div[pair] > button[act][icon] {
+      flex: none;
+      width: var(--figure-control-height, 28px);
+      padding: 0;
+      justify-content: center;
+    }
+    /* The size-by-state form folded under its summary, opened to add one. */
+    details[state-size-add][open] > summary {
+      margin-bottom: 6px;
+    }
     :host {
       display: block;
     }
+    /* The turn's axis through the part's top, middle or bottom, by name, under the numbers it fills in. */
+    div[pivot-points] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 4px 0 8px;
+    }
+    div[pivot-points] > span {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--ui-t-small, 11.5px);
+    }
     /* A group's sub-question, under its title: quieter than the title, as a label is. */
     p[group-question] {
       margin: 4px 0 0;
@@ -216,7 +251,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     if (changed.has('asset') || changed.has('partId')) this.fixNote = ''
     if (this.asset && this.partId && this.partId !== this.loadedFor) {
       this.loadedFor = this.partId
-      this.motion = freshMotion()
+      this.motion = motionStartOf(this.revision, this.partId)
       this.place = freshPlace()
       this.placeEditing = null
       this.row = freshRow()
@@ -224,6 +259,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.rowCandidate = undefined
       this.editingMotion = false
       this.motionAxis = 0
+    } else if (changed.has('revision') && this.partId && !this.editingMotion) {
+      /* Fastened since the form was loaded, a form nobody has touched starts as that part's motion now does. */
+      const was = motionStartOf(changed.get('revision') as FigureRevision | undefined, this.partId)
+      if (sameMotion(this.motion, was)) this.motion = motionStartOf(this.revision, this.partId)
     }
   }
 
@@ -624,7 +663,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const part = this.partId
     const axes = followableAxes(asset, part)
     if (!axes.length) return nothing
-    const word = (axis: Axis) => `${axis.toUpperCase()}${measureFactor(asset, part, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`
+    const word = (axis: Axis) => sizeAxisWord(asset, part, axis, i18next.t('figure.label.size-diameter'))
     const sized = axes.flatMap(axis => {
       const f = followOf(asset, part, axis)
       return f.of === 'state' ? [{ axis, f }] : []
@@ -645,7 +684,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         : { ...form, id: value }
     }
     const number = (key: 'min' | 'max' | 'atMin' | 'atMax') => (e: Event) => (this.stateSize = { ...form, axis, [key]: (e.target as HTMLInputElement).valueAsNumber })
-    return html`<h4 state-size>${i18next.t('figure.label.state-size')}</h4>
+    return html`${sized.length ? html`<h4 state-size>${i18next.t('figure.label.state-size')}</h4>` : nothing}
       ${sized.map(({ axis: one, f }) => {
         const k = measureFactor(asset, part, one)
         const input = controls.find(c => c.id === f.input)
@@ -667,7 +706,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         </div>`
       })}
       ${free.length
-        ? html`<div form state-size-form>
+        ? /* Folded until asked for: six lines of a form few parts use pushed the controls below it down (user 2026-11-12). */
+          html`<details state-size-add>
+          <summary>${i18next.t('figure.button.add-state-size')}</summary>
+          <div form state-size-form>
             <span>${i18next.t('figure.label.state-size-measure')}</span>
             <select ?disabled=${this.locked} @change=${(e: Event) => (this.stateSize = { ...form, axis: (e.target as HTMLSelectElement).value as Axis, atMax: NaN })}>
               ${free.map(one => html`<option value=${one} ?selected=${one === axis}>${word(one)}</option>`)}
@@ -696,7 +738,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             if (!command) return
             this.command(command)
             this.stateSize = freshStateSize()
-          }}><md-icon>open_in_full</md-icon>${i18next.t('figure.button.add-state-size')}</button>`
+          }}><md-icon>add</md-icon>${i18next.t('figure.button.add')}</button>
+        </details>`
         : nothing}`
   }
 
@@ -760,7 +803,33 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                 </div>`
           )}
         </div>
-      </div>`
+      </div>
+      ${this.renderPivotPoints(m)}`
+  }
+
+  /*
+    The axis put through the part's top end, middle or bottom end by name: the numbers above are measured from the
+    joint's origin, which a person cannot see (tutorial run 2026-11-12: a shoulder given Y 120 "to reach the shoulder"
+    turned about a point above it). The button that matches what is typed stands pressed.
+  */
+  private pivotCache?: { key: string; points: ReturnType<typeof pivotPointsOf> }
+  private renderPivotPoints(m: MotionForm) {
+    if (!this.revision || m.throughFollows) return nothing
+    const key = `${this.revision.revision}:${this.partId}:${m.axis}`
+    if (this.pivotCache?.key !== key) this.pivotCache = { key, points: pivotPointsOf(this.revision, this.partId, m.axis as Axis) }
+    const points = this.pivotCache.points
+    if (!points) return nothing
+    return html`<div pivot-points>
+      <span>${i18next.t('figure.label.pivot-at')}</span>
+      <ox-input-select-buttons
+        .value=${pivotPointOf(points, m.through, m.axis as Axis) ?? ''}
+        .options=${PIVOT_POINTS.map(p => ({ value: p, display: i18next.t(`figure.label.pivot-${p}`) }))}
+        @change=${(e: CustomEvent) => {
+          const at = points[e.detail as PivotPoint]
+          if (at) this.motion = { ...m, through: { ...at } }
+        }}
+      ></ox-input-select-buttons>
+    </div>`
   }
 
   private renderMotion(asset: FigureAsset) {
@@ -796,14 +865,14 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                 : 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')}
+            ? html`<button act icon remove-axis title=${i18next.t('figure.button.remove-axis')} aria-label=${i18next.t('figure.button.remove-axis')} ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: withoutAxis(joint, k) })}>
+                <md-icon>delete</md-icon>
               </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')}
+            : html`<button act icon title=${i18next.t('figure.button.remove-motion')} aria-label=${i18next.t('figure.button.remove-motion')} ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
+                <md-icon>delete</md-icon>
               </button>`}
-          <button act ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
-            <md-icon>edit</md-icon>${i18next.t('figure.button.change-motion')}
+          <button act icon title=${i18next.t('figure.button.change-motion')} aria-label=${i18next.t('figure.button.change-motion')} ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
+            <md-icon>edit</md-icon>
           </button>
         </div>`
       }
@@ -844,6 +913,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const adding = k > 0 && k >= figureMotionsOf(joint).length
     const follow = leaders.some(j => j.id === m.follow) ? m.follow : ''
     const refusal = motionFormRefusalOf(m, follow)
+    /* Following another joint is offered after the part's own control: a row above it moved every field down a row, and
+       a name typed there chose a joint to follow (review 2026-11-11). */
     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>
@@ -858,31 +929,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
             </select>`}
       </div>
-      ${m.followSum
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-follow')}</span>
-            <span>${m.followSum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')}</span>
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
-          </div>`
-        : leaders.length
-        ? html`<div form>
-            <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.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
-            </select>
-          </div>`
-        : nothing}
-      ${m.followSum
+      ${m.followSum || follow
         ? nothing
-        : follow
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-multiplier')}</span>
-            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
-          </div>`
         : html`<div form>
             ${m.kind === 'slide'
               ? html`<span>${i18next.t('figure.label.motion-travel')}</span>
@@ -910,6 +958,30 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                     <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
                   </div>`}
           </div>`}
+      ${m.followSum
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <span>${m.followSum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')}</span>
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : leaders.length
+        ? html`<div form>
+            <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.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
+            </select>
+          </div>`
+        : nothing}
+      ${!m.followSum && follow
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-multiplier')}</span>
+            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : nothing}
       ${m.kind === 'slide' ? nothing : this.renderThrough(m)}
       <button
         act

package/client/modeller/figure-parts.ts

@@ -444,9 +444,10 @@ export class FigureParts extends localize(i18next)(LitElement) {
       li[selected] div[ops] {
         display: flex;
       }
+      /* As tall as the eye beside the name: a chosen row is no taller than the others. */
       div[ops] button {
         display: flex;
-        padding: 2px;
+        padding: 1px;
         color: inherit;
         background: none;
         border: none;
@@ -465,17 +466,12 @@ export class FigureParts extends localize(i18next)(LitElement) {
         color: inherit;
       }
       /*
-        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
-        2026-09-24). They go to a line of their own under the name.
+        The chosen row keeps the height of the others, however narrow the list: its buttons stay beside the name, which is
+        cut short (its whole name is in the title and the panel's head). Going to a line of their own under 200 px
+        (2026-09-24), they pushed every row under it down as a part was chosen (user 2026-11-12).
       */
-      @container (max-width: 199px) {
-        li[selected] {
-          flex-wrap: wrap;
-        }
-        li[selected] div[ops] {
-          flex-basis: 100%;
-          justify-content: flex-end;
-        }
+      div[ops] {
+        flex: none;
       }
       p[quiet] {
         margin: 0;