@contentful/experience-design-system-cli 2.37.1-dev-build-049f8d38.0 → 2.37.1-dev-build-cf4224ad.0

package/dist/app.js

@@ -1,5 +1,5 @@
 // packages/experience-design-system-cli/app.tsx
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState12 } from "react";
 
 // packages/experience-design-system-cli/src/tui/home/home.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
@@ -349,6 +349,8 @@ function useTokenInputControls(onBack) {
 
 // packages/experience-design-system-cli/src/tui/import/steps/02-token-input/validate-path.ts
 import { statSync } from "node:fs";
+
+// packages/experience-design-system-cli/src/tui/import/resolve-user-path.ts
 import { homedir } from "node:os";
 import { resolve } from "node:path";
 function stripQuotes(value) {
@@ -358,8 +360,13 @@ function stripQuotes(value) {
 function expandHome(value) {
   return value === "~" || value.startsWith("~/") || value.startsWith("~\\") ? homedir() + value.slice(1) : value;
 }
+function resolveUserPath(raw) {
+  return resolve(expandHome(stripQuotes(raw.trim())));
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/02-token-input/validate-path.ts
 function validateTokenPath(rawPath) {
-  const path = resolve(expandHome(stripQuotes(rawPath.trim())));
+  const path = resolveUserPath(rawPath);
   let stats;
   try {
     stats = statSync(path);
@@ -428,18 +435,288 @@ function TokenInputScreen({ onConfirm, onBack, initialPath = "" }) {
   ] });
 }
 
+// packages/experience-design-system-cli/src/tui/import/steps/03-path-validation/screen.tsx
+import { useEffect as useEffect3, useMemo, useState as useState5 } from "react";
+import { Box as Box5, Text as Text6 } from "ink";
+
+// packages/experience-design-system-cli/src/tui/import/steps/03-path-validation/controls.ts
+import { useInput as useInput5 } from "ink";
+
+// packages/experience-design-system-cli/src/tui/import/steps/03-path-validation/logic.ts
+var IGNORED_DIRECTORIES = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  ".next",
+  ".nuxt",
+  "coverage",
+  "storybook-static",
+  "out",
+  ".git"
+]);
+var CATEGORY_BY_EXTENSION = /* @__PURE__ */ new Map([
+  ["tsx", "tsx"],
+  ["ts", "ts"],
+  ["vue", "vue"],
+  ["astro", "astro"],
+  ["jsx", "jsx"],
+  ["js", "js"],
+  ["json", "json"]
+]);
+var COMPONENT_CATEGORIES = ["tsx", "ts", "vue", "astro", "jsx", "js"];
+var ROW_LABELS = {
+  tsx: ".tsx files",
+  ts: ".ts files",
+  vue: ".vue files",
+  astro: ".astro files",
+  jsx: ".jsx files",
+  js: ".js files",
+  json: ".json files (design tokens)",
+  other: "other (ignored)"
+};
+var ROW_ORDER = ["tsx", "ts", "vue", "astro", "jsx", "js", "json", "other"];
+function categorize(fileName) {
+  if (fileName.endsWith(".d.ts")) return "other";
+  const dot = fileName.lastIndexOf(".");
+  const extension = dot === -1 ? "" : fileName.slice(dot + 1);
+  return CATEGORY_BY_EXTENSION.get(extension) ?? "other";
+}
+function emptyCounts() {
+  return { tsx: 0, ts: 0, vue: 0, astro: 0, jsx: 0, js: 0, json: 0, other: 0, total: 0 };
+}
+function addFile(counts, fileName) {
+  const category = categorize(fileName);
+  return { ...counts, [category]: counts[category] + 1, total: counts.total + 1 };
+}
+function mergeCounts(a, b) {
+  return {
+    tsx: a.tsx + b.tsx,
+    ts: a.ts + b.ts,
+    vue: a.vue + b.vue,
+    astro: a.astro + b.astro,
+    jsx: a.jsx + b.jsx,
+    js: a.js + b.js,
+    json: a.json + b.json,
+    other: a.other + b.other,
+    total: a.total + b.total
+  };
+}
+function failureFromErrorCode(code) {
+  if (code === "ENOENT") return "not-found";
+  if (code === "EACCES") return "permission-denied";
+  return "unreadable";
+}
+function describeFailure(failure, path) {
+  switch (failure) {
+    case "is-file":
+      return {
+        headline: "That's a file, not a directory.",
+        hints: [
+          "Provide the path to your component library's root folder, not a specific file.",
+          "Example: ~/projects/my-design-system"
+        ]
+      };
+    case "not-found":
+      return {
+        headline: `Directory not found: ${path}`,
+        hints: ["Double-check the path and try again. Tip: you can use ~, relative, or absolute paths."]
+      };
+    case "permission-denied":
+      return {
+        headline: `Permission denied: ${path}`,
+        hints: ["You don't have read access to this directory."]
+      };
+    case "not-directory":
+      return { headline: `Not a directory: ${path}`, hints: [] };
+    case "unreadable":
+      return { headline: `Cannot access: ${path}`, hints: [] };
+  }
+}
+function summarize(counts) {
+  const rows = ROW_ORDER.filter((category) => counts[category] > 0).map((category) => {
+    const tone = category === "json" ? "accent" : category === "other" ? "muted" : "default";
+    return { label: ROW_LABELS[category], count: counts[category], tone };
+  });
+  const componentFiles = COMPONENT_CATEGORIES.reduce((sum, category) => sum + counts[category], 0);
+  if (componentFiles > 0) return { total: counts.total, rows };
+  if (counts.json > 0) {
+    return { total: counts.total, rows, warning: "No component files found \u2014 only token files detected." };
+  }
+  return {
+    total: counts.total,
+    rows,
+    warning: "No component or token files found. Try a different path."
+  };
+}
+function phaseOf(scan) {
+  if (scan === void 0) return "scanning";
+  return scan.ok ? "ready" : "failed";
+}
+function keyAction(phase, input, key) {
+  if (key.escape) return "back";
+  if (phase === "ready") {
+    if (key.return) return "confirm";
+    if (input === "e") return "change-path";
+  }
+  if (phase === "failed" && (key.return || input === "e")) return "change-path";
+  return void 0;
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/03-path-validation/controls.ts
+var CONTROLS = {
+  scanning: [{ keys: "Esc", label: "Back" }],
+  ready: [
+    { keys: "Enter", label: "Yes, continue" },
+    { keys: "e", label: "Change path" },
+    { keys: "Esc", label: "Back" }
+  ],
+  failed: [
+    { keys: "Enter/e", label: "Try a different path" },
+    { keys: "Esc", label: "Back" }
+  ]
+};
+function controlsFor(phase) {
+  return CONTROLS[phase];
+}
+function usePathValidationControls(phase, handlers) {
+  useInput5((input, key) => {
+    const action = keyAction(phase, input, key);
+    if (action === "confirm") handlers.onConfirm();
+    else if (action === "change-path") handlers.onChangePath();
+    else if (action === "back") handlers.onBack();
+  });
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/03-path-validation/loader.ts
+import { readdir, stat } from "node:fs/promises";
+import { join as join3 } from "node:path";
+async function isFile(path) {
+  try {
+    return (await stat(path)).isFile();
+  } catch {
+    return false;
+  }
+}
+async function countEntry(directory, entry) {
+  const path = join3(directory, entry.name);
+  if (entry.isDirectory()) return countFiles(path);
+  if (entry.isFile() || entry.isSymbolicLink() && await isFile(path)) return addFile(emptyCounts(), entry.name);
+  return emptyCounts();
+}
+async function countFiles(directory) {
+  let entries;
+  try {
+    entries = await readdir(directory, { withFileTypes: true });
+  } catch {
+    return emptyCounts();
+  }
+  const counts = await Promise.all(
+    entries.filter((entry) => !IGNORED_DIRECTORIES.has(entry.name)).map((entry) => countEntry(directory, entry))
+  );
+  return counts.reduce(mergeCounts, emptyCounts());
+}
+async function scanProject(directory) {
+  try {
+    const stats = await stat(directory);
+    if (stats.isFile()) return { ok: false, failure: "is-file" };
+    if (!stats.isDirectory()) return { ok: false, failure: "not-directory" };
+  } catch (error) {
+    return { ok: false, failure: failureFromErrorCode(error.code) };
+  }
+  return { ok: true, counts: await countFiles(directory) };
+}
+
+// packages/experience-design-system-cli/src/tui/import/steps/03-path-validation/screen.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Row({ row }) {
+  return /* @__PURE__ */ jsxs5(Text6, { color: row.tone === "accent" ? PALETTE.accent : void 0, dimColor: row.tone === "muted", children: [
+    "  \u2022 ",
+    String(row.count).padStart(3),
+    " ",
+    row.label
+  ] });
+}
+function Failure({ scan, path }) {
+  const { headline, hints } = describeFailure(scan.failure, path);
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5(Text6, { color: PALETTE.error, children: [
+      "\u2717 ",
+      headline
+    ] }),
+    hints.map((hint) => /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: hint }, hint))
+  ] });
+}
+function Summary({ scan, path }) {
+  const { total, rows, warning } = summarize(scan.counts);
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs5(Text6, { children: [
+      "Scanned ",
+      /* @__PURE__ */ jsx6(Text6, { bold: true, children: path })
+    ] }),
+    /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs5(Text6, { color: PALETTE.success, children: [
+        "\u2713 Found ",
+        total,
+        " files:"
+      ] }),
+      rows.map((row) => /* @__PURE__ */ jsx6(Row, { row }, row.label))
+    ] }),
+    warning && /* @__PURE__ */ jsxs5(Text6, { color: PALETTE.warning, children: [
+      "\u26A0 ",
+      warning
+    ] }),
+    /* @__PURE__ */ jsx6(Text6, { children: "Does this look right?" })
+  ] });
+}
+function PathValidationScreen({
+  projectPath,
+  onConfirm,
+  onChangePath,
+  onBack
+}) {
+  const resolvedPath = useMemo(() => resolveUserPath(projectPath), [projectPath]);
+  const [scan, setScan] = useState5();
+  useEffect3(() => {
+    let cancelled = false;
+    setScan(void 0);
+    void scanProject(resolvedPath).then((result) => {
+      if (!cancelled) setScan(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedPath]);
+  const phase = phaseOf(scan);
+  usePathValidationControls(phase, { onConfirm: () => onConfirm(resolvedPath), onChangePath, onBack });
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [
+    scan === void 0 && /* @__PURE__ */ jsxs5(Text6, { dimColor: true, children: [
+      "Scanning ",
+      /* @__PURE__ */ jsx6(Text6, { bold: true, children: resolvedPath }),
+      "..."
+    ] }),
+    scan?.ok === false && /* @__PURE__ */ jsx6(Failure, { scan, path: resolvedPath }),
+    scan?.ok === true && /* @__PURE__ */ jsx6(Summary, { scan, path: resolvedPath }),
+    /* @__PURE__ */ jsx6(Box5, { marginTop: 1, gap: 3, children: controlsFor(phase).map((control) => /* @__PURE__ */ jsxs5(Text6, { 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";
 
 // packages/experience-design-system-cli/src/legacy/legacy-cli-path.ts
 import { existsSync as existsSync2 } from "node:fs";
-import { join as join3 } from "node:path";
+import { join as join4 } from "node:path";
 var PACKAGE_NAME2 = "@contentful/experience-design-system-cli";
 function findLegacyCliPath() {
   const root = findPackageRoot(import.meta.url, PACKAGE_NAME2);
   const candidates = [
-    join3(root, "legacy", "bin", "cli.js"),
-    join3(root, "..", "experience-design-system-cli-legacy", "bin", "cli.js")
+    join4(root, "legacy", "bin", "cli.js"),
+    join4(root, "..", "experience-design-system-cli-legacy", "bin", "cli.js")
   ];
   const found = candidates.find((candidate) => existsSync2(candidate));
   if (!found) {
@@ -495,24 +772,24 @@ function startReadingTerminal() {
 }
 
 // packages/experience-design-system-cli/src/tui/help/PageContainer.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
-import { Box as Box5, Text as Text6, useInput as useInput5 } from "ink";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { Box as Box6, Text as Text7, useInput as useInput6 } 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";
+import { join as join6 } 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";
+import { dirname as dirname2, join as join5 } from "node:path";
 function configRoot() {
-  return process.env["EDS_HOME"] || join4(homedir2(), ".contentful", "experience-design-system-cli");
+  return process.env["EDS_HOME"] || join5(homedir2(), ".contentful", "experience-design-system-cli");
 }
-var configFilePath = () => join4(configRoot(), "config.json");
-var debugSessionsDir = () => join4(configRoot(), "debug", "sessions");
+var configFilePath = () => join5(configRoot(), "config.json");
+var debugSessionsDir = () => join5(configRoot(), "debug", "sessions");
 async function readSettings() {
   try {
     return JSON.parse(await readFile(configFilePath(), "utf8"));
@@ -571,7 +848,7 @@ function generateSessionId() {
 }
 var SESSION_ID = generateSessionId();
 function sessionDebugDir() {
-  return join5(debugSessionsDir(), SESSION_ID);
+  return join6(debugSessionsDir(), SESSION_ID);
 }
 function currentDebugSessionDir() {
   return sessionDebugDir();
@@ -620,10 +897,10 @@ async function finishDebugRun({
   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);
+  const dir = join6(sessionDebugDir(), ...flowSegments);
   await mkdir2(dir, { recursive: true });
   const filename = nextAttemptFilename(dir, run.menuOption);
-  await writeFile2(join5(dir, filename), content, { mode: 384 });
+  await writeFile2(join6(dir, filename), content, { mode: 384 });
 }
 function nextAttemptFilename(dir, menuOption) {
   const today = datePrefix();
@@ -706,19 +983,19 @@ async function readHelpInfo() {
 }
 
 // packages/experience-design-system-cli/src/tui/help/PageContainer.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function Section({ title, rows }) {
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, color: PALETTE.accent, children: title }),
-    rows.map((row) => /* @__PURE__ */ jsxs5(Box5, { gap: 1, children: [
-      /* @__PURE__ */ jsx6(Box5, { width: 14, flexShrink: 0, children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: row.label }) }),
-      /* @__PURE__ */ jsx6(Text6, { children: row.value })
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Text7, { bold: true, color: PALETTE.accent, children: title }),
+    rows.map((row) => /* @__PURE__ */ jsxs6(Box6, { gap: 1, children: [
+      /* @__PURE__ */ jsx7(Box6, { width: 14, flexShrink: 0, children: /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: row.label }) }),
+      /* @__PURE__ */ jsx7(Text7, { children: row.value })
     ] }, row.label))
   ] });
 }
 function HelpScreen({ onDone }) {
-  const [info, setInfo] = useState5();
-  useEffect3(() => {
+  const [info, setInfo] = useState6();
+  useEffect4(() => {
     startDebugRun({ flow: "help", step: "01-help", menuOption: "Help", inputs: {} });
     void readHelpInfo().then(setInfo);
   }, []);
@@ -726,7 +1003,7 @@ function HelpScreen({ onDone }) {
     void finishDebugRun({ outputs: {}, status: "success", exitMethod });
     onDone();
   };
-  useInput5((input, key) => {
+  useInput6((input, key) => {
     if (key.return) {
       leave("saved");
       return;
@@ -736,14 +1013,14 @@ function HelpScreen({ onDone }) {
       return;
     }
   });
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Help" }),
-    info ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-      /* @__PURE__ */ jsx6(Section, { title: "Where things are stored", rows: info.storage }),
-      /* @__PURE__ */ jsx6(Section, { title: "Troubleshooting", rows: info.troubleshooting }),
-      /* @__PURE__ */ jsx6(Text6, { 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__ */ jsx6(Text6, { color: PALETTE.accent, children: "Loading..." }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [
+    /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Help" }),
+    info ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx7(Section, { title: "Where things are stored", rows: info.storage }),
+      /* @__PURE__ */ jsx7(Section, { title: "Troubleshooting", rows: info.troubleshooting }),
+      /* @__PURE__ */ jsx7(Text7, { 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__ */ jsx7(Text7, { color: PALETTE.accent, children: "Loading..." }),
+    /* @__PURE__ */ jsx7(
       ControlHints,
       {
         hints: [
@@ -756,20 +1033,20 @@ function HelpScreen({ onDone }) {
 }
 
 // packages/experience-design-system-cli/src/tui/settings/PageContainer.tsx
-import { useState as useState6 } from "react";
-import { Box as Box6, Text as Text7, useInput as useInput6 } from "ink";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { Box as Box7, Text as Text8, useInput as useInput7 } from "ink";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SettingsScreen({
   onNavigate,
   onBack
 }) {
-  const [focusIdx, setFocusIdx] = useState6(0);
+  const [focusIdx, setFocusIdx] = useState7(0);
   const items = [
     { label: "Configuration", screen: "settings-configuration" },
     { label: "Opt-in Analytics", screen: "settings-opt-in-analytics" },
     { label: "Debug Mode", screen: "settings-debug-mode" }
   ];
-  useInput6((input, key) => {
+  useInput7((input, key) => {
     if (key.upArrow) {
       setFocusIdx((i) => (i - 1 + items.length) % items.length);
       return;
@@ -789,15 +1066,15 @@ function SettingsScreen({
       onBack();
     }
   });
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Settings" }),
-    /* @__PURE__ */ jsx7(Text7, { children: " " }),
-    items.map((item, i) => /* @__PURE__ */ jsxs6(Text7, { color: i === focusIdx ? "cyan" : void 0, children: [
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Settings" }),
+    /* @__PURE__ */ jsx8(Text8, { children: " " }),
+    items.map((item, i) => /* @__PURE__ */ jsxs7(Text8, { color: i === focusIdx ? "cyan" : void 0, children: [
       i === focusIdx ? "> " : "  ",
       item.label
     ] }, item.label)),
-    /* @__PURE__ */ jsx7(Text7, { children: " " }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(Text8, { children: " " }),
+    /* @__PURE__ */ jsx8(
       ControlHints,
       {
         hints: [
@@ -811,8 +1088,8 @@ function SettingsScreen({
 }
 
 // packages/experience-design-system-cli/src/tui/settings/contentful-configuration/ContentfulConfigScreen.tsx
-import { useEffect as useEffect4, useState as useState7 } from "react";
-import { Box as Box7, Text as Text8, useInput as useInput7 } from "ink";
+import { useEffect as useEffect5, useState as useState8 } from "react";
+import { Box as Box8, Text as Text9, useInput as useInput8 } from "ink";
 import TextInput3 from "ink-text-input";
 
 // packages/experience-design-system-cli/src/tui/settings/utils/v1-store.ts
@@ -844,7 +1121,7 @@ async function writeCredentials(config) {
 }
 
 // packages/experience-design-system-cli/src/tui/settings/contentful-configuration/ContentfulConfigScreen.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var FIELD_ORDER = [
   "spaceId",
   "environmentId",
@@ -872,14 +1149,14 @@ var FIELD_LABELS = {
   defaultTokenFile: "Default token file (optional)"
 };
 function ConfigurationScreen({ onDone }) {
-  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(() => {
+  const [stage, setStage] = useState8("loading");
+  const [config, setConfig] = useState8(null);
+  const [activeField, setActiveField] = useState8("spaceId");
+  const [notice, setNotice] = useState8(null);
+  const [lastSaved, setLastSaved] = useState8(null);
+  const [editing, setEditing] = useState8(false);
+  const [valueBeforeEdit, setValueBeforeEdit] = useState8("");
+  useEffect5(() => {
     readCredentials().then((cfg) => {
       setConfig(cfg);
       setStage("form");
@@ -919,7 +1196,7 @@ function ConfigurationScreen({ onDone }) {
     );
     onDone();
   }
-  useInput7((input, key) => {
+  useInput8((input, key) => {
     if (stage === "loading" || stage === "saving") return;
     if (editing) {
       if (key.escape) {
@@ -956,26 +1233,26 @@ function ConfigurationScreen({ onDone }) {
     }
   });
   if (stage === "loading") {
-    return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-      /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Configuration" }),
-      /* @__PURE__ */ jsx8(Text8, { children: " " }),
-      /* @__PURE__ */ jsx8(Text8, { color: PALETTE.accent, children: "Loading..." })
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, children: "Configuration" }),
+      /* @__PURE__ */ jsx9(Text9, { children: " " }),
+      /* @__PURE__ */ jsx9(Text9, { color: PALETTE.accent, children: "Loading..." })
     ] });
   }
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx8(Text8, { bold: true, children: "Configuration" }),
-    /* @__PURE__ */ jsx8(Text8, { children: " " }),
-    /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", children: FIELD_ORDER.map((field) => {
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx9(Text9, { bold: true, children: "Configuration" }),
+    /* @__PURE__ */ jsx9(Text9, { children: " " }),
+    /* @__PURE__ */ jsx9(Box8, { 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__ */ jsxs7(Box7, { gap: 1, children: [
-        /* @__PURE__ */ jsx8(Text8, { color: isActive ? PALETTE.accent : void 0, children: isActive ? "\u276F" : " " }),
-        /* @__PURE__ */ jsxs7(Text8, { bold: isActive, children: [
+      return /* @__PURE__ */ jsxs8(Box8, { gap: 1, children: [
+        /* @__PURE__ */ jsx9(Text9, { color: isActive ? PALETTE.accent : void 0, children: isActive ? "\u276F" : " " }),
+        /* @__PURE__ */ jsxs8(Text9, { bold: isActive, children: [
           FIELD_LABELS[field],
           ":"
         ] }),
-        isActive && editing ? /* @__PURE__ */ jsx8(
+        isActive && editing ? /* @__PURE__ */ jsx9(
           TextInput3,
           {
             value,
@@ -983,19 +1260,19 @@ function ConfigurationScreen({ onDone }) {
             onSubmit: () => setEditing(false),
             mask: field === "cmaToken" ? "\u2022" : void 0
           }
-        ) : /* @__PURE__ */ jsx8(Text8, { children: display || /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "(empty)" }) })
+        ) : /* @__PURE__ */ jsx9(Text9, { children: display || /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "(empty)" }) })
       ] }, field);
     }) }),
-    notice && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(Text8, { children: " " }),
-      /* @__PURE__ */ jsxs7(Text8, { color: notice.kind === "success" ? PALETTE.success : PALETTE.error, children: [
+    notice && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(Text9, { children: " " }),
+      /* @__PURE__ */ jsxs8(Text9, { color: notice.kind === "success" ? PALETTE.success : PALETTE.error, children: [
         notice.kind === "success" ? "\u2713" : "\u2717",
         " ",
         notice.text
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(Text8, { children: " " }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(Text9, { children: " " }),
+    /* @__PURE__ */ jsx9(
       ControlHints,
       {
         hints: editing ? [
@@ -1016,8 +1293,8 @@ function ConfigurationScreen({ onDone }) {
 }
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/screen.tsx
-import { useEffect as useEffect5, useState as useState8 } from "react";
-import { Box as Box8, Text as Text9, useInput as useInput8 } from "ink";
+import { useEffect as useEffect6, useState as useState9 } from "react";
+import { Box as Box9, Text as Text10, useInput as useInput9 } from "ink";
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/analytics-store.ts
 async function readAnalyticsSetting() {
@@ -1035,11 +1312,11 @@ async function writeAnalyticsSetting(setting) {
 }
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/screen.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function OptInAnalyticsScreen({ onDone }) {
-  const [loading, setLoading] = useState8(true);
-  const [enabled, setEnabled] = useState8(true);
-  useEffect5(() => {
+  const [loading, setLoading] = useState9(true);
+  const [enabled, setEnabled] = useState9(true);
+  useEffect6(() => {
     readAnalyticsSetting().then((setting) => {
       setEnabled(setting.enabled);
       setLoading(false);
@@ -1051,7 +1328,7 @@ function OptInAnalyticsScreen({ onDone }) {
       });
     });
   }, []);
-  useInput8((input, key) => {
+  useInput9((input, key) => {
     if (loading) return;
     if (key.return || input === " ") {
       setEnabled((current) => {
@@ -1066,21 +1343,21 @@ function OptInAnalyticsScreen({ onDone }) {
       onDone();
     }
   });
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx9(Text9, { bold: true, children: "Settings \u203A Opt-in Analytics" }),
-    /* @__PURE__ */ jsx9(Text9, { children: " " }),
-    loading ? /* @__PURE__ */ jsx9(Text9, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsxs8(Text9, { children: [
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Settings \u203A Opt-in Analytics" }),
+    /* @__PURE__ */ jsx10(Text10, { children: " " }),
+    loading ? /* @__PURE__ */ jsx10(Text10, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsxs9(Text10, { children: [
         "Share anonymous usage data:",
         " ",
-        /* @__PURE__ */ jsx9(Text9, { 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__ */ jsx9(Text9, { children: " " }),
-      /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "Shares which CLI commands are used and where imports succeed or fail." }),
-      /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "Never includes source code, file paths, credentials, or authored content." })
+      /* @__PURE__ */ jsx10(Text10, { children: " " }),
+      /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "Shares which CLI commands are used and where imports succeed or fail." }),
+      /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "Never includes source code, file paths, credentials, or authored content." })
     ] }),
-    /* @__PURE__ */ jsx9(Text9, { children: " " }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(Text10, { children: " " }),
+    /* @__PURE__ */ jsx10(
       ControlHints,
       {
         hints: [
@@ -1093,13 +1370,13 @@ function OptInAnalyticsScreen({ onDone }) {
 }
 
 // packages/experience-design-system-cli/src/tui/upgrade/PageContainer.tsx
-import { useEffect as useEffect6, useState as useState9 } from "react";
-import { Box as Box9, Text as Text10, useInput as useInput9 } from "ink";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState10 } from "react";
+import { Box as Box10, Text as Text11, useInput as useInput10 } from "ink";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var UPGRADE_COMMANDS = ["git pull", "pnpm install", "pnpm build"];
 function UpgradeScreen({ onDone }) {
-  const [upgradeCheck, setUpgradeCheck] = useState9();
-  useEffect6(() => {
+  const [upgradeCheck, setUpgradeCheck] = useState10();
+  useEffect7(() => {
     startDebugRun({
       flow: "upgrade",
       step: "01-upgrade",
@@ -1108,7 +1385,7 @@ function UpgradeScreen({ onDone }) {
     });
     checkForUpgrade().then(setUpgradeCheck).catch(() => setUpgradeCheck({ status: "error" }));
   }, []);
-  useInput9((_input, key) => {
+  useInput10((_input, key) => {
     if (key.return) {
       void finishDebugRun({
         outputs: upgradeCheck ?? {},
@@ -1119,12 +1396,12 @@ function UpgradeScreen({ onDone }) {
       return;
     }
   });
-  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Upgrade" }),
-    /* @__PURE__ */ jsx10(Text10, { children: " " }),
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx11(Text11, { bold: true, children: "Upgrade" }),
+    /* @__PURE__ */ jsx11(Text11, { children: " " }),
     renderBody(upgradeCheck),
-    /* @__PURE__ */ jsx10(Text10, { children: " " }),
-    /* @__PURE__ */ jsxs9(Text10, { bold: true, color: PALETTE.accent, children: [
+    /* @__PURE__ */ jsx11(Text11, { children: " " }),
+    /* @__PURE__ */ jsxs10(Text11, { bold: true, color: PALETTE.accent, children: [
       FOCUS_MARKER,
       " Go Back"
     ] })
@@ -1132,45 +1409,45 @@ function UpgradeScreen({ onDone }) {
 }
 function renderBody(upgradeCheck) {
   if (!upgradeCheck) {
-    return /* @__PURE__ */ jsx10(Text10, { color: PALETTE.muted, children: "Checking for updates\u2026" });
+    return /* @__PURE__ */ jsx11(Text11, { color: PALETTE.muted, children: "Checking for updates\u2026" });
   }
   if (upgradeCheck.status === "error") {
-    return /* @__PURE__ */ jsx10(Text10, { color: PALETTE.warning, children: "Couldn't check for updates \u2014 check your network connection and try again." });
+    return /* @__PURE__ */ jsx11(Text11, { 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__ */ jsxs9(Text10, { color: PALETTE.success, children: [
+    return /* @__PURE__ */ jsxs10(Text11, { color: PALETTE.success, children: [
       "You're already on the latest version (v",
       upgradeCheck.current,
       ")."
     ] });
   }
-  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs9(Text10, { color: PALETTE.muted, children: [
-      /* @__PURE__ */ jsxs9(Text10, { bold: true, color: PALETTE.success, children: [
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs10(Text11, { color: PALETTE.muted, children: [
+      /* @__PURE__ */ jsxs10(Text11, { bold: true, color: PALETTE.success, children: [
         "v",
         upgradeCheck.latest
       ] }),
       " ",
       "is available (you're on ",
-      /* @__PURE__ */ jsxs9(Text10, { bold: true, children: [
+      /* @__PURE__ */ jsxs10(Text11, { 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__ */ jsx10(Text10, { children: " " }),
-    /* @__PURE__ */ jsx10(Box9, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.border, paddingX: 1, children: UPGRADE_COMMANDS.map((cmd) => /* @__PURE__ */ jsx10(Text10, { bold: true, children: cmd }, cmd)) })
+    /* @__PURE__ */ jsx11(Text11, { children: " " }),
+    /* @__PURE__ */ jsx11(Box10, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.border, paddingX: 1, children: UPGRADE_COMMANDS.map((cmd) => /* @__PURE__ */ jsx11(Text11, { bold: true, children: cmd }, cmd)) })
   ] });
 }
 
 // packages/experience-design-system-cli/src/tui/settings/debug-mode/screen.tsx
-import { useEffect as useEffect7, useState as useState10 } from "react";
-import { Box as Box10, Text as Text11, useInput as useInput10 } from "ink";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState11 } from "react";
+import { Box as Box11, Text as Text12, useInput as useInput11 } from "ink";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function DebugModeScreen({ onDone }) {
-  const [loading, setLoading] = useState10(true);
-  const [enabled, setEnabled] = useState10(true);
-  useEffect7(() => {
+  const [loading, setLoading] = useState11(true);
+  const [enabled, setEnabled] = useState11(true);
+  useEffect8(() => {
     readDebugModeSetting().then((setting) => {
       setEnabled(setting.enabled);
       setLoading(false);
@@ -1182,7 +1459,7 @@ function DebugModeScreen({ onDone }) {
       });
     });
   }, []);
-  useInput10((input, key) => {
+  useInput11((input, key) => {
     if (loading) return;
     if (key.return || input === " ") {
       setEnabled((current) => {
@@ -1197,16 +1474,16 @@ function DebugModeScreen({ onDone }) {
       onDone();
     }
   });
-  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx11(Text11, { bold: true, children: "Settings \u203A Debug Mode" }),
-    /* @__PURE__ */ jsx11(Text11, { children: " " }),
-    loading ? /* @__PURE__ */ jsx11(Text11, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs10(Text11, { children: [
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx12(Text12, { bold: true, children: "Settings \u203A Debug Mode" }),
+    /* @__PURE__ */ jsx12(Text12, { children: " " }),
+    loading ? /* @__PURE__ */ jsx12(Text12, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs11(Text12, { children: [
       "Debug logging:",
       " ",
-      /* @__PURE__ */ jsx11(Text11, { bold: true, color: enabled ? PALETTE.success : PALETTE.muted, children: enabled ? "On" : "Off" })
+      /* @__PURE__ */ jsx12(Text12, { bold: true, color: enabled ? PALETTE.success : PALETTE.muted, children: enabled ? "On" : "Off" })
     ] }),
-    /* @__PURE__ */ jsx11(Text11, { children: " " }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(Text12, { children: " " }),
+    /* @__PURE__ */ jsx12(
       ControlHints,
       {
         hints: [
@@ -1219,14 +1496,15 @@ function DebugModeScreen({ onDone }) {
 }
 
 // packages/experience-design-system-cli/app.tsx
-import { Fragment as Fragment4, jsx as jsx12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
 function App({ onLaunchImport, importExitCode }) {
   const returnedFromImport = importExitCode !== void 0;
-  const [screen, setScreen] = useState11(returnedFromImport ? "import" : "start");
-  const [showImportResult, setShowImportResult] = useState11(returnedFromImport);
-  const [projectPath, setProjectPath] = useState11();
-  const [importDefaults, setImportDefaults] = useState11();
-  useEffect8(() => {
+  const [screen, setScreen] = useState12(returnedFromImport ? "import" : "start");
+  const [showImportResult, setShowImportResult] = useState12(returnedFromImport);
+  const [projectPath, setProjectPath] = useState12();
+  const [tokensPath, setTokensPath] = useState12();
+  const [importDefaults, setImportDefaults] = useState12();
+  useEffect9(() => {
     if (screen !== "import") {
       setImportDefaults(void 0);
       return;
@@ -1237,51 +1515,66 @@ function App({ onLaunchImport, importExitCode }) {
   }, [screen]);
   const goToStart = () => setScreen("start");
   const goToSettings = () => setScreen("settings");
+  const resetImport = () => {
+    setProjectPath(void 0);
+    setTokensPath(void 0);
+  };
   const finishImportResult = () => {
     setShowImportResult(false);
-    setProjectPath(void 0);
+    resetImport();
     goToStart();
   };
   const leaveImport = () => {
-    setProjectPath(void 0);
+    resetImport();
     goToStart();
   };
   switch (screen) {
     case "import":
-      if (showImportResult) return /* @__PURE__ */ jsx12(ImportScreen, { exitCode: importExitCode, onDone: finishImportResult });
-      if (importDefaults === void 0) return /* @__PURE__ */ jsx12(Fragment4, {});
+      if (showImportResult) return /* @__PURE__ */ jsx13(ImportScreen, { exitCode: importExitCode, onDone: finishImportResult });
+      if (importDefaults === void 0) return /* @__PURE__ */ jsx13(Fragment4, {});
       if (projectPath === void 0) {
-        return /* @__PURE__ */ jsx12(WelcomeScreen, { onContinue: setProjectPath, onQuit: leaveImport, initialPath: importDefaults.componentDir });
+        return /* @__PURE__ */ jsx13(WelcomeScreen, { onContinue: setProjectPath, onQuit: leaveImport, initialPath: importDefaults.componentDir });
       }
-      return /* @__PURE__ */ jsx12(
-        TokenInputScreen,
+      if (tokensPath === void 0) {
+        return /* @__PURE__ */ jsx13(
+          TokenInputScreen,
+          {
+            initialPath: importDefaults.tokenFile,
+            onConfirm: setTokensPath,
+            onBack: () => setProjectPath(void 0)
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx13(
+        PathValidationScreen,
         {
-          initialPath: importDefaults.tokenFile,
-          onConfirm: (tokens) => onLaunchImport?.({ project: projectPath, tokens }),
-          onBack: () => setProjectPath(void 0)
+          projectPath,
+          onConfirm: (project) => onLaunchImport?.({ project, tokens: tokensPath }),
+          onChangePath: resetImport,
+          onBack: () => setTokensPath(void 0)
         }
       );
     case "help":
-      return /* @__PURE__ */ jsx12(HelpScreen, { onDone: goToStart });
+      return /* @__PURE__ */ jsx13(HelpScreen, { onDone: goToStart });
     case "upgrade":
-      return /* @__PURE__ */ jsx12(UpgradeScreen, { onDone: goToStart });
+      return /* @__PURE__ */ jsx13(UpgradeScreen, { onDone: goToStart });
     case "settings":
-      return /* @__PURE__ */ jsx12(SettingsScreen, { onNavigate: setScreen, onBack: goToStart });
+      return /* @__PURE__ */ jsx13(SettingsScreen, { onNavigate: setScreen, onBack: goToStart });
     case "settings-configuration":
-      return /* @__PURE__ */ jsx12(ConfigurationScreen, { onDone: goToSettings });
+      return /* @__PURE__ */ jsx13(ConfigurationScreen, { onDone: goToSettings });
     case "settings-opt-in-analytics":
-      return /* @__PURE__ */ jsx12(OptInAnalyticsScreen, { onDone: goToSettings });
+      return /* @__PURE__ */ jsx13(OptInAnalyticsScreen, { onDone: goToSettings });
     case "settings-debug-mode":
-      return /* @__PURE__ */ jsx12(DebugModeScreen, { onDone: goToSettings });
+      return /* @__PURE__ */ jsx13(DebugModeScreen, { onDone: goToSettings });
     case "start":
-      return /* @__PURE__ */ jsx12(HomeScreen, { onNavigate: setScreen });
+      return /* @__PURE__ */ jsx13(HomeScreen, { onNavigate: setScreen });
   }
 }
 var CLEAR_SCREEN = "\x1B[2J\x1B[H";
 async function renderUntilImportRequestedOrExit(renderApp, importExitCode) {
   let requestedImport;
   const instance = renderApp(
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       App,
       {
         importExitCode,