@things-factory/figure-ui 10.1.114 → 10.1.116

package/client/graphql/index.ts

@@ -383,6 +383,11 @@ export async function inspectFigureDraft(source: string, id?: string): Promise<F
  * 전 초안은 서버가 모르므로 판정도 화면에서 한다 — 형식의 `contractChanges` 를 같이 쓴다.
  */
 export async function fetchReleasedSource(id: string): Promise<string | undefined> {
+  return (await fetchReleasedFigure(id))?.source
+}
+
+/** Read-only catalogue preview: source and version come from the same released snapshot. */
+export async function fetchReleasedFigure(id: string): Promise<{ version: number; source: string } | undefined> {
   const response = await client.query({
     query: gql`
       query FigureReleased($id: String!) {
@@ -396,7 +401,7 @@ export async function fetchReleasedSource(id: string): Promise<string | undefine
     fetchPolicy: 'network-only'
   })
 
-  return unwrap<{ source?: string }>(response, 'figureReleased')?.source ?? undefined
+  return unwrap<{ version: number; source: string } | undefined>(response, 'figureReleased') ?? undefined
 }
 
 export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {

package/client/modeller/canvas.ts

@@ -280,6 +280,12 @@ export class FigureCanvas extends LitElement {
     const root = layer?.root
     if (!layer || !root?.on || this.viewOnly) return
     root.on('selected', (after: unknown) => {
+      /*
+        A canvas taken off the screen disposes its scene, and the scene empties its selection as it goes. Told out,
+        that emptied the editor's choice whenever the middle turned to the preview (U03): the listener lit set on this
+        element hears it even after it left the page. A canvas not on the page has nothing to say about the choice.
+      */
+      if (!this.isConnected) return
       const name = (after as SceneComponent[] | undefined)?.[0]?.state?.name
       const id = typeof name === 'string' ? name : ''
       if (ownerOf(id) !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))

package/client/modeller/editor.ts

@@ -1807,8 +1807,9 @@ export class FigureEditor extends LitElement {
     }
   }
   /**
-   * A new figure's first question, on the canvas where the work will be (designer 2026-09-27, U04): a basic shape, a
-   * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
+   * A new figure's first question, on the canvas where the work will be (designer 2026-09-27, U04): a basic shape
+   * or an AI draft when the page offers one. Recipes require a host part and are reached from the parts panel after
+   * that part exists. Nothing is added until one is chosen; the type, the space, the
    * mounting face and the tags are not asked for first.
    */
   /** The section editor over the canvas, the figure behind it drawing what the working points make. */
@@ -1886,13 +1887,6 @@ export class FigureEditor extends LitElement {
           </div>
           <small>${i18next.t('figure.text.start-shape-more')}</small>
         </section>
-        <section>
-          <h3>${i18next.t('figure.label.start-recipe')}</h3>
-          <button start-button start-recipe ?disabled=${!this.templates.length} @click=${() => ((this.catalogOpen = true), (this.recipeError = ''))}>
-            ${i18next.t('figure.button.start-recipe')}
-          </button>
-          ${this.templates.length ? nothing : html`<small>${i18next.t('figure.text.start-no-recipes')}</small>`}
-        </section>
         ${this.aiDraft
           ? html`<section>
               <h3>${i18next.t('figure.label.start-ai')}</h3>
@@ -2046,6 +2040,7 @@ export class FigureEditor extends LitElement {
               .asset=${asset}
               .context=${view.context ?? ''}
               .view=${this.view}
+              .selected=${this.selected}
               @configure-size=${async (e: CustomEvent<{ part: string }>) => {
                 this.middle = 'edit'
                 this.selected = e.detail.part

package/client/modeller/figure-links.ts

@@ -864,8 +864,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           ${now.travel
             ? html`<small>${i18next.t('figure.label.motion-travel-is', { part: now.travel.part, axis: now.travel.axis.toUpperCase(), plus: now.travel.plus ?? 0 })}</small>`
             : nothing}
-          ${now.follows
-            ? html`<small>${i18next.t('figure.label.motion-follows', { joint: now.follows.joint, multiplier: now.follows.multiplier, offset: now.follows.offset ?? 0 })}</small>`
+          ${now.follows?.sum.length === 1
+            ? html`<small>${i18next.t('figure.label.motion-follows', { joint: now.follows.sum[0]!.joint, multiplier: now.follows.sum[0]!.multiplier, offset: now.follows.offset })}</small>`
+            : now.follows
+            ? html`<small>${i18next.t('figure.label.motion-follow')}: ${now.follows.sum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')} + ${now.follows.offset}</small>`
             : now.control
               ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>`
               : nothing}
@@ -912,7 +914,14 @@ 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>
-      ${leaders.length
+      ${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 })}>
@@ -921,7 +930,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             </select>
           </div>`
         : nothing}
-      ${follow
+      ${m.followSum
+        ? 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) })} />
@@ -932,7 +943,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             ${m.kind === 'slide'
               ? html`<span>${i18next.t('figure.label.motion-travel')}</span>
                   <select @change=${(e: Event) => (this.motion = { ...m, travel: (e.target as HTMLSelectElement).value })}>
-                    <option value="" ?selected=${!m.travel}>${i18next.t('figure.label.motion-travel-mm')}</option>
+                    ${m.travelSum
+                      ? html`<option value="" ?selected=${!m.travel}>${m.travelSum.sum.map(t => `${t.from.of === 'input' ? t.from.input : `${t.from.of === 'part' ? t.from.part : i18next.t('figure.label.motion-travel')} · ${t.from.axis.toUpperCase()}`}${t.times !== undefined && t.times !== 1 ? ` × ${t.times}` : ''}`).join(' + ')}</option>`
+                      : html`<option value="" ?selected=${!m.travel}>${i18next.t('figure.label.motion-travel-mm')}</option>`}
                     ${asset.appearance
                       .map(look => look.target)
                       .filter(one => canFollow(asset, one))
@@ -945,7 +958,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               : nothing}
             <span>${i18next.t('figure.label.control-id')}</span>
             <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
-            ${m.kind === 'continuous' || (m.kind === 'slide' && m.travel)
+            ${m.kind === 'continuous' || (m.kind === 'slide' && (m.travel || m.travelSum))
               ? nothing
               : html`<span>${i18next.t('figure.label.control-range')} (${unit})</span>
                   <div pair>
@@ -955,7 +968,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           </div>`}
       <button
         act
-        ?disabled=${this.locked || (follow ? !(Number.isFinite(m.multiplier) && m.multiplier !== 0) : m.kind !== 'continuous' && !(m.kind === 'slide' && m.travel) && !(m.max > m.min && m.min <= 0 && 0 <= m.max))}
+        ?disabled=${this.locked || (m.followSum ? false : follow ? !(Number.isFinite(m.multiplier) && m.multiplier !== 0) : m.kind !== 'continuous' && !(m.kind === 'slide' && (m.travel || m.travelSum)) && !(m.max > m.min && m.min <= 0 && 0 <= m.max))}
         title=${!follow && m.kind !== 'continuous' && !(m.min <= 0 && 0 <= m.max) ? i18next.t('figure.text.joint-range-holds-zero') : ''}
         @click=${() => {
           this.command({ kind: 'set-joint', joint: motionJoint(joint, { ...m, follow }, this.partId) })

package/client/modeller/figure-preview.ts

@@ -8,7 +8,7 @@ import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene
 
 import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
 import { dialShape } from './angle-dial.js'
-import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances } from './preview-model.js'
+import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, setupPartOf } from './preview-model.js'
 
 /**
  * The figure placed on a board.
@@ -52,7 +52,25 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       width: 100%;
       height: 100%;
     }
-    div[setup] { position: absolute; bottom: 8px; left: 8px; max-width: min(320px, calc(100% - 16px)); padding: 12px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: grid; gap: 8px; }
+    /*
+      The size help and the posing controls share the stage's bottom edge. Each stood in its own corner, so on a narrow
+      stage (the 1024 width, both side panels open) the controls lay over the help's button. One row that wraps keeps both
+      whole: side by side when there is room, the controls above the help when there is not.
+    */
+    div[foot] {
+      position: absolute;
+      left: 8px;
+      right: 8px;
+      bottom: 8px;
+      display: flex;
+      flex-wrap: wrap-reverse;
+      justify-content: space-between;
+      align-items: flex-end;
+      gap: 8px;
+      pointer-events: none;
+    }
+    div[foot] > * { pointer-events: auto; }
+    div[setup] { max-width: min(320px, 100%); padding: 12px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: grid; gap: 8px; }
     div[setup] p { margin: 0; line-height: 1.5; }
     div[setup] select, div[setup] button { font: inherit; padding: 8px; min-width: 0; }
     /* Which is which: side by side means nothing without a legend. */
@@ -76,9 +94,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       color: #ffcc80;
     }
     div[clips] {
-      position: absolute;
-      right: 8px;
-      bottom: 8px;
+      margin-left: auto;
       display: flex;
       flex-direction: column;
       gap: 6px;
@@ -162,6 +178,8 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   /** Clip speeds and control values given here -- the preview's, not the figure's. */
   @state() private driving: Record<string, number> = {}
   @state() private giving: Record<string, number> = {}
+  /** The part chosen in the editor. The size help starts on it, so the help speaks of the part the author was working on. */
+  @property() selected = ''
   @state() private setupPart = ''
 
   /** What is being tried here now -- clip speeds and control values -- for the AI dock to hear with a request; none when nothing is. */
@@ -186,6 +204,8 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     } catch {
       clampsByWay = {}
     }
+    /* The part the help speaks of: the one picked in it, else the one chosen in the editor, else the first. */
+    const setupPart = setupPartOf(this.setupPart, this.selected, asset?.appearance.map(p => p.target) ?? [])
     return html`<div stage></div>
       ${this.cannot
         ? html`<div cannot>${this.cannot}</div>`
@@ -200,14 +220,14 @@ export class FigurePreview extends localize(i18next)(LitElement) {
                 </span>`
               })}
             </div>
-            ${asset?.appearance.length ? html`<div setup>
+            <div foot>${asset?.appearance.length ? html`<div setup>
               <p>${i18next.t('figure.text.preview-setup')}</p>
               <select aria-label=${i18next.t('figure.label.resize-part')} @change=${(e: Event) => this.setupPart = (e.target as HTMLSelectElement).value}>
-                ${asset.appearance.map(p => html`<option value=${p.target} ?selected=${p.target === this.setupPart}>${p.target}</option>`)}
+                ${asset.appearance.map(p => html`<option value=${p.target} ?selected=${p.target === setupPart}>${p.target}</option>`)}
               </select>
-              <button @click=${() => this.dispatchEvent(new CustomEvent('configure-size', { detail: { part: asset.appearance.some(p => p.target === this.setupPart) ? this.setupPart : asset.appearance[0]!.target }, bubbles: true, composed: true }))}>${i18next.t('figure.button.configure-size')}</button>
+              <button @click=${() => this.dispatchEvent(new CustomEvent('configure-size', { detail: { part: setupPart }, bubbles: true, composed: true }))}>${i18next.t('figure.button.configure-size')}</button>
             </div>` : nothing}
-            ${controls.length + clips.length ? this.renderDrivers(asset!, controls, clips) : nothing}`}`
+            ${controls.length + clips.length ? this.renderDrivers(asset!, controls, clips) : nothing}</div>`}`
   }
 
   private renderDrivers(asset: FigureAsset, controls: FigureAsset['document']['model']['inputs'], clips: string[]) {
@@ -237,7 +257,11 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         </label>`
       })}
       ${clips.map(clip => {
-        const value = this.driving[clip] ?? 1
+        /*
+          A clip nothing has driven stands still, here as on a board: the instances get a speed only from `drive`. The
+          slider showed 1.00 over rollers that did not turn (2026-10-03). It shows what plays -- 0 until moved.
+        */
+        const value = this.driving[clip] ?? 0
         return html`<label>
           <span>${clip} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>
           <span></span>

package/client/modeller/joint-drag.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { compileFigureAsset } from '@hatiolab/figure-model'
+import { compileFigureAsset, figureMimicTermsOf } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureJoint } from '@hatiolab/figure-model'
 
 import type { GizmoResult } from './gizmo.js'
@@ -56,7 +56,7 @@ export function jointDragOf(asset: FigureAsset, id: string, part: FigureRenderPa
 
   if (result.rotation) {
     if (!turns) return { kind: 'refused', reason: j.type === 'prismatic' ? 'turned-slide' : 'fixed-turn', joint: j.id }
-    if (j.mimic) return { kind: 'refused', reason: 'mimic', joint: j.id, leader: j.mimic.joint }
+    if (j.mimic) return { kind: 'refused', reason: 'mimic', joint: j.id, leader: figureMimicTermsOf(j.mimic)!.sum.map(t => t.joint).join(', ') }
     /* The turn about the joint's axis (the twist of the change): the only turn the joint can make. */
     const before = new THREE.Quaternion().setFromRotationMatrix(matrixOf(part.pose.r as number[][]))
     const after = new THREE.Quaternion().setFromRotationMatrix(eulerMatrix(result.rotation))
@@ -77,7 +77,7 @@ export function jointDragOf(asset: FigureAsset, id: string, part: FigureRenderPa
   const frame = jointFrameRotation(j, part, turns ? now : 0)
 
   if (j.type === 'prismatic') {
-    if (j.mimic) return { kind: 'refused', reason: 'mimic', joint: j.id, leader: j.mimic.joint }
+    if (j.mimic) return { kind: 'refused', reason: 'mimic', joint: j.id, leader: figureMimicTermsOf(j.mimic)!.sum.map(t => t.joint).join(', ') }
     /* How far one unit of the value moves the part along its axis, measured on the figure itself (a ratio travels a length). */
     const along = unit(j.axis!).applyMatrix4(frame).normalize()
     const at = (v: number) => {

package/client/modeller/links.ts

@@ -1,4 +1,4 @@
-import { FIGURE_FACES, figureShapeFaces, figurePartsExtentOf, compileFigureAsset, compileFigureGraph, figureFollowOf, proposeFigureProportion, defaultInstanceSizeRange, foldInstanceSizeRange, figureAttachmentsOf, figureBindingsOf, figureInstanceSizeLimitsOf, figureFollowableAxesOf, figureShapeProviderOf } from '@hatiolab/figure-model'
+import { FIGURE_FACES, figureShapeFaces, figurePartsExtentOf, compileFigureAsset, compileFigureGraph, figureFollowOf, proposeFigureProportion, defaultInstanceSizeRange, foldInstanceSizeRange, figureAttachmentsOf, figureBindingsOf, figureInstanceSizeLimitsOf, figureFollowableAxesOf, figureShapeProviderOf, figureMimicTermsOf } from '@hatiolab/figure-model'
 import type { FigureFollow, FigureSizeRange } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureBindingPlace, FigureFace, FigureJoint } from '@hatiolab/figure-model'
 import { startingShapeKindOf } from './starting-shape.js'
@@ -458,7 +458,8 @@ export interface Motion {
   axis: Axis | '?'
   control?: { id: string; unit?: string; min?: number; max?: number }
   /** A joint that moves with another (URDF's mimic): the leader's value times `multiplier`, plus `offset`. */
-  follows?: { joint: string; multiplier: number; offset?: number }
+  /** What it follows, as a sum of leaders each with its multiplier, plus an offset (one leader is a sum of one). */
+  follows?: { sum: Array<{ joint: string; multiplier: number }>; offset: number }
   /** A slide whose distance is a part's length (plus a difference): the control is its share. */
   travel?: { part: string; axis: string; plus?: number }
 }
@@ -487,8 +488,9 @@ export function motionOf(asset: FigureAsset, part: string): Motion | undefined {
     }
     return undefined
   }
-  const travel = record?.travel?.source && 'part' in record.travel.source ? { part: record.travel.source.part, axis: record.travel.source.axis, ...(record.travel.plus ? { plus: record.travel.plus } : {}) } : undefined
-  return { kind, axis, control: control(quantity), ...(record?.mimic ? { follows: record.mimic } : {}), ...(travel ? { travel } : {}) }
+  const one = record?.travel && 'source' in record.travel ? record.travel : undefined
+  const travel = one?.source && 'part' in one.source ? { part: one.source.part, axis: one.source.axis, ...(one.plus ? { plus: one.plus } : {}) } : undefined
+  return { kind, axis, control: control(quantity), ...(record?.mimic ? { follows: figureMimicTermsOf(record.mimic)! } : {}), ...(travel ? { travel } : {}) }
 }
 
 /** What the motion form holds: how the part moves, and either its own control or the joint it moves with. */
@@ -508,6 +510,13 @@ export interface MotionForm {
    */
   travel?: string
   travelPlus?: number
+  /**
+   * Kept as they are and not edited here: a follower of several leaders (`{ sum, offset }`, the offset still in
+   * `offset`) and a stroke that is a sum of lengths. The form says them and writes them back unchanged, so saving
+   * a range or an axis does not turn a follower into a joint of its own or drop its stroke.
+   */
+  followSum?: Array<{ joint: string; multiplier: number }>
+  travelSum?: Extract<NonNullable<FigureJoint['travel']>, { sum: unknown }>
 }
 
 /**
@@ -517,18 +526,24 @@ export interface MotionForm {
  */
 export function motionFormOf(joint: FigureJoint): MotionForm {
   const kind: MotionForm['kind'] = joint.type === 'prismatic' ? 'slide' : joint.lowerLimit === undefined && joint.upperLimit === undefined && !joint.mimic ? 'continuous' : 'turn'
-  const travel = joint.travel?.source && 'part' in joint.travel.source ? `${joint.travel.source.part}:${joint.travel.source.axis}` : ''
+  const one = joint.travel && 'source' in joint.travel ? joint.travel : undefined
+  const travel = one?.source && 'part' in one.source ? `${one.source.part}:${one.source.axis}` : ''
+  const travelSum = joint.travel && 'sum' in joint.travel ? joint.travel : undefined
+  const terms = figureMimicTermsOf(joint.mimic)
+  const single = terms?.sum.length === 1 ? terms.sum[0] : undefined
   return {
     kind,
     axis: (joint.axis ?? 'X').toLowerCase() as Axis,
     id: joint.state?.id ?? '',
-    min: travel ? 0 : (joint.lowerLimit ?? (kind === 'slide' ? 0 : -90)),
-    max: travel ? 500 : (joint.upperLimit ?? (kind === 'slide' ? 500 : 90)),
-    follow: joint.mimic?.joint ?? '',
-    multiplier: joint.mimic?.multiplier ?? 1,
-    offset: joint.mimic?.offset ?? 0,
+    min: travel || travelSum ? 0 : (joint.lowerLimit ?? (kind === 'slide' ? 0 : -90)),
+    max: travel || travelSum ? 500 : (joint.upperLimit ?? (kind === 'slide' ? 500 : 90)),
+    follow: single?.joint ?? '',
+    multiplier: single?.multiplier ?? 1,
+    offset: terms?.offset ?? 0,
     travel,
-    travelPlus: joint.travel?.plus ?? 0
+    travelPlus: one?.plus ?? 0,
+    ...(terms && !single ? { followSum: terms.sum } : {}),
+    ...(travelSum ? { travelSum } : {})
   }
 }
 
@@ -557,6 +572,8 @@ export function motionJoint(joint: FigureJoint, m: MotionForm, part: string): Fi
     axis: m.axis.toUpperCase() as 'X' | 'Y' | 'Z'
   }
   if (m.follow) return { ...moving, mimic: { joint: m.follow, multiplier: m.multiplier, ...(m.offset ? { offset: m.offset } : {}) } }
+  if (m.followSum) return { ...moving, mimic: { sum: m.followSum, ...(m.offset ? { offset: m.offset } : {}) } }
+  if (m.kind === 'slide' && m.travelSum && !m.travel) return { ...moving, travel: m.travelSum, state: { id: m.id || `${part}-${m.kind}` } }
   if (m.kind === 'slide' && m.travel) {
     const [of, axis] = m.travel.split(':')
     return { ...moving, travel: { source: { of: 'part', part: of!, axis: axis as Axis }, ...(m.travelPlus ? { plus: m.travelPlus } : {}) }, state: { id: m.id || `${part}-${m.kind}` } }

package/client/modeller/preview-model.ts

@@ -74,3 +74,11 @@ export function previewClampsOf(asset: FigureAsset, size: { x: number; y: number
     ])
   )
 }
+
+/**
+ * The part the preview's size help speaks of: the one picked in the help, else the one chosen in the editor, else the
+ * first that has a size rule. A choice that is not among the parts (removed, or a part with no rule) is passed over.
+ */
+export function setupPartOf(picked: string, chosen: string, targets: string[]): string {
+  return [picked, chosen].find(id => !!id && targets.includes(id)) ?? targets[0] ?? ''
+}

package/client/modeller/recipes.ts

@@ -39,7 +39,7 @@ export function recipeWorkings(recipe: FigureRecipe): Array<{ key: string; words
   for (const m of d.moves)
     lines.push(
       m.follows
-        ? { key: 'figure.text.recipe-moves-with', words: { part: recipePartName(m.part), leader: recipePartName(m.follows) } }
+        ? { key: 'figure.text.recipe-moves-with', words: { part: recipePartName(m.part), leader: recipeLeaders(m.follows).map(recipePartName).join(', ') } }
         : { key: m.kind === 'slide' ? 'figure.text.recipe-slides' : 'figure.text.recipe-turns', words: { part: recipePartName(m.part) } }
     )
   if (d.controls.length) lines.push({ key: 'figure.text.recipe-controls', words: { count: d.controls.length } })
@@ -48,6 +48,11 @@ export function recipeWorkings(recipe: FigureRecipe): Array<{ key: string; words
   return lines
 }
 
+/** Released kernels return one leader; newer kernels can return an affine sum. */
+function recipeLeaders(follows: string | { sum: Array<{ joint: string }> }): string[] {
+  return typeof follows === 'string' ? [follows] : follows.sum.map(term => term.joint)
+}
+
 /** A recipe's words in the language on screen: that language, else English, else the first it has. */
 export function recipeWord(words: Record<string, string> | undefined, language: string): string {
   if (!words) return ''

package/client/pages/figure-list-page.ts

@@ -16,6 +16,7 @@ import { capacityFrom } from '../modeller/scene-budget.js'
 import { deleteFigure, fetchFigureList } from '../graphql/index.js'
 import type { Figure } from '../types.js'
 import { modellerPathOf } from '../modeller/modeller-route.js'
+import { openFigureDetail } from '../viewparts/figure-detail-dock.js'
 
 /**
  * 이 값 아래면 점수를 색으로 눈에 띄게 한다.
@@ -62,9 +63,8 @@ const FigureListPageBase = p13n(localize(i18next)(PageView))
 /**
  * Figure 카탈로그.
  *
- * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다. 카드에는
- * **고를 때 쓰는 것만** 싣는다 — 그림과 이름, 그리고 아직 초안이라는 것. 배치 한도·성숙도·삼각형
- * 수는 고른 뒤에 따지는 값이라 표 모드의 칸으로 남기고 저작면에서 본다.
+ * 카드를 고르면 상세 패널에서 저장본과 발행판을 살펴본다. 크기와 움직임을 시험한 뒤
+ * 「편집 화면 열기」로 저작면에 들어간다. 목록 질의는 자산 원본을 싣지 않는다.
  *
  * ## 왜 손으로 만든 카드가 아니라 격자인가
  *
@@ -531,7 +531,7 @@ export class FigureListPage extends FigureListPageBase {
         handlers: {
           click: (_columns: any, _data: any, _column: any, record: Figure) => {
             if (record?.id) {
-              this.openModeller(record)
+              openFigureDetail(record)
             }
           }
         }

package/client/pages/figure-modeller-page.ts

@@ -472,8 +472,14 @@ export class FigureModellerPage extends PageView {
     return answer
   }
   get context() {
+    const view = this.session.read()
     return {
-      title: this.session.read().name ?? 'Figure',
+      title: view.name ?? 'Figure',
+      /*
+        A figure that has an id was opened from the catalog (or saved there), so the rail marks the catalog. Without this
+        the rail matches the page name and marks "new figure" while an existing one is being edited.
+      */
+      menu: view.id ? 'figure-list' : undefined,
       actions: [],
       /*
         No heading line: the canvas is what this page is for, and the name is already in the properties' first section

package/client/types.ts

@@ -2,7 +2,7 @@
  * 화면이 다루는 모양. 도형 자산의 타입은 `@hatiolab/figure-model` 이 정한다 — 여기서 다시 적지 않는다.
  */
 
-/** 서버가 돌려주는 Figure 한 벌. `source` 는 저작면에서만 받는다. */
+/** 서버가 돌려주는 Figure 한 벌. `source` 는 상세 또는 저작면을 열 때만 받는다. */
 export interface Figure {
   id: string
   /** 컴포넌트 타입 이름. **만든 뒤에 고칠 수 없다.** */

package/client/viewparts/detail-motion.ts

@@ -0,0 +1,11 @@
+import type { FigureAsset } from '@hatiolab/figure-model'
+
+/** External values win over drivers; release only the controls owned by the chosen clip. */
+export function parametersForClip(asset: FigureAsset, values: Record<string, number>, clip: string) {
+  const driven = new Set((asset.drivers ?? []).filter(d => d.clip === clip).map(d => d.state))
+  return Object.fromEntries(Object.entries(values).filter(([id]) => !driven.has(id)))
+}
+
+export function clipForControl(asset: FigureAsset, id: string) {
+  return asset.drivers?.find(d => d.state === id)?.clip
+}

package/client/viewparts/figure-asset-viewer.ts

@@ -0,0 +1,177 @@
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { i18next, localize } from '@operato/i18n'
+import { compileFigureAsset, FIGURE_INSTANCE_SIZE_INPUTS, type FigureAsset } from '@hatiolab/figure-model'
+import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
+import { authoredSizeOf } from '../modeller/preview-model.js'
+import { controlsOf } from '../modeller/controls.js'
+import { DEFAULT_VIEW, previewBoardDepth, sceneLook } from '../modeller/figure-view.js'
+import { clipForControl, parametersForClip } from './detail-motion.js'
+
+type Axis = 'x' | 'y' | 'z'
+interface Scene {
+  dispose?(): void
+  resize?(): void
+  fit?(type?: string): void
+  root?: {
+    fitCameraToModel?(): void
+    components?: Array<{ set(key: string, value: unknown): void }>
+  }
+}
+
+/** A single board instance. Sizes and poses are transient, and never change the asset or call a mutation. */
+@customElement('figure-asset-viewer')
+export class FigureAssetViewer extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host { display: block; min-width: 0; }
+    [viewport] { height: 300px; position: relative; background: #858585; }
+    [stage] { position: absolute; inset: 0; width: 100%; height: 100%; }
+    section { padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
+    h3 { margin: 0 0 10px; font-size: var(--ui-t-body, 13px); }
+    label { display: grid; grid-template-columns: 72px minmax(0, 1fr) 90px; align-items: center; gap: 8px; margin: 8px 0; }
+    input { min-width: 0; width: 100%; box-sizing: border-box; }
+    input[type=number] { padding: 6px; }
+    input, button { font: inherit; color: inherit; }
+    button { padding: 8px 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 8px; background: var(--md-sys-color-surface); cursor: pointer; }
+    [clips] { display: flex; flex-wrap: wrap; gap: 8px; }
+    p { font-size: 12px; line-height: 1.5; }
+    [error] { color: var(--md-sys-color-error); }
+  `
+  @property({ attribute: false }) asset?: FigureAsset
+  @query('[stage]') private stage!: HTMLElement
+  @state() private sizes: Record<Axis, number> = { x: 1, y: 1, z: 1 }
+  @state() private values: Record<string, number> = {}
+  @state() private playing = ''
+  @state() private error = ''
+  private scene?: Scene
+  private registered?: string
+  private observer?: ResizeObserver
+  private needsScene = false
+  private played = new Set<string>()
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.needsScene = true
+    if (this.hasUpdated) this.observer?.observe(this.stage)
+    this.requestUpdate()
+  }
+
+  protected updated(changed: PropertyValues) {
+    // Reconnection and a new asset can arrive in the same update. Build exactly once.
+    if (changed.has('asset') || this.needsScene) {
+      this.needsScene = false
+      this.standUp()
+    }
+  }
+  firstUpdated() {
+    this.observer = new ResizeObserver(() => this.scene?.resize?.())
+    this.observer.observe(this.stage)
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.observer?.disconnect()
+    this.teardown()
+  }
+
+  render() {
+    const asset = this.asset
+    return html`<div viewport><div stage></div></div>
+      ${this.error ? html`<p error role="alert">${this.error}</p>` : nothing}
+      ${asset ? html`<section>
+        <h3>${i18next.t('figure.label.detail-size')}</h3>
+        ${(['x', 'y', 'z'] as const).map(axis => {
+          const input = asset.document.model.inputs.find(input => input.id === FIGURE_INSTANCE_SIZE_INPUTS[axis])
+          return html`<label><span>${axis.toUpperCase()} · mm</span>
+            <input type="range" aria-label=${`${axis.toUpperCase()} mm`} min=${input?.min ?? this.sizes[axis]} max=${input?.max ?? this.sizes[axis]} step="any"
+              .value=${String(this.sizes[axis])} ?disabled=${!input || input.min === input.max}
+              @input=${(e: Event) => this.resize(axis, (e.target as HTMLInputElement).valueAsNumber)}>
+            <input type="number" aria-label=${`${axis.toUpperCase()} mm value`} min=${input?.min ?? this.sizes[axis]} max=${input?.max ?? this.sizes[axis]} step="any"
+              .value=${String(this.sizes[axis])} ?disabled=${!input || input.min === input.max}
+              @change=${(e: Event) => this.resize(axis, (e.target as HTMLInputElement).valueAsNumber)}>
+          </label>`
+        })}
+        <button @click=${() => this.reset()}>${i18next.t('figure.button.detail-reset')}</button>
+        <p>${i18next.t('figure.text.detail-transient')}</p>
+      </section>
+      <section><h3>${i18next.t('figure.label.motion')}</h3>
+        ${controlsOf(asset, this.values).map(c => html`<label><span>${c.label} · ${c.unit}</span>
+          <input type="range" aria-label=${c.label} min=${c.min} max=${c.max} step=${c.step || 'any'} .value=${String(c.value)}
+            ?disabled=${!!this.playing && clipForControl(asset, c.id) === this.playing}
+            @input=${(e: Event) => this.pose(c.id, (e.target as HTMLInputElement).valueAsNumber)}>
+          <output>${this.playing && clipForControl(asset, c.id) === this.playing ? i18next.t('figure.text.detail-playing')
+            : this.played.has(clipForControl(asset, c.id) ?? '') && !(c.id in this.values) ? i18next.t('figure.text.detail-paused') : Math.round(c.value * 100) / 100}</output></label>`)}
+        <div clips>${[...new Set((asset.drivers ?? []).map(d => d.clip))].map(name => html`<button aria-pressed=${String(this.playing === name)}
+          @click=${() => this.play(name)}>${this.playing === name ? '⏸' : '▶'} ${name}</button>`)}</div>
+        ${!controlsOf(asset).length && ![...new Set((asset.drivers ?? []).map(d => d.clip))].length ? html`<p>${i18next.t('figure.text.detail-no-motion')}</p>` : nothing}
+      </section>` : nothing}`
+  }
+
+  private tell(key: string, value: unknown) {
+    this.scene?.root?.components?.[0]?.set(key, value)
+  }
+  private resize(axis: Axis, value: number) {
+    const input = this.asset?.document.model.inputs.find(input => input.id === FIGURE_INSTANCE_SIZE_INPUTS[axis])
+    if (!input || !Number.isFinite(value)) { this.requestUpdate(); return }
+    const used = Math.min(input.max, Math.max(input.min, value))
+    this.sizes = { ...this.sizes, [axis]: used }
+    this.tell(axis === 'x' ? 'width' : axis === 'y' ? 'depth' : 'height', used)
+    this.scene?.root?.fitCameraToModel?.()
+  }
+  private pose(id: string, value: number) {
+    if (!Number.isFinite(value)) return
+    this.values = { ...this.values, [id]: value }
+    this.tell('parameters', this.values)
+  }
+  private play(name: string) {
+    this.playing = this.playing === name ? '' : name
+    if (this.playing && this.asset) {
+      this.played.add(name)
+      this.values = parametersForClip(this.asset, this.values, name)
+      this.tell('parameters', this.values)
+    }
+    this.tell('clips', Object.fromEntries([...new Set((this.asset?.drivers ?? []).map(d => d.clip))].map(key => [key, key === this.playing ? 1 : 0])))
+  }
+  private reset() {
+    if (!this.asset) return
+    // A new instance also resets driver clocks. Clearing speeds alone freezes the last pose.
+    this.standUp()
+  }
+  private standUp() {
+    this.teardown()
+    this.error = ''
+    const asset = this.asset
+    if (!asset) return
+    this.values = {}
+    this.playing = ''
+    this.played.clear()
+    try {
+      compileFigureAsset(asset)
+      if (!asset.appearance.length) throw Error(i18next.t('figure.text.preview-needs-a-part'))
+      this.sizes = authoredSizeOf(asset)
+      const type = `figure-detail-${crypto.randomUUID()}`
+      registerFigure(type, asset)
+      this.registered = type
+      const size = this.sizes
+      this.scene = create({ target: this.stage, mode: 0, model: {
+        type: 'model-layer', width: size.x * 2, height: size.z * 2,
+        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, DEFAULT_VIEW.ceilingHeight, 1),
+        threed: true, sky: 'color', ...sceneLook(DEFAULT_VIEW),
+        placement: DEFAULT_VIEW.placement, heights: { floor: 0, ceiling: DEFAULT_VIEW.ceilingHeight },
+        pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+        components: [{ type, id: 'detail-instance', left: size.x / 2, top: size.z / 2, width: size.x, height: size.z, depth: size.y }]
+      } }) as Scene
+      this.scene.resize?.()
+      this.scene.fit?.('ratio')
+      this.scene.root?.fitCameraToModel?.()
+    } catch (error) {
+      this.error = (error as Error).message
+      this.teardown()
+    }
+  }
+  private teardown() {
+    this.scene?.dispose?.()
+    this.scene = undefined
+    if (this.registered) unregisterFigure(this.registered)
+    this.registered = undefined
+  }
+}