@doubledigit/cli 0.9.0 → 0.10.0

package/README.md

@@ -21,7 +21,7 @@ pnpm dd doctor
 pnpm onboard
 pnpm onboard -- --no-run
 pnpm dd actions remotion-hub
-pnpm dd actions remotion-hub init temp-project
+pnpm dd actions remotion-hub init temp-project --framework remotion
 ```
 
 If installed globally, the binary is available as `dd`:
@@ -32,7 +32,7 @@ dd doctor
 dd onboard
 dd onboard --no-run
 dd actions remotion-hub
-dd actions remotion-hub init temp-project
+dd actions remotion-hub init temp-project --framework remotion
 ```
 
 ## Requirements
@@ -117,24 +117,28 @@ Use `dd actions` to discover or call enabled micro-app actions through the runni
 
 ```bash
 npx @doubledigit/cli@latest actions remotion-hub
-npx @doubledigit/cli@latest actions remotion-hub init temp-project --yes
-npx @doubledigit/cli@latest actions remotion-hub list-components --limit 5
-npx @doubledigit/cli@latest actions remotion-hub search-components --query "animated chart" --limit 5
+npx @doubledigit/cli@latest actions remotion-hub init temp-project --framework remotion --yes
+npx @doubledigit/cli@latest actions remotion-hub init html-project --framework hyperframe --yes
+npx @doubledigit/cli@latest actions remotion-hub list-components --framework remotion --limit 5
+npx @doubledigit/cli@latest actions remotion-hub search-components --framework hyperframe --query "animated chart" --limit 5
 npx @doubledigit/cli@latest actions remotion-hub register-component --json-file component.json
 ```
 
-Remotion Hub `init` is handled locally by the CLI because it creates files on the caller's machine. Other Remotion Hub actions, such as search and registry lookup, call the configured Double Digit app over HTTP.
+Component Hub currently uses the `remotion-hub` compatibility command. `init` and `add` are handled locally by the CLI because they create or modify files on the caller's machine. Other actions, such as search and registry lookup, call the configured Double Digit app over HTTP.
 
-By default, Remotion Hub `init` creates Remotion's Hello World starter so `remotion studio` opens with a visible composition. Pass `--skip-remotion-create` or `--hub-only` only when adding Remotion Hub files to an existing Remotion project.
+Pass `--framework remotion|hyperframe` when the target framework is known. Remotion remains the default for compatibility and creates Remotion's Hello World starter so `remotion studio` opens with a visible composition. HyperFrames init requires Node.js 22 or newer and uses `npx hyperframes preview` as its dev command.
 
-After init, the CLI attempts to install both Remotion's project skills and the Double Digit Remotion Hub auxiliary skills from the created project directory:
+Pass `--skip-framework-create` when adding Component Hub files to an existing project. `--skip-remotion-create` and `--hub-only` remain compatibility aliases.
+
+After init, the CLI attempts to install framework skills and the Double Digit Component Hub skill from the created project directory. The retry command list depends on the selected framework; examples include:
 
 ```bash
 npx skills add remotion-dev/skills --all
+npx skills add heygen-com/hyperframes
 npx skills add crystalphantom/double-digit --skill dd-remotion-hub --agent '*' --yes
 ```
 
-Pass `--skip-skills` to skip skill installation. If skill installation fails, init still completes the project scaffold and prints exact retry commands. Use `--yes` for agent-run or scripted init flows; `-y` and `--non-interactive` are accepted compatibility aliases.
+Pass `--skip-skills` to skip skill installation. If skill installation fails, init still completes the project scaffold and prints exact retry commands. Use `--yes` for agent-run or scripted init flows; `-y` and `--non-interactive` are accepted compatibility aliases and are forwarded to nested framework scaffolds where supported.
 
 Register a component with simple JSON:
 
@@ -149,6 +153,7 @@ Minimal `component.json`:
   "title": "Animated Chart",
   "slug": "animated-chart",
   "namespace": "doubledigit",
+  "framework": "remotion",
   "kind": "component",
   "description": "Animated chart scene.",
   "tags": ["chart", "animation"],
@@ -157,7 +162,7 @@ Minimal `component.json`:
 }
 ```
 
-When no `--registry`, `--url`, or `--app-url` is passed, Remotion Hub init writes a registry URL from exported `DD_APP_URL`, `APP_URL`, `NEXT_PUBLIC_APP_URL`, or `BETTER_AUTH_URL`; then the release-configured hosted app URL; then `http://localhost:3111` for local development builds.
+When no `--registry`, `--url`, or `--app-url` is passed, Component Hub init writes a registry URL from exported `DD_APP_URL`, `APP_URL`, `NEXT_PUBLIC_APP_URL`, or `BETTER_AUTH_URL`; then the release-configured hosted app URL; then `http://localhost:3111` for local development builds.
 
 For HTTP-backed actions, the command resolves the app URL from exported `DD_APP_URL`, `APP_URL`, or `BETTER_AUTH_URL`; then local env-file `DD_APP_URL`; then the release-configured hosted app URL. It prints JSON responses to stdout. It also reads `.env`, `.env.local`, `apps/main-app/.env`, and `apps/main-app/.env.local`; exported shell values take precedence.
 
@@ -171,7 +176,7 @@ npx @doubledigit/cli@latest actions remotion-hub
 
 This hosted default does not require a local checkout or running app.
 
-Before relying on the hosted default in automation, run discovery as a preflight. If the hosted action endpoint returns HTTP 500 or is unreachable, use `DD_APP_URL` or `--url` to target a local or self-hosted Double Digit app until the hosted Remotion Hub is healthy.
+Before relying on the hosted default in automation, run discovery as a preflight. If the hosted action endpoint returns HTTP 500 or is unreachable, use `DD_APP_URL` or `--url` to target a local or self-hosted Double Digit app until the hosted Component Hub endpoint is healthy.
 
 Local development or self-hosted environments should override the target explicitly:
 

package/dist/commands/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/commands/actions.ts"],"names":[],"mappings":"AAoCA,wBAAgB,uBAAuB,WAKtC;AAoED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE;WACf,MAAM;WAAS,MAAM;IAuBxD;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,WAGrD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,WAGpD;AAED,wBAAgB,+BAA+B,CAAC,IAAI,EAAE,MAAM,EAAE,YAI7D;AAED,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,MAAM,EAAE,YAI5D;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoC3D"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/commands/actions.ts"],"names":[],"mappings":"AAqCA,wBAAgB,uBAAuB,WAKtC;AAsED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE;WACf,MAAM;WAAS,MAAM;IAuBxD;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,WAGrD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,WAGpD;AAED,wBAAgB,+BAA+B,CAAC,IAAI,EAAE,MAAM,EAAE,YAI7D;AAED,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,MAAM,EAAE,YAI5D;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoC3D"}

package/dist/commands/actions.js

@@ -10,6 +10,7 @@ import { runRemotionHubInitCommand } from './remotion-hub-init.js';
 const actionValueOptions = new Set([
     '--app-url',
     '--dir',
+    '--framework',
     '--id-or-slug',
     '--kind',
     '--limit',
@@ -44,6 +45,7 @@ Options:
   --query <text>              Set input.query
   --limit <number>            Set input.limit
   --namespace <namespace>     Set input namespace/filter
+  --framework <framework>     Set input framework/filter
   --slug <slug>               Set input.slug
   --id-or-slug <value>        Set input.idOrSlug
   --kind <kind>               Set input kind/filter
@@ -52,13 +54,14 @@ Options:
 
 Examples:
   npx @doubledigit/cli@latest actions remotion-hub
-  npx @doubledigit/cli@latest actions remotion-hub init my-video --yes
-  npx @doubledigit/cli@latest actions remotion-hub init my-video --skip-skills
-  npx @doubledigit/cli@latest actions remotion-hub list-components --limit 5
-  npx @doubledigit/cli@latest actions remotion-hub add terminal-scene --dir my-video
-  npx @doubledigit/cli@latest actions remotion-hub search-components --query "animated chart" --limit 5
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --yes
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework hyperframe --yes
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --skip-skills
+  npx @doubledigit/cli@latest actions remotion-hub list-components --framework remotion --limit 5
+  npx @doubledigit/cli@latest actions remotion-hub add terminal-scene --framework remotion --dir my-video
+  npx @doubledigit/cli@latest actions remotion-hub search-components --framework remotion --query "animated chart" --limit 5
   npx @doubledigit/cli@latest actions remotion-hub register-component --json-file component.json
-  npx @doubledigit/cli@latest actions remotion-hub get-registry-payload --json '{"namespace":"doubledigit","slug":"motion-strip"}'
+  npx @doubledigit/cli@latest actions remotion-hub get-registry-payload --json '{"namespace":"doubledigit","slug":"motion-strip","framework":"remotion"}'
 `;
 }
 function readActionEnvFiles(paths) {

package/dist/commands/remotion-hub-add.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remotion-hub-add.d.ts","sourceRoot":"","sources":["../../src/commands/remotion-hub-add.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AA8E9F,wBAAgB,uBAAuB,WAsBtC;AAkBD,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,MAAM,EAAE,GACb,OAAO,CAAC,uBAAuB,GAAG,SAAS,CAAC,CA2B9C"}
+{"version":3,"file":"remotion-hub-add.d.ts","sourceRoot":"","sources":["../../src/commands/remotion-hub-add.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AA+E9F,wBAAgB,uBAAuB,WAwBtC;AAkBD,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,MAAM,EAAE,GACb,OAAO,CAAC,uBAAuB,GAAG,SAAS,CAAC,CA4B9C"}

package/dist/commands/remotion-hub-add.js

@@ -5,6 +5,7 @@ const valueFlags = new Set([
     'namespace',
     'registry',
     'url',
+    'framework',
 ]);
 function parseArgs(args) {
     const positional = [];
@@ -72,6 +73,7 @@ Options:
   --registry <url>         Double Digit app URL or /api/remotion-hub/r endpoint
   --url, --app-url <url>   Alias for --registry
   --namespace <name>       Registry namespace when item is not namespace/slug
+  --framework <name>       Framework tag (e.g. remotion, hyperframe)
   --force                  Overwrite existing generated files
   --skip-install           Do not install npm dependencies
   --no-install             Alias for --skip-install
@@ -80,6 +82,7 @@ Options:
 Examples:
   npx @doubledigit/cli@latest actions remotion-hub add terminal-scene
   npx @doubledigit/cli@latest actions remotion-hub add doubledigit/terminal-scene --dir ./my-video
+  npx @doubledigit/cli@latest actions remotion-hub add doubledigit/terminal-scene --framework hyperframe
   npx @doubledigit/cli@latest actions remotion-hub add terminal-scene --registry https://double-digit.example --skip-install
 `;
 }
@@ -116,6 +119,7 @@ export async function runRemotionHubAddCommand(args) {
         force: booleanFlag(parsed.flags, 'force'),
         skipInstall: booleanFlag(parsed.flags, 'skip-install', 'no-install'),
         quiet: json,
+        framework: stringFlag(parsed.flags, 'framework'),
     });
     if (json)
         console.log(JSON.stringify(result, null, 2));

package/dist/commands/remotion-hub-init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remotion-hub-init.d.ts","sourceRoot":"","sources":["../../src/commands/remotion-hub-init.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAqFhG,wBAAgB,wBAAwB,WA6BvC;AAgCD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,wBAAwB,GAAG,SAAS,CA4B9F"}
+{"version":3,"file":"remotion-hub-init.d.ts","sourceRoot":"","sources":["../../src/commands/remotion-hub-init.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAuFhG,wBAAgB,wBAAwB,WAgCvC;AAkCD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,wBAAwB,GAAG,SAAS,CA8B9F"}

package/dist/commands/remotion-hub-init.js

@@ -2,6 +2,7 @@ import { runRemotionHubInit } from '../lib/remotion-hub-init.js';
 const valueFlags = new Set([
     'app-url',
     'dir',
+    'framework',
     'namespace',
     'registry',
     'url',
@@ -46,6 +47,7 @@ function parseArgs(args) {
             || rawKey === 'hub-only'
             || rawKey === 'json'
             || rawKey === 'non-interactive'
+            || rawKey === 'skip-framework-create'
             || rawKey === 'skip-skills'
             || rawKey === 'skip-remotion-create'
             || rawKey === 'yes') {
@@ -69,9 +71,9 @@ function booleanFlag(flags, ...names) {
 }
 export function buildRemotionHubInitHelp() {
     return `
-dd actions remotion-hub init - Initialize a local Remotion Hub project
+dd actions remotion-hub init - Initialize a local Component Hub project
 
-Creates a Remotion Hello World starter by default, then adds Remotion Hub config files.
+Creates a Remotion starter by default, then adds Component Hub config files.
 
 Usage:
   dd actions remotion-hub init [project-dir] [options]
@@ -81,8 +83,10 @@ Options:
   --registry <url>         Double Digit app URL or /api/remotion-hub/r endpoint
   --url, --app-url <url>   Alias for --registry
   --namespace <name>       Registry namespace (default: doubledigit)
-  --skip-remotion-create   Only add Remotion Hub files; do not run create-video
-  --hub-only               Alias for --skip-remotion-create
+  --framework <name>       Framework to scaffold (remotion or hyperframe; default: remotion)
+  --skip-framework-create  Only add Component Hub files; do not run framework scaffold
+  --skip-remotion-create   Alias for --skip-framework-create
+  --hub-only               Alias for --skip-framework-create
   --skip-skills            Do not install agent skills
   --yes, -y                Skip prompts in nested tools and use defaults
   --non-interactive        Alias for --yes
@@ -92,15 +96,18 @@ Options:
 Examples:
   npx @doubledigit/cli@latest actions remotion-hub init
   npx @doubledigit/cli@latest actions remotion-hub init my-video
-  npx @doubledigit/cli@latest actions remotion-hub init my-video --yes
-  npx @doubledigit/cli@latest actions remotion-hub init my-video --skip-skills
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --yes
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework hyperframe --yes
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --skip-skills
   npx @doubledigit/cli@latest actions remotion-hub init my-video --registry https://double-digit.example
 `;
 }
 function printInit(result) {
-    console.log(`Initialized Remotion Hub in ${result.projectDir}`);
-    if (!result.remotionCreate.skipped) {
-        console.log(`  Remotion project: ${result.remotionCreate.command} ${result.remotionCreate.args.join(' ')}`);
+    console.log(`Initialized Component Hub in ${result.projectDir}`);
+    console.log(`Framework: ${result.framework}`);
+    console.log(`Dev command: ${result.devCommand}`);
+    if (!result.create.skipped) {
+        console.log(`  Framework project: ${result.create.command} ${result.create.args.join(' ')}`);
     }
     for (const file of result.created) {
         console.log(`  ${file}`);
@@ -141,6 +148,8 @@ export function runRemotionHubInitCommand(args) {
         registry: stringFlag(parsed.flags, 'registry', 'url', 'app-url'),
         namespace: stringFlag(parsed.flags, 'namespace'),
         force: booleanFlag(parsed.flags, 'force'),
+        framework: stringFlag(parsed.flags, 'framework'),
+        skipFrameworkCreate: booleanFlag(parsed.flags, 'skip-framework-create', 'skip-remotion-create', 'hub-only'),
         skipRemotionCreate: booleanFlag(parsed.flags, 'skip-remotion-create', 'hub-only'),
         skipSkills: booleanFlag(parsed.flags, 'skip-skills'),
         nonInteractive: booleanFlag(parsed.flags, 'yes', 'y', 'non-interactive'),

package/dist/index.d.ts

@@ -6,7 +6,7 @@
  * without importing the full extension-management dependency graph first.
  */
 declare const command: string, args: string[];
-declare const HELP = "\n@doubledigit/cli \u2014 Manage extensions and local setup\n\nCommands:\n  doctor                 Check local prerequisites and project health\n  onboard                Prepare local development and start the app\n  run                    Start the local app with automatic DB bootstrap\n  dev                    Start DB + app without migrations or seed data\n  db <subcommand>        Database helpers (status, migrate, create)\n  actions <app> [action] Discover and invoke micro-app actions\n  create <name>          Scaffold a new micro-app from the template\n  init <project-name>    Scaffold a new Double Digit project\n  add|install <source>   Install an extension from GitHub or a marketplace\n  sync                   Regenerate micro-apps.ts from dd-apps.config.json\n  enable <name>          Enable a micro-app (updates config + runs sync)\n  disable <name>         Disable a micro-app (updates config + runs sync)\n  uninstall|remove <name> Completely remove a micro-app\n  list                   List all discovered micro-apps with enabled/disabled status\n  info <name>            Show detailed info about an installed extension\n  outdated               Check for outdated marketplace extensions\n  reconcile              Detect drift between lock file, marketplace, and local files\n  marketplace <sub>      Manage marketplace registrations (add/list/update/remove)\n  browse [marketplace]   Browse available extensions in registered marketplaces\n\nOptions:\n  --help, -h             Show this help message\n\nExamples:\n  dd doctor\n  dd onboard --yes\n  dd onboard                    # setup + start the dev server\n  dd onboard --no-run           # setup only\n  dd init my-project           # scaffold and bootstrap a fresh project\n  dd init my-project --run      # scaffold + bootstrap + start\n  dd init my-project --skip-install --no-git\n  dd run\n  dd dev\n  dd db status\n  npx @doubledigit/cli@latest actions remotion-hub init my-video --yes\n  npx @doubledigit/cli@latest actions remotion-hub init my-video --skip-skills\n  npx @doubledigit/cli@latest actions remotion-hub search-components --query \"animated chart\"\n  dd create invoice-tracker\n  dd add gh:owner/repo/extensions/micro-apps/habit-tracker\n  dd add habit-tracker@community\n  dd info habit-tracker\n  dd reconcile\n  dd marketplace add digitaldouble/dd-marketplace\n  dd browse community\n  DD_APPS=tasks,agent-v2 dd sync\n";
+declare const HELP = "\n@doubledigit/cli \u2014 Manage extensions and local setup\n\nCommands:\n  doctor                 Check local prerequisites and project health\n  onboard                Prepare local development and start the app\n  run                    Start the local app with automatic DB bootstrap\n  dev                    Start DB + app without migrations or seed data\n  db <subcommand>        Database helpers (status, migrate, create)\n  actions <app> [action] Discover and invoke micro-app actions\n  create <name>          Scaffold a new micro-app from the template\n  init <project-name>    Scaffold a new Double Digit project\n  add|install <source>   Install an extension from GitHub or a marketplace\n  sync                   Regenerate micro-apps.ts from dd-apps.config.json\n  enable <name>          Enable a micro-app (updates config + runs sync)\n  disable <name>         Disable a micro-app (updates config + runs sync)\n  uninstall|remove <name> Completely remove a micro-app\n  list                   List all discovered micro-apps with enabled/disabled status\n  info <name>            Show detailed info about an installed extension\n  outdated               Check for outdated marketplace extensions\n  reconcile              Detect drift between lock file, marketplace, and local files\n  marketplace <sub>      Manage marketplace registrations (add/list/update/remove)\n  browse [marketplace]   Browse available extensions in registered marketplaces\n\nOptions:\n  --help, -h             Show this help message\n\nExamples:\n  dd doctor\n  dd onboard --yes\n  dd onboard                    # setup + start the dev server\n  dd onboard --no-run           # setup only\n  dd init my-project           # scaffold and bootstrap a fresh project\n  dd init my-project --run      # scaffold + bootstrap + start\n  dd init my-project --skip-install --no-git\n  dd run\n  dd dev\n  dd db status\n  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --yes\n  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --skip-skills\n  npx @doubledigit/cli@latest actions remotion-hub search-components --framework remotion --query \"animated chart\"\n  dd create invoice-tracker\n  dd add gh:owner/repo/extensions/micro-apps/habit-tracker\n  dd add habit-tracker@community\n  dd info habit-tracker\n  dd reconcile\n  dd marketplace add digitaldouble/dd-marketplace\n  dd browse community\n  DD_APPS=tasks,agent-v2 dd sync\n";
 declare function requireArg(value: string | undefined, usage: string): string;
 declare function runAddCommand(rawArgs: string[]): Promise<void>;
 declare function main(): Promise<void>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA;;;;;GAKG;AAEH,QAAA,MAAW,OAAO,UAAK,IAAI,UAAgB,CAAC;AAE5C,QAAA,MAAM,IAAI,03EAiDT,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAOpE;AAED,iBAAe,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAuB7D;AAED,iBAAe,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAsInC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA;;;;;GAKG;AAEH,QAAA,MAAW,OAAO,UAAK,IAAI,UAAgB,CAAC;AAE5C,QAAA,MAAM,IAAI,y7EAiDT,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAOpE;AAED,iBAAe,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAuB7D;AAED,iBAAe,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAsInC"}

package/dist/index.js

@@ -45,9 +45,9 @@ Examples:
   dd run
   dd dev
   dd db status
-  npx @doubledigit/cli@latest actions remotion-hub init my-video --yes
-  npx @doubledigit/cli@latest actions remotion-hub init my-video --skip-skills
-  npx @doubledigit/cli@latest actions remotion-hub search-components --query "animated chart"
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --yes
+  npx @doubledigit/cli@latest actions remotion-hub init my-video --framework remotion --skip-skills
+  npx @doubledigit/cli@latest actions remotion-hub search-components --framework remotion --query "animated chart"
   dd create invoice-tracker
   dd add gh:owner/repo/extensions/micro-apps/habit-tracker
   dd add habit-tracker@community

package/dist/lib/actions-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-client.d.ts","sourceRoot":"","sources":["../../src/lib/actions-client.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;CACpB;AAOD,MAAM,WAAW,iCAAiC;IAChD,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,GAAiB,EACjB,YAAY,EACZ,eAAe,GAChB,EAAE,iCAAiC,UAKnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,GAAiB,EACjB,OAAY,EACZ,UAAU,GACX,EAAE,0BAA0B,UAS5B;AA4ED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,iBAAiB,CA6DlE;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,UAS7C;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,WAK3C;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,CAoBtI;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAiCjF"}
+{"version":3,"file":"actions-client.d.ts","sourceRoot":"","sources":["../../src/lib/actions-client.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;CACpB;AAOD,MAAM,WAAW,iCAAiC;IAChD,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,GAAiB,EACjB,YAAY,EACZ,eAAe,GAChB,EAAE,iCAAiC,UAKnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,GAAiB,EACjB,OAAY,EACZ,UAAU,GACX,EAAE,0BAA0B,UAS5B;AA4ED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,iBAAiB,CA+DlE;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,UAS7C;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,WAK3C;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,CAoBtI;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAiCjF"}

package/dist/lib/actions-client.js

@@ -68,7 +68,7 @@ function setInputValue(input, key, value) {
         input.limit = numeric;
         return;
     }
-    if (key === 'namespace' || key === 'kind' || key === 'previewType') {
+    if (key === 'namespace' || key === 'kind' || key === 'previewType' || key === 'framework') {
         input[key] = value;
         asFilters(input)[key] = value;
         return;
@@ -127,6 +127,9 @@ export function parseActionsArgs(args) {
         else if (flag === '--namespace') {
             setInputValue(input, 'namespace', readValue());
         }
+        else if (flag === '--framework') {
+            setInputValue(input, 'framework', readValue());
+        }
         else if (flag === '--slug') {
             setInputValue(input, 'slug', readValue());
         }

package/dist/lib/component-frameworks.d.ts

@@ -0,0 +1,34 @@
+export type ComponentFrameworkId = 'remotion' | 'hyperframe';
+export interface ComponentFrameworkAdapter {
+    id: ComponentFrameworkId;
+    aliases: string[];
+    displayName: string;
+    minNodeMajor?: number;
+    defaultDevCommand: string;
+    defaultFileExtension: string;
+    buildCreateCommand: (projectDir: string, options: {
+        nonInteractive: boolean;
+    }) => {
+        command: string;
+        args: string[];
+    };
+    skillsCommands: (options: {
+        nonInteractive: boolean;
+    }) => Array<{
+        command: 'npx';
+        args: string[];
+        display: string;
+    }>;
+    buildPostAddSnippet: (input: {
+        name: string;
+        primaryFile: string;
+        source: string;
+        projectDir: string;
+        config: unknown;
+    }) => string;
+}
+export declare const componentFrameworkAdapters: ComponentFrameworkAdapter[];
+export declare function normalizeFrameworkId(value?: string): ComponentFrameworkId;
+export declare function getComponentFrameworkAdapter(value?: string): ComponentFrameworkAdapter;
+export declare function assertFrameworkNodeRequirement(adapter: ComponentFrameworkAdapter, nodeVersion?: string): void;
+//# sourceMappingURL=component-frameworks.d.ts.map

package/dist/lib/component-frameworks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-frameworks.d.ts","sourceRoot":"","sources":["../../src/lib/component-frameworks.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE7D,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,oBAAoB,CAAC;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,cAAc,EAAE,OAAO,CAAA;KAAE,KAAK;QAChF,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;IACF,cAAc,EAAE,CAAC,OAAO,EAAE;QAAE,cAAc,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC;QAC9D,OAAO,EAAE,KAAK,CAAC;QACf,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,mBAAmB,EAAE,CAAC,KAAK,EAAE;QAC3B,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,OAAO,CAAC;KACjB,KAAK,MAAM,CAAC;CACd;AAsDD,eAAO,MAAM,0BAA0B,EAAE,yBAAyB,EAuDjE,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,oBAAoB,CASzE;AAED,wBAAgB,4BAA4B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,yBAAyB,CAKtF;AAED,wBAAgB,8BAA8B,CAAC,OAAO,EAAE,yBAAyB,EAAE,WAAW,SAAwB,QAKrH"}

package/dist/lib/component-frameworks.js

@@ -0,0 +1,121 @@
+import path from 'node:path';
+function addNonInteractiveAgentFlags(command, nonInteractive) {
+    if (!nonInteractive || !command.args.includes('--skill'))
+        return command;
+    return {
+        ...command,
+        args: [...command.args, '--agent', '*', '--yes'],
+        display: `${command.display} --agent '*' --yes`,
+    };
+}
+function normalizeSlashes(value) {
+    return value.split(path.sep).join('/');
+}
+function exportNameFromSource(source, fallback) {
+    const match = source.match(/export\s+(?:function|const|class)\s+([A-Z][A-Za-z0-9_]*)/);
+    if (match?.[1])
+        return match[1];
+    return fallback
+        .split(/[^a-zA-Z0-9]+/)
+        .filter(Boolean)
+        .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+        .join('') || 'ComponentHubComponent';
+}
+function importPath(fromFile, toFile) {
+    const withoutExtension = toFile.replace(/\.[cm]?[tj]sx?$/, '');
+    let relative = normalizeSlashes(path.relative(path.dirname(fromFile), withoutExtension));
+    if (!relative.startsWith('.'))
+        relative = `./${relative}`;
+    return relative;
+}
+function buildRemotionSnippet(input) {
+    const config = input.config;
+    const root = config.remotion?.root || 'src/Root.tsx';
+    const rootFile = path.resolve(input.projectDir, root);
+    const exportName = exportNameFromSource(input.source, input.name);
+    const importFrom = importPath(rootFile, input.primaryFile);
+    return [
+        `import { ${exportName} } from '${importFrom}';`,
+        '',
+        `<Composition id="${input.name}" component={${exportName}} durationInFrames={180} fps={30} width={1920} height={1080} />`,
+    ].join('\n');
+}
+export const componentFrameworkAdapters = [
+    {
+        id: 'remotion',
+        aliases: ['remotion', 'remotionjs'],
+        displayName: 'Remotion',
+        defaultDevCommand: 'npx remotion studio',
+        defaultFileExtension: 'tsx',
+        buildCreateCommand: (projectDir) => ({
+            command: 'npx',
+            args: ['create-video@latest', '--yes', '--hello-world', projectDir],
+        }),
+        skillsCommands: ({ nonInteractive }) => [
+            {
+                command: 'npx',
+                args: ['skills', 'add', 'remotion-dev/skills', '--all'],
+                display: 'npx skills add remotion-dev/skills --all',
+            },
+            addNonInteractiveAgentFlags({
+                command: 'npx',
+                args: ['skills', 'add', 'crystalphantom/double-digit', '--skill', 'dd-remotion-hub'],
+                display: 'npx skills add crystalphantom/double-digit --skill dd-remotion-hub',
+            }, nonInteractive),
+        ],
+        buildPostAddSnippet: buildRemotionSnippet,
+    },
+    {
+        id: 'hyperframe',
+        aliases: ['hyperframe', 'hyperframes'],
+        displayName: 'HyperFrames',
+        minNodeMajor: 22,
+        defaultDevCommand: 'npx hyperframes preview',
+        defaultFileExtension: 'html',
+        buildCreateCommand: (projectDir, { nonInteractive }) => ({
+            command: 'npx',
+            args: [
+                'hyperframes',
+                'init',
+                projectDir,
+                ...(nonInteractive ? ['--non-interactive'] : []),
+            ],
+        }),
+        skillsCommands: ({ nonInteractive }) => [
+            addNonInteractiveAgentFlags({
+                command: 'npx',
+                args: ['skills', 'add', 'heygen-com/hyperframes'],
+                display: 'npx skills add heygen-com/hyperframes',
+            }, nonInteractive),
+            addNonInteractiveAgentFlags({
+                command: 'npx',
+                args: ['skills', 'add', 'crystalphantom/double-digit', '--skill', 'dd-remotion-hub'],
+                display: 'npx skills add crystalphantom/double-digit --skill dd-remotion-hub',
+            }, nonInteractive),
+        ],
+        buildPostAddSnippet: () => '',
+    },
+];
+export function normalizeFrameworkId(value) {
+    const normalized = (value || 'remotion').trim().toLowerCase();
+    const adapter = componentFrameworkAdapters.find((candidate) => candidate.id === normalized || candidate.aliases.includes(normalized));
+    if (!adapter) {
+        throw new Error(`Unsupported framework: ${value}. Supported frameworks: remotion, hyperframe`);
+    }
+    return adapter.id;
+}
+export function getComponentFrameworkAdapter(value) {
+    const id = normalizeFrameworkId(value);
+    const adapter = componentFrameworkAdapters.find((candidate) => candidate.id === id);
+    if (!adapter)
+        throw new Error(`Unsupported framework: ${value}`);
+    return adapter;
+}
+export function assertFrameworkNodeRequirement(adapter, nodeVersion = process.versions.node) {
+    if (!adapter.minNodeMajor)
+        return;
+    const major = Number(nodeVersion.split('.')[0]);
+    if (Number.isFinite(major) && major >= adapter.minNodeMajor)
+        return;
+    throw new Error(`${adapter.displayName} requires Node.js ${adapter.minNodeMajor}+`);
+}

package/dist/lib/remotion-hub-init.d.ts

@@ -1,10 +1,11 @@
 import { spawnSync } from 'node:child_process';
-type RemotionSkillsCommand = {
+import { type ComponentFrameworkId } from './component-frameworks.js';
+type ComponentHubSkillsCommand = {
     command: 'npx';
     args: string[];
     display: string;
 };
-type RemotionSkillsInstallResult = RemotionSkillsCommand & {
+type ComponentHubSkillsInstallResult = ComponentHubSkillsCommand & {
     skipped: boolean;
     success: boolean;
     status: number | null;
@@ -14,6 +15,13 @@ export interface RemotionHubConfig {
     $schema: string;
     registry: string;
     namespace: string;
+    defaultFramework?: ComponentFrameworkId;
+    frameworks?: Partial<Record<ComponentFrameworkId, {
+        devCommand: string;
+        entrypoint?: string;
+        root?: string;
+        publicDir: string;
+    }>>;
     paths: {
         scenes: string;
         components: string;
@@ -43,6 +51,7 @@ export interface RemotionHubLock {
         files: string[];
         dependencies: string[];
         installedAt: string;
+        framework: string;
     }>;
 }
 export interface RunRemotionHubInitOptions {
@@ -51,11 +60,14 @@ export interface RunRemotionHubInitOptions {
     namespace?: string;
     force?: boolean;
     skipRemotionCreate?: boolean;
+    skipFrameworkCreate?: boolean;
     skipSkills?: boolean;
     nonInteractive?: boolean;
     yes?: boolean;
     quiet?: boolean;
     spawnImpl?: typeof spawnSync;
+    framework?: string;
+    nodeVersion?: string;
 }
 export interface RunRemotionHubInitResult {
     projectDir: string;
@@ -63,6 +75,13 @@ export interface RunRemotionHubInitResult {
     lockPath: string;
     created: string[];
     config: RemotionHubConfig;
+    framework: ComponentFrameworkId;
+    devCommand: string;
+    create: {
+        skipped: boolean;
+        command: string;
+        args: string[];
+    };
     remotionCreate: {
         skipped: boolean;
         command: string;
@@ -70,7 +89,7 @@ export interface RunRemotionHubInitResult {
     };
     skills: {
         skipped: boolean;
-        commands: RemotionSkillsInstallResult[];
+        commands: ComponentHubSkillsInstallResult[];
     };
 }
 export interface RunRemotionHubAddOptions {
@@ -83,6 +102,7 @@ export interface RunRemotionHubAddOptions {
     quiet?: boolean;
     fetchImpl?: typeof fetch;
     spawnImpl?: typeof spawnSync;
+    framework?: string;
 }
 export interface RunRemotionHubAddResult {
     name: string;
@@ -94,6 +114,7 @@ export interface RunRemotionHubAddResult {
     dependencies: string[];
     installedDependencies: string[];
     snippet: string;
+    framework: ComponentFrameworkId;
 }
 export interface ResolveRemotionHubRegistryOptions {
     registry?: string;
@@ -103,9 +124,9 @@ export interface ResolveRemotionHubRegistryOptions {
 }
 export declare function resolveRemotionHubRegistry({ registry, env, generatedDefaultRegistry, localDefaultRegistry, }?: ResolveRemotionHubRegistryOptions): string;
 export declare function buildRemotionSkillsCommands(options?: Pick<RunRemotionHubInitOptions, 'nonInteractive' | 'yes'>): {
+    command: "npx";
     args: string[];
     display: string;
-    command: "npx";
 }[];
 export declare function runRemotionHubInit(options?: RunRemotionHubInitOptions): RunRemotionHubInitResult;
 export declare function runRemotionHubAdd(options: RunRemotionHubAddOptions): Promise<RunRemotionHubAddResult>;

package/dist/lib/remotion-hub-init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remotion-hub-init.d.ts","sourceRoot":"","sources":["../../src/lib/remotion-hub-init.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"remotion-hub-init.d.ts","sourceRoot":"","sources":["../../src/lib/remotion-hub-init.ts"],"names":[],"mappings":"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"}

package/dist/lib/remotion-hub-init.js

@@ -3,22 +3,11 @@ import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync, } from
 import path from 'node:path';
 import { GENERATED_DEFAULT_ACTIONS_APP_URL } from '../generated/defaults.js';
 import { isLocalAppUrl } from './actions-client.js';
+import { assertFrameworkNodeRequirement, getComponentFrameworkAdapter, normalizeFrameworkId, } from './component-frameworks.js';
 const CONFIG_FILE = 'remotion-hub.json';
 const LOCK_FILE = 'remotion-hub.lock.json';
 const DEFAULT_REGISTRY = 'http://localhost:3111';
 const DEFAULT_NAMESPACE = 'doubledigit';
-const REMOTION_SKILLS_COMMANDS = [
-    {
-        command: 'npx',
-        args: ['skills', 'add', 'remotion-dev/skills', '--all'],
-        display: 'npx skills add remotion-dev/skills --all',
-    },
-    {
-        command: 'npx',
-        args: ['skills', 'add', 'crystalphantom/double-digit', '--skill', 'dd-remotion-hub'],
-        display: 'npx skills add crystalphantom/double-digit --skill dd-remotion-hub',
-    },
-];
 function toJson(value) {
     return `${JSON.stringify(value, null, 2)}\n`;
 }
@@ -107,19 +96,35 @@ export function resolveRemotionHubRegistry({ registry, env = process.env, genera
         ?? localDefaultRegistry;
 }
 function defaultConfig(projectDir, options) {
+    const framework = normalizeFrameworkId(options.framework);
     const language = detectLanguage(projectDir);
     const rootExtension = language === 'typescript' ? 'tsx' : 'jsx';
     const entryExtension = language === 'typescript' ? 'ts' : 'js';
+    const remotionAdapter = getComponentFrameworkAdapter('remotion');
+    const hyperframeAdapter = getComponentFrameworkAdapter('hyperframe');
     return {
         $schema: 'https://remotion-hub.dev/schema/remotion-hub.json',
         registry: resolveRemotionHubRegistry({ registry: options.registry }),
         namespace: options.namespace?.trim() || DEFAULT_NAMESPACE,
+        defaultFramework: framework,
+        frameworks: {
+            remotion: {
+                devCommand: remotionAdapter.defaultDevCommand,
+                entrypoint: firstExisting(projectDir, ['src/index.ts', 'src/index.tsx', 'src/index.js', 'src/index.jsx'], `src/index.${entryExtension}`),
+                root: firstExisting(projectDir, ['src/Root.tsx', 'src/Root.jsx', 'src/root.tsx', 'src/root.jsx'], `src/Root.${rootExtension}`),
+                publicDir: 'public',
+            },
+            hyperframe: {
+                devCommand: hyperframeAdapter.defaultDevCommand,
+                publicDir: 'public',
+            },
+        },
         paths: {
-            scenes: 'src/remotion-hub/scenes',
-            components: 'src/remotion-hub/components',
-            overlays: 'src/remotion-hub/overlays',
-            transitions: 'src/remotion-hub/transitions',
-            assets: 'public/remotion-hub/assets',
+            scenes: 'src/remotion-hub/[framework]/scenes',
+            components: 'src/remotion-hub/[framework]/components',
+            overlays: 'src/remotion-hub/[framework]/overlays',
+            transitions: 'src/remotion-hub/[framework]/transitions',
+            assets: 'public/remotion-hub/[framework]/assets',
             registry: `src/remotion-hub/registry.${entryExtension}`,
         },
         remotion: {
@@ -133,6 +138,18 @@ function defaultConfig(projectDir, options) {
         },
     };
 }
+function getFrameworkConfig(config, framework) {
+    const adapter = getComponentFrameworkAdapter(framework);
+    return {
+        devCommand: config.frameworks?.[framework]?.devCommand ?? adapter.defaultDevCommand,
+        publicDir: config.frameworks?.[framework]?.publicDir ?? config.remotion?.publicDir ?? 'public',
+        entrypoint: config.frameworks?.[framework]?.entrypoint,
+        root: config.frameworks?.[framework]?.root,
+    };
+}
+function getConfigDefaultFramework(config) {
+    return normalizeFrameworkId(config.defaultFramework);
+}
 function defaultLock() {
     return {
         version: 1,
@@ -140,6 +157,11 @@ function defaultLock() {
     };
 }
 function ensureDir(projectDir, relativePath, created) {
+    if (relativePath.includes('[framework]')) {
+        ensureDir(projectDir, relativePath.replace('[framework]', 'remotion'), created);
+        ensureDir(projectDir, relativePath.replace('[framework]', 'hyperframe'), created);
+        return;
+    }
     const target = resolveInsideProject(projectDir, relativePath, relativePath);
     if (!existsSync(target)) {
         mkdirSync(target, { recursive: true });
@@ -155,6 +177,7 @@ function registrySource(config, lock) {
             namespace: entry.namespace,
             slug: entry.slug,
             files: entry.files,
+            framework: entry.framework ?? 'remotion',
         };
         return acc;
     }, {});
@@ -180,29 +203,14 @@ function hasPackageJson(projectDir) {
 function hasEntries(projectDir) {
     return existsSync(projectDir) && readdirSync(projectDir).length > 0;
 }
-function buildRemotionCreateCommand(projectDir) {
-    return {
-        command: 'npx',
-        args: ['create-video@latest', '--yes', '--hello-world', projectDir],
-    };
-}
 export function buildRemotionSkillsCommands(options = {}) {
     const nonInteractive = options.yes === true || options.nonInteractive === true;
-    return REMOTION_SKILLS_COMMANDS.map((command) => ({
-        ...command,
-        args: nonInteractive && command.args.includes('--skill')
-            ? [...command.args, '--agent', '*', '--yes']
-            : [...command.args],
-        display: nonInteractive && command.args.includes('--skill')
-            ? `${command.display} --agent '*' --yes`
-            : command.display,
-    }));
-}
-function runRemotionSkillsInstall(projectDir, options) {
-    const commands = buildRemotionSkillsCommands({
-        nonInteractive: options.nonInteractive,
-        yes: options.yes,
-    });
+    return getComponentFrameworkAdapter('remotion').skillsCommands({ nonInteractive });
+}
+function runFrameworkSkillsInstall(projectDir, options) {
+    const adapter = getComponentFrameworkAdapter(options.framework);
+    const nonInteractive = options.yes === true || options.nonInteractive === true;
+    const commands = adapter.skillsCommands({ nonInteractive });
     if (options.skipSkills) {
         return commands.map((command) => ({
             ...command,
@@ -225,33 +233,39 @@ function runRemotionSkillsInstall(projectDir, options) {
         };
     });
 }
-function assertRemotionCreateSucceeded(result, command, args) {
+function assertFrameworkCreateSucceeded(result, adapterName, command, args) {
     if (result.error) {
-        throw new Error(`Remotion project creation failed: ${result.error.message}`);
+        throw new Error(`${adapterName} project creation failed: ${result.error.message}`);
     }
     if (result.status !== 0) {
-        throw new Error(`Remotion project creation failed: ${command} ${args.join(' ')}`);
+        throw new Error(`${adapterName} project creation failed: ${command} ${args.join(' ')}`);
     }
 }
-function ensureBaseRemotionProject(projectDir, options) {
-    const remotionCreate = buildRemotionCreateCommand(projectDir);
-    if (options.skipRemotionCreate || hasPackageJson(projectDir)) {
+function shouldSkipFrameworkCreate(options) {
+    return options.skipFrameworkCreate === true || options.skipRemotionCreate === true;
+}
+function ensureBaseFrameworkProject(projectDir, options) {
+    const adapter = getComponentFrameworkAdapter(options.framework);
+    const nonInteractive = options.yes === true || options.nonInteractive === true;
+    const frameworkCreate = adapter.buildCreateCommand(projectDir, { nonInteractive });
+    if (shouldSkipFrameworkCreate(options) || hasPackageJson(projectDir)) {
         return {
-            ...remotionCreate,
+            ...frameworkCreate,
             skipped: true,
         };
     }
+    assertFrameworkNodeRequirement(adapter, options.nodeVersion);
     if (hasEntries(projectDir)) {
-        throw new Error(`Project directory exists but is not a Remotion project: ${projectDir}. `
-            + 'Remove it, choose an empty path, or run Remotion setup manually before Remotion Hub init.');
+        throw new Error(`Project directory exists but is not a ${adapter.displayName} project: ${projectDir}. `
+            + `Remove it, choose an empty path, or run ${adapter.displayName} setup manually before Component Hub init.`);
     }
-    const result = (options.spawnImpl ?? spawnSync)(remotionCreate.command, remotionCreate.args, {
+    const result = (options.spawnImpl ?? spawnSync)(frameworkCreate.command, frameworkCreate.args, {
         cwd: process.cwd(),
         stdio: options.quiet ? 'pipe' : 'inherit',
     });
-    assertRemotionCreateSucceeded(result, remotionCreate.command, remotionCreate.args);
+    assertFrameworkCreateSucceeded(result, adapter.displayName, frameworkCreate.command, frameworkCreate.args);
     return {
-        ...remotionCreate,
+        ...frameworkCreate,
         skipped: false,
     };
 }
@@ -281,25 +295,35 @@ function parseItemRef(item, namespace) {
     }
     return { namespace: namespace || DEFAULT_NAMESPACE, slug: trimmed };
 }
-function registryPayloadUrl(config, namespace, slug, registryOverride) {
+function registryPayloadUrl(config, namespace, slug, registryOverride, framework) {
     const base = normalizeRegistryBase(registryOverride || config.registry || DEFAULT_REGISTRY);
     const encodedNamespace = encodeURIComponent(namespace);
     const encodedSlug = encodeURIComponent(slug);
+    let url = '';
     if (base.endsWith('/api/remotion-hub/r')) {
-        return `${base}/${encodedNamespace}/${encodedSlug}`;
+        url = `${base}/${encodedNamespace}/${encodedSlug}`;
     }
-    return `${base}/api/remotion-hub/r/${encodedNamespace}/${encodedSlug}`;
+    else {
+        url = `${base}/api/remotion-hub/r/${encodedNamespace}/${encodedSlug}`;
+    }
+    if (framework) {
+        url += `?framework=${encodeURIComponent(framework)}`;
+    }
+    return url;
 }
 function asStringArray(value) {
     if (!Array.isArray(value))
         return [];
     return value.filter((item) => typeof item === 'string' && item.trim().length > 0);
 }
-function readRegistryPayload(value) {
+function readRegistryPayload(value, fallbackFramework) {
     const name = typeof value.name === 'string' && value.name.trim() ? value.name.trim() : '';
     const type = typeof value.type === 'string' && value.type.trim() ? value.type.trim() : 'registry:component';
     const version = typeof value.version === 'string' && value.version.trim() ? value.version.trim() : null;
     const files = Array.isArray(value.files) ? value.files : [];
+    const framework = typeof value.framework === 'string' && value.framework.trim()
+        ? normalizeFrameworkId(value.framework)
+        : fallbackFramework;
     if (!name)
         throw new Error('Registry payload is missing name');
     if (files.length === 0)
@@ -310,9 +334,10 @@ function readRegistryPayload(value) {
         version,
         files,
         dependencies: asStringArray(value.dependencies),
+        framework,
     };
 }
-async function fetchRegistryPayload(url, fetchImpl) {
+async function fetchRegistryPayload(url, fetchImpl, fallbackFramework) {
     const response = await fetchImpl(url);
     const text = await response.text();
     const parsed = text ? JSON.parse(text) : {};
@@ -322,14 +347,19 @@ async function fetchRegistryPayload(url, fetchImpl) {
             : `Request failed with HTTP ${response.status}`;
         throw new Error(error);
     }
-    return readRegistryPayload(parsed);
+    return readRegistryPayload(parsed, fallbackFramework);
 }
-function targetForRegistryFile(config, file) {
+function targetForRegistryFile(config, file, framework) {
     const explicitTarget = typeof file.target === 'string' ? file.target.trim() : '';
     if (explicitTarget)
-        return explicitTarget;
+        return explicitTarget.replace(/\[framework\]/g, framework);
     const sourcePath = ensureRelativePath(typeof file.path === 'string' ? file.path : '', 'file.path');
     const mappings = [
+        [`components/${framework}/`, config.paths.components],
+        [`scenes/${framework}/`, config.paths.scenes],
+        [`overlays/${framework}/`, config.paths.overlays],
+        [`transitions/${framework}/`, config.paths.transitions],
+        [`assets/${framework}/`, config.paths.assets],
         ['components/', config.paths.components],
         ['scenes/', config.paths.scenes],
         ['overlays/', config.paths.overlays],
@@ -338,10 +368,11 @@ function targetForRegistryFile(config, file) {
     ];
     for (const [prefix, targetRoot] of mappings) {
         if (sourcePath.startsWith(prefix)) {
-            return path.posix.join(targetRoot.replace(/\/+$/, ''), sourcePath.slice(prefix.length));
+            const rootPath = targetRoot.replace(/\[framework\]/g, framework);
+            return path.posix.join(rootPath.replace(/\/+$/, ''), sourcePath.slice(prefix.length));
         }
     }
-    return path.posix.join('src/remotion-hub', sourcePath);
+    return path.posix.join('src/remotion-hub', sourcePath).replace(/\[framework\]/g, framework);
 }
 function packageJsonDependencies(projectDir) {
     const packageJsonPath = path.join(projectDir, 'package.json');
@@ -381,45 +412,21 @@ function installDependencies(projectDir, packageManager, dependencies, spawnImpl
     }
     return missing;
 }
-function exportNameFromSource(source, fallback) {
-    const match = source.match(/export\s+(?:function|const|class)\s+([A-Z][A-Za-z0-9_]*)/);
-    if (match?.[1])
-        return match[1];
-    return fallback
-        .split(/[^a-zA-Z0-9]+/)
-        .filter(Boolean)
-        .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
-        .join('') || 'RemotionHubComponent';
-}
-function importPath(fromFile, toFile) {
-    const withoutExtension = toFile.replace(/\.[cm]?[tj]sx?$/, '');
-    let relative = normalizeSlashes(path.relative(path.dirname(fromFile), withoutExtension));
-    if (!relative.startsWith('.'))
-        relative = `./${relative}`;
-    return relative;
-}
-function buildSnippet(config, projectDir, name, primaryFile, source) {
-    const rootFile = resolveInsideProject(projectDir, config.remotion.root, 'remotion.root');
-    const exportName = exportNameFromSource(source, name);
-    const importFrom = importPath(rootFile, primaryFile);
-    return [
-        `import { ${exportName} } from '${importFrom}';`,
-        '',
-        `<Composition id="${name}" component={${exportName}} durationInFrames={180} fps={30} width={1920} height={1080} />`,
-    ].join('\n');
-}
 export function runRemotionHubInit(options = {}) {
+    const framework = normalizeFrameworkId(options.framework);
+    const adapter = getComponentFrameworkAdapter(framework);
+    const normalizedOptions = { ...options, framework };
     const projectDir = resolveProjectDir(options.projectDir);
     const configPath = path.join(projectDir, CONFIG_FILE);
     const lockPath = path.join(projectDir, LOCK_FILE);
     const created = [];
-    const remotionCreate = ensureBaseRemotionProject(projectDir, options);
+    const create = ensureBaseFrameworkProject(projectDir, normalizedOptions);
     mkdirSync(projectDir, { recursive: true });
     const configExists = existsSync(configPath);
     const lockExists = existsSync(lockPath);
     const config = configExists && !options.force
         ? loadConfig(projectDir)
-        : defaultConfig(projectDir, options);
+        : defaultConfig(projectDir, normalizedOptions);
     if (!configExists || options.force) {
         writeJsonFile(configPath, config);
         created.push(CONFIG_FILE);
@@ -440,14 +447,17 @@ export function runRemotionHubInit(options = {}) {
     const lock = readJsonFile(lockPath, defaultLock());
     writeRegistryFile(projectDir, config, lock);
     created.push(config.paths.registry);
-    const skills = runRemotionSkillsInstall(projectDir, options);
+    const skills = runFrameworkSkillsInstall(projectDir, normalizedOptions);
     return {
         projectDir,
         configPath,
         lockPath,
         created,
         config,
-        remotionCreate,
+        framework,
+        devCommand: getFrameworkConfig(config, framework).devCommand ?? adapter.defaultDevCommand,
+        create,
+        remotionCreate: create,
         skills: {
             skipped: options.skipSkills === true,
             commands: skills,
@@ -457,9 +467,12 @@ export function runRemotionHubInit(options = {}) {
 export async function runRemotionHubAdd(options) {
     const projectDir = resolveProjectDir(options.projectDir);
     const config = loadConfig(projectDir);
+    const framework = normalizeFrameworkId(options.framework ?? getConfigDefaultFramework(config));
     const itemRef = parseItemRef(options.item, options.namespace || config.namespace);
-    const resolved = registryPayloadUrl(config, itemRef.namespace, itemRef.slug, options.registry);
-    const payload = await fetchRegistryPayload(resolved, options.fetchImpl ?? fetch);
+    const resolved = registryPayloadUrl(config, itemRef.namespace, itemRef.slug, options.registry, framework);
+    const payload = await fetchRegistryPayload(resolved, options.fetchImpl ?? fetch, framework);
+    const payloadFramework = normalizeFrameworkId(payload.framework || framework);
+    const payloadAdapter = getComponentFrameworkAdapter(payloadFramework);
     const lockPath = path.join(projectDir, LOCK_FILE);
     const lock = readJsonFile(lockPath, defaultLock());
     const written = [];
@@ -471,7 +484,7 @@ export async function runRemotionHubAdd(options) {
         const content = typeof file.content === 'string' ? file.content : '';
         if (!content)
             throw new Error(`Registry file for ${payload.name} is missing content`);
-        const relativeTarget = targetForRegistryFile(config, file);
+        const relativeTarget = targetForRegistryFile(config, file, payloadFramework);
         const destination = resolveInsideProject(projectDir, relativeTarget, 'file.target');
         const relativePath = normalizeSlashes(path.relative(projectDir, destination));
         if (seenTargets.has(relativePath)) {
@@ -500,7 +513,8 @@ export async function runRemotionHubAdd(options) {
             throw new Error(`Failed to write file: ${normalizeSlashes(path.relative(projectDir, destination))}`);
         }
     }
-    lock.installed[payload.name] = {
+    const lockKey = `${itemRef.namespace}/${itemRef.slug}/${payloadFramework}`;
+    lock.installed[lockKey] = {
         version: payload.version,
         type: payload.type,
         namespace: itemRef.namespace,
@@ -509,11 +523,18 @@ export async function runRemotionHubAdd(options) {
         files: written,
         dependencies: payload.dependencies,
         installedAt: new Date().toISOString(),
+        framework: payloadFramework,
     };
     writeJsonFile(lockPath, lock);
     writeRegistryFile(projectDir, config, lock);
     const snippet = primaryFile
-        ? buildSnippet(config, projectDir, payload.name, primaryFile, primarySource)
+        ? payloadAdapter.buildPostAddSnippet({
+            name: payload.name,
+            primaryFile,
+            source: primarySource,
+            projectDir,
+            config,
+        })
         : '';
     return {
         name: payload.name,
@@ -525,5 +546,6 @@ export async function runRemotionHubAdd(options) {
         dependencies: payload.dependencies,
         installedDependencies,
         snippet,
+        framework: payloadFramework,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doubledigit/cli",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "description": "CLI for Double Digit local setup and extension management.",
   "license": "MIT",