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

package/dist/index.js

@@ -43,8 +43,9 @@ var StepShell = ({ title, hint, children, footer, onBack, backFocused }) => {
 
 // src/components/Confirm.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Confirm = ({ name, extensionPort, previewPort, targets, outputDir, onConfirm, onCancel, onBack }) => {
+var Confirm = ({ name, extensionVersion, extensionPort, previewPort, targets, outputDir, onConfirm, onCancel, onBack }) => {
   const [backFocused, setBackFocused] = useState(false);
+  const [selected, setSelected] = useState("y");
   useInput((input, key) => {
     if (key.upArrow && onBack) {
       setBackFocused(true);
@@ -59,12 +60,21 @@ var Confirm = ({ name, extensionPort, previewPort, targets, outputDir, onConfirm
       return;
     }
     if (backFocused) return;
-    if (input === "y" || key.return) {
-      onConfirm();
+    if (key.leftArrow || key.rightArrow) {
+      setSelected((s) => s === "y" ? "n" : "y");
+      return;
+    }
+    if (input === "y") {
+      setSelected("y");
       return;
     }
     if (input === "n") {
-      onCancel();
+      setSelected("n");
+      return;
+    }
+    if (key.return) {
+      if (selected === "y") onConfirm();
+      else onCancel();
     }
   });
   return /* @__PURE__ */ jsx2(
@@ -75,15 +85,20 @@ var Confirm = ({ name, extensionPort, previewPort, targets, outputDir, onConfirm
       onBack,
       backFocused,
       footer: /* @__PURE__ */ jsxs2(Text2, { children: [
-        "Proceed? ",
-        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "green", children: "Y" }),
-        "/",
-        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "red", children: "n" })
+        "Proceed?",
+        " ",
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "green", inverse: selected === "y", children: "Y" }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "/" }),
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "red", inverse: selected === "n", children: "n" })
       ] }),
       children: /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap: 1, children: [
         /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Name          " }),
-          /* @__PURE__ */ jsx2(Text2, { children: name })
+          /* @__PURE__ */ jsx2(Text2, { dimColor: !!extensionVersion, children: name })
+        ] }),
+        extensionVersion && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Version       " }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: extensionVersion })
         ] }),
         /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Directory     " }),
@@ -109,15 +124,55 @@ var Confirm = ({ name, extensionPort, previewPort, targets, outputDir, onConfirm
   );
 };
 
-// src/components/DirPrompt.tsx
-import { Box as Box4, Text as Text4 } from "ink";
+// src/components/Done.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Done = ({ name, outputDir }) => /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, children: [
+  /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+    /* @__PURE__ */ jsx3(Text3, { color: "green", bold: true, children: "\u2714" }),
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Extension scaffolded successfully!" })
+  ] }),
+  /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginLeft: 2, children: [
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "Created: ",
+      /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: name })
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "Location: ",
+      /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: outputDir })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: "green", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Next steps:" }),
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, gap: 1, children: [
+      /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "1." }),
+        /* @__PURE__ */ jsxs3(Text3, { children: [
+          /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "cd " }),
+          /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: outputDir })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "2." }),
+        /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "pnpm install" })
+      ] }),
+      /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "3." }),
+        /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "pnpm dev" })
+      ] })
+    ] })
+  ] })
+] });
+
+// src/components/NamePrompt.tsx
+import { Box as Box5, Text as Text5 } from "ink";
 import TextInput from "ink-text-input";
 import { useState as useState3 } from "react";
 
 // src/components/BackableInput.tsx
-import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
+import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
 import { useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var BackableInput = ({ label, hint, onBack, children, error }) => {
   const [focus, setFocus] = useState2("input");
   useInput2((_input, key) => {
@@ -133,77 +188,17 @@ var BackableInput = ({ label, hint, onBack, children, error }) => {
       onBack?.();
     }
   });
-  return /* @__PURE__ */ jsx3(StepShell, { title: label, hint, onBack, backFocused: focus === "back", children: /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, children: [
+  return /* @__PURE__ */ jsx4(StepShell, { title: label, hint, onBack, backFocused: focus === "back", children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
     children(focus === "input"),
-    error && /* @__PURE__ */ jsx3(Text3, { color: "red", children: error })
-  ] }) });
-};
-
-// src/components/DirPrompt.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var DirPrompt = ({ defaultDir, onSubmit, onBack }) => {
-  const [value, setValue] = useState3(defaultDir);
-  const handleSubmit = (val) => {
-    const trimmed = val.trim();
-    if (trimmed.length === 0) {
-      return;
-    }
-    onSubmit(trimmed);
-  };
-  return /* @__PURE__ */ jsx4(BackableInput, { label: "Output directory:", hint: "Press Enter to confirm", onBack, children: (isFocused) => /* @__PURE__ */ jsxs4(Box4, { children: [
-    /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "\u2192 " }),
-    /* @__PURE__ */ jsx4(TextInput, { value, onChange: setValue, onSubmit: handleSubmit, focus: isFocused })
+    error && /* @__PURE__ */ jsx4(Text4, { color: "red", children: error })
   ] }) });
 };
 
-// src/components/Done.tsx
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var Done = ({ name, outputDir }) => /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, children: [
-  /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
-    /* @__PURE__ */ jsx5(Text5, { color: "green", bold: true, children: "\u2714" }),
-    /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Extension scaffolded successfully!" })
-  ] }),
-  /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginLeft: 2, children: [
-    /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
-      "Created: ",
-      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: name })
-    ] }),
-    /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
-      "Location: ",
-      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: outputDir })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: "green", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Next steps:" }),
-    /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, gap: 1, children: [
-      /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "1." }),
-        /* @__PURE__ */ jsxs5(Text5, { children: [
-          /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "cd " }),
-          /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: outputDir })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "2." }),
-        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "pnpm install" })
-      ] }),
-      /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "3." }),
-        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "pnpm dev" })
-      ] })
-    ] })
-  ] })
-] });
-
 // src/components/NamePrompt.tsx
-import { Box as Box6, Text as Text6 } from "ink";
-import TextInput2 from "ink-text-input";
-import { useState as useState4 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var NamePrompt = ({ initialValue = "", onSubmit, onBack }) => {
-  const [value, setValue] = useState4(initialValue);
-  const [error, setError] = useState4();
+  const [value, setValue] = useState3(initialValue);
+  const [error, setError] = useState3();
   const handleSubmit = (val) => {
     const trimmed = val.trim();
     if (trimmed.length === 0) {
@@ -213,88 +208,143 @@ var NamePrompt = ({ initialValue = "", onSubmit, onBack }) => {
     setError(void 0);
     onSubmit(trimmed);
   };
-  return /* @__PURE__ */ jsx6(BackableInput, { label: "What is your Extension name?", hint: "Press Enter to confirm", onBack, error, children: (isFocused) => /* @__PURE__ */ jsxs6(Box6, { children: [
-    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "> " }),
-    /* @__PURE__ */ jsx6(TextInput2, { value, onChange: setValue, onSubmit: handleSubmit, focus: isFocused })
+  return /* @__PURE__ */ jsx5(BackableInput, { label: "What is your Extension name?", hint: "Press Enter to confirm", onBack, error, children: (isFocused) => /* @__PURE__ */ jsxs5(Box5, { children: [
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "> " }),
+    /* @__PURE__ */ jsx5(TextInput, { value, onChange: setValue, onSubmit: handleSubmit, focus: isFocused })
   ] }) });
 };
 
-// src/components/PortsPrompt.tsx
-import { Box as Box7, Text as Text7 } from "ink";
-import TextInput3 from "ink-text-input";
-import { useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+// src/components/SettingsPrompt.tsx
+import { Box as Box6, Text as Text6, useFocus, useFocusManager, useInput as useInput3 } from "ink";
+import TextInput2 from "ink-text-input";
+import { useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_EXTENSION_PORT = 5173;
 var DEFAULT_PREVIEW_PORT = DEFAULT_EXTENSION_PORT + 1;
-var PortsPrompt = ({ onSubmit, onBack }) => {
-  const [extensionPort, setExtensionPort] = useState5(String(DEFAULT_EXTENSION_PORT));
-  const [previewPort, setPreviewPort] = useState5(String(DEFAULT_PREVIEW_PORT));
-  const [step, setStep] = useState5("extension");
-  const handleExtensionSubmit = (value) => {
-    const trimmed = value.trim();
-    const port = trimmed === "" ? DEFAULT_EXTENSION_PORT : parseInt(trimmed, 10);
-    if (isNaN(port) || port < 1024 || port > 65535) {
-      return;
+var FieldRow = ({ label, value, onChange, onSubmit, onConfirm, placeholder, autoFocus, isFirst, isLast, onFocusBack }) => {
+  const { isFocused } = useFocus({ autoFocus });
+  const { focusNext, focusPrevious } = useFocusManager();
+  useInput3((_input, key) => {
+    if (!isFocused) return;
+    if (key.downArrow && !isLast) focusNext();
+    if (key.upArrow) {
+      if (isFirst && onFocusBack) {
+        onFocusBack();
+      } else if (!isFirst) {
+        focusPrevious();
+      }
     }
-    setExtensionPort(String(port));
-    setPreviewPort(String(port + 1));
-    setStep("preview");
+  });
+  return /* @__PURE__ */ jsxs6(Box6, { gap: 2, children: [
+    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: label }),
+    isFocused ? /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "\u2192 " }),
+      /* @__PURE__ */ jsx6(
+        TextInput2,
+        {
+          value,
+          onChange,
+          onSubmit: (val) => {
+            const result = onSubmit(val);
+            if (result) onConfirm(...result);
+          },
+          placeholder,
+          focus: isFocused
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: value })
+  ] });
+};
+var SettingsPrompt = ({ defaultDir, onSubmit, onBack }) => {
+  const [backFocused, setBackFocused] = useState4(false);
+  const [extensionPort, setExtensionPort] = useState4(String(DEFAULT_EXTENSION_PORT));
+  const [previewPort, setPreviewPort] = useState4(String(DEFAULT_PREVIEW_PORT));
+  const [outputDir, setOutputDir] = useState4(defaultDir);
+  const handleFocusBack = () => {
+    if (onBack) setBackFocused(true);
   };
-  const handlePreviewSubmit = (value) => {
-    const extPort = parseInt(extensionPort, 10);
-    const trimmed = value.trim();
-    const prevPort = trimmed === "" ? extPort + 1 : parseInt(trimmed, 10);
-    if (isNaN(prevPort) || prevPort < 1024 || prevPort > 65535) {
+  useInput3((_input, key) => {
+    if (key.downArrow && backFocused) {
+      setBackFocused(false);
       return;
     }
-    onSubmit(extPort, prevPort);
-  };
-  const handleBack = () => {
-    if (step === "preview") {
-      setStep("extension");
-    } else {
+    if (key.return && backFocused) {
       onBack?.();
+      return;
     }
+  });
+  const handleConfirm = (resolvedExtPort, resolvedPrevPort, resolvedDir) => {
+    const dir = resolvedDir.trim();
+    if (!dir) return;
+    onSubmit(parseInt(resolvedExtPort, 10), parseInt(resolvedPrevPort, 10), dir);
   };
-  if (step === "extension") {
-    return /* @__PURE__ */ jsx7(
-      BackableInput,
-      {
-        label: "Extension dev Server port:",
-        hint: "Press Enter to confirm",
-        onBack: onBack ? handleBack : void 0,
-        children: (isFocused) => /* @__PURE__ */ jsxs7(Box7, { children: [
-          /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "\u2192 " }),
-          /* @__PURE__ */ jsx7(
-            TextInput3,
-            {
-              value: extensionPort,
-              onChange: setExtensionPort,
-              onSubmit: handleExtensionSubmit,
-              placeholder: String(DEFAULT_EXTENSION_PORT),
-              focus: isFocused
-            }
-          )
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx7(
-    BackableInput,
+  const handleExtensionPortSubmit = (value) => {
+    const trimmed = value.trim();
+    const port = trimmed === "" ? DEFAULT_EXTENSION_PORT : parseInt(trimmed, 10);
+    if (isNaN(port) || port < 1024 || port > 65535) return false;
+    const newExtPort = String(port);
+    const newPrevPort = String(port + 1);
+    setExtensionPort(newExtPort);
+    setPreviewPort(newPrevPort);
+    return [newExtPort, newPrevPort, outputDir];
+  };
+  const handlePreviewPortSubmit = (value) => {
+    const extPort = parseInt(extensionPort, 10);
+    const trimmed = value.trim();
+    const port = trimmed === "" ? extPort + 1 : parseInt(trimmed, 10);
+    if (isNaN(port) || port < 1024 || port > 65535) return false;
+    const newPrevPort = String(port);
+    setPreviewPort(newPrevPort);
+    return [extensionPort, newPrevPort, outputDir];
+  };
+  const handleOutputDirSubmit = (value) => {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) return false;
+    setOutputDir(trimmed);
+    return [extensionPort, previewPort, trimmed];
+  };
+  return /* @__PURE__ */ jsx6(
+    StepShell,
     {
-      label: "Extension dev Preview port:",
-      hint: "Press Enter to confirm",
-      onBack: handleBack,
-      children: (isFocused) => /* @__PURE__ */ jsxs7(Box7, { children: [
-        /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "\u2192 " }),
-        /* @__PURE__ */ jsx7(
-          TextInput3,
+      title: "Project settings",
+      hint: "\u2191\u2193 or Tab to move between fields, Enter to confirm",
+      onBack,
+      backFocused,
+      children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx6(
+          FieldRow,
+          {
+            label: "Extension port  ",
+            value: extensionPort,
+            onChange: setExtensionPort,
+            onSubmit: handleExtensionPortSubmit,
+            onConfirm: handleConfirm,
+            placeholder: String(DEFAULT_EXTENSION_PORT),
+            autoFocus: true,
+            isFirst: true,
+            onFocusBack: handleFocusBack
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FieldRow,
           {
+            label: "Preview port    ",
             value: previewPort,
             onChange: setPreviewPort,
-            onSubmit: handlePreviewSubmit,
-            placeholder: String(DEFAULT_EXTENSION_PORT + 1),
-            focus: isFocused
+            onSubmit: handlePreviewPortSubmit,
+            onConfirm: handleConfirm,
+            placeholder: String(DEFAULT_PREVIEW_PORT)
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FieldRow,
+          {
+            label: "Output directory",
+            value: outputDir,
+            onChange: setOutputDir,
+            onSubmit: handleOutputDirSubmit,
+            onConfirm: handleConfirm,
+            isLast: true
           }
         )
       ] })
@@ -303,47 +353,47 @@ var PortsPrompt = ({ onSubmit, onBack }) => {
 };
 
 // src/components/ScaffoldProgress.tsx
-import { Box as Box8, Text as Text8 } from "ink";
+import { Box as Box7, Text as Text7 } from "ink";
 import Spinner from "ink-spinner";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var stepIcon = (status) => {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ jsx8(Spinner, { type: "dots" });
+      return /* @__PURE__ */ jsx7(Spinner, { type: "dots" });
     case "done":
-      return /* @__PURE__ */ jsx8(Text8, { color: "green", children: "\u2714" });
+      return /* @__PURE__ */ jsx7(Text7, { color: "green", children: "\u2714" });
     case "error":
-      return /* @__PURE__ */ jsx8(Text8, { color: "red", children: "\u2716" });
+      return /* @__PURE__ */ jsx7(Text7, { color: "red", children: "\u2716" });
     default:
-      return /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "\u25CB" });
+      return /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "\u25CB" });
   }
 };
-var ScaffoldProgress = ({ steps }) => /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", gap: 1, children: [
-  /* @__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: [
+var ScaffoldProgress = ({ steps }) => /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", gap: 1, children: [
+  /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Scaffolding your Extension\u2026" }),
+  /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: steps.map((step) => /* @__PURE__ */ jsxs7(Box7, { gap: 2, children: [
     stepIcon(step.status),
-    /* @__PURE__ */ jsx8(Text8, { dimColor: step.status === "pending", color: step.status === "running" ? "cyan" : void 0, children: step.label })
+    /* @__PURE__ */ jsx7(Text7, { dimColor: step.status === "pending", color: step.status === "running" ? "cyan" : void 0, children: step.label })
   ] }, step.label)) })
 ] });
 
 // src/components/TargetSelect.tsx
-import { Box as Box9, Text as Text9, useInput as useInput3 } from "ink";
-import { useState as useState6 } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box8, Text as Text8, useInput as useInput4 } from "ink";
+import { useState as useState5 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var TARGET_DESCRIPTIONS = {
   "slot.header": "Renders content in the panel header area",
   "slot.content": "Renders the main panel body (includes store + navigation state)",
   "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 }) => {
-  const [cursor, setCursor] = useState6(0);
-  const [backFocused, setBackFocused] = useState6(false);
-  const [selected, setSelected] = useState6(
-    new Set(availableTargets.includes("slot.content") ? ["slot.content"] : [])
+var TargetSelect = ({ availableTargets, preSelected, onSubmit, onBack }) => {
+  const [cursor, setCursor] = useState5(0);
+  const [backFocused, setBackFocused] = useState5(false);
+  const [selected, setSelected] = useState5(
+    new Set(preSelected ?? (availableTargets.includes("slot.content") ? ["slot.content"] : []))
   );
-  const [error, setError] = useState6();
-  useInput3((input, key) => {
+  const [error, setError] = useState5();
+  useInput4((input, key) => {
     if (key.upArrow) {
       if (cursor === 0 && onBack) {
         setBackFocused(true);
@@ -387,7 +437,7 @@ var TargetSelect = ({ availableTargets, onSubmit, onBack }) => {
       onSubmit([...selected]);
     }
   });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8(
     StepShell,
     {
       title: "Select Surface targets/slots",
@@ -395,44 +445,67 @@ var TargetSelect = ({ availableTargets, onSubmit, onBack }) => {
       onBack,
       backFocused,
       children: [
-        /* @__PURE__ */ jsx9(Box9, { flexDirection: "column", gap: 1, children: availableTargets.map((target, i) => {
+        /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", gap: 1, children: availableTargets.map((target, i) => {
           const isSelected = selected.has(target);
           const isCursor = i === cursor && !backFocused;
-          return /* @__PURE__ */ jsxs9(Box9, { gap: 1, children: [
-            /* @__PURE__ */ jsx9(Text9, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
-            /* @__PURE__ */ jsx9(Text9, { color: isSelected ? "green" : void 0, children: isSelected ? "\u25C9" : "\u25CB" }),
-            /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
-              /* @__PURE__ */ jsx9(Text9, { bold: isSelected, children: target }),
-              /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: TARGET_DESCRIPTIONS[target] ?? target })
+          return /* @__PURE__ */ jsxs8(Box8, { gap: 1, children: [
+            /* @__PURE__ */ jsx8(Text8, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+            /* @__PURE__ */ jsx8(Text8, { color: isSelected ? "green" : void 0, children: isSelected ? "\u25C9" : "\u25CB" }),
+            /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+              /* @__PURE__ */ jsx8(Text8, { bold: isSelected, children: target }),
+              /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: TARGET_DESCRIPTIONS[target] ?? target })
             ] })
           ] }, target);
         }) }),
-        error && /* @__PURE__ */ jsx9(Text9, { color: "red", children: error })
+        error && /* @__PURE__ */ jsx8(Text8, { color: "red", children: error })
       ]
     }
   );
 };
 
 // src/components/AppSelect.tsx
-import { Box as Box11, Text as Text11 } from "ink";
-import SelectInput from "ink-select-input";
+import { Box as Box10, Text as Text10, useInput as useInput5 } from "ink";
 import Spinner2 from "ink-spinner";
-import { useEffect, useState as useState7 } from "react";
+import { useEffect, useState as useState6 } 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();
 };
 
 // src/components/Banner.tsx
-import { Box as Box10, Text as Text10 } from "ink";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box9, Text as Text9 } from "ink";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var WORDMARK = [
   "     _             _         _     _      ",
   " ___| |_ __ _  ___| | ____ _| |__ | | ___",
@@ -468,53 +541,155 @@ var gradientColor = (row, col, rows, cols) => {
 var Banner = () => {
   const termWidth = process.stdout.columns ?? 80;
   const maxLen = Math.max(...WORDMARK.map((l) => l.length));
-  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "\u2500".repeat(termWidth) }),
-    /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", paddingX: 1, paddingY: 1, children: WORDMARK.map((line, row) => /* @__PURE__ */ jsx10(Box10, { children: line.split("").map((ch, col) => /* @__PURE__ */ jsx10(Text10, { bold: true, color: ch === " " ? void 0 : gradientColor(row, col, WORDMARK.length, maxLen), children: ch }, col)) }, row)) })
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "\u2500".repeat(termWidth) }),
+    /* @__PURE__ */ jsx9(Box9, { flexDirection: "column", paddingX: 1, paddingY: 1, children: WORDMARK.map((line, row) => /* @__PURE__ */ jsx9(Box9, { children: line.split("").map((ch, col) => /* @__PURE__ */ jsx9(Text9, { bold: true, color: ch === " " ? void 0 : gradientColor(row, col, WORDMARK.length, maxLen), children: ch }, col)) }, row)) })
   ] });
 };
 
 // src/components/AppSelect.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var AppSelect = ({ onSubmit }) => {
-  const [apps, setApps] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  const [error, setError] = useState7();
+  const [apps, setApps] = useState6([]);
+  const [loading, setLoading] = useState6(true);
+  const [error, setError] = useState6();
+  const [cursor, setCursor] = useState6(0);
   useEffect(() => {
     fetchApps().then(setApps).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
   }, []);
-  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" })
-      ] })
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", gap: 1, children: [
-      /* @__PURE__ */ jsx11(Text11, { color: "red", bold: true, children: "Failed to load apps" }),
-      /* @__PURE__ */ jsx11(Text11, { color: "red", children: error })
-    ] });
-  }
-  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);
+  useInput5((_, 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]);
+    }
+  });
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs10(Box10, { gap: 2, children: [
+        /* @__PURE__ */ jsx10(Spinner2, { type: "dots" }),
+        /* @__PURE__ */ jsx10(Text10, { children: "Loading available Apps\u2026" })
+      ] });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx10(Text10, { color: "red", bold: true, children: "Failed to load Apps" }),
+        /* @__PURE__ */ jsx10(Text10, { color: "red", children: error })
+      ] });
+    }
+    if (apps.length === 0) {
+      return /* @__PURE__ */ jsx10(Text10, { color: "yellow", children: "No Apps available. Contact your administrator." });
+    }
+    return /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", children: apps.map((app, i) => {
+      const isCursor = i === cursor;
+      return /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
+        /* @__PURE__ */ jsx10(Text10, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+        /* @__PURE__ */ jsx10(Text10, { bold: isCursor, children: app.name }),
+        /* @__PURE__ */ jsxs10(Text10, { dimColor: true, children: [
+          "(",
+          app.id,
+          ")"
+        ] })
+      ] }, app.id);
+    }) });
   };
-  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 }) })
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx10(Banner, {}),
+    /* @__PURE__ */ jsx10(StepShell, { title: "Select the App you are building an Extension for:", children: renderContent() })
   ] });
 };
 
+// src/components/ExtensionSelect.tsx
+import { Box as Box11, Text as Text11, useInput as useInput6 } from "ink";
+import Spinner3 from "ink-spinner";
+import { useEffect as useEffect2, useState as useState7 } from "react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var ExtensionSelect = ({ appId, onSubmit, onBack }) => {
+  const [extensions, setExtensions] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7();
+  const [cursor, setCursor] = useState7(0);
+  const [backFocused, setBackFocused] = useState7(false);
+  useEffect2(() => {
+    fetchExtensions(appId).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
+  }, [appId]);
+  useInput6((_, key) => {
+    if (key.upArrow) {
+      if (loading || error || extensions.length === 0 || cursor === 0) {
+        if (onBack) setBackFocused(true);
+      } else {
+        setBackFocused(false);
+        setCursor((c) => Math.max(0, c - 1));
+      }
+      return;
+    }
+    if (key.downArrow) {
+      if (backFocused) {
+        setBackFocused(false);
+      } else if (!loading && !error && extensions.length > 0) {
+        setCursor((c) => Math.min(extensions.length - 1, c + 1));
+      }
+      return;
+    }
+    if (key.return) {
+      if (backFocused) {
+        onBack?.();
+        return;
+      }
+      if (!loading && !error && extensions.length > 0) {
+        onSubmit(extensions[cursor]);
+      }
+    }
+  });
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs11(Box11, { gap: 2, children: [
+        /* @__PURE__ */ jsx11(Spinner3, { type: "dots" }),
+        /* @__PURE__ */ jsx11(Text11, { children: "Loading Extensions\u2026" })
+      ] });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx11(Text11, { color: "red", bold: true, children: "Failed to load Extensions" }),
+        /* @__PURE__ */ jsx11(Text11, { color: "red", children: error })
+      ] });
+    }
+    if (extensions.length === 0) {
+      return /* @__PURE__ */ jsx11(Text11, { color: "yellow", children: "No Extensions found for this App." });
+    }
+    return /* @__PURE__ */ jsx11(Box11, { flexDirection: "column", children: extensions.map((ext, i) => {
+      const isCursor = i === cursor && !backFocused;
+      return /* @__PURE__ */ jsxs11(Box11, { gap: 1, children: [
+        /* @__PURE__ */ jsx11(Text11, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+        /* @__PURE__ */ jsx11(Text11, { bold: isCursor, children: ext.manifest.name }),
+        /* @__PURE__ */ jsxs11(Text11, { dimColor: true, children: [
+          "v",
+          ext.manifest.version
+        ] }),
+        /* @__PURE__ */ jsxs11(Text11, { dimColor: true, children: [
+          "(",
+          ext.id,
+          ")"
+        ] })
+      ] }, ext.id);
+    }) });
+  };
+  return /* @__PURE__ */ jsx11(StepShell, { title: "Select an existing Extension to scaffold:", onBack, backFocused, children: renderContent() });
+};
+
+// 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 +716,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 +900,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'
@@ -852,18 +1015,47 @@ 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 = [
-  { label: "Fetching template", status: "pending" },
-  { label: "Generating files", status: "pending" },
-  { label: "Installing dependencies", status: "pending" }
-];
+var STEPS = {
+  ["create" /* CREATE */]: ["app", "name", "targets", "settings", "confirm"],
+  ["scaffold" /* SCAFFOLD */]: ["app", "extensionSelect", "confirmTargets", "settings", "confirm"]
+};
+var PROGRESS_STEPS = {
+  ["create" /* CREATE */]: [
+    { label: "Registering extension", status: "pending" },
+    { label: "Fetching template", status: "pending" },
+    { label: "Generating files", status: "pending" },
+    { label: "Installing dependencies", status: "pending" }
+  ],
+  ["scaffold" /* SCAFFOLD */]: [
+    { 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 = ({ command, initialName, options }) => {
   const { exit } = useApp();
   const [step, setStep] = useState8("app");
   const [name, setName] = useState8(initialName ?? "");
   const [extensionId, setExtensionId] = useState8("");
+  const [extensionVersion, setExtensionVersion] = useState8("");
   const [selectedApp, setSelectedApp] = useState8(null);
   const [extensionPort, setExtensionPort] = useState8(
     options?.extensionPort ? parseInt(options.extensionPort, 10) : 5173
@@ -873,25 +1065,49 @@ var App = ({ initialName, options }) => {
   );
   const [targets, setTargets] = useState8([]);
   const [outputDir, setOutputDir] = useState8("");
-  const [progressSteps, setProgressSteps] = useState8(INITIAL_STEPS);
+  const [progressSteps, setProgressSteps] = useState8(PROGRESS_STEPS[command]);
   const [errorMessage, setErrorMessage] = useState8();
   const updateStep = useCallback((index, status) => {
     setProgressSteps((prev) => prev.map((s, i) => i === index ? { ...s, status } : s));
   }, []);
+  const activeSteps = useCallback(() => {
+    const base = STEPS[command];
+    const skipped = /* @__PURE__ */ new Set();
+    if (command === "create" /* CREATE */ && initialName) skipped.add("name");
+    if (options?.extensionPort || options?.previewPort) skipped.add("settings");
+    return base.filter((s) => !skipped.has(s));
+  }, [command, 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 (command === "scaffold" /* SCAFFOLD */) {
+      setStep("extensionSelect");
+      return;
+    }
     setStep(initialName ? "targets" : "name");
   };
+  const handleExtensionSelect = (ext) => {
+    setName(ext.manifest.name);
+    setExtensionId(ext.id);
+    setExtensionVersion(ext.manifest.version);
+    setTargets(ext.manifest.targets);
+    setStep("confirmTargets");
+  };
+  const handleConfirmTargets = (value) => {
+    setTargets(value);
+    if (options?.extensionPort || options?.previewPort) {
+      setOutputDir(join2(process.cwd(), toKebabCase2(extensionId || name)));
+      setStep("confirm");
+    } else {
+      setStep("settings");
+    }
+  };
   const handleName = (value) => {
     setName(value);
     setExtensionId(toKebabCase2(value));
@@ -899,45 +1115,61 @@ var App = ({ initialName, options }) => {
   };
   const handleTargets = (value) => {
     setTargets(value);
-    setStep(options?.extensionPort || options?.previewPort ? "dir" : "ports");
+    if (options?.extensionPort || options?.previewPort) {
+      setOutputDir(join2(process.cwd(), toKebabCase2(extensionId || name)));
+      setStep("confirm");
+    } else {
+      setStep("settings");
+    }
   };
-  const handlePorts = (extPort, prevPort) => {
+  const handleSettings = (extPort, prevPort, dir) => {
     setExtensionPort(extPort);
     setPreviewPort(prevPort);
-    setStep("dir");
-  };
-  const handleDir = (dir) => {
     setOutputDir(dir);
     setStep("confirm");
   };
   const handleConfirm = async () => {
     setStep("scaffolding");
-    setProgressSteps([
-      { label: "Fetching template", status: "running" },
-      { label: "Generating files", status: "pending" },
-      { label: "Installing dependencies", status: "pending" }
-    ]);
+    setProgressSteps(PROGRESS_STEPS[command]);
     try {
-      updateStep(0, "running");
+      let resolvedExtensionId = extensionId || toKebabCase2(name);
+      let scaffoldStepOffset = 0;
+      if (command === "create" /* 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) {
@@ -953,41 +1185,53 @@ var App = ({ initialName, options }) => {
     case "app": {
       return /* @__PURE__ */ jsx12(AppSelect, { onSubmit: handleAppSelect });
     }
-    case "name": {
+    case "extensionSelect": {
       return /* @__PURE__ */ jsx12(
-        NamePrompt,
+        ExtensionSelect,
         {
-          initialValue: name,
-          onSubmit: handleName,
+          appId: selectedApp.id,
+          onSubmit: handleExtensionSelect,
           onBack: goBack
         }
       );
     }
-    case "targets": {
+    case "confirmTargets": {
       return /* @__PURE__ */ jsx12(
         TargetSelect,
         {
           availableTargets: selectedApp?.targets ?? [],
-          onSubmit: handleTargets,
+          preSelected: targets,
+          onSubmit: handleConfirmTargets,
+          onBack: goBack
+        }
+      );
+    }
+    case "name": {
+      return /* @__PURE__ */ jsx12(
+        NamePrompt,
+        {
+          initialValue: name,
+          onSubmit: handleName,
           onBack: goBack
         }
       );
     }
-    case "ports": {
+    case "targets": {
       return /* @__PURE__ */ jsx12(
-        PortsPrompt,
+        TargetSelect,
         {
-          onSubmit: handlePorts,
+          availableTargets: selectedApp?.targets ?? [],
+          onSubmit: handleTargets,
           onBack: goBack
         }
       );
     }
-    case "dir": {
+    case "settings": {
       return /* @__PURE__ */ jsx12(
-        DirPrompt,
+        SettingsPrompt,
         {
-          defaultDir: join2(process.cwd(), toKebabCase2(name)),
-          onSubmit: handleDir,
+          defaultDir: join2(process.cwd(), toKebabCase2(extensionId || name)),
+          onSubmit: handleSettings,
           onBack: goBack
         }
       );
@@ -1001,6 +1245,7 @@ var App = ({ initialName, options }) => {
           previewPort,
           targets,
           outputDir,
+          extensionVersion: command === "scaffold" /* SCAFFOLD */ ? extensionVersion : void 0,
           onConfirm: handleConfirm,
           onCancel: handleCancel,
           onBack: goBack
@@ -1014,17 +1259,26 @@ var App = ({ initialName, options }) => {
       return /* @__PURE__ */ jsx12(Done, { name, outputDir });
     }
     default: {
-      return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsx12(Text12, { color: "red", bold: true, children: "Scaffold failed" }),
+      return /* @__PURE__ */ jsx12(StepShell, { title: "Scaffold failed", onBack: goBack, backFocused: false, children: /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx12(Text12, { color: "red", bold: true, children: "An error occurred" }),
         errorMessage && /* @__PURE__ */ jsx12(Text12, { 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 }));
+program.name("stackable-extension").description("Stackable extension developer CLI");
+program.command("create" /* CREATE */).description("Create a new 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").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((name, options) => {
+  render(/* @__PURE__ */ jsx13(App, { command: "create" /* CREATE */, initialName: name, options }));
+});
+program.command("scaffold" /* 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__ */ jsx13(App, { command: "scaffold" /* SCAFFOLD */, options }));
 });
-program.parse(process.argv.filter((arg) => arg !== "--"));
+if (process.argv[1]?.endsWith("create-extension")) {
+  process.stderr.write("\u26A0\uFE0F  DEPRECATED: `create-extension` is deprecated and will be removed in v2.0.0. Use `stackable-extension create` instead.\n");
+  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.3.0",
   "type": "module",
   "private": false,
   "bin": {
     "create-extension": "./dist/index.js",
-    "cli-app-extension": "./dist/index.js"
+    "stackable-extension": "./dist/index.js"
   },
   "files": [
     "dist/",
@@ -16,7 +16,6 @@
     "commander": "12.x",
     "giget": "3.x",
     "ink": "5.x",
-    "ink-select-input": "6.x",
     "ink-spinner": "5.x",
     "ink-text-input": "6.x",
     "nypm": "0.4.x",