@things-factory/figure-ui 10.1.270 → 10.1.272

package/client/graphql/index.ts

@@ -473,6 +473,7 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
             how
             at
             blocking
+            asNewType
           }
         }
       }
@@ -504,6 +505,7 @@ export async function inspectFigureDraft(source: string, id?: string): Promise<F
             how
             at
             blocking
+            asNewType
           }
         }
       }

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

@@ -387,6 +387,20 @@ export function sampleOf(
   }
 }
 
+/**
+ * The state inputs a sample of data sets on this figure, by id: what the preview shows for them instead of a slider. None
+ * when there is no sample, or the figure refuses it.
+ */
+export function sampledStatesOf(asset: FigureAsset, sample: unknown): Record<string, number> {
+  if (sample === null || sample === undefined || !asset.dataInterface) return {}
+  try {
+    const read = sampleOf(asset, sample)
+    return read.issues.length ? {} : Object.fromEntries(Object.entries(read.result.states).map(([id, s]) => [id, s.value]))
+  } catch {
+    return {}
+  }
+}
+
 /** The rows a person gives a value by hand, as a board's saved values: one value, read by a binding, not inside a list. */
 export const valueRowsOf = (asset: FigureAsset): FigureDataRow[] => schemaRowsOf(asset).filter(r => isValue(r.node) && r.bindings.length > 0 && !r.path.includes('[]'))
 

package/client/modeller/editor-styles.ts

@@ -94,6 +94,17 @@ export const EditorStyles = css`
     a promise to whoever draws the figure, is outlined.
   */
   ox-canvas-bar button[save],
+  div[release-blockers] button[as-new-type] {
+    justify-self: start;
+    margin-top: 4px;
+    padding: 4px 10px;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: 999px;
+    color: var(--md-sys-color-primary);
+    background: var(--md-sys-color-surface);
+    font: inherit;
+    cursor: pointer;
+  }
   ox-canvas-bar button[publish] {
     display: inline-flex;
     align-items: center;

package/client/modeller/editor.ts

@@ -50,7 +50,7 @@ import { EditorStyles } from './editor-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
 import { alignChanges, canMirror, mirrorEditOf, mirroredClipsOf, mirrorPlanOf, type AlignTool, type MirrorForm } from './align.js'
 import type { FigurePaletteKind, FigurePartRow } from './figure-parts.js'
-import { paletteRecipe } from './palette.js'
+import { firstPartFastensToPlane, paletteRecipe } from './palette.js'
 import { meshChoicesOf, meshPartOf } from './mesh-import.js'
 import './figure-mesh-choice.js'
 import { uploadFigureMesh } from '../graphql/index.js'
@@ -544,13 +544,8 @@ export class FigureEditor extends LitElement {
     }).result as SaveConflictChoice | undefined
     if (this.session !== session || !session.read().conflict) return
     if (choice === 'latest') window.open(location.href, '_blank', 'noopener')
-    else if (choice === 'copy') {
-      session.detachAsCopy()
-      /* The page forgets the row of the figure left: the copy's identifier is asked, not the other's offered. */
-      this.dispatchEvent(new CustomEvent('figure-detached', { bubbles: true, composed: true }))
-      this.changed()
-      await this.save()
-    } else if (choice === 'overwrite') {
+    else if (choice === 'copy') await this.saveAsNewFigure()
+    else if (choice === 'overwrite') {
       const agreed = await OxPrompt.open({
         type: 'warning',
         text: i18next.t('figure.text.overwrite-latest-warning'),
@@ -562,12 +557,35 @@ export class FigureEditor extends LitElement {
       await this.save()
     }
   }
+  /**
+   * The edits kept apart as a new figure, the one opened left as the server has it: a copy after a save conflict, or a
+   * new figure type for edits a released figure cannot take (the release gate's way out, tutorial 2026-11-11). The first
+   * save asks its identifier.
+   */
+  private async saveAsNewFigure() {
+    this.session!.detachAsCopy()
+    this.blockersOpen = false
+    /* The page forgets the row of the figure left: the copy's identifier is asked, not the other's offered. */
+    this.dispatchEvent(new CustomEvent('figure-detached', { bubbles: true, composed: true }))
+    this.changed()
+    await this.save()
+  }
   private add(kind: FigurePaletteKind) {
     if (!this.session) return
     this.run(() => {
       /* The id is figure-model's to choose: what is in use is its rule, not a list the screen keeps. */
-      const part = paletteRecipe(kind, figurePartIdFor(this.session!.revisionNow()!.asset, kind))
-      this.session!.add(part)
+      const asset = this.session!.revisionNow()!.asset
+      const part = paletteRecipe(kind, figurePartIdFor(asset, kind))
+      /*
+       * The first part of a figure that stands on a plane (floor, ceiling, wall) is its base: it is added fastened to
+       * that plane, one step of the history, so a size typed next keeps it on the plane instead of sinking through it.
+       */
+      if (firstPartFastensToPlane(this.session!.read().geometry ?? [], asset?.placement)) {
+        this.session!.applyRecipe([
+          { kind: 'add-part', part },
+          { kind: 'attach', part: part.id, to: { plane: 'mounting-plane' } }
+        ])
+      } else this.session!.add(part)
       this.selected = part.id
     })
   }
@@ -1615,7 +1633,17 @@ export class FigureEditor extends LitElement {
     return html`<div release-blockers role="dialog" aria-label=${i18next.t('figure.text.must-fix-to-release')} @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && (this.blockersOpen = false)}>
       <ul gate>
         <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
-        ${blockers.map(finding => renderGateFinding(finding, true, nothing, parts))}
+        ${blockers.map(finding =>
+          renderGateFinding(
+            finding,
+            true,
+            /* A break of the released contract: the edits go out as a new figure type, the placed ones keep the old one. */
+            finding.asNewType
+              ? html`<button as-new-type @click=${() => this.saveAsNewFigure()}>${i18next.t('figure.button.save-as-new-type')}</button>`
+              : nothing,
+            parts
+          )
+        )}
       </ul>
     </div>`
   }

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,
@@ -19,6 +20,7 @@ import {
   type Axis
 } from './links.js'
 import type { FigureRevision } from './revision.js'
+import { standsWhereAdded } from './palette.js'
 import { ownerOf } from './fields.js'
 
 /*
@@ -67,11 +69,62 @@ export const freshFasten = (): FastenForm => ({
 /** The part's own fastening as a form, or a fresh one: a window opens on what the part has (walk 1, 2026-09-26). */
 export function fastenFormOf(revision: FigureRevision, part: string): FastenForm {
   const own = fasteningOf(revision, part)
-  if (!own || own.atOrigin) return freshFasten()
+  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. */
+    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
@@ -122,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
@@ -131,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. */
@@ -187,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 }
@@ -246,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/fasten-geometry.ts

@@ -100,7 +100,8 @@ export function alignmentAt(d: number, face: number | undefined, part: number, e
       [-inside, 'min'],
       [inside, 'max']
     ] as const)
-      if (Math.abs(d - at) <= catchMm && inside > 0) return edges ? { how, caught: 'inside' } : { how: 'mm', mm: Math.round(at), caught: 'inside' }
+      /* Level with an edge whatever the sizes: a part bigger than the face (a mast on a low body) lines up with it too. */
+      if (Math.abs(d - at) <= catchMm && inside !== 0) return edges ? { how, caught: 'inside' } : { how: 'mm', mm: Math.round(at), caught: 'inside' }
     for (const at of [-outside, outside]) if (Math.abs(d - at) <= catchMm) return { how: 'mm', mm: Math.round(at), caught: 'outside' }
   }
   return { how: 'mm', mm: Math.round(d) }
@@ -183,3 +184,12 @@ export function fastenLabelsOf(
   if (below - 11 < edge + 2 && below + 3 > edge - 2 && edge + 14 <= height - 4) return { face: facePlace, part: { x: part.x + part.w / 2, y: edge + 14, inside: false } }
   return { face: facePlace, part: { x: part.x + part.w / 2, y: below <= height - 20 ? below : part.y - 5, inside: false } }
 }
+
+/**
+ * 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.
+ */
+export function drawingSpanOf(face: number | undefined, part: number): number {
+  return face !== undefined ? Math.max(face + part, 2 * part - face) : part * 3
+}

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