@things-factory/figure-ui 10.1.43 → 10.1.45

package/client/modeller/figure-animations.ts

@@ -1,1249 +0,0 @@
-import { css, html, LitElement, nothing, type TemplateResult } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { live } from 'lit/directives/live.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { AXES, CHANNEL_PATHS, INTERPOLATIONS, LIMITS } from '@hatiolab/figure-model'
-import type { ChannelPath, JointChannel, PartChannel, Vec3 } from '@hatiolab/figure-model'
-
-import type { FigureDraft, PartModel } from './figure-source.js'
-
-/**
- * 이 도형이 **어떻게 움직이는가.**
- *
- * ## 왜 탭 하나가 필요한가
- *
- * 움직임은 형식에 있고 런타임까지 서 있었다 — 검증이 촘촘히 보고, 청사진이 움직이는 부품을
- * 단독 묶음으로 빼고(합치면 따로 못 움직인다), 씬이 frameClock 을 구독해 실제로 돌린다.
- * 미리보기에도 clip 마다 슬라이더가 있었다.
- *
- * **만들 자리만 없었다.** 그래서 움직이는 도형을 얻는 길이 「AI 가 후보로 내놓는 것」 하나였고,
- * 채널 하나를 고치려면 손댈 화면이 없었다.
- *
- * ## 부품이 아니라 도형의 것이다
- *
- * clip 하나가 부품 여럿을 함께 움직인다 — 문 열림은 왼짝과 오른짝이 반대로 미끄러지는 것
- * 하나다. 그래서 부품을 고르고 「이 부품의 움직임」을 적는 형태가 될 수 없고, 속성 탭이 아니라
- * 자기 탭에 산다.
- *
- * ## 트윈은 타임라인을 재생하지 않는다
- *
- * 「문 열기 clip 을 재생하라」가 아니라 **「지금 40% 열려 있다」**다. 그 둘은 다른 것이라
- * 이 탭도 둘로 나뉜다.
- *
- *   애니메이션   시각이 흐른다. 인스턴스가 주는 수는 배속이다 — 도는 롤러
- *   파라미터     값이 자세를 만든다. 인스턴스가 주는 수는 물리량이다 — 1200mm 내려온 호이스트
- *
- * 한동안 뒤엣것이 애니메이션 안에 `drive: 'hold'` 로 숨어 있었다. 형식의 판단은 맞았는데
- * **자리와 이름이 틀려서**, 「길이값을 변수로 노출하라」는 요청에 저작자도 AI 도 이것을
- * 못 찾았다 — 애니메이션 칸에 있을 거라고 생각하지 않는다(ADR-0051).
- */
-
-type Clip = NonNullable<FigureDraft['animations']>[number]
-type Parameter = NonNullable<FigureDraft['parameters']>[number]
-type Channel = Clip['channels'][number]
-type Keyframe = PartChannel['keys'][number]
-type JointKey = JointChannel['keys'][number]
-
-/** A channel that drives a joint names the joint and carries one number per key (ADR-0066). */
-function isJointChannel(channel: Channel): channel is JointChannel {
-  return channel.path === undefined
-}
-
-/** 어느 목록의 몇째인가. 채널·키 편집기가 둘을 함께 쓴다. */
-type MotionKind = 'clip' | 'parameter'
-
-/** A first-success motion: intent first, raw channel editing second. */
-interface MotionRecipe {
-  id: 'conveyor' | 'gate' | 'pusher' | 'lift'
-  name: string
-  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', 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 } },
-  { at: 1, value: { x: 0, y: 0, z: 0 } }
-]
-
-/** `scale` 만 1 에서 시작한다 — 0 은 부품을 지운다. */
-function startValue(path: ChannelPath): Vec3 {
-  return path === 'scale' ? { x: 1, y: 1, z: 1 } : { x: 0, y: 0, z: 0 }
-}
-
-function keysFor(path: ChannelPath): Keyframe[] {
-  return NEW_KEYS.map(key => ({ at: key.at, value: startValue(path) }))
-}
-
-/**
- * 이미 쓴 이름을 비켜 간다.
- *
- * **두 목록을 함께 본다.** 인스턴스는 이름 하나로 값을 주므로 애니메이션과 파라미터가
- * 같은 이름을 가지면 어느 쪽에 준 것인지 알 수 없고, 형식이 그것을 오류로 막는다.
- */
-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}`
-}
-
-/**
- * 파라미터 범위에 적히는 단위 — **권하는 것이지 가두는 것이 아니다.**
- *
- * 관절이 만드는 파라미터가 `deg` 와 `mm` 을 쓰고(회전과 직선), 그리퍼·문 같은 값은 `%` 를 쓴다.
- * 속도는 `mm/s` 와 `rpm`, 시간은 `s` 다. 이 여섯이 지금 쓰이는 전부이고, 목록에 없는 말을 적는
- * 길은 그대로 열려 있다.
- */
-const PARAMETER_UNITS = ['deg', 'mm', '%', 'mm/s', 'rpm', 's'] as const
-
-/** 목록 대신 손으로 적겠다는 표. `select` 의 값으로 쓴다. */
-const UNIT_TYPE_IT = '__type-it'
-
-@customElement('figure-animations')
-export class FigureAnimations extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        overflow-y: auto;
-        background-color: var(--md-sys-color-surface-container-lowest);
-        color: var(--md-sys-color-on-surface);
-        font: var(--label-font, inherit);
-        font-size: 0.76rem;
-      }
-
-      section {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-large, 12px);
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      /* 다른 탭들과 같은 눈금이다 */
-      h3 {
-        margin: 0 0 2px 0;
-        font-size: var(--ui-t-micro, 11px);
-        font-weight: 700;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-
-      p[quiet] {
-        margin: 0;
-        font-size: 0.72rem;
-        line-height: 1.5;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-
-      div[recipes] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
-      button[recipe] { min-height: 54px; align-items: flex-start; flex-direction: column; text-align: left; }
-      button[recipe] strong { font-size: 0.74rem; }
-      button[recipe] span { color: var(--md-sys-color-on-surface-variant); font-size: 0.68rem; line-height: 1.35; }
-
-      /* ── clip ─────────────────────────────────────────────────────── */
-
-      div[clip] {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-medium, 8px);
-        padding: 8px;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 4px;
-      }
-      div[clip][on] {
-        border-color: var(--md-sys-color-primary);
-        background-color: var(--md-sys-color-surface-container-low);
-      }
-
-      div[head] {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      div[head] input[name] {
-        flex: 1;
-        min-width: 0;
-      }
-
-      /* ── channel ──────────────────────────────────────────────────── */
-
-      div[channel] {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        padding: 6px 8px;
-        border-left: 2px solid var(--md-sys-color-outline-variant);
-        background-color: var(--md-sys-color-surface-container-lowest);
-      }
-      div[channel][orphan] {
-        border-left-color: var(--md-sys-color-error);
-      }
-
-      div[row] {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      div[row] > label {
-        flex: none;
-        min-width: 3.2em;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      /*
-        칸이 줄어들 줄 알아야 한다. 숫자 입력칸은 제 기본 너비(20자 남짓)를 갖고 있고 flex 는
-        기본 크기 아래로는 안 줄이므로, 범위처럼 한 줄에 셋이 서는 줄은 패널 밖으로 밀려
-        오른쪽 칸이 잘렸다.
-      */
-      div[row] > input {
-        flex: 1 1 0;
-        min-width: 0;
-      }
-      /* 단위는 「mm」 정도의 짧은 말이라 숫자 칸보다 좁게 둔다. 고르는 칸도 같은 폭이다. */
-      div[row] > input[unit],
-      div[row] > select[unit] {
-        flex: 0 1 5.5em;
-        min-width: 0;
-      }
-
-      /* ── keyframe ─────────────────────────────────────────────────── */
-
-      table[keys] {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      table[keys] th {
-        padding: 0 2px 2px;
-        font-size: 0.68rem;
-        font-weight: 600;
-        text-align: left;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      table[keys] td {
-        padding: 1px 2px;
-      }
-      table[keys] input {
-        width: 100%;
-        min-width: 0;
-      }
-      table[keys] td[drop] {
-        width: 1.6em;
-      }
-
-      input,
-      select {
-        box-sizing: border-box;
-        padding: 3px 5px;
-        font: inherit;
-        font-size: 0.74rem;
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface-container-lowest);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 3px;
-      }
-      input:focus,
-      select:focus {
-        outline: none;
-        border-color: var(--md-sys-color-primary);
-      }
-      input[bad] {
-        border-color: var(--md-sys-color-error);
-      }
-
-      button {
-        display: inline-flex;
-        align-items: center;
-        gap: 3px;
-        padding: 3px 8px;
-        font: inherit;
-        font-size: 0.72rem;
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface-container);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 3px;
-        cursor: pointer;
-      }
-      button:hover:not(:disabled) {
-        background-color: var(--md-sys-color-surface-container-high);
-      }
-      button:disabled {
-        opacity: 0.4;
-        cursor: default;
-      }
-      button[plain] {
-        padding: 1px 4px;
-        background: none;
-        border: none;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      button[plain]:hover:not(:disabled) {
-        color: var(--md-sys-color-error);
-        background: none;
-      }
-      button md-icon {
-        font-size: 14px;
-        width: 14px;
-        height: 14px;
-      }
-
-      /* ── 예산 ─────────────────────────────────────────────────────── */
-
-      div[budget] {
-        display: flex;
-        align-items: baseline;
-        gap: 6px;
-      }
-      div[budget] strong {
-        font-size: 0.86rem;
-        font-weight: 700;
-      }
-      div[budget][over] strong {
-        color: var(--md-sys-color-error);
-      }
-
-      p[warn] {
-        margin: 0;
-        font-size: 0.7rem;
-        line-height: 1.5;
-        color: var(--md-sys-color-error);
-      }
-    `
-  ]
-
-  @property({ type: Object }) draft?: FigureDraft
-  @property({ type: Array }) parts: PartModel[] = []
-
-  /**
-   * 펼쳐 둔 것. 이름이 아니라 **목록과 자리**로 잡는다 — 이름은 편집 중에 바뀐다.
-   *
-   * 목록이 둘이므로 자리 하나로는 모자란다. `clip:0` 과 `parameter:0` 은 다른 것이다.
-   */
-  @state() private open = ''
-  @state() private recipeTarget = ''
-
-  /** 단위를 손으로 적는 중인 파라미터. 목록에 없는 말을 적으려고 연 칸이다. */
-  @state() private typingUnit = new Set<number>()
-
-  private get clips(): Clip[] {
-    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) ?? []
-  }
-
-  /** 부품 이름 — 채널이 이것을 가리킨다. */
-  private get partNames(): string[] {
-    return this.parts.map(part => part.name).filter(name => !!name)
-  }
-
-  /** Joints a channel can drive instead of a part (ADR-0066). */
-  private get joints(): NonNullable<FigureDraft['joints']> {
-    return this.draft?.joints ?? []
-  }
-
-  /**
-   * 몇 부품이 움직이나 — 채널이 가리키는 **서로 다른 부품**의 수.
-   *
-   * clip 수가 아니다. 한 부품을 세 clip 이 움직여도 그 부품 하나가 단독 묶음이 될 뿐이다.
-   * 청사진이 묶음을 가르는 기준과 같은 셈이어야 화면의 수와 판정의 수가 맞는다.
-   */
-  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.draft) return html``
-
-    const nameless = this.partNames.length === 0
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.animation')}</h3>
-      </section>
-
-      ${this.renderRecipes()}
-
-      <section>
-        <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>
-        ${nameless ? html`<p quiet>${i18next.t('figure.text.animation-needs-a-named-part')}</p>` : nothing}
-      </section>
-
-      ${this.movingParts === 0 ? nothing : this.renderBudget()}
-    `
-  }
-
-  /**
-   * 빈 화면 — **이 탭이 무엇인지 가르치는 자리다.**
-   *
-   * 「clip 을 추가하세요」라고만 쓰면 처음 여는 사람은 clip 이 무엇인지 모른 채 단추를 누른다.
-   * 그래서 무엇을 만들 수 있는지 예를 들고, 그것이 어떻게 움직이는지(사실이 들어온다)를 적는다.
-   */
-  private renderRecipes(): TemplateResult {
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.motion-intent')}</h3>
-        <p quiet>${i18next.t('figure.text.motion-intent-help')}</p>
-        ${this.partNames.length
-          ? html`<select .value=${this.recipeTarget} @change=${(e: Event) => (this.recipeTarget = (e.target as HTMLSelectElement).value)}>
-              ${this.partNames.map(name => html`<option value=${name}>${name}</option>`)}
-            </select>
-            <div recipes>
-              ${MOTION_RECIPES.map(recipe => html`
-                <button recipe @click=${() => this.addRecipe(recipe)}>
-                  <strong>${i18next.t('figure.label.recipe-' + recipe.id)}</strong>
-                  <span>${i18next.t('figure.text.recipe-' + recipe.id)}</span>
-                </button>
-              `)}
-            </div>`
-          : html`<p quiet>${i18next.t('figure.text.animation-needs-a-named-part')}</p>`}
-      </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 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 ? '' : key)} title=${i18next.t('figure.label.channels')}>
-            <md-icon>${on ? 'expand_more' : 'chevron_right'}</md-icon>
-          </button>
-          <input
-            name
-            .value=${live(clip.name ?? '')}
-            ?bad=${duplicate || nameless}
-            placeholder=${i18next.t('figure.label.clip-name')}
-            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)}
-          />
-          <button plain @click=${() => this.removeClip(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.clip-needs-a-name')}</p>` : 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)
-    const slowness = parameter.clip?.duration ?? 0
-
-    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 })}
-          />
-          ${this.renderUnit(at, range.unit ?? '')}
-        </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>
-
-        <div row>
-          <label>${i18next.t('figure.label.parameter-duration')}</label>
-          <input
-            type="number"
-            step="0.1"
-            min="0"
-            ?bad=${slowness < 0}
-            .value=${live(parameter.clip?.duration === undefined ? '' : String(parameter.clip.duration))}
-            placeholder="0"
-            aria-label="duration"
-            @change=${(e: Event) => this.setDuration(at, (e.target as HTMLInputElement).value)}
-          />
-        </div>
-        <p quiet>${i18next.t('figure.text.parameter-duration-empty-is-instant')}</p>
-
-        ${on ? this.renderChannels('parameter', at) : nothing}
-      </div>
-    `
-  }
-
-  private renderChannels(kind: MotionKind, at: number): TemplateResult {
-    const channels = this.channelsOf(kind, at)
-
-    return html`
-      <p quiet>${i18next.t(kind === 'clip' ? 'figure.text.clip-is-time-running' : 'figure.text.parameter-curve-is-the-value-axis')}</p>
-
-      ${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(kind, at)}>
-        <md-icon>add</md-icon>${i18next.t('figure.button.add-channel')}
-      </button>
-    `
-  }
-
-  /**
-   * 채널 하나 — 어느 부품의 어느 속성을 움직이나.
-   *
-   * 없는 부품을 가리키는 채널은 붉게 낸다. 부품 이름을 바꾸면 그 순간 이렇게 되는데,
-   * 검증은 저장할 때 말하고 여기서는 **그 자리에서** 보여 준다.
-   */
-  private renderChannel(kind: MotionKind, channel: Channel, at: number, j: number): TemplateResult {
-    const joint = this.joints.find(one => one.name === channel.target)
-    const orphan = !this.partNames.includes(channel.target) && !joint
-    const target = html`
-      <div row>
-        <label>${i18next.t('figure.label.channel-target')}</label>
-        <select
-          .value=${live(channel.target ?? '')}
-          @change=${(e: Event) => this.retarget(kind, at, j, (e.target as HTMLSelectElement).value)}
-        >
-          ${orphan ? html`<option value=${channel.target}>${channel.target}</option>` : nothing}
-          <optgroup label=${i18next.t('figure.label.channel-target-parts')}>
-            ${this.partNames.map(name => html`<option value=${name}>${name}</option>`)}
-          </optgroup>
-          ${this.joints.length > 0
-            ? html`<optgroup label=${i18next.t('figure.label.channel-target-joints')}>
-                ${this.joints.map(one => html`<option value=${one.name}>${one.name}</option>`)}
-              </optgroup>`
-            : nothing}
-        </select>
-        <button plain @click=${() => this.removeChannel(kind, at, j)} title=${i18next.t('figure.button.remove')}>
-          <md-icon>close</md-icon>
-        </button>
-      </div>
-    `
-
-    /* A joint channel has no path or pivot: the joint says what moves. Each key is the joint coordinate. */
-    if (isJointChannel(channel)) {
-      const unit = joint?.type === 'prismatic' ? 'mm' : 'deg'
-      return html`
-        <div channel ?orphan=${orphan}>
-          ${target} ${orphan ? html`<p warn>${i18next.t('figure.text.channel-target-is-gone')}</p>` : nothing}
-          <p quiet>${i18next.t('figure.text.joint-channel-value-' + unit)}</p>
-          ${this.renderJointKeys(kind, channel, at, j, joint?.limits)}
-        </div>
-      `
-    }
-
-    const turning = channel.path === 'rotation'
-
-    return html`
-      <div channel ?orphan=${orphan}>
-        ${target}
-
-        ${orphan ? html`<p warn>${i18next.t('figure.text.channel-target-is-gone')}</p>` : nothing}
-
-        <div row>
-          <label>${i18next.t('figure.label.channel-path')}</label>
-          <select
-            .value=${live(channel.path)}
-            @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>
-          <select
-            .value=${live(channel.interpolation ?? 'linear')}
-            title=${i18next.t('figure.text.interpolation-explained')}
-            @change=${(e: Event) =>
-              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>`
-            )}
-          </select>
-        </div>
-
-        <p quiet>${i18next.t('figure.text.path-' + channel.path + '-unit')}</p>
-
-        ${turning ? this.renderPivot(kind, channel, at, j) : nothing}
-        ${this.renderKeys(kind, channel, at, j)}
-      </div>
-    `
-  }
-
-  /**
-   * 회전 중심 — **`rotation` 에서만 뜻이 있다.**
-   *
-   * 그래서 경로가 rotation 일 때만 낸다. 언제나 내면 저작자가 옮김·배율에도 적고, 검증이
-   * 저장할 때 「쓰이지 않는다」고 알린다. 안 보이면 적을 일이 없다.
-   */
-  private renderPivot(kind: MotionKind, channel: PartChannel, at: number, j: number): TemplateResult {
-    const pivot = channel.pivot
-    const on = pivot !== undefined
-
-    return html`
-      <div row>
-        <label>${i18next.t('figure.label.channel-pivot')}</label>
-        <button
-          @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')}
-        </button>
-        ${on
-          ? AXES.map(
-              axis => html`
-                <input
-                  type="number"
-                  step="1"
-                  .value=${live(String(pivot![axis]))}
-                  aria-label=${axis}
-                  @change=${(e: Event) =>
-                    this.setChannel(kind, at, j, {
-                      pivot: { ...pivot!, [axis]: Number((e.target as HTMLInputElement).value) || 0 }
-                    })}
-                />
-              `
-            )
-          : nothing}
-      </div>
-    `
-  }
-
-  /**
-   * 키프레임 표.
-   *
-   * **둘 미만으로 못 내려간다.** 하나뿐이면 움직이는 것이 아니라 자세 하나이고, 형식이
-   * 오류로 막는다. 저장하고 나서 알려 주는 것보다 지우는 단추를 죽이는 것이 낫다.
-   *
-   * 시각이 오름차순이어야 하는 것도 형식의 규칙이다. 여기서는 어긋난 줄을 붉게 내고 값을
-   * 고치지는 않는다 — 저작자가 3 을 1 로 고치던 중일 수 있다.
-   */
-  /**
-   * Keys of a joint channel: a position and one joint coordinate each. A value outside the joint's limits
-   * is marked and left as typed; the format refuses it on save.
-   */
-  private renderJointKeys(
-    kind: MotionKind,
-    channel: JointChannel,
-    at: number,
-    j: number,
-    limits?: { min: number; max: number }
-  ): TemplateResult {
-    const keys = channel.keys ?? []
-    const onValues = kind === 'parameter'
-    const beyond = (key: JointKey) => !!limits && (key.value < limits.min || key.value > limits.max)
-
-    return html`
-      <table keys>
-        <tr>
-          <th>${i18next.t(onValues ? 'figure.label.key-at-value' : 'figure.label.key-at')}</th>
-          <th>${i18next.t('figure.label.joint-value')}</th>
-          <th></th>
-        </tr>
-        ${keys.map((key, k) => {
-          const backwards = k > 0 && key.at <= (keys[k - 1]!.at ?? 0)
-          return html`
-            <tr>
-              <td>
-                <input
-                  type="number"
-                  step=${onValues ? '0.05' : '0.1'}
-                  min="0"
-                  max=${onValues ? '1' : nothing}
-                  ?bad=${backwards || key.at < 0 || (onValues && key.at > 1)}
-                  .value=${live(String(key.at))}
-                  @change=${(e: Event) =>
-                    this.setJointKey(kind, at, j, k, { at: Math.max(0, Number((e.target as HTMLInputElement).value) || 0) })}
-                />
-              </td>
-              <td>
-                <input
-                  type="number"
-                  step="1"
-                  ?bad=${beyond(key)}
-                  .value=${live(String(key.value))}
-                  title=${beyond(key) ? i18next.t('figure.text.joint-value-beyond-limits') : ''}
-                  @change=${(e: Event) => this.setJointKey(kind, at, j, k, { value: Number((e.target as HTMLInputElement).value) || 0 })}
-                />
-              </td>
-              <td drop>
-                <button
-                  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(kind, at, j, k)}
-                >
-                  <md-icon>close</md-icon>
-                </button>
-              </td>
-            </tr>
-          `
-        })}
-      </table>
-      ${keys.some(beyond) ? html`<p warn>${i18next.t('figure.text.joint-value-beyond-limits')}</p>` : nothing}
-      <button @click=${() => this.addKey(kind, at, j)}>
-        <md-icon>add</md-icon>${i18next.t('figure.button.add-key')}
-      </button>
-    `
-  }
-
-  private renderKeys(kind: MotionKind, channel: PartChannel, at: number, j: number): TemplateResult {
-    const keys = channel.keys ?? []
-    /*
-      Keys on a parameter curve sit on the 0..1 value span (ADR-0051). A key above 1 is unreachable and
-      the format refuses it. The screen marks it and leaves the number alone: rewriting what the author
-      typed would hide what they wrote.
-    */
-    const onValues = kind === 'parameter'
-    const outside = (key: Keyframe) => onValues && key.at > 1
-
-    return html`
-      <table keys>
-        <tr>
-          <th>${i18next.t(onValues ? 'figure.label.key-at-value' : 'figure.label.key-at')}</th>
-          ${AXES.map(axis => html`<th>${axis}</th>`)}
-          <th></th>
-        </tr>
-        ${keys.map((key, k) => {
-          const backwards = k > 0 && key.at <= (keys[k - 1]!.at ?? 0)
-          return html`
-            <tr>
-              <td>
-                <input
-                  type="number"
-                  step=${onValues ? '0.05' : '0.1'}
-                  min="0"
-                  max=${onValues ? '1' : nothing}
-                  ?bad=${backwards || key.at < 0 || outside(key)}
-                  .value=${live(String(key.at))}
-                  title=${backwards
-                    ? i18next.t('figure.text.keys-must-rise')
-                    : outside(key)
-                      ? i18next.t('figure.text.parameter-key-within-span')
-                      : ''}
-                  @change=${(e: Event) =>
-                    this.setKey(kind, at, j, k, { at: Math.max(0, Number((e.target as HTMLInputElement).value) || 0) })}
-                />
-              </td>
-              ${AXES.map(
-                axis => html`
-                  <td>
-                    <input
-                      type="number"
-                      step=${channel.path === 'scale' ? '0.1' : '1'}
-                      .value=${live(String(key.value[axis]))}
-                      aria-label=${axis}
-                      @change=${(e: Event) =>
-                        this.setKey(kind, at, j, k, {
-                          value: { ...key.value, [axis]: Number((e.target as HTMLInputElement).value) || 0 }
-                        })}
-                    />
-                  </td>
-                `
-              )}
-              <td drop>
-                <button
-                  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(kind, at, j, k)}
-                >
-                  <md-icon>close</md-icon>
-                </button>
-              </td>
-            </tr>
-          `
-        })}
-      </table>
-
-      ${keys.some((key, k) => k > 0 && key.at <= (keys[k - 1]!.at ?? 0))
-        ? html`<p warn>${i18next.t('figure.text.keys-must-rise')}</p>`
-        : nothing}
-      ${keys.some(outside) ? html`<p warn>${i18next.t('figure.text.parameter-key-within-span')}</p>` : nothing}
-
-      <button @click=${() => this.addKey(kind, at, j)}>
-        <md-icon>add</md-icon>${i18next.t('figure.button.add-key')}
-      </button>
-    `
-  }
-
-  /**
-   * 따로 움직이는 부품 예산.
-   *
-   * **넘어도 막지 않는다.** 제 변환을 지는 부품은 저마다 단독 묶음이라 draw call 이 늘고,
-   * 그만큼 한 화면에 함께 세울 수 있는 대수가 준다 — 그 대가가 수로 보이면 저작자가 아낀다.
-   * 랜드마크 설비 하나는 정교해도 되고, 그 값이 도면 예산에 드러나면 된다.
-   */
-  private renderBudget(): TemplateResult {
-    const used = this.movingParts
-    const over = used > LIMITS.independentParts
-
-    return html`
-      <section>
-        <h3>${i18next.t('figure.label.budget-independent')}</h3>
-        <div budget ?over=${over}>
-          <strong>${used}</strong>
-          <span quiet>/ ${LIMITS.independentParts}</span>
-        </div>
-        <p quiet>${i18next.t('figure.text.independent-parts-cost')}</p>
-        ${over ? html`<p warn>${i18next.t('figure.text.independent-parts-over')}</p>` : nothing}
-      </section>
-    `
-  }
-
-  // ─── 고치기 ───────────────────────────────────────────────────────────────
-
-  /**
-   * 초안에 실어 올려보낸다.
-   *
-   * `animations` 는 도형 전체의 것이므로 부품 편집(`update-part`)이 아니라 `update-draft` 로
-   * 간다. 빈 배열은 칸을 지운다 — clip 을 다 지운 도형은 `animations: []` 가 아니라 없는 것이다.
-   */
-  private tell(over: { animations?: Clip[]; parameters?: Parameter[] }): void {
-    if (!this.draft) return
-
-    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-draft', { detail: { draft }, bubbles: true, composed: true }))
-  }
-
-  private patchClip(at: number, patch: Partial<Clip>): void {
-    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(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 {
-    const target = this.partNames[0]
-    if (!target) return
-
-    const clip: Clip = {
-      name: freeName(this.allNames, 'clip-1'),
-      channels: [{ target, path: 'translation', keys: keysFor('translation') }]
-    }
-
-    this.open = `clip:${this.clips.length}`
-    this.tell({ animations: [...this.clips, clip] })
-  }
-
-  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 }
-
-    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 renameParameter(at: number, name: string): void {
-    this.patchParameter(at, { name: name.trim() })
-  }
-
-  /**
-   * 단위 칸 — **목록이 보이는 채로, 적는 길도 열어 둔다.**
-   *
-   * 처음에는 `datalist` 를 붙였다. 그것은 브라우저가 쥐고 있는 기능이라 **눌러 보기 전에는 목록이
-   * 있는지조차 안 보인다** — 화살표도 없고, 어디에 어떻게 뜨는지도 브라우저가 정한다. 고를 수
-   * 있다는 것을 알리는 것이 이 칸의 목적이므로 `select` 로 바꿨다.
-   *
-   * 형식은 단위를 규칙으로 쓰지 않으므로(표시용 말이다) 목록에 가두지 않는다. 마지막 줄이
-   * 「직접 적기」이고, 목록에 없는 말이 이미 적혀 있으면 처음부터 적는 칸으로 연다.
-   */
-  private renderUnit(at: number, unit: string) {
-    const listed = (PARAMETER_UNITS as readonly string[]).includes(unit)
-    const typing = this.typingUnit.has(at) || (unit !== '' && !listed)
-
-    if (typing) {
-      return html`<input
-        unit
-        .value=${live(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() })}
-      />`
-    }
-
-    return html`<select
-      unit
-      aria-label="unit"
-      title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
-      @change=${(e: Event) => this.chooseUnit(at, (e.target as HTMLSelectElement).value)}
-    >
-      <option value="" ?selected=${unit === ''}>${i18next.t('figure.label.unit-none')}</option>
-      ${PARAMETER_UNITS.map(one => html`<option value=${one} ?selected=${one === unit}>${one}</option>`)}
-      <option value=${UNIT_TYPE_IT}>${i18next.t('figure.label.unit-type-it')}</option>
-    </select>`
-  }
-
-  /** 고른 것을 넣는다. 「직접 적기」는 값이 아니라 **칸을 바꾸는 것**이다. */
-  private chooseUnit(at: number, value: string): void {
-    if (value === UNIT_TYPE_IT) {
-      this.typingUnit = new Set([...this.typingUnit, at])
-      return
-    }
-
-    const next = new Set(this.typingUnit)
-    next.delete(at)
-    this.typingUnit = next
-    this.setRange(at, { unit: value })
-  }
-
-  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 } })
-  }
-
-  /**
-   * Transition time. Clearing the input removes the field, which means instant. 0 is instant too, but
-   * a stored 0 and a missing field are different sources, so an empty input is never saved as 0.
-   */
-  private setDuration(at: number, raw: string): void {
-    const parameter = this.parameters[at]
-    if (!parameter) return
-    const { duration: _dropped, ...rest } = parameter.clip
-    const text = raw.trim()
-    const clip = text === '' || !Number.isFinite(Number(text)) ? rest : { ...rest, duration: Number(text) }
-    this.patchParameter(at, { clip })
-  }
-
-  private setDefault(at: number, value: number): void {
-    this.patchParameter(at, { default: value })
-  }
-
-  private removeClip(at: number): void {
-    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(kind: MotionKind, at: number): void {
-    const target = this.partNames[0]
-    if (!target) return
-
-    this.setChannels(kind, at, [
-      ...this.channelsOf(kind, at),
-      { target, path: 'translation', keys: keysFor('translation') }
-    ])
-  }
-
-  /**
-   * Points a channel at another part or joint. Crossing between the two changes the channel's shape: a
-   * joint channel has no path and one number per key, a part channel a path and a vector. The key positions
-   * are kept, since they are the author's timing; values restart at the rest pose.
-   */
-  private retarget(kind: MotionKind, at: number, j: number, target: string): void {
-    const channel = this.channelsOf(kind, at)[j]
-    if (!channel) return
-    const toJoint = this.joints.some(one => one.name === target)
-
-    if (toJoint && !isJointChannel(channel)) {
-      const next: JointChannel = { target, keys: channel.keys.map(key => ({ at: key.at, value: 0 })) }
-      if (channel.interpolation !== undefined) next.interpolation = channel.interpolation
-      this.patchChannel(kind, at, j, next)
-      return
-    }
-    if (!toJoint && isJointChannel(channel)) {
-      const next: PartChannel = { target, path: 'translation', keys: channel.keys.map(key => ({ at: key.at, value: startValue('translation') })) }
-      if (channel.interpolation !== undefined) next.interpolation = channel.interpolation
-      this.patchChannel(kind, at, j, next)
-      return
-    }
-    this.patchChannel(kind, at, j, { ...channel, target } as Channel)
-  }
-
-  private setChannel(kind: MotionKind, at: number, j: number, patch: Partial<PartChannel>): void {
-    const channel = this.channelsOf(kind, at)[j]
-    if (!channel || isJointChannel(channel)) return
-
-    const next: PartChannel = { ...channel, ...patch }
-    /* `undefined` 를 얹는 것은 지우는 뜻이다. 남겨 두면 저장 형식에 빈 칸이 실린다. */
-    if ('pivot' in patch && patch.pivot === undefined) delete next.pivot
-    this.patchChannel(kind, at, j, next)
-  }
-
-  /**
-   * 경로를 바꾼다 — **값까지 함께 옮긴다.**
-   *
-   * 옮김·회전의 0 은 「제자리」인데 배율의 0 은 **부품을 지운다.** 경로만 바꾸고 값을 그대로
-   * 두면 저작자는 부품이 사라진 것을 보고 도구가 고장 난 줄 안다. 그래서 옮김·회전 ↔ 배율을
-   * 건널 때 시작값을 그 경로의 제자리로 되돌린다. 시각은 지킨다 — 저작자가 짠 박자다.
-   */
-  private setPath(kind: MotionKind, at: number, j: number, path: ChannelPath): void {
-    const channel = this.channelsOf(kind, at)[j]
-    if (!channel || isJointChannel(channel)) return
-
-    const crossing = (channel.path === 'scale') !== (path === 'scale')
-    const next: PartChannel = {
-      ...channel,
-      path,
-      keys: crossing ? channel.keys.map(key => ({ at: key.at, value: startValue(path) })) : channel.keys
-    }
-    /* 회전이 아니면 회전 중심은 쓰이지 않는다. 남겨 두면 검증이 「쓰이지 않는다」고 알린다. */
-    if (path !== 'rotation') delete next.pivot
-
-    this.patchChannel(kind, at, j, next)
-  }
-
-  private removeChannel(kind: MotionKind, at: number, j: number): void {
-    this.setChannels(
-      kind,
-      at,
-      this.channelsOf(kind, at).filter((_, i) => i !== j)
-    )
-  }
-
-  /** 마지막 키에서 1 초 뒤. 값은 그 키를 그대로 받는다 — 붙여 놓고 고치는 것이 짜기 쉽다. */
-  private addKey(kind: MotionKind, at: number, j: number): void {
-    const channel = this.channelsOf(kind, at)[j]
-    if (!channel) return
-
-    if (isJointChannel(channel)) {
-      const keys = channel.keys
-      const end = keys[keys.length - 1]
-      if (kind === 'parameter' && keys.length >= 2) {
-        const before = keys[keys.length - 2]!
-        const middle: JointKey = { at: (before.at + end!.at) / 2, value: before.value }
-        this.patchChannel(kind, at, j, { ...channel, keys: [...keys.slice(0, -1), middle, end!] })
-        return
-      }
-      this.patchChannel(kind, at, j, { ...channel, keys: [...keys, { at: (end?.at ?? 0) + 1, value: end?.value ?? 0 }] })
-      return
-    }
-
-    const last = channel.keys[channel.keys.length - 1]
-
-    /*
-      A parameter curve ends at 1, so appending a key would make it unreachable. Insert it between the last two keys.
-    */
-    if (kind === 'parameter' && channel.keys.length >= 2) {
-      const before = channel.keys[channel.keys.length - 2]!
-      const middle: Keyframe = { at: (before.at + last!.at) / 2, value: { ...before.value } }
-      this.patchChannel(kind, at, j, { ...channel, keys: [...channel.keys.slice(0, -1), middle, last!] })
-      return
-    }
-
-    const key: Keyframe = { at: (last?.at ?? 0) + 1, value: { ...(last?.value ?? startValue(channel.path)) } }
-    this.patchChannel(kind, at, j, { ...channel, keys: [...channel.keys, key] })
-  }
-
-  private setJointKey(kind: MotionKind, at: number, j: number, k: number, patch: Partial<JointKey>): void {
-    const channel = this.channelsOf(kind, at)[j]
-    if (!channel || !isJointChannel(channel)) return
-    this.patchChannel(kind, at, j, { ...channel, keys: channel.keys.map((key, i) => (i === k ? { ...key, ...patch } : key)) })
-  }
-
-  private setKey(kind: MotionKind, at: number, j: number, k: number, patch: Partial<Keyframe>): void {
-    const channel = this.channelsOf(kind, at)[j]
-    if (!channel || isJointChannel(channel)) return
-    this.patchChannel(kind, at, j, {
-      ...channel,
-      keys: channel.keys.map((key, i) => (i === k ? { ...key, ...patch } : key))
-    })
-  }
-
-  /** 둘 미만으로 내려가지 않는다 — 단추가 이미 죽어 있지만 밖에서 불릴 수 있다. */
-  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(kind, at, j, { ...channel, keys: (channel.keys as { at: number }[]).filter((_, i) => i !== k) } as Channel)
-  }
-}