@stackable-labs/cli-app-extension 1.1.0 → 1.2.0

package/dist/index.js

@@ -6,8 +6,8 @@ import { render } from "ink";
 
 // src/App.tsx
 import { join as join2 } from "path";
-import { Box as Box12, Text as Text12, useApp } from "ink";
-import { useCallback, useState as useState8 } from "react";
+import { Box as Box13, Text as Text13, useApp } from "ink";
+import { useCallback, useState as useState9 } from "react";
 
 // src/components/Confirm.tsx
 import { Box as Box2, Text as Text2, useInput } from "ink";
@@ -319,7 +319,7 @@ var stepIcon = (status) => {
   }
 };
 var ScaffoldProgress = ({ steps }) => /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", gap: 1, children: [
-  /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Scaffolding your extension\u2026" }),
+  /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Scaffolding your Extension\u2026" }),
   /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", children: steps.map((step) => /* @__PURE__ */ jsxs8(Box8, { gap: 2, children: [
     stepIcon(step.status),
     /* @__PURE__ */ jsx8(Text8, { dimColor: step.status === "pending", color: step.status === "running" ? "cyan" : void 0, children: step.label })
@@ -336,11 +336,11 @@ var TARGET_DESCRIPTIONS = {
   "slot.footer": "Renders a footer bar at the bottom of the panel",
   "slot.footer-links": "Renders a link row in the global footer"
 };
-var TargetSelect = ({ availableTargets, onSubmit, onBack }) => {
+var TargetSelect = ({ availableTargets, preSelected, onSubmit, onBack }) => {
   const [cursor, setCursor] = useState6(0);
   const [backFocused, setBackFocused] = useState6(false);
   const [selected, setSelected] = useState6(
-    new Set(availableTargets.includes("slot.content") ? ["slot.content"] : [])
+    new Set(preSelected ?? (availableTargets.includes("slot.content") ? ["slot.content"] : []))
   );
   const [error, setError] = useState6();
   useInput3((input, key) => {
@@ -414,18 +414,41 @@ var TargetSelect = ({ availableTargets, onSubmit, onBack }) => {
 };
 
 // src/components/AppSelect.tsx
-import { Box as Box11, Text as Text11 } from "ink";
-import SelectInput from "ink-select-input";
+import { Box as Box11, Text as Text11, useInput as useInput4 } from "ink";
 import Spinner2 from "ink-spinner";
 import { useEffect, useState as useState7 } from "react";
 
 // src/lib/api.ts
-var API_BASE_URL = "https://api.stackablelabs.io/app-extension/latest";
+var DEFAULT_API_URL = "https://api.stackablelabs.io/app-extension/latest";
+var DEFAULT_ADMIN_API_URL = "https://api-use1.stackablelabs.io/admin";
+var getApiBaseUrl = () => process.env.API_BASE_URL ?? DEFAULT_API_URL;
+var getAdminApiBaseUrl = () => process.env.ADMIN_API_BASE_URL ?? DEFAULT_ADMIN_API_URL;
 var fetchApps = async () => {
-  const baseURL = `${process.env.API_BASE_URL ?? API_BASE_URL}/apps`;
+  const baseURL = `${getApiBaseUrl()}/apps`;
   const res = await fetch(baseURL);
   if (!res.ok) {
-    throw new Error(`Failed to fetch apps${baseURL !== API_BASE_URL ? ` (using ${baseURL})` : ""}: ${res.status} ${res.statusText}`);
+    throw new Error(`Failed to fetch apps: ${res.status} ${res.statusText}`);
+  }
+  return res.json();
+};
+var createExtensionRemote = async (appId, payload) => {
+  const baseUrl = getAdminApiBaseUrl();
+  const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(payload)
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`Failed to create extension: ${res.status} ${body}`);
+  }
+  return res.json();
+};
+var fetchExtensions = async (appId) => {
+  const baseUrl = getApiBaseUrl();
+  const res = await fetch(`${baseUrl}/extensions/${appId}`);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch extensions: ${res.status} ${res.statusText}`);
   }
   return res.json();
 };
@@ -480,15 +503,26 @@ var AppSelect = ({ onSubmit }) => {
   const [apps, setApps] = useState7([]);
   const [loading, setLoading] = useState7(true);
   const [error, setError] = useState7();
+  const [cursor, setCursor] = useState7(0);
   useEffect(() => {
     fetchApps().then(setApps).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
   }, []);
+  useInput4((_, key) => {
+    if (loading || error || apps.length === 0) return;
+    if (key.upArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+    } else if (key.downArrow) {
+      setCursor((c) => Math.min(apps.length - 1, c + 1));
+    } else if (key.return) {
+      onSubmit(apps[cursor]);
+    }
+  });
   if (loading) {
     return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx11(Banner, {}),
       /* @__PURE__ */ jsxs11(Box11, { gap: 2, paddingX: 1, children: [
         /* @__PURE__ */ jsx11(Spinner2, { type: "dots" }),
-        /* @__PURE__ */ jsx11(Text11, { children: "Loading available apps\u2026" })
+        /* @__PURE__ */ jsx11(Text11, { children: "Loading available Apps\u2026" })
       ] })
     ] });
   }
@@ -501,20 +535,103 @@ var AppSelect = ({ onSubmit }) => {
   if (apps.length === 0) {
     return /* @__PURE__ */ jsx11(Text11, { color: "yellow", children: "No apps available. Contact your administrator." });
   }
-  const items = apps.map((app) => ({
-    label: app.name,
-    value: app.id
-  }));
-  const handleSelect = (item) => {
-    const app = apps.find((a) => a.id === item.value);
-    if (app) onSubmit(app);
-  };
   return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx11(Banner, {}),
-    /* @__PURE__ */ jsx11(StepShell, { title: "Select the App you are building an Extension for:", children: /* @__PURE__ */ jsx11(SelectInput, { items, onSelect: handleSelect }) })
+    /* @__PURE__ */ jsx11(StepShell, { title: "Select the App you are building an Extension for:", children: /* @__PURE__ */ jsx11(Box11, { flexDirection: "column", children: apps.map((app, i) => {
+      const isCursor = i === cursor;
+      return /* @__PURE__ */ jsxs11(Box11, { gap: 1, children: [
+        /* @__PURE__ */ jsx11(Text11, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+        /* @__PURE__ */ jsx11(Text11, { bold: isCursor, children: app.name }),
+        /* @__PURE__ */ jsxs11(Text11, { dimColor: true, children: [
+          "(",
+          app.id,
+          ")"
+        ] })
+      ] }, app.id);
+    }) }) })
   ] });
 };
 
+// src/components/ExtensionSelect.tsx
+import { Box as Box12, Text as Text12, useInput as useInput5 } from "ink";
+import Spinner3 from "ink-spinner";
+import { useEffect as useEffect2, useState as useState8 } from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var ExtensionSelect = ({ appId, onSubmit, onBack }) => {
+  const [extensions, setExtensions] = useState8([]);
+  const [loading, setLoading] = useState8(true);
+  const [error, setError] = useState8();
+  const [cursor, setCursor] = useState8(0);
+  const [backFocused, setBackFocused] = useState8(false);
+  useEffect2(() => {
+    fetchExtensions(appId).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
+  }, [appId]);
+  useInput5((_, key) => {
+    if (loading || error || extensions.length === 0) return;
+    if (key.upArrow) {
+      if (cursor === 0 && onBack) {
+        setBackFocused(true);
+      } else {
+        setBackFocused(false);
+        setCursor((c) => Math.max(0, c - 1));
+      }
+      return;
+    }
+    if (key.downArrow) {
+      if (backFocused) {
+        setBackFocused(false);
+      } else {
+        setCursor((c) => Math.min(extensions.length - 1, c + 1));
+      }
+      return;
+    }
+    if (key.return) {
+      if (backFocused) {
+        onBack?.();
+        return;
+      }
+      onSubmit(extensions[cursor]);
+    }
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsxs12(Box12, { gap: 2, paddingX: 1, children: [
+      /* @__PURE__ */ jsx12(Spinner3, { type: "dots" }),
+      /* @__PURE__ */ jsx12(Text12, { children: "Loading Extensions\u2026" })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx12(Text12, { color: "red", bold: true, children: "Failed to load Extensions" }),
+      /* @__PURE__ */ jsx12(Text12, { color: "red", children: error })
+    ] });
+  }
+  if (extensions.length === 0) {
+    return /* @__PURE__ */ jsx12(Text12, { color: "yellow", children: "No Extensions found for this App." });
+  }
+  return /* @__PURE__ */ jsx12(StepShell, { title: "Select an existing Extension to scaffold:", onBack, backFocused, children: /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", children: extensions.map((ext, i) => {
+    const isCursor = i === cursor && !backFocused;
+    return /* @__PURE__ */ jsxs12(Box12, { gap: 1, children: [
+      /* @__PURE__ */ jsx12(Text12, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+      /* @__PURE__ */ jsx12(Text12, { bold: isCursor, children: ext.manifest.name }),
+      /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
+        "(",
+        ext.id,
+        ")"
+      ] })
+    ] }, ext.id);
+  }) }) });
+};
+
+// src/constants.ts
+var TEMPLATE_SOURCE = "github:stackable-labs/templates/app-extension";
+var DEFAULT_PERMISSIONS = ["context:read"];
+var TARGET_PERMISSION_MAP = {
+  "slot.header": ["context:read"],
+  "slot.content": ["context:read", "data:query", "actions:toast", "actions:invoke"],
+  "slot.footer": [],
+  "slot.footer-links": []
+};
+
 // src/lib/postScaffold.ts
 import { execFile } from "child_process";
 import { promisify } from "util";
@@ -541,18 +658,6 @@ var postScaffold = async (options) => {
 import { readFile, readdir, rm, writeFile } from "fs/promises";
 import { join } from "path";
 import { downloadTemplate } from "giget";
-
-// src/constants.ts
-var TEMPLATE_SOURCE = "github:stackable-labs/templates/app-extension";
-var DEFAULT_PERMISSIONS = ["context:read"];
-var TARGET_PERMISSION_MAP = {
-  "slot.header": ["context:read"],
-  "slot.content": ["context:read", "data:query", "actions:toast", "actions:invoke"],
-  "slot.footer": [],
-  "slot.footer-links": []
-};
-
-// src/lib/scaffold.ts
 var normalizeTargets = (targets) => Array.from(new Set(targets));
 var derivePermissions = (targets) => {
   const permissions = /* @__PURE__ */ new Set();
@@ -737,7 +842,7 @@ var rewritePreviewApp = async (rootDir, targets, permissions) => {
   }
   const appContent = `import { ExtensionProvider, ExtensionSlot } from '@stackable-labs/sdk-extension-host'
 import type { CapabilityHandlers } from '@stackable-labs/sdk-extension-host'
-import { hostComponents } from '@stackable-labs/embeddables/components'
+import hostComponents from '@stackable-labs/embeddables/components'
 import type {
   ${typeImports.join(",\n  ")}
 } from '@stackable-labs/sdk-extension-contracts'
@@ -851,47 +956,93 @@ var scaffold = async (options) => {
 };
 
 // src/App.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var STEP_ORDER = ["app", "name", "targets", "ports", "dir", "confirm"];
-var INITIAL_STEPS = [
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var STEP_ORDER_CREATE = ["app", "name", "targets", "ports", "dir", "confirm"];
+var STEP_ORDER_SCAFFOLD = ["app", "extensionSelect", "confirmName", "confirmTargets", "ports", "dir", "confirm"];
+var CREATE_STEPS = [
+  { label: "Registering extension", status: "pending" },
+  { label: "Fetching template", status: "pending" },
+  { label: "Generating files", status: "pending" },
+  { label: "Installing dependencies", status: "pending" }
+];
+var SCAFFOLD_STEPS = [
   { label: "Fetching template", status: "pending" },
   { label: "Generating files", status: "pending" },
   { label: "Installing dependencies", status: "pending" }
 ];
 var toKebabCase2 = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-var App = ({ initialName, options }) => {
+var derivePermissions2 = (targets) => {
+  const permissions = /* @__PURE__ */ new Set();
+  for (const target of targets) {
+    const mapped = TARGET_PERMISSION_MAP[target];
+    if (mapped && mapped.length > 0) {
+      for (const permission of mapped) {
+        permissions.add(permission);
+      }
+    }
+  }
+  if (permissions.size === 0) {
+    for (const permission of DEFAULT_PERMISSIONS) {
+      permissions.add(permission);
+    }
+  }
+  return [...permissions];
+};
+var App = ({ mode, initialName, options }) => {
   const { exit } = useApp();
-  const [step, setStep] = useState8("app");
-  const [name, setName] = useState8(initialName ?? "");
-  const [extensionId, setExtensionId] = useState8("");
-  const [selectedApp, setSelectedApp] = useState8(null);
-  const [extensionPort, setExtensionPort] = useState8(
+  const [step, setStep] = useState9("app");
+  const [name, setName] = useState9(initialName ?? "");
+  const [extensionId, setExtensionId] = useState9("");
+  const [selectedApp, setSelectedApp] = useState9(null);
+  const [extensionPort, setExtensionPort] = useState9(
     options?.extensionPort ? parseInt(options.extensionPort, 10) : 5173
   );
-  const [previewPort, setPreviewPort] = useState8(
+  const [previewPort, setPreviewPort] = useState9(
     options?.previewPort ? parseInt(options.previewPort, 10) : 5174
   );
-  const [targets, setTargets] = useState8([]);
-  const [outputDir, setOutputDir] = useState8("");
-  const [progressSteps, setProgressSteps] = useState8(INITIAL_STEPS);
-  const [errorMessage, setErrorMessage] = useState8();
+  const [targets, setTargets] = useState9([]);
+  const [outputDir, setOutputDir] = useState9("");
+  const [progressSteps, setProgressSteps] = useState9(mode === "create" ? CREATE_STEPS : SCAFFOLD_STEPS);
+  const [errorMessage, setErrorMessage] = useState9();
   const updateStep = useCallback((index, status) => {
     setProgressSteps((prev) => prev.map((s, i) => i === index ? { ...s, status } : s));
   }, []);
+  const activeSteps = useCallback(() => {
+    const base = mode === "create" ? STEP_ORDER_CREATE : STEP_ORDER_SCAFFOLD;
+    const skipped = /* @__PURE__ */ new Set();
+    if (mode === "create" && initialName) skipped.add("name");
+    if (options?.extensionPort || options?.previewPort) skipped.add("ports");
+    return base.filter((s) => !skipped.has(s));
+  }, [mode, initialName, options?.extensionPort, options?.previewPort]);
   const goBack = useCallback(() => {
-    const skippedSteps = /* @__PURE__ */ new Set();
-    if (initialName) skippedSteps.add("name");
-    if (options?.extensionPort || options?.previewPort) skippedSteps.add("ports");
-    const activeSteps = STEP_ORDER.filter((s) => !skippedSteps.has(s));
     setStep((prev) => {
-      const idx = activeSteps.indexOf(prev);
-      return idx > 0 ? activeSteps[idx - 1] : prev;
+      const steps = activeSteps();
+      const idx = steps.indexOf(prev);
+      return idx > 0 ? steps[idx - 1] : prev;
     });
-  }, [initialName, options?.extensionPort, options?.previewPort]);
+  }, [activeSteps]);
   const handleAppSelect = (app) => {
     setSelectedApp(app);
+    if (mode === "scaffold") {
+      setStep("extensionSelect");
+      return;
+    }
     setStep(initialName ? "targets" : "name");
   };
+  const handleExtensionSelect = (ext) => {
+    setName(ext.manifest.name);
+    setExtensionId(ext.id);
+    setTargets(ext.manifest.targets);
+    setStep("confirmName");
+  };
+  const handleConfirmName = (value) => {
+    setName(value);
+    setStep("confirmTargets");
+  };
+  const handleConfirmTargets = (value) => {
+    setTargets(value);
+    setStep(options?.extensionPort || options?.previewPort ? "dir" : "ports");
+  };
   const handleName = (value) => {
     setName(value);
     setExtensionId(toKebabCase2(value));
@@ -912,32 +1063,46 @@ var App = ({ initialName, options }) => {
   };
   const handleConfirm = async () => {
     setStep("scaffolding");
-    setProgressSteps([
-      { label: "Fetching template", status: "running" },
-      { label: "Generating files", status: "pending" },
-      { label: "Installing dependencies", status: "pending" }
-    ]);
+    setProgressSteps(mode === "create" ? CREATE_STEPS : SCAFFOLD_STEPS);
     try {
-      updateStep(0, "running");
+      let resolvedExtensionId = extensionId || toKebabCase2(name);
+      let scaffoldStepOffset = 0;
+      if (mode === "create") {
+        scaffoldStepOffset = 1;
+        updateStep(0, "running");
+        const created = await createExtensionRemote(selectedApp.id, {
+          manifest: {
+            name,
+            version: "0.0.0",
+            targets,
+            permissions: derivePermissions2(targets)
+          },
+          bundleUrl: `http://localhost:${extensionPort}`
+        });
+        resolvedExtensionId = created.id;
+        setExtensionId(created.id);
+        updateStep(0, "done");
+      }
+      updateStep(scaffoldStepOffset + 0, "running");
       await scaffold({
         appId: selectedApp.id,
         name,
-        extensionId,
+        extensionId: resolvedExtensionId,
         targets,
         outputDir,
         extensionPort,
         previewPort
       });
-      updateStep(0, "done");
-      updateStep(1, "running");
+      updateStep(scaffoldStepOffset + 0, "done");
+      updateStep(scaffoldStepOffset + 1, "running");
       await new Promise((r) => setTimeout(r, 200));
-      updateStep(1, "done");
+      updateStep(scaffoldStepOffset + 1, "done");
       if (!options?.skipInstall) {
-        updateStep(2, "running");
+        updateStep(scaffoldStepOffset + 2, "running");
         await postScaffold({ outputDir, skipInstall: false, skipGit: options?.skipGit });
-        updateStep(2, "done");
+        updateStep(scaffoldStepOffset + 2, "done");
       } else {
-        updateStep(2, "done");
+        updateStep(scaffoldStepOffset + 2, "done");
       }
       setStep("done");
     } catch (err) {
@@ -951,10 +1116,41 @@ var App = ({ initialName, options }) => {
   };
   switch (step) {
     case "app": {
-      return /* @__PURE__ */ jsx12(AppSelect, { onSubmit: handleAppSelect });
+      return /* @__PURE__ */ jsx13(AppSelect, { onSubmit: handleAppSelect });
+    }
+    case "extensionSelect": {
+      return /* @__PURE__ */ jsx13(
+        ExtensionSelect,
+        {
+          appId: selectedApp.id,
+          onSubmit: handleExtensionSelect,
+          onBack: goBack
+        }
+      );
+    }
+    case "confirmName": {
+      return /* @__PURE__ */ jsx13(
+        NamePrompt,
+        {
+          initialValue: name,
+          onSubmit: handleConfirmName,
+          onBack: goBack
+        }
+      );
+    }
+    case "confirmTargets": {
+      return /* @__PURE__ */ jsx13(
+        TargetSelect,
+        {
+          availableTargets: selectedApp?.targets ?? [],
+          preSelected: targets,
+          onSubmit: handleConfirmTargets,
+          onBack: goBack
+        }
+      );
     }
     case "name": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         NamePrompt,
         {
           initialValue: name,
@@ -964,7 +1160,7 @@ var App = ({ initialName, options }) => {
       );
     }
     case "targets": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         TargetSelect,
         {
           availableTargets: selectedApp?.targets ?? [],
@@ -974,7 +1170,7 @@ var App = ({ initialName, options }) => {
       );
     }
     case "ports": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         PortsPrompt,
         {
           onSubmit: handlePorts,
@@ -983,17 +1179,17 @@ var App = ({ initialName, options }) => {
       );
     }
     case "dir": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         DirPrompt,
         {
-          defaultDir: join2(process.cwd(), toKebabCase2(name)),
+          defaultDir: join2(process.cwd(), toKebabCase2(extensionId || name)),
           onSubmit: handleDir,
           onBack: goBack
         }
       );
     }
     case "confirm": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         Confirm,
         {
           name,
@@ -1008,23 +1204,31 @@ var App = ({ initialName, options }) => {
       );
     }
     case "scaffolding": {
-      return /* @__PURE__ */ jsx12(ScaffoldProgress, { steps: progressSteps });
+      return /* @__PURE__ */ jsx13(ScaffoldProgress, { steps: progressSteps });
     }
     case "done": {
-      return /* @__PURE__ */ jsx12(Done, { name, outputDir });
+      return /* @__PURE__ */ jsx13(Done, { name, outputDir });
     }
     default: {
-      return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsx12(Text12, { color: "red", bold: true, children: "Scaffold failed" }),
-        errorMessage && /* @__PURE__ */ jsx12(Text12, { color: "red", children: errorMessage })
+      return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx13(Text13, { color: "red", bold: true, children: "Scaffold failed" }),
+        errorMessage && /* @__PURE__ */ jsx13(Text13, { color: "red", children: errorMessage })
       ] });
     }
   }
 };
 
 // src/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-program.name("create-extension").description("Scaffold a new Stackable extension project").argument("[name]", "Extension project name").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview host dev server port (default: extension port + 1)").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((name, options) => {
-  render(/* @__PURE__ */ jsx13(App, { initialName: name, options }));
+import { jsx as jsx14 } from "react/jsx-runtime";
+program.name("stackable-extension").description("Stackable extension developer CLI");
+program.command("create").description("Create a new extension project").argument("[name]", "Extension project name").option("--targets <targets>", "Comma-separated target slots").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview host dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((name, options) => {
+  render(/* @__PURE__ */ jsx14(App, { mode: "create", initialName: name, options }));
+});
+program.command("scaffold").description("Scaffold a local project from an existing extension").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview host dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((options) => {
+  render(/* @__PURE__ */ jsx14(App, { mode: "scaffold", options }));
 });
-program.parse(process.argv.filter((arg) => arg !== "--"));
+if (process.argv[1]?.endsWith("create-extension")) {
+  program.parse(["node", "stackable-extension", "create", ...process.argv.slice(2).filter((arg) => arg !== "--")]);
+} else {
+  program.parse(process.argv.filter((arg) => arg !== "--"));
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@stackable-labs/cli-app-extension",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "private": false,
   "bin": {
     "create-extension": "./dist/index.js",
-    "cli-app-extension": "./dist/index.js"
+    "stackable-extension": "./dist/index.js"
   },
   "files": [
     "dist/",