@things-factory/figure-ui 10.1.271 → 10.1.273

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",
@@ -1045,12 +1052,12 @@
   "figure.label.data-scale": "skala",
   "figure.label.data-offset": "ofset",
   "figure.label.data-sample": "data sampel",
-  "figure.text.data-sample-explained": "Masukkan satu rekod sebagai JSON untuk melihat apa yang digerakkan. Ia dibaca seperti figure di papan membaca datanya, dan tidak disimpan.",
-  "figure.text.data-sample-moves-all": "Kedudukan dalam data menggerakkan setiap figure dalam pratonton ke sana; di papan, figure yang diberi nilai sama juga berdiri di tempat yang sama.",
+  "figure.text.data-sample-explained": "Masukkan satu rekod sebagai JSON atau JSON5 untuk melihat apa yang digerakkan. Ia dibaca seperti figure di papan membaca datanya, dan tidak disimpan.",
   "figure.label.data-sample-in-preview": "guna pada pratonton",
+  "figure.text.data-sample-shown-in-preview": "Data sampel dipaparkan dalam pratonton; paparan suntingan kekal seperti dibuat.",
+  "figure.button.data-sample-show-preview": "Lihat pratonton",
   "figure.label.data-schema": "bentuk data",
   "figure.text.data-schema-explained": "Bentuk data yang dihantar tapak kepada figure ini. Namakan setiap medan seperti data tapak menamakannya; kumpulkan medan dalam objek dan senarai.",
-  "figure.label.data-bound": "{count} terikat",
   "figure.text.data-no-fields": "Tambah medan pada bentuk data dahulu.",
   "figure.label.data-name": "nama medan",
   "figure.label.data-label": "nama paparan",
@@ -1061,17 +1068,18 @@
   "figure.button.remove-data-field": "buang medan",
   "figure.label.data-from-sample": "buat daripada sampel",
   "figure.text.data-from-sample-explained": "Tampal satu rekod data tapak untuk meneka medannya. Unit, julat dan senarai nilai tidak diteka; tetapkan selepas itu.",
-  "figure.text.data-not-json": "Ini bukan JSON.",
+  "figure.text.data-not-json": "Ini bukan JSON atau JSON5.",
   "figure.text.data-guessed": "{count} medan ditemui.",
   "figure.text.data-guessed-replaces": "{count} medan ditemui. Menggunakannya menggantikan bentuk data semasa.",
   "figure.button.data-use-guessed": "guna bentuk ini",
   "figure.text.data-bindings-explained": "Menyambung nilai data kepada figura. Nombor dipaparkan seadanya, berskala atau melalui jadual julat; teks atau benar/palsu melalui jadual kod. Jadual menetapkan, bagi setiap nilai, warna dan kesan bahagian, kawalan dan kumpulan gerakan sekali gus. Pilih baris untuk menyuntingnya.",
-  "figure.label.data-field": "nilai data",
   "figure.label.data-behavior": "tingkah laku",
   "figure.label.data-seconds": "masa gerak (s)",
   "figure.label.data-paused": "dijeda",
   "figure.label.data-playing": "dimainkan",
   "figure.label.data-otherwise": "nilai lain",
+  "figure.label.data-keep": "kekalkan",
+  "figure.text.data-keep": "Nilai tanpa baris sendiri mengekalkan rupa yang terakhir ditunjukkan oleh jadual ini.",
   "figure.label.data-range-from": "dari",
   "figure.label.data-range-to": "di bawah",
   "figure.button.add-data-range": "tambah julat",
@@ -1094,7 +1102,6 @@
   "figure.button.data-add-rotation": "buat putaran",
   "figure.label.data-none": "tiada",
   "figure.button.remove-data-binding": "buang ikatan",
-  "figure.label.data-items-count": "{count} item",
   "figure.text.data-value-not-a-list": "{path}: bukan senarai.",
   "figure.text.data-value-value-unknown": "{path}: bukan salah satu nilainya.",
   "figure.text.data-value-json-unreadable": "{path}: teks JSON tidak boleh dibaca.",
@@ -1232,10 +1239,7 @@
   "figure.label.data-legend-role": "Peranan petunjuk",
   "figure.label.data-legend-swappable": "Pengguna boleh menggantinya dengan petunjuk",
   "figure.label.data-method": "Kaedah",
-  "figure.label.data-new-field": "Medan baharu",
   "figure.label.data-sample-legend": "Petunjuk sampel",
-  "figure.label.data-table-legend": "petunjuk {name}",
-  "figure.label.data-table-own": "jadual figura",
   "figure.label.data-target-group": "Kumpulan gerakan",
   "figure.label.data-target-inputs": "Kawalan",
   "figure.label.data-target-parts": "Bahagian",
@@ -1322,6 +1326,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",
@@ -1402,5 +1407,20 @@
   "figure.label.clip-interpolation-smooth": "Mula dan henti lancar",
   "figure.label.clip-interpolation-step": "Lompat",
   "figure.text.copy-track-off-key": "Trek lancar hanya boleh dianjak supaya bermula pada salah satu kuncinya. Nilai yang boleh: {seconds} s",
-  "figure.text.mirror-copies-clips": "Gerakan dalam {clips} turut disalin ke salinan."
+  "figure.text.mirror-copies-clips": "Gerakan dalam {clips} turut disalin ke salinan.",
+  "figure.label.data-bindings-title": "Pengikatan data",
+  "figure.label.data-column-field": "Medan",
+  "figure.label.data-column-kind": "Jenis",
+  "figure.label.data-column-moves": "Menggerakkan",
+  "figure.text.data-method-does-value": "Menggunakan nilai data tanpa penukaran.",
+  "figure.text.data-method-does-scale": "Menggunakan nilai data yang didarab dengan skala.",
+  "figure.text.data-method-does-code": "Menggunakan tetapan jadual bagi setiap nilai data.",
+  "figure.text.data-method-does-ranges": "Menggunakan tetapan jadual bagi julat yang merangkumi nilai data.",
+  "figure.label.data-bindings-without-field": "Pengikatan tanpa medan",
+  "figure.button.add": "Tambah",
+  "figure.label.data-targets": "Sasaran",
+  "figure.label.data-target-add": "Tambah sasaran",
+  "figure.label.data-target-choose": "Pilih bahagian atau kawalan",
+  "figure.text.data-no-targets": "Tiada sasaran dipilih.",
+  "figure.button.data-remove-target": "Buang sasaran"
 }

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": "名称",
@@ -1045,12 +1052,12 @@
   "figure.label.data-scale": "倍率",
   "figure.label.data-offset": "偏移",
   "figure.label.data-sample": "样本数据",
-  "figure.text.data-sample-explained": "以 JSON 输入一条数据，查看它驱动什么。读取方式与看板上的 Figure 相同，不会保存。",
-  "figure.text.data-sample-moves-all": "决定位置的值会把预览中的所有 Figure 移到该位置；在看板上，收到相同值的 Figure 也会站在同一位置。",
+  "figure.text.data-sample-explained": "以 JSON 或 JSON5 输入一条数据，查看它驱动什么。读取方式与看板上的 Figure 相同，不会保存。",
   "figure.label.data-sample-in-preview": "应用到预览",
+  "figure.text.data-sample-shown-in-preview": "示例数据显示在预览中，编辑视图保持原样。",
+  "figure.button.data-sample-show-preview": "在预览中查看",
   "figure.label.data-schema": "数据结构",
   "figure.text.data-schema-explained": "现场发给此 Figure 的数据结构。字段名按现场数据的名称填写，可用对象和列表组织。",
-  "figure.label.data-bound": "{count} 个动作",
   "figure.text.data-no-fields": "请先在数据结构中添加字段。",
   "figure.label.data-name": "字段名",
   "figure.label.data-label": "显示名称",
@@ -1061,17 +1068,18 @@
   "figure.button.remove-data-field": "删除字段",
   "figure.label.data-from-sample": "从样本生成",
   "figure.text.data-from-sample-explained": "粘贴一条现场数据即可推测字段。单位、范围和取值列表不会推测，替换后再设置。",
-  "figure.text.data-not-json": "不是 JSON 格式。",
+  "figure.text.data-not-json": "不是 JSON 或 JSON5 格式。",
   "figure.text.data-guessed": "找到 {count} 个字段。",
   "figure.text.data-guessed-replaces": "找到 {count} 个字段。替换后将取代当前数据结构。",
   "figure.button.data-use-guessed": "替换为此结构",
   "figure.text.data-bindings-explained": "将数据值连接到人偶。数字按原样、倍率或区间表显示；文字和真/假按代码表显示。表按值同时决定部件的颜色与效果、控制值和动作组。选择一行即可编辑。",
-  "figure.label.data-field": "数据值",
   "figure.label.data-behavior": "动作",
   "figure.label.data-seconds": "移动时间 (秒)",
   "figure.label.data-paused": "暂停",
   "figure.label.data-playing": "播放",
   "figure.label.data-otherwise": "其他值",
+  "figure.label.data-keep": "保持不变",
+  "figure.text.data-keep": "表中没有的值到来时，保持此表最后显示的样子。",
   "figure.label.data-range-from": "起 (含)",
   "figure.label.data-range-to": "止 (不含)",
   "figure.button.add-data-range": "添加区间",
@@ -1094,7 +1102,6 @@
   "figure.button.data-add-rotation": "生成旋转",
   "figure.label.data-none": "无",
   "figure.button.remove-data-binding": "删除绑定",
-  "figure.label.data-items-count": "{count} 个物品",
   "figure.text.data-value-not-a-list": "{path}：不是列表。",
   "figure.text.data-value-value-unknown": "{path}：不在取值列表中。",
   "figure.text.data-value-json-unreadable": "{path}：无法读取 JSON 文本。",
@@ -1232,10 +1239,7 @@
   "figure.label.data-legend-role": "图例角色",
   "figure.label.data-legend-swappable": "使用方可换成图例",
   "figure.label.data-method": "方式",
-  "figure.label.data-new-field": "新字段",
   "figure.label.data-sample-legend": "示例图例",
-  "figure.label.data-table-legend": "图例 {name}",
-  "figure.label.data-table-own": "人偶自身的表",
   "figure.label.data-target-group": "动作组",
   "figure.label.data-target-inputs": "控制值",
   "figure.label.data-target-parts": "部件",
@@ -1322,6 +1326,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": "渐变箱",
@@ -1402,5 +1407,20 @@
   "figure.label.clip-interpolation-smooth": "平滑启停",
   "figure.label.clip-interpolation-step": "立即切换",
   "figure.text.copy-track-off-key": "平滑运动的轨道只能平移到其关键帧所在的时刻。可用值：{seconds} 秒",
-  "figure.text.mirror-copies-clips": "剪辑“{clips}”中的动作也会一并复制到副本。"
+  "figure.text.mirror-copies-clips": "剪辑“{clips}”中的动作也会一并复制到副本。",
+  "figure.label.data-bindings-title": "数据绑定",
+  "figure.label.data-column-field": "字段",
+  "figure.label.data-column-kind": "类型",
+  "figure.label.data-column-moves": "连接对象",
+  "figure.text.data-method-does-value": "直接应用数据值，不做转换。",
+  "figure.text.data-method-does-scale": "将数据值乘以倍率后应用。",
+  "figure.text.data-method-does-code": "按每个数据值应用表中设定的内容。",
+  "figure.text.data-method-does-ranges": "按数据值所在区间应用表中设定的内容。",
+  "figure.label.data-bindings-without-field": "没有字段的绑定",
+  "figure.button.add": "添加",
+  "figure.label.data-targets": "对象",
+  "figure.label.data-target-add": "添加对象",
+  "figure.label.data-target-choose": "选择部件或控制值",
+  "figure.text.data-no-targets": "尚未选择对象。",
+  "figure.button.data-remove-target": "删除对象"
 }

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`)
+}