@contentful/experience-design-system-cli 2.36.2-dev-build-d983d04c.0 → 2.36.2-dev-build-7b317500.0

package/dist/app.js

@@ -1,5 +1,5 @@
 // packages/experience-design-system-cli/app.tsx
-import { useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState11 } from "react";
 
 // packages/experience-design-system-cli/src/tui/home/home.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
@@ -230,6 +230,202 @@ function ImportScreen({ exitCode, onDone }) {
   ] });
 }
 
+// packages/experience-design-system-cli/src/tui/import/steps/01-welcome/screen.tsx
+import { useState as useState3 } from "react";
+import { Box as Box3, Text as Text3 } from "ink";
+import TextInput from "ink-text-input";
+
+// packages/experience-design-system-cli/src/tui/import/steps/01-welcome/controls.ts
+import { useInput as useInput3 } from "ink";
+
+// packages/experience-design-system-cli/src/tui/import/steps/01-welcome/logic.ts
+function shouldQuit(value, input, key) {
+  if (key.escape) return true;
+  return value === "" && input === "q" && !key.ctrl && !key.meta;
+}
+function toProjectPath(value) {
+  const projectPath = value.trim();
+  return projectPath === "" ? null : projectPath;
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/01-welcome/controls.ts
+var WELCOME_CONTROLS = [
+  { keys: "Enter", label: "Continue" },
+  { keys: "Esc/q", label: "Back to menu" }
+];
+function useWelcomeControls(projectPath, onQuit) {
+  useInput3((input, key) => {
+    if (shouldQuit(projectPath, input, key)) onQuit();
+  });
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/01-welcome/screen.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var RULE = "\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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500";
+var OVERVIEW = [
+  { label: "Step 1", description: "Extract components from your codebase" },
+  { label: "Step 2", description: "Review what was extracted" },
+  { label: "Step 3", description: "Generate CDF definitions with Claude" },
+  { label: "Step 4", description: "Review generated definitions" },
+  { label: "Step 5", description: "Push to Contentful" }
+];
+function WelcomeScreen({ onContinue, onQuit, initialPath = "" }) {
+  const [projectPath, setProjectPath] = useState3(initialPath);
+  useWelcomeControls(projectPath, onQuit);
+  const submit = (value) => {
+    const path = toProjectPath(value);
+    if (path) onContinue(path);
+  };
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx3(Text3, { bold: true, color: PALETTE.success, children: "\u{1F44B} Hey! Let's import your design system into Contentful." }),
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "I'll walk you through 5 steps to get your components into Contentful ExO." }),
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: RULE }),
+      OVERVIEW.map((item) => /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { bold: true, children: item.label }),
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: item.description })
+      ] }, item.label)),
+      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: RULE })
+    ] }),
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx3(Text3, { children: "Where is your component library?" }),
+      /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { color: PALETTE.accent, children: "?" }),
+        /* @__PURE__ */ jsx3(Text3, { children: "Project path:" }),
+        /* @__PURE__ */ jsx3(TextInput, { value: projectPath, onChange: setProjectPath, onSubmit: submit })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(Box3, { marginTop: 1, gap: 3, children: WELCOME_CONTROLS.map((control) => /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "[",
+      control.keys,
+      "] ",
+      control.label
+    ] }, control.keys)) })
+  ] });
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/screen.tsx
+import { useState as useState4 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
+import TextInput2 from "ink-text-input";
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/controls.ts
+import { useInput as useInput4 } from "ink";
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/logic.ts
+function isPlainKeyOnEmptyField(value, input, key, expected) {
+  return value === "" && input === expected && !key.ctrl && !key.meta;
+}
+function shouldGoBack(value, input, key) {
+  return key.escape || isPlainKeyOnEmptyField(value, input, key, "q");
+}
+function shouldSkip(value, input, key) {
+  return isPlainKeyOnEmptyField(value, input, key, "s");
+}
+function toTokenPath(value) {
+  const tokenPath = value.trim();
+  return tokenPath === "" ? null : tokenPath;
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/controls.ts
+var TOKEN_INPUT_CONTROLS = [
+  { keys: "Enter", label: "Continue (skips if empty)" },
+  { keys: "s", label: "Skip" },
+  { keys: "Esc/q", label: "Back" }
+];
+function useTokenInputControls(tokenPath, onSkip, onBack) {
+  useInput4((input, key) => {
+    if (shouldGoBack(tokenPath, input, key)) onBack();
+    else if (shouldSkip(tokenPath, input, key)) onSkip();
+  });
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/validate-path.ts
+import { statSync } from "node:fs";
+import { homedir } from "node:os";
+import { resolve } from "node:path";
+function stripQuotes(value) {
+  const quoted = value.startsWith('"') && value.endsWith('"') || value.startsWith("'") && value.endsWith("'");
+  return value.length >= 2 && quoted ? value.slice(1, -1) : value;
+}
+function expandHome(value) {
+  return value === "~" || value.startsWith("~/") || value.startsWith("~\\") ? homedir() + value.slice(1) : value;
+}
+function validateTokenPath(rawPath) {
+  const path = resolve(expandHome(stripQuotes(rawPath.trim())));
+  let stats;
+  try {
+    stats = statSync(path);
+  } catch {
+    return { ok: false, error: `Path not found: ${path}`, resolvedPath: path };
+  }
+  if (stats.isDirectory()) {
+    return {
+      ok: false,
+      error: "That's a directory \u2014 provide a path to a token file (e.g. tokens.json), not a folder.",
+      resolvedPath: path
+    };
+  }
+  if (!stats.isFile()) {
+    return { ok: false, error: `Not a regular file: ${path}`, resolvedPath: path };
+  }
+  return { ok: true, path };
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/screen.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TokenInputScreen({
+  onConfirm,
+  onSkip,
+  onBack,
+  initialPath = ""
+}) {
+  const [tokenPath, setTokenPath] = useState4(initialPath);
+  const [failure, setFailure] = useState4(null);
+  useTokenInputControls(tokenPath, onSkip, onBack);
+  const change = (value) => {
+    setTokenPath(value);
+    setFailure(null);
+  };
+  const submit = (value) => {
+    const rawPath = toTokenPath(value);
+    if (!rawPath) {
+      onSkip();
+      return;
+    }
+    const check = validateTokenPath(rawPath);
+    if (check.ok) onConfirm(check.path);
+    else setFailure({ error: check.error, resolvedPath: check.resolvedPath });
+  };
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Design tokens" }),
+    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Point me to your raw token file (e.g. ~/design-tokens/tokens.json). You can use ~, relative, or absolute paths. Claude will map it to DTCG format." }),
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs4(Box4, { gap: 1, children: [
+        /* @__PURE__ */ jsx4(Text4, { color: PALETTE.accent, children: "?" }),
+        /* @__PURE__ */ jsx4(Text4, { children: "Token path:" }),
+        /* @__PURE__ */ jsx4(TextInput2, { value: tokenPath, onChange: change, onSubmit: submit })
+      ] }),
+      failure && /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs4(Text4, { color: PALETTE.error, children: [
+          "\u2717 ",
+          failure.error
+        ] }),
+        /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+          " Resolved to: ",
+          failure.resolvedPath
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(Box4, { marginTop: 1, gap: 3, children: TOKEN_INPUT_CONTROLS.map((control) => /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+      "[",
+      control.keys,
+      "] ",
+      control.label
+    ] }, control.keys)) })
+  ] });
+}
+
 // packages/experience-design-system-cli/src/tui/import/spawn-v1-import.ts
 import { spawn } from "node:child_process";
 
@@ -257,6 +453,9 @@ function buildArgs(options) {
   if (options.project) {
     args.push("--project", options.project);
   }
+  if (options.tokens) {
+    args.push("--tokens", options.tokens);
+  }
   return args;
 }
 async function spawnV1Import(options = {}) {
@@ -280,7 +479,7 @@ function getTerminalHandle() {
   return process.stdin._handle;
 }
 async function stopReadingTerminal() {
-  await new Promise((resolve) => setImmediate(resolve));
+  await new Promise((resolve2) => setImmediate(resolve2));
   const handle = getTerminalHandle();
   if (!handle?.readStop) return;
   handle.reading = false;
@@ -294,43 +493,273 @@ function startReadingTerminal() {
 }
 
 // packages/experience-design-system-cli/src/tui/help/PageContainer.tsx
-import { Box as Box3, Text as Text3, useInput as useInput3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { Box as Box5, Text as Text5, useInput as useInput5 } from "ink";
+
+// packages/experience-design-system-cli/src/tui/debug-store.ts
+import { mkdir as mkdir2, writeFile as writeFile2 } from "node:fs/promises";
+import { existsSync as existsSync3, readdirSync } from "node:fs";
+import { join as join5 } from "node:path";
+
+// packages/experience-design-system-types/dist/src/config/index.js
+import { randomBytes } from "node:crypto";
+import { mkdir, readFile, rename, writeFile } from "node:fs/promises";
+import { homedir as homedir2 } from "node:os";
+import { dirname as dirname2, join as join4 } from "node:path";
+function configRoot() {
+  return process.env["EDS_HOME"] || join4(homedir2(), ".contentful", "experience-design-system-cli");
+}
+var configFilePath = () => join4(configRoot(), "config.json");
+var debugSessionsDir = () => join4(configRoot(), "debug", "sessions");
+async function readSettings() {
+  try {
+    return JSON.parse(await readFile(configFilePath(), "utf8"));
+  } catch {
+    return {};
+  }
+}
+async function writeSettings(settings) {
+  const path = configFilePath();
+  await mkdir(dirname2(path), { recursive: true });
+  const tmp = `${path}.${process.pid}.${randomBytes(4).toString("hex")}.tmp`;
+  await writeFile(tmp, `${JSON.stringify(settings, null, 2)}
+`, { mode: 384 });
+  await rename(tmp, path);
+}
+async function updateSettings(patch) {
+  await writeSettings({ ...await readSettings(), ...patch });
+}
+
+// packages/experience-design-system-cli/src/tui/settings/debug-mode/debug-mode-store.ts
+var DEFAULT_DEBUG_MODE_SETTING = {
+  enabled: true
+};
+async function readDebugModeSetting() {
+  const { debugMode } = await readSettings();
+  return { ...DEFAULT_DEBUG_MODE_SETTING, ...debugMode };
+}
+async function writeDebugModeSetting(setting) {
+  await updateSettings({ debugMode: setting });
+}
+
+// packages/experience-design-system-cli/src/tui/debug-store.ts
+var pendingRun;
+function generateRunId() {
+  const now = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+}
+function datePrefix(now = /* @__PURE__ */ new Date()) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(now.getMonth() + 1)}-${pad(now.getDate())}-${now.getFullYear()}`;
+}
+function slugify(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function generateSessionId() {
+  const today = datePrefix();
+  const root = debugSessionsDir();
+  const existing = existsSync3(root) ? readdirSync(root) : [];
+  const seqPattern = new RegExp(`^${today}-session-(\\d+)$`);
+  const maxSeq = existing.reduce((max, entry) => {
+    const match = seqPattern.exec(entry);
+    return match ? Math.max(max, Number(match[1])) : max;
+  }, 0);
+  return `${today}-session-${maxSeq + 1}`;
+}
+var SESSION_ID = generateSessionId();
+function sessionDebugDir() {
+  return join5(debugSessionsDir(), SESSION_ID);
+}
+function currentDebugSessionDir() {
+  return sessionDebugDir();
+}
+void isDebugModeEnabled().then((enabled) => {
+  if (!enabled) return void 0;
+  return mkdir2(sessionDebugDir(), { recursive: true });
+});
+async function isDebugModeEnabled() {
+  try {
+    return (await readDebugModeSetting()).enabled;
+  } catch {
+    return true;
+  }
+}
+function redact(value) {
+  const clone = { ...value };
+  if ("cma_token" in clone) {
+    const raw = clone.cma_token;
+    clone.cma_token = typeof raw === "string" && raw.length > 0 ? `[present, ${raw.length} chars]` : "[not set]";
+  }
+  return clone;
+}
+function startDebugRun({
+  flow,
+  step,
+  menuOption,
+  inputs
+}) {
+  const runId = generateRunId();
+  const startedAt = Date.now();
+  const redactedInputs = redact(inputs);
+  isDebugModeEnabled().then((enabled) => {
+    if (!enabled) return;
+    pendingRun = { flow, step, runId, menuOption, inputs: redactedInputs, startedAt };
+  });
+}
+async function finishDebugRun({
+  outputs,
+  status,
+  exitMethod
+}) {
+  const run = pendingRun;
+  if (!run) return;
+  pendingRun = void 0;
+  const durationMs = Date.now() - run.startedAt;
+  const content = renderMarkdown(run, { outputs: redact(outputs), status, exitMethod, durationMs });
+  const flowSegments = run.flow.split("/");
+  const dir = join5(sessionDebugDir(), ...flowSegments);
+  await mkdir2(dir, { recursive: true });
+  const filename = nextAttemptFilename(dir, run.menuOption);
+  await writeFile2(join5(dir, filename), content, { mode: 384 });
+}
+function nextAttemptFilename(dir, menuOption) {
+  const today = datePrefix();
+  const optionSlug = slugify(menuOption);
+  const existing = existsSync3(dir) ? readdirSync(dir) : [];
+  const attemptPattern = new RegExp(`^${today}-${optionSlug}-attempt-(\\d+)\\.md$`);
+  const maxAttempt = existing.reduce((max, entry) => {
+    const match = attemptPattern.exec(entry);
+    return match ? Math.max(max, Number(match[1])) : max;
+  }, 0);
+  return `${today}-${optionSlug}-attempt-${maxAttempt + 1}.md`;
+}
+function renderMarkdown(run, finish) {
+  const stepMatch = /^(\d+)-(.+)$/.exec(run.step);
+  const stepLabel = stepMatch ? `${stepMatch[1]} - ${stepMatch[2]}` : run.step;
+  const flowSlug = run.flow.split("/").join("-");
+  return `# Debug Log
+
+- Run ID: ${run.runId}
+- Flow: ${flowSlug}
+- Step: ${stepLabel}
+- Menu option: ${run.menuOption}
+- Date: ${(/* @__PURE__ */ new Date()).toISOString()}
+- CLI version: ${readPackageVersion()}
+- Platform: ${process.platform} / Node ${process.version}
+- Duration on screen: ${finish.durationMs}ms
+- Status: ${finish.status}
+- Exit method: ${finish.exitMethod}
+
+## Inputs
+\`\`\`json
+${JSON.stringify(run.inputs, null, 2)}
+\`\`\`
+
+## Outputs
+\`\`\`json
+${JSON.stringify(finish.outputs, null, 2)}
+\`\`\`
+`;
+}
+function handleCrash() {
+  return finishDebugRun({ outputs: {}, status: "error", exitMethod: "crashed" });
+}
+process.once("uncaughtException", (err) => {
+  void handleCrash().finally(() => {
+    throw err;
+  });
+});
+process.once("unhandledRejection", (reason) => {
+  void handleCrash().finally(() => {
+    throw reason;
+  });
+});
+process.once("SIGINT", () => {
+  void handleCrash().finally(() => {
+    process.exit(130);
+  });
+});
+
+// packages/experience-design-system-cli/src/tui/help/help-info.ts
+async function readHelpInfo() {
+  const debugMode = await readDebugModeSetting();
+  return {
+    storage: [
+      { label: "Config folder", value: configRoot() },
+      { label: "Settings file", value: configFilePath() },
+      { label: "Debug logs", value: debugSessionsDir() }
+    ],
+    troubleshooting: [
+      { label: "CLI version", value: readPackageVersion() },
+      { label: "Node", value: process.version },
+      { label: "Platform", value: `${process.platform} ${process.arch}` },
+      { label: "Debug Mode", value: debugMode.enabled ? "on" : "off" },
+      {
+        label: "This session",
+        value: debugMode.enabled ? currentDebugSessionDir() : "no logs written while Debug Mode is off"
+      }
+    ]
+  };
+}
+
+// packages/experience-design-system-cli/src/tui/help/PageContainer.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Section({ title, rows }) {
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(Text5, { bold: true, color: PALETTE.accent, children: title }),
+    rows.map((row) => /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
+      /* @__PURE__ */ jsx5(Box5, { width: 14, flexShrink: 0, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: row.label }) }),
+      /* @__PURE__ */ jsx5(Text5, { children: row.value })
+    ] }, row.label))
+  ] });
+}
 function HelpScreen({ onDone }) {
-  useInput3((input, key) => {
+  const [info, setInfo] = useState5();
+  useEffect3(() => {
+    startDebugRun({ flow: "help", step: "01-help", menuOption: "Help", inputs: {} });
+    void readHelpInfo().then(setInfo);
+  }, []);
+  const leave = (exitMethod) => {
+    void finishDebugRun({ outputs: {}, status: "success", exitMethod });
+    onDone();
+  };
+  useInput5((input, key) => {
     if (key.return) {
-      onDone();
+      leave("saved");
       return;
     }
     if (key.escape || input === "q") {
-      onDone();
+      leave("discarded");
       return;
     }
   });
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx3(Text3, { bold: true, children: "Help" }),
-    /* @__PURE__ */ jsx3(Text3, { children: " " }),
-    /* @__PURE__ */ jsx3(Text3, { children: "This is a placeholder screen for v2 help content." }),
-    /* @__PURE__ */ jsx3(Text3, { children: " " }),
-    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "[Enter] Complete [Esc/q] Exit \u2014 both return to Start" })
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [
+    /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Help" }),
+    info ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx5(Section, { title: "Where things are stored", rows: info.storage }),
+      /* @__PURE__ */ jsx5(Section, { title: "Troubleshooting", rows: info.troubleshooting }),
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Hit a problem? Turn on Debug Mode in Settings, reproduce it, then share the session folder above. The CMA token is redacted from those logs." })
+    ] }) : /* @__PURE__ */ jsx5(Text5, { color: PALETTE.accent, children: "Loading..." }),
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "[Enter] Complete [Esc/q] Exit \u2014 both return to Start" })
   ] });
 }
 
 // packages/experience-design-system-cli/src/tui/settings/PageContainer.tsx
-import { useState as useState3 } from "react";
-import { Box as Box4, Text as Text4, useInput as useInput4 } from "ink";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput6 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SettingsScreen({
   onNavigate,
   onBack
 }) {
-  const [focusIdx, setFocusIdx] = useState3(0);
+  const [focusIdx, setFocusIdx] = useState6(0);
   const items = [
     { label: "Configuration", screen: "settings-configuration" },
     { label: "Opt-in Analytics", screen: "settings-opt-in-analytics" },
     { label: "Debug Mode", screen: "settings-debug-mode" }
   ];
-  useInput4((input, key) => {
+  useInput6((input, key) => {
     if (key.upArrow) {
       setFocusIdx((i) => (i - 1 + items.length) % items.length);
       return;
@@ -350,40 +779,26 @@ function SettingsScreen({
       onBack();
     }
   });
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Settings" }),
-    /* @__PURE__ */ jsx4(Text4, { children: " " }),
-    items.map((item, i) => /* @__PURE__ */ jsxs4(Text4, { color: i === focusIdx ? "cyan" : void 0, children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Settings" }),
+    /* @__PURE__ */ jsx6(Text6, { children: " " }),
+    items.map((item, i) => /* @__PURE__ */ jsxs6(Text6, { color: i === focusIdx ? "cyan" : void 0, children: [
       i === focusIdx ? "> " : "  ",
       item.label
     ] }, item.label)),
-    /* @__PURE__ */ jsx4(Text4, { children: " " }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "[\u2191/\u2193] Navigate [Enter] Select [Esc/q] Back to Start" })
+    /* @__PURE__ */ jsx6(Text6, { children: " " }),
+    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "[\u2191/\u2193] Navigate [Enter] Select [Esc/q] Back to Start" })
   ] });
 }
 
 // packages/experience-design-system-cli/src/tui/settings/contentful-configuration/ContentfulConfigScreen.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
-import { Box as Box5, Text as Text5, useInput as useInput5 } from "ink";
+import { useEffect as useEffect4, useState as useState7 } from "react";
+import { Box as Box7, Text as Text7, useInput as useInput7 } from "ink";
+import TextInput3 from "ink-text-input";
 
 // packages/experience-design-system-cli/src/tui/settings/utils/v1-store.ts
-import { readFile, writeFile, mkdir } from "node:fs/promises";
-import { join as join4 } from "node:path";
-import { homedir } from "node:os";
-var V1_STORE_PATH = join4(homedir(), ".config", "experiences", "credentials.json");
-async function readV1Store() {
-  try {
-    const raw = await readFile(V1_STORE_PATH, "utf8");
-    return JSON.parse(raw);
-  } catch {
-    return {};
-  }
-}
-async function writeV1Store(data) {
-  await mkdir(join4(homedir(), ".config", "experiences"), { recursive: true });
-  await writeFile(V1_STORE_PATH, `${JSON.stringify(data, null, 2)}
-`, { mode: 384 });
-}
+var readV1Store = readSettings;
+var writeV1Store = writeSettings;
 
 // packages/experience-design-system-cli/src/tui/settings/contentful-configuration/config-store.ts
 async function readCredentials() {
@@ -392,7 +807,9 @@ async function readCredentials() {
     spaceId: store.spaceId || "",
     environmentId: store.environmentId || "",
     cmaToken: store.cmaToken || "",
-    host: store.host || ""
+    host: store.host || "",
+    defaultComponentDir: store.defaultComponentDir || "",
+    defaultTokenFile: store.defaultTokenFile || ""
   };
 }
 async function writeCredentials(config) {
@@ -408,23 +825,51 @@ async function writeCredentials(config) {
 }
 
 // packages/experience-design-system-cli/src/tui/settings/contentful-configuration/ContentfulConfigScreen.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var FIELD_ORDER = ["spaceId", "environmentId", "cmaToken", "host"];
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var FIELD_ORDER = [
+  "spaceId",
+  "environmentId",
+  "cmaToken",
+  "host",
+  "defaultComponentDir",
+  "defaultTokenFile"
+];
+function debugFields(config) {
+  return {
+    space_id: config?.spaceId ?? "",
+    environment_id: config?.environmentId ?? "",
+    cma_token: config?.cmaToken ?? "",
+    host: config?.host ?? "",
+    default_component_dir: config?.defaultComponentDir ?? "",
+    default_token_file: config?.defaultTokenFile ?? ""
+  };
+}
 var FIELD_LABELS = {
   spaceId: "Space ID",
   environmentId: "Environment ID",
   cmaToken: "CMA Token",
-  host: "API Host (optional)"
+  host: "API Host (optional)",
+  defaultComponentDir: "Default component directory (optional)",
+  defaultTokenFile: "Default token file (optional)"
 };
 function ConfigurationScreen({ onDone }) {
-  const [stage, setStage] = useState4("loading");
-  const [config, setConfig] = useState4(null);
-  const [activeField, setActiveField] = useState4("spaceId");
-  const [message, setMessage] = useState4(null);
-  useEffect3(() => {
+  const [stage, setStage] = useState7("loading");
+  const [config, setConfig] = useState7(null);
+  const [activeField, setActiveField] = useState7("spaceId");
+  const [notice, setNotice] = useState7(null);
+  const [lastSaved, setLastSaved] = useState7(null);
+  const [editing, setEditing] = useState7(false);
+  const [valueBeforeEdit, setValueBeforeEdit] = useState7("");
+  useEffect4(() => {
     readCredentials().then((cfg) => {
       setConfig(cfg);
       setStage("form");
+      startDebugRun({
+        flow: "settings/contentful-configuration",
+        step: "01-configuration",
+        menuOption: "Configuration",
+        inputs: debugFields(cfg)
+      });
     });
   }, []);
   function fieldValue(field) {
@@ -434,29 +879,46 @@ function ConfigurationScreen({ onDone }) {
   function setFieldValue(field, value) {
     if (!config) return;
     setConfig({ ...config, [field]: value });
+    setNotice(null);
   }
   function handleSave() {
     if (!config) return;
     setStage("saving");
-    setMessage(null);
+    setNotice(null);
     writeCredentials(config).then(() => {
-      setStage("saved");
-      setMessage("Configuration saved");
+      setLastSaved(config);
+      setNotice({ kind: "success", text: "Configuration saved" });
+      setStage("form");
     }).catch((err) => {
-      setMessage(err instanceof Error ? err.message : "Failed to save");
+      setNotice({ kind: "error", text: err instanceof Error ? err.message : "Failed to save" });
       setStage("form");
     });
   }
-  useInput5((input, key) => {
+  function quit() {
+    void finishDebugRun(
+      lastSaved ? { outputs: debugFields(lastSaved), status: "success", exitMethod: "saved" } : { outputs: {}, status: "success", exitMethod: "discarded" }
+    );
+    onDone();
+  }
+  useInput7((input, key) => {
     if (stage === "loading" || stage === "saving") return;
-    if (stage === "saved") {
-      if (key.return || key.escape || input === "q") {
-        onDone();
+    if (editing) {
+      if (key.escape) {
+        setFieldValue(activeField, valueBeforeEdit);
+        setEditing(false);
       }
       return;
     }
     if (key.escape || input === "q") {
-      onDone();
+      quit();
+      return;
+    }
+    if (input === "s") {
+      handleSave();
+      return;
+    }
+    if (input === "c") {
+      setFieldValue(activeField, "");
       return;
     }
     if (key.tab || key.downArrow) {
@@ -470,75 +932,57 @@ function ConfigurationScreen({ onDone }) {
       return;
     }
     if (key.return) {
-      const idx = FIELD_ORDER.indexOf(activeField);
-      if (idx < FIELD_ORDER.length - 1) {
-        setActiveField(FIELD_ORDER[idx + 1]);
-      } else {
-        handleSave();
-      }
-      return;
-    }
-    if (key.backspace || key.delete) {
-      const current = fieldValue(activeField);
-      setFieldValue(activeField, current.slice(0, -1));
-      return;
-    }
-    if (input && !key.ctrl && !key.meta) {
-      setFieldValue(activeField, fieldValue(activeField) + input);
+      setValueBeforeEdit(fieldValue(activeField));
+      setEditing(true);
     }
   });
   if (stage === "loading") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-      /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Configuration" }),
-      /* @__PURE__ */ jsx5(Text5, { children: " " }),
-      /* @__PURE__ */ jsx5(Text5, { color: PALETTE.accent, children: "Loading..." })
+    return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+      /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Configuration" }),
+      /* @__PURE__ */ jsx7(Text7, { children: " " }),
+      /* @__PURE__ */ jsx7(Text7, { color: PALETTE.accent, children: "Loading..." })
     ] });
   }
-  if (stage === "saved") {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-      /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Configuration" }),
-      /* @__PURE__ */ jsx5(Text5, { children: " " }),
-      /* @__PURE__ */ jsxs5(Text5, { color: PALETTE.success, children: [
-        "\u2713 ",
-        message
-      ] }),
-      /* @__PURE__ */ jsx5(Text5, { children: " " }),
-      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "[Enter] Back to Settings" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Configuration" }),
-    /* @__PURE__ */ jsx5(Text5, { children: " " }),
-    /* @__PURE__ */ jsx5(Text5, { children: "Contentful API Credentials" }),
-    /* @__PURE__ */ jsx5(Text5, { children: " " }),
-    /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", children: FIELD_ORDER.map((field) => {
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Configuration" }),
+    /* @__PURE__ */ jsx7(Text7, { children: " " }),
+    /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: FIELD_ORDER.map((field) => {
       const isActive = activeField === field;
       const value = fieldValue(field);
       const display = field === "cmaToken" ? "\u2022".repeat(value.length) : value;
-      return /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { color: isActive ? PALETTE.accent : void 0, children: isActive ? "\u276F" : " " }),
-        /* @__PURE__ */ jsxs5(Text5, { bold: isActive, children: [
+      return /* @__PURE__ */ jsxs7(Box7, { gap: 1, children: [
+        /* @__PURE__ */ jsx7(Text7, { color: isActive ? PALETTE.accent : void 0, children: isActive ? "\u276F" : " " }),
+        /* @__PURE__ */ jsxs7(Text7, { bold: isActive, children: [
           FIELD_LABELS[field],
           ":"
         ] }),
-        /* @__PURE__ */ jsx5(Text5, { children: display || /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "(empty)" }) })
+        isActive && editing ? /* @__PURE__ */ jsx7(
+          TextInput3,
+          {
+            value,
+            onChange: (next) => setFieldValue(field, next),
+            onSubmit: () => setEditing(false),
+            mask: field === "cmaToken" ? "\u2022" : void 0
+          }
+        ) : /* @__PURE__ */ jsx7(Text7, { children: display || /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "(empty)" }) })
       ] }, field);
     }) }),
-    message && /* @__PURE__ */ jsxs5(Fragment, { children: [
-      /* @__PURE__ */ jsx5(Text5, { children: " " }),
-      /* @__PURE__ */ jsxs5(Text5, { color: PALETTE.error, children: [
-        "\u2717 ",
-        message
+    notice && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx7(Text7, { children: " " }),
+      /* @__PURE__ */ jsxs7(Text7, { color: notice.kind === "success" ? PALETTE.success : PALETTE.error, children: [
+        notice.kind === "success" ? "\u2713" : "\u2717",
+        " ",
+        notice.text
       ] })
     ] }),
-    /* @__PURE__ */ jsx5(Text5, { children: " " }),
-    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "[\u2191/\u2193] Switch field \xB7 [Enter] Save/Next \xB7 [Esc/q] Back" })
+    /* @__PURE__ */ jsx7(Text7, { children: " " }),
+    /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: editing ? "[type] Edit \xB7 [\u2190/\u2192] Move cursor \xB7 [Enter] Done \xB7 [Esc] Cancel edit" : "[\u2191/\u2193] Switch field \xB7 [Enter] Edit \xB7 [c] Clear field \xB7 [s] Save \xB7 [Esc/q] Quit without saving" })
   ] });
 }
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/screen.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { Box as Box6, Text as Text6, useInput as useInput6 } from "ink";
+import { useEffect as useEffect5, useState as useState8 } from "react";
+import { Box as Box8, Text as Text8, useInput as useInput8 } from "ink";
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/analytics-store.ts
 async function readAnalyticsSetting() {
@@ -556,17 +1000,23 @@ async function writeAnalyticsSetting(setting) {
 }
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/screen.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function OptInAnalyticsScreen({ onDone }) {
-  const [loading, setLoading] = useState5(true);
-  const [enabled, setEnabled] = useState5(true);
-  useEffect4(() => {
+  const [loading, setLoading] = useState8(true);
+  const [enabled, setEnabled] = useState8(true);
+  useEffect5(() => {
     readAnalyticsSetting().then((setting) => {
       setEnabled(setting.enabled);
       setLoading(false);
+      startDebugRun({
+        flow: "settings/opt-in-analytics",
+        step: "01-opt-in-analytics",
+        menuOption: "Opt-in Analytics",
+        inputs: { enabled: setting.enabled }
+      });
     });
   }, []);
-  useInput6((input, key) => {
+  useInput8((input, key) => {
     if (loading) return;
     if (key.return || input === " ") {
       setEnabled((current) => {
@@ -577,208 +1027,36 @@ function OptInAnalyticsScreen({ onDone }) {
       return;
     }
     if (key.escape || input === "q") {
+      void finishDebugRun({ outputs: { enabled }, status: "success", exitMethod: "saved" });
       onDone();
     }
   });
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Settings \u203A Opt-in Analytics" }),
-    /* @__PURE__ */ jsx6(Text6, { children: " " }),
-    loading ? /* @__PURE__ */ jsx6(Text6, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsxs6(Text6, { children: [
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Settings \u203A Opt-in Analytics" }),
+    /* @__PURE__ */ jsx8(Text8, { children: " " }),
+    loading ? /* @__PURE__ */ jsx8(Text8, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsxs8(Text8, { children: [
         "Share anonymous usage data:",
         " ",
-        /* @__PURE__ */ jsx6(Text6, { bold: true, color: enabled ? PALETTE.success : PALETTE.muted, children: enabled ? "On" : "Off" })
+        /* @__PURE__ */ jsx8(Text8, { bold: true, color: enabled ? PALETTE.success : PALETTE.muted, children: enabled ? "On" : "Off" })
       ] }),
-      /* @__PURE__ */ jsx6(Text6, { children: " " }),
-      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Shares which CLI commands are used and where imports succeed or fail." }),
-      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Never includes source code, file paths, credentials, or authored content." })
+      /* @__PURE__ */ jsx8(Text8, { children: " " }),
+      /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Shares which CLI commands are used and where imports succeed or fail." }),
+      /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Never includes source code, file paths, credentials, or authored content." })
     ] }),
-    /* @__PURE__ */ jsx6(Text6, { children: " " }),
-    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "[Enter/Space] Toggle [Esc/q] Back to Settings" })
+    /* @__PURE__ */ jsx8(Text8, { children: " " }),
+    /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "[Enter/Space] Toggle [Esc/q] Back to Settings" })
   ] });
 }
 
 // packages/experience-design-system-cli/src/tui/upgrade/PageContainer.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { Box as Box7, Text as Text7, useInput as useInput7 } from "ink";
-
-// packages/experience-design-system-cli/src/tui/debug-store.ts
-import { mkdir as mkdir3, writeFile as writeFile3 } from "node:fs/promises";
-import { existsSync as existsSync3, readdirSync } from "node:fs";
-import { join as join6 } from "node:path";
-
-// packages/experience-design-system-cli/src/tui/settings/debug-mode/debug-mode-store.ts
-import { mkdir as mkdir2, readFile as readFile2, writeFile as writeFile2 } from "node:fs/promises";
-import { dirname as dirname2, join as join5 } from "node:path";
-var PACKAGE_NAME3 = "@contentful/experience-design-system-cli";
-var DEFAULT_DEBUG_MODE_SETTING = {
-  enabled: true
-};
-function debugModeSettingPath() {
-  return join5(findPackageRoot(import.meta.url, PACKAGE_NAME3), ".contentful", "config", "debug_mode.json");
-}
-async function readDebugModeSetting() {
-  try {
-    const raw = await readFile2(debugModeSettingPath(), "utf8");
-    const parsed = JSON.parse(raw);
-    return { ...DEFAULT_DEBUG_MODE_SETTING, ...parsed };
-  } catch {
-    return { ...DEFAULT_DEBUG_MODE_SETTING };
-  }
-}
-async function writeDebugModeSetting(setting) {
-  const path = debugModeSettingPath();
-  await mkdir2(dirname2(path), { recursive: true });
-  await writeFile2(path, `${JSON.stringify(setting, null, 2)}
-`, { mode: 384 });
-}
-
-// packages/experience-design-system-cli/src/tui/debug-store.ts
-var PACKAGE_NAME4 = "@contentful/experience-design-system-cli";
-var pendingRun;
-function generateRunId() {
-  const now = /* @__PURE__ */ new Date();
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
-}
-function sessionsRootDir() {
-  return join6(findPackageRoot(import.meta.url, PACKAGE_NAME4), ".contentful", "debug", "sessions");
-}
-function datePrefix(now = /* @__PURE__ */ new Date()) {
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${pad(now.getMonth() + 1)}-${pad(now.getDate())}-${now.getFullYear()}`;
-}
-function slugify(value) {
-  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-}
-function generateSessionId() {
-  const today = datePrefix();
-  const root = sessionsRootDir();
-  const existing = existsSync3(root) ? readdirSync(root) : [];
-  const seqPattern = new RegExp(`^${today}-session-(\\d+)$`);
-  const maxSeq = existing.reduce((max, entry) => {
-    const match = seqPattern.exec(entry);
-    return match ? Math.max(max, Number(match[1])) : max;
-  }, 0);
-  return `${today}-session-${maxSeq + 1}`;
-}
-var SESSION_ID = generateSessionId();
-function sessionDebugDir() {
-  return join6(sessionsRootDir(), SESSION_ID);
-}
-void isDebugModeEnabled().then((enabled) => {
-  if (!enabled) return void 0;
-  return mkdir3(sessionDebugDir(), { recursive: true });
-});
-async function isDebugModeEnabled() {
-  try {
-    return (await readDebugModeSetting()).enabled;
-  } catch {
-    return true;
-  }
-}
-function redact(value) {
-  const clone = { ...value };
-  if ("cma_token" in clone) {
-    const raw = clone.cma_token;
-    clone.cma_token = typeof raw === "string" && raw.length > 0 ? `[present, ${raw.length} chars]` : "[not set]";
-  }
-  return clone;
-}
-function startDebugRun({
-  flow,
-  step,
-  menuOption,
-  inputs
-}) {
-  const runId = generateRunId();
-  const startedAt = Date.now();
-  const redactedInputs = redact(inputs);
-  isDebugModeEnabled().then((enabled) => {
-    if (!enabled) return;
-    pendingRun = { flow, step, runId, menuOption, inputs: redactedInputs, startedAt };
-  });
-}
-async function finishDebugRun({
-  outputs,
-  status,
-  exitMethod
-}) {
-  const run = pendingRun;
-  if (!run) return;
-  pendingRun = void 0;
-  const durationMs = Date.now() - run.startedAt;
-  const content = renderMarkdown(run, { outputs: redact(outputs), status, exitMethod, durationMs });
-  const flowSegments = run.flow.split("/");
-  const dir = join6(sessionDebugDir(), ...flowSegments);
-  await mkdir3(dir, { recursive: true });
-  const filename = nextAttemptFilename(dir, run.menuOption);
-  await writeFile3(join6(dir, filename), content, { mode: 384 });
-}
-function nextAttemptFilename(dir, menuOption) {
-  const today = datePrefix();
-  const optionSlug = slugify(menuOption);
-  const existing = existsSync3(dir) ? readdirSync(dir) : [];
-  const attemptPattern = new RegExp(`^${today}-${optionSlug}-attempt-(\\d+)\\.md$`);
-  const maxAttempt = existing.reduce((max, entry) => {
-    const match = attemptPattern.exec(entry);
-    return match ? Math.max(max, Number(match[1])) : max;
-  }, 0);
-  return `${today}-${optionSlug}-attempt-${maxAttempt + 1}.md`;
-}
-function renderMarkdown(run, finish) {
-  const stepMatch = /^(\d+)-(.+)$/.exec(run.step);
-  const stepLabel = stepMatch ? `${stepMatch[1]} - ${stepMatch[2]}` : run.step;
-  const flowSlug = run.flow.split("/").join("-");
-  return `# Debug Log
-
-- Run ID: ${run.runId}
-- Flow: ${flowSlug}
-- Step: ${stepLabel}
-- Menu option: ${run.menuOption}
-- Date: ${(/* @__PURE__ */ new Date()).toISOString()}
-- CLI version: ${readPackageVersion()}
-- Platform: ${process.platform} / Node ${process.version}
-- Duration on screen: ${finish.durationMs}ms
-- Status: ${finish.status}
-- Exit method: ${finish.exitMethod}
-
-## Inputs
-\`\`\`json
-${JSON.stringify(run.inputs, null, 2)}
-\`\`\`
-
-## Outputs
-\`\`\`json
-${JSON.stringify(finish.outputs, null, 2)}
-\`\`\`
-`;
-}
-function handleCrash() {
-  return finishDebugRun({ outputs: {}, status: "error", exitMethod: "crashed" });
-}
-process.once("uncaughtException", (err) => {
-  void handleCrash().finally(() => {
-    throw err;
-  });
-});
-process.once("unhandledRejection", (reason) => {
-  void handleCrash().finally(() => {
-    throw reason;
-  });
-});
-process.once("SIGINT", () => {
-  void handleCrash().finally(() => {
-    process.exit(130);
-  });
-});
-
-// packages/experience-design-system-cli/src/tui/upgrade/PageContainer.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState9 } from "react";
+import { Box as Box9, Text as Text9, useInput as useInput9 } from "ink";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var UPGRADE_COMMANDS = ["git pull", "pnpm install", "pnpm build"];
 function UpgradeScreen({ onDone }) {
-  const [upgradeCheck, setUpgradeCheck] = useState6();
-  useEffect5(() => {
+  const [upgradeCheck, setUpgradeCheck] = useState9();
+  useEffect6(() => {
     startDebugRun({
       flow: "upgrade",
       step: "01-upgrade",
@@ -787,7 +1065,7 @@ function UpgradeScreen({ onDone }) {
     });
     checkForUpgrade().then(setUpgradeCheck).catch(() => setUpgradeCheck({ status: "error" }));
   }, []);
-  useInput7((_input, key) => {
+  useInput9((_input, key) => {
     if (key.return) {
       void finishDebugRun({
         outputs: upgradeCheck ?? {},
@@ -798,12 +1076,12 @@ function UpgradeScreen({ onDone }) {
       return;
     }
   });
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Upgrade" }),
-    /* @__PURE__ */ jsx7(Text7, { children: " " }),
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx9(Text9, { bold: true, children: "Upgrade" }),
+    /* @__PURE__ */ jsx9(Text9, { children: " " }),
     renderBody(upgradeCheck),
-    /* @__PURE__ */ jsx7(Text7, { children: " " }),
-    /* @__PURE__ */ jsxs7(Text7, { bold: true, color: PALETTE.accent, children: [
+    /* @__PURE__ */ jsx9(Text9, { children: " " }),
+    /* @__PURE__ */ jsxs9(Text9, { bold: true, color: PALETTE.accent, children: [
       FOCUS_MARKER,
       " Go Back"
     ] })
@@ -811,51 +1089,57 @@ function UpgradeScreen({ onDone }) {
 }
 function renderBody(upgradeCheck) {
   if (!upgradeCheck) {
-    return /* @__PURE__ */ jsx7(Text7, { color: PALETTE.muted, children: "Checking for updates\u2026" });
+    return /* @__PURE__ */ jsx9(Text9, { color: PALETTE.muted, children: "Checking for updates\u2026" });
   }
   if (upgradeCheck.status === "error") {
-    return /* @__PURE__ */ jsx7(Text7, { color: PALETTE.warning, children: "Couldn't check for updates \u2014 check your network connection and try again." });
+    return /* @__PURE__ */ jsx9(Text9, { color: PALETTE.warning, children: "Couldn't check for updates \u2014 check your network connection and try again." });
   }
   if (upgradeCheck.status === "up-to-date") {
-    return /* @__PURE__ */ jsxs7(Text7, { color: PALETTE.success, children: [
+    return /* @__PURE__ */ jsxs9(Text9, { color: PALETTE.success, children: [
       "You're already on the latest version (v",
       upgradeCheck.current,
       ")."
     ] });
   }
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs7(Text7, { color: PALETTE.muted, children: [
-      /* @__PURE__ */ jsxs7(Text7, { bold: true, color: PALETTE.success, children: [
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs9(Text9, { color: PALETTE.muted, children: [
+      /* @__PURE__ */ jsxs9(Text9, { bold: true, color: PALETTE.success, children: [
         "v",
         upgradeCheck.latest
       ] }),
       " ",
       "is available (you're on ",
-      /* @__PURE__ */ jsxs7(Text7, { bold: true, children: [
+      /* @__PURE__ */ jsxs9(Text9, { bold: true, children: [
         "v",
         upgradeCheck.current
       ] }),
       "). Exit this program, cd into the root of your local clone of contentful/experience-design-system-sdk-public, then run:"
     ] }),
-    /* @__PURE__ */ jsx7(Text7, { children: " " }),
-    /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.border, paddingX: 1, children: UPGRADE_COMMANDS.map((cmd) => /* @__PURE__ */ jsx7(Text7, { bold: true, children: cmd }, cmd)) })
+    /* @__PURE__ */ jsx9(Text9, { children: " " }),
+    /* @__PURE__ */ jsx9(Box9, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.border, paddingX: 1, children: UPGRADE_COMMANDS.map((cmd) => /* @__PURE__ */ jsx9(Text9, { bold: true, children: cmd }, cmd)) })
   ] });
 }
 
 // packages/experience-design-system-cli/src/tui/settings/debug-mode/screen.tsx
-import { useEffect as useEffect6, useState as useState7 } from "react";
-import { Box as Box8, Text as Text8, useInput as useInput8 } from "ink";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState10 } from "react";
+import { Box as Box10, Text as Text10, useInput as useInput10 } from "ink";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function DebugModeScreen({ onDone }) {
-  const [loading, setLoading] = useState7(true);
-  const [enabled, setEnabled] = useState7(true);
-  useEffect6(() => {
+  const [loading, setLoading] = useState10(true);
+  const [enabled, setEnabled] = useState10(true);
+  useEffect7(() => {
     readDebugModeSetting().then((setting) => {
       setEnabled(setting.enabled);
       setLoading(false);
+      startDebugRun({
+        flow: "settings/debug-mode",
+        step: "01-debug-mode",
+        menuOption: "Debug Mode",
+        inputs: { enabled: setting.enabled }
+      });
     });
   }, []);
-  useInput8((input, key) => {
+  useInput10((input, key) => {
     if (loading) return;
     if (key.return || input === " ") {
       setEnabled((current) => {
@@ -866,64 +1150,92 @@ function DebugModeScreen({ onDone }) {
       return;
     }
     if (key.escape || input === "q") {
+      void finishDebugRun({ outputs: { enabled }, status: "success", exitMethod: "saved" });
       onDone();
     }
   });
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Settings \u203A Debug Mode" }),
-    /* @__PURE__ */ jsx8(Text8, { children: " " }),
-    loading ? /* @__PURE__ */ jsx8(Text8, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs8(Text8, { children: [
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Settings \u203A Debug Mode" }),
+    /* @__PURE__ */ jsx10(Text10, { children: " " }),
+    loading ? /* @__PURE__ */ jsx10(Text10, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs10(Text10, { children: [
       "Debug logging:",
       " ",
-      /* @__PURE__ */ jsx8(Text8, { bold: true, color: enabled ? PALETTE.success : PALETTE.muted, children: enabled ? "On" : "Off" })
+      /* @__PURE__ */ jsx10(Text10, { bold: true, color: enabled ? PALETTE.success : PALETTE.muted, children: enabled ? "On" : "Off" })
     ] }),
-    /* @__PURE__ */ jsx8(Text8, { children: " " }),
-    /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "[Enter/Space] Toggle [Esc/q] Back to Settings" })
+    /* @__PURE__ */ jsx10(Text10, { children: " " }),
+    /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "[Enter/Space] Toggle [Esc/q] Back to Settings" })
   ] });
 }
 
 // packages/experience-design-system-cli/app.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11 } from "react/jsx-runtime";
 function App({ onLaunchImport, importExitCode }) {
   const returnedFromImport = importExitCode !== void 0;
-  const [screen, setScreen] = useState8(returnedFromImport ? "import" : "start");
-  const goToStart = () => setScreen("start");
-  const goToSettings = () => setScreen("settings");
-  const navigateFromHome = (next) => {
-    if (next === "import" && onLaunchImport) {
-      onLaunchImport();
+  const [screen, setScreen] = useState11(returnedFromImport ? "import" : "start");
+  const [showImportResult, setShowImportResult] = useState11(returnedFromImport);
+  const [projectPath, setProjectPath] = useState11();
+  const [importDefaults, setImportDefaults] = useState11();
+  useEffect8(() => {
+    if (screen !== "import") {
+      setImportDefaults(void 0);
       return;
     }
-    setScreen(next);
+    void readCredentials().then(
+      (saved) => setImportDefaults({ componentDir: saved.defaultComponentDir ?? "", tokenFile: saved.defaultTokenFile ?? "" })
+    );
+  }, [screen]);
+  const goToStart = () => setScreen("start");
+  const goToSettings = () => setScreen("settings");
+  const finishImportResult = () => {
+    setShowImportResult(false);
+    setProjectPath(void 0);
+    goToStart();
+  };
+  const leaveImport = () => {
+    setProjectPath(void 0);
+    goToStart();
   };
   switch (screen) {
     case "import":
-      return /* @__PURE__ */ jsx9(ImportScreen, { exitCode: importExitCode, onDone: goToStart });
+      if (showImportResult) return /* @__PURE__ */ jsx11(ImportScreen, { exitCode: importExitCode, onDone: finishImportResult });
+      if (importDefaults === void 0) return /* @__PURE__ */ jsx11(Fragment4, {});
+      if (projectPath === void 0) {
+        return /* @__PURE__ */ jsx11(WelcomeScreen, { onContinue: setProjectPath, onQuit: leaveImport, initialPath: importDefaults.componentDir });
+      }
+      return /* @__PURE__ */ jsx11(
+        TokenInputScreen,
+        {
+          initialPath: importDefaults.tokenFile,
+          onConfirm: (tokens) => onLaunchImport?.({ project: projectPath, tokens }),
+          onSkip: () => onLaunchImport?.({ project: projectPath }),
+          onBack: () => setProjectPath(void 0)
+        }
+      );
     case "help":
-      return /* @__PURE__ */ jsx9(HelpScreen, { onDone: goToStart });
+      return /* @__PURE__ */ jsx11(HelpScreen, { onDone: goToStart });
     case "upgrade":
-      return /* @__PURE__ */ jsx9(UpgradeScreen, { onDone: goToStart });
+      return /* @__PURE__ */ jsx11(UpgradeScreen, { onDone: goToStart });
     case "settings":
-      return /* @__PURE__ */ jsx9(SettingsScreen, { onNavigate: setScreen, onBack: goToStart });
+      return /* @__PURE__ */ jsx11(SettingsScreen, { onNavigate: setScreen, onBack: goToStart });
     case "settings-configuration":
-      return /* @__PURE__ */ jsx9(ConfigurationScreen, { onDone: goToSettings });
+      return /* @__PURE__ */ jsx11(ConfigurationScreen, { onDone: goToSettings });
     case "settings-opt-in-analytics":
-      return /* @__PURE__ */ jsx9(OptInAnalyticsScreen, { onDone: goToSettings });
+      return /* @__PURE__ */ jsx11(OptInAnalyticsScreen, { onDone: goToSettings });
     case "settings-debug-mode":
-      return /* @__PURE__ */ jsx9(DebugModeScreen, { onDone: goToSettings });
+      return /* @__PURE__ */ jsx11(DebugModeScreen, { onDone: goToSettings });
     case "start":
-      return /* @__PURE__ */ jsx9(HomeScreen, { onNavigate: navigateFromHome });
+      return /* @__PURE__ */ jsx11(HomeScreen, { onNavigate: setScreen });
   }
 }
 async function renderUntilImportRequestedOrExit(renderApp, importExitCode) {
-  let importRequested = false;
+  let requestedImport;
   const instance = renderApp(
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(
       App,
       {
         importExitCode,
-        onLaunchImport: () => {
-          importRequested = true;
+        onLaunchImport: (options) => {
+          requestedImport = options;
           instance.unmount();
         }
       }
@@ -931,13 +1243,15 @@ async function renderUntilImportRequestedOrExit(renderApp, importExitCode) {
   );
   await instance.waitUntilExit();
   await stopReadingTerminal();
-  return importRequested;
+  return requestedImport;
 }
 async function runApp(renderApp) {
   let importExitCode;
-  while (await renderUntilImportRequestedOrExit(renderApp, importExitCode)) {
-    importExitCode = (await spawnV1Import({})).exitCode;
+  let requestedImport = await renderUntilImportRequestedOrExit(renderApp, importExitCode);
+  while (requestedImport !== void 0) {
+    importExitCode = (await spawnV1Import(requestedImport)).exitCode;
     startReadingTerminal();
+    requestedImport = await renderUntilImportRequestedOrExit(renderApp, importExitCode);
   }
 }
 export {