@things-factory/figure-ui 10.1.271 → 10.1.273

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/data-interface.ts

@@ -94,13 +94,14 @@ import { methodOf, type DataMethod } from '@things-factory/figure-viewer/dist-cl
 export { methodOf, type DataMethod }
 
 /**
- * The methods a field allows (ADR-0166 2): a number as it is, scaled or by a range table; a text or true/false by a code
- * table, or as it is where a behavior takes it so; a list as it is (its items). A new field is made by a table.
+ * The methods a field allows (ADR-0166 2, amendment 1): a number as it is, scaled, by a code table (status codes sent as
+ * numbers, 4002) or by a range table; a text or true/false by a code table, or as it is where a behavior takes it so; a
+ * list as it is (its items). A new field is made by a table.
  */
 export function methodsOf(node: FigureDataNode | null, choices: BehaviorChoice[]): DataMethod[] {
   if (!node) return ['code', 'ranges']
   const fitting = choices.some(c => fitsField(node, c))
-  if (node.kind === 'number') return [...(fitting ? (['value', 'scale'] as const) : []), 'ranges']
+  if (node.kind === 'number') return [...(fitting ? (['value', 'scale'] as const) : []), 'code', 'ranges']
   if (node.kind === 'text' || node.kind === 'boolean') return [...(fitting ? (['value'] as const) : []), 'code']
   return fitting ? ['value'] : []
 }
@@ -170,6 +171,12 @@ export function bindingDraftOf(asset: FigureAsset, accessor: string, node: Figur
 /* ---------------------------------------------------------------- tables (ADR-0166 3) */
 
 /** The first code a new code table names, and the next ones: `CODE`, `CODE2`, … */
+/** A new code for a number field's code table: one past the largest taken, or 0 (ADR-0166 amendment 1). */
+export function freeNumberCodeOf(taken: string[]): string {
+  const numbers = taken.map(Number).filter(n => Number.isInteger(n) && n >= 0)
+  return String(numbers.length ? Math.max(...numbers) + 1 : 0)
+}
+
 export function freeCodeOf(taken: string[]): string {
   if (!taken.includes('CODE')) return 'CODE'
   let n = 2
@@ -186,28 +193,26 @@ export const legendRoleOf = (id: string): string =>
 
 /**
  * A first table on a field (ADR-0166 10): a row per value of a closed field, an open field's rows typed later, one
- * interval over the whole of a number. A new field is made by the table (P2): a code table's a text whose values are the
- * table's keys, starting with one code; a range table's a number. Returns the binding and, for a new field, the schema
- * with it.
+ * interval over the whole of a number. The field is one the schema has: the data tab adds a binding in the field's row.
  */
 export function tableDraftOf(
   asset: FigureAsset,
-  field: { path: string; node: FigureDataNode } | { name: string },
+  field: { path: string; node: FigureDataNode },
   method: 'code' | 'ranges',
   targets: FigureDataTargets
-): { binding: FigureDataTableBinding; schema?: FigureDataField[] } {
+): { binding: FigureDataTableBinding } {
   const taken = (asset.dataInterface?.bindings ?? []).map(b => b.id)
-  const made = 'name' in field
-  const name = made ? field.name : (field.path.replace(/\[\]/g, '').split('.').pop() ?? field.path)
+  const name = field.path.replace(/\[\]/g, '').split('.').pop() ?? field.path
   const id = freeIdOf(taken, name.toLowerCase())
-  const node: FigureDataNode = made ? (method === 'code' ? { kind: 'text', values: ['CODE'] } : { kind: 'number' }) : field.node
-  const accessor = made ? field.name : accessorOfRow(field.path)
+  const node = field.node
+  const accessor = accessorOfRow(field.path)
   const table: Record<string, FigureDataTableEntry> =
-    method === 'code' ? Object.fromEntries(domainOf(node).map(v => [String(v), {}])) : { [`${node.kind === 'number' ? (node.min ?? '') : ''}~`]: {} }
-  const binding: FigureDataTableBinding = { id, accessor, rule: 'table', lookup: method, targets: tidyTargets(targets), table }
-  if (!made) return { binding }
-  const schema = [...(asset.dataInterface?.schema ?? []), { name: field.name, ...node } as FigureDataField]
-  return { binding, schema }
+    method === 'code'
+      ? node.kind === 'number'
+        ? { [freeNumberCodeOf([])]: {} }
+        : Object.fromEntries(domainOf(node).map(v => [String(v), {}]))
+      : { [`${node.kind === 'number' ? (node.min ?? '') : ''}~`]: {} }
+  return { binding: { id, accessor, rule: 'table', lookup: method, targets: tidyTargets(targets), table } }
 }
 
 /** Targets with empty lists left out, as the kernel keeps them. */
@@ -217,8 +222,9 @@ const tidyTargets = (t: FigureDataTargets): FigureDataTargets => ({
   ...(t.group ? { group: t.group } : {})
 })
 
-/** A look with only the columns its targets take: a target taken away takes its columns with it. */
+/** A look with only the columns its targets take: a target taken away takes its columns with it. A look that keeps stays so. */
 function lookFor(look: FigureDataTableEntry, t: FigureDataTargets): FigureDataTableEntry {
+  if (look.keep) return { keep: true }
   const out: FigureDataTableEntry = {}
   if (t.parts?.length) {
     if (look.color !== undefined) out.color = look.color
@@ -245,6 +251,12 @@ export function tableWithTargets(b: FigureDataTableBinding, targets: FigureDataT
 /** The table with one look set: the whole look given, a column left out cleared. */
 export const tableWithLook = (b: FigureDataTableBinding, key: string, look: FigureDataTableEntry): FigureDataTableBinding => ({ ...b, table: { ...b.table, [key]: lookFor(look, b.targets) } })
 
+/**
+ * The table whose other values keep what it last showed, or go to the default look (an empty one): the 「그대로 둠」 of
+ * the 「그 밖의 값」 row (ADR-0166 amendment 1).
+ */
+export const tableWithKeep = (b: FigureDataTableBinding, keep: boolean): FigureDataTableBinding => ({ ...b, table: { ...b.table, default: keep ? { keep: true } : {} } })
+
 /** The table's rows renamed, added or taken away, in order; `default` kept last. */
 export function tableWithKeys(b: FigureDataTableBinding, rows: Array<[string, FigureDataTableEntry]>): FigureDataTableBinding {
   const d = b.table.default

package/client/modeller/editor-styles.ts

@@ -411,14 +411,25 @@ export const EditorStyles = css`
     z-index: 2;
     display: grid;
     gap: 4px;
-    padding: 10px 12px;
-    background: var(--md-sys-color-surface-container-lowest);
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding: 6px 12px;
+    /* Solid where a theme gives no colour: a sticky line with none let the rows scrolled under it show through. */
+    background: var(--md-sys-color-surface-container-lowest, #fff);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
   }
-  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */
+  /*
+    The part's name and its kind on one line: two lines on every tab, over a name field saying it again on the
+    properties tab, took the panel's top (user 2026-11-12).
+  */
   div[subject-summary] {
-    display: grid;
-    gap: 2px;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+  }
+  div[subject-summary] > * {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
   div[subject-summary] b {
     font-size: var(--ui-t-body, 13px);

package/client/modeller/editor.ts

@@ -2215,6 +2215,8 @@ export class FigureEditor extends LitElement {
               .asset=${asset}
               .selected=${this.selected}
               ?locked=${unavailable}
+              ?previewing=${this.middle === 'preview'}
+              @show-preview=${() => (this.middle = 'preview')}
               @data-sample=${(e: CustomEvent) => (this.dataSample = e.detail.data)}
               @legend-sample=${(e: CustomEvent) => (this.legendSample = e.detail.legends)}
               @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}

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,
@@ -50,6 +51,11 @@ export interface FastenForm {
   alignInput: Partial<Record<Axis, string>>
   /** On a point of the target's curved surface instead of a face (ADR-0140 3.9): where, as the record says it. */
   surface?: FigureSurfacePlace
+  /**
+   * Opened on the part's own fastening: aimed again, it goes there with that fastening's gap and place across the face
+   * (tutorial 2026-11-12). 「현재 상태로 붙이기」 -- where it stands kept -- is a loose part's.
+   */
+  fastened?: boolean
 }
 
 export const freshFasten = (): FastenForm => ({
@@ -70,13 +76,64 @@ 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
+  /*
+    Its fastening is the author's, gap and place: aimed at another face or part through 「바꾸기」 it goes there with them
+    (tutorial 2026-11-12: a pillar copied from the front one and turned to the body's back face stayed in front, its gap
+    worked out as the whole body's depth).
+  */
+  return { ...freshFasten(), ...own, gapFrom: 'typed', fastened: true } 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 +184,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 +198,14 @@ 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: {} }
+  if (f.fastened) return f
+  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 +261,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 +325,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/fasten-geometry.ts

@@ -188,8 +188,10 @@ export function fastenLabelsOf(
 /**
  * How much of an axis the face drawing shows, mm: room around the face for the part to go past its edges by about half
  * itself, and for a part bigger than the face lined up with one of its edges (a mast flush with a low body's bottom) to
- * show whole; a plane with no size, three parts wide.
+ * show whole; a plane with no size, three parts wide. A part standing `at` mm off the centre is reached too, its far
+ * edge inside (roll cradle tutorial 2026-11-12: a box left far up had its size label cut off the drawing).
  */
-export function drawingSpanOf(face: number | undefined, part: number): number {
-  return face !== undefined ? Math.max(face + part, 2 * part - face) : part * 3
+export function drawingSpanOf(face: number | undefined, part: number, at = 0): number {
+  const room = face !== undefined ? Math.max(face + part, 2 * part - face) : part * 3
+  return Math.max(room, 2 * Math.abs(at) + part)
 }

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) {