@things-factory/figure-ui 10.1.271 → 10.1.272

package/client/modeller/figure-links.ts

@@ -50,7 +50,7 @@ import {
   stateSizeFixedOf,
   type StateSizeForm
 } from './links.js'
-import { measureFactor } from './size-response.js'
+import { measureFactor, sizeAxisWord } from './size-response.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { insideAlignmentOf } from './fasten-geometry.js'
 import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js'
@@ -58,9 +58,22 @@ import type { FigureRevision } from './revision.js'
 import { HelpToggles } from './help.js'
 import { groupMenu, GroupMenuStyles } from './group-menu.js'
 import { jointAxisWord } from './joint-axis.js'
+import { PIVOT_POINTS, pivotPointOf, pivotPointsOf, type PivotPoint } from './pivot.js'
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
 
 const freshMotion = (): MotionForm => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 })
+
+/**
+ * The motion a part's form starts from: a part hung on another part most often turns there -- a thigh at the hip, a door
+ * at its frame -- so it starts as a turn; a part on the plane, or on nothing, as a slide (review 2026-11-11: eight
+ * joints of a humanoid, each changed from slide to turn by hand).
+ */
+export function motionStartOf(revision: FigureRevision | undefined, part: string): MotionForm {
+  const own = revision ? fasteningOf(revision, part) : undefined
+  return own && !own.toPlane && own.target ? { ...freshMotion(), kind: 'turn', min: -90, max: 90 } : freshMotion()
+}
+
+const sameMotion = (a: MotionForm, b: MotionForm) => JSON.stringify(a) === JSON.stringify(b)
 const freshRow = () => ({ axis: '' as Axis | '', pitch: 200, fills: true, count: 5 })
 const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as FigureFace, label: '', accepts: '', capacity: 1 })
 
@@ -85,6 +98,17 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     :host {
       display: block;
     }
+    /* The turn's axis through the part's top, middle or bottom, by name, under the numbers it fills in. */
+    div[pivot-points] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 4px 0 8px;
+    }
+    div[pivot-points] > span {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--ui-t-small, 11.5px);
+    }
     /* A group's sub-question, under its title: quieter than the title, as a label is. */
     p[group-question] {
       margin: 4px 0 0;
@@ -216,7 +240,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     if (changed.has('asset') || changed.has('partId')) this.fixNote = ''
     if (this.asset && this.partId && this.partId !== this.loadedFor) {
       this.loadedFor = this.partId
-      this.motion = freshMotion()
+      this.motion = motionStartOf(this.revision, this.partId)
       this.place = freshPlace()
       this.placeEditing = null
       this.row = freshRow()
@@ -224,6 +248,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.rowCandidate = undefined
       this.editingMotion = false
       this.motionAxis = 0
+    } else if (changed.has('revision') && this.partId && !this.editingMotion) {
+      /* Fastened since the form was loaded, a form nobody has touched starts as that part's motion now does. */
+      const was = motionStartOf(changed.get('revision') as FigureRevision | undefined, this.partId)
+      if (sameMotion(this.motion, was)) this.motion = motionStartOf(this.revision, this.partId)
     }
   }
 
@@ -624,7 +652,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const part = this.partId
     const axes = followableAxes(asset, part)
     if (!axes.length) return nothing
-    const word = (axis: Axis) => `${axis.toUpperCase()}${measureFactor(asset, part, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`
+    const word = (axis: Axis) => sizeAxisWord(asset, part, axis, i18next.t('figure.label.size-diameter'))
     const sized = axes.flatMap(axis => {
       const f = followOf(asset, part, axis)
       return f.of === 'state' ? [{ axis, f }] : []
@@ -760,7 +788,33 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                 </div>`
           )}
         </div>
-      </div>`
+      </div>
+      ${this.renderPivotPoints(m)}`
+  }
+
+  /*
+    The axis put through the part's top end, middle or bottom end by name: the numbers above are measured from the
+    joint's origin, which a person cannot see (tutorial run 2026-11-12: a shoulder given Y 120 "to reach the shoulder"
+    turned about a point above it). The button that matches what is typed stands pressed.
+  */
+  private pivotCache?: { key: string; points: ReturnType<typeof pivotPointsOf> }
+  private renderPivotPoints(m: MotionForm) {
+    if (!this.revision || m.throughFollows) return nothing
+    const key = `${this.revision.revision}:${this.partId}:${m.axis}`
+    if (this.pivotCache?.key !== key) this.pivotCache = { key, points: pivotPointsOf(this.revision, this.partId, m.axis as Axis) }
+    const points = this.pivotCache.points
+    if (!points) return nothing
+    return html`<div pivot-points>
+      <span>${i18next.t('figure.label.pivot-at')}</span>
+      <ox-input-select-buttons
+        .value=${pivotPointOf(points, m.through, m.axis as Axis) ?? ''}
+        .options=${PIVOT_POINTS.map(p => ({ value: p, display: i18next.t(`figure.label.pivot-${p}`) }))}
+        @change=${(e: CustomEvent) => {
+          const at = points[e.detail as PivotPoint]
+          if (at) this.motion = { ...m, through: { ...at } }
+        }}
+      ></ox-input-select-buttons>
+    </div>`
   }
 
   private renderMotion(asset: FigureAsset) {
@@ -844,6 +898,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const adding = k > 0 && k >= figureMotionsOf(joint).length
     const follow = leaders.some(j => j.id === m.follow) ? m.follow : ''
     const refusal = motionFormRefusalOf(m, follow)
+    /* Following another joint is offered after the part's own control: a row above it moved every field down a row, and
+       a name typed there chose a joint to follow (review 2026-11-11). */
     return html`
       ${k > 0 ? html`<p motion-axis-heading><b>${i18next.t('figure.label.motion-axis-n', { n: k + 1 })}</b></p>` : nothing}
       <div pair>
@@ -858,31 +914,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
             </select>`}
       </div>
-      ${m.followSum
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-follow')}</span>
-            <span>${m.followSum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')}</span>
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
-          </div>`
-        : leaders.length
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-follow')}</span>
-            <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
-              <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
-              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
-            </select>
-          </div>`
-        : nothing}
-      ${m.followSum
+      ${m.followSum || follow
         ? nothing
-        : follow
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-multiplier')}</span>
-            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
-          </div>`
         : html`<div form>
             ${m.kind === 'slide'
               ? html`<span>${i18next.t('figure.label.motion-travel')}</span>
@@ -910,6 +943,30 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                     <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
                   </div>`}
           </div>`}
+      ${m.followSum
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <span>${m.followSum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')}</span>
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : leaders.length
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
+              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
+            </select>
+          </div>`
+        : nothing}
+      ${!m.followSum && follow
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-multiplier')}</span>
+            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : nothing}
       ${m.kind === 'slide' ? nothing : this.renderThrough(m)}
       <button
         act

package/client/modeller/figure-preview.ts

@@ -16,6 +16,7 @@ import { dataValueAt, domainOf, motionWrittenByData, sampledStatesOf, typedValue
 import { derivedOf, type FigureRevision } from './revision.js'
 import { authoredSizeOf, bodyAtSize, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewOneInstance, previewTypeOf, setupPartOf, sizeSpanOf, sizeWithinRange } from '@things-factory/figure-viewer/dist-client/preview-model.js'
 import { previewSizeWordsOf } from './preview-size.js'
+import { playedControlsOf } from './clips.js'
 
 /**
  * The figure placed on a board.
@@ -250,6 +251,28 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       border: 1px solid rgba(255, 255, 255, 0.22);
       border-radius: 5px;
     }
+    /* A motion group's clips as buttons: a list the system draws is not seen in a recording of the preview. */
+    div[clips] span[clip-choices] {
+      grid-column: 2 / -1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      min-width: 0;
+    }
+    div[clips] span[clip-choices] button {
+      font: inherit;
+      color: inherit;
+      padding: 1px 8px;
+      background-color: rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 10px;
+      cursor: pointer;
+    }
+    div[clips] span[clip-choices] button[aria-pressed='true'] {
+      background-color: rgba(255, 255, 255, 0.3);
+      border-color: rgba(255, 255, 255, 0.6);
+      font-weight: 600;
+    }
     div[clips] svg[dial] {
       width: 20px;
       height: 20px;
@@ -556,6 +579,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       ${i18next.t(this.controlsFolded ? 'figure.button.controls-unfold' : 'figure.button.controls-fold')}
     </button>`
     if (this.controlsFolded) return html`<div clips folded>${fold}</div>`
+    const played = playedControlsOf(asset, this.driving, this.moving)
     return html`<div clips>
       ${fold}
       ${changed.length
@@ -580,6 +604,18 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         /* The step the editor's controls take (\`controlsOf\`): a degree for an angle, a hundredth of the range otherwise. */
         const step = steps.get(control.id) ?? (control.max - control.min) / 100
         const label = asset.stateInputs?.[control.id]?.label ?? control.id
+        /*
+          A control a playing clip drives moves on the figure while its row stood still at its last number -- 0 under a
+          walking leg (review 2026-11-11). The row says the clip has it, and is not given a value until the clip stops.
+        */
+        const by = played.get(control.id)
+        if (by)
+          return html`<label played title=${i18next.t('figure.text.control-played-explained', { clip: by })}>
+            <span>${label} <span drive>${unitWord(control.unit)}</span></span>
+            <span></span>
+            <input type="range" min=${control.min} max=${control.max} .value=${String(value)} disabled />
+            <output>${i18next.t('figure.text.control-played', { clip: by })}</output>
+          </label>`
         return html`<label>
           <span>${label} <span drive>${unitWord(control.unit)}</span></span>
           ${this.renderDial(control, value)}
@@ -628,9 +664,11 @@ export class FigurePreview extends localize(i18next)(LitElement) {
             ? nothing
             : html`<label>
                 <span>${group.label} <span drive>${i18next.t('figure.label.clip')}</span></span>
-                <select aria-label=${group.label} @change=${(e: Event) => this.move(group.id, { ...playing, clip: (e.target as HTMLSelectElement).value })}>
-                  ${group.clips.map(c => html`<option value=${c} ?selected=${c === playing.clip}>${c}</option>`)}
-                </select>
+                <span clip-choices role="group" aria-label=${group.label}>
+                  ${group.clips.map(
+                    c => html`<button type="button" aria-pressed=${String(c === playing.clip)} @click=${() => this.move(group.id, { ...playing, clip: c })}>${c}</button>`
+                  )}
+                </span>
               </label>`}
           ${byData.speed
             ? nothing

package/client/modeller/figure-size-editor.ts

@@ -10,6 +10,7 @@ import { scrubLabel } from './live.js'
 import {
   measureFactor,
   sameSizeSource,
+  sizeAxisWord,
   sizeInputOf,
   sizeRelationOf,
   sizeRelationSteps,
@@ -39,10 +40,13 @@ export class FigureSizeEditor extends localize(i18next)(LitElement) {
     :host { display: block; min-width: 0; }
     .heading, .fields {
       display: grid;
-      grid-template-columns: 24px minmax(55px, .85fr) 32px minmax(65px, 1fr) 42px;
+      grid-template-columns: var(--axis-column, 24px) minmax(55px, .85fr) 32px minmax(65px, 1fr) 42px;
       gap: 6px;
       align-items: center;
     }
+    /* A round body's rows name its diameter (「X·Z · 지름」): every row's first column widens alike, so the rows still line up. */
+    :host([named-axes]) { --axis-column: 76px; }
+    .fields > span:first-child { white-space: nowrap; }
     .heading { color: var(--md-sys-color-on-surface-variant); padding-bottom: 6px; }
     .dimension { padding: 3px 0; }
     .variable { display: flex; align-items: center; justify-content: center; min-height: var(--figure-control-height); }
@@ -98,6 +102,7 @@ export class FigureSizeEditor extends localize(i18next)(LitElement) {
     const axes = followableAxes(asset, this.partId)
     const targets = asset.appearance.map(a => a.target).filter(p => p !== this.partId && followableAxes(asset, p).length)
     const uniform = asset.sizing === 'uniform'
+    this.toggleAttribute('named-axes', axes.some(axis => measureFactor(asset, this.partId, axis) === 2))
     return html`
       <div class="heading" aria-hidden="true">
         <span>${i18next.t('figure.label.size-axis')}</span><span>${i18next.t('figure.label.size-measure')}</span><span>${i18next.t('figure.label.size-follows')}</span><span>${i18next.t('figure.label.size-source')}</span><span></span>
@@ -116,7 +121,7 @@ export class FigureSizeEditor extends localize(i18next)(LitElement) {
         }
         const currentMode = mode === 'custom' ? 'ratio' : mode
         const input = sizeInputOf(asset, this.partId, axis)
-        const label = `${axis.toUpperCase()}${measureFactor(asset, this.partId, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`
+        const label = sizeAxisWord(asset, this.partId, axis, i18next.t('figure.label.size-diameter'))
         /* The selects show when asked for, or when what it follows is not what its fastening gives -- or nothing is. */
         const choosing = relation.variable && (this.choosing.has(key) || !sameSizeSource(source, suggested))
         const selectedSource = source ? (source.of === 'instance' ? '@figure' : source.part) : '@custom'

package/client/modeller/first-save.ts

@@ -11,6 +11,14 @@ export function typeOf(raw: string): string {
   return raw.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
 }
 
+/**
+ * The identifier as it is being typed: `typeOf`, but the hyphen just typed at the end stays, so the next word can follow
+ * it (tutorial 2026-11-11: `fork-agv` typed key by key came out `forkagv`). The save takes `typeOf` of it.
+ */
+export function typingTypeOf(raw: string): string {
+  return raw.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+/, '')
+}
+
 /**
  * Whether this name could be released, by the format's own rules (`type-not-identifier`, `type-is-placeholder`).
  * Saving under it is not blocked -- it can still change before release -- but the author hears it now.

package/client/modeller/focus-on-render.ts

@@ -0,0 +1,4 @@
+import { ref } from 'lit/directives/ref.js'
+
+/** A field opened by a press takes the keys at once, its value selected to be typed over. */
+export const focusOnRender = () => ref(el => el && requestAnimationFrame(() => (el as HTMLInputElement).select()))

package/client/modeller/pivot.ts

@@ -0,0 +1,76 @@
+import { compileFigureGraph } from '@hatiolab/figure-model'
+
+import type { Axis } from './links.js'
+import type { FigureRevision } from './revision.js'
+
+/*
+ * Where a turn's axis may be put by name: the part's top end, its middle, its bottom end. The motion form's 「축이
+ * 지나는 점」 is measured from the joint's origin along the joint's own axes, which a person cannot see -- in the
+ * humanoid lesson the shoulder was given Y 120 to lift the pivot "to the shoulder" when the origin already stood at the
+ * arm's top end (attached level with the torso's top), and the arm turned about a point 120 mm above it (tutorial run
+ * 2026-11-12). A named point is worked out here from the part as it rests, so the number is right whatever the face,
+ * the alignment or the gap.
+ */
+
+export type PivotPoint = 'top' | 'middle' | 'bottom'
+export const PIVOT_POINTS: readonly PivotPoint[] = ['top', 'middle', 'bottom']
+
+type Pose = { r: number[][]; t: number[] }
+type Faces = Partial<Record<'left' | 'right' | 'bottom' | 'top' | 'back' | 'front', { at: number }>>
+
+/**
+ * The `through` that puts a turn's axis through each named point of `part`, in the joint's frame: null when the part
+ * has no joint to another part, or its shape has no faces to measure. A distance along the turn's own axis (`along`)
+ * moves nothing and is left out: the shoulder's points read Y alone, not an X the person would wonder about.
+ */
+export function pivotPointsOf(revision: FigureRevision, part: string, along?: Axis): Record<PivotPoint, Partial<Record<Axis, number>>> | null {
+  const joint = revision.asset.joints?.find(j => j.body1.part === part)
+  if (!joint || !('part' in joint.body0)) return null
+  const faces = (revision.geometry.find(g => (g as { id: string }).id === part) as { shape?: { faces?: Faces } } | undefined)?.shape?.faces
+  const mid = (lo: keyof Faces, hi: keyof Faces) => (faces?.[lo] && faces?.[hi] ? (faces[lo]!.at + faces[hi]!.at) / 2 : undefined)
+  const [x, z] = [mid('left', 'right'), mid('back', 'front')]
+  if (x === undefined || z === undefined || !faces?.top || !faces?.bottom) return null
+  const pose = restingPoseOf(revision, part)
+  if (!pose) return null
+  /* The pose carries the part's own frame into the joint's: a point of the part, said in the joint's frame. */
+  const inJoint = (p: number[]): Partial<Record<Axis, number>> => {
+    const v = [0, 1, 2].map(i => pose.r[i]![0]! * p[0]! + pose.r[i]![1]! * p[1]! + pose.r[i]![2]! * p[2]! + pose.t[i]!)
+    const out: Partial<Record<Axis, number>> = {}
+    ;(['x', 'y', 'z'] as const).forEach((a, i) => {
+      const mm = Math.round(v[i]! * 10) / 10
+      if (a !== along && Math.abs(mm) >= 0.05) out[a] = mm
+    })
+    return out
+  }
+  return {
+    top: inJoint([x, faces.top.at, z]),
+    middle: inJoint([x, (faces.top.at + faces.bottom.at) / 2, z]),
+    bottom: inJoint([x, faces.bottom.at, z])
+  }
+}
+
+/** The part's pose in its joint's frame with every control at its default: the joint at rest, not as the sliders left it. */
+function restingPoseOf(revision: FigureRevision, part: string): Pose | null {
+  const m = revision.asset.document.model as unknown as { nodes: { id: string; outputs: Record<string, string> }[] }
+  const node = m.nodes.find(n => n.id === `${part}.pose`)
+  if (!node) return null
+  try {
+    const values = compileFigureGraph(m as never).evaluate({ ...revision.inputs, ...(revision.asset.stateDefaults ?? {}) }).values as Record<string, unknown>
+    const pose = values[Object.values(node.outputs)[0]!] as Pose | undefined
+    return pose?.r && pose?.t ? pose : null
+  } catch {
+    return null
+  }
+}
+
+/** Which named point a `through` is, when it is one: the form marks the button it matches. */
+export function pivotPointOf(
+  points: Record<PivotPoint, Partial<Record<Axis, number>>> | null,
+  through: Partial<Record<Axis, number>> | undefined,
+  along?: Axis
+): PivotPoint | undefined {
+  if (!points) return undefined
+  const same = (a: Partial<Record<Axis, number>>, b: Partial<Record<Axis, number>> = {}) =>
+    (['x', 'y', 'z'] as const).every(k => k === along || Math.abs((a[k] ?? 0) - (b[k] ?? 0)) < 0.5)
+  return PIVOT_POINTS.find(p => same(points[p], through))
+}

package/client/modeller/size-response.ts

@@ -13,6 +13,20 @@ function editOf(asset: FigureAsset, part: string, axis: Axis) {
 }
 export const measureFactor = (asset: FigureAsset, part: string, axis: Axis) => editOf(asset, part, axis)?.edit.k ?? 1
 
+/**
+ * A size row's name: the axis, and 「지름」 for a measure set by its radius. A round body's one diameter across sets the
+ * axis it has no row of its own for as well, and says so -- a sphere read 「X · 지름」 and 「Y · 지름」, and a person
+ * looked for its Z (tutorial run 2026-11-12); now 「X·Z · 지름」 across and 「Y · 지름」 up.
+ */
+export function sizeAxisWord(asset: FigureAsset, part: string, axis: Axis, diameter: string): string {
+  if (measureFactor(asset, part, axis) !== 2) return axis.toUpperCase()
+  const axes = followableAxes(asset, part)
+  const across = (['x', 'y', 'z'] as const).filter(a => !axes.includes(a))
+  const first = axes.find(a => measureFactor(asset, part, a) === 2)
+  const named = first === axis && across.length ? [axis, ...across].map(a => a.toUpperCase()).join('·') : axis.toUpperCase()
+  return `${named} · ${diameter}`
+}
+
 /** Only expose direct own inputs (including the canonical identity wrapper). Never overwrite an arbitrary expression. */
 export function sizeInputOf(asset: FigureAsset, part: string, axis: Axis): string | undefined {
   const e = editOf(asset, part, axis)

package/client/modeller/stage-model.ts

@@ -183,20 +183,64 @@ export function boardFor(parts: readonly FigureRenderPart[], at: Board & { depth
   return {
     width: Math.max(at.width, Math.ceil(reach('x') * 1.2), 200),
     height: Math.max(at.height, Math.ceil(reach('z') * 1.2), 200),
-    /* Only grows, as the plan does: a raised arm made the board taller than it was, and a new board lost the camera. */
-    depth: Math.max(at.depth ?? 0, Math.ceil(size.y * 1.1), 200)
+    /*
+      Only grows, as the plan does: a raised arm made the board taller than it was, and a new board lost the camera. The
+      height is reached from the floor, as width and depth are from the middle: a pelvis set 880 mm up stood as tall as
+      its own 180 mm, and the view never followed it up (review 2026-11-11).
+    */
+    depth: Math.max(at.depth ?? 0, Math.ceil(Math.max(size.y, box.isEmpty() ? 0 : Math.max(Math.abs(box.max.y), Math.abs(box.min.y))) * 1.1), 200)
   }
 }
 
+/** Where the figure's drawn parts reach, in mm: the box the view was last fitted round, or the one it has now. */
+export interface DrawnSpan {
+  min: [number, number, number]
+  max: [number, number, number]
+}
+
+export function drawnSpanOf(parts: readonly FigureRenderPart[]): DrawnSpan | undefined {
+  const box = new THREE.Box3()
+  for (const part of parts) {
+    const frame = frameOf(part)
+    if (!frame) continue
+    const half = frame.extent.clone().multiplyScalar(0.5)
+    for (const x of [-1, 1]) for (const y of [-1, 1]) for (const z of [-1, 1])
+      box.expandByPoint(new THREE.Vector3(x * half.x, y * half.y, z * half.z).add(frame.centre).applyMatrix4(frame.rotation).add(frame.origin))
+  }
+  return box.isEmpty() ? undefined : { min: box.min.toArray() as [number, number, number], max: box.max.toArray() as [number, number, number] }
+}
+
+/**
+ * Whether the figure now reaches past the box the view was fitted round, on any side, by more than a tenth of that box
+ * (review 2026-11-11: a thigh hung under a pelvis ran off the bottom of the view; the board's size alone, measured from
+ * the middle and the floor, had not changed enough to say so).
+ */
+export function outgrowsFit(fitted: DrawnSpan | undefined, now: DrawnSpan | undefined): boolean {
+  if (!fitted || !now) return false
+  return [0, 1, 2].some(i => {
+    const room = Math.max((fitted.max[i]! - fitted.min[i]!) * 0.1, 20)
+    return now.max[i]! > fitted.max[i]! + room || now.min[i]! < fitted.min[i]! - room
+  })
+}
+
+/** How far the figure may grow past its last fit before the view follows: inside the fit's own margin. */
+export const REFIT_GROWN = 1.1
+
 /**
  * Whether the figure's reach has changed so far since the view was last fitted that the camera should fit it again:
- * more than twice, or less than half, on any axis (first 15 minutes, 2026-10-16: a 100 mm box typed to 3000 × 800 × 600
- * put the camera inside it, and the author saw grey until pressing 「화면에 맞추기」). A drag that nudges a part does not
- * move the camera.
+ * grown past `REFIT_GROWN`, or shrunk below half, on any axis (first 15 minutes, 2026-10-16: a 100 mm box typed to
+ * 3000 × 800 × 600 put the camera inside it, and the author saw grey until pressing 「화면에 맞추기」). A drag that nudges
+ * a part within the board's rounding does not move the camera.
  */
+
 export function needsRefit(fitted: (Board & { depth: number }) | undefined, now: Board & { depth: number }): boolean {
   if (!fitted) return false
-  return (['width', 'height', 'depth'] as const).some(key => now[key] > fitted[key] * 2 || now[key] < fitted[key] / 2)
+  /*
+    Grown past the room the fit leaves round it (the fit's margin, 1.15) the figure runs off the view: a head added on a
+    body went out at the top, and the author pressed the fit after every part (review 2026-11-11). Shrunk, it is only
+    small in the view: fitted again at half.
+  */
+  return (['width', 'height', 'depth'] as const).some(key => now[key] > fitted[key] * REFIT_GROWN || now[key] < fitted[key] / 2)
 }
 
 /**

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

@@ -39,6 +39,7 @@ export declare class FigureCanvas extends LitElement {
     private board?;
     /** The figure's reach when the view was last fitted to it. */
     private fittedFor?;
+    private fittedSpan?;
     private refitTimer?;
     private standingFor?;
     private watcher?;

package/dist-client/modeller/canvas.js

@@ -3,7 +3,7 @@ import { LitElement, html, css, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { create, Model, niceGridStep } from '@hatiolab/things-scene';
 import { DEFAULT_VIEW, sceneLook, WORKBENCH } from '@things-factory/figure-viewer/dist-client/figure-view.js';
-import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit } from './stage-model.js';
+import { boardFor, changedKeys, componentOf, drawnSpanOf, gizmoResultOf, needsRefit, outgrowsFit } 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';
@@ -146,6 +146,7 @@ let FigureCanvas = 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?.();
     }
@@ -176,7 +177,7 @@ let FigureCanvas = class FigureCanvas extends LitElement {
             */
             clearTimeout(this.refitTimer);
             if (this.parts.length)
-                this.refitTimer = setTimeout(() => needsRefit(this.fittedFor, boardFor(this.parts)) && this.fit(), REFIT_SETTLE_MS);
+                this.refitTimer = setTimeout(() => (needsRefit(this.fittedFor, boardFor(this.parts)) || outgrowsFit(this.fittedSpan, drawnSpanOf(this.parts))) && this.fit(), REFIT_SETTLE_MS);
             return;
         }
         this.teardown();