Files
James Russo 08fb1de61f feat(cli): add command + hyperframes.json (#256)
## What

PR 5/17 of the catalog system rollout. Adds the `hyperframes add` verb for installing blocks and components from the registry into an existing project, plus the `hyperframes.json` project config that tells `add` which registry to use and where to drop files. Stacks on #255.

- **`packages/cli/src/commands/add.ts`** — new `hyperframes add <name>` command. Resolves an item, validates target paths, installs files in parallel, builds an include snippet, copies it to the clipboard. Exposes a testable `runAdd(opts)` function; the citty default wraps it with console output + exit handling
- **`packages/cli/src/utils/projectConfig.ts`** — read/write/normalize `hyperframes.json`. Tolerant to missing and partial configs
- **`packages/cli/src/utils/clipboard.ts`** — minimal cross-platform clipboard (pbcopy / clip.exe / wl-copy / xclip / xsel). Zero deps. Gracefully no-ops in headless environments
- **`packages/cli/src/commands/init.ts`** — write `hyperframes.json` during scaffold if not already present
- **`packages/cli/src/cli.ts`** + **`help.ts`** — register `add` under Getting Started (directly below `init`)

Design doc: [Hyperframes Catalog System](https://www.notion.so/heygen/Hyperframes-Catalog-System-Design-Plan-341449792c69813f899dcd53b4c0383a).

## UX

```bash
# Scaffold a project (now writes hyperframes.json too)
npx hyperframes init my-video --example blank
cd my-video

# Add a block — files land, snippet copied to clipboard
npx hyperframes add claude-code-window
#  ✓ Added claude-code-window (hyperframes:block)
#    compositions/claude-code-window.html
#
#  Include snippet:
#    <iframe src="compositions/claude-code-window.html" data-start="0" data-duration="6"></iframe>
#
#  Copied to clipboard — paste into your host composition.

# Add a component effect
npx hyperframes add shader-wipe

# Headless / CI — no clipboard, JSON output for tooling
npx hyperframes add shader-wipe --no-clipboard --json
```

Running `hyperframes add warm-grain` (an example) errors clearly pointing to `init --example`.

## Docs (bundled in this PR per the tracker principle)

- `docs/packages/cli.mdx` — new `add` subsection under Commands (flags, examples, trigger rules) + new `hyperframes.json` section describing the config file shape

## Tests

- **`packages/cli/src/commands/add.test.ts`** — 11 tests:
  - `remapTarget` / `buildSnippet` pure helpers (5 tests)
  - `runAdd` integration against a mocked `fetch` registry: block install lands files + returns snippet, component install respects `paths.components` remap, example-typed names throw `AddError` with code `example-type`, unknown names throw `AddError` with code `unknown-item` (4 tests plus 2 covering block default path and non-default path preservation)
- **`packages/cli/src/utils/projectConfig.test.ts`** — 9 tests:
  - Write/read round-trip, partial-config normalization, corrupt-file handling, absent-file fallback to defaults, custom paths preserved
- **CLI suite:** 92 passed (was 72 on #255, **+20**). Same 4 pre-existing failures unchanged

## Scope decisions

- **`init.ts` full port to new resolver deferred.** The original plan bundled a removal of the `packages/cli/src/templates/` compat shim. That's ~300 more lines and isn't required for `add` to work. The compat shim from #254 still functions; a separate cleanup PR handles it
- **No ajv runtime schema validation.** Manifests are trusted as schema-valid. Full validation lands when third-party registries arrive (PR 14/15). Path safety is still enforced by the installer's `assertSafeTarget` guard
- **Default project paths stay under `compositions/`.** Blocks → `compositions/<name>.html`; components → `compositions/components/<name>/<file>`. Users override via `hyperframes.json#paths`

## Breaking / migration

**None.** Pure additive — new command, new file types, no existing commands or flags change. `init.ts` now writes `hyperframes.json` but that's a new additional file, not a modification of existing output.

## Stacks on

#255 — base branch. When #255 merges, this rebases onto `main`.

## Next in stack

PR 6 — `feat(registry): seed block — claude-code-window`. First real registry item. Exercises the full `hyperframes add <name>` flow end-to-end against a committed item on `main`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-04-13 21:04:59 -07:00

204 lines
6.7 KiB
TypeScript

#!/usr/bin/env tsx
/**
* Generate registry-item.json manifests for every example in registry/examples/,
* plus the top-level registry/registry.json manifest.
*
* Reads the legacy registry/examples/templates.json (label + hint) and probes
* each example's index.html for dimensions / duration data attributes.
* Placeholder `__VIDEO_DURATION__` falls back to 10 (the init-time default).
*
* Idempotent — safe to re-run, but will overwrite any hand-edits. Intended as
* one-shot scaffolding for PR 3.
*
* Usage:
* bun run scripts/generate-registry-items.ts
* bun run scripts/generate-registry-items.ts --only warm-grain
*/
import { readFileSync, writeFileSync, readdirSync, statSync } from "node:fs";
import { join, relative, resolve, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import {
ITEM_TYPE_DIRS,
type FileTarget,
type FileType,
type RegistryItem,
type RegistryManifest,
} from "@hyperframes/core";
const scriptDir = dirname(fileURLToPath(import.meta.url));
const repoRoot = resolve(scriptDir, "..");
const examplesDir = resolve(repoRoot, "registry", ITEM_TYPE_DIRS["hyperframes:example"]);
const registryManifestPath = resolve(repoRoot, "registry/registry.json");
const legacyManifestPath = resolve(examplesDir, "templates.json");
const DEFAULT_DURATION_SECONDS = 10;
const PLACEHOLDER_DURATION = "__VIDEO_DURATION__";
interface LegacyTemplateEntry {
id: string;
label: string;
hint: string;
bundled: boolean;
}
interface LegacyManifest {
templates: LegacyTemplateEntry[];
}
function readLegacyManifest(): LegacyTemplateEntry[] {
try {
const raw = readFileSync(legacyManifestPath, "utf-8");
const parsed = JSON.parse(raw) as LegacyManifest;
return parsed.templates;
} catch {
// templates.json was the bootstrap source and has been deleted. Fall back
// to scanning existing registry-item.json files and reconstructing entries.
return scanExistingItems();
}
}
function scanExistingItems(): LegacyTemplateEntry[] {
const entries: LegacyTemplateEntry[] = [];
for (const dir of readdirSync(examplesDir, { withFileTypes: true })) {
if (!dir.isDirectory()) continue;
const itemPath = join(examplesDir, dir.name, "registry-item.json");
try {
const item = JSON.parse(readFileSync(itemPath, "utf-8")) as RegistryItem;
entries.push({ id: item.name, label: item.title, hint: item.description, bundled: false });
} catch {
// No manifest — skip.
}
}
return entries;
}
function extractAttr(html: string, attr: string): string | undefined {
const match = new RegExp(`data-${attr}="([^"]*)"`).exec(html);
return match?.[1];
}
interface CanvasMeta {
width: number;
height: number;
duration: number;
}
function probeCanvas(exampleDir: string): CanvasMeta {
const html = readFileSync(join(exampleDir, "index.html"), "utf-8");
const width = Number(extractAttr(html, "width") ?? 1920);
const height = Number(extractAttr(html, "height") ?? 1080);
const rawDuration = extractAttr(html, "duration");
const duration =
rawDuration === undefined || rawDuration === PLACEHOLDER_DURATION
? DEFAULT_DURATION_SECONDS
: Number(rawDuration);
return { width, height, duration };
}
function fileTypeFor(path: string): FileType {
if (path.endsWith(".html")) return "hyperframes:composition";
return "hyperframes:asset";
}
/** Walk the example dir and collect every tracked file (HTML + assets). */
function collectFiles(exampleDir: string): FileTarget[] {
const files: FileTarget[] = [];
const walk = (dir: string): void => {
for (const entry of readdirSync(dir, { withFileTypes: true })) {
const full = join(dir, entry.name);
if (entry.isDirectory()) {
walk(full);
} else if (entry.isFile()) {
// Skip the registry-item.json itself if it already exists from a
// prior run; we're regenerating it.
if (entry.name === "registry-item.json") continue;
const rel = relative(exampleDir, full);
files.push({ path: rel, target: rel, type: fileTypeFor(rel) });
}
}
};
walk(exampleDir);
files.sort((a, b) => a.path.localeCompare(b.path));
return files;
}
function buildItem(entry: LegacyTemplateEntry): RegistryItem {
// The `blank` template is bundled inside the CLI package; don't generate a
// manifest in registry/examples/ for it.
const exampleDir = join(examplesDir, entry.id);
const canvas = probeCanvas(exampleDir);
const files = collectFiles(exampleDir);
return {
$schema: "https://hyperframes.heygen.com/schema/registry-item.json",
name: entry.id,
type: "hyperframes:example",
title: entry.label,
description: entry.hint,
dimensions: { width: canvas.width, height: canvas.height },
duration: canvas.duration,
files,
};
}
function writeItem(item: RegistryItem): void {
if (item.type !== "hyperframes:example") return;
const out = join(examplesDir, item.name, "registry-item.json");
writeFileSync(out, JSON.stringify(item, null, 2) + "\n", "utf-8");
console.log(`wrote ${relative(repoRoot, out)}`);
}
function writeRegistryManifest(items: RegistryItem[]): void {
const manifest: RegistryManifest = {
$schema: "https://hyperframes.heygen.com/schema/registry.json",
name: "hyperframes",
homepage: "https://hyperframes.heygen.com",
items: items.map((item) => ({ name: item.name, type: item.type })),
};
writeFileSync(registryManifestPath, JSON.stringify(manifest, null, 2) + "\n", "utf-8");
console.log(`wrote ${relative(repoRoot, registryManifestPath)}`);
}
function main(): void {
const args = process.argv.slice(2);
const onlyIdx = args.indexOf("--only");
const only = onlyIdx >= 0 ? args[onlyIdx + 1] : undefined;
const legacy = readLegacyManifest();
// Skip bundled templates (e.g. `blank`) — they live inside the CLI package,
// not under registry/examples/.
const onDisk = legacy.filter((t) => !t.bundled);
const filtered = only ? onDisk.filter((t) => t.id === only) : onDisk;
if (filtered.length === 0) {
console.error(
only
? `No example matches --only ${only}. Available: ${onDisk.map((t) => t.id).join(", ")}`
: "No examples found in registry/examples/templates.json",
);
process.exit(1);
}
const items: RegistryItem[] = [];
for (const entry of filtered) {
const exampleDir = join(examplesDir, entry.id);
try {
statSync(exampleDir);
} catch {
console.warn(`skip ${entry.id}: directory not found at ${relative(repoRoot, exampleDir)}`);
continue;
}
const item = buildItem(entry);
writeItem(item);
items.push(item);
}
// Only rewrite the top-level manifest on a full-run (not --only).
if (!only) {
writeRegistryManifest(items);
}
}
main();