@things-factory/figure-ui 10.1.16 → 10.1.18

package/client/modeller/figure-animations.ts

@@ -5,10 +5,10 @@ import { live } from 'lit/directives/live.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
-import { AXES, CHANNEL_PATHS, CLIP_DRIVES, INTERPOLATIONS, LIMITS } from '@hatiolab/figure-model'
+import { AXES, CHANNEL_PATHS, INTERPOLATIONS, LIMITS } from '@hatiolab/figure-model'
 import type { ChannelPath, Vec3 } from '@hatiolab/figure-model'
 
-import type { BoardModel, PartModel } from './figure-source.js'
+import type { FigureDraft, PartModel } from './figure-source.js'
 
 /**
  * 이 도형이 **어떻게 움직이는가.**
@@ -30,32 +30,73 @@ import type { BoardModel, PartModel } from './figure-source.js'
  *
  * ## 트윈은 타임라인을 재생하지 않는다
  *
- * 「문 열기 clip 을 재생하라」가 아니라 **「지금 40% 열려 있다」**다. 그래서 clip 마다 그 값을
- * 어떻게 받을지(`drive`)를 저작 시점에 정한다 — 도는 롤러는 배속을 받고, 열린 문은 0~1 위치를
- * 받는다. 이 선택이 화면에서 가장 설명이 필요한 자리다.
+ * 「문 열기 clip 을 재생하라」가 아니라 **「지금 40% 열려 있다」**다. 그 둘은 다른 것이라
+ * 이 탭도 둘로 나뉜다.
+ *
+ *   애니메이션   시각이 흐른다. 인스턴스가 주는 수는 배속이다 — 도는 롤러
+ *   파라미터     값이 자세를 만든다. 인스턴스가 주는 수는 물리량이다 — 1200mm 내려온 호이스트
+ *
+ * 한동안 뒤엣것이 애니메이션 안에 `drive: 'hold'` 로 숨어 있었다. 형식의 판단은 맞았는데
+ * **자리와 이름이 틀려서**, 「길이값을 변수로 노출하라」는 요청에 저작자도 AI 도 이것을
+ * 못 찾았다 — 애니메이션 칸에 있을 거라고 생각하지 않는다(ADR-0051).
  */
 
-type Clip = NonNullable<BoardModel['animations']>[number]
+type Clip = NonNullable<FigureDraft['animations']>[number]
+type Parameter = NonNullable<FigureDraft['parameters']>[number]
 type Channel = Clip['channels'][number]
 type Keyframe = Channel['keys'][number]
 
-/** A first-success motion: intent first, raw clip/channel editing second. */
+/** 어느 목록의 몇째인가. 채널·키 편집기가 둘을 함께 쓴다. */
+type MotionKind = 'clip' | 'parameter'
+
+/** A first-success motion: intent first, raw channel editing second. */
 interface MotionRecipe {
   id: 'conveyor' | 'gate' | 'pusher' | 'lift'
   name: string
-  drive: Clip['drive']
+  kind: MotionKind
   path: ChannelPath
   end: Vec3
   pivot?: Vec3
+  /** 파라미터 레시피만. 인스턴스가 주고받는 물리량이다. */
+  range?: Parameter['range']
 }
 
+/*
+  레시피의 `end` 가 곧 그 범위의 끝 자세다 — 리프트가 100mm 올라가는 곡선이면 범위도
+  0~100mm 다. 둘이 어긋나면 저작자가 1200 을 주고도 100 만 올라가는 것을 보게 된다.
+*/
 const MOTION_RECIPES: readonly MotionRecipe[] = [
-  { id: 'conveyor', name: 'conveyor-running', drive: 'loop', path: 'rotation', end: { x: 360, y: 0, z: 0 } },
-  { id: 'gate', name: 'gate-open', drive: 'hold', path: 'rotation', end: { x: 0, y: 90, z: 0 }, pivot: { x: 0, y: 0, z: 0 } },
-  { id: 'pusher', name: 'pusher-position', drive: 'hold', path: 'translation', end: { x: 100, y: 0, z: 0 } },
-  { id: 'lift', name: 'lift-height', drive: 'hold', path: 'translation', end: { x: 0, y: 100, z: 0 } }
+  { id: 'conveyor', name: 'conveyor-running', kind: 'clip', path: 'rotation', end: { x: 360, y: 0, z: 0 } },
+  {
+    id: 'gate',
+    name: 'gate-open',
+    kind: 'parameter',
+    path: 'rotation',
+    end: { x: 0, y: 90, z: 0 },
+    pivot: { x: 0, y: 0, z: 0 },
+    range: { unit: '%', min: 0, max: 100 }
+  },
+  {
+    id: 'pusher',
+    name: 'pusher-position',
+    kind: 'parameter',
+    path: 'translation',
+    end: { x: 100, y: 0, z: 0 },
+    range: { unit: 'mm', min: 0, max: 100 }
+  },
+  {
+    id: 'lift',
+    name: 'lift-height',
+    kind: 'parameter',
+    path: 'translation',
+    end: { x: 0, y: 100, z: 0 },
+    range: { unit: 'mm', min: 0, max: 100 }
+  }
 ]
 
+/** 새 파라미터의 범위. 단위는 저작자가 고쳐 쓴다 — 형식은 단위를 해석하지 않는다. */
+const NEW_RANGE: Parameter['range'] = { unit: 'mm', min: 0, max: 1000 }
+
 /** 새 clip 의 키 둘. **하나로 만들지 않는다** — 키 하나는 움직임이 아니라 자세다. */
 const NEW_KEYS: Keyframe[] = [
   { at: 0, value: { x: 0, y: 0, z: 0 } },
@@ -71,19 +112,16 @@ function keysFor(path: ChannelPath): Keyframe[] {
   return NEW_KEYS.map(key => ({ at: key.at, value: startValue(path) }))
 }
 
-/** 이미 쓴 이름을 비켜 간다. `type` 처럼 저장되는 식별자는 아니지만 인스턴스가 이 이름으로 구동한다. */
-function freeName(taken: readonly Clip[]): string {
-  const used = new Set(taken.map(clip => clip.name))
-  for (let n = 1; ; n++) {
-    const name = `clip-${n}`
-    if (!used.has(name)) return name
-  }
-}
-
-function freeRecipeName(taken: readonly Clip[], base: string): string {
-  const used = new Set(taken.map(clip => clip.name))
-  if (!used.has(base)) return base
-  for (let n = 2; ; n++) if (!used.has(`${base}-${n}`)) return `${base}-${n}`
+/**
+ * 이미 쓴 이름을 비켜 간다.
+ *
+ * **두 목록을 함께 본다.** 인스턴스는 이름 하나로 값을 주므로 애니메이션과 파라미터가
+ * 같은 이름을 가지면 어느 쪽에 준 것인지 알 수 없고, 형식이 그것을 오류로 막는다.
+ */
+function freeName(taken: readonly { name: string }[], stem: string): string {
+  const used = new Set(taken.map(one => one.name))
+  if (!used.has(stem)) return stem
+  for (let n = 2; ; n++) if (!used.has(`${stem}-${n}`)) return `${stem}-${n}`
 }
 
 @customElement('figure-animations')
@@ -286,15 +324,32 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) board?: BoardModel
+  @property({ type: Object }) draft?: FigureDraft
   @property({ type: Array }) parts: PartModel[] = []
 
-  /** 펼쳐 둔 clip. 이름이 아니라 자리로 잡는다 — 이름은 편집 중에 바뀐다. */
-  @state() private open = 0
+  /**
+   * 펼쳐 둔 것. 이름이 아니라 **목록과 자리**로 잡는다 — 이름은 편집 중에 바뀐다.
+   *
+   * 목록이 둘이므로 자리 하나로는 모자란다. `clip:0` 과 `parameter:0` 은 다른 것이다.
+   */
+  @state() private open = ''
   @state() private recipeTarget = ''
 
   private get clips(): Clip[] {
-    return this.board?.animations ?? []
+    return this.draft?.animations ?? []
+  }
+
+  private get parameters(): Parameter[] {
+    return this.draft?.parameters ?? []
+  }
+
+  /** 두 목록의 이름을 한자리에서 본다 — 인스턴스가 이름 하나로 값을 준다. */
+  private get allNames(): { name: string }[] {
+    return [...this.clips, ...this.parameters]
+  }
+
+  private channelsOf(kind: MotionKind, at: number): Channel[] {
+    return (kind === 'clip' ? this.clips[at]?.channels : this.parameters[at]?.clip?.channels) ?? []
   }
 
   /** 부품 이름 — 채널이 이것을 가리킨다. */
@@ -311,11 +366,16 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   private get movingParts(): number {
     const moving = new Set<string>()
     for (const clip of this.clips) for (const channel of clip.channels) moving.add(channel.target)
+    for (const parameter of this.parameters) {
+      for (const channel of parameter.clip?.channels ?? []) moving.add(channel.target)
+    }
     return moving.size
   }
 
   render(): TemplateResult {
-    if (!this.board) return html``
+    if (!this.draft) return html``
+
+    const nameless = this.partNames.length === 0
 
     return html`
       <section>
@@ -324,18 +384,27 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
       </section>
 
       ${this.renderRecipes()}
-      ${this.clips.length === 0 ? nothing : this.renderClips()}
 
       <section>
-        <button @click=${() => this.addClip()} ?disabled=${this.partNames.length === 0}>
+        <h3>${i18next.t('figure.label.parameters')}</h3>
+        <p quiet>${i18next.t('figure.text.parameter-is-a-value-not-a-timeline')}</p>
+        ${this.parameters.map((parameter, at) => this.renderParameter(parameter, at))}
+        <button @click=${() => this.addParameter()} ?disabled=${nameless}>
+          <md-icon>add</md-icon>${i18next.t('figure.button.add-parameter')}
+        </button>
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.clips')}</h3>
+        <p quiet>${i18next.t('figure.text.clip-is-time-running')}</p>
+        ${this.clips.map((clip, at) => this.renderClip(clip, at))}
+        <button @click=${() => this.addClip()} ?disabled=${nameless}>
           <md-icon>add</md-icon>${i18next.t('figure.button.add-clip')}
         </button>
-        ${this.partNames.length === 0
-          ? html`<p quiet>${i18next.t('figure.text.animation-needs-a-named-part')}</p>`
-          : nothing}
+        ${nameless ? html`<p quiet>${i18next.t('figure.text.animation-needs-a-named-part')}</p>` : nothing}
       </section>
 
-      ${this.clips.length === 0 ? nothing : this.renderBudget()}
+      ${this.movingParts === 0 ? nothing : this.renderBudget()}
     `
   }
 
@@ -367,23 +436,22 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     `
   }
 
-  private renderClips(): TemplateResult {
-    return html`
-      <section>
-        ${this.clips.map((clip, at) => this.renderClip(clip, at))}
-      </section>
-    `
+  /** 이름이 다른 것과 겹치나. 두 목록을 함께 본다 — 인스턴스는 이름 하나로 값을 준다. */
+  private taken(kind: MotionKind, at: number, name: string): boolean {
+    const mine = kind === 'clip' ? this.clips[at] : this.parameters[at]
+    return this.allNames.some(one => one !== mine && one.name === name)
   }
 
   private renderClip(clip: Clip, at: number): TemplateResult {
-    const on = this.open === at
-    const duplicate = this.clips.some((other, i) => i !== at && other.name === clip.name)
+    const key = `clip:${at}`
+    const on = this.open === key
+    const duplicate = this.taken('clip', at, clip.name)
     const nameless = !clip.name?.trim()
 
     return html`
       <div clip ?on=${on}>
         <div head>
-          <button plain @click=${() => (this.open = on ? -1 : at)} title=${i18next.t('figure.label.channels')}>
+          <button plain @click=${() => (this.open = on ? '' : key)} title=${i18next.t('figure.label.channels')}>
             <md-icon>${on ? 'expand_more' : 'chevron_right'}</md-icon>
           </button>
           <input
@@ -394,15 +462,6 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
             title=${duplicate ? i18next.t('figure.text.clip-name-taken') : i18next.t('figure.text.clip-name-is-how-it-is-driven')}
             @change=${(e: Event) => this.renameClip(at, (e.target as HTMLInputElement).value)}
           />
-          <select
-            .value=${live(clip.drive ?? 'loop')}
-            title=${i18next.t('figure.text.drive-explained')}
-            @change=${(e: Event) => this.setDrive(at, (e.target as HTMLSelectElement).value as Clip['drive'])}
-          >
-            ${CLIP_DRIVES.map(
-              drive => html`<option value=${drive}>${i18next.t('figure.label.drive-' + drive)}</option>`
-            )}
-          </select>
           <button plain @click=${() => this.removeClip(at)} title=${i18next.t('figure.button.remove')}>
             <md-icon>close</md-icon>
           </button>
@@ -410,19 +469,104 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
 
         ${duplicate ? html`<p warn>${i18next.t('figure.text.clip-name-taken')}</p>` : nothing}
         ${nameless ? html`<p warn>${i18next.t('figure.text.clip-needs-a-name')}</p>` : nothing}
-        ${on ? this.renderChannels(clip, at) : nothing}
+        ${on ? this.renderChannels('clip', at) : nothing}
+      </div>
+    `
+  }
+
+  /**
+   * 파라미터 하나 — **이름·범위·자세.**
+   *
+   * 범위가 화면에 있어야 하는 이유는 그것이 **인스턴스와 주고받는 말**이기 때문이다.
+   * 곡선은 0~1 이고 인스턴스는 mm 로 준다. 그 사이를 런타임이 맵하는데, 무엇부터 무엇
+   * 까지인지 저작자가 정하지 않으면 값을 줄 수가 없다.
+   */
+  private renderParameter(parameter: Parameter, at: number): TemplateResult {
+    const key = `parameter:${at}`
+    const on = this.open === key
+    const duplicate = this.taken('parameter', at, parameter.name)
+    const nameless = !parameter.name?.trim()
+    const range = parameter.range ?? NEW_RANGE
+    const backwards = !(range.max > range.min)
+
+    return html`
+      <div clip ?on=${on}>
+        <div head>
+          <button plain @click=${() => (this.open = on ? '' : key)} title=${i18next.t('figure.label.channels')}>
+            <md-icon>${on ? 'expand_more' : 'chevron_right'}</md-icon>
+          </button>
+          <input
+            name
+            .value=${live(parameter.name ?? '')}
+            ?bad=${duplicate || nameless}
+            placeholder=${i18next.t('figure.label.parameter-name')}
+            title=${duplicate
+              ? i18next.t('figure.text.clip-name-taken')
+              : i18next.t('figure.text.parameter-name-is-how-a-value-arrives')}
+            @change=${(e: Event) => this.renameParameter(at, (e.target as HTMLInputElement).value)}
+          />
+          <button plain @click=${() => this.removeParameter(at)} title=${i18next.t('figure.button.remove')}>
+            <md-icon>close</md-icon>
+          </button>
+        </div>
+
+        ${duplicate ? html`<p warn>${i18next.t('figure.text.clip-name-taken')}</p>` : nothing}
+        ${nameless ? html`<p warn>${i18next.t('figure.text.parameter-needs-a-name')}</p>` : nothing}
+
+        <div row>
+          <label>${i18next.t('figure.label.parameter-range')}</label>
+          <input
+            type="number"
+            step="1"
+            ?bad=${backwards}
+            .value=${live(String(range.min))}
+            aria-label="min"
+            @change=${(e: Event) => this.setRange(at, { min: Number((e.target as HTMLInputElement).value) || 0 })}
+          />
+          <input
+            type="number"
+            step="1"
+            ?bad=${backwards}
+            .value=${live(String(range.max))}
+            aria-label="max"
+            @change=${(e: Event) => this.setRange(at, { max: Number((e.target as HTMLInputElement).value) || 0 })}
+          />
+          <input
+            unit
+            .value=${live(range.unit ?? '')}
+            placeholder="mm"
+            aria-label="unit"
+            title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+            @change=${(e: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
+          />
+        </div>
+        ${backwards ? html`<p warn>${i18next.t('figure.text.range-needs-room')}</p>` : nothing}
+
+        <div row>
+          <label>${i18next.t('figure.label.parameter-default')}</label>
+          <input
+            type="number"
+            step="1"
+            .value=${live(String(parameter.default ?? range.min))}
+            @change=${(e: Event) => this.setDefault(at, Number((e.target as HTMLInputElement).value) || 0)}
+          />
+        </div>
+
+        ${on ? this.renderChannels('parameter', at) : nothing}
       </div>
     `
   }
 
-  private renderChannels(clip: Clip, at: number): TemplateResult {
+  private renderChannels(kind: MotionKind, at: number): TemplateResult {
+    const channels = this.channelsOf(kind, at)
+
     return html`
-      <p quiet>${i18next.t('figure.text.drive-' + (clip.drive ?? 'loop') + '-note')}</p>
+      <p quiet>${i18next.t(kind === 'clip' ? 'figure.text.clip-is-time-running' : 'figure.text.parameter-curve-is-the-value-axis')}</p>
 
-      ${clip.channels.length === 0 ? html`<p warn>${i18next.t('figure.text.clip-needs-a-channel')}</p>` : nothing}
-      ${clip.channels.map((channel, j) => this.renderChannel(channel, at, j))}
+      ${channels.length === 0 ? html`<p warn>${i18next.t('figure.text.clip-needs-a-channel')}</p>` : nothing}
+      ${channels.map((channel, j) => this.renderChannel(kind, channel, at, j))}
 
-      <button @click=${() => this.addChannel(at)}>
+      <button @click=${() => this.addChannel(kind, at)}>
         <md-icon>add</md-icon>${i18next.t('figure.button.add-channel')}
       </button>
     `
@@ -434,7 +578,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 없는 부품을 가리키는 채널은 붉게 낸다. 부품 이름을 바꾸면 그 순간 이렇게 되는데,
    * 검증은 저장할 때 말하고 여기서는 **그 자리에서** 보여 준다.
    */
-  private renderChannel(channel: Channel, at: number, j: number): TemplateResult {
+  private renderChannel(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
     const orphan = !this.partNames.includes(channel.target)
     const turning = channel.path === 'rotation'
 
@@ -444,12 +588,12 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
           <label>${i18next.t('figure.label.channel-target')}</label>
           <select
             .value=${live(channel.target ?? '')}
-            @change=${(e: Event) => this.setChannel(at, j, { target: (e.target as HTMLSelectElement).value })}
+            @change=${(e: Event) => this.setChannel(kind, at, j, { target: (e.target as HTMLSelectElement).value })}
           >
             ${orphan ? html`<option value=${channel.target}>${channel.target}</option>` : nothing}
             ${this.partNames.map(name => html`<option value=${name}>${name}</option>`)}
           </select>
-          <button plain @click=${() => this.removeChannel(at, j)} title=${i18next.t('figure.button.remove')}>
+          <button plain @click=${() => this.removeChannel(kind, at, j)} title=${i18next.t('figure.button.remove')}>
             <md-icon>close</md-icon>
           </button>
         </div>
@@ -460,7 +604,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
           <label>${i18next.t('figure.label.channel-path')}</label>
           <select
             .value=${live(channel.path)}
-            @change=${(e: Event) => this.setPath(at, j, (e.target as HTMLSelectElement).value as ChannelPath)}
+            @change=${(e: Event) => this.setPath(kind, at, j, (e.target as HTMLSelectElement).value as ChannelPath)}
           >
             ${CHANNEL_PATHS.map(path => html`<option value=${path}>${i18next.t('figure.label.path-' + path)}</option>`)}
           </select>
@@ -468,7 +612,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
             .value=${live(channel.interpolation ?? 'linear')}
             title=${i18next.t('figure.text.interpolation-explained')}
             @change=${(e: Event) =>
-              this.setChannel(at, j, { interpolation: (e.target as HTMLSelectElement).value as Channel['interpolation'] })}
+              this.setChannel(kind, at, j, { interpolation: (e.target as HTMLSelectElement).value as Channel['interpolation'] })}
           >
             ${INTERPOLATIONS.map(
               one => html`<option value=${one}>${i18next.t('figure.label.interpolation-' + one)}</option>`
@@ -478,8 +622,8 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
 
         <p quiet>${i18next.t('figure.text.path-' + channel.path + '-unit')}</p>
 
-        ${turning ? this.renderPivot(channel, at, j) : nothing}
-        ${this.renderKeys(channel, at, j)}
+        ${turning ? this.renderPivot(kind, channel, at, j) : nothing}
+        ${this.renderKeys(kind, channel, at, j)}
       </div>
     `
   }
@@ -490,7 +634,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 그래서 경로가 rotation 일 때만 낸다. 언제나 내면 저작자가 옮김·배율에도 적고, 검증이
    * 저장할 때 「쓰이지 않는다」고 알린다. 안 보이면 적을 일이 없다.
    */
-  private renderPivot(channel: Channel, at: number, j: number): TemplateResult {
+  private renderPivot(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
     const pivot = channel.pivot
     const on = pivot !== undefined
 
@@ -498,7 +642,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
       <div row>
         <label>${i18next.t('figure.label.channel-pivot')}</label>
         <button
-          @click=${() => this.setChannel(at, j, { pivot: on ? undefined : { x: 0, y: 0, z: 0 } })}
+          @click=${() => this.setChannel(kind, at, j, { pivot: on ? undefined : { x: 0, y: 0, z: 0 } })}
           title=${i18next.t('figure.text.pivot-defaults-to-the-part-centre')}
         >
           ${i18next.t(on ? 'figure.button.pivot-clear' : 'figure.button.pivot-set')}
@@ -512,7 +656,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
                   .value=${live(String(pivot![axis]))}
                   aria-label=${axis}
                   @change=${(e: Event) =>
-                    this.setChannel(at, j, {
+                    this.setChannel(kind, at, j, {
                       pivot: { ...pivot!, [axis]: Number((e.target as HTMLInputElement).value) || 0 }
                     })}
                 />
@@ -532,7 +676,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 시각이 오름차순이어야 하는 것도 형식의 규칙이다. 여기서는 어긋난 줄을 붉게 내고 값을
    * 고치지는 않는다 — 저작자가 3 을 1 로 고치던 중일 수 있다.
    */
-  private renderKeys(channel: Channel, at: number, j: number): TemplateResult {
+  private renderKeys(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
     const keys = channel.keys ?? []
 
     return html`
@@ -555,7 +699,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
                   .value=${live(String(key.at))}
                   title=${backwards ? i18next.t('figure.text.keys-must-rise') : ''}
                   @change=${(e: Event) =>
-                    this.setKey(at, j, k, { at: Math.max(0, Number((e.target as HTMLInputElement).value) || 0) })}
+                    this.setKey(kind, at, j, k, { at: Math.max(0, Number((e.target as HTMLInputElement).value) || 0) })}
                 />
               </td>
               ${AXES.map(
@@ -567,7 +711,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
                       .value=${live(String(key.value[axis]))}
                       aria-label=${axis}
                       @change=${(e: Event) =>
-                        this.setKey(at, j, k, {
+                        this.setKey(kind, at, j, k, {
                           value: { ...key.value, [axis]: Number((e.target as HTMLInputElement).value) || 0 }
                         })}
                     />
@@ -579,7 +723,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
                   plain
                   ?disabled=${keys.length <= 2}
                   title=${keys.length <= 2 ? i18next.t('figure.text.two-keys-at-least') : i18next.t('figure.button.remove')}
-                  @click=${() => this.removeKey(at, j, k)}
+                  @click=${() => this.removeKey(kind, at, j, k)}
                 >
                   <md-icon>close</md-icon>
                 </button>
@@ -593,7 +737,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
         ? html`<p warn>${i18next.t('figure.text.keys-must-rise')}</p>`
         : nothing}
 
-      <button @click=${() => this.addKey(at, j)}>
+      <button @click=${() => this.addKey(kind, at, j)}>
         <md-icon>add</md-icon>${i18next.t('figure.button.add-key')}
       </button>
     `
@@ -626,29 +770,45 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   // ─── 고치기 ───────────────────────────────────────────────────────────────
 
   /**
-   * 보드에 실어 올려보낸다.
+   * 초안에 실어 올려보낸다.
    *
-   * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-board` 로
+   * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-draft` 로
    * 간다. 빈 배열은 칸을 지운다 — clip 을 다 지운 도형은 `animations: []` 가 아니라 없는 것이다.
    */
-  private tell(animations: Clip[]): void {
-    if (!this.board) return
+  private tell(over: { animations?: Clip[]; parameters?: Parameter[] }): void {
+    if (!this.draft) return
 
-    const board: BoardModel = { ...this.board }
-    if (animations.length === 0) delete board.animations
-    else board.animations = animations
+    const draft: FigureDraft = { ...this.draft, ...over }
+    if (!draft.animations?.length) delete draft.animations
+    if (!draft.parameters?.length) delete draft.parameters
 
-    this.dispatchEvent(new CustomEvent('update-board', { detail: { board }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('update-draft', { detail: { draft }, bubbles: true, composed: true }))
   }
 
   private patchClip(at: number, patch: Partial<Clip>): void {
-    this.tell(this.clips.map((clip, i) => (i === at ? { ...clip, ...patch } : clip)))
+    this.tell({ animations: this.clips.map((clip, i) => (i === at ? { ...clip, ...patch } : clip)) })
+  }
+
+  private patchParameter(at: number, patch: Partial<Parameter>): void {
+    this.tell({ parameters: this.parameters.map((one, i) => (i === at ? { ...one, ...patch } : one)) })
+  }
+
+  /** 채널 묶음을 통째로 얹는다. **어느 목록이든 같은 자리에 닿는다.** */
+  private setChannels(kind: MotionKind, at: number, channels: Channel[]): void {
+    if (kind === 'clip') this.patchClip(at, { channels })
+    else {
+      const parameter = this.parameters[at]
+      if (!parameter) return
+      this.patchParameter(at, { clip: { ...parameter.clip, channels } })
+    }
   }
 
-  private patchChannel(at: number, j: number, next: Channel): void {
-    const clip = this.clips[at]
-    if (!clip) return
-    this.patchClip(at, { channels: clip.channels.map((channel, i) => (i === j ? next : channel)) })
+  private patchChannel(kind: MotionKind, at: number, j: number, next: Channel): void {
+    this.setChannels(
+      kind,
+      at,
+      this.channelsOf(kind, at).map((channel, i) => (i === j ? next : channel))
+    )
   }
 
   private addClip(): void {
@@ -656,60 +816,105 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     if (!target) return
 
     const clip: Clip = {
-      name: freeName(this.clips),
-      drive: 'loop',
+      name: freeName(this.allNames, 'clip-1'),
       channels: [{ target, path: 'translation', keys: keysFor('translation') }]
     }
 
-    this.open = this.clips.length
-    this.tell([...this.clips, clip])
+    this.open = `clip:${this.clips.length}`
+    this.tell({ animations: [...this.clips, clip] })
   }
 
-  /** Recipe creates a valid, editable two-pose clip; it never saves or publishes the Figure. */
+  private addParameter(): void {
+    const target = this.partNames[0]
+    if (!target) return
+
+    const parameter: Parameter = {
+      name: freeName(this.allNames, 'parameter-1'),
+      range: { ...NEW_RANGE },
+      clip: { channels: [{ target, path: 'translation', keys: keysFor('translation') }] }
+    }
+
+    this.open = `parameter:${this.parameters.length}`
+    this.tell({ parameters: [...this.parameters, parameter] })
+  }
+
+  /**
+   * Recipe creates a valid, editable two-pose motion; it never saves or publishes the Figure.
+   *
+   * 어느 목록으로 가는지는 레시피가 안다 — 도는 롤러는 애니메이션이고 열리는 문은
+   * 파라미터다. 저작자에게 그 갈래를 먼저 고르게 하지 않는 이유가 이것이다.
+   */
   private addRecipe(recipe: MotionRecipe): void {
     const target = this.recipeTarget || this.partNames[0]
     if (!target) return
+
     const channel: Channel = {
       target,
       path: recipe.path,
       keys: [{ at: 0, value: startValue(recipe.path) }, { at: 1, value: { ...recipe.end } }]
     }
     if (recipe.pivot) channel.pivot = { ...recipe.pivot }
-    this.open = this.clips.length
-    this.tell([...this.clips, { name: freeRecipeName(this.clips, recipe.name), drive: recipe.drive, channels: [channel] }])
+
+    const name = freeName(this.allNames, recipe.name)
+
+    if (recipe.kind === 'clip') {
+      this.open = `clip:${this.clips.length}`
+      this.tell({ animations: [...this.clips, { name, channels: [channel] }] })
+      return
+    }
+
+    this.open = `parameter:${this.parameters.length}`
+    this.tell({
+      parameters: [...this.parameters, { name, range: { ...(recipe.range ?? NEW_RANGE) }, clip: { channels: [channel] } }]
+    })
   }
 
   private renameClip(at: number, name: string): void {
     this.patchClip(at, { name: name.trim() })
   }
 
-  private setDrive(at: number, drive: Clip['drive']): void {
-    this.patchClip(at, { drive })
+  private renameParameter(at: number, name: string): void {
+    this.patchParameter(at, { name: name.trim() })
+  }
+
+  private setRange(at: number, patch: Partial<Parameter['range']>): void {
+    const parameter = this.parameters[at]
+    if (!parameter) return
+    this.patchParameter(at, { range: { ...(parameter.range ?? NEW_RANGE), ...patch } })
+  }
+
+  private setDefault(at: number, value: number): void {
+    this.patchParameter(at, { default: value })
   }
 
   private removeClip(at: number): void {
-    if (this.open >= at) this.open = Math.max(0, this.open - 1)
-    this.tell(this.clips.filter((_, i) => i !== at))
+    this.open = ''
+    this.tell({ animations: this.clips.filter((_, i) => i !== at) })
+  }
+
+  private removeParameter(at: number): void {
+    this.open = ''
+    this.tell({ parameters: this.parameters.filter((_, i) => i !== at) })
   }
 
-  private addChannel(at: number): void {
-    const clip = this.clips[at]
+  private addChannel(kind: MotionKind, at: number): void {
     const target = this.partNames[0]
-    if (!clip || !target) return
+    if (!target) return
 
-    this.patchClip(at, {
-      channels: [...clip.channels, { target, path: 'translation', keys: keysFor('translation') }]
-    })
+    this.setChannels(kind, at, [
+      ...this.channelsOf(kind, at),
+      { target, path: 'translation', keys: keysFor('translation') }
+    ])
   }
 
-  private setChannel(at: number, j: number, patch: Partial<Channel>): void {
-    const channel = this.clips[at]?.channels[j]
+  private setChannel(kind: MotionKind, at: number, j: number, patch: Partial<Channel>): void {
+    const channel = this.channelsOf(kind, at)[j]
     if (!channel) return
 
     const next: Channel = { ...channel, ...patch }
     /* `undefined` 를 얹는 것은 지우는 뜻이다. 남겨 두면 저장 형식에 빈 칸이 실린다. */
     if ('pivot' in patch && patch.pivot === undefined) delete next.pivot
-    this.patchChannel(at, j, next)
+    this.patchChannel(kind, at, j, next)
   }
 
   /**
@@ -719,8 +924,8 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 두면 저작자는 부품이 사라진 것을 보고 도구가 고장 난 줄 안다. 그래서 옮김·회전 ↔ 배율을
    * 건널 때 시작값을 그 경로의 제자리로 되돌린다. 시각은 지킨다 — 저작자가 짠 박자다.
    */
-  private setPath(at: number, j: number, path: ChannelPath): void {
-    const channel = this.clips[at]?.channels[j]
+  private setPath(kind: MotionKind, at: number, j: number, path: ChannelPath): void {
+    const channel = this.channelsOf(kind, at)[j]
     if (!channel) return
 
     const crossing = (channel.path === 'scale') !== (path === 'scale')
@@ -732,38 +937,40 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     /* 회전이 아니면 회전 중심은 쓰이지 않는다. 남겨 두면 검증이 「쓰이지 않는다」고 알린다. */
     if (path !== 'rotation') delete next.pivot
 
-    this.patchChannel(at, j, next)
+    this.patchChannel(kind, at, j, next)
   }
 
-  private removeChannel(at: number, j: number): void {
-    const clip = this.clips[at]
-    if (!clip) return
-    this.patchClip(at, { channels: clip.channels.filter((_, i) => i !== j) })
+  private removeChannel(kind: MotionKind, at: number, j: number): void {
+    this.setChannels(
+      kind,
+      at,
+      this.channelsOf(kind, at).filter((_, i) => i !== j)
+    )
   }
 
   /** 마지막 키에서 1 초 뒤. 값은 그 키를 그대로 받는다 — 붙여 놓고 고치는 것이 짜기 쉽다. */
-  private addKey(at: number, j: number): void {
-    const channel = this.clips[at]?.channels[j]
+  private addKey(kind: MotionKind, at: number, j: number): void {
+    const channel = this.channelsOf(kind, at)[j]
     if (!channel) return
 
     const last = channel.keys[channel.keys.length - 1]
     const key: Keyframe = { at: (last?.at ?? 0) + 1, value: { ...(last?.value ?? startValue(channel.path)) } }
-    this.patchChannel(at, j, { ...channel, keys: [...channel.keys, key] })
+    this.patchChannel(kind, at, j, { ...channel, keys: [...channel.keys, key] })
   }
 
-  private setKey(at: number, j: number, k: number, patch: Partial<Keyframe>): void {
-    const channel = this.clips[at]?.channels[j]
+  private setKey(kind: MotionKind, at: number, j: number, k: number, patch: Partial<Keyframe>): void {
+    const channel = this.channelsOf(kind, at)[j]
     if (!channel) return
-    this.patchChannel(at, j, {
+    this.patchChannel(kind, at, j, {
       ...channel,
       keys: channel.keys.map((key, i) => (i === k ? { ...key, ...patch } : key))
     })
   }
 
   /** 둘 미만으로 내려가지 않는다 — 단추가 이미 죽어 있지만 밖에서 불릴 수 있다. */
-  private removeKey(at: number, j: number, k: number): void {
-    const channel = this.clips[at]?.channels[j]
+  private removeKey(kind: MotionKind, at: number, j: number, k: number): void {
+    const channel = this.channelsOf(kind, at)[j]
     if (!channel || channel.keys.length <= 2) return
-    this.patchChannel(at, j, { ...channel, keys: channel.keys.filter((_, i) => i !== k) })
+    this.patchChannel(kind, at, j, { ...channel, keys: channel.keys.filter((_, i) => i !== k) })
   }
 }