@things-factory/figure-ui 10.1.270 → 10.1.272

package/translations/es.json

@@ -484,6 +484,8 @@
   "figure.text.pick-a-shape-above-to-start": "elija una forma arriba para añadir la primera pieza.",
   "figure.text.placement-explained": "define el plano de anclaje en la escena 3D (suelo: AGV/transportador, techo: OHT/polipasto, centro: sensor/dron).",
   "figure.text.pose-as-default-explained": "Escribe la postura que ha definido como valores predeterminados de los parámetros, para que la figura quede así cuando nadie le dé un valor.",
+  "figure.text.control-played": "En reproducción",
+  "figure.text.control-played-explained": "El clip {clip} está moviendo este control. Detén el clip para darle un valor.",
   "figure.text.clear-tried-explained": "borra los valores de control probados aquí. la pose por defecto guardada no cambia y los clips vuelven a moverla.",
   "figure.text.preview-blocked-by-errors": "no se puede mostrar la vista previa por errores de formato. consulte el motivo en la pestaña de madurez.",
   "figure.text.put-on-floor": "Mueve la pieza una vez para que su base quede en el suelo (Y=0). No se mantiene ahí cuando cambia el tamaño; para ello, use “Seguir el tamaño, unida al suelo”.",
@@ -715,6 +717,10 @@
   "figure.label.motion-own-control": "su propio control",
   "figure.label.motion-multiplier": "multiplicador",
   "figure.label.motion-offset": "desplazamiento",
+  "figure.label.pivot-at": "girar en",
+  "figure.label.pivot-top": "extremo superior",
+  "figure.label.pivot-middle": "centro",
+  "figure.label.pivot-bottom": "extremo inferior",
   "figure.label.motion-through": "el eje pasa por",
   "figure.label.motion-follows": "se mueve con {joint} × {multiplier} + {offset}",
   "figure.label.face-opening-left": "abertura izquierda",
@@ -1020,6 +1026,7 @@
   "figure.text.slot-id-taken": "{slot} ya es el nombre de un lugar en esta figura.",
   "figure.label.placement": "sujeción",
   "figure.label.motion-groups": "grupos de movimiento",
+  "figure.label.motion-group-named": "movimiento",
   "figure.label.motion-group": "grupo de movimiento",
   "figure.label.no-motion-group": "sin grupo",
   "figure.label.motion-group-name": "nombre",
@@ -1281,6 +1288,7 @@
   "figure.text.conflict-other-changed": "También difieren ajustes fuera de las partes (nombre, entradas, capacidades...).",
   "figure.text.conflict-latest-unread": "No se pudo leer la última versión, así que no se comparó. No se puede sobrescribir.",
   "figure.button.save-as-copy": "guardar como copia",
+  "figure.button.save-as-new-type": "guardar como un nuevo tipo de figura",
   "figure.button.open-latest": "abrir la última versión en una pestaña nueva",
   "figure.button.overwrite-latest": "sobrescribir con mis ediciones",
   "figure.text.overwrite-latest-warning": "Lo que cambió en la última versión se reemplaza por tus ediciones y no se conserva. ¿Sobrescribir?",
@@ -1321,6 +1329,7 @@
   "figure.button.shift-track": "desplazar",
   "figure.button.copy-track-apply": "copiar",
   "figure.text.copy-clip-needs-group": "Una copia mueve los mismos controles, así que solo se copia un clip que está en un grupo de movimiento.",
+  "figure.text.copy-clip-makes-group": "Copia todas las pistas en un clip con un nombre nuevo. La copia mueve los mismos controles, así que ambos van a un grupo de movimiento nuevo con el nombre de este clip (se reproduce uno a la vez).",
   "figure.label.primitive-pipe": "tubo",
   "figure.label.primitive-duct": "conducto",
   "figure.label.primitive-tapered-box": "caja ahusada",

package/translations/ja.json

@@ -484,6 +484,8 @@
   "figure.text.pick-a-shape-above-to-start": "pick a shape above to add the first part.",
   "figure.text.placement-explained": "3D シーンでの基準面を決めます (床: AGV/コンベヤ、天井: OHT/ホイスト、中心: センサー/ドローン)。",
   "figure.text.pose-as-default-explained": "今の姿勢をパラメータの既定値として書き込みます。値が与えられないとき、この姿勢で立ちます。",
+  "figure.text.control-played": "再生中",
+  "figure.text.control-played-explained": "{clip} クリップがこの操作値を動かしています。クリップを止めると値を与えられます。",
   "figure.text.clear-tried-explained": "プレビューで変えた操作値を消します。保存された既定の姿勢は変わらず、クリップが再び動かします。",
   "figure.text.preview-blocked-by-errors": "形式エラーのためプレビューを表示できません。成熟度タブで理由を確認してください。",
   "figure.text.put-on-floor": "今の位置だけ底面を床(Y=0)に合わせます。サイズが変わると追従しません。付けたままにするには「床に付けてサイズに追従」を使ってください。",
@@ -715,6 +717,10 @@
   "figure.label.motion-own-control": "自分の操作値",
   "figure.label.motion-multiplier": "倍率",
   "figure.label.motion-offset": "オフセット",
+  "figure.label.pivot-at": "回転の中心",
+  "figure.label.pivot-top": "上端",
+  "figure.label.pivot-middle": "中央",
+  "figure.label.pivot-bottom": "下端",
   "figure.label.motion-through": "軸が通る点",
   "figure.label.motion-follows": "{joint} に連動 × {multiplier} + {offset}",
   "figure.label.face-opening-left": "開口部 左",
@@ -1020,6 +1026,7 @@
   "figure.text.slot-id-taken": "{slot} はこの図形ですでに使われている場所の名前です。",
   "figure.label.placement": "取り付け",
   "figure.label.motion-groups": "モーショングループ",
+  "figure.label.motion-group-named": "動作",
   "figure.label.motion-group": "モーショングループ",
   "figure.label.no-motion-group": "グループなし",
   "figure.label.motion-group-name": "名前",
@@ -1281,6 +1288,7 @@
   "figure.text.conflict-other-changed": "部品以外の設定（名前・入力・能力など）も異なります。",
   "figure.text.conflict-latest-unread": "最新版を読み込めなかったため比較できませんでした。上書きはできません。",
   "figure.button.save-as-copy": "コピーとして保存",
+  "figure.button.save-as-new-type": "新しいフィギュアタイプとして保存",
   "figure.button.open-latest": "最新版を新しいタブで開く",
   "figure.button.overwrite-latest": "自分の編集で上書き",
   "figure.text.overwrite-latest-warning": "最新版で変更された内容は自分の編集に置き換えられ、残りません。上書きしますか？",
@@ -1321,6 +1329,7 @@
   "figure.button.shift-track": "ずらす",
   "figure.button.copy-track-apply": "複製",
   "figure.text.copy-clip-needs-group": "複製は同じ操作値を動かすため、動作グループに入れたクリップだけ複製できます。",
+  "figure.text.copy-clip-makes-group": "すべてのトラックを新しい名前のクリップへ複製します。複製は同じ操作値を動かすため、このクリップの名前で動作グループを作り、両方を入れます（同時に再生されるのは一つ）。",
   "figure.label.primitive-pipe": "パイプ",
   "figure.label.primitive-duct": "ダクト",
   "figure.label.primitive-tapered-box": "先細りの箱",

package/translations/ko.json

@@ -484,6 +484,8 @@
   "figure.text.pick-a-shape-above-to-start": "위에서 하나를 골라 첫 부품을 놓으세요.",
   "figure.text.placement-explained": "3D 씬에서 객체의 기준면을 정합니다 (바닥: AGV/컨베이어, 천장: OHT/호이스트, 중심: 센서/드론).",
   "figure.text.pose-as-default-explained": "현재 자세를 파라미터의 기본값으로 저장합니다. 값이 지정되지 않으면 피규어에 이 자세가 적용됩니다.",
+  "figure.text.control-played": "재생 중",
+  "figure.text.control-played-explained": "{clip} 클립이 이 조작값을 움직이고 있습니다. 클립을 멈추면 값을 줄 수 있습니다.",
   "figure.text.clear-tried-explained": "미리 보기에서 바꾼 조작값을 지웁니다. 저장된 기본 자세는 바뀌지 않고, 클립이 다시 움직입니다.",
   "figure.text.preview-blocked-by-errors": "형식 오류로 미리보기를 표시할 수 없습니다. 검사 탭에서 사유를 확인하세요.",
   "figure.text.put-on-floor": "지금 위치만 바닥(Y=0)에 맞춥니다. 크기가 바뀌면 따라가지 않습니다. 계속 붙어 있게 하려면 ‘바닥에 붙여 크기 따라가기’를 쓰세요.",
@@ -715,6 +717,10 @@
   "figure.label.motion-own-control": "제 조작값으로",
   "figure.label.motion-multiplier": "배율",
   "figure.label.motion-offset": "더하기",
+  "figure.label.pivot-at": "회전 중심",
+  "figure.label.pivot-top": "위 끝",
+  "figure.label.pivot-middle": "가운데",
+  "figure.label.pivot-bottom": "아래 끝",
   "figure.label.motion-through": "축이 지나는 점",
   "figure.label.motion-follows": "따라 움직임: {joint} × {multiplier} + {offset}",
   "figure.label.face-opening-left": "개구부 왼쪽",
@@ -1020,6 +1026,7 @@
   "figure.text.slot-id-taken": "이 피규어에서 이미 쓰는 자리 이름입니다: {slot}.",
   "figure.label.placement": "붙이기",
   "figure.label.motion-groups": "동작 그룹",
+  "figure.label.motion-group-named": "동작",
   "figure.label.motion-group": "동작 그룹",
   "figure.label.no-motion-group": "그룹 없음",
   "figure.label.motion-group-name": "이름",
@@ -1281,6 +1288,7 @@
   "figure.text.conflict-other-changed": "부품 밖의 설정(이름·입력·능력 등)도 다릅니다.",
   "figure.text.conflict-latest-unread": "최신본을 읽지 못해 비교하지 못했습니다. 덮어쓰기는 할 수 없습니다.",
   "figure.button.save-as-copy": "사본으로 저장",
+  "figure.button.save-as-new-type": "새 피규어 타입으로 저장",
   "figure.button.open-latest": "최신본을 새 탭에서 열기",
   "figure.button.overwrite-latest": "내 편집으로 덮어쓰기",
   "figure.text.overwrite-latest-warning": "최신본에서 바뀐 내용은 내 편집으로 바뀌고 남지 않습니다. 덮어쓸까요?",
@@ -1321,6 +1329,7 @@
   "figure.button.shift-track": "시간 밀기",
   "figure.button.copy-track-apply": "복사",
   "figure.text.copy-clip-needs-group": "복사본은 같은 조작값을 움직이므로 동작 묶음에 넣은 클립만 복사할 수 있습니다.",
+  "figure.text.copy-clip-makes-group": "모든 트랙을 새 이름의 클립으로 복사합니다. 복사본은 같은 조작값을 움직이므로, 이 클립의 이름으로 동작 묶음을 만들어 둘을 함께 넣습니다(한 번에 하나만 재생).",
   "figure.label.primitive-pipe": "관",
   "figure.label.primitive-duct": "덕트",
   "figure.label.primitive-tapered-box": "가늘어지는 상자",

package/translations/ms.json

@@ -484,6 +484,8 @@
   "figure.text.pick-a-shape-above-to-start": "pick a shape above to add the first part.",
   "figure.text.placement-explained": "menetapkan satah rujukan dalam adegan 3D (lantai: AGV/penghantar, siling: OHT/hois, pusat: sensor/dron).",
   "figure.text.pose-as-default-explained": "Menulis postur semasa sebagai nilai lalai parameter, supaya figura berdiri begini apabila tiada nilai diberi.",
+  "figure.text.control-played": "Dimainkan",
+  "figure.text.control-played-explained": "Klip {clip} sedang menggerakkan kawalan ini. Hentikan klip untuk memberinya nilai.",
   "figure.text.clear-tried-explained": "mengosongkan nilai kawalan yang dicuba di sini. pose lalai yang disimpan tidak berubah, dan klip menggerakkannya semula.",
   "figure.text.preview-blocked-by-errors": "pratonton tidak dapat dipaparkan kerana ralat format. lihat tab kematangan untuk sebabnya.",
   "figure.text.put-on-floor": "Mengalihkan bahagian sekali supaya bahagian bawahnya di lantai (Y=0). Ia tidak kekal di situ apabila saiz berubah; untuk itu, gunakan “Ikut saiz, dilekatkan pada lantai”.",
@@ -715,6 +717,10 @@
   "figure.label.motion-own-control": "kawalan sendiri",
   "figure.label.motion-multiplier": "pendarab",
   "figure.label.motion-offset": "ofset",
+  "figure.label.pivot-at": "pusing pada",
+  "figure.label.pivot-top": "hujung atas",
+  "figure.label.pivot-middle": "tengah",
+  "figure.label.pivot-bottom": "hujung bawah",
   "figure.label.motion-through": "paksi melalui",
   "figure.label.motion-follows": "bergerak bersama {joint} × {multiplier} + {offset}",
   "figure.label.face-opening-left": "bukaan kiri",
@@ -1020,6 +1026,7 @@
   "figure.text.slot-id-taken": "{slot} sudah menjadi nama tempat dalam figura ini.",
   "figure.label.placement": "lekatan",
   "figure.label.motion-groups": "kumpulan gerakan",
+  "figure.label.motion-group-named": "gerakan",
   "figure.label.motion-group": "kumpulan gerakan",
   "figure.label.no-motion-group": "tiada kumpulan",
   "figure.label.motion-group-name": "nama",
@@ -1281,6 +1288,7 @@
   "figure.text.conflict-other-changed": "Tetapan di luar bahagian (nama, input, keupayaan...) juga berbeza.",
   "figure.text.conflict-latest-unread": "Versi terkini tidak dapat dibaca, jadi tidak dibandingkan. Ia tidak boleh ditulis ganti.",
   "figure.button.save-as-copy": "simpan sebagai salinan",
+  "figure.button.save-as-new-type": "simpan sebagai jenis figure baharu",
   "figure.button.open-latest": "buka versi terkini dalam tab baharu",
   "figure.button.overwrite-latest": "tulis ganti dengan suntingan saya",
   "figure.text.overwrite-latest-warning": "Perubahan dalam versi terkini akan diganti oleh suntingan anda dan tidak disimpan. Tulis ganti?",
@@ -1321,6 +1329,7 @@
   "figure.button.shift-track": "anjak",
   "figure.button.copy-track-apply": "salin",
   "figure.text.copy-clip-needs-group": "Salinan menggerakkan kawalan yang sama, jadi hanya klip dalam kumpulan gerakan boleh disalin.",
+  "figure.text.copy-clip-makes-group": "Menyalin semua trek ke klip bernama baharu. Salinan menggerakkan kawalan yang sama, jadi kedua-duanya dimasukkan ke kumpulan gerakan baharu bernama klip ini (satu dimainkan pada satu masa).",
   "figure.label.primitive-pipe": "paip",
   "figure.label.primitive-duct": "salur",
   "figure.label.primitive-tapered-box": "kotak tirus",

package/translations/zh.json

@@ -484,6 +484,8 @@
   "figure.text.pick-a-shape-above-to-start": "pick a shape above to add the first part.",
   "figure.text.placement-explained": "设置 3D 场景中的基准面 (地面: AGV/输送机，天花板: OHT/吊车，中心: 传感器/无人机)。",
   "figure.text.pose-as-default-explained": "把当前姿态写为参数默认值。没有给值时，图形以此姿态站立。",
+  "figure.text.control-played": "播放中",
+  "figure.text.control-played-explained": "{clip} 片段正在驱动此控制值。停止片段后即可赋值。",
   "figure.text.clear-tried-explained": "清除在预览中修改的控制值。已保存的默认姿态不变,剪辑会再次驱动它。",
   "figure.text.preview-blocked-by-errors": "由于格式错误无法显示预览。请在成熟度标签页查看原因。",
   "figure.text.put-on-floor": "只把当前位置的底面对齐到地面（Y=0）。尺寸变化时不会跟随。若要保持附着，请使用“附着地面并跟随尺寸”。",
@@ -715,6 +717,10 @@
   "figure.label.motion-own-control": "自身控制值",
   "figure.label.motion-multiplier": "倍率",
   "figure.label.motion-offset": "偏移",
+  "figure.label.pivot-at": "转动中心",
+  "figure.label.pivot-top": "上端",
+  "figure.label.pivot-middle": "中间",
+  "figure.label.pivot-bottom": "下端",
   "figure.label.motion-through": "轴经过的点",
   "figure.label.motion-follows": "跟随 {joint} × {multiplier} + {offset}",
   "figure.label.face-opening-left": "开口 左侧",
@@ -1020,6 +1026,7 @@
   "figure.text.slot-id-taken": "{slot} 已是此图形中某个位置的名称。",
   "figure.label.placement": "附着",
   "figure.label.motion-groups": "动作组",
+  "figure.label.motion-group-named": "动作",
   "figure.label.motion-group": "动作组",
   "figure.label.no-motion-group": "不分组",
   "figure.label.motion-group-name": "名称",
@@ -1281,6 +1288,7 @@
   "figure.text.conflict-other-changed": "部件以外的设置（名称、输入、能力等）也不同。",
   "figure.text.conflict-latest-unread": "无法读取最新版本，因此未能比较。无法覆盖。",
   "figure.button.save-as-copy": "另存为副本",
+  "figure.button.save-as-new-type": "另存为新的 figure 类型",
   "figure.button.open-latest": "在新标签页中打开最新版本",
   "figure.button.overwrite-latest": "用我的编辑覆盖",
   "figure.text.overwrite-latest-warning": "最新版本中的更改将被你的编辑替换且不会保留。要覆盖吗？",
@@ -1321,6 +1329,7 @@
   "figure.button.shift-track": "平移",
   "figure.button.copy-track-apply": "复制",
   "figure.text.copy-clip-needs-group": "副本驱动相同的控制值，因此只能复制已放入动作组的片段。",
+  "figure.text.copy-clip-makes-group": "将所有轨道复制为新名称的片段。副本驱动相同的控制值，因此以此片段的名称创建动作组并放入两者（同一时间只播放一个）。",
   "figure.label.primitive-pipe": "管",
   "figure.label.primitive-duct": "风管",
   "figure.label.primitive-tapered-box": "渐变箱",

package/tutorial/humanoid/README.md

@@ -0,0 +1,22 @@
+# Humanoid walk/run tutorial — recorder
+
+The lesson itself lives in operato-figure: `helps/figure/tutorial-humanoid(.ko).html`, with its videos in
+`helps/figure/media/humanoid/`. This folder re-records those videos whenever the modeller's screens change.
+
+- `chapters.mjs` — the eight chapters, one per section of the lesson, in the order a person works. Values here and in
+  the lesson's tables must stay the same.
+- `lib.mjs` — the "hands": finds a button or field by the words on the screen, moves a drawn pointer there and clicks
+  or types with the real mouse and keyboard. Nothing reaches into the editor's state.
+- `record.mjs` — opens the modeller and plays the chapters, one WebM per chapter plus its last screen as PNG.
+- `encode.mjs` — WebM → MP4 (H.264) and PNG → poster JPG for the lesson.
+
+```bash
+# 1. a modeller page that opens an empty figure in Korean (the recordings show the Korean interface)
+# 2. a dry run without video: every chapter must pass
+node tutorial/humanoid/record.mjs --url http://localhost:5179/?fresh --out ./recordings --no-video
+# 3. record at lesson pace, then encode into the lesson's media folder
+node tutorial/humanoid/record.mjs --url http://localhost:5179/?fresh --out ./recordings --pace 1.2
+node tutorial/humanoid/encode.mjs ./recordings ../../../operato-application/packages/operato-figure/helps/figure/media/humanoid
+```
+
+A chapter that fails leaves `<id>-failed.png` showing where the hands stopped. ffmpeg must be on the PATH.

package/tutorial/humanoid/chapters.mjs

@@ -0,0 +1,247 @@
+/*
+ * 휴머노이드 걷기·뛰기 튜토리얼의 장(章)들 -- 교재(operato-figure helps의 tutorial-humanoid)의 절과 하나씩 맞물린다.
+ * 한 장은 사람이 하는 그대로의 순서다: 부품을 고르고, 이름과 크기를 넣고, 붙이고, 관절을 넣고, 자세를 기록한다.
+ * 장은 앞 장이 끝난 모습에서 시작하므로 처음부터 차례로 실행한다.
+ */
+
+/* Where a part's fastening dialog is: the attach link of a part not yet fastened, or the change link of one that is. */
+const openAttach = h => h.click('「다른 부품에 붙이기」 or 「바꾸기」', t => t.byWords(['button', 'a'], '다른 부품에 붙이기')[0] || t.byWords(['button', 'a'], '바꾸기')[0])
+const inDialog = (h, words) => h.click(`dialog 「${words}」`, (t, w) => t.byWords(['button', 'span', 'label', 'div', 'text'], w).filter(e => t.inDialog(e) && t.words(e) === w).pop(), words)
+const apply = h => h.click('the dialog\'s 「붙이기」/「적용」', t => t.query('md-filled-button').filter(b => ['붙이기', '적용'].includes(t.words(b))).pop())
+
+async function addPart(h, shape, name, size) {
+  await h.buttonTitled(shape)
+  await h.tab('속성')
+  await h.field('이름', name)
+  await h.tab('크기')
+  if (shape === '구') {
+    await h.field('X·Z · 지름', size[0])
+    await h.field('Y · 지름', size[1])
+  } else {
+    await h.field('X', size[0])
+    await h.field('Y', size[1])
+    await h.field('Z', size[2])
+  }
+  await h.tab('속성')
+}
+
+async function attach(h, target, face) {
+  await openAttach(h)
+  await inDialog(h, target)
+  if (face) await inDialog(h, face)
+}
+
+async function joint(h, name, min, max, pivot) {
+  await h.tab('움직임')
+  await h.field('조작 이름', name)
+  await h.typeInto('range min', t => t.fieldAfter('범위 (deg)', 0) || t.fieldAfter('범위 (도)', 0), min)
+  await h.typeInto('range max', t => t.fieldAfter('범위 (deg)', 1) || t.fieldAfter('범위 (도)', 1), max)
+  /* 회전 중심을 이름으로: 위 끝 · 가운데 · 아래 끝 -- 숫자는 버튼이 채운다. */
+  if (pivot) await h.click(`pivot ${pivot}`, (t, p) => t.query(`md-filter-chip[data-value="${p}"]`)[0], pivot)
+  await h.button('움직임 추가')
+}
+
+/*
+ * A pose, on the pose bar right under the controls: the clip chosen there, its moment typed, the eight controls typed,
+ * then 「현재 자세 기록」 -- no scrolling down to the clip.
+ */
+async function pose(h, clip, seconds, values) {
+  const bar = 'div[pose-bar]'
+  const chosen = await h.page.evaluate((b, c) => {
+    const t = window.__tut
+    const choice = t.all().find(e => e.matches && e.matches(`${b} span[clip-choices] button`) && t.words(e) === c)
+    return !choice || choice.getAttribute('aria-pressed') === 'true'
+  }, bar, clip)
+  if (!chosen) await h.click(`pose bar ${clip}`, (t, b, c) => t.all().find(e => e.matches && e.matches(`${b} span[clip-choices] button`) && t.words(e) === c && t.visible(e)), bar, clip)
+  await h.typeInto(`${clip} time`, (t, b) => t.bring(`${b} input[type=number]`), seconds, bar)
+  for (const [control, value] of Object.entries(values))
+    await h.typeInto(`control ${control}`, (t, c) => t.bring(`input[type=number][aria-label="${c}"]`), value, control)
+  await h.click(`${clip} 「현재 자세 기록」`, (t, b) => t.bring(`${b} button[remember-pose]`), bar)
+}
+
+export const chapters = [
+  {
+    id: '01-pelvis',
+    title: '1. 시작 — 골반',
+    note: '바닥에 서는 피규어를 만들고, 몸의 중심인 골반을 880 mm 띄웁니다',
+    async run(h) {
+      await h.say('어디에 두는 설비인지 고릅니다', '사람은 바닥에 섭니다')
+      await h.click('start 바닥', t => t.byWords(['button'], '바닥')[0])
+      await h.say('첫 부품으로 상자를 놓습니다')
+      await h.click('start box', t => t.query('button[start-shape="box"]')[0])
+      await h.say('이름을 pelvis로 바꿉니다', '이름은 나중에 관절·데이터 연결에 그대로 쓰입니다')
+      await h.field('이름', 'pelvis')
+      await h.say('크기 탭에서 300 × 180 × 200 mm', 'Y가 위쪽입니다')
+      await h.tab('크기')
+      await h.field('X', 300)
+      await h.field('Y', 180)
+      await h.field('Z', 200)
+      await h.tab('속성')
+      await h.say('「바꾸기」 → 세부 → 간격 880 mm', '다리가 들어갈 자리만큼 바닥에서 띄웁니다')
+      await h.button('바꾸기')
+      await h.click('세부', t => t.byWords(['summary'], '세부')[0] || t.byWords(['summary'], '세부 · ').pop())
+      await h.typeInDialog('gap', t => t.query('input[gap]')[0], 880)
+      await apply(h)
+      await h.say('')
+    }
+  },
+  {
+    id: '02-body',
+    title: '2. 몸통과 머리',
+    note: '「다른 부품에 붙이기」로 부품을 쌓습니다',
+    async run(h) {
+      await h.say('상자를 하나 더 놓고 torso라고 이름 붙입니다', '340 × 500 × 200 mm')
+      await addPart(h, '상자', 'torso', [340, 500, 200])
+      await h.say('pelvis에 붙입니다', '비어 있는 윗면 가운데가 기본입니다')
+      await attach(h, 'pelvis')
+      await apply(h)
+      await h.say('구를 놓고 head — 지름 200 × 240', '구는 가로(X·Z) 지름과 세로(Y) 지름 두 가지로 정합니다')
+      await addPart(h, '구', 'head', [200, 240])
+      await attach(h, 'torso')
+      await apply(h)
+      await h.say('')
+    }
+  },
+  {
+    id: '03-left-leg',
+    title: '3. 왼쪽 다리와 관절',
+    note: '허벅지 → 정강이 → 발, 고관절과 무릎',
+    async run(h) {
+      await h.say('l-thigh: 130 × 420 × 140', '왼쪽(−X) 부품은 l- 로 시작합니다 — 대칭 복사가 r- 로 바꿔 줍니다')
+      await addPart(h, '상자', 'l-thigh', [130, 420, 140])
+      await h.say('pelvis에 붙이면 비어 있는 아랫면이 기본입니다')
+      await attach(h, 'pelvis')
+      await h.say('세부 → 좌우 위치 「왼쪽 끝 정렬」', '골반의 왼쪽 가장자리에 맞춥니다')
+      await h.click('세부', t => t.byWords(['summary'], '세부')[0] || t.query('details[fasten-detail] summary')[0])
+      await h.click('왼쪽 끝 정렬', t => t.byWords(['button'], '왼쪽 끝 정렬')[0])
+      await apply(h)
+      await h.say('움직임 탭: 회전 · 축 X, 이름 l-hip, −60 ~ 60°', '다른 부품에 붙은 부품은 「회전」이 기본입니다')
+      await joint(h, 'l-hip', -60, 60)
+      await h.say('l-shin: 110 × 420 × 120 → l-thigh 아랫면')
+      await addPart(h, '상자', 'l-shin', [110, 420, 120])
+      await attach(h, 'l-thigh')
+      await apply(h)
+      await h.say('무릎 l-knee: 0 ~ 130°', '+ 가 뒤로 굽는 방향입니다 (반투명 미리보기로 확인)')
+      await joint(h, 'l-knee', 0, 130)
+      await h.say('l-foot: 110 × 70 × 240 → l-shin 아랫면')
+      await addPart(h, '상자', 'l-foot', [110, 70, 240])
+      await attach(h, 'l-shin')
+      await apply(h)
+      await h.say('')
+    }
+  },
+  {
+    id: '04-left-arm',
+    title: '4. 왼팔과 관절',
+    note: '옆면에 붙이고 위 끝에 맞추기, 회전 중심 옮기기',
+    async run(h) {
+      await h.say('l-upperarm: 90 × 300 × 90')
+      await addPart(h, '상자', 'l-upperarm', [90, 300, 90])
+      await h.say('torso에 붙이면 비어 있는 「왼쪽 면」이 기본입니다')
+      await attach(h, 'torso')
+      await h.say('세부 → 위아래 위치 「위 끝 정렬」', '어깨 높이에 맞춥니다')
+      await h.click('세부', t => t.byWords(['summary'], '세부')[0] || t.query('details[fasten-detail] summary')[0])
+      await h.click('위 끝 정렬', t => t.byWords(['button'], '위 끝 정렬')[0])
+      await apply(h)
+      await h.say('어깨 l-shoulder: −60 ~ 60°, 회전 중심 「위 끝」', '위 끝 정렬로 붙였으니 이미 위 끝이 골라져 있습니다 — 숫자는 버튼이 채웁니다')
+      await joint(h, 'l-shoulder', -60, 60, 'top')
+      await h.say('l-forearm: 80 × 280 × 80 → l-upperarm', '세로로 긴 팔에 붙이면 아랫면이 기본입니다')
+      await addPart(h, '상자', 'l-forearm', [80, 280, 80])
+      await attach(h, 'l-upperarm')
+      await apply(h)
+      await h.say('팔꿈치 l-elbow: −130 ~ 0°', '− 가 앞으로 굽는 방향입니다')
+      await joint(h, 'l-elbow', -130, 0)
+      await h.say('')
+    }
+  },
+  {
+    id: '05-mirror',
+    title: '5. 대칭 복사로 오른쪽',
+    note: '아래 붙은 부품과 관절까지 한 번에',
+    async run(h) {
+      for (const part of ['l-thigh', 'l-upperarm']) {
+        await h.say(`${part} 선택 → 속성 → 더 보기 → 「X 반대편에」`, '이름 앞머리 l- → r- 가 자동으로 채워집니다')
+        await h.click(`list ${part}`, (t, p) => t.all().filter(e => t.visible(e) && e.getBoundingClientRect().left < 220 && [...e.childNodes].filter(n => n.nodeType === 3).map(n => n.textContent).join('').trim() === p)[0], part)
+        await h.tab('속성')
+        await h.click('더 보기', t => t.byWords(['summary', 'button', 'span'], '더 보기')[0])
+        await h.click('X 반대편에', t => t.byWords(['button'], 'X 반대편에')[0])
+        await h.say('「움직임 방향 유지」를 켜면 좌우 관절의 + 방향이 같아집니다', '걷기 자세를 좌우 같은 숫자 규칙으로 넣을 수 있습니다')
+        await h.click('움직임 방향 유지', t => t.byWords(['label'], '움직임 방향 유지')[0])
+        await h.click('X 반대편에 (confirm)', t => t.byWords(['button'], 'X 반대편에').pop())
+      }
+      await h.page.keyboard.press('Escape')
+      await h.say('정면 뷰로 확인합니다')
+      await h.click('Front view', t => t.all().find(e => e.getAttribute && e.getAttribute('title') === 'Front' && t.visible(e)))
+      await h.wait(1500)
+      await h.click('Perspective view', t => t.all().find(e => e.getAttribute && e.getAttribute('title') === 'Perspective' && t.visible(e)))
+      await h.say('')
+    }
+  },
+  {
+    id: '06-walk',
+    title: '6. 걷기 — 자세 4개 기록',
+    note: '시간을 옮기고, 조작값을 넣고, 「현재 자세 기록」',
+    async run(h) {
+      await h.page.keyboard.press('Escape')
+      await h.tab('움직임')
+      await h.say('클립 이름 walk, 길이 1.1초 → 「재생 추가」', '첫 트랙 하나만 만들면 나머지는 자세 기록이 만들어 줍니다')
+      await h.field('clip 이름', 'walk')
+      await h.field('길이 (초)', 1.1)
+      await h.button('재생 추가')
+      const walk = [
+        [0, { 'l-hip': -25, 'r-hip': 15, 'l-knee': 5, 'r-knee': 20, 'l-shoulder': 20, 'r-shoulder': -20, 'l-elbow': -15, 'r-elbow': -30 }, '0초 — 왼발 내딛기'],
+        [0.275, { 'l-hip': -5, 'r-hip': -10, 'l-knee': 10, 'r-knee': 55, 'l-shoulder': 0, 'r-shoulder': 0, 'l-elbow': -20, 'r-elbow': -20 }, '0.275초 — 오른발 지나가기'],
+        [0.55, { 'l-hip': 15, 'r-hip': -25, 'l-knee': 20, 'r-knee': 5, 'l-shoulder': -20, 'r-shoulder': 20, 'l-elbow': -30, 'r-elbow': -15 }, '0.55초 — 오른발 내딛기'],
+        [0.825, { 'l-hip': -10, 'r-hip': -5, 'l-knee': 55, 'r-knee': 10, 'l-shoulder': 0, 'r-shoulder': 0, 'l-elbow': -20, 'r-elbow': -20 }, '0.825초 — 왼발 지나가기']
+      ]
+      for (const [at, values, words] of walk) {
+        await h.say(words, '고관절 − 는 앞으로, 무릎 + 는 뒤로 굽힘. 1.1초(끝)는 0초와 같게 자동으로 맞춰집니다')
+        await pose(h, 'walk', at, values)
+      }
+      await h.say('')
+    }
+  },
+  {
+    id: '07-run',
+    title: '7. 뛰기 — 클립 복사 후 자세 바꾸기',
+    note: '복사하면 걷기·뛰기가 한 동작 그룹이 됩니다',
+    async run(h) {
+      await h.say('walk의 「클립 복사」', '복사본과 함께 동작 그룹이 생깁니다 — 한 번에 하나만 재생')
+      await h.click('copy walk', t => { const top = t.clipTop('walk'); return t.query('button[copy-clip]').find(b => b.getBoundingClientRect().top > top) })
+      await h.say('이름 run, 길이 0.7초', '키 시각은 길이에 맞춰 함께 줄어듭니다')
+      await h.typeInto('walk-copy name', t => { t.clipTop('walk-copy'); return t.all().find(e => e.tagName === 'INPUT' && e.value === 'walk-copy') }, 'run')
+      await h.typeInto('run length', t => { const top = t.clipTop('run'); return t.fieldAfter('길이 (초)', 0, { after: top - 5 }) }, 0.7)
+      const run = [
+        [0, { 'l-hip': -40, 'r-hip': 25, 'l-knee': 20, 'r-knee': 75, 'l-shoulder': 40, 'r-shoulder': -45, 'l-elbow': -90, 'r-elbow': -95 }, '0초 — 왼발 착지, 팔은 90° 굽혀 크게'],
+        [0.175, { 'l-hip': -5, 'r-hip': -45, 'l-knee': 35, 'r-knee': 110, 'l-shoulder': 0, 'r-shoulder': 0, 'l-elbow': -90, 'r-elbow': -90 }, '0.175초 — 오른 무릎 높이 들기'],
+        [0.35, { 'l-hip': 25, 'r-hip': -40, 'l-knee': 75, 'r-knee': 20, 'l-shoulder': -45, 'r-shoulder': 40, 'l-elbow': -95, 'r-elbow': -90 }, '0.35초 — 오른발 착지'],
+        [0.525, { 'l-hip': -45, 'r-hip': -5, 'l-knee': 110, 'r-knee': 35, 'l-shoulder': 0, 'r-shoulder': 0, 'l-elbow': -90, 'r-elbow': -90 }, '0.525초 — 왼 무릎 높이 들기']
+      ]
+      for (const [at, values, words] of run) {
+        await h.say(words)
+        await pose(h, 'run', at, values)
+      }
+      await h.say('')
+    }
+  },
+  {
+    id: '08-preview',
+    title: '8. 미리보기에서 재생',
+    note: '동작 그룹에서 클립을 고르고 배속을 올립니다',
+    async run(h) {
+      await h.button('미리보기')
+      await h.wait(1500)
+      await h.say('「동작」 그룹: 클립 walk, 배속 1', '복사로 만든 그룹은 「동작」이라는 이름으로 생깁니다')
+      await h.click('walk clip', t => t.query('span[clip-choices] button').find(b => t.words(b) === 'walk'))
+      const speed = await h.locate('speed', t => t.query('input[type=range][max="3"]').pop())
+      await h.drag({ x: speed.x - speed.w / 2 + 2, y: speed.y }, { x: speed.x - speed.w / 2 + speed.w / 3, y: speed.y })
+      await h.wait(4000)
+      await h.say('클립 「run」 — 같은 배속으로 바뀌어 뜁니다', '조작값 줄은 「재생 중」으로 잠깁니다')
+      await h.click('run clip', t => t.query('span[clip-choices] button').find(b => t.words(b) === 'run'))
+      await h.wait(4000)
+      await h.say('')
+    }
+  }
+]
+
+export { addPart, attach, apply, joint, pose, openAttach, inDialog }

package/tutorial/humanoid/encode.mjs

@@ -0,0 +1,26 @@
+/*
+ * 녹화한 장(章) 영상을 교재에 싣는 형태로 바꾼다: WebM → MP4(H.264, 웹 재생용 faststart), 장의 마지막 화면 → 포스터 JPG.
+ *
+ *   node tutorial/humanoid/encode.mjs <녹화 폴더> <교재 media 폴더>
+ *
+ * 교재 media 폴더는 operato-figure 의 helps/figure/media/humanoid 이다. ffmpeg 이 PATH 에 있어야 한다.
+ */
+import { execFileSync } from 'node:child_process'
+import { mkdirSync, readdirSync, statSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+
+const [from, to] = process.argv.slice(2).map(p => p && resolve(p))
+if (!from || !to) {
+  console.error('usage: node tutorial/humanoid/encode.mjs <recordings> <media folder>')
+  process.exit(1)
+}
+mkdirSync(to, { recursive: true })
+
+for (const name of readdirSync(from).filter(n => n.endsWith('.webm')).sort()) {
+  const id = name.slice(0, -5)
+  const mp4 = join(to, `${id}.mp4`)
+  /* 1280 wide keeps the panels' words legible; crf 28 and no sound keep a chapter to a few MB. */
+  execFileSync('ffmpeg', ['-loglevel', 'error', '-y', '-i', join(from, name), '-vf', 'scale=1280:-2,fps=30', '-c:v', 'libx264', '-preset', 'slow', '-crf', '28', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', '-an', mp4])
+  execFileSync('ffmpeg', ['-loglevel', 'error', '-y', '-i', join(from, `${id}.png`), '-vf', 'scale=1280:-2', '-q:v', '4', join(to, `${id}.jpg`)])
+  console.log(`${id}.mp4 ${(statSync(mp4).size / 1e6).toFixed(1)} MB`)
+}