@stackable-labs/cli-app-extension 1.4.1 → 1.5.0

package/dist/index.js

@@ -7,27 +7,33 @@ import { render } from "ink";
 
 // src/App.tsx
 import { join as join2 } from "path";
-import { Box as Box12, Text as Text12, useApp } from "ink";
+import { Box as Box13, Text as Text13, useApp } from "ink";
 import { useCallback, useState as useState8 } from "react";
 
 // src/components/Confirm.tsx
-import { Box as Box2, Text as Text2, useInput } from "ink";
-import { useState } from "react";
+import { Box as Box2, Text as Text2, useFocus, useFocusManager, useInput as useInput2 } from "ink";
+import TextInput from "ink-text-input";
+import { useEffect, useState } from "react";
 
 // src/components/StepShell.tsx
-import { Box, Text } from "ink";
+import { Box, Text, useInput } from "ink";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var divider = (width) => "\u2500".repeat(width);
 var INNER_DIVIDER_WIDTH = 40;
-var StepShell = ({ title, hint, children, footer, onBack, backFocused }) => {
+var StepShell = ({ title, hint, children, footer, onBack }) => {
   const termWidth = process.stdout.columns ?? 80;
+  useInput((_, key) => {
+    if (onBack && key.escape) {
+      onBack();
+    }
+  });
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 0, children: [
     /* @__PURE__ */ jsx(Text, { dimColor: true, children: divider(termWidth) }),
     /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, gap: 1, children: [
       /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 0, children: [
         onBack && /* @__PURE__ */ jsxs(Box, { gap: 1, marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: backFocused ? "cyan" : void 0, children: backFocused ? "\u276F" : " " }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2190 Back" })
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2190 Back" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "(Esc)" })
         ] }),
         /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: title }),
         hint && /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint })
@@ -44,23 +50,74 @@ 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, 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);
+var compareSemver = (a, b) => {
+  const pa = a.split(".").map(Number);
+  const pb = b.split(".").map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] ?? 0) > (pb[i] ?? 0)) return 1;
+    if ((pa[i] ?? 0) < (pb[i] ?? 0)) return -1;
+  }
+  return 0;
+};
+var VersionRow = ({ currentVersion, value, onChange, onFocusChange, onConfirm, onCancel, selected }) => {
+  const { isFocused } = useFocus();
+  const { focusPrevious, focusNext } = useFocusManager();
+  useInput2((_, key) => {
+    if (!isFocused) return;
+    if (key.upArrow || key.tab && key.shift) {
+      focusPrevious();
       return;
     }
-    if (key.downArrow && backFocused) {
-      setBackFocused(false);
+    if (key.tab && !key.shift) {
+      focusNext();
       return;
     }
-    if (key.return && backFocused) {
-      onBack?.();
-      return;
+    if (key.return) {
+      const isValid2 = /^\d+\.\d+\.\d+$/.test(value) && compareSemver(value, currentVersion) > 0;
+      if (!isValid2) return;
+      if (selected === "y") onConfirm();
+      else onCancel();
     }
-    if (backFocused) return;
+  });
+  useEffect(() => {
+    onFocusChange(isFocused);
+  }, [isFocused, onFocusChange]);
+  const isValid = /^\d+\.\d+\.\d+$/.test(value) && compareSemver(value, currentVersion) > 0;
+  const showError = isFocused && value !== "" && !isValid;
+  const hasChange = value !== currentVersion;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Version       " }),
+      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        currentVersion,
+        hasChange ? " \u2192 " : ""
+      ] }),
+      isFocused ? /* @__PURE__ */ jsx2(TextInput, { value, onChange, placeholder: value }) : hasChange && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: value }),
+      isFocused && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "(edit to override)" })
+    ] }),
+    showError && /* @__PURE__ */ jsx2(Text2, { color: "red", children: "                Version must be greater than " + currentVersion })
+  ] });
+};
+var Confirm = ({
+  command,
+  name,
+  extensionVersion,
+  extensionPort,
+  previewPort,
+  targets,
+  outputDir,
+  bundleUrl,
+  enabled,
+  newVersion,
+  onVersionOverride,
+  onConfirm,
+  onCancel,
+  onBack
+}) => {
+  const [selected, setSelected] = useState("y");
+  const [overrideFocused, setOverrideFocused] = useState(false);
+  useInput2((input, key) => {
+    if (overrideFocused) return;
     if (key.leftArrow || key.rightArrow) {
       setSelected((s) => s === "y" ? "n" : "y");
       return;
@@ -74,17 +131,21 @@ var Confirm = ({ name, extensionVersion, extensionPort, previewPort, targets, ou
       return;
     }
     if (key.return) {
-      if (selected === "y") onConfirm();
-      else onCancel();
+      if (selected === "y") {
+        if (newVersion && extensionVersion && !/^\d+\.\d+\.\d+$/.test(newVersion)) return;
+        if (newVersion && extensionVersion && compareSemver(newVersion, extensionVersion) <= 0) return;
+        onConfirm();
+      } else {
+        onCancel();
+      }
     }
   });
   return /* @__PURE__ */ jsx2(
     StepShell,
     {
-      title: "Ready to scaffold",
+      title: command === "update" /* UPDATE */ ? "Ready to update" : "Ready to scaffold",
       hint: "Review your settings before proceeding",
       onBack,
-      backFocused,
       footer: /* @__PURE__ */ jsxs2(Text2, { children: [
         "Proceed?",
         " ",
@@ -97,22 +158,45 @@ var Confirm = ({ name, extensionVersion, extensionPort, previewPort, targets, ou
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Name          " }),
           /* @__PURE__ */ jsx2(Text2, { dimColor: !!extensionVersion, children: name })
         ] }),
-        extensionVersion && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+        extensionVersion && command === "update" /* UPDATE */ && newVersion && onVersionOverride && /* @__PURE__ */ jsx2(
+          VersionRow,
+          {
+            currentVersion: extensionVersion,
+            value: newVersion,
+            onChange: onVersionOverride,
+            onFocusChange: setOverrideFocused,
+            onConfirm,
+            onCancel,
+            selected
+          }
+        ),
+        extensionVersion && !(command === "update" /* UPDATE */ && newVersion && onVersionOverride) && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Version       " }),
-          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: extensionVersion })
+          /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+            extensionVersion,
+            newVersion && newVersion !== extensionVersion ? ` \u2192 ${newVersion}` : ""
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+        command !== "update" /* UPDATE */ && outputDir && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Directory     " }),
           /* @__PURE__ */ jsx2(Text2, { children: outputDir })
         ] }),
-        /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+        command !== "update" /* UPDATE */ && extensionPort !== void 0 && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Extension port" }),
           /* @__PURE__ */ jsx2(Text2, { children: extensionPort })
         ] }),
-        /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+        command !== "update" /* UPDATE */ && previewPort !== void 0 && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Preview port  " }),
           /* @__PURE__ */ jsx2(Text2, { children: previewPort })
         ] }),
+        command === "update" /* UPDATE */ && bundleUrl && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Bundle URL    " }),
+          /* @__PURE__ */ jsx2(Text2, { children: bundleUrl })
+        ] }),
+        command === "update" /* UPDATE */ && enabled !== void 0 && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Enabled       " }),
+          /* @__PURE__ */ jsx2(Text2, { color: enabled ? "green" : "red", children: enabled ? "Yes" : "No" })
+        ] }),
         /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Targets       " }),
           /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: targets.map((t) => /* @__PURE__ */ jsxs2(Box2, { children: [
@@ -167,39 +251,22 @@ var Done = ({ name, outputDir }) => /* @__PURE__ */ jsxs3(Box3, { flexDirection:
 
 // 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";
+import TextInput2 from "ink-text-input";
+import { useState as useState2 } from "react";
 
 // src/components/BackableInput.tsx
-import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
-import { useState as useState2 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
 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) => {
-    if (key.upArrow && focus === "input" && onBack) {
-      setFocus("back");
-      return;
-    }
-    if (key.downArrow && focus === "back") {
-      setFocus("input");
-      return;
-    }
-    if (key.return && focus === "back") {
-      onBack?.();
-    }
-  });
-  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__ */ jsx4(Text4, { color: "red", children: error })
-  ] }) });
-};
+var BackableInput = ({ label, hint, onBack, children, error }) => /* @__PURE__ */ jsx4(StepShell, { title: label, hint, onBack, children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
+  children(true),
+  error && /* @__PURE__ */ jsx4(Text4, { color: "red", children: error })
+] }) });
 
 // src/components/NamePrompt.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var NamePrompt = ({ initialValue = "", onSubmit, onBack }) => {
-  const [value, setValue] = useState3(initialValue);
-  const [error, setError] = useState3();
+  const [value, setValue] = useState2(initialValue);
+  const [error, setError] = useState2();
   const handleSubmit = (val) => {
     const trimmed = val.trim();
     if (trimmed.length === 0) {
@@ -211,37 +278,31 @@ var NamePrompt = ({ initialValue = "", onSubmit, onBack }) => {
   };
   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 })
+    /* @__PURE__ */ jsx5(TextInput2, { value, onChange: setValue, onSubmit: handleSubmit, focus: isFocused })
   ] }) });
 };
 
 // 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 { Box as Box6, Text as Text6, useFocus as useFocus2, useFocusManager as useFocusManager2, useInput as useInput3 } from "ink";
+import TextInput3 from "ink-text-input";
+import { useState as useState3 } 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 FieldRow = ({ label, value, onChange, onSubmit, onConfirm, placeholder, autoFocus, isFirst, isLast, onFocusBack }) => {
-  const { isFocused } = useFocus({ autoFocus });
-  const { focusNext, focusPrevious } = useFocusManager();
+var FieldRow = ({ label, value, onChange, onSubmit, onConfirm, placeholder, autoFocus, isFirst, isLast }) => {
+  const { isFocused } = useFocus2({ autoFocus });
+  const { focusNext, focusPrevious } = useFocusManager2();
   useInput3((_input, key) => {
     if (!isFocused) return;
     if (key.downArrow && !isLast) focusNext();
-    if (key.upArrow) {
-      if (isFirst && onFocusBack) {
-        onFocusBack();
-      } else if (!isFirst) {
-        focusPrevious();
-      }
-    }
+    if (key.upArrow && !isFirst) focusPrevious();
   });
   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,
+        TextInput3,
         {
           value,
           onChange,
@@ -257,23 +318,9 @@ var FieldRow = ({ label, value, onChange, onSubmit, onConfirm, placeholder, auto
   ] });
 };
 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);
-  };
-  useInput3((_input, key) => {
-    if (key.downArrow && backFocused) {
-      setBackFocused(false);
-      return;
-    }
-    if (key.return && backFocused) {
-      onBack?.();
-      return;
-    }
-  });
+  const [extensionPort, setExtensionPort] = useState3(String(DEFAULT_EXTENSION_PORT));
+  const [previewPort, setPreviewPort] = useState3(String(DEFAULT_PREVIEW_PORT));
+  const [outputDir, setOutputDir] = useState3(defaultDir);
   const handleConfirm = (resolvedExtPort, resolvedPrevPort, resolvedDir) => {
     const dir = resolvedDir.trim();
     if (!dir) return;
@@ -310,7 +357,6 @@ var SettingsPrompt = ({ defaultDir, onSubmit, onBack }) => {
       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,
@@ -322,8 +368,7 @@ var SettingsPrompt = ({ defaultDir, onSubmit, onBack }) => {
             onConfirm: handleConfirm,
             placeholder: String(DEFAULT_EXTENSION_PORT),
             autoFocus: true,
-            isFirst: true,
-            onFocusBack: handleFocusBack
+            isFirst: true
           }
         ),
         /* @__PURE__ */ jsx6(
@@ -353,34 +398,284 @@ var SettingsPrompt = ({ defaultDir, onSubmit, onBack }) => {
   );
 };
 
+// src/components/UpdateSettingsPrompt.tsx
+import { Box as Box7, Text as Text7, useFocus as useFocus3, useFocusManager as useFocusManager3, useInput as useInput4 } from "ink";
+import TextInput4 from "ink-text-input";
+import { useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var FieldRow2 = ({ label, value, onChange, placeholder, autoFocus, isFirst, isLast, onSubmitAll }) => {
+  const { isFocused } = useFocus3({ autoFocus });
+  const { focusNext, focusPrevious } = useFocusManager3();
+  useInput4((_, key) => {
+    if (!isFocused) return;
+    if (key.tab && !key.shift) {
+      if (!isLast) focusNext();
+      return;
+    }
+    if (key.tab && key.shift) {
+      if (!isFirst) focusPrevious();
+      return;
+    }
+    if (key.downArrow) {
+      if (!isLast) focusNext();
+      return;
+    }
+    if (key.upArrow) {
+      if (!isFirst) focusPrevious();
+      return;
+    }
+    if (key.return) {
+      onSubmitAll();
+    }
+  });
+  return /* @__PURE__ */ jsxs7(Box7, { gap: 2, children: [
+    /* @__PURE__ */ jsx7(Text7, { dimColor: !isFocused, bold: isFocused, children: label.padEnd(14) }),
+    isFocused ? /* @__PURE__ */ jsx7(TextInput4, { value, onChange, placeholder }) : /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: value || placeholder || "" })
+  ] });
+};
+var TargetToggleRow = ({ targets, availableTargets, onToggle, autoFocus, isLast, onSubmitAll }) => {
+  const { isFocused } = useFocus3({ autoFocus });
+  const { focusNext, focusPrevious } = useFocusManager3();
+  const [cursor, setCursor] = useState4(0);
+  useInput4((input, key) => {
+    if (!isFocused) return;
+    if (key.tab && !key.shift) {
+      focusNext();
+      return;
+    }
+    if (key.tab && key.shift) {
+      if (cursor > 0) {
+        setCursor((c) => c - 1);
+      } else {
+        focusPrevious();
+      }
+      return;
+    }
+    if (key.downArrow) {
+      if (cursor < availableTargets.length - 1) {
+        setCursor((c) => c + 1);
+      } else if (!isLast) {
+        focusNext();
+      }
+      return;
+    }
+    if (key.upArrow) {
+      if (cursor > 0) {
+        setCursor((c) => c - 1);
+      } else {
+        focusPrevious();
+      }
+      return;
+    }
+    if (input === " " && availableTargets[cursor]) {
+      onToggle(availableTargets[cursor]);
+      return;
+    }
+    if (key.return) {
+      onSubmitAll();
+    }
+  });
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Text7, { dimColor: !isFocused, bold: isFocused, children: "Targets".padEnd(14) }),
+    /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingLeft: 2, children: [
+      availableTargets.map((t, i) => {
+        const selected = targets.includes(t);
+        const isCursor = isFocused && i === cursor;
+        return /* @__PURE__ */ jsxs7(Box7, { gap: 1, children: [
+          /* @__PURE__ */ jsx7(Text7, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+          /* @__PURE__ */ jsx7(Text7, { color: selected ? "green" : "gray", children: selected ? "\u25C9" : "\u25CB" }),
+          /* @__PURE__ */ jsx7(Text7, { bold: isCursor, children: t })
+        ] }, t);
+      }),
+      isFocused && /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "  (space to toggle)" })
+    ] })
+  ] });
+};
+var EnabledToggleRow = ({ enabled, onToggle, autoFocus, isLast, onSubmitAll }) => {
+  const { isFocused } = useFocus3({ autoFocus });
+  const { focusNext, focusPrevious } = useFocusManager3();
+  useInput4((input, key) => {
+    if (!isFocused) return;
+    if (key.tab && !key.shift) {
+      if (!isLast) focusNext();
+      return;
+    }
+    if (key.tab && key.shift) {
+      focusPrevious();
+      return;
+    }
+    if (key.downArrow) {
+      if (!isLast) focusNext();
+      return;
+    }
+    if (key.upArrow) {
+      focusPrevious();
+      return;
+    }
+    if (input === " " || key.leftArrow || key.rightArrow) {
+      onToggle();
+      return;
+    }
+    if (key.return) {
+      onSubmitAll();
+    }
+  });
+  return /* @__PURE__ */ jsxs7(Box7, { gap: 2, children: [
+    /* @__PURE__ */ jsx7(Text7, { dimColor: !isFocused, bold: isFocused, children: "Enabled".padEnd(14) }),
+    /* @__PURE__ */ jsx7(Text7, { color: enabled ? "green" : "red", bold: isFocused, children: enabled ? "Yes" : "No" }),
+    isFocused && /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "(space/arrows to toggle)" })
+  ] });
+};
+var ForceMajorToggleRow = ({ forceMajor, onToggle, autoFocus, isLast, onSubmitAll }) => {
+  const { isFocused } = useFocus3({ autoFocus });
+  const { focusPrevious, focusNext } = useFocusManager3();
+  useInput4((input, key) => {
+    if (!isFocused) return;
+    if (key.tab && !key.shift) {
+      if (!isLast) focusNext();
+      return;
+    }
+    if (key.tab && key.shift) {
+      focusPrevious();
+      return;
+    }
+    if (key.downArrow) {
+      if (!isLast) focusNext();
+      return;
+    }
+    if (key.upArrow) {
+      focusPrevious();
+      return;
+    }
+    if (input === " " || key.leftArrow || key.rightArrow) {
+      onToggle();
+      return;
+    }
+    if (key.return) {
+      onSubmitAll();
+    }
+  });
+  return /* @__PURE__ */ jsxs7(Box7, { gap: 2, children: [
+    /* @__PURE__ */ jsx7(Text7, { dimColor: !isFocused, bold: isFocused, children: "Force major".padEnd(14) }),
+    /* @__PURE__ */ jsx7(Text7, { color: forceMajor ? "yellow" : "gray", bold: isFocused, children: forceMajor ? "Yes" : "No" }),
+    isFocused && /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "(space/arrows to toggle)" })
+  ] });
+};
+var UpdateSettingsPrompt = ({
+  name: initialName,
+  targets: initialTargets,
+  availableTargets,
+  bundleUrl: initialBundleUrl,
+  enabled: initialEnabled,
+  onSubmit,
+  onBack
+}) => {
+  const [nameValue, setNameValue] = useState4(initialName);
+  const [targetsValue, setTargetsValue] = useState4(initialTargets);
+  const [bundleUrlValue, setBundleUrlValue] = useState4(initialBundleUrl);
+  const [enabledValue, setEnabledValue] = useState4(initialEnabled);
+  const [forceMajorValue, setForceMajorValue] = useState4(false);
+  const handleToggleTarget = (target) => {
+    setTargetsValue((prev) => prev.includes(target) ? prev.filter((t) => t !== target) : [...prev, target]);
+  };
+  const handleSubmitAll = () => {
+    if (targetsValue.length === 0) return;
+    onSubmit({
+      name: nameValue,
+      targets: targetsValue,
+      bundleUrl: bundleUrlValue,
+      enabled: enabledValue,
+      forceMajor: forceMajorValue
+    });
+  };
+  return /* @__PURE__ */ jsx7(
+    StepShell,
+    {
+      title: "Update Extension settings",
+      hint: "Tab/arrows to navigate, Enter to submit",
+      onBack,
+      children: /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx7(
+          FieldRow2,
+          {
+            label: "Name",
+            value: nameValue,
+            onChange: setNameValue,
+            placeholder: initialName,
+            autoFocus: true,
+            isFirst: true,
+            onSubmitAll: handleSubmitAll
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          TargetToggleRow,
+          {
+            targets: targetsValue,
+            availableTargets,
+            onToggle: handleToggleTarget,
+            onSubmitAll: handleSubmitAll
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          FieldRow2,
+          {
+            label: "Bundle URL",
+            value: bundleUrlValue,
+            onChange: setBundleUrlValue,
+            placeholder: "http://localhost:5173",
+            onSubmitAll: handleSubmitAll
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          EnabledToggleRow,
+          {
+            enabled: enabledValue,
+            onToggle: () => setEnabledValue((v) => !v),
+            onSubmitAll: handleSubmitAll
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          ForceMajorToggleRow,
+          {
+            forceMajor: forceMajorValue,
+            onToggle: () => setForceMajorValue((v) => !v),
+            isLast: true,
+            onSubmitAll: handleSubmitAll
+          }
+        )
+      ] })
+    }
+  );
+};
+
 // src/components/ScaffoldProgress.tsx
-import { Box as Box7, Text as Text7 } from "ink";
+import { Box as Box8, Text as Text8 } from "ink";
 import Spinner from "ink-spinner";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var stepIcon = (status) => {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ jsx7(Spinner, { type: "dots" });
+      return /* @__PURE__ */ jsx8(Spinner, { type: "dots" });
     case "done":
-      return /* @__PURE__ */ jsx7(Text7, { color: "green", children: "\u2714" });
+      return /* @__PURE__ */ jsx8(Text8, { color: "green", children: "\u2714" });
     case "error":
-      return /* @__PURE__ */ jsx7(Text7, { color: "red", children: "\u2716" });
+      return /* @__PURE__ */ jsx8(Text8, { color: "red", children: "\u2716" });
     default:
-      return /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "\u25CB" });
+      return /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "\u25CB" });
   }
 };
-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: [
+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: [
     stepIcon(step.status),
-    /* @__PURE__ */ jsx7(Text7, { dimColor: step.status === "pending", color: step.status === "running" ? "cyan" : void 0, children: step.label })
+    /* @__PURE__ */ jsx8(Text8, { dimColor: step.status === "pending", color: step.status === "running" ? "cyan" : void 0, children: step.label })
   ] }, step.label)) })
 ] });
 
 // src/components/TargetSelect.tsx
-import { Box as Box8, Text as Text8, useInput as useInput4 } from "ink";
+import { Box as Box9, Text as Text9, useInput as useInput5 } from "ink";
 import { useState as useState5 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } 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)",
@@ -389,30 +684,20 @@ var TARGET_DESCRIPTIONS = {
 };
 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] = useState5();
-  useInput4((input, key) => {
+  useInput5((input, key) => {
     if (key.upArrow) {
-      if (cursor === 0 && onBack) {
-        setBackFocused(true);
-      } else {
-        setBackFocused(false);
-        setCursor((c) => Math.max(0, c - 1));
-      }
+      setCursor((c) => Math.max(0, c - 1));
       return;
     }
     if (key.downArrow) {
-      if (backFocused) {
-        setBackFocused(false);
-      } else {
-        setCursor((c) => Math.min(availableTargets.length - 1, c + 1));
-      }
+      setCursor((c) => Math.min(availableTargets.length - 1, c + 1));
       return;
     }
-    if (input === " " && !backFocused) {
+    if (input === " ") {
       const target = availableTargets[cursor];
       setSelected((prev) => {
         const next = new Set(prev);
@@ -427,10 +712,6 @@ var TargetSelect = ({ availableTargets, preSelected, onSubmit, onBack }) => {
       return;
     }
     if (key.return) {
-      if (backFocused) {
-        onBack?.();
-        return;
-      }
       if (selected.size === 0) {
         setError("Select at least one Surface target/slot");
         return;
@@ -438,36 +719,35 @@ var TargetSelect = ({ availableTargets, preSelected, onSubmit, onBack }) => {
       onSubmit([...selected]);
     }
   });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     StepShell,
     {
       title: "Select Surface targets/slots",
       hint: "Space to toggle, Enter to confirm",
       onBack,
-      backFocused,
       children: [
-        /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", gap: 1, children: availableTargets.map((target, i) => {
+        /* @__PURE__ */ jsx9(Box9, { flexDirection: "column", gap: 1, children: availableTargets.map((target, i) => {
           const isSelected = selected.has(target);
-          const isCursor = i === cursor && !backFocused;
-          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 })
+          const isCursor = i === cursor;
+          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 })
             ] })
           ] }, target);
         }) }),
-        error && /* @__PURE__ */ jsx8(Text8, { color: "red", children: error })
+        error && /* @__PURE__ */ jsx9(Text9, { color: "red", children: error })
       ]
     }
   );
 };
 
 // src/components/AppSelect.tsx
-import { Box as Box10, Text as Text10, useInput as useInput5 } from "ink";
+import { Box as Box11, Text as Text11, useInput as useInput6 } from "ink";
 import Spinner2 from "ink-spinner";
-import { useEffect, useState as useState6 } from "react";
+import { useEffect as useEffect2, useState as useState6 } from "react";
 
 // src/lib/api.ts
 var DEFAULT_ADMIN_API_URL = "https://api-use1.stackablelabs.io/admin";
@@ -520,10 +800,22 @@ var fetchExtensions = async (appId) => {
     ])
   );
 };
+var updateExtension = async (appId, extensionId, payload) => {
+  const baseUrl = getAdminApiBaseUrl();
+  const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions/${extensionId}`, {
+    method: "PUT",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(payload)
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`Failed to update extension: ${res.status} ${body}`);
+  }
+};
 
 // src/components/Banner.tsx
-import { Box as Box9, Text as Text9 } from "ink";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box10, Text as Text10 } from "ink";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var WORDMARK = [
   "     _             _         _     _      ",
   " ___| |_ __ _  ___| | ____ _| |__ | | ___",
@@ -559,23 +851,23 @@ 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__ */ 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)) })
+  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)) })
   ] });
 };
 
 // src/components/AppSelect.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var AppSelect = ({ onSubmit }) => {
   const [apps, setApps] = useState6([]);
   const [loading, setLoading] = useState6(true);
   const [error, setError] = useState6();
   const [cursor, setCursor] = useState6(0);
-  useEffect(() => {
+  useEffect2(() => {
     fetchApps().then(setApps).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
   }, []);
-  useInput5((_, key) => {
+  useInput6((_, key) => {
     if (loading || error || apps.length === 0) return;
     if (key.upArrow) {
       setCursor((c) => Math.max(0, c - 1));
@@ -587,26 +879,26 @@ var AppSelect = ({ onSubmit }) => {
   });
   const renderContent = () => {
     if (loading) {
-      return /* @__PURE__ */ jsxs10(Box10, { gap: 2, children: [
-        /* @__PURE__ */ jsx10(Spinner2, { type: "dots" }),
-        /* @__PURE__ */ jsx10(Text10, { children: "Loading available Apps\u2026" })
+      return /* @__PURE__ */ jsxs11(Box11, { gap: 2, children: [
+        /* @__PURE__ */ jsx11(Spinner2, { type: "dots" }),
+        /* @__PURE__ */ jsx11(Text11, { 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 })
+      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__ */ jsx10(Text10, { color: "yellow", children: "No Apps available. Contact your administrator." });
+      return /* @__PURE__ */ jsx11(Text11, { color: "yellow", children: "No Apps available. Contact your administrator." });
     }
-    return /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", children: apps.map((app, i) => {
+    return /* @__PURE__ */ jsx11(Box11, { 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: [
+      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,
           ")"
@@ -614,49 +906,39 @@ var AppSelect = ({ onSubmit }) => {
       ] }, app.id);
     }) });
   };
-  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() })
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx11(Banner, {}),
+    /* @__PURE__ */ jsx11(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 { Box as Box12, Text as Text12, useInput as useInput7 } 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 }) => {
+import { useEffect as useEffect3, useState as useState7 } from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var ExtensionSelect = ({ appId, command, 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(() => {
+  useEffect3(() => {
     fetchExtensions(appId).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
   }, [appId]);
-  useInput6((_, key) => {
+  useInput7((_, key) => {
     if (key.upArrow) {
-      if (loading || error || extensions.length === 0 || cursor === 0) {
-        if (onBack) setBackFocused(true);
-      } else {
-        setBackFocused(false);
+      if (!loading && !error && extensions.length > 0) {
         setCursor((c) => Math.max(0, c - 1));
       }
       return;
     }
     if (key.downArrow) {
-      if (backFocused) {
-        setBackFocused(false);
-      } else if (!loading && !error && extensions.length > 0) {
+      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]);
       }
@@ -664,30 +946,30 @@ var ExtensionSelect = ({ appId, onSubmit, onBack }) => {
   });
   const renderContent = () => {
     if (loading) {
-      return /* @__PURE__ */ jsxs11(Box11, { gap: 2, children: [
-        /* @__PURE__ */ jsx11(Spinner3, { type: "dots" }),
-        /* @__PURE__ */ jsx11(Text11, { children: "Loading Extensions\u2026" })
+      return /* @__PURE__ */ jsxs12(Box12, { gap: 2, children: [
+        /* @__PURE__ */ jsx12(Spinner3, { type: "dots" }),
+        /* @__PURE__ */ jsx12(Text12, { 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 })
+      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__ */ jsx11(Text11, { color: "yellow", children: "No Extensions found for this App." });
+      return /* @__PURE__ */ jsx12(Text12, { 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: [
+    return /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", children: extensions.map((ext, i) => {
+      const isCursor = i === cursor;
+      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: [
           "v",
           ext.manifest.version
         ] }),
-        /* @__PURE__ */ jsxs11(Text11, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
           "(",
           ext.id,
           ")"
@@ -695,7 +977,14 @@ var ExtensionSelect = ({ appId, onSubmit, onBack }) => {
       ] }, ext.id);
     }) });
   };
-  return /* @__PURE__ */ jsx11(StepShell, { title: "Select an existing Extension to scaffold:", onBack, backFocused, children: renderContent() });
+  return /* @__PURE__ */ jsx12(
+    StepShell,
+    {
+      title: command === "update" /* UPDATE */ ? "Select an Extension to update:" : "Select an existing Extension to scaffold:",
+      onBack,
+      children: renderContent()
+    }
+  );
 };
 
 // src/constants.ts
@@ -803,6 +1092,29 @@ var generateManifest = async (rootDir, extensionName, targets, permissions) => {
   await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}
 `);
 };
+var buildFooterSurface = (targets) => {
+  const blocks = [];
+  if (targets.includes("slot.footer")) {
+    blocks.push(
+      '      <Surface id="slot.footer">\n        <ui.Text className="text-xs">Powered by My Extension</ui.Text>\n      </Surface>'
+    );
+  }
+  if (targets.includes("slot.footer-links")) {
+    blocks.push(
+      '      <Surface id="slot.footer-links">\n        <ui.FooterLink href="https://example.com">My Extension</ui.FooterLink>\n      </Surface>'
+    );
+  }
+  return `import { ui, Surface } from '@stackable-labs/sdk-extension-react'
+
+export function Footer() {
+  return (
+    <>
+${blocks.join("\n")}
+    </>
+  )
+}
+`;
+};
 var generateSurfaceFiles = async (rootDir, targets) => {
   const surfaceDir = join(rootDir, "packages/extension/src/surfaces");
   const wantsHeader = targets.includes("slot.header");
@@ -862,29 +1174,6 @@ export function Content() {
   );
   await upsertOrRemove(join(surfaceDir, "Footer.tsx"), wantsFooter, buildFooterSurface(targets));
 };
-var buildFooterSurface = (targets) => {
-  const blocks = [];
-  if (targets.includes("slot.footer")) {
-    blocks.push(
-      '      <Surface id="slot.footer">\n        <ui.Text className="text-xs">Powered by My Extension</ui.Text>\n      </Surface>'
-    );
-  }
-  if (targets.includes("slot.footer-links")) {
-    blocks.push(
-      '      <Surface id="slot.footer-links">\n        <ui.FooterLink href="https://example.com">My Extension</ui.FooterLink>\n      </Surface>'
-    );
-  }
-  return `import { ui, Surface } from '@stackable-labs/sdk-extension-react'
-
-export function Footer() {
-  return (
-    <>
-${blocks.join("\n")}
-    </>
-  )
-}
-`;
-};
 var rewriteExtensionIndex = async (rootDir, extensionId, targets) => {
   const indexPath = join(rootDir, "packages/extension/src/index.tsx");
   const imports = ["import { createExtension } from '@stackable-labs/sdk-extension-react'"];
@@ -1009,6 +1298,20 @@ VITE_PREVIEW_PORT=${previewPort}
 `;
   await writeFile(envPath, content);
 };
+var updateGitignore = async (dir) => {
+  const gitignorePath = join(dir, ".gitignore");
+  let gitignore = "";
+  try {
+    gitignore = await readFile(gitignorePath, "utf8");
+  } catch {
+  }
+  if (!gitignore.includes(".env.stackable")) {
+    const newGitignore = gitignore ? `${gitignore}
+.env.stackable
+` : ".env.stackable\n";
+    await writeFile(gitignorePath, newGitignore);
+  }
+};
 var scaffold = async (options) => {
   const { dir } = await downloadTemplate(TEMPLATE_SOURCE, {
     dir: options.outputDir,
@@ -1028,14 +1331,18 @@ var scaffold = async (options) => {
   await rewritePreviewApp(dir, selectedTargets, derivedPermissions);
   await rewriteTurboJson(dir);
   await writeEnvFile(dir, options.extensionPort, options.previewPort);
+  await updateGitignore(dir);
   return options;
 };
 
 // src/App.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var STEPS = {
   ["create" /* CREATE */]: ["app", "name", "targets", "settings", "confirm"],
-  ["scaffold" /* SCAFFOLD */]: ["app", "extensionSelect", "confirmTargets", "settings", "confirm"]
+  ["scaffold" /* SCAFFOLD */]: ["app", "extensionSelect", "confirmTargets", "settings", "confirm"],
+  ["update" /* UPDATE */]: ["app", "extensionSelect", "updateSettings", "confirm"],
+  ["dev" /* DEV */]: []
+  // Dev command has no wizard steps
 };
 var PROGRESS_STEPS = {
   ["create" /* CREATE */]: [
@@ -1048,7 +1355,12 @@ var PROGRESS_STEPS = {
     { label: "Fetching template", status: "pending" },
     { label: "Generating files", status: "pending" },
     { label: "Installing dependencies", status: "pending" }
-  ]
+  ],
+  ["update" /* UPDATE */]: [
+    { label: "Updating extension", status: "pending" }
+  ],
+  ["dev" /* DEV */]: []
+  // Dev command has no progress steps
 };
 var toKebabCase2 = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 var derivePermissions2 = (targets) => {
@@ -1068,12 +1380,22 @@ var derivePermissions2 = (targets) => {
   }
   return [...permissions];
 };
-var App = ({ command, initialName, options }) => {
+var App = ({ command, initialName, initialExtensionId, options }) => {
   const { exit } = useApp();
   const [step, setStep] = useState8("app");
-  const [name, setName] = useState8(initialName ?? "");
-  const [extensionId, setExtensionId] = useState8("");
+  const [name, setName] = useState8(initialName ?? options?.name ?? "");
+  const [extensionId, setExtensionId] = useState8(initialExtensionId ?? "");
   const [extensionVersion, setExtensionVersion] = useState8("");
+  const [bundleUrl, setBundleUrl] = useState8(options?.bundleUrl ?? "");
+  const [enabled, setEnabled] = useState8(
+    options?.enabled !== void 0 ? options.enabled !== "false" : true
+  );
+  const [versionOverride, setVersionOverride] = useState8(void 0);
+  const [forceMajor, setForceMajor] = useState8(false);
+  const [initialExtension, setInitialExtension] = useState8(null);
+  const [targets, setTargets] = useState8(
+    options?.targets ? options.targets.split(",").map((t) => t.trim()) : []
+  );
   const [selectedApp, setSelectedApp] = useState8(null);
   const [extensionPort, setExtensionPort] = useState8(
     options?.extensionPort ? parseInt(options.extensionPort, 10) : 5173
@@ -1081,7 +1403,6 @@ var App = ({ command, initialName, options }) => {
   const [previewPort, setPreviewPort] = useState8(
     options?.previewPort ? parseInt(options.previewPort, 10) : 5174
   );
-  const [targets, setTargets] = useState8([]);
   const [outputDir, setOutputDir] = useState8("");
   const [progressSteps, setProgressSteps] = useState8(PROGRESS_STEPS[command]);
   const [errorMessage, setErrorMessage] = useState8();
@@ -1093,8 +1414,19 @@ var App = ({ command, initialName, options }) => {
     const skipped = /* @__PURE__ */ new Set();
     if (command === "create" /* CREATE */ && initialName) skipped.add("name");
     if (options?.extensionPort || options?.previewPort) skipped.add("settings");
+    if (command === "update" /* UPDATE */) {
+      if (options?.appId) skipped.add("app");
+      if (initialExtensionId) skipped.add("extensionSelect");
+    }
     return base.filter((s) => !skipped.has(s));
-  }, [command, initialName, options?.extensionPort, options?.previewPort]);
+  }, [
+    command,
+    initialName,
+    initialExtensionId,
+    options?.extensionPort,
+    options?.previewPort,
+    options?.appId
+  ]);
   const goBack = useCallback(() => {
     setStep((prev) => {
       const steps = activeSteps();
@@ -1104,7 +1436,7 @@ var App = ({ command, initialName, options }) => {
   }, [activeSteps]);
   const handleAppSelect = (app) => {
     setSelectedApp(app);
-    if (command === "scaffold" /* SCAFFOLD */) {
+    if (command === "scaffold" /* SCAFFOLD */ || command === "update" /* UPDATE */) {
       setStep("extensionSelect");
       return;
     }
@@ -1115,7 +1447,18 @@ var App = ({ command, initialName, options }) => {
     setExtensionId(ext.id);
     setExtensionVersion(ext.manifest.version);
     setTargets(ext.manifest.targets);
-    setStep("confirmTargets");
+    setBundleUrl(ext.bundleUrl);
+    setEnabled(ext.enabled ?? true);
+    setInitialExtension({
+      name: ext.manifest.name,
+      targets: ext.manifest.targets,
+      bundleUrl: ext.bundleUrl
+    });
+    if (command === "scaffold" /* SCAFFOLD */) {
+      setStep("confirmTargets");
+    } else if (command === "update" /* UPDATE */) {
+      setStep("updateSettings");
+    }
   };
   const handleConfirmTargets = (value) => {
     setTargets(value);
@@ -1146,7 +1489,45 @@ var App = ({ command, initialName, options }) => {
     setOutputDir(dir);
     setStep("confirm");
   };
+  const computeVersionBump = (currentVersion, newName, newTargets, newBundleUrl, isForceMajor) => {
+    const [major, minor, patch] = currentVersion.split(".").map(Number);
+    if (!initialExtension) return `${major}.${minor}.${patch + 1}`;
+    if (isForceMajor) return `${major + 1}.0.0`;
+    const bundleUrlChanged = newBundleUrl !== initialExtension.bundleUrl;
+    if (bundleUrlChanged) return `${major + 1}.0.0`;
+    const targetsChanged = newTargets.length !== initialExtension.targets.length || newTargets.some((t) => !initialExtension.targets.includes(t));
+    if (targetsChanged) return `${major}.${minor + 1}.0`;
+    const nameChanged = newName !== initialExtension.name;
+    if (nameChanged) return `${major}.${minor}.${patch + 1}`;
+    return currentVersion;
+  };
   const handleConfirm = async () => {
+    if (command === "update" /* UPDATE */) {
+      setStep("updating");
+      setProgressSteps(PROGRESS_STEPS[command]);
+      try {
+        updateStep(0, "running");
+        const resolvedVersion = options?.setVersion ?? versionOverride ?? computeVersionBump(extensionVersion, name, targets, bundleUrl, forceMajor);
+        await updateExtension(selectedApp.id, extensionId, {
+          manifest: {
+            name,
+            version: resolvedVersion,
+            targets,
+            permissions: derivePermissions2(targets)
+          },
+          bundleUrl: bundleUrl || void 0,
+          enabled
+        });
+        updateStep(0, "done");
+        setExtensionVersion(resolvedVersion);
+        setStep("updateDone");
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setErrorMessage(message);
+        setStep("error");
+      }
+      return;
+    }
     setStep("scaffolding");
     setProgressSteps(PROGRESS_STEPS[command]);
     try {
@@ -1201,20 +1582,21 @@ var App = ({ command, initialName, options }) => {
   };
   switch (step) {
     case "app": {
-      return /* @__PURE__ */ jsx12(AppSelect, { onSubmit: handleAppSelect });
+      return /* @__PURE__ */ jsx13(AppSelect, { onSubmit: handleAppSelect });
     }
     case "extensionSelect": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         ExtensionSelect,
         {
           appId: selectedApp.id,
+          command,
           onSubmit: handleExtensionSelect,
           onBack: goBack
         }
       );
     }
     case "confirmTargets": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         TargetSelect,
         {
           availableTargets: selectedApp?.targets ?? [],
@@ -1225,7 +1607,7 @@ var App = ({ command, initialName, options }) => {
       );
     }
     case "name": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         NamePrompt,
         {
           initialValue: name,
@@ -1235,7 +1617,7 @@ var App = ({ command, initialName, options }) => {
       );
     }
     case "targets": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         TargetSelect,
         {
           availableTargets: selectedApp?.targets ?? [],
@@ -1245,7 +1627,7 @@ var App = ({ command, initialName, options }) => {
       );
     }
     case "settings": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         SettingsPrompt,
         {
           defaultDir: join2(process.cwd(), toKebabCase2(extensionId || name)),
@@ -1255,15 +1637,20 @@ var App = ({ command, initialName, options }) => {
       );
     }
     case "confirm": {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         Confirm,
         {
+          command,
           name,
           extensionPort,
           previewPort,
           targets,
           outputDir,
-          extensionVersion: command === "scaffold" /* SCAFFOLD */ ? extensionVersion : void 0,
+          extensionVersion: command !== "create" /* CREATE */ ? extensionVersion : void 0,
+          bundleUrl: command === "update" /* UPDATE */ ? bundleUrl : void 0,
+          enabled: command === "update" /* UPDATE */ ? enabled : void 0,
+          newVersion: command === "update" /* UPDATE */ ? options?.setVersion ?? versionOverride ?? computeVersionBump(extensionVersion, name, targets, bundleUrl, forceMajor) : void 0,
+          onVersionOverride: command === "update" /* UPDATE */ ? setVersionOverride : void 0,
           onConfirm: handleConfirm,
           onCancel: handleCancel,
           onBack: goBack
@@ -1271,29 +1658,391 @@ var App = ({ command, initialName, options }) => {
       );
     }
     case "scaffolding": {
-      return /* @__PURE__ */ jsx12(ScaffoldProgress, { steps: progressSteps });
+      return /* @__PURE__ */ jsx13(ScaffoldProgress, { steps: progressSteps });
+    }
+    case "updateSettings": {
+      return /* @__PURE__ */ jsx13(
+        UpdateSettingsPrompt,
+        {
+          name,
+          targets,
+          availableTargets: selectedApp?.targets ?? [],
+          bundleUrl,
+          enabled,
+          onSubmit: (updated) => {
+            setName(updated.name);
+            setTargets(updated.targets);
+            setBundleUrl(updated.bundleUrl);
+            setEnabled(updated.enabled);
+            setForceMajor(updated.forceMajor);
+            setVersionOverride(void 0);
+            setStep("confirm");
+          },
+          onBack: goBack
+        }
+      );
+    }
+    case "updating": {
+      return /* @__PURE__ */ jsx13(ScaffoldProgress, { steps: progressSteps });
+    }
+    case "updateDone": {
+      return /* @__PURE__ */ jsx13(StepShell, { title: "Extension updated", onBack: goBack, children: /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx13(Text13, { color: "green", bold: true, children: "Extension updated successfully!" }),
+        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
+          "Name: ",
+          name
+        ] }),
+        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
+          "ID: ",
+          extensionId
+        ] }),
+        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
+          "Version: ",
+          extensionVersion
+        ] })
+      ] }) });
     }
     case "done": {
-      return /* @__PURE__ */ jsx12(Done, { name, outputDir });
+      return /* @__PURE__ */ jsx13(Done, { name, outputDir });
+    }
+    case "error": {
+      return /* @__PURE__ */ jsx13(StepShell, { title: "Operation failed", onBack: goBack, children: /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx13(Text13, { color: "red", bold: true, children: "An error occurred" }),
+        errorMessage && /* @__PURE__ */ jsx13(Text13, { color: "red", children: errorMessage })
+      ] }) });
     }
     default: {
-      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 })
+      return /* @__PURE__ */ jsx13(StepShell, { title: "Scaffold failed", onBack: goBack, children: /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx13(Text13, { color: "red", bold: true, children: "An error occurred" }),
+        errorMessage && /* @__PURE__ */ jsx13(Text13, { color: "red", children: errorMessage })
       ] }) });
     }
   }
 };
 
+// src/components/DevApp.tsx
+import { Box as Box16, Text as Text16 } from "ink";
+import { useState as useState10, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+
+// src/lib/devContext.ts
+import { readFile as readFile2, writeFile as writeFile2 } from "fs/promises";
+import { join as join3 } from "path";
+var parseEnvFile = (content) => {
+  const lines = content.split("\n");
+  const env = {};
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed && !trimmed.startsWith("#")) {
+      const [key, ...rest] = trimmed.split("=");
+      if (key && rest.length > 0) {
+        env[key.trim()] = rest.join("=").trim();
+      }
+    }
+  }
+  return env;
+};
+var readEnvFile = async (filePath) => {
+  try {
+    const content = await readFile2(filePath, "utf8");
+    return parseEnvFile(content);
+  } catch {
+    return {};
+  }
+};
+var writeEnvFile2 = async (filePath, env) => {
+  const lines = Object.entries(env).map(([key, value]) => `${key}=${value}`).join("\n");
+  await writeFile2(filePath, `${lines}
+`);
+};
+var readDevContext = async (projectRoot) => {
+  const stackableEnv = await readEnvFile(join3(projectRoot, ".env.stackable"));
+  const env = await readEnvFile(join3(projectRoot, ".env"));
+  let extensionName = "Unknown Extension";
+  try {
+    const manifestPath = join3(projectRoot, "packages/extension/public/manifest.json");
+    const manifestContent = await readFile2(manifestPath, "utf8");
+    const manifest = JSON.parse(manifestContent);
+    extensionName = manifest.name;
+  } catch {
+  }
+  const extensionPort = parseInt(env.VITE_EXTENSION_PORT || stackableEnv.EXTENSION_PORT || "5173", 10);
+  const previewPort = parseInt(env.VITE_PREVIEW_PORT || stackableEnv.PREVIEW_PORT || "5174", 10);
+  return {
+    projectRoot,
+    extensionName,
+    appId: stackableEnv.APP_ID || null,
+    extensionId: stackableEnv.EXTENSION_ID || null,
+    extensionPort,
+    previewPort
+  };
+};
+var writeDevContext = async (projectRoot, ctx) => {
+  const env = {
+    APP_ID: ctx.appId || "",
+    EXTENSION_ID: ctx.extensionId || "",
+    EXTENSION_PORT: ctx.extensionPort.toString(),
+    PREVIEW_PORT: ctx.previewPort.toString()
+  };
+  await writeEnvFile2(join3(projectRoot, ".env.stackable"), env);
+};
+
+// src/lib/tunnel.ts
+import { tunnel } from "cloudflared";
+var startTunnel = async (port) => {
+  const { url, stop } = tunnel({ "--url": `http://localhost:${port}` });
+  const resolvedUrl = await url;
+  return { url: resolvedUrl, stop };
+};
+
+// src/lib/devServer.ts
+import { spawn } from "child_process";
+var startDevServer = (projectRoot) => {
+  const child = spawn("pnpm", ["dev"], {
+    cwd: projectRoot,
+    stdio: "pipe"
+  });
+  const stop = () => {
+    child.kill("SIGTERM");
+  };
+  return { process: child, stop };
+};
+
+// src/components/DevSetup.tsx
+import { Box as Box14, Text as Text14 } from "ink";
+import { useState as useState9, useEffect as useEffect4 } from "react";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var DevSetup = ({ initialContext, onReady }) => {
+  const [step, setStep] = useState9("app");
+  const [selectedApp, setSelectedApp] = useState9(null);
+  useEffect4(() => {
+    if (initialContext.appId) {
+      setStep("extension");
+    }
+  }, [initialContext.appId]);
+  const handleAppSelect = (app) => {
+    setSelectedApp(app);
+    setStep("extension");
+  };
+  const handleExtensionSelect = (extension) => {
+    onReady({
+      appId: selectedApp?.id || initialContext.appId,
+      extensionId: extension.id,
+      appName: selectedApp?.name
+    });
+  };
+  if (step === "app") {
+    return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx14(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx14(Text14, { children: "Select the App for your extension:" }) }),
+      /* @__PURE__ */ jsx14(AppSelect, { onSubmit: handleAppSelect })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx14(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx14(Text14, { children: "Select the Extension to develop:" }) }),
+    /* @__PURE__ */ jsx14(
+      ExtensionSelect,
+      {
+        appId: selectedApp?.id || initialContext.appId,
+        onSubmit: handleExtensionSelect
+      }
+    )
+  ] });
+};
+
+// src/components/DevDashboard.tsx
+import { Box as Box15, Text as Text15, useInput as useInput8 } from "ink";
+import { useEffect as useEffect5 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var DevDashboard = ({
+  extensionName,
+  extensionId,
+  appId,
+  appName,
+  extensionPort,
+  previewPort,
+  tunnelUrl,
+  bundleUrlUpdated,
+  onQuit
+}) => {
+  useEffect5(() => {
+    const handler = () => {
+      onQuit();
+    };
+    process.on("SIGINT", handler);
+    return () => {
+      process.off("SIGINT", handler);
+    };
+  }, [onQuit]);
+  useInput8((input) => {
+    if (input === "q") {
+      onQuit();
+    }
+  });
+  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsx15(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text15, { bold: true, color: "blue", children: "\u2500\u2500 stackable dev \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }),
+    /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, marginBottom: 1, children: [
+      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Extension:" }),
+        /* @__PURE__ */ jsxs15(Text15, { children: [
+          extensionName,
+          " (",
+          extensionId,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "App:" }),
+        /* @__PURE__ */ jsx15(Text15, { children: appName || appId })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, marginBottom: 1, children: [
+      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local:" }),
+        /* @__PURE__ */ jsxs15(Text15, { children: [
+          "http://localhost:",
+          extensionPort
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel:" }),
+        /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || "Connecting\u2026" })
+      ] }),
+      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Preview:" }),
+        /* @__PURE__ */ jsxs15(Text15, { children: [
+          "http://localhost:",
+          previewPort
+        ] })
+      ] })
+    ] }),
+    bundleUrlUpdated && /* @__PURE__ */ jsx15(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text15, { color: "green", children: "bundleUrl updated \u2713" }) }),
+    /* @__PURE__ */ jsx15(Box15, { children: /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Press Ctrl-C to quit" }) })
+  ] });
+};
+
+// src/components/DevApp.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DevApp = ({ options = {} }) => {
+  const [state, setState] = useState10("setup");
+  const [devContext, setDevContext] = useState10(null);
+  const [resolvedContext, setResolvedContext] = useState10(null);
+  const [tunnelUrl, setTunnelUrl] = useState10(null);
+  const [bundleUrlUpdated, setBundleUrlUpdated] = useState10(false);
+  const [tunnelHandle, setTunnelHandle] = useState10(null);
+  const [devServerHandle, setDevServerHandle] = useState10(null);
+  const [originalBundleUrl, setOriginalBundleUrl] = useState10("");
+  const useTunnel = options.tunnel !== false;
+  const useUpdate = options.update !== false;
+  const useRestore = options.restore !== false;
+  useEffect6(() => {
+    const projectRoot = options.dir || process.cwd();
+    readDevContext(projectRoot).then((ctx) => {
+      setDevContext(ctx);
+    });
+  }, [options.dir]);
+  const handleSetupReady = useCallback2(async (resolved) => {
+    if (!devContext) return;
+    setResolvedContext(resolved);
+    await writeDevContext(devContext.projectRoot, {
+      ...devContext,
+      appId: resolved.appId,
+      extensionId: resolved.extensionId
+    });
+    const extensionPort = options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort;
+    const serverHandle = startDevServer(devContext.projectRoot);
+    setDevServerHandle(serverHandle);
+    if (useTunnel) {
+      try {
+        const tunnelResult = await startTunnel(extensionPort);
+        setTunnelHandle(tunnelResult);
+        setTunnelUrl(tunnelResult.url);
+        if (useUpdate) {
+          const originalUrl = `http://localhost:${extensionPort}`;
+          setOriginalBundleUrl(originalUrl);
+          await updateExtension(resolved.appId, resolved.extensionId, {
+            bundleUrl: tunnelResult.url
+          });
+          setBundleUrlUpdated(true);
+        }
+      } catch (err) {
+        console.error("Failed to start tunnel:", err);
+      }
+    }
+    setState("running");
+  }, [devContext, options.extensionPort, useTunnel, useUpdate]);
+  useEffect6(() => {
+    if (state === "setup" && devContext && devContext.appId && devContext.extensionId) {
+      handleSetupReady({
+        appId: devContext.appId,
+        extensionId: devContext.extensionId
+      });
+    }
+  }, [state, devContext, handleSetupReady]);
+  const handleQuit = async () => {
+    if (!devContext || !resolvedContext) return;
+    setState("stopping");
+    try {
+      if (useRestore && originalBundleUrl) {
+        await updateExtension(resolvedContext.appId, resolvedContext.extensionId, {
+          bundleUrl: originalBundleUrl
+        });
+      }
+      if (tunnelHandle) {
+        tunnelHandle.stop();
+      }
+      if (devServerHandle) {
+        devServerHandle.stop();
+      }
+    } catch (err) {
+      console.error("Error during cleanup:", err);
+    }
+    process.exit(0);
+  };
+  if (state === "setup" && devContext) {
+    if (!devContext.appId || !devContext.extensionId) {
+      return /* @__PURE__ */ jsx16(
+        DevSetup,
+        {
+          initialContext: devContext,
+          onReady: handleSetupReady
+        }
+      );
+    }
+    return null;
+  }
+  if (state === "running" && devContext && resolvedContext) {
+    return /* @__PURE__ */ jsx16(
+      DevDashboard,
+      {
+        extensionName: devContext.extensionName,
+        extensionId: resolvedContext.extensionId,
+        appId: resolvedContext.appId,
+        appName: resolvedContext.appName,
+        extensionPort: options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort,
+        previewPort: options.previewPort ? parseInt(options.previewPort, 10) : devContext.previewPort,
+        tunnelUrl,
+        bundleUrlUpdated,
+        onQuit: handleQuit
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(Box16, { children: /* @__PURE__ */ jsx16(Text16, { children: "Loading..." }) });
+};
+
 // src/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
 program.name("stackable-app-extension").description("Stackable app extension developer CLI").version(version);
 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 }));
+  render(/* @__PURE__ */ jsx17(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 }));
+  render(/* @__PURE__ */ jsx17(App, { command: "scaffold" /* SCAFFOLD */, options }));
+});
+program.command("update" /* UPDATE */).description("Update an existing Extension").argument("[extensionId]", "Extension ID to update").option("--app-id <id>", "Skip app selection").option("--name <name>", "New extension name").option("--targets <targets>", "Comma-separated target slots (validated against app)").option("--bundle-url <url>", "New bundle URL").option("--enabled <bool>", "Enable/disable extension").option("--set-version <version>", "Explicit version (skips auto-compute)").action((extensionId, options) => {
+  render(/* @__PURE__ */ jsx17(App, { command: "update" /* UPDATE */, initialExtensionId: extensionId, options }));
+});
+program.command("dev" /* DEV */).description("Start dev servers with a public tunnel").option("--dir <path>", "Project root (default: cwd)").option("--extension-port <port>", "Override extension port").option("--preview-port <port>", "Override preview port").option("--no-tunnel", "Skip tunnel, just run vite dev").option("--no-update", "Skip bundleUrl update on server").option("--no-restore", "On exit, keep tunnel URL as bundleUrl").action((options) => {
+  render(/* @__PURE__ */ jsx17(DevApp, { options }));
 });
 program.parse(process.argv.filter((arg) => arg !== "--"));