@stackable-labs/cli-app-extension 1.25.3 → 1.26.0

package/dist/index.js

@@ -7,14 +7,48 @@ import { render } from "ink";
 
 // src/App.tsx
 import { join as join3 } from "path";
-import { Box as Box13, Text as Text13, useApp } from "ink";
-import { useCallback, useState as useState8 } from "react";
+import { Box as Box14, Text as Text14, useApp } from "ink";
+import { useCallback, useState as useState9 } from "react";
 
 // src/components/Confirm.tsx
 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/constants.ts
+var TEMPLATE_SOURCES = {
+  minimal: "github:stackable-labs/templates/app-extension-minimal",
+  starter: "github:stackable-labs/templates/app-extension",
+  "kitchen-sink": "github:stackable-labs/templates/app-extension-kitchen-sink"
+};
+var DEFAULT_PERMISSIONS = ["context:read"];
+var TEMPLATE_FLAVOR_META = {
+  minimal: {
+    label: "Minimal",
+    description: "Bare minimum \u2014 single surface, hello-world component",
+    defaultTargets: ["slot.content"],
+    skipTargetStep: true
+  },
+  starter: {
+    label: "Starter",
+    description: "Common patterns \u2014 store, api helpers, menu (current default)",
+    defaultTargets: null,
+    skipTargetStep: false
+  },
+  "kitchen-sink": {
+    label: "Kitchen Sink",
+    description: "Everything including the kitchen sink \u2014 every component, capability, surface, and hook we could fit",
+    defaultTargets: ["slot.header", "slot.content", "slot.footer", "slot.footer-links"],
+    skipTargetStep: true
+  }
+};
+var TARGET_PERMISSION_MAP = {
+  "slot.header": ["context:read"],
+  "slot.content": ["context:read", "data:query", "actions:toast", "actions:invoke"],
+  "slot.footer": [],
+  "slot.footer-links": []
+};
+
 // src/components/StepShell.tsx
 import { Box, Text, useInput } from "ink";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -101,6 +135,7 @@ var VersionRow = ({ currentVersion, value, onChange, onFocusChange, onConfirm, o
 var Confirm = ({
   command,
   name,
+  templateFlavor,
   extensionVersion,
   extensionPort,
   previewPort,
@@ -158,6 +193,10 @@ var Confirm = ({
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Name          " }),
           /* @__PURE__ */ jsx2(Text2, { dimColor: !!extensionVersion, children: name })
         ] }),
+        templateFlavor && /* @__PURE__ */ jsxs2(Box2, { gap: 2, children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Template      " }),
+          /* @__PURE__ */ jsx2(Text2, { children: TEMPLATE_FLAVOR_META[templateFlavor].label })
+        ] }),
         extensionVersion && command === "update" /* UPDATE */ && newVersion && onVersionOverride && /* @__PURE__ */ jsx2(
           VersionRow,
           {
@@ -212,7 +251,12 @@ var Confirm = ({
 // 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: [
+var FLAVOR_HINTS = {
+  minimal: "A clean slate \u2014 add surfaces and capabilities as you need them.",
+  starter: "Common patterns included \u2014 customize and build from here.",
+  "kitchen-sink": "We threw in everything \u2014 including the kitchen sink. Poke around, steal patterns, then delete what you don't need."
+};
+var Done = ({ name, outputDir, templateFlavor }) => /* @__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!" })
@@ -222,11 +266,16 @@ var Done = ({ name, outputDir }) => /* @__PURE__ */ jsxs3(Box3, { flexDirection:
       "Created: ",
       /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: name })
     ] }),
+    templateFlavor && /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "Template: ",
+      /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: TEMPLATE_FLAVOR_META[templateFlavor].label })
+    ] }),
     /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
       "Location: ",
       /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: outputDir })
     ] })
   ] }),
+  templateFlavor && /* @__PURE__ */ jsx3(Box3, { marginLeft: 2, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: FLAVOR_HINTS[templateFlavor] }) }),
   /* @__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: [
@@ -744,10 +793,52 @@ var TargetSelect = ({ availableTargets, preSelected, onSubmit, onBack }) => {
   );
 };
 
+// src/components/TemplateSelect.tsx
+import { Box as Box10, Text as Text10, useInput as useInput6 } from "ink";
+import { useState as useState6 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var FLAVORS = ["minimal", "starter", "kitchen-sink"];
+var TemplateSelect = ({ onSubmit, onBack }) => {
+  const [cursor, setCursor] = useState6(1);
+  useInput6((_input, key) => {
+    if (key.upArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setCursor((c) => Math.min(FLAVORS.length - 1, c + 1));
+      return;
+    }
+    if (key.return) {
+      onSubmit(FLAVORS[cursor]);
+    }
+  });
+  return /* @__PURE__ */ jsx10(
+    StepShell,
+    {
+      title: "Choose a template",
+      hint: "\u2191\u2193 to navigate, Enter to select",
+      onBack,
+      children: /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", gap: 1, children: FLAVORS.map((flavor, i) => {
+        const meta = TEMPLATE_FLAVOR_META[flavor];
+        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, { color: isCursor ? "green" : void 0, children: isCursor ? "\u25C9" : "\u25CB" }),
+          /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsx10(Text10, { bold: isCursor, children: meta.label }),
+            /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: meta.description })
+          ] })
+        ] }, flavor);
+      }) })
+    }
+  );
+};
+
 // src/components/AppSelect.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 Spinner2 from "ink-spinner";
-import { useEffect as useEffect2, useState as useState6 } from "react";
+import { useEffect as useEffect2, useState as useState7 } from "react";
 
 // src/lib/api.ts
 var DEFAULT_ADMIN_API_URL = "https://api-use1.stackablelabs.io/admin";
@@ -775,7 +866,7 @@ var fetchApps = async (token) => {
     iconUrl
   }));
 };
-var createExtensionRemote = async (appId, token, payload) => {
+var createExtensionRemote = async (token, appId, payload) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`, {
     method: "POST",
@@ -788,7 +879,7 @@ var createExtensionRemote = async (appId, token, payload) => {
   }
   return res.json();
 };
-var fetchExtensions = async (appId, token) => {
+var fetchExtensions = async (token, appId) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`, {
     headers: authHeaders(token)
@@ -810,7 +901,7 @@ var fetchExtensions = async (appId, token) => {
     ])
   );
 };
-var updateExtension = async (appId, extensionId, payload, token) => {
+var updateExtension = async (token, appId, extensionId, payload) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions/${extensionId}`, {
     method: "PUT",
@@ -824,8 +915,8 @@ var updateExtension = async (appId, extensionId, payload, token) => {
 };
 
 // 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 Box11, Text as Text11 } from "ink";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var WORDMARK = [
   "     _             _         _     _      ",
   " ___| |_ __ _  ___| | ____ _| |__ | | ___",
@@ -861,18 +952,18 @@ var gradientColor = (row, col, rows, cols) => {
 var Banner = ({ userId, orgId } = {}) => {
   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__ */ jsxs10(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)),
-      userId && orgId && /* @__PURE__ */ jsxs10(Box10, { gap: 2, marginTop: 1, children: [
-        /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
-          /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "User:" }),
-          /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: userId })
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: "\u2500".repeat(termWidth) }),
+    /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [
+      WORDMARK.map((line, row) => /* @__PURE__ */ jsx11(Box11, { children: line.split("").map((ch, col) => /* @__PURE__ */ jsx11(Text11, { bold: true, color: ch === " " ? void 0 : gradientColor(row, col, WORDMARK.length, maxLen), children: ch }, col)) }, row)),
+      userId && orgId && /* @__PURE__ */ jsxs11(Box11, { gap: 2, marginTop: 1, children: [
+        /* @__PURE__ */ jsxs11(Box11, { gap: 1, children: [
+          /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: "User:" }),
+          /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: userId })
         ] }),
-        /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
-          /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "Org:" }),
-          /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: orgId })
+        /* @__PURE__ */ jsxs11(Box11, { gap: 1, children: [
+          /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: "Org:" }),
+          /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: orgId })
         ] })
       ] })
     ] })
@@ -880,16 +971,16 @@ var Banner = ({ userId, orgId } = {}) => {
 };
 
 // src/components/AppSelect.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var AppSelect = ({ token, userId, orgId, onSubmit }) => {
-  const [apps, setApps] = useState6([]);
-  const [loading, setLoading] = useState6(true);
-  const [error, setError] = useState6();
-  const [cursor, setCursor] = useState6(0);
+  const [apps, setApps] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7();
+  const [cursor, setCursor] = useState7(0);
   useEffect2(() => {
     fetchApps(token).then(setApps).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
   }, [token]);
-  useInput6((_, key) => {
+  useInput7((_, key) => {
     if (loading || error || apps.length === 0) return;
     if (key.upArrow) {
       setCursor((c) => Math.max(0, c - 1));
@@ -901,26 +992,26 @@ var AppSelect = ({ token, userId, orgId, onSubmit }) => {
   });
   const renderContent = () => {
     if (loading) {
-      return /* @__PURE__ */ jsxs11(Box11, { gap: 2, children: [
-        /* @__PURE__ */ jsx11(Spinner2, { type: "dots" }),
-        /* @__PURE__ */ jsx11(Text11, { children: "Loading available Apps\u2026" })
+      return /* @__PURE__ */ jsxs12(Box12, { gap: 2, children: [
+        /* @__PURE__ */ jsx12(Spinner2, { type: "dots" }),
+        /* @__PURE__ */ jsx12(Text12, { 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 })
+      return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx12(Text12, { color: "red", bold: true, children: "Failed to load Apps" }),
+        /* @__PURE__ */ jsx12(Text12, { color: "red", children: error })
       ] });
     }
     if (apps.length === 0) {
-      return /* @__PURE__ */ jsx11(Text11, { color: "yellow", children: "No Apps available. Contact your administrator." });
+      return /* @__PURE__ */ jsx12(Text12, { color: "yellow", children: "No Apps available. Contact your administrator." });
     }
-    return /* @__PURE__ */ jsx11(Box11, { flexDirection: "column", children: apps.map((app, i) => {
+    return /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", children: apps.map((app, i) => {
       const isCursor = i === cursor;
-      return /* @__PURE__ */ jsxs11(Box11, { gap: 1, children: [
-        /* @__PURE__ */ jsx11(Text11, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
-        /* @__PURE__ */ jsx11(Text11, { bold: isCursor, children: app.name }),
-        /* @__PURE__ */ jsxs11(Text11, { dimColor: true, children: [
+      return /* @__PURE__ */ jsxs12(Box12, { gap: 1, children: [
+        /* @__PURE__ */ jsx12(Text12, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+        /* @__PURE__ */ jsx12(Text12, { bold: isCursor, children: app.name }),
+        /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
           "(",
           app.id,
           ")"
@@ -928,26 +1019,26 @@ var AppSelect = ({ token, userId, orgId, onSubmit }) => {
       ] }, app.id);
     }) });
   };
-  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(Banner, { userId, orgId }),
-    /* @__PURE__ */ jsx11(StepShell, { title: "Select the App you are building an Extension for:", children: renderContent() })
+  return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Banner, { userId, orgId }),
+    /* @__PURE__ */ jsx12(StepShell, { title: "Select the App you are building an Extension for:", children: renderContent() })
   ] });
 };
 
 // src/components/ExtensionSelect.tsx
-import { Box as Box12, Text as Text12, useInput as useInput7 } from "ink";
+import { Box as Box13, Text as Text13, useInput as useInput8 } from "ink";
 import Spinner3 from "ink-spinner";
-import { useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useState as useState8 } from "react";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var ExtensionSelect = ({ appId, token, command, onSubmit, onBack }) => {
-  const [extensions, setExtensions] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  const [error, setError] = useState7();
-  const [cursor, setCursor] = useState7(0);
+  const [extensions, setExtensions] = useState8([]);
+  const [loading, setLoading] = useState8(true);
+  const [error, setError] = useState8();
+  const [cursor, setCursor] = useState8(0);
   useEffect3(() => {
-    fetchExtensions(appId, token).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
+    fetchExtensions(token, appId).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
   }, [appId, token]);
-  useInput7((_, key) => {
+  useInput8((_, key) => {
     if (key.upArrow) {
       if (!loading && !error && extensions.length > 0) {
         setCursor((c) => Math.max(0, c - 1));
@@ -968,30 +1059,30 @@ var ExtensionSelect = ({ appId, token, command, onSubmit, onBack }) => {
   });
   const renderContent = () => {
     if (loading) {
-      return /* @__PURE__ */ jsxs12(Box12, { gap: 2, children: [
-        /* @__PURE__ */ jsx12(Spinner3, { type: "dots" }),
-        /* @__PURE__ */ jsx12(Text12, { children: "Loading Extensions\u2026" })
+      return /* @__PURE__ */ jsxs13(Box13, { gap: 2, children: [
+        /* @__PURE__ */ jsx13(Spinner3, { type: "dots" }),
+        /* @__PURE__ */ jsx13(Text13, { children: "Loading Extensions\u2026" })
       ] });
     }
     if (error) {
-      return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsx12(Text12, { color: "red", bold: true, children: "Failed to load Extensions" }),
-        /* @__PURE__ */ jsx12(Text12, { color: "red", children: error })
+      return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx13(Text13, { color: "red", bold: true, children: "Failed to load Extensions" }),
+        /* @__PURE__ */ jsx13(Text13, { color: "red", children: error })
       ] });
     }
     if (extensions.length === 0) {
-      return /* @__PURE__ */ jsx12(Text12, { color: "yellow", children: "No Extensions found for this App." });
+      return /* @__PURE__ */ jsx13(Text13, { color: "yellow", children: "No Extensions found for this App." });
     }
-    return /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", children: extensions.map((ext, i) => {
+    return /* @__PURE__ */ jsx13(Box13, { 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: [
+      return /* @__PURE__ */ jsxs13(Box13, { gap: 1, children: [
+        /* @__PURE__ */ jsx13(Text13, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+        /* @__PURE__ */ jsx13(Text13, { bold: isCursor, children: ext.manifest.name }),
+        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
           "v",
           ext.manifest.version
         ] }),
-        /* @__PURE__ */ jsxs12(Text12, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
           "(",
           ext.id,
           ")"
@@ -999,7 +1090,7 @@ var ExtensionSelect = ({ appId, token, command, onSubmit, onBack }) => {
       ] }, ext.id);
     }) });
   };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     StepShell,
     {
       title: command === "update" /* UPDATE */ ? "Select an Extension to update:" : "Select an existing Extension to scaffold:",
@@ -1009,16 +1100,6 @@ var ExtensionSelect = ({ appId, token, command, onSubmit, onBack }) => {
   );
 };
 
-// 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";
@@ -1444,28 +1525,33 @@ var updateGitignore = async (dir) => {
   }
 };
 var scaffold = async (options) => {
-  const { dir } = await downloadTemplate(TEMPLATE_SOURCE, {
+  const flavor = options.templateFlavor ?? "starter";
+  const templateSource = TEMPLATE_SOURCES[flavor];
+  const { dir } = await downloadTemplate(templateSource, {
     dir: options.outputDir,
     force: true
   });
-  const selectedTargets = normalizeTargets(options.targets);
-  const derivedPermissions = derivePermissions(selectedTargets);
   await replacePlaceholders(dir, {
     "__EXTENSION_ID__": toKebabCase(options.extensionId || options.name),
     "__EXTENSION_DISPLAY_NAME__": options.name,
     "replace-with-extension-name": toKebabCase(options.name),
     "replace-with-extension-package-name": `@agnostack/extensions-${toKebabCase(options.extensionId || options.name)}`
   });
-  await generateManifest(dir, options.name, selectedTargets, derivedPermissions);
-  await generateSurfaceFiles(dir, selectedTargets);
-  await rewriteExtensionIndex(dir, options.extensionId || options.name, selectedTargets);
-  await rewritePreviewApp(dir, selectedTargets, derivedPermissions);
+  if (flavor === "starter") {
+    const selectedTargets = normalizeTargets(options.targets);
+    const derivedPermissions = derivePermissions(selectedTargets);
+    await generateManifest(dir, options.name, selectedTargets, derivedPermissions);
+    await generateSurfaceFiles(dir, selectedTargets);
+    await rewriteExtensionIndex(dir, options.extensionId || options.name, selectedTargets);
+    await rewritePreviewApp(dir, selectedTargets, derivedPermissions);
+  }
   await rewriteTurboJson(dir);
   await patchViteAllowedHosts(dir);
   await writeEnvFile2(dir, options.extensionPort, options.previewPort);
   await updateGitignore(dir);
   await writeDevContext(dir, {
     projectRoot: dir,
+    orgId: null,
     appId: options.appId,
     extensionId: toKebabCase(options.extensionId || options.name),
     appName: options.appName || null,
@@ -1477,9 +1563,9 @@ var scaffold = async (options) => {
 };
 
 // src/App.tsx
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 var STEPS = {
-  ["create" /* CREATE */]: ["app", "name", "targets", "settings", "confirm"],
+  ["create" /* CREATE */]: ["app", "name", "template", "targets", "settings", "confirm"],
   ["scaffold" /* SCAFFOLD */]: ["app", "extensionSelect", "confirmTargets", "settings", "confirm"],
   ["update" /* UPDATE */]: ["app", "extensionSelect", "updateSettings", "confirm"],
   ["dev" /* DEV */]: []
@@ -1523,30 +1609,33 @@ var derivePermissions2 = (targets) => {
 };
 var App = ({ command, token, userId, orgId, initialName, initialExtensionId, options }) => {
   const { exit } = useApp();
-  const [step, setStep] = useState8("app");
-  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(
+  const [step, setStep] = useState9("app");
+  const [name, setName] = useState9(initialName ?? options?.name ?? "");
+  const [extensionId, setExtensionId] = useState9(initialExtensionId ?? "");
+  const [extensionVersion, setExtensionVersion] = useState9("");
+  const [bundleUrl, setBundleUrl] = useState9(options?.bundleUrl ?? "");
+  const [enabled, setEnabled] = useState9(
     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(
+  const [versionOverride, setVersionOverride] = useState9(void 0);
+  const [forceMajor, setForceMajor] = useState9(false);
+  const [initialExtension, setInitialExtension] = useState9(null);
+  const [templateFlavor, setTemplateFlavor] = useState9(
+    options?.template ?? "starter"
+  );
+  const [targets, setTargets] = useState9(
     options?.targets ? options.targets.split(",").map((t) => t.trim()) : []
   );
-  const [selectedApp, setSelectedApp] = useState8(null);
-  const [extensionPort, setExtensionPort] = useState8(
+  const [selectedApp, setSelectedApp] = useState9(null);
+  const [extensionPort, setExtensionPort] = useState9(
     options?.extensionPort ? parseInt(options.extensionPort, 10) : 6543
   );
-  const [previewPort, setPreviewPort] = useState8(
+  const [previewPort, setPreviewPort] = useState9(
     options?.previewPort ? parseInt(options.previewPort, 10) : 6544
   );
-  const [outputDir, setOutputDir] = useState8("");
-  const [progressSteps, setProgressSteps] = useState8(PROGRESS_STEPS[command]);
-  const [errorMessage, setErrorMessage] = useState8();
+  const [outputDir, setOutputDir] = useState9("");
+  const [progressSteps, setProgressSteps] = useState9(PROGRESS_STEPS[command]);
+  const [errorMessage, setErrorMessage] = useState9();
   const updateStep = useCallback((index, status) => {
     setProgressSteps((prev) => prev.map((s, i) => i === index ? { ...s, status } : s));
   }, []);
@@ -1554,6 +1643,10 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
     const base = STEPS[command];
     const skipped = /* @__PURE__ */ new Set();
     if (command === "create" /* CREATE */ && initialName) skipped.add("name");
+    if (command === "create" /* CREATE */ && options?.template) skipped.add("template");
+    if (command === "create" /* CREATE */ && TEMPLATE_FLAVOR_META[templateFlavor].skipTargetStep) {
+      skipped.add("targets");
+    }
     if (options?.extensionPort || options?.previewPort) skipped.add("settings");
     if (command === "update" /* UPDATE */) {
       if (options?.appId) skipped.add("app");
@@ -1564,6 +1657,8 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
     command,
     initialName,
     initialExtensionId,
+    templateFlavor,
+    options?.template,
     options?.extensionPort,
     options?.previewPort,
     options?.appId
@@ -1581,7 +1676,26 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       setStep("extensionSelect");
       return;
     }
-    setStep(initialName ? "targets" : "name");
+    if (initialName) {
+      if (options?.template) {
+        const meta = TEMPLATE_FLAVOR_META[templateFlavor];
+        if (meta.skipTargetStep && meta.defaultTargets) {
+          setTargets(meta.defaultTargets);
+          if (options?.extensionPort || options?.previewPort) {
+            setOutputDir(join3(process.cwd(), toKebabCase2(initialName)));
+            setStep("confirm");
+          } else {
+            setStep("settings");
+          }
+          return;
+        }
+        setStep("targets");
+      } else {
+        setStep("template");
+      }
+    } else {
+      setStep("name");
+    }
   };
   const handleExtensionSelect = (ext) => {
     setName(ext.manifest.name);
@@ -1613,6 +1727,36 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
   const handleName = (value) => {
     setName(value);
     setExtensionId(toKebabCase2(value));
+    if (options?.template) {
+      const meta = TEMPLATE_FLAVOR_META[templateFlavor];
+      if (meta.skipTargetStep && meta.defaultTargets) {
+        setTargets(meta.defaultTargets);
+        if (options?.extensionPort || options?.previewPort) {
+          setOutputDir(join3(process.cwd(), toKebabCase2(value)));
+          setStep("confirm");
+        } else {
+          setStep("settings");
+        }
+        return;
+      }
+      setStep("targets");
+    } else {
+      setStep("template");
+    }
+  };
+  const handleTemplateSelect = (flavor) => {
+    setTemplateFlavor(flavor);
+    const meta = TEMPLATE_FLAVOR_META[flavor];
+    if (meta.skipTargetStep && meta.defaultTargets) {
+      setTargets(meta.defaultTargets);
+      if (options?.extensionPort || options?.previewPort) {
+        setOutputDir(join3(process.cwd(), toKebabCase2(extensionId || name)));
+        setStep("confirm");
+      } else {
+        setStep("settings");
+      }
+      return;
+    }
     setStep("targets");
   };
   const handleTargets = (value) => {
@@ -1649,7 +1793,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       try {
         updateStep(0, "running");
         const resolvedVersion = options?.setVersion ?? versionOverride ?? computeVersionBump(extensionVersion, name, targets, bundleUrl, forceMajor);
-        await updateExtension(selectedApp.id, extensionId, {
+        await updateExtension(token, selectedApp.id, extensionId, {
           manifest: {
             name,
             version: resolvedVersion,
@@ -1659,7 +1803,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
           },
           bundleUrl: bundleUrl || void 0,
           enabled
-        }, token);
+        });
         updateStep(0, "done");
         setExtensionVersion(resolvedVersion);
         setStep("updateDone");
@@ -1678,7 +1822,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       if (command === "create" /* CREATE */) {
         scaffoldStepOffset = 1;
         updateStep(0, "running");
-        const created = await createExtensionRemote(selectedApp.id, {
+        const created = await createExtensionRemote(token, selectedApp.id, {
           manifest: {
             name,
             version: "0.0.0",
@@ -1687,7 +1831,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
             allowedDomains: []
           },
           bundleUrl: `http://localhost:${extensionPort}`
-        }, token);
+        });
         resolvedExtensionId = created.id;
         setExtensionId(created.id);
         updateStep(0, "done");
@@ -1699,6 +1843,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
         name,
         extensionId: resolvedExtensionId,
         targets,
+        templateFlavor: command === "create" /* CREATE */ ? templateFlavor : void 0,
         outputDir,
         extensionPort,
         previewPort
@@ -1726,7 +1871,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
   };
   switch (step) {
     case "app": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         AppSelect,
         {
           token,
@@ -1737,7 +1882,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "extensionSelect": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         ExtensionSelect,
         {
           appId: selectedApp.id,
@@ -1749,7 +1894,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "confirmTargets": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         TargetSelect,
         {
           availableTargets: selectedApp?.targets ?? [],
@@ -1760,7 +1905,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "name": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         NamePrompt,
         {
           initialValue: name,
@@ -1769,8 +1914,17 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
         }
       );
     }
+    case "template": {
+      return /* @__PURE__ */ jsx14(
+        TemplateSelect,
+        {
+          onSubmit: handleTemplateSelect,
+          onBack: goBack
+        }
+      );
+    }
     case "targets": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         TargetSelect,
         {
           availableTargets: selectedApp?.targets ?? [],
@@ -1780,7 +1934,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "settings": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         SettingsPrompt,
         {
           defaultDir: join3(process.cwd(), toKebabCase2(extensionId || name)),
@@ -1790,11 +1944,12 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "confirm": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         Confirm,
         {
           command,
           name,
+          templateFlavor: command === "create" /* CREATE */ ? templateFlavor : void 0,
           targets,
           outputDir,
           previewPort,
@@ -1811,10 +1966,10 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "scaffolding": {
-      return /* @__PURE__ */ jsx13(ScaffoldProgress, { steps: progressSteps });
+      return /* @__PURE__ */ jsx14(ScaffoldProgress, { steps: progressSteps });
     }
     case "updateSettings": {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         UpdateSettingsPrompt,
         {
           name,
@@ -1836,46 +1991,46 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
       );
     }
     case "updating": {
-      return /* @__PURE__ */ jsx13(ScaffoldProgress, { steps: progressSteps });
+      return /* @__PURE__ */ jsx14(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: [
+      return /* @__PURE__ */ jsx14(StepShell, { title: "Extension updated", onBack: goBack, children: /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx14(Text14, { color: "green", bold: true, children: "Extension updated successfully!" }),
+        /* @__PURE__ */ jsxs14(Text14, { dimColor: true, children: [
           "Name: ",
           name
         ] }),
-        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs14(Text14, { dimColor: true, children: [
           "ID: ",
           extensionId
         ] }),
-        /* @__PURE__ */ jsxs13(Text13, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs14(Text14, { dimColor: true, children: [
           "Version: ",
           extensionVersion
         ] })
       ] }) });
     }
     case "done": {
-      return /* @__PURE__ */ jsx13(Done, { name, outputDir });
+      return /* @__PURE__ */ jsx14(Done, { name, outputDir, templateFlavor: command === "create" /* CREATE */ ? templateFlavor : void 0 });
     }
     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 })
+      return /* @__PURE__ */ jsx14(StepShell, { title: "Operation failed", onBack: goBack, children: /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx14(Text14, { color: "red", bold: true, children: "An error occurred" }),
+        errorMessage && /* @__PURE__ */ jsx14(Text14, { color: "red", children: errorMessage })
       ] }) });
     }
     default: {
-      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 })
+      return /* @__PURE__ */ jsx14(StepShell, { title: "Scaffold failed", onBack: goBack, children: /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsx14(Text14, { color: "red", bold: true, children: "An error occurred" }),
+        errorMessage && /* @__PURE__ */ jsx14(Text14, { color: "red", children: errorMessage })
       ] }) });
     }
   }
 };
 
 // src/components/DevApp.tsx
-import { useRef, useState as useState10, useEffect as useEffect6, useCallback as useCallback2 } from "react";
-import { useInput as useInput9, Box as Box16, Text as Text16 } from "ink";
+import { useRef, useState as useState11, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { useInput as useInput10, Box as Box17, Text as Text17 } from "ink";
 
 // src/lib/tunnel.ts
 import { Tunnel } from "cloudflared";
@@ -1909,12 +2064,12 @@ var startDevServer = (projectRoot) => {
 };
 
 // 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";
+import { Box as Box15, Text as Text15 } from "ink";
+import { useState as useState10, useEffect as useEffect4 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var DevSetup = ({ initialContext, token, onReady }) => {
-  const [step, setStep] = useState9("app");
-  const [selectedApp, setSelectedApp] = useState9(null);
+  const [step, setStep] = useState10("app");
+  const [selectedApp, setSelectedApp] = useState10(null);
   useEffect4(() => {
     if (initialContext.appId) {
       setStep("extension");
@@ -1932,9 +2087,9 @@ var DevSetup = ({ initialContext, token, onReady }) => {
     });
   };
   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(
+    return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx15(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text15, { children: "Select the App for your extension:" }) }),
+      /* @__PURE__ */ jsx15(
         AppSelect,
         {
           token,
@@ -1943,9 +2098,9 @@ var DevSetup = ({ initialContext, token, onReady }) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx14(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx14(Text14, { children: "Select the Extension to develop:" }) }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx15(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text15, { children: "Select the Extension to develop:" }) }),
+    /* @__PURE__ */ jsx15(
       ExtensionSelect,
       {
         token,
@@ -1957,9 +2112,9 @@ var DevSetup = ({ initialContext, token, onReady }) => {
 };
 
 // src/components/DevDashboard.tsx
-import { Box as Box15, Text as Text15, useInput as useInput8 } from "ink";
+import { Box as Box16, Text as Text16, useInput as useInput9 } from "ink";
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var DevDashboard = ({
   previewTunnelUrl,
   tunnelUrl,
@@ -1982,68 +2137,68 @@ var DevDashboard = ({
       process.off("SIGINT", handler);
     };
   }, [onQuit]);
-  useInput8((input, key) => {
+  useInput9((input, key) => {
     if (input === "q" || key.ctrl && input === "c") {
       onQuit();
     }
   });
-  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx15(Banner, { userId, orgId }),
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(Box16, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx16(Banner, { userId, orgId }),
+    /* @__PURE__ */ jsxs16(
       StepShell,
       {
         title: "dev",
         hint: `Live development ${tunnelUrl ? "with" : "w/o"} Tunnel`,
-        footer: /* @__PURE__ */ jsx15(Box15, { flexDirection: "column", gap: 1, children: /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Press q or Ctrl-C to quit" }) }),
+        footer: /* @__PURE__ */ jsx16(Box16, { flexDirection: "column", gap: 1, children: /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Press q or Ctrl-C to quit" }) }),
         children: [
-          /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Extension:" }),
-              /* @__PURE__ */ jsxs15(Text15, { children: [
+          /* @__PURE__ */ jsxs16(Box16, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Extension:" }),
+              /* @__PURE__ */ jsxs16(Text16, { children: [
                 extensionName,
                 " (",
                 extensionId,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "App:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: `${appName ? `${appName} ` : ""}(${appId})` })
+            /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "App:" }),
+              /* @__PURE__ */ jsx16(Text16, { children: `${appName ? `${appName} ` : ""}(${appId})` })
             ] }),
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Bundle URL:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || `http://localhost:${extensionPort}` })
+            /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Bundle URL:" }),
+              /* @__PURE__ */ jsx16(Text16, { children: tunnelUrl || `http://localhost:${extensionPort}` })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-            previewTunnelUrl && /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Preview:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: previewTunnelUrl })
+          /* @__PURE__ */ jsxs16(Box16, { flexDirection: "column", children: [
+            previewTunnelUrl && /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Tunnel Dev - Preview:" }),
+              /* @__PURE__ */ jsx16(Text16, { children: previewTunnelUrl })
             ] }),
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Preview:" }),
-              /* @__PURE__ */ jsxs15(Text15, { children: [
+            /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Local Dev - Preview:" }),
+              /* @__PURE__ */ jsxs16(Text16, { children: [
                 "http://localhost:",
                 previewPort
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-            tunnelUrl && /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Extension:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl })
+          /* @__PURE__ */ jsxs16(Box16, { flexDirection: "column", children: [
+            tunnelUrl && /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Tunnel Dev - Extension:" }),
+              /* @__PURE__ */ jsx16(Text16, { children: tunnelUrl })
             ] }),
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Extension:" }),
-              /* @__PURE__ */ jsxs15(Text15, { children: [
+            /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+              /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Local Dev - Extension:" }),
+              /* @__PURE__ */ jsxs16(Text16, { children: [
                 "http://localhost:",
                 extensionPort
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx15(Box15, { flexDirection: "column", children: tunnelUrl && /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-            /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Host Dev - Query Param:" }),
-            /* @__PURE__ */ jsxs15(Text15, { children: [
+          /* @__PURE__ */ jsx16(Box16, { flexDirection: "column", children: tunnelUrl && /* @__PURE__ */ jsxs16(Box16, { gap: 2, children: [
+            /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "Host Dev - Query Param:" }),
+            /* @__PURE__ */ jsxs16(Text16, { children: [
               "?_stackable_dev=",
               encodeURIComponent(`${extensionId}:${tunnelUrl}`)
             ] })
@@ -2055,16 +2210,16 @@ var DevDashboard = ({
 };
 
 // src/components/DevApp.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var DevApp = ({ token, userId, orgId, options = {} }) => {
-  const [state, setState] = useState10("setup");
-  const [devContext, setDevContext] = useState10(null);
-  const [resolvedContext, setResolvedContext] = useState10(null);
-  const [tunnelUrl, setTunnelUrl] = useState10(null);
-  const [previewTunnelUrl, setPreviewTunnelUrl] = useState10(null);
-  const [tunnelHandle, setTunnelHandle] = useState10(null);
-  const [previewTunnelHandle, setPreviewTunnelHandle] = useState10(null);
-  const [devServerHandle, setDevServerHandle] = useState10(null);
+  const [state, setState] = useState11("setup");
+  const [devContext, setDevContext] = useState11(null);
+  const [resolvedContext, setResolvedContext] = useState11(null);
+  const [tunnelUrl, setTunnelUrl] = useState11(null);
+  const [previewTunnelUrl, setPreviewTunnelUrl] = useState11(null);
+  const [tunnelHandle, setTunnelHandle] = useState11(null);
+  const [previewTunnelHandle, setPreviewTunnelHandle] = useState11(null);
+  const [devServerHandle, setDevServerHandle] = useState11(null);
   const shuttingDown = useRef(false);
   const useTunnel = options.tunnel !== false;
   useEffect6(() => {
@@ -2149,7 +2304,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
     console.log("[dev] Done");
     process.exit(0);
   };
-  useInput9((input, key) => {
+  useInput10((input, key) => {
     if (input === "c" && key.ctrl) {
       if (state === "running") {
         handleQuit();
@@ -2160,7 +2315,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
   });
   if (state === "setup" && devContext) {
     if (!devContext.appId || !devContext.extensionId) {
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         DevSetup,
         {
           token,
@@ -2172,7 +2327,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
     return null;
   }
   if (state === "running" && devContext && resolvedContext) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       DevDashboard,
       {
         previewTunnelUrl,
@@ -2192,13 +2347,13 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
   if (state === "stopping") {
     return null;
   }
-  return /* @__PURE__ */ jsx16(Box16, { children: /* @__PURE__ */ jsx16(Text16, { children: "Loading..." }) });
+  return /* @__PURE__ */ jsx17(Box17, { children: /* @__PURE__ */ jsx17(Text17, { children: "Loading..." }) });
 };
 
 // src/components/AIScaffold.tsx
-import { Box as Box17, Text as Text17, useApp as useApp2 } from "ink";
+import { Box as Box18, Text as Text18, useApp as useApp2 } from "ink";
 import Spinner4 from "ink-spinner";
-import { useState as useState11, useEffect as useEffect7 } from "react";
+import { useState as useState12, useEffect as useEffect7 } from "react";
 
 // src/lib/aiDocs.ts
 import { existsSync, readFileSync } from "fs";
@@ -2251,12 +2406,12 @@ var downloadAndExtractAiDocs = async (targetDir, version2) => {
 };
 
 // src/components/AIScaffold.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var AIScaffold = ({ version: version2 }) => {
   const { exit } = useApp2();
-  const [state, setState] = useState11("validating");
-  const [files, setFiles] = useState11([]);
-  const [errorMessage, setErrorMessage] = useState11("");
+  const [state, setState] = useState12("validating");
+  const [files, setFiles] = useState12([]);
+  const [errorMessage, setErrorMessage] = useState12("");
   useEffect7(() => {
     const run = async () => {
       const projectDir = process.cwd();
@@ -2280,35 +2435,35 @@ var AIScaffold = ({ version: version2 }) => {
     };
     run();
   }, []);
-  return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx17(Banner, {}),
-    /* @__PURE__ */ jsxs16(StepShell, { title: "AI Editor Config", children: [
-      state === "validating" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
-        /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: /* @__PURE__ */ jsx17(Spinner4, { type: "dots" }) }),
-        /* @__PURE__ */ jsx17(Text17, { children: "Checking project..." })
+  return /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx18(Banner, {}),
+    /* @__PURE__ */ jsxs17(StepShell, { title: "AI Editor Config", children: [
+      state === "validating" && /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: /* @__PURE__ */ jsx18(Spinner4, { type: "dots" }) }),
+        /* @__PURE__ */ jsx18(Text18, { children: "Checking project..." })
       ] }),
-      state === "downloading" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
-        /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: /* @__PURE__ */ jsx17(Spinner4, { type: "dots" }) }),
-        /* @__PURE__ */ jsxs16(Text17, { children: [
+      state === "downloading" && /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: /* @__PURE__ */ jsx18(Spinner4, { type: "dots" }) }),
+        /* @__PURE__ */ jsxs17(Text18, { children: [
           "Downloading AI editor configs (",
           version2,
           ")..."
         ] })
       ] }),
-      state === "done" && /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
-          /* @__PURE__ */ jsx17(Text17, { color: "green", bold: true, children: "\u2714" }),
-          /* @__PURE__ */ jsxs16(Text17, { bold: true, children: [
+      state === "done" && /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+          /* @__PURE__ */ jsx18(Text18, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsxs17(Text18, { bold: true, children: [
             "AI editor configs installed (",
             files.length,
             " files)"
           ] })
         ] }),
-        /* @__PURE__ */ jsx17(Box17, { flexDirection: "column", marginLeft: 2, children: files.map((f) => /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: f }, f)) })
+        /* @__PURE__ */ jsx18(Box18, { flexDirection: "column", marginLeft: 2, children: files.map((f) => /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: f }, f)) })
       ] }),
-      state === "error" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
-        /* @__PURE__ */ jsx17(Text17, { color: "red", children: "\u2716" }),
-        /* @__PURE__ */ jsx17(Text17, { children: errorMessage })
+      state === "error" && /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx18(Text18, { children: errorMessage })
       ] })
     ] })
   ] });
@@ -2316,10 +2471,10 @@ var AIScaffold = ({ version: version2 }) => {
 
 // src/components/AuthLogin.tsx
 import { createServer } from "http";
-import { Box as Box18, Text as Text18, useApp as useApp3 } from "ink";
+import { Box as Box19, Text as Text19, useApp as useApp3 } from "ink";
 import Spinner5 from "ink-spinner";
 import open from "open";
-import { useState as useState12, useEffect as useEffect8 } from "react";
+import { useState as useState13, useEffect as useEffect8 } from "react";
 
 // src/lib/auth.ts
 import { readFile as readFile3, writeFile as writeFile4, mkdir as mkdir2, unlink } from "fs/promises";
@@ -2372,7 +2527,7 @@ var getToken = async () => {
 };
 
 // src/components/AuthLogin.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 var LOGIN_TIMEOUT_MS = 5 * 60 * 1e3;
 var callbackPage = (heading, sub, redirectUrl) => `<!DOCTYPE html>
 <html><head><meta charset="utf-8"><title>Stackable CLI</title>
@@ -2383,11 +2538,11 @@ ${redirectUrl ? `<script>(function(){var s=3,el=document.getElementById('h');fun
 </body></html>`;
 var AuthLogin = ({ dashboardUrl }) => {
   const { exit } = useApp3();
-  const [state, setState] = useState12("waiting");
-  const [loginUrl, setLoginUrl] = useState12("");
-  const [userIdLabel, setUserIdLabel] = useState12("");
-  const [orgIdLabel, setOrgIdLabel] = useState12("");
-  const [errorMessage, setErrorMessage] = useState12("");
+  const [state, setState] = useState13("waiting");
+  const [loginUrl, setLoginUrl] = useState13("");
+  const [userIdLabel, setUserIdLabel] = useState13("");
+  const [orgIdLabel, setOrgIdLabel] = useState13("");
+  const [errorMessage, setErrorMessage] = useState13("");
   useEffect8(() => {
     let server;
     let timeout;
@@ -2463,38 +2618,38 @@ var AuthLogin = ({ dashboardUrl }) => {
       server?.close();
     };
   }, []);
-  return /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx18(Banner, {}),
-    /* @__PURE__ */ jsxs17(StepShell, { title: "Authenticate with Stackable", children: [
-      state === "waiting" && /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
-          /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: /* @__PURE__ */ jsx18(Spinner5, { type: "dots" }) }),
-          /* @__PURE__ */ jsx18(Text18, { children: "Waiting for browser authentication..." })
+  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx19(Banner, {}),
+    /* @__PURE__ */ jsxs18(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "waiting" && /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+          /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: /* @__PURE__ */ jsx19(Spinner5, { type: "dots" }) }),
+          /* @__PURE__ */ jsx19(Text19, { children: "Waiting for browser authentication..." })
         ] }),
-        loginUrl && /* @__PURE__ */ jsxs17(Text18, { dimColor: true, children: [
+        loginUrl && /* @__PURE__ */ jsxs18(Text19, { dimColor: true, children: [
           "  ",
           loginUrl
         ] })
       ] }),
-      state === "success" && /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsxs17(Box18, { gap: 2, children: [
-            /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "User:" }),
-            /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: userIdLabel })
+      state === "success" && /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs18(Box19, { gap: 2, children: [
+            /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: userIdLabel })
           ] }),
-          /* @__PURE__ */ jsxs17(Box18, { gap: 2, children: [
-            /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Org: " }),
-            /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: orgIdLabel })
+          /* @__PURE__ */ jsxs18(Box19, { gap: 2, children: [
+            /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: orgIdLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
-          /* @__PURE__ */ jsx18(Text18, { color: "green", bold: true, children: "\u2714" }),
-          /* @__PURE__ */ jsx18(Text18, { bold: true, children: "Authenticated" })
+        /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+          /* @__PURE__ */ jsx19(Text19, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx19(Text19, { bold: true, children: "Authenticated" })
         ] })
       ] }),
-      state === "error" && /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
-        /* @__PURE__ */ jsx18(Text18, { color: "red", children: "\u2716" }),
-        /* @__PURE__ */ jsx18(Text18, { children: errorMessage })
+      state === "error" && /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+        /* @__PURE__ */ jsx19(Text19, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx19(Text19, { children: errorMessage })
       ] })
     ] })
   ] });
@@ -2502,70 +2657,70 @@ var AuthLogin = ({ dashboardUrl }) => {
 
 // src/components/AuthLogout.tsx
 import { useEffect as useEffect9 } from "react";
-import { Box as Box19, Text as Text19, useApp as useApp4 } from "ink";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Box as Box20, Text as Text20, useApp as useApp4 } from "ink";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var AuthLogout = () => {
   const { exit } = useApp4();
   useEffect9(() => {
     exit();
   }, [exit]);
-  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx19(Banner, {}),
-    /* @__PURE__ */ jsx19(StepShell, { title: "Authenticate with Stackable", children: /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
-      /* @__PURE__ */ jsx19(Text19, { color: "green", bold: true, children: "\u2714" }),
-      /* @__PURE__ */ jsx19(Text19, { bold: true, children: "Logged out" })
+  return /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx20(Banner, {}),
+    /* @__PURE__ */ jsx20(StepShell, { title: "Authenticate with Stackable", children: /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+      /* @__PURE__ */ jsx20(Text20, { color: "green", bold: true, children: "\u2714" }),
+      /* @__PURE__ */ jsx20(Text20, { bold: true, children: "Logged out" })
     ] }) })
   ] });
 };
 
 // src/components/AuthStatus.tsx
 import { useEffect as useEffect10 } from "react";
-import { useApp as useApp5, Box as Box20, Text as Text20 } from "ink";
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useApp as useApp5, Box as Box21, Text as Text21 } from "ink";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var AuthStatus = ({ state, userId, orgId, expiry }) => {
   const { exit } = useApp5();
   useEffect10(() => {
     exit();
   }, [exit]);
-  return /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx20(Banner, {}),
-    /* @__PURE__ */ jsxs19(StepShell, { title: "Authenticate with Stackable", children: [
-      state === "authenticated" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
-            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "User:" }),
-            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: userId })
+  return /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx21(Banner, {}),
+    /* @__PURE__ */ jsxs20(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "authenticated" && /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs20(Box21, { gap: 2, children: [
+            /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx21(Text21, { color: "cyan", children: userId })
           ] }),
-          /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
-            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Org: " }),
-            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: orgId })
+          /* @__PURE__ */ jsxs20(Box21, { gap: 2, children: [
+            /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx21(Text21, { color: "cyan", children: orgId })
           ] }),
-          expiry && /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
-            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Exp: " }),
-            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: expiry.toLocaleDateString() })
+          expiry && /* @__PURE__ */ jsxs20(Box21, { gap: 2, children: [
+            /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "Exp: " }),
+            /* @__PURE__ */ jsx21(Text21, { color: "cyan", children: expiry.toLocaleDateString() })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
-          /* @__PURE__ */ jsx20(Text20, { color: "green", bold: true, children: "\u2714" }),
-          /* @__PURE__ */ jsx20(Text20, { bold: true, children: "Authenticated" })
+        /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
+          /* @__PURE__ */ jsx21(Text21, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx21(Text21, { bold: true, children: "Authenticated" })
         ] })
       ] }),
-      state === "expired" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
-          /* @__PURE__ */ jsx20(Text20, { color: "red", children: "\u2716" }),
-          /* @__PURE__ */ jsxs19(Text20, { children: [
+      state === "expired" && /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
+          /* @__PURE__ */ jsx21(Text21, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsxs20(Text21, { children: [
             "Session expired",
             expiry ? ` (${expiry.toLocaleDateString()})` : ""
           ] })
         ] }),
-        /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Run `stackable-app-extension auth login` to re-authenticate." })
+        /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "Run `stackable-app-extension auth login` to re-authenticate." })
       ] }),
-      state === "not-logged-in" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
-          /* @__PURE__ */ jsx20(Text20, { color: "red", children: "\u2716" }),
-          /* @__PURE__ */ jsx20(Text20, { children: "Not logged in" })
+      state === "not-logged-in" && /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
+          /* @__PURE__ */ jsx21(Text21, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsx21(Text21, { children: "Not logged in" })
         ] }),
-        /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Run `stackable-app-extension auth login`" })
+        /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "Run `stackable-app-extension auth login`" })
       ] })
     ] })
   ] });
@@ -2619,7 +2774,7 @@ var checkForUpdate = (currentVersion) => {
 };
 
 // src/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
 checkForUpdate(version);
@@ -2632,20 +2787,20 @@ var ensureToken = async () => {
     const message = err instanceof Error ? err.message : String(err);
     const isExpired = message.toLowerCase().includes("expired");
     render(
-      /* @__PURE__ */ jsx21(AuthStatus, { state: isExpired ? "expired" : "not-logged-in" })
+      /* @__PURE__ */ jsx22(AuthStatus, { state: isExpired ? "expired" : "not-logged-in" })
     );
     return null;
   }
 };
 program.name("stackable-app-extension").description("Stackable Labs - 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: 6543)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action(async (name, options) => {
+program.command("create" /* CREATE */).description("Create a new Extension project").argument("[name]", "Extension project name").option("--template <flavor>", "Template flavor: minimal, starter, kitchen-sink").option("--extension-port <port>", "Extension dev server port (default: 6543)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action(async (name, options) => {
   const auth2 = await ensureToken();
   if (!auth2) {
     return;
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       App,
       {
         command: "create" /* CREATE */,
@@ -2665,7 +2820,7 @@ program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       App,
       {
         command: "scaffold" /* SCAFFOLD */,
@@ -2684,7 +2839,7 @@ program.command("update" /* UPDATE */).description("Update an existing Extension
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       App,
       {
         command: "update" /* UPDATE */,
@@ -2704,7 +2859,7 @@ program.command("dev" /* DEV */).description("Start dev servers with a public tu
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       DevApp,
       {
         options,
@@ -2719,17 +2874,17 @@ program.command("dev" /* DEV */).description("Start dev servers with a public tu
 var DASHBOARD_URL = process.env.ADMIN_DASHBOARD_URL ?? "https://admin.stackablelabs.io";
 var auth = program.command("auth").description("Manage CLI authentication");
 auth.command("login").description("Authenticate with Stackable via browser").action(async () => {
-  render(/* @__PURE__ */ jsx21(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
+  render(/* @__PURE__ */ jsx22(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
 });
 auth.command("logout").description("Clear stored CLI credentials").action(async () => {
   await clearAuthState();
-  render(/* @__PURE__ */ jsx21(AuthLogout, {}));
+  render(/* @__PURE__ */ jsx22(AuthLogout, {}));
 });
 auth.command("status").description("Show current authentication status").action(async () => {
   const state = await readAuthState();
   if (!state) {
     render(
-      /* @__PURE__ */ jsx21(AuthStatus, { state: "not-logged-in" })
+      /* @__PURE__ */ jsx22(AuthStatus, { state: "not-logged-in" })
     );
     return;
   }
@@ -2737,11 +2892,11 @@ auth.command("status").description("Show current authentication status").action(
   const payload = JSON.parse(Buffer.from(payloadB64, "base64url").toString());
   const expiry = payload.exp ? new Date(payload.exp * 1e3) : null;
   if (expiry && Date.now() >= expiry.getTime()) {
-    render(/* @__PURE__ */ jsx21(AuthStatus, { state: "expired", expiry }));
+    render(/* @__PURE__ */ jsx22(AuthStatus, { state: "expired", expiry }));
     return;
   }
   render(
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       AuthStatus,
       {
         state: "authenticated",
@@ -2754,6 +2909,6 @@ auth.command("status").description("Show current authentication status").action(
 });
 var ai = program.command("ai").description("AI editor configuration tools");
 ai.command("scaffold").description("Download AI editor config files into your Extension project").option("--version <version>", 'AI docs version (semver or "latest")', "latest").action(async (options) => {
-  render(/* @__PURE__ */ jsx21(AIScaffold, { version: options.version }));
+  render(/* @__PURE__ */ jsx22(AIScaffold, { version: options.version }));
 });
 program.parse(process.argv.filter((arg) => arg !== "--"));