takomi 2.1.45 → 2.5.4

package/assets/.agent/skills/hyperframes-media/scripts/wait-bgm.mjs

@@ -1,167 +1,167 @@
-#!/usr/bin/env node
-// Phase 4c pre-assemble helper — wait for detached BGM, then write status.
-//
-// audio.mjs may launch Lyria / MusicGen in a detached process so voice work can
-// keep moving. Before assemble-index.mjs decides whether to emit the BGM audio
-// track, this script gives the background renderer a bounded chance to finish
-// and converts log/process state into a small bgm_status.json file.
-//
-// Always exits 0 for normal pipeline use: missing/failed BGM should not block a
-// voice/captions/SFX render. Structural invocation errors still exit 1.
-//
-// Usage:
-//   node wait-bgm.mjs --audio-meta ./audio_meta.json --hyperframes . \
-//     [--timeout-ms 120000] [--interval-ms 2000] [--out ./bgm_status.json]
-
-import { existsSync, readFileSync, statSync, writeFileSync } from "node:fs";
-import { join, resolve } from "node:path";
-
-const argv = process.argv.slice(2);
-const flag = (name, def) => {
-  const i = argv.indexOf(`--${name}`);
-  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
-};
-
-function die(msg) {
-  console.error(`✗ wait-bgm.mjs: ${msg}`);
-  process.exit(1);
-}
-
-const audioMetaPath = resolve(flag("audio-meta", "./audio_meta.json"));
-const hyperframesDir = resolve(flag("hyperframes", "."));
-const outPath = resolve(flag("out", join(hyperframesDir, "bgm_status.json")));
-const timeoutMs = Math.max(0, Number(flag("timeout-ms", "120000")) || 0);
-const intervalMs = Math.max(250, Number(flag("interval-ms", "2000")) || 2000);
-
-function sleep(ms) {
-  return new Promise((resolveSleep) => setTimeout(resolveSleep, ms));
-}
-
-function isProcessAlive(pid) {
-  if (!pid || !Number.isFinite(Number(pid))) return false;
-  try {
-    process.kill(Number(pid), 0);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function readTail(path, maxChars = 6000) {
-  if (!path || !existsSync(path)) return "";
-  const s = statSync(path);
-  const txt = readFileSync(path, "utf8");
-  return txt.slice(Math.max(0, txt.length - Math.min(maxChars, s.size)));
-}
-
-function detectFailure(logTail) {
-  if (!logTail) return "";
-  const lines = logTail.split("\n");
-  // Bare "out of range" over-matched benign BGM-renderer logs (e.g. a "sample rate
-  // out of range, resampling" notice), mislabelling a healthy track as failed and
-  // silently dropping the music. Anchor to the actual crash strings instead:
-  // Python "(list) index out of range" and torch "index … out of bounds".
-  const idx = lines.findIndex((line) =>
-    /(Traceback|IndexError|RuntimeError|Exception|Killed|No space left|Cannot allocate|index out of range|out of bounds)/i.test(
-      line,
-    ),
-  );
-  if (idx < 0) return "";
-  return lines.slice(idx).join("\n").trim();
-}
-
-function writeStatus(status) {
-  const payload = {
-    generated_at: new Date().toISOString(),
-    ...status,
-  };
-  writeFileSync(outPath, JSON.stringify(payload, null, 2) + "\n");
-  return payload;
-}
-
-if (!existsSync(audioMetaPath)) die(`audio_meta.json missing at ${audioMetaPath}`);
-
-const audioMeta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
-const bgmPath = audioMeta.bgm?.path || "";
-const bgmAbsPath = bgmPath ? join(hyperframesDir, bgmPath) : "";
-const logPath = audioMeta.bgm_log || "";
-const pid = audioMeta.bgm_pid || null;
-
-const base = {
-  enabled: Boolean(audioMeta.bgm_pending && bgmPath),
-  provider: audioMeta.bgm_provider || null,
-  mode: audioMeta.bgm_mode || null,
-  path: bgmPath || null,
-  log: logPath || null,
-  pid,
-  target_duration_s: audioMeta.bgm_target_duration_s || null,
-  seed_duration_s: audioMeta.bgm_seed_duration_s || null,
-  loop_count: audioMeta.bgm_loop_count || null,
-  timeout_ms: timeoutMs,
-};
-
-if (!base.enabled) {
-  const status = writeStatus({
-    ...base,
-    status: "disabled",
-    ready: false,
-    waited_ms: 0,
-    message: "BGM not requested or disabled in audio_meta.json.",
-  });
-  console.log(`✓ bgm: ${status.status} (${status.message})`);
-  process.exit(0);
-}
-
-const started = Date.now();
-let lastFailure = "";
-let lastTail = "";
-
-while (Date.now() - started <= timeoutMs) {
-  if (existsSync(bgmAbsPath)) {
-    const size = statSync(bgmAbsPath).size;
-    writeStatus({
-      ...base,
-      status: "ready",
-      ready: true,
-      waited_ms: Date.now() - started,
-      size_bytes: size,
-      message: `BGM ready at ${bgmPath}.`,
-    });
-    console.log(`✓ bgm: ready (${bgmPath}, ${size}B)`);
-    process.exit(0);
-  }
-
-  lastTail = readTail(logPath);
-  lastFailure = detectFailure(lastTail);
-  const alive = isProcessAlive(pid);
-  if (lastFailure || (!alive && logPath && existsSync(logPath))) {
-    const message = lastFailure
-      ? `BGM renderer failed; see ${logPath}.`
-      : `BGM renderer exited without writing ${bgmPath}; see ${logPath}.`;
-    const status = writeStatus({
-      ...base,
-      status: "failed",
-      ready: false,
-      waited_ms: Date.now() - started,
-      process_alive: alive,
-      message,
-      error_tail: lastFailure || lastTail.slice(-2000),
-    });
-    console.log(`! bgm: failed (${status.message})`);
-    process.exit(0);
-  }
-
-  if (timeoutMs === 0) break;
-  await sleep(Math.min(intervalMs, Math.max(0, timeoutMs - (Date.now() - started))));
-}
-
-const status = writeStatus({
-  ...base,
-  status: "timeout",
-  ready: false,
-  waited_ms: Date.now() - started,
-  process_alive: isProcessAlive(pid),
-  message: `Timed out waiting for ${bgmPath}; assemble-index will skip BGM if still absent.`,
-  log_tail: lastTail.slice(-2000),
-});
-console.log(`! bgm: timeout after ${status.waited_ms}ms (${bgmPath})`);
+#!/usr/bin/env node
+// Phase 4c pre-assemble helper — wait for detached BGM, then write status.
+//
+// audio.mjs may launch Lyria / MusicGen in a detached process so voice work can
+// keep moving. Before assemble-index.mjs decides whether to emit the BGM audio
+// track, this script gives the background renderer a bounded chance to finish
+// and converts log/process state into a small bgm_status.json file.
+//
+// Always exits 0 for normal pipeline use: missing/failed BGM should not block a
+// voice/captions/SFX render. Structural invocation errors still exit 1.
+//
+// Usage:
+//   node wait-bgm.mjs --audio-meta ./audio_meta.json --hyperframes . \
+//     [--timeout-ms 120000] [--interval-ms 2000] [--out ./bgm_status.json]
+
+import { existsSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+const argv = process.argv.slice(2);
+const flag = (name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+
+function die(msg) {
+  console.error(`✗ wait-bgm.mjs: ${msg}`);
+  process.exit(1);
+}
+
+const audioMetaPath = resolve(flag("audio-meta", "./audio_meta.json"));
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const outPath = resolve(flag("out", join(hyperframesDir, "bgm_status.json")));
+const timeoutMs = Math.max(0, Number(flag("timeout-ms", "120000")) || 0);
+const intervalMs = Math.max(250, Number(flag("interval-ms", "2000")) || 2000);
+
+function sleep(ms) {
+  return new Promise((resolveSleep) => setTimeout(resolveSleep, ms));
+}
+
+function isProcessAlive(pid) {
+  if (!pid || !Number.isFinite(Number(pid))) return false;
+  try {
+    process.kill(Number(pid), 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function readTail(path, maxChars = 6000) {
+  if (!path || !existsSync(path)) return "";
+  const s = statSync(path);
+  const txt = readFileSync(path, "utf8");
+  return txt.slice(Math.max(0, txt.length - Math.min(maxChars, s.size)));
+}
+
+function detectFailure(logTail) {
+  if (!logTail) return "";
+  const lines = logTail.split("\n");
+  // Bare "out of range" over-matched benign BGM-renderer logs (e.g. a "sample rate
+  // out of range, resampling" notice), mislabelling a healthy track as failed and
+  // silently dropping the music. Anchor to the actual crash strings instead:
+  // Python "(list) index out of range" and torch "index … out of bounds".
+  const idx = lines.findIndex((line) =>
+    /(Traceback|IndexError|RuntimeError|Exception|Killed|No space left|Cannot allocate|index out of range|out of bounds)/i.test(
+      line,
+    ),
+  );
+  if (idx < 0) return "";
+  return lines.slice(idx).join("\n").trim();
+}
+
+function writeStatus(status) {
+  const payload = {
+    generated_at: new Date().toISOString(),
+    ...status,
+  };
+  writeFileSync(outPath, JSON.stringify(payload, null, 2) + "\n");
+  return payload;
+}
+
+if (!existsSync(audioMetaPath)) die(`audio_meta.json missing at ${audioMetaPath}`);
+
+const audioMeta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+const bgmPath = audioMeta.bgm?.path || "";
+const bgmAbsPath = bgmPath ? join(hyperframesDir, bgmPath) : "";
+const logPath = audioMeta.bgm_log || "";
+const pid = audioMeta.bgm_pid || null;
+
+const base = {
+  enabled: Boolean(audioMeta.bgm_pending && bgmPath),
+  provider: audioMeta.bgm_provider || null,
+  mode: audioMeta.bgm_mode || null,
+  path: bgmPath || null,
+  log: logPath || null,
+  pid,
+  target_duration_s: audioMeta.bgm_target_duration_s || null,
+  seed_duration_s: audioMeta.bgm_seed_duration_s || null,
+  loop_count: audioMeta.bgm_loop_count || null,
+  timeout_ms: timeoutMs,
+};
+
+if (!base.enabled) {
+  const status = writeStatus({
+    ...base,
+    status: "disabled",
+    ready: false,
+    waited_ms: 0,
+    message: "BGM not requested or disabled in audio_meta.json.",
+  });
+  console.log(`✓ bgm: ${status.status} (${status.message})`);
+  process.exit(0);
+}
+
+const started = Date.now();
+let lastFailure = "";
+let lastTail = "";
+
+while (Date.now() - started <= timeoutMs) {
+  if (existsSync(bgmAbsPath)) {
+    const size = statSync(bgmAbsPath).size;
+    writeStatus({
+      ...base,
+      status: "ready",
+      ready: true,
+      waited_ms: Date.now() - started,
+      size_bytes: size,
+      message: `BGM ready at ${bgmPath}.`,
+    });
+    console.log(`✓ bgm: ready (${bgmPath}, ${size}B)`);
+    process.exit(0);
+  }
+
+  lastTail = readTail(logPath);
+  lastFailure = detectFailure(lastTail);
+  const alive = isProcessAlive(pid);
+  if (lastFailure || (!alive && logPath && existsSync(logPath))) {
+    const message = lastFailure
+      ? `BGM renderer failed; see ${logPath}.`
+      : `BGM renderer exited without writing ${bgmPath}; see ${logPath}.`;
+    const status = writeStatus({
+      ...base,
+      status: "failed",
+      ready: false,
+      waited_ms: Date.now() - started,
+      process_alive: alive,
+      message,
+      error_tail: lastFailure || lastTail.slice(-2000),
+    });
+    console.log(`! bgm: failed (${status.message})`);
+    process.exit(0);
+  }
+
+  if (timeoutMs === 0) break;
+  await sleep(Math.min(intervalMs, Math.max(0, timeoutMs - (Date.now() - started))));
+}
+
+const status = writeStatus({
+  ...base,
+  status: "timeout",
+  ready: false,
+  waited_ms: Date.now() - started,
+  process_alive: isProcessAlive(pid),
+  message: `Timed out waiting for ${bgmPath}; assemble-index will skip BGM if still absent.`,
+  log_tail: lastTail.slice(-2000),
+});
+console.log(`! bgm: timeout after ${status.waited_ms}ms (${bgmPath})`);

package/assets/.agent/skills/hyperframes-registry/SKILL.md

@@ -1,101 +1,101 @@
----
-name: hyperframes-registry
-description: Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).
----
-
-# HyperFrames Registry
-
-The registry provides reusable blocks and components installable via `hyperframes add <name>`.
-
-- **Blocks** — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
-- **Components** — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.
-
-## Quick reference
-
-```bash
-hyperframes add data-chart              # install a block
-hyperframes add grain-overlay           # install a component
-hyperframes add shimmer-sweep --dir .   # target a specific project
-hyperframes add data-chart --json       # machine-readable output
-hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)
-```
-
-After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add `data-composition-id` (must match the block's internal composition ID), `data-start`, and `data-track-index` attributes when wiring blocks.
-
-Note: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.
-
-## Install locations
-
-Blocks install to `compositions/<name>.html` by default.
-Components install to `compositions/components/<name>.html` by default.
-
-These paths are configurable in `hyperframes.json`:
-
-```json
-{
-  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
-  "paths": {
-    "blocks": "compositions",
-    "components": "compositions/components",
-    "assets": "assets"
-  }
-}
-```
-
-See [install-locations.md](./references/install-locations.md) for full details.
-
-## Wiring blocks
-
-Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
-
-```html
-<div
-  data-composition-id="data-chart"
-  data-composition-src="compositions/data-chart.html"
-  data-start="2"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
-```
-
-Key attributes:
-
-- `data-composition-src` — path to the block HTML file
-- `data-composition-id` — must match the block's internal ID
-- `data-start` — when the block appears in the host timeline (seconds)
-- `data-duration` — how long the block plays
-- `data-width` / `data-height` — block canvas dimensions
-- `data-track-index` — layer ordering (higher = in front)
-
-See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
-
-## Wiring components
-
-Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):
-
-1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
-2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
-3. Copy the `<style>` block into your composition's styles
-4. Copy any `<script>` content into your composition's script (before your timeline code)
-5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
-
-See [wiring-components.md](./references/wiring-components.md) for full details.
-
-## Discovery
-
-Browse available items:
-
-```bash
-# Read the registry manifest
-curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
-```
-
-Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
-
-See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
-
-## Contributing a new block or component
-
-To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in [contributing.md](./references/contributing.md). Copy-paste starter templates (caption / VFX / component / `registry-item.json`) are in [templates.md](./references/templates.md).
+---
+name: hyperframes-registry
+description: Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).
+---
+
+# HyperFrames Registry
+
+The registry provides reusable blocks and components installable via `hyperframes add <name>`.
+
+- **Blocks** — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
+- **Components** — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.
+
+## Quick reference
+
+```bash
+hyperframes add data-chart              # install a block
+hyperframes add grain-overlay           # install a component
+hyperframes add shimmer-sweep --dir .   # target a specific project
+hyperframes add data-chart --json       # machine-readable output
+hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)
+```
+
+After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add `data-composition-id` (must match the block's internal composition ID), `data-start`, and `data-track-index` attributes when wiring blocks.
+
+Note: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.
+
+## Install locations
+
+Blocks install to `compositions/<name>.html` by default.
+Components install to `compositions/components/<name>.html` by default.
+
+These paths are configurable in `hyperframes.json`:
+
+```json
+{
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  }
+}
+```
+
+See [install-locations.md](./references/install-locations.md) for full details.
+
+## Wiring blocks
+
+Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
+
+```html
+<div
+  data-composition-id="data-chart"
+  data-composition-src="compositions/data-chart.html"
+  data-start="2"
+  data-duration="15"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+Key attributes:
+
+- `data-composition-src` — path to the block HTML file
+- `data-composition-id` — must match the block's internal ID
+- `data-start` — when the block appears in the host timeline (seconds)
+- `data-duration` — how long the block plays
+- `data-width` / `data-height` — block canvas dimensions
+- `data-track-index` — layer ordering (higher = in front)
+
+See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
+
+## Wiring components
+
+Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):
+
+1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
+2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
+3. Copy the `<style>` block into your composition's styles
+4. Copy any `<script>` content into your composition's script (before your timeline code)
+5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
+
+See [wiring-components.md](./references/wiring-components.md) for full details.
+
+## Discovery
+
+Browse available items:
+
+```bash
+# Read the registry manifest
+curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
+```
+
+Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
+
+See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
+
+## Contributing a new block or component
+
+To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in [contributing.md](./references/contributing.md). Copy-paste starter templates (caption / VFX / component / `registry-item.json`) are in [templates.md](./references/templates.md).

package/assets/.agent/skills/hyperframes-registry/examples/add-block.md

@@ -1,51 +1,51 @@
-# Worked Example: Adding a Block
-
-## Scenario
-
-User has an existing HyperFrames project and wants to add an animated chart alongside their video content.
-
-## Steps
-
-### 1. Install the block
-
-```bash
-hyperframes add data-chart
-```
-
-### 2. Wire into index.html
-
-```html
-<div id="stage" data-composition-id="main" data-width="1920" data-height="1080" data-duration="30">
-  <video
-    id="speaker"
-    src="speaker.mp4"
-    data-start="0"
-    data-duration="30"
-    data-track-index="0"
-    style="position: absolute; width: 60%; height: 100%; left: 0; top: 0; object-fit: cover;"
-  ></video>
-
-  <!-- Data chart appears at 5s in the right 40% of the screen -->
-  <div
-    data-composition-id="data-chart"
-    data-composition-src="compositions/data-chart.html"
-    data-start="5"
-    data-duration="15"
-    data-track-index="1"
-    data-width="1920"
-    data-height="1080"
-    style="position: absolute; right: 0; top: 0; width: 40%; height: 100%;"
-  ></div>
-</div>
-```
-
-### 3. Lint and preview
-
-```bash
-hyperframes lint
-hyperframes preview
-```
-
-### 4. Customize (optional)
-
-Edit `compositions/data-chart.html` — data arrays are at the top of the script, colors are in the CSS rules scoped under `[data-composition-id="data-chart"]`.
+# Worked Example: Adding a Block
+
+## Scenario
+
+User has an existing HyperFrames project and wants to add an animated chart alongside their video content.
+
+## Steps
+
+### 1. Install the block
+
+```bash
+hyperframes add data-chart
+```
+
+### 2. Wire into index.html
+
+```html
+<div id="stage" data-composition-id="main" data-width="1920" data-height="1080" data-duration="30">
+  <video
+    id="speaker"
+    src="speaker.mp4"
+    data-start="0"
+    data-duration="30"
+    data-track-index="0"
+    style="position: absolute; width: 60%; height: 100%; left: 0; top: 0; object-fit: cover;"
+  ></video>
+
+  <!-- Data chart appears at 5s in the right 40% of the screen -->
+  <div
+    data-composition-id="data-chart"
+    data-composition-src="compositions/data-chart.html"
+    data-start="5"
+    data-duration="15"
+    data-track-index="1"
+    data-width="1920"
+    data-height="1080"
+    style="position: absolute; right: 0; top: 0; width: 40%; height: 100%;"
+  ></div>
+</div>
+```
+
+### 3. Lint and preview
+
+```bash
+hyperframes lint
+hyperframes preview
+```
+
+### 4. Customize (optional)
+
+Edit `compositions/data-chart.html` — data arrays are at the top of the script, colors are in the CSS rules scoped under `[data-composition-id="data-chart"]`.