@things-factory/figure-ui 10.1.271 → 10.1.272

package/client/modeller/canvas.ts

@@ -5,7 +5,7 @@ import { create, Model, niceGridStep } from '@hatiolab/things-scene'
 import type { GizmoReach, GizmoResult } from './gizmo.js'
 import type { FigureRenderPart } from './renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
-import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit, type Board } from './stage-model.js'
+import { boardFor, changedKeys, componentOf, drawnSpanOf, gizmoResultOf, needsRefit, outgrowsFit, type Board, type DrawnSpan } from './stage-model.js'
 import { JOINT_FAN } from './joint-fan.js'
 import { SLOT_MARK, SLOT_MARK_CHOSEN } from './slot-layout-host.js'
 import { PREVIEW, TARGET_FACE } from './command-preview.js'
@@ -112,6 +112,7 @@ export class FigureCanvas extends LitElement {
   private board?: Board & { depth: number }
   /** The figure's reach when the view was last fitted to it. */
   private fittedFor?: Board & { depth: number }
+  private fittedSpan?: DrawnSpan
   private refitTimer?: ReturnType<typeof setTimeout>
   private standingFor?: string
   private watcher?: ResizeObserver
@@ -174,6 +175,7 @@ export class FigureCanvas extends LitElement {
   /** The whole figure in view: the board's fit, then the 3D camera's own. */
   fit() {
     this.fittedFor = boardFor(this.parts)
+    this.fittedSpan = drawnSpanOf(this.parts)
     this.scene?.fit?.('ratio')
     this.scene?.root?.fitCameraToModel?.()
   }
@@ -203,7 +205,7 @@ export class FigureCanvas extends LitElement {
         drawn as it is typed -- 「3」, 「30」, 「300」 on the way to 3000 -- so the reach is judged after the last change.
       */
       clearTimeout(this.refitTimer)
-      if (this.parts.length) this.refitTimer = setTimeout(() => needsRefit(this.fittedFor, boardFor(this.parts)) && this.fit(), REFIT_SETTLE_MS)
+      if (this.parts.length) this.refitTimer = setTimeout(() => (needsRefit(this.fittedFor, boardFor(this.parts)) || outgrowsFit(this.fittedSpan, drawnSpanOf(this.parts))) && this.fit(), REFIT_SETTLE_MS)
       return
     }
     this.teardown()

package/client/modeller/clips.ts

@@ -47,6 +47,12 @@ export function clipsOf(asset: FigureAsset): Clip[] {
     })
     clips.set(d.clip, clip)
   }
+  /*
+    Tracks in the order the controls are listed, not the order their drivers were last written: an edit writes a
+    driver anew at the end, and a track keyed jumped to the bottom of its clip (tutorial run 2026-11-12).
+  */
+  const order = new Map(asset.document.model.inputs.map((i, n) => [i.id, n]))
+  for (const clip of clips.values()) clip.tracks.sort((a, b) => (order.get(a.state) ?? 0) - (order.get(b.state) ?? 0))
   return [...clips.values()]
 }
 
@@ -95,6 +101,25 @@ export const groupEdit = (group: ClipGroup, patch: Partial<Omit<ClipGroup, 'id'>
   group: { id: group.id, label: patch.label ?? group.label, clips: patch.clips ?? group.clips, defaultClip: patch.defaultClip ?? group.defaultClip, transitionSeconds: patch.transitionSeconds ?? group.transitionSeconds }
 })
 
+/**
+ * The controls a playing clip drives in the preview, each with that clip: a clip in no group played at a speed above 0,
+ * or the clip a motion group plays at a speed above 0 (its default until one is chosen).
+ */
+export function playedControlsOf(
+  asset: FigureAsset,
+  driving: Record<string, number>,
+  moving: Record<string, { clip: string; speed: number }>
+): Map<string, string> {
+  const playing = new Set(Object.entries(driving).filter(([, speed]) => speed > 0).map(([clip]) => clip))
+  for (const group of asset.motionGroups ?? []) {
+    const m = moving[group.id]
+    if (m && m.speed > 0) playing.add(m.clip || group.defaultClip)
+  }
+  const played = new Map<string, string>()
+  for (const d of asset.drivers ?? []) if (playing.has(d.clip) && !played.has(d.state)) played.set(d.state, d.clip)
+  return played
+}
+
 /** The pose a clip gives at a moment, as one batch of state changes -- one step of the history. */
 export function poseAt(asset: FigureAsset, clip: string, seconds: number): FigureInputChange[] {
   const units = new Map(asset.document.model.inputs.map(i => [i.id, i.unit]))
@@ -133,6 +158,25 @@ export function withoutKey(keys: readonly ClipKey[], index: number): ClipKey[] |
 }
 
 /** A name no clip has, for a copy: `walk-copy`, then `walk-copy-2`, … */
+/**
+ * A clip copied as one step (review 2026-11-11: a walk copied into a run had to be put in a motion group first, by a
+ * section further down, the button grey until then). A copy plays the same controls, so the two are one group: a clip in
+ * none is put in a new one, named after it, before it is copied.
+ */
+export function copyClipEdits(asset: FigureAsset, clip: string, named = 'motion'): unknown[] {
+  const copy = { kind: 'copy-clip' as const, clip, name: freeClipNameOf(asset, clip) }
+  if ((asset.motionGroups ?? []).some(g => g.clips.includes(clip))) return [copy]
+  /*
+    The group is named for what it is, not after the first clip: the preview reads "<group> clip · walk | run", and a
+    group named "walk" read as if run were a kind of walk (tutorial run 2026-11-12).
+  */
+  const labels = new Set((asset.motionGroups ?? []).map(g => g.label))
+  let label = named
+  for (let n = 2; labels.has(label); n++) label = `${named} ${n}`
+  const group = { id: freeGroupIdOf(asset), label, clips: [clip], defaultClip: clip, transitionSeconds: 0.2 }
+  return [{ kind: 'set-motion-group' as const, group }, copy]
+}
+
 export function freeClipNameOf(asset: FigureAsset, clip: string): string {
   const taken = new Set((asset.drivers ?? []).map(d => d.clip))
   const base = `${clip}-copy`
@@ -215,8 +259,15 @@ export type TrackJoin = { kind: 'free' } | { kind: 'group'; group: string; label
  * door that has 「닫기」, and the two become one group, one playing at a time, without having to design the group first.
  * All of it one step of the history.
  */
-export function newClipEdits(asset: FigureAsset, state: string, clip: string, duration: number, keys: ClipKey[]): { edits: unknown[]; join: TrackJoin } {
-  const track = { kind: 'set-driver' as const, state, clip, duration, keys }
+export function newClipEdits(
+  asset: FigureAsset,
+  state: string,
+  clip: string,
+  duration: number,
+  keys: ClipKey[],
+  interpolation?: ClipTrack['interpolation']
+): { edits: unknown[]; join: TrackJoin } {
+  const track = { kind: 'set-driver' as const, state, clip, duration, keys, ...(interpolation ? { interpolation } : {}) }
   const writers = [...new Set((asset.drivers ?? []).filter(d => d.state === state).map(d => d.clip))]
   if (!writers.length) return { edits: [track], join: { kind: 'free' } }
   const group = (asset.motionGroups ?? []).find(g => writers.some(c => g.clips.includes(c)))
@@ -245,7 +296,25 @@ export function rememberedPoseEdits(asset: FigureAsset, clip: string, seconds: n
   const edits: unknown[] = []
   for (const track of found.tracks) {
     const now = values[track.state]
-    if (now === undefined || same(now, there.get(track.state) ?? now)) continue
+    if (now === undefined) continue
+    /*
+     * A wrapping track's end reads as its start (review 2026-11-11: a walk kept at its end changed nothing, and a pose
+     * kept at 0 left the end key behind -- the loop jumped at its seam). So at either end the key there is compared and
+     * written itself, and a loop that closed -- start and end alike -- stays closed. A loop left open on purpose (a ramp
+     * that starts over) keeps its other end. A track that adds up turns on past its end and is read as before.
+     */
+    if (shiftable(track) && (at === 0 || at === found.duration)) {
+      const keyAt = (s: number) => track.keys.find(k => k.seconds === s)?.value
+      const start = keyAt(0)
+      const end = keyAt(found.duration)
+      const mine = at === 0 ? start : end
+      if (same(now, mine ?? (there.get(track.state) ?? now))) continue
+      const closed = start !== undefined && end !== undefined && same(start, end)
+      const keys = withKey(track.keys, { seconds: at, value: now })
+      edits.push(trackEdit(found, track, { keys: closed ? withKey(keys, { seconds: at === 0 ? found.duration : 0, value: now }) : keys }))
+      continue
+    }
+    if (same(now, there.get(track.state) ?? now)) continue
     edits.push(trackEdit(found, track, { keys: withKey(track.keys, { seconds: at, value: now }) }))
   }
   const free = new Set(undrivenOf(asset, clip))
@@ -261,7 +330,8 @@ export function rememberedPoseEdits(asset: FigureAsset, clip: string, seconds: n
       continue
     }
     const keys = at === 0 ? [{ seconds: 0, value: now }, { seconds: found.duration, value: now }] : [{ seconds: 0, value: was }, { seconds: at, value: now }]
-    edits.push({ kind: 'set-driver' as const, state: input.id, clip, keys })
+    /* A track a kept pose starts goes from pose to pose: eased in and out of each, as a shown move is (motion contract). */
+    edits.push({ kind: 'set-driver' as const, state: input.id, clip, keys, interpolation: 'smooth' as const })
   }
   return { edits, skipped }
 }

package/client/modeller/fasten-form.ts

@@ -5,6 +5,7 @@ import { faceViewOf, facesAsDrawnOf, type FaceView, type FastenMode, type Fasten
 import type { FastenChange } from './figure-fasten-drawing.js'
 import {
   alignOf,
+  alignAxesOf,
   alignRowsOf,
   canFasten,
   facesOf,
@@ -70,13 +71,60 @@ export function fastenFormOf(revision: FigureRevision, part: string): FastenForm
   const own = fasteningOf(revision, part)
   if (!own || own.atOrigin) {
     /* A part still where it was added was put nowhere by the author: fastened, it goes on the face, no gap to keep. */
-    const pose = (revision.geometry.find(g => (g as { id: string }).id === part) as { pose?: { r: number[][]; t: number[] } } | undefined)?.pose
-    return !own && standsWhereAdded(pose) ? { ...freshFasten(), gapFrom: 'pressed' } : freshFasten()
+    return addedUnplaced(revision, part) ? { ...freshFasten(), gapFrom: 'pressed' } : freshFasten()
   }
   /* A gap the record works out is the author's; a number is where the part stands, so aiming again keeps it there. */
   return { ...freshFasten(), ...own, gapFrom: own.gapKept !== undefined ? 'typed' : 'kept' } as FastenForm
 }
 
+/** A part fastened to nothing that still stands where the palette put it: the author has put it nowhere to keep. */
+function addedUnplaced(revision: FigureRevision, part: string): boolean {
+  if (fasteningOf(revision, part)) return false
+  const pose = (revision.geometry.find(g => (g as { id: string }).id === part) as { pose?: { r: number[][]; t: number[] } } | undefined)?.pose
+  return standsWhereAdded(pose)
+}
+
+/**
+ * The face a part just added starts on when aimed at `target`: the one asked, unless another part is fastened there
+ * already -- then the first face of the target nothing is fastened to (review 2026-11-11: a thigh aimed at a pelvis
+ * started on its top, where the body stands, and went inside the body until the bottom was chosen). A part the author
+ * has placed keeps the face it stands by: a face holds many parts (rollers and a lid on one frame).
+ */
+function freeFaceOf(revision: FigureRevision, part: string, target: string, asked: FigureFace): FigureFace {
+  const on = (end: unknown) => end as { part?: string; face?: string }
+  const joints = revision.asset.joints ?? []
+  const taken = new Set(joints.filter(j => on(j.body0).part === target && on(j.body1).part !== part).map(j => on(j.body0).face))
+  /* The face the target itself stands on its own parent by: a thigh hung under a pelvis touches it with its top. */
+  let hungBy: FigureFace | undefined
+  for (const j of joints)
+    if (on(j.body1).part === target && on(j.body0).face && (j as { facing?: string }).facing !== 'flush') {
+      hungBy = OPPOSITE[on(j.body0).face as FigureFace]
+      taken.add(hungBy)
+    }
+  /*
+    A tall part hung by its side -- an upper arm on a torso -- goes on downward: what is fastened to it starts under its
+    bottom end, not on its top beside the shoulder (tutorial run 2026-11-12: a forearm started on the upper arm's top
+    and its bottom had to be picked by hand).
+  */
+  if (hungBy && FIGURE_FACES[hungBy] !== 'y' && !taken.has('bottom') && tallOf(revision, target)) return 'bottom'
+  if (!taken.has(asked)) return asked
+  /* The face across from the one taken first: a body on the top, legs under the bottom. */
+  const across = OPPOSITE[asked]
+  const faces = facesOf(revision.asset, target)
+  if (faces.includes(across) && !taken.has(across)) return across
+  return (faces.find(face => !taken.has(face)) as FigureFace | undefined) ?? asked
+}
+
+/** Whether a part as drawn is at least half again as tall as it is wide and deep, read off its own faces. */
+function tallOf(revision: FigureRevision, part: string): boolean {
+  const faces = (revision.geometry.find(g => (g as { id: string }).id === part) as { shape?: { faces?: Record<string, { at: number }> } } | undefined)?.shape?.faces
+  const span = (lo: string, hi: string) => (faces?.[hi] && faces?.[lo] ? Math.abs(faces[hi]!.at - faces[lo]!.at) : undefined)
+  const [x, y, z] = [span('left', 'right'), span('bottom', 'top'), span('back', 'front')]
+  return x !== undefined && y !== undefined && z !== undefined && y >= 1.5 * Math.max(x, z)
+}
+
+const OPPOSITE: Record<FigureFace, FigureFace> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left', front: 'back', back: 'front' }
+
 /** What a part may be fastened to: every other part that can be, each said whether it would close a loop. */
 export function fastenTargetsOf(revision: FigureRevision, part: string): Array<{ part: string; loops: boolean }> {
   const asset = revision.asset
@@ -127,7 +175,12 @@ export function aimFasten(
     'plane' in to
       ? { ...form, toPlane: true, target: '', facing: form.toPlane ? form.facing : (figurePlaneFacingOf(revision.asset) ?? form.facing) }
       : 'part' in to
-        ? { ...form, toPlane: false, target: to.part }
+        ? {
+            ...form,
+            toPlane: false,
+            target: to.part,
+            targetFace: to.part !== form.target && addedUnplaced(revision, part) ? freeFaceOf(revision, part, to.part, form.targetFace) : form.targetFace
+          }
         : { ...form, targetFace: to.targetFace }
   const theirFaces = f.target ? facesOf(revision.asset, f.target) : FACES
   const targetFace = (theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0]) as FigureFace
@@ -136,7 +189,13 @@ export function aimFasten(
     : f.target
       ? { part: f.target, face: targetFace }
       : undefined
-  return { ...f, ...(aim ? placeKeptOf(revision, part, aim) : { align: {}, alignMm: {}, alignInput: {} }) }
+  /*
+   * A part still where the palette put it has no place of the author's to keep: it goes to the face's centre (review
+   * 2026-11-11: a shin added at the origin and aimed at a thigh 85 mm off it was put 85 mm off the thigh's centre; an
+   * arm aimed at the body's side stood off the face, out of reach of the drawing).
+   */
+  const centred = { align: {}, alignMm: {}, alignInput: {} }
+  return { ...f, ...(aim && !addedUnplaced(revision, part) ? placeKeptOf(revision, part, aim) : centred) }
 }
 
 /** A change the drawing asks: a face, a way, a gap or a place across the face. */
@@ -192,6 +251,11 @@ export interface FastenPlan {
   view?: FaceView
   /** The axes across the face asked in rows: where the drawing cannot set the place. */
   alignRows: { axis: Axis; edges: boolean }[]
+  /**
+   * Every axis across the face, the drawing's too: the details ask each by a number as well (review 2026-11-11: a thigh
+   * dragged to a pelvis's edge overshot by 47 mm, and dragged back by eye).
+   */
+  alignAxes?: { axis: Axis; edges: boolean }[]
   action?: FigureAuthoringAction
   /** The face the command would meet, lit on the canvas while it is tried. */
   face?: { part: string; face: string }
@@ -251,6 +315,7 @@ function fastenPlanWithout(revision: FigureRevision, part: string, f: FastenForm
     mode,
     view,
     alignRows: alignRowsOf(asset, aim, view, f.alignInput),
+    alignAxes: alignAxesOf(asset, aim),
     action,
     ...(f.toPlane ? {} : { face: { part: f.target, face: targetFace } })
   }

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

@@ -1,16 +1,14 @@
 import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { ref } from 'lit/directives/ref.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { figureCavitySectionOf } from '@hatiolab/figure-model'
 import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape, FigureSection } from '@hatiolab/figure-model'
+import { focusOnRender } from './focus-on-render.js'
 import { cavityRefusalWordsOf, cavityWorkingOf, END_FACE, endToggled, mm, SIDE_FACE, wallDragged } from './section-controls.js'
 
 type Axis = 'x' | 'y' | 'z'
 
-/** A field opened by a press takes the keys at once. */
-const focusOnRender = () => ref(el => el && requestAnimationFrame(() => (el as HTMLInputElement).select()))
 type End = 'start' | 'end'
 type Body = { id: string; shape: FigureEvaluatedShape }
 

package/client/modeller/figure-clips.ts

@@ -8,7 +8,7 @@ import { i18next, localize } from '@operato/i18n'
 import { unitWord } from './unit-words.js'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
-import { clipGroupsOf, withKeyChanged, clipsOf, copiedTrackEdit, copyTargetsOf, freeClipNameOf, freeGroupIdOf, groupEdit, newClipEdits, newTrackKeys, poseAt, rememberedPoseEdits, shiftable, shiftOffKeyOf, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipKey, type ClipTrack } from './clips.js'
+import { clipGroupsOf, withKeyChanged, clipsOf, copiedTrackEdit, copyClipEdits, copyTargetsOf, freeClipNameOf, freeGroupIdOf, groupEdit, newClipEdits, newTrackKeys, poseAt, rememberedPoseEdits, shiftable, shiftOffKeyOf, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipKey, type ClipTrack } from './clips.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { HelpToggles } from './help.js'
 
@@ -37,6 +37,51 @@ export class FigureClips extends localize(i18next)(LitElement) {
     :host {
       display: block;
     }
+    /*
+      The pose bar: the clip being keyed, its moment and 「현재 자세 기록」, first under the controls and held at the top
+      while the clips scroll. With walk and run, run's own button stood under all of walk's tracks, a long scroll from
+      the controls typed for it (tutorial run 2026-11-12).
+    */
+    div[pose-bar] {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px 10px;
+      margin-bottom: 8px;
+      padding: 8px;
+      background: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
+      border: 1px solid var(--md-sys-color-primary);
+      border-radius: 8px;
+    }
+    div[pose-bar] span[clip-choices] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    div[pose-bar] span[clip-choices] button {
+      font: inherit;
+      color: inherit;
+      padding: 1px 10px;
+      background: transparent;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 10px;
+      cursor: pointer;
+    }
+    div[pose-bar] span[clip-choices] button[aria-pressed='true'] {
+      background: var(--md-sys-color-secondary-container);
+      border-color: var(--md-sys-color-secondary);
+      font-weight: 600;
+    }
+    div[pose-bar] label[at] input {
+      width: 64px;
+    }
+    div[pose-bar] p[hint] {
+      flex-basis: 100%;
+      margin: 0;
+    }
     section[clip] {
       display: grid;
       gap: 8px;
@@ -158,6 +203,8 @@ export class FigureClips extends localize(i18next)(LitElement) {
 
   /** Where each clip is scrubbed to, in seconds. */
   @state() private at: Record<string, number> = {}
+  /** The clip the pose bar keys: the one last scrubbed. */
+  @state() private active = ''
   @state() private adding = { state: '', clip: '', name: '', duration: 2 }
   @state() private grouping = { clip: '', label: '' }
   /** The track whose copy is being set up: onto which control, how many seconds later. */
@@ -180,6 +227,7 @@ export class FigureClips extends localize(i18next)(LitElement) {
     /* Nothing to play yet: said inside the section it belongs to, with the section's own margins. */
     const empty = !clips.length && !undrivenOf(asset).length && !asset.motionGroups?.length
     return html`
+      ${clips.length ? this.renderPoseBar(clips) : nothing}
       <section>
         <h3>${i18next.t('figure.label.clips')}${this.help.button('figure.text.clips-explained')}</h3>
         ${this.help.hint('figure.text.clips-explained')}
@@ -198,12 +246,16 @@ export class FigureClips extends localize(i18next)(LitElement) {
     return html`<section clip>
       <div form>
         <span>${i18next.t('figure.label.clip-name')}</span>
-        <input .value=${clip.name} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, name: (e.target as HTMLInputElement).value })} />
+        <input .value=${clip.name} ?disabled=${this.locked} @change=${(e: Event) => this.rename(clip, (e.target as HTMLInputElement).value)} />
         <span>${i18next.t('figure.label.clip-duration')}</span>
         <input type="number" min="0.1" step="any" .value=${String(clip.duration)} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, duration: number(e) })} />
       </div>
-      <button act copy-clip ?disabled=${this.locked || !grouped} title=${i18next.t(grouped ? 'figure.text.copy-clip-explained' : 'figure.text.copy-clip-needs-group')}
-        @click=${() => this.edit({ kind: 'copy-clip', clip: clip.name, name: freeClipNameOf(this.asset!, clip.name) })}>
+      <button act copy-clip ?disabled=${this.locked} title=${i18next.t(grouped ? 'figure.text.copy-clip-explained' : 'figure.text.copy-clip-makes-group')}
+        @click=${() => {
+          /* The copy is what is keyed next: the pose bar turns to it. */
+          this.active = freeClipNameOf(this.asset!, clip.name)
+          this.edits(copyClipEdits(this.asset!, clip.name, i18next.t('figure.label.motion-group-named')))
+        }}>
         <md-icon>content_copy</md-icon>${i18next.t('figure.button.copy-clip')}
       </button>
       <div row>
@@ -236,6 +288,35 @@ export class FigureClips extends localize(i18next)(LitElement) {
     </section>`
   }
 
+  /**
+   * The clip being keyed -- the one last scrubbed or chosen here -- with its moment and 「현재 자세 기록」, right under the
+   * controls: type the controls, then record, without scrolling to the clip.
+   */
+  private renderPoseBar(clips: Clip[]) {
+    const clip = clips.find(c => c.name === this.active) ?? clips[0]!
+    const at = Math.min(this.at[clip.name] ?? 0, clip.duration)
+    return html`<div pose-bar>
+      ${clips.length > 1
+        ? html`<span clip-choices role="group" aria-label=${i18next.t('figure.label.clips')}>
+            ${clips.map(c => html`<button type="button" aria-pressed=${String(c === clip)} ?disabled=${this.locked} @click=${() => this.scrub(c, Math.min(this.at[c.name] ?? 0, c.duration))}>${c.name}</button>`)}
+          </span>`
+        : html`<strong>${clip.name}</strong>`}
+      <label at>
+        <input
+          type="number"
+          min="0"
+          max=${clip.duration}
+          step="any"
+          .value=${String(Math.round(at * 1000) / 1000)}
+          ?disabled=${this.locked}
+          aria-label=${i18next.t('figure.label.clip-time')}
+          @change=${(e: Event) => this.scrub(clip, Math.min(Math.max((e.target as HTMLInputElement).valueAsNumber, 0), clip.duration))}
+        />s
+      </label>
+      ${this.renderRemember(clip, at)}
+    </div>`
+  }
+
   /** 「이 자세 기억하기」: every control moved since the clip's pose was last shown or kept, as keys at this moment, one step. */
   private renderRemember(clip: Clip, at: number) {
     const { edits, skipped } = rememberedPoseEdits(this.asset!, clip.name, at, this.values, this.base[clip.name] ?? this.values)
@@ -380,9 +461,11 @@ export class FigureClips extends localize(i18next)(LitElement) {
     const taken = !joining && clips.some(c => c.name === name)
     const ready = !!name && !taken && duration > 0 && !!input
     const join = !joining && input && name ? newClipEdits(asset, stateId!, name, duration, []).join : undefined
-    const add = (keys: ClipKey[]) => {
-      if (joining) this.edit({ kind: 'set-driver', state: stateId, clip: name, keys })
-      else this.edits(newClipEdits(asset, stateId!, name, duration, keys).edits)
+    /* A track that holds the pose now is the start of a move from pose to pose: smooth (review 2026-11-11, a walk's nine
+       tracks each changed by hand). The range preset sweeps at a steady rate, as before. */
+    const add = (keys: ClipKey[], interpolation?: 'smooth') => {
+      if (joining) this.edit({ kind: 'set-driver', state: stateId, clip: name, keys, ...(interpolation ? { interpolation } : {}) })
+      else this.edits(newClipEdits(asset, stateId!, name, duration, keys, interpolation).edits)
       /* The name was this clip's; the next new clip is named again. */
       this.adding = { ...a, name: '', state: '' }
     }
@@ -409,7 +492,7 @@ export class FigureClips extends localize(i18next)(LitElement) {
         : join?.kind === 'group'
           ? html`<p hint track-join>${i18next.t('figure.text.track-joins-group', { name, group: join.label })}</p>`
           : nothing}
-      <button act ?disabled=${this.locked || !ready} @click=${() => add(newTrackKeys(input!, this.values[stateId!], duration))}>
+      <button act ?disabled=${this.locked || !ready} @click=${() => add(newTrackKeys(input!, this.values[stateId!], duration), 'smooth')}>
         <md-icon>add</md-icon>${i18next.t('figure.button.add-track')}
       </button>
       <button act range-track ?disabled=${this.locked || !ready} title=${i18next.t('figure.text.add-track-range-explained')}
@@ -515,12 +598,22 @@ export class FigureClips extends localize(i18next)(LitElement) {
     </section>`
   }
 
+  /** A clip renamed: the pose bar, its moment and its pose stay with it under the new name. */
+  private rename(clip: Clip, name: string) {
+    const moved = <T,>(by: Record<string, T>) => (clip.name in by ? { ...by, [name]: by[clip.name]! } : by)
+    this.at = moved(this.at)
+    this.base = moved(this.base)
+    if (this.active === clip.name) this.active = name
+    this.edit({ kind: 'set-clip', clip: clip.name, name })
+  }
+
   /** Show the clip's pose at a moment: one batch of input changes, not saved as the default. */
   /** Show the clip's pose at a moment. While the bar is dragged the pose is live (drawn, not recorded); the release
    * applies it as one batch of input changes. */
   private scrub(clip: Clip, seconds: number, live = false) {
     if (!this.asset || !Number.isFinite(seconds)) return
     this.at = { ...this.at, [clip.name]: seconds }
+    this.active = clip.name
     const changes = poseAt(this.asset, clip.name, seconds)
     if (!changes.length) return
     if (live) {

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'
 
@@ -432,7 +433,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