@things-factory/figure-ui 10.1.265 → 10.1.266

package/client/modeller/align.ts

@@ -1,4 +1,4 @@
-import { figureHangingChainOf, figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model'
+import { figureHangingChainOf, figureMotionsOf, figureOccupiedBoxesOf, figureWritersOf, motionStateIdOf } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureInputChange, FigurePartEdit, FigureWorldBox } from '@hatiolab/figure-model'
 
 import { derivedOf, type FigureRevision } from './revision.js'
@@ -114,6 +114,18 @@ export function mirrorPlanOf(asset: FigureAsset, part: string, axis: 'x' | 'z'):
   }
 }
 
+/**
+ * The clips whose tracks come with a mirrored copy (figure-model's mirror-part, review 2026-11-09): those that play a
+ * control of the part, or of what hangs from it when the chain is taken. Said in the form before the copy is made.
+ */
+export function mirroredClipsOf(asset: FigureAsset, part: string, chain: boolean): string[] {
+  const parts = chain ? figureHangingChainOf(asset, part) : [part]
+  const controls = new Set(
+    (asset.joints ?? []).filter(j => parts.includes(j.body1.part)).flatMap(j => figureMotionsOf(j).filter(m => !m.mimic).map(m => motionStateIdOf(m)))
+  )
+  return [...new Set((asset.drivers ?? []).filter(d => controls.has(d.state)).map(d => d.clip))]
+}
+
 /** The one edit the form comes to. */
 export function mirrorEditOf(part: string, form: MirrorForm): FigurePartEdit {
   return {

package/client/modeller/clips.ts

@@ -16,7 +16,7 @@ export interface ClipTrack {
   min: number
   max: number
   keys: ClipKey[]
-  interpolation: 'linear' | 'step'
+  interpolation: 'linear' | 'step' | 'smooth'
   loop: 'wrap' | 'hold'
   accumulates: boolean
 }
@@ -147,6 +147,18 @@ export const copyTargetsOf = (asset: FigureAsset, clip: string): string[] => [
   ...new Set([...(asset.drivers ?? []).filter(d => d.clip === clip).map(d => d.state), ...undrivenOf(asset, clip)])
 ]
 
+/**
+ * Where a smooth track may be moved round its loop to, in seconds later, when `seconds` is not one of them: figure-model
+ * moves a smooth track only so that its new start is one of its keys (`driver-shift-off-key`). Null when it may go there.
+ */
+export function shiftOffKeyOf(track: ClipTrack, duration: number, seconds: number): number[] | null {
+  if (track.interpolation !== 'smooth' || !seconds) return null
+  const D = duration
+  const phase = ((seconds % D) + D) % D
+  const fits = [...new Set(track.keys.map(k => round((D - k.seconds) % D)))].sort((a, b) => a - b)
+  return fits.some(s => Math.abs(s - phase) < 1e-6) ? null : fits
+}
+
 /** Whether a track can be moved round its loop: one that wraps and does not add up (figure-model's rule). */
 export const shiftable = (track: ClipTrack) => track.loop === 'wrap' && !track.accumulates
 
@@ -176,3 +188,80 @@ export const trackEdit = (clip: Clip, track: ClipTrack, patch: Partial<Pick<Clip
   loop: patch.loop ?? track.loop,
   interpolation: patch.interpolation ?? track.interpolation
 })
+
+/** Whether two control values are one: the figure's numbers carry float noise past a millionth. */
+const same = (a: number, b: number) => Math.abs(a - b) < 1e-6
+
+/**
+ * A new track's keys. By default it holds the pose the figure stands in now, from start to end: a track added to a pose
+ * made with care does not throw it to the control's ends (review 2026-11-09). `range` is the preset that swings the
+ * control over its whole range and back, so the loop closes where it began.
+ */
+export function newTrackKeys(input: { min?: number; max?: number }, current: number | undefined, duration: number, how: 'hold' | 'range' = 'hold'): ClipKey[] {
+  const min = input.min ?? 0
+  const max = input.max ?? min
+  if (how === 'range') return [{ seconds: 0, value: min }, { seconds: round(duration / 2), value: max }, { seconds: duration, value: min }]
+  const value = current ?? min
+  return [{ seconds: 0, value }, { seconds: duration, value }]
+}
+
+/** What a new clip on a control joins, so that it may play it: nothing, a group already there, or a group made with the clip that plays it now. */
+export type TrackJoin = { kind: 'free' } | { kind: 'group'; group: string; label: string } | { kind: 'new-group'; group: string; label: string; clip: string }
+
+/**
+ * The edits that make a new clip `clip` with one track on `state` (ADR-0051 §3.2: only clips of one motion group play
+ * one control). A control no clip plays is taken as it is. A control a group's clips play puts the new clip in that
+ * group. A control one clip in no group plays makes a group of that clip and the new one -- the person adds 「열기」 to a
+ * 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 }
+  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)))
+  if (group) return { edits: [{ ...track, group: group.id }], join: { kind: 'group', group: group.id, label: group.label } }
+  const id = freeGroupIdOf(asset)
+  const label = asset.stateInputs?.[state]?.label ?? state
+  const other = writers[0]!
+  return {
+    edits: [{ kind: 'set-motion-group' as const, group: { id, label, clips: [other], defaultClip: other, transitionSeconds: 0.2 } }, { ...track, group: id }],
+    join: { kind: 'new-group', group: id, label, clip: other }
+  }
+}
+
+/**
+ * 「이 자세 기억하기」: the pose the figure stands in now, kept in `clip` at `seconds` in one step (review 2026-11-09:
+ * a six-axis pose was six tracks keyed one by one). A track whose value there differs gets a key; a control the clip
+ * does not play yet and that moved since `base` -- the pose the clip was last shown or kept in -- gets a track that
+ * starts from where it was and reaches the pose at that moment (from the start when the moment is 0). A moved control
+ * another clip outside this clip's group plays is not taken; it is named in `skipped`.
+ */
+export function rememberedPoseEdits(asset: FigureAsset, clip: string, seconds: number, values: Record<string, number>, base: Record<string, number>): { edits: unknown[]; skipped: string[] } {
+  const found = clipsOf(asset).find(c => c.name === clip)
+  if (!found) return { edits: [], skipped: [] }
+  const at = round(Math.min(Math.max(seconds, 0), found.duration))
+  const there = new Map(poseAt(asset, clip, at).map(c => [c.input, c.value]))
+  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
+    edits.push(trackEdit(found, track, { keys: withKey(track.keys, { seconds: at, value: now }) }))
+  }
+  const free = new Set(undrivenOf(asset, clip))
+  const skipped: string[] = []
+  const played = new Set(found.tracks.map(t => t.state))
+  for (const input of asset.document.model.inputs) {
+    if (input.role !== 'state' || played.has(input.id)) continue
+    const now = values[input.id]
+    const was = base[input.id]
+    if (now === undefined || was === undefined || same(now, was)) continue
+    if (!free.has(input.id)) {
+      skipped.push(input.id)
+      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 })
+  }
+  return { edits, skipped }
+}

package/client/modeller/editor-styles.ts

@@ -133,6 +133,42 @@ export const EditorStyles = css`
     min-height: 0;
   }
   /* Which size handles change one diameter (ADR-0140 4.1): a quiet line over the canvas, out of the gizmo's way. */
+  /* What a drag does on the joint of the part chosen: one line under the board, its buttons quiet text (review 2026-11-09). */
+  p[joint-handle] {
+    position: absolute;
+    bottom: 12px;
+    left: 50%;
+    z-index: 5;
+    transform: translateX(-50%);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 2px 8px;
+    /* As wide as its words: at left 50% the line would otherwise wrap at half the board. */
+    width: max-content;
+    max-width: calc(100% - 24px);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 4px 6px 4px 12px;
+    border-radius: 16px;
+    background: var(--md-sys-color-surface-container-high);
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+  p[joint-handle] button {
+    padding: 2px 6px;
+    border: none;
+    border-radius: 4px;
+    background: none;
+    color: var(--md-sys-color-primary);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  p[joint-handle] button:hover {
+    background: var(--md-sys-color-surface-container-highest);
+  }
   p[same-measure] {
     position: absolute;
     bottom: 12px;

package/client/modeller/editor.ts

@@ -48,7 +48,7 @@ import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type Field
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { EditorStyles } from './editor-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
-import { alignChanges, canMirror, mirrorEditOf, mirrorPlanOf, type AlignTool, type MirrorForm } from './align.js'
+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 { meshChoicesOf, meshPartOf } from './mesh-import.js'
@@ -74,7 +74,7 @@ import { sizeInputOf } from './size-response.js'
 import { canFollow, followableAxes, endPlaceKeyOf, fieldWordsOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceSizeToDeclare, proportionToFollow, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
 import { jointFanOf } from './joint-fan.js'
 import { derivedOf, type FigureRevision } from './revision.js'
-import { jointDragOf } from './joint-drag.js'
+import { jointDragOf, jointHandleOf } from './joint-drag.js'
 import type { FirstSave } from './first-save.js'
 import { isLive, livePartsOf, liveOverSession, NOTHING_LIVE, scrubLabel, type LiveValues } from './live.js'
 import { startingShapeKindOfBody } from './starting-shape.js'
@@ -196,6 +196,8 @@ export class FigureEditor extends LitElement {
   @state() private middle: 'edit' | 'preview' = 'edit'
   /** The gizmo shown on the selected part, as the tools in the bar and W · E · R choose it; none once the part changes. */
   @state() private gizmoMode?: 'translate' | 'rotate' | 'scale'
+  /** 「관절 위치 편집」: while on, a drag on a part that hangs from a joint that moves moves where the joint sits, not its pose. Off on each new selection. */
+  @state() private jointPlacing = false
   /** A line saying what a command did besides what was asked; gone at the next command. */
   @state() private notice = ''
   /**
@@ -330,7 +332,10 @@ export class FigureEditor extends LitElement {
       this.panelMemory.leave((_changed.get('selected') as string | undefined) ?? '', this.selected)
     }
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
-    if (_changed.has('selected')) this.gizmoMode = undefined
+    if (_changed.has('selected')) {
+      this.gizmoMode = undefined
+      this.jointPlacing = false
+    }
     /* The window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
     if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit')) this.closeFastening()
     /*
@@ -358,6 +363,29 @@ export class FigureEditor extends LitElement {
       if (closed && this.selected === editing) this.selected = next
     })
   }
+  /**
+   * On a part that hangs from a joint that moves, what a drag does, before it is dragged (review 2026-11-09): the handle
+   * that poses it, or why none does and where it is moved from -- and 「관절 위치 편집」 to move where the joint sits.
+   */
+  private renderJointHandle(unavailable: boolean) {
+    const asset = this.asset()
+    if (unavailable || this.gizmoMode === 'scale' || !this.selected || !asset) return nothing
+    const handle = jointHandleOf(asset, this.selected)
+    if (!handle) return nothing
+    if (this.jointPlacing)
+      return html`<p joint-handle role="status">${i18next.t('figure.text.joint-placing', { joint: handle.joint })}
+        <button act @click=${() => (this.jointPlacing = false)}>${i18next.t('figure.button.joint-place-off')}</button></p>`
+    const said =
+      handle.kind === 'mimic'
+        ? i18next.t('figure.text.gizmo-joint-mimic', { joint: handle.joint, leader: handle.leader })
+        : handle.kind === 'several-axes'
+          ? i18next.t('figure.text.gizmo-joint-several-axes', { joint: handle.joint })
+          : i18next.t(`figure.text.joint-handle-${handle.kind}`, { joint: handle.joint })
+    const leaderPart = handle.kind === 'mimic' ? handle.leaderPart : undefined
+    return html`<p joint-handle role="status">${said}
+      ${leaderPart ? html`<button act @click=${() => this.choose(leaderPart)}>${i18next.t('figure.button.select-leader', { leader: (handle as { leader: string }).leader })}</button>` : nothing}
+      <button act @click=${() => (this.jointPlacing = true)}>${i18next.t('figure.button.joint-place-on')}</button></p>`
+  }
   /** While the size tool is on a round part: which of its handles change the one diameter (ADR-0140 4.1). */
   private renderSameMeasure(unavailable: boolean) {
     if (unavailable || this.gizmoMode !== 'scale' || !this.selected) return nothing
@@ -693,11 +721,26 @@ export class FigureEditor extends LitElement {
     const shown = this.shown()!
     const asset = shown.asset
     const drawn = view.geometry.find(g => g.id === id) as unknown as FigureRenderPart | undefined
-    const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, shown.inputs) : null
+    const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, shown.inputs, { place: this.jointPlacing }) : null
     if (drag) {
       if (drag.kind === 'value') this.run(() => this.session!.apply([{ kind: 'set-state', input: drag.input, unit: drag.unit, value: drag.value }]))
       else if (drag.kind === 'joint') this.run(() => this.session!.command({ kind: 'set-joint', joint: drag.joint }))
-      else {
+      else if (drag.reason === 'place-off') {
+        /* A pose drag that would have moved the joint: nothing is written, and the way to move it is offered. */
+        this.refusals.point(i18next.t('figure.text.gizmo-joint-place-off', { joint: drag.joint }), {
+          label: i18next.t('figure.button.joint-place-on'),
+          run: () => (this.jointPlacing = true)
+        })
+        this.requestUpdate()
+      } else if (drag.reason === 'mimic') {
+        /* A joint that follows another: the one it follows is a click away. */
+        const leader = jointHandleOf(asset, ownerOf(id))
+        const leaderPart = leader?.kind === 'mimic' ? leader.leaderPart : undefined
+        const message = i18next.t('figure.text.gizmo-joint-mimic', { joint: drag.joint, leader: drag.leader ?? '' })
+        if (leaderPart) this.refusals.point(message, { label: i18next.t('figure.button.select-leader', { leader: drag.leader ?? '' }), run: () => this.choose(leaderPart) })
+        else this.refusals.say(message)
+        this.requestUpdate()
+      } else {
         this.error = i18next.t(`figure.text.gizmo-joint-${drag.reason}`, { joint: drag.joint, leader: drag.leader ?? '', axis: drag.axis ?? '' })
         this.requestUpdate()
       }
@@ -809,6 +852,9 @@ export class FigureEditor extends LitElement {
             ${i18next.t('figure.label.mirror-keep-motion')}
           </label>`
         : nothing}
+      ${(clips => (clips.length ? html`<p hint mirror-clips>${i18next.t('figure.text.mirror-copies-clips', { clips: clips.join(', ') })}</p>` : nothing))(
+        mirroredClipsOf(this.shown()!.asset, m.part, m.form.chain)
+      )}
       <div pair>
         <button act ?disabled=${unavailable} @click=${() => this.mirrorWith(m.part, m.form)}>${i18next.t('figure.button.mirror-' + m.form.axis)}</button>
         <button act @click=${() => (this.mirroring = undefined)}>${i18next.t('figure.button.cancel')}</button>
@@ -1112,6 +1158,7 @@ export class FigureEditor extends LitElement {
       @states=${(e: CustomEvent) => this.run(() => this.session!.apply(e.detail.changes))}
       @states-live=${(e: CustomEvent) => this.hold(e.detail.values)}
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+      @part-edits=${(e: CustomEvent) => this.run(() => this.session!.applyRecipe(e.detail.edits))}
     ></figure-clips>`
   }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
@@ -2061,7 +2108,7 @@ export class FigureEditor extends LitElement {
           @render-error=${(e: CustomEvent<Error>) => {
             this.error = e.detail.message
           }}
-        ></figure-canvas>${this.renderSameMeasure(unavailable)}</div>
+        ></figure-canvas>${this.renderSameMeasure(unavailable)}${this.renderJointHandle(unavailable)}</div>
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}

package/client/modeller/figure-clips.ts

@@ -1,13 +1,14 @@
 import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
+import type { PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 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, poseAt, shiftable, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipTrack } from './clips.js'
+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 { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { HelpToggles } from './help.js'
 
@@ -23,7 +24,11 @@ const typed = (value: number) => String(Math.round(value * 1000) / 1000)
  * then kept as a key. Every change is one part edit.
  *
  * Clips of one motion group play one at a time on the same controls -- idle, walk, run (ADR-0051 §3.2): only clips of
- * one group may play the same control, so a new clip is put in a group as it is made when it is to take one.
+ * one group may play the same control. A new clip on a control another clip plays is put in a group as it is made --
+ * that clip's, or one made of the two -- and the panel says so before the button is pressed (review 2026-11-09).
+ *
+ * 「이 자세 기억하기」 keeps the pose the figure stands in now at the scrubbed moment, every control that moved, in one
+ * step. What moved is read against the pose the clip was last shown or kept in (`base`).
  */
 @customElement('figure-clips')
 export class FigureClips extends localize(i18next)(LitElement) {
@@ -66,6 +71,11 @@ export class FigureClips extends localize(i18next)(LitElement) {
       min-width: 0;
       overflow-wrap: anywhere;
     }
+    /* How it moves between keys: its own row under the head, as wide as the track, its words not cut. */
+    div[track-head] select[interpolation] {
+      grid-row: 3;
+      grid-column: 1 / -1;
+    }
     div[track-head] button[act] {
       width: 30px;
       min-height: var(--figure-control-height);
@@ -148,10 +158,20 @@ export class FigureClips extends localize(i18next)(LitElement) {
 
   /** Where each clip is scrubbed to, in seconds. */
   @state() private at: Record<string, number> = {}
-  @state() private adding = { state: '', clip: '', name: '', duration: 2, group: '' }
+  @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. */
   @state() private copying?: { clip: string; state: string; target: string; seconds: number }
+  /** Per clip, the pose it was last shown or kept in: a control that differs from it now has been moved by the person. */
+  @state() private base: Record<string, Record<string, number>> = {}
+
+  protected willUpdate(changed: PropertyValues) {
+    if (!changed.has('asset') || !this.asset) return
+    /* A clip seen for the first time takes the pose the figure stands in now as where its moves are read from. */
+    const names = clipsOf(this.asset).map(c => c.name)
+    const fresh = names.filter(n => !this.base[n])
+    if (fresh.length) this.base = { ...Object.fromEntries(Object.entries(this.base).filter(([n]) => names.includes(n))), ...Object.fromEntries(fresh.map(n => [n, { ...this.values }])) }
+  }
 
   render() {
     const asset = this.asset
@@ -211,10 +231,25 @@ export class FigureClips extends localize(i18next)(LitElement) {
           />s
         </label>
       </div>
+      ${this.renderRemember(clip, at)}
       ${clip.tracks.map(track => this.renderTrack(clip, track, at))}
     </section>`
   }
 
+  /** 「이 자세 기억하기」: 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)
+    const label = (id: string) => this.asset!.stateInputs?.[id]?.label ?? id
+    return html`<button act remember-pose ?disabled=${this.locked || !edits.length} title=${edits.length ? '' : i18next.t('figure.text.remember-pose-nothing')}
+        @click=${() => {
+          this.edits(edits)
+          this.base = { ...this.base, [clip.name]: { ...this.values } }
+        }}>
+        <md-icon>photo_camera</md-icon>${i18next.t('figure.button.remember-pose', { seconds: at.toFixed(2) })}
+      </button>
+      ${skipped.length ? html`<p hint>${i18next.t('figure.text.remember-pose-skipped', { controls: skipped.map(label).join(', ') })}</p>` : nothing}`
+  }
+
   private renderTrack(clip: Clip, track: ClipTrack, at: number) {
     const current = this.values[track.state]
     return html`<div track>
@@ -228,6 +263,15 @@ export class FigureClips extends localize(i18next)(LitElement) {
           <option value="wrap" ?selected=${track.loop === 'wrap'}>${i18next.t('figure.label.clip-loop-wrap')}</option>
           <option value="hold" ?selected=${track.loop === 'hold'}>${i18next.t('figure.label.clip-loop-hold')}</option>
         </select>
+        <select
+          interpolation
+          aria-label=${i18next.t('figure.label.clip-interpolation')}
+          title=${i18next.t('figure.label.clip-interpolation')}
+          ?disabled=${this.locked}
+          @change=${(e: Event) => this.edit(trackEdit(clip, track, { interpolation: (e.target as HTMLSelectElement).value as ClipTrack['interpolation'] }))}
+        >
+          ${(['linear', 'smooth', 'step'] as const).map(i => html`<option value=${i} ?selected=${track.interpolation === i}>${i18next.t(`figure.label.clip-interpolation-${i}`)}</option>`)}
+        </select>
         <button act copy-track ?disabled=${this.locked} title=${i18next.t('figure.button.copy-track')} aria-label=${i18next.t('figure.button.copy-track')}
           @click=${() => (this.copying = this.copying?.clip === clip.name && this.copying.state === track.state ? undefined : { clip: clip.name, state: track.state, target: track.state, seconds: 0 })}>
           <md-icon>content_copy</md-icon>
@@ -292,6 +336,8 @@ export class FigureClips extends localize(i18next)(LitElement) {
     const moves = shiftable(track)
     const seconds = moves && Number.isFinite(c.seconds) ? c.seconds : 0
     const same = c.target === track.state && !seconds
+    /* A smooth track goes round only onto one of its keys: said, with the moments it can go to, and not applied. */
+    const fits = moves ? shiftOffKeyOf(track, clip.duration, seconds) : null
     return html`<div copy-form>
       <div form>
         <span>${i18next.t('figure.label.copy-track-onto')}</span>
@@ -305,8 +351,9 @@ export class FigureClips extends localize(i18next)(LitElement) {
           <small>/ ${typed(clip.duration)}s</small>
         </label>
       </div>
+      ${fits ? html`<p hint off-key>${i18next.t('figure.text.copy-track-off-key', { seconds: fits.map(typed).join(', ') })}</p>` : nothing}
       <div pair>
-        <button act ?disabled=${this.locked || same}
+        <button act ?disabled=${this.locked || same || !!fits}
           @click=${() => {
             this.edit(copiedTrackEdit(asset, clip, track, c.target, seconds))
             this.copying = undefined
@@ -319,10 +366,12 @@ export class FigureClips extends localize(i18next)(LitElement) {
   private renderAdd(asset: FigureAsset, clips: Clip[]) {
     const a = this.adding
     const joining = clips.find(c => c.name === a.clip)
-    const { groups } = clipGroupsOf(asset)
-    const group = joining ? undefined : groups.find(g => g.id === a.group)
-    /* The controls this clip may take: not played by it yet, and by no clip outside its group. */
-    const free = undrivenOf(asset, joining?.name ?? '', group?.id)
+    /*
+      The controls a track can take. Joining a clip: those it may play. A new clip: any control -- one another clip
+      plays puts the new clip in a group with it, said below before the button is pressed (review 2026-11-09: the
+      controls used to vanish from the list, and the group had to be designed first).
+    */
+    const free = joining ? undrivenOf(asset, joining.name) : asset.document.model.inputs.filter(i => i.role === 'state').map(i => i.id)
     const stateId = free.includes(a.state) ? a.state : free[0]
     const name = joining ? joining.name : a.name.trim()
     const input = asset.document.model.inputs.find(i => i.id === stateId)
@@ -330,6 +379,13 @@ export class FigureClips extends localize(i18next)(LitElement) {
     /* A new clip takes a name no clip has: the same name would rewrite that clip's track, not add one. */
     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)
+      /* The name was this clip's; the next new clip is named again. */
+      this.adding = { ...a, name: '', state: '' }
+    }
     return html`<section><h3>${i18next.t('figure.label.add-track')}</h3>
       <div form>
         <span>${i18next.t('figure.label.controls')}</span>
@@ -341,13 +397,6 @@ export class FigureClips extends localize(i18next)(LitElement) {
           <option value="" ?selected=${!joining}>${i18next.t('figure.label.new-clip')}</option>
           ${clips.map(c => html`<option value=${c.name} ?selected=${c === joining}>${c.name}</option>`)}
         </select>
-        ${joining || !groups.length
-          ? nothing
-          : html`<span>${i18next.t('figure.label.motion-group')}</span>
-              <select @change=${(e: Event) => (this.adding = { ...a, group: (e.target as HTMLSelectElement).value })}>
-                <option value="" ?selected=${!group}>${i18next.t('figure.label.no-motion-group')}</option>
-                ${groups.map(g => html`<option value=${g.id} ?selected=${g === group}>${g.label}</option>`)}
-              </select>`}
         ${joining
           ? nothing
           : html`<span>${i18next.t('figure.label.clip-name')}</span>
@@ -355,26 +404,17 @@ export class FigureClips extends localize(i18next)(LitElement) {
               <span>${i18next.t('figure.label.clip-duration')}</span>
               <input type="number" min="0.1" step="any" .value=${String(a.duration)} @change=${(e: Event) => (this.adding = { ...a, duration: (e.target as HTMLInputElement).valueAsNumber })} />`}
       </div>
-      <button
-        act
-        ?disabled=${this.locked || !ready}
-        @click=${() => {
-          this.edit({
-            kind: 'set-driver',
-            state: stateId,
-            clip: name,
-            ...(joining ? {} : { duration }),
-            ...(group ? { group: group.id } : {}),
-            keys: [
-              { seconds: 0, value: input!.min },
-              { seconds: duration, value: input!.max }
-            ]
-          })
-          /* The name was this clip's; the next new clip is named again. */
-          this.adding = { ...a, name: '', state: '' }
-        }}
-      >
+      ${join?.kind === 'new-group'
+        ? html`<p hint track-join>${i18next.t('figure.text.track-makes-group', { clip: join.clip, name, group: join.label })}</p>`
+        : 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))}>
         <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')}
+        @click=${() => add(newTrackKeys(input!, this.values[stateId!], duration, 'range'))}>
+        <md-icon>swap_horiz</md-icon>${i18next.t('figure.button.add-track-range')}
       </button></section>`
   }
 
@@ -489,6 +529,8 @@ export class FigureClips extends localize(i18next)(LitElement) {
       return
     }
     this.dispatchEvent(new CustomEvent('states', { detail: { changes }, bubbles: true, composed: true }))
+    /* The clip's pose shown: what moves from here is the person's. */
+    this.base = { ...this.base, [clip.name]: { ...this.values, ...Object.fromEntries(changes.map(c => [c.input, c.value])) } }
   }
 
   /** A key's moment or value typed: one edit of the track; a moment the track cannot take puts the field back. */
@@ -506,4 +548,10 @@ export class FigureClips extends localize(i18next)(LitElement) {
   private edit(edit: unknown) {
     this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
+
+  /** Several edits as one step of the history. */
+  private edits(edits: unknown[]) {
+    if (edits.length === 1) return this.edit(edits[0])
+    this.dispatchEvent(new CustomEvent('part-edits', { detail: { edits }, bubbles: true, composed: true }))
+  }
 }

package/client/modeller/joint-drag.ts

@@ -17,12 +17,16 @@ import type { FigureRenderPart } from './renderer.js'
  *
  * What would break a relation is refused and said: an origin that follows another part's size, a joint that mimics
  * another, a turn on a joint that does not turn.
+ *
+ * **Posing and placing are two things** (review 2026-11-09): on a joint that moves, a drag changes the pose -- its value.
+ * Where the joint sits is moved only while 「관절 위치 편집」 is on (`place`); off, such a drag is refused with the way to
+ * turn it on, so a pose being made never moves the joint unseen. A fixed joint has no pose: a drag on it places it.
  */
 
 export type JointDrag =
   | { kind: 'value'; input: string; unit: 'deg' | 'mm' | 'ratio'; value: number }
   | { kind: 'joint'; joint: FigureJoint }
-  | { kind: 'refused'; reason: 'mimic' | 'fixed-turn' | 'origin-follows' | 'turned-slide' | 'off-axis' | 'several-axes'; joint: string; leader?: string; axis?: string }
+  | { kind: 'refused'; reason: 'mimic' | 'fixed-turn' | 'origin-follows' | 'turned-slide' | 'off-axis' | 'several-axes' | 'place-off'; joint: string; leader?: string; axis?: string }
 
 type Axis = 'x' | 'y' | 'z'
 const AXES: Axis[] = ['x', 'y', 'z']
@@ -50,7 +54,7 @@ function jointFrameRotation(j: FigureJoint, a: FigureNamedMotion | undefined, pa
   return now.multiply(own.invert()).multiply(turn.invert())
 }
 
-export function jointDragOf(asset: FigureAsset, id: string, part: FigureRenderPart, result: GizmoResult, values: Record<string, number>): JointDrag | null {
+export function jointDragOf(asset: FigureAsset, id: string, part: FigureRenderPart, result: GizmoResult, values: Record<string, number>, options: { place?: boolean } = {}): JointDrag | null {
   const j = asset.joints?.find(joint => joint.body1.part === id)
   /* A size is the part's own, not the joint's: a scale drag goes to the part's measures (the editor drops the shift). */
   if (!j || result.scale || (!result.rotation && !result.position)) return null
@@ -102,6 +106,9 @@ export function jointDragOf(asset: FigureAsset, id: string, part: FigureRenderPa
     }
   }
 
+  /* A joint that moves is posed by a drag; its place is moved only while placing is on. */
+  if (a && !options.place) return { kind: 'refused', reason: 'place-off', joint: j.id }
+
   /* Moving the joint's origin: the change in the frame it is placed in, before `origin.parentRotate` turns the joint frame. */
   const local = moved.clone().applyMatrix4(frame.clone().multiply(rotateMatrix(j).invert()).invert())
   const origin: NonNullable<FigureJoint['origin']> = { ...(j.origin ?? {}) }
@@ -136,3 +143,26 @@ export function jointDragOf(asset: FigureAsset, id: string, part: FigureRenderPa
   }
   return { kind: 'joint', joint: { ...j, origin } }
 }
+
+/**
+ * What a drag on the part does, said before it is dragged (review 2026-11-09: 「왜 안 움직이지?」): which handle changes
+ * its pose, or why none does and where it is moved from instead. Null for a part on no joint, or on a fixed one.
+ */
+export type JointHandle =
+  | { kind: 'turn' | 'slide'; joint: string }
+  | { kind: 'mimic'; joint: string; leader: string; leaderPart?: string }
+  | { kind: 'several-axes'; joint: string }
+
+export function jointHandleOf(asset: FigureAsset, part: string): JointHandle | null {
+  const j = asset.joints?.find(joint => joint.body1.part === part)
+  if (!j) return null
+  const axes = figureMotionsOf(j)
+  if (!axes.length) return null
+  if (axes.length > 1) return { kind: 'several-axes', joint: j.id }
+  const a = axes[0]!
+  if (a.mimic) {
+    const leader = figureMimicTermsOf(a.mimic)!.sum[0]!.joint
+    return { kind: 'mimic', joint: j.id, leader, leaderPart: asset.joints?.find(o => o.id === leader)?.body1.part }
+  }
+  return { kind: a.type === 'revolute' ? 'turn' : 'slide', joint: j.id }
+}

package/dist-client/modeller/align.d.ts

@@ -48,6 +48,11 @@ export declare function mirrorPlanOf(asset: FigureAsset, part: string, axis: 'x'
     asks: boolean;
     form: MirrorForm;
 };
+/**
+ * The clips whose tracks come with a mirrored copy (figure-model's mirror-part, review 2026-11-09): those that play a
+ * control of the part, or of what hangs from it when the chain is taken. Said in the form before the copy is made.
+ */
+export declare function mirroredClipsOf(asset: FigureAsset, part: string, chain: boolean): string[];
 /** The one edit the form comes to. */
 export declare function mirrorEditOf(part: string, form: MirrorForm): FigurePartEdit;
 /**

package/dist-client/modeller/align.js

@@ -1,4 +1,4 @@
-import { figureHangingChainOf, figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model';
+import { figureHangingChainOf, figureMotionsOf, figureOccupiedBoxesOf, figureWritersOf, motionStateIdOf } from '@hatiolab/figure-model';
 import { derivedOf } from './revision.js';
 const AXES = ['x', 'y', 'z'];
 /**
@@ -79,6 +79,15 @@ export function mirrorPlanOf(asset, part, axis) {
         form: { axis, chain: true, from: named ? `${head}-` : '', to: named ? `${swapped}-` : '', keepMotion: false }
     };
 }
+/**
+ * The clips whose tracks come with a mirrored copy (figure-model's mirror-part, review 2026-11-09): those that play a
+ * control of the part, or of what hangs from it when the chain is taken. Said in the form before the copy is made.
+ */
+export function mirroredClipsOf(asset, part, chain) {
+    const parts = chain ? figureHangingChainOf(asset, part) : [part];
+    const controls = new Set((asset.joints ?? []).filter(j => parts.includes(j.body1.part)).flatMap(j => figureMotionsOf(j).filter(m => !m.mimic).map(m => motionStateIdOf(m))));
+    return [...new Set((asset.drivers ?? []).filter(d => controls.has(d.state)).map(d => d.clip))];
+}
 /** The one edit the form comes to. */
 export function mirrorEditOf(part, form) {
     return {