@contentful/experience-design-system-cli 2.34.3 → 2.34.4-dev-build-ddc181b.0

package/dist/src/index.js

@@ -11781,6 +11781,8 @@ function FinalizeDialog({
   onConfirm,
   onCancel,
   removed = [],
+  // Default 'done' so callers that pass a ready `removed` list (e.g. the atomic
+  // review step) render it immediately without threading a status.
   previewStatus = "done",
   removedScrollOffset = 0
 }) {
@@ -14296,6 +14298,33 @@ var init_SelectView = __esm({
   }
 });
 
+// packages/experience-design-system-cli/src/lib/composition-mode.ts
+function isCompositionMode(value) {
+  return COMPOSITION_MODES.includes(value);
+}
+function hasCompositionSource(opts) {
+  return !!opts.compositionMap || !!opts.compositionAgent || !!opts.compositionRefresh || !!opts.generateMap;
+}
+function resolveCompositionMode(opts, configMode) {
+  if (opts.composite) return "composite";
+  if (opts.atomic) return "atomic";
+  if (hasCompositionSource(opts)) return "composite";
+  const env = process.env["EXPERIENCES_COMPOSITION_MODE"];
+  if (env !== void 0 && env !== "") {
+    const v = env.toLowerCase();
+    if (isCompositionMode(v)) return v;
+  }
+  if (configMode && isCompositionMode(configMode)) return configMode;
+  return "atomic";
+}
+var COMPOSITION_MODES;
+var init_composition_mode = __esm({
+  "packages/experience-design-system-cli/src/lib/composition-mode.ts"() {
+    "use strict";
+    COMPOSITION_MODES = ["composite", "atomic"];
+  }
+});
+
 // packages/experience-design-system-cli/src/lib/command-options.ts
 function addArtifactInputOptions(cmd) {
   return cmd.option("--components <path>", "Path to components.json (CDF)").option("--tokens <path>", "Path to tokens.json (DTCG)").option("--session <id>", "Pipeline session ID to load generated components from");
@@ -14303,6 +14332,9 @@ function addArtifactInputOptions(cmd) {
 function addContentfulTargetOptions(cmd) {
   return cmd.requiredOption("--space-id <id>", "Contentful space ID").requiredOption("--environment-id <id>", "Contentful environment ID").option("--cma-token <token>", "CMA personal access token (or set CONTENTFUL_MANAGEMENT_TOKEN)").option("--host <url>", "Override API base URL");
 }
+function addCompositionOptions(cmd) {
+  return cmd.option("--composite", "Import embedded-component hierarchy (opt in; default is atomic)").option("--atomic", "Import flat components with no embedded-component hierarchy (default)");
+}
 function collectOptionValue(value, previous) {
   return [...previous, value];
 }
@@ -14321,9 +14353,116 @@ var init_command_options = __esm({
   }
 });
 
+// packages/experience-design-system-cli/src/import/strip-allowed-components.ts
+function stripAllowedComponents(components) {
+  return components.map(({ key, entry }) => {
+    if (!entry.$slots) return { key, entry };
+    const $slots = {};
+    for (const [slotName, slotDef] of Object.entries(entry.$slots)) {
+      const { $allowedComponents: _dropped, ...rest } = slotDef;
+      $slots[slotName] = rest;
+    }
+    return { key, entry: { ...entry, $slots } };
+  });
+}
+var init_strip_allowed_components = __esm({
+  "packages/experience-design-system-cli/src/import/strip-allowed-components.ts"() {
+    "use strict";
+  }
+});
+
+// packages/experience-design-system-cli/src/credentials-store.ts
+var credentials_store_exports = {};
+__export(credentials_store_exports, {
+  experiencesCredentialsPath: () => experiencesCredentialsPath,
+  readExperiencesCredentials: () => readExperiencesCredentials,
+  writeExperiencesCredentials: () => writeExperiencesCredentials
+});
+import { readFile as readFile8, writeFile as writeFile2, mkdir as mkdir2 } from "node:fs/promises";
+import { join as join11 } from "node:path";
+import { homedir as homedir4 } from "node:os";
+async function readExperiencesCredentials() {
+  try {
+    const raw = await readFile8(CREDENTIALS_PATH, "utf8");
+    const parsed = JSON.parse(raw);
+    const host = toConfiguredHost(parsed.host || process.env["EDS_HOST"]);
+    return {
+      spaceId: parsed.spaceId || process.env["CONTENTFUL_SPACE_ID"] || "",
+      environmentId: parsed.environmentId || process.env["CONTENTFUL_ENVIRONMENT_ID"] || "",
+      cmaToken: parsed.cmaToken || process.env["CONTENTFUL_MANAGEMENT_TOKEN"] || "",
+      ...host ? { host } : {},
+      ...parsed.agent ? { agent: parsed.agent } : {},
+      ...parsed.agentModel ? { agentModel: parsed.agentModel } : {},
+      ...parsed.selectPromptPath ? { selectPromptPath: parsed.selectPromptPath } : {},
+      ...parsed.generatePromptPath ? { generatePromptPath: parsed.generatePromptPath } : {},
+      ...typeof parsed.autoFilter === "boolean" ? { autoFilter: parsed.autoFilter } : {},
+      ...typeof parsed.debug === "boolean" ? { debug: parsed.debug } : {},
+      ...typeof parsed.analyticsDisabled === "boolean" ? { analyticsDisabled: parsed.analyticsDisabled } : {},
+      ...typeof parsed.compositionMode === "string" && isCompositionMode(parsed.compositionMode) ? { compositionMode: parsed.compositionMode } : {}
+    };
+  } catch {
+    const host = toConfiguredHost(process.env["EDS_HOST"]);
+    return {
+      spaceId: process.env["CONTENTFUL_SPACE_ID"] ?? "",
+      environmentId: process.env["CONTENTFUL_ENVIRONMENT_ID"] ?? "",
+      cmaToken: process.env["CONTENTFUL_MANAGEMENT_TOKEN"] ?? "",
+      ...host ? { host } : {}
+    };
+  }
+}
+async function writeExperiencesCredentials(creds) {
+  const {
+    host: _host,
+    agent,
+    agentModel,
+    selectPromptPath,
+    generatePromptPath,
+    autoFilter,
+    debug,
+    analyticsDisabled,
+    compositionMode,
+    ...rest
+  } = creds;
+  const host = toConfiguredHost(creds.host);
+  await mkdir2(CREDENTIALS_DIR, { recursive: true });
+  await writeFile2(
+    CREDENTIALS_PATH,
+    JSON.stringify(
+      {
+        ...rest,
+        ...host ? { host } : {},
+        ...agent ? { agent } : {},
+        ...agentModel ? { agentModel } : {},
+        ...selectPromptPath ? { selectPromptPath } : {},
+        ...generatePromptPath ? { generatePromptPath } : {},
+        ...typeof autoFilter === "boolean" ? { autoFilter } : {},
+        ...typeof debug === "boolean" ? { debug } : {},
+        ...typeof analyticsDisabled === "boolean" ? { analyticsDisabled } : {},
+        ...compositionMode && isCompositionMode(compositionMode) ? { compositionMode } : {}
+      },
+      null,
+      2
+    ) + "\n",
+    { mode: 384 }
+  );
+}
+function experiencesCredentialsPath() {
+  return CREDENTIALS_PATH;
+}
+var CREDENTIALS_DIR, CREDENTIALS_PATH;
+var init_credentials_store = __esm({
+  "packages/experience-design-system-cli/src/credentials-store.ts"() {
+    "use strict";
+    init_host_utils();
+    init_composition_mode();
+    CREDENTIALS_DIR = join11(homedir4(), ".config", "experiences");
+    CREDENTIALS_PATH = join11(CREDENTIALS_DIR, "credentials.json");
+  }
+});
+
 // packages/experience-design-system-cli/src/analytics/client.ts
 import { readFileSync as readFileSync7 } from "node:fs";
-import { join as join11 } from "node:path";
+import { join as join12 } from "node:path";
 import { Analytics } from "@segment/analytics-node";
 function cliVersion() {
   return pkg2.version;
@@ -14377,7 +14516,7 @@ var init_client2 = __esm({
   "packages/experience-design-system-cli/src/analytics/client.ts"() {
     "use strict";
     init_cli_path();
-    pkg2 = JSON.parse(readFileSync7(join11(findPkgRoot(), "package.json"), "utf8"));
+    pkg2 = JSON.parse(readFileSync7(join12(findPkgRoot(), "package.json"), "utf8"));
     DEFAULT_WRITE_KEY = "6DmxiEPN3SV1vbRTTMcNqDzCvkfwT06N";
     analyticsClient = null;
     persistedDisabled = false;
@@ -14673,8 +14812,8 @@ var init_path_exists = __esm({
 // packages/experience-design-system-cli/src/apply/command.ts
 import { createElement, useState as useState6 } from "react";
 import { render, useInput as useInput2 } from "ink";
-import { readFile as readFile8, readdir, stat } from "node:fs/promises";
-import { join as join12 } from "node:path";
+import { readFile as readFile9, readdir, stat } from "node:fs/promises";
+import { join as join13 } from "node:path";
 import {
   validateCDF,
   flattenDTCG as flattenDTCG2,
@@ -14696,7 +14835,7 @@ async function assertFileExists(flag, p) {
 async function readJsonFile(flag, p) {
   let text;
   try {
-    text = await readFile8(p, "utf8");
+    text = await readFile9(p, "utf8");
   } catch {
     return await die(`Error: file not found: ${p} (from ${flag})`);
   }
@@ -14718,7 +14857,7 @@ async function collectJsonFiles(dir) {
     await Promise.all(
       entries.map(async (entry) => {
         if (IGNORE_TOKEN_DIRS.has(entry)) return;
-        const full = join12(current, entry);
+        const full = join13(current, entry);
         let s;
         try {
           s = await stat(full);
@@ -14750,7 +14889,7 @@ async function readTokensFromPath(flag, p) {
     for (const file of files.sort()) {
       let text;
       try {
-        text = await readFile8(file, "utf8");
+        text = await readFile9(file, "utf8");
       } catch {
         continue;
       }
@@ -14787,6 +14926,7 @@ ${errors.map((e) => `  ${e.path}: ${e.message}`).join("\n")}`
 function addSharedApplyOptions(command) {
   addArtifactInputOptions(command);
   addContentfulTargetOptions(command);
+  addCompositionOptions(command);
 }
 function splitSelectedKeys(selectedKeys) {
   const selectedComponentKeys = /* @__PURE__ */ new Set();
@@ -14939,6 +15079,14 @@ async function resolveSharedInputs(opts) {
     }
     components = result.components;
   }
+  let configMode;
+  try {
+    configMode = (await readExperiencesCredentials()).compositionMode;
+  } catch {
+  }
+  if (resolveCompositionMode(opts, configMode) === "atomic") {
+    components = stripAllowedComponents(components);
+  }
   let tokens = [];
   if (opts.tokens) {
     tokens = await readTokensFromPath("--tokens", opts.tokens);
@@ -15426,7 +15574,10 @@ var init_command = __esm({
     init_ServerApplyView();
     init_SelectView();
     init_contentful_urls();
+    init_composition_mode();
     init_command_options();
+    init_strip_allowed_components();
+    init_credentials_store();
     init_terminal_capabilities();
     init_analytics();
     init_path_exists();
@@ -15445,7 +15596,7 @@ var init_manifest = __esm({
 // packages/experience-design-system-cli/src/analyze/select/tui/App.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState7 } from "react";
 import { Box as Box17, Text as Text18, useStdout as useStdout2 } from "ink";
-import { readFile as readFile9 } from "node:fs/promises";
+import { readFile as readFile10 } from "node:fs/promises";
 import { buildManifest as buildManifest2 } from "@contentful/experience-design-system-types";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function App({ sessionId: sessionId2, artifactsRoot, reviewRoot }) {
@@ -15610,7 +15761,7 @@ function App({ sessionId: sessionId2, artifactsRoot, reviewRoot }) {
     if (!session || !selectedId) return;
     const selectedComponent = session.components.find((c2) => c2.id === selectedId);
     if (!selectedComponent || selectedComponent.sourceCode !== null) return;
-    readFile9(selectedComponent.resolvedSourcePath, "utf8").then((code) => {
+    readFile10(selectedComponent.resolvedSourcePath, "utf8").then((code) => {
       setSession((prev) => {
         if (!prev) return prev;
         return {
@@ -16125,7 +16276,7 @@ var init_component_patch = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/command.ts
-import { access as access4, readFile as readFile10 } from "node:fs/promises";
+import { access as access4, readFile as readFile11 } from "node:fs/promises";
 import { dirname as dirname10, resolve as resolve11 } from "node:path";
 import { createElement as createElement2 } from "react";
 import { render as render2 } from "ink";
@@ -16216,7 +16367,7 @@ async function runNonInteractive(snapshot, opts, paths, sessionId2) {
   if (opts.patch) {
     let patchOps;
     try {
-      const raw = await readFile10(resolve11(opts.patch), "utf8");
+      const raw = await readFile11(resolve11(opts.patch), "utf8");
       const parsed = JSON.parse(raw);
       if (!Array.isArray(parsed)) {
         process.stderr.write(`Error: --patch file must be a JSON array of patch operations: ${opts.patch}
@@ -16274,7 +16425,7 @@ async function patchReviewStateWithValidationErrors(sessionId2, errors, opts = {
   let snapshot;
   try {
     await access4(paths.statePath);
-    snapshot = JSON.parse(await readFile10(paths.statePath, "utf8"));
+    snapshot = JSON.parse(await readFile11(paths.statePath, "utf8"));
   } catch {
     snapshot = await loadAndValidateForReview(sessionId2, void 0);
     snapshot = await ensureRefineSession(sessionId2, artifactsRoot, snapshot);
@@ -16325,7 +16476,7 @@ async function rejectComponentsByName(sessionId2, names, opts = {}) {
   const nameSet = new Set(names);
   let snapshot;
   try {
-    snapshot = JSON.parse(await readFile10(paths.statePath, "utf8"));
+    snapshot = JSON.parse(await readFile11(paths.statePath, "utf8"));
   } catch {
     return;
   }
@@ -16470,91 +16621,6 @@ var init_command2 = __esm({
   }
 });
 
-// packages/experience-design-system-cli/src/credentials-store.ts
-var credentials_store_exports = {};
-__export(credentials_store_exports, {
-  experiencesCredentialsPath: () => experiencesCredentialsPath,
-  readExperiencesCredentials: () => readExperiencesCredentials,
-  writeExperiencesCredentials: () => writeExperiencesCredentials
-});
-import { readFile as readFile12, writeFile as writeFile2, mkdir as mkdir2 } from "node:fs/promises";
-import { join as join13 } from "node:path";
-import { homedir as homedir4 } from "node:os";
-async function readExperiencesCredentials() {
-  try {
-    const raw = await readFile12(CREDENTIALS_PATH, "utf8");
-    const parsed = JSON.parse(raw);
-    const host = toConfiguredHost(parsed.host || process.env["EDS_HOST"]);
-    return {
-      spaceId: parsed.spaceId || process.env["CONTENTFUL_SPACE_ID"] || "",
-      environmentId: parsed.environmentId || process.env["CONTENTFUL_ENVIRONMENT_ID"] || "",
-      cmaToken: parsed.cmaToken || process.env["CONTENTFUL_MANAGEMENT_TOKEN"] || "",
-      ...host ? { host } : {},
-      ...parsed.agent ? { agent: parsed.agent } : {},
-      ...parsed.agentModel ? { agentModel: parsed.agentModel } : {},
-      ...parsed.selectPromptPath ? { selectPromptPath: parsed.selectPromptPath } : {},
-      ...parsed.generatePromptPath ? { generatePromptPath: parsed.generatePromptPath } : {},
-      ...typeof parsed.autoFilter === "boolean" ? { autoFilter: parsed.autoFilter } : {},
-      ...typeof parsed.debug === "boolean" ? { debug: parsed.debug } : {},
-      ...typeof parsed.analyticsDisabled === "boolean" ? { analyticsDisabled: parsed.analyticsDisabled } : {}
-    };
-  } catch {
-    const host = toConfiguredHost(process.env["EDS_HOST"]);
-    return {
-      spaceId: process.env["CONTENTFUL_SPACE_ID"] ?? "",
-      environmentId: process.env["CONTENTFUL_ENVIRONMENT_ID"] ?? "",
-      cmaToken: process.env["CONTENTFUL_MANAGEMENT_TOKEN"] ?? "",
-      ...host ? { host } : {}
-    };
-  }
-}
-async function writeExperiencesCredentials(creds) {
-  const {
-    host: _host,
-    agent,
-    agentModel,
-    selectPromptPath,
-    generatePromptPath,
-    autoFilter,
-    debug,
-    analyticsDisabled,
-    ...rest
-  } = creds;
-  const host = toConfiguredHost(creds.host);
-  await mkdir2(CREDENTIALS_DIR, { recursive: true });
-  await writeFile2(
-    CREDENTIALS_PATH,
-    JSON.stringify(
-      {
-        ...rest,
-        ...host ? { host } : {},
-        ...agent ? { agent } : {},
-        ...agentModel ? { agentModel } : {},
-        ...selectPromptPath ? { selectPromptPath } : {},
-        ...generatePromptPath ? { generatePromptPath } : {},
-        ...typeof autoFilter === "boolean" ? { autoFilter } : {},
-        ...typeof debug === "boolean" ? { debug } : {},
-        ...typeof analyticsDisabled === "boolean" ? { analyticsDisabled } : {}
-      },
-      null,
-      2
-    ) + "\n",
-    { mode: 384 }
-  );
-}
-function experiencesCredentialsPath() {
-  return CREDENTIALS_PATH;
-}
-var CREDENTIALS_DIR, CREDENTIALS_PATH;
-var init_credentials_store = __esm({
-  "packages/experience-design-system-cli/src/credentials-store.ts"() {
-    "use strict";
-    init_host_utils();
-    CREDENTIALS_DIR = join13(homedir4(), ".config", "experiences");
-    CREDENTIALS_PATH = join13(CREDENTIALS_DIR, "credentials.json");
-  }
-});
-
 // packages/experience-design-system-cli/src/import/path-utils.ts
 import { resolve as resolve22 } from "node:path";
 import { homedir as homedir6 } from "node:os";
@@ -21993,13 +22059,29 @@ var init_ScopeGateStep = __esm({
   }
 });
 
-// packages/experience-design-system-cli/src/import/tui/scope-gate-host.tsx
+// packages/experience-design-system-cli/src/import/tui/steps/useTerminalColumns.ts
+import { useStdout as useStdout5 } from "ink";
+function useTerminalColumns() {
+  const { stdout } = useStdout5();
+  return stdout?.columns ?? 80;
+}
+var init_useTerminalColumns = __esm({
+  "packages/experience-design-system-cli/src/import/tui/steps/useTerminalColumns.ts"() {
+    "use strict";
+  }
+});
+
+// packages/experience-design-system-cli/src/import/tui/steps/AtomicScopeGateStep.tsx
 import { Box as Box43, Text as Text46 } from "ink";
-import React20 from "react";
+import React20, { useMemo as useMemo6, useState as useState23 } from "react";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
-function ScopeGateHost({
+function truncateReason(reason) {
+  if (reason === null || reason === void 0 || reason === "") return "<no reason given>";
+  if (reason.length <= REASON_DISPLAY_MAX) return reason;
+  return reason.slice(0, REASON_DISPLAY_MAX - 1).trimEnd() + "\u2026";
+}
+function AtomicScopeGateStep({
   components,
-  autoAccept,
   onConfirm,
   onQuit,
   aiFilterStatus = "idle",
@@ -22007,51 +22089,357 @@ function ScopeGateHost({
   aiFilterError = null,
   onCancelAutoFilter
 }) {
-  if (components.length === 0) {
-    return /* @__PURE__ */ jsx49(Box43, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx49(Text46, { color: PALETTE.error, children: "Error: no components found for this session \u2014 please re-run analyze extract." }) });
-  }
-  if (autoAccept) {
-    return /* @__PURE__ */ jsx49(ScopeGateAutoAccept, { components, onConfirm });
-  }
-  return /* @__PURE__ */ jsx49(
-    ScopeGateStep,
-    {
-      components: [...components],
-      onConfirm,
-      onQuit,
-      aiFilterStatus,
-      aiFilterProgress,
-      aiFilterError,
-      onCancelAutoFilter
+  const totalWidth = useTerminalColumns();
+  const [userExcluded, setUserExcluded] = useState23(/* @__PURE__ */ new Set());
+  const [userUnExcluded, setUserUnExcluded] = useState23(/* @__PURE__ */ new Set());
+  const [cursor, setCursor] = useState23(0);
+  const [scrollOffset, setScrollOffset] = useState23(0);
+  const [reasonPanelOpen, setReasonPanelOpen] = useState23(false);
+  const aiList = components.filter(isAiFlagged);
+  const componentsList = components.filter((c2) => !isAiFlagged(c2));
+  const flatList = [...aiList, ...componentsList];
+  const isIncluded = (row) => {
+    if (userExcluded.has(row.name)) return false;
+    if (userUnExcluded.has(row.name)) return true;
+    return !isAiFlagged(row);
+  };
+  const partition = () => {
+    const accepted = [];
+    const rejected = [];
+    for (const c2 of flatList) {
+      if (isIncluded(c2)) accepted.push(c2.name);
+      else rejected.push(c2.name);
     }
-  );
-}
-function ScopeGateAutoAccept({
-  components,
-  onConfirm
-}) {
-  React20.useEffect(() => {
-    onConfirm({ accepted: components.map((c2) => c2.name), rejected: [] });
-  }, []);
-  return /* @__PURE__ */ jsx49(Box43, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsxs44(Text46, { dimColor: true, children: [
-    "Auto-accepting ",
-    components.length,
-    " components..."
-  ] }) });
-}
-var init_scope_gate_host = __esm({
-  "packages/experience-design-system-cli/src/import/tui/scope-gate-host.tsx"() {
-    "use strict";
-    init_theme();
-    init_ScopeGateStep();
-  }
-});
-
-// packages/experience-design-system-cli/src/import/tui/merge-ai-decisions.ts
-function mergeAiDecisions(components, aiDecisions) {
-  return components.map((component) => {
-    if (component.aiDecision !== null && component.aiDecision !== void 0) {
-      return component;
+    return { accepted, rejected };
+  };
+  const toggleFocused = () => {
+    const target = flatList[cursor];
+    if (!target) return;
+    const currentlyIn = isIncluded(target);
+    if (currentlyIn) {
+      setUserExcluded((prev) => {
+        if (prev.has(target.name)) return prev;
+        const next = new Set(prev);
+        next.add(target.name);
+        return next;
+      });
+      setUserUnExcluded((prev) => {
+        if (!prev.has(target.name)) return prev;
+        const next = new Set(prev);
+        next.delete(target.name);
+        return next;
+      });
+    } else {
+      setUserUnExcluded((prev) => {
+        if (prev.has(target.name)) return prev;
+        const next = new Set(prev);
+        next.add(target.name);
+        return next;
+      });
+      setUserExcluded((prev) => {
+        if (!prev.has(target.name)) return prev;
+        const next = new Set(prev);
+        next.delete(target.name);
+        return next;
+      });
+    }
+  };
+  useImmediateInput((input, key) => {
+    if (input === "q" || key.escape) {
+      if (aiFilterStatus === "running" && onCancelAutoFilter) {
+        onCancelAutoFilter();
+        return;
+      }
+      if (key.escape && reasonPanelOpen) {
+        setReasonPanelOpen(false);
+        return;
+      }
+      onQuit();
+      return;
+    }
+    if (input === "f" || input === "F") {
+      onConfirm(partition());
+      return;
+    }
+    if (input === "s") {
+      setReasonPanelOpen((prev) => !prev);
+      return;
+    }
+    if (input === "a" || input === " " || input === "r") {
+      toggleFocused();
+      return;
+    }
+    if (input === "A") {
+      const compNames = componentsList.map((c2) => c2.name);
+      const anyCompExcluded = componentsList.some((c2) => !isIncluded(c2));
+      if (anyCompExcluded) {
+        setUserUnExcluded((prev) => {
+          const next = new Set(prev);
+          for (const n of compNames) next.add(n);
+          return next;
+        });
+        setUserExcluded((prev) => {
+          const next = new Set(prev);
+          for (const n of compNames) next.delete(n);
+          return next;
+        });
+      } else {
+        setUserExcluded((prev) => {
+          const next = new Set(prev);
+          for (const n of compNames) next.add(n);
+          return next;
+        });
+        setUserUnExcluded((prev) => {
+          const next = new Set(prev);
+          for (const n of compNames) next.delete(n);
+          return next;
+        });
+      }
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      const len = flatList.length;
+      if (len === 0) return;
+      setCursor((c2) => {
+        const next = c2 <= 0 ? 0 : c2 - 1;
+        setScrollOffset((prev) => Math.min(prev, next));
+        return next;
+      });
+      return;
+    }
+    if (key.downArrow || input === "j") {
+      const len = flatList.length;
+      if (len === 0) return;
+      setCursor((c2) => {
+        const next = c2 >= len - 1 ? len - 1 : c2 + 1;
+        setScrollOffset((prev) => next >= prev + VISIBLE_COUNT2 ? next - VISIBLE_COUNT2 + 1 : prev);
+        return next;
+      });
+      return;
+    }
+  });
+  const total = flatList.length;
+  const includedCount = useMemo6(
+    () => flatList.filter((c2) => isIncluded(c2)).length,
+    [components, userExcluded, userUnExcluded]
+  );
+  const hasAnyAi = flatList.some(isAiFlagged);
+  const visibleEnd = Math.min(scrollOffset + VISIBLE_COUNT2, total);
+  const visible = flatList.slice(scrollOffset, visibleEnd);
+  const above = scrollOffset;
+  const below = Math.max(0, total - visibleEnd);
+  const allRejected = aiFilterStatus === "complete" && total > 0 && userExcluded.size === 0 && userUnExcluded.size === 0 && flatList.every((c2) => !isIncluded(c2));
+  const counters = {
+    accepted: includedCount,
+    rejected: total - includedCount,
+    undecided: 0,
+    groups: 0,
+    total
+  };
+  return /* @__PURE__ */ jsxs44(Box43, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx49(Text46, { color: PALETTE.success, children: "\u2713 Extraction complete" }),
+    /* @__PURE__ */ jsxs44(Text46, { dimColor: true, children: [
+      "Found ",
+      total,
+      " component",
+      total === 1 ? "" : "s",
+      ". Pick which ones to import. Generation runs only on the included set."
+    ] }),
+    /* @__PURE__ */ jsx49(AutoFilterBanner, { status: aiFilterStatus, progress: aiFilterProgress, error: aiFilterError }),
+    /* @__PURE__ */ jsx49(CounterStrip, { counters, totalWidth }),
+    reasonPanelOpen && flatList[cursor] !== void 0 && isAiFlagged(flatList[cursor]) && /* @__PURE__ */ jsxs44(Box43, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.border, paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx49(Text46, { dimColor: true, bold: true, children: `Review reason: ${flatList[cursor].name}` }),
+      /* @__PURE__ */ jsx49(Text46, { children: flatList[cursor].aiReason ?? "<no reason given>" }),
+      /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "[s] close \xB7 [Esc] close" })
+    ] }),
+    allRejected ? /* @__PURE__ */ jsx49(Box43, { marginTop: 1, children: /* @__PURE__ */ jsx49(Text46, { color: PALETTE.warning, children: "AI excluded all components \u2014 press [a] to override or [q] to quit" }) }) : /* @__PURE__ */ jsxs44(Box43, { flexDirection: "column", marginTop: 1, children: [
+      above > 0 && /* @__PURE__ */ jsxs44(Text46, { dimColor: true, children: [
+        "\u2191 ",
+        above,
+        " above"
+      ] }),
+      visible.map((c2, vi) => {
+        const i = vi + scrollOffset;
+        const isCursor = i === cursor;
+        const included = isIncluded(c2);
+        const aiFlagged = isAiFlagged(c2);
+        const prefix = isCursor ? "\u203A" : " ";
+        const stateGlyph = included ? "[\u2713]" : "[\u2717]";
+        const stateColor = included ? PALETTE.success : PALETTE.error;
+        const aiMarkerNode = aiFlagged ? /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: `${AI_MARKER} ` }) : null;
+        const inlineReason = !isCursor && aiFlagged ? ` ${truncateReason(c2.aiReason)}` : "";
+        const showAiHeader = aiList.length > 0 && i === 0;
+        const showComponentsHeader = componentsList.length > 0 && i === aiList.length;
+        const header = showAiHeader ? /* @__PURE__ */ jsx49(Text46, { bold: true, children: `Review flags (${aiList.length})` }, `hdr-ai-${i}`) : showComponentsHeader ? /* @__PURE__ */ jsx49(Text46, { bold: true, children: `Components (${componentsList.length})` }, `hdr-comp-${i}`) : null;
+        if (isCursor) {
+          const wrapReason = aiFlagged && c2.aiReason !== null && c2.aiReason !== void 0 && c2.aiReason.length > 0;
+          return /* @__PURE__ */ jsxs44(React20.Fragment, { children: [
+            header,
+            /* @__PURE__ */ jsxs44(Text46, { children: [
+              /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: `${prefix} ` }),
+              aiMarkerNode,
+              /* @__PURE__ */ jsx49(Text46, { color: stateColor, children: stateGlyph }),
+              /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: ` ${c2.name}` })
+            ] }),
+            wrapReason && /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: `${REASON_WRAP_INDENT}${c2.aiReason}` })
+          ] }, c2.componentId);
+        }
+        return /* @__PURE__ */ jsxs44(React20.Fragment, { children: [
+          header,
+          /* @__PURE__ */ jsxs44(Text46, { children: [
+            /* @__PURE__ */ jsx49(Text46, { children: `${prefix} ` }),
+            aiMarkerNode,
+            /* @__PURE__ */ jsx49(Text46, { color: stateColor, children: stateGlyph }),
+            /* @__PURE__ */ jsx49(Text46, { color: stateColor, children: ` ${c2.name}` }),
+            inlineReason !== "" && /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: inlineReason })
+          ] })
+        ] }, c2.componentId);
+      }),
+      below > 0 && /* @__PURE__ */ jsxs44(Text46, { dimColor: true, children: [
+        "\u2193 ",
+        below,
+        " below"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs44(Box43, { gap: 3, marginTop: 1, children: [
+      includedCount > 0 ? /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.success, children: includedCount }),
+        /* @__PURE__ */ jsxs44(Text46, { dimColor: true, children: [
+          "/",
+          total,
+          " included"
+        ] })
+      ] }) : /* @__PURE__ */ jsx49(Text46, { color: PALETTE.warning, children: "none included" }),
+      /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "[j/k]" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "move" })
+      ] }),
+      /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "[a/space]" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "toggle" })
+      ] }),
+      /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "[A]" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "toggle all" })
+      ] }),
+      /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "[f]" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "continue" })
+      ] }),
+      /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "[q]" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "quit" })
+      ] }),
+      hasAnyAi && /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "[s]" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "review reason" })
+      ] }),
+      hasAnyAi && /* @__PURE__ */ jsxs44(Text46, { children: [
+        /* @__PURE__ */ jsx49(Text46, { color: PALETTE.info, children: "*" }),
+        " ",
+        /* @__PURE__ */ jsx49(Text46, { dimColor: true, children: "requires review" })
+      ] })
+    ] })
+  ] });
+}
+var VISIBLE_COUNT2, REASON_DISPLAY_MAX, AI_MARKER, REASON_WRAP_INDENT;
+var init_AtomicScopeGateStep = __esm({
+  "packages/experience-design-system-cli/src/import/tui/steps/AtomicScopeGateStep.tsx"() {
+    "use strict";
+    init_useImmediateInput();
+    init_theme();
+    init_AutoFilterBanner();
+    init_CounterStrip();
+    init_ai_flag();
+    init_useTerminalColumns();
+    VISIBLE_COUNT2 = 10;
+    REASON_DISPLAY_MAX = 60;
+    AI_MARKER = "*";
+    REASON_WRAP_INDENT = "      ";
+  }
+});
+
+// packages/experience-design-system-cli/src/import/tui/scope-gate-host.tsx
+import { Box as Box44, Text as Text47 } from "ink";
+import React21 from "react";
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+function ScopeGateHost({
+  components,
+  autoAccept,
+  compositionMode = "atomic",
+  onConfirm,
+  onQuit,
+  aiFilterStatus = "idle",
+  aiFilterProgress = null,
+  aiFilterError = null,
+  onCancelAutoFilter
+}) {
+  if (components.length === 0) {
+    return /* @__PURE__ */ jsx50(Box44, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx50(Text47, { color: PALETTE.error, children: "Error: no components found for this session \u2014 please re-run analyze extract." }) });
+  }
+  if (autoAccept) {
+    return /* @__PURE__ */ jsx50(ScopeGateAutoAccept, { components, onConfirm });
+  }
+  if (compositionMode === "atomic") {
+    return /* @__PURE__ */ jsx50(
+      AtomicScopeGateStep,
+      {
+        components: [...components],
+        onConfirm,
+        onQuit,
+        aiFilterStatus,
+        aiFilterProgress,
+        aiFilterError,
+        onCancelAutoFilter
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx50(
+    ScopeGateStep,
+    {
+      components: [...components],
+      onConfirm,
+      onQuit,
+      aiFilterStatus,
+      aiFilterProgress,
+      aiFilterError,
+      onCancelAutoFilter
+    }
+  );
+}
+function ScopeGateAutoAccept({
+  components,
+  onConfirm
+}) {
+  React21.useEffect(() => {
+    onConfirm({ accepted: components.map((c2) => c2.name), rejected: [] });
+  }, []);
+  return /* @__PURE__ */ jsx50(Box44, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsxs45(Text47, { dimColor: true, children: [
+    "Auto-accepting ",
+    components.length,
+    " components..."
+  ] }) });
+}
+var init_scope_gate_host = __esm({
+  "packages/experience-design-system-cli/src/import/tui/scope-gate-host.tsx"() {
+    "use strict";
+    init_theme();
+    init_ScopeGateStep();
+    init_AtomicScopeGateStep();
+  }
+});
+
+// packages/experience-design-system-cli/src/import/tui/merge-ai-decisions.ts
+function mergeAiDecisions(components, aiDecisions) {
+  return components.map((component) => {
+    if (component.aiDecision !== null && component.aiDecision !== void 0) {
+      return component;
     }
     const streamed = aiDecisions[component.name];
     if (!streamed) {
@@ -22312,7 +22700,7 @@ var init_runLivePreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/useFinalizePreview.ts
-import { useEffect as useEffect7, useRef as useRef5, useState as useState23 } from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState24 } from "react";
 function useReviewFinalizePreview({
   components,
   ...options
@@ -22324,9 +22712,9 @@ function useReviewFinalizePreview({
 }
 function useFinalizePreview(opts) {
   const { open, extractSessionId, tokensPath, spaceId, environmentId, cmaToken, host, acceptedKeys, allowDeletions } = opts;
-  const [status, setStatus] = useState23("idle");
-  const [removed, setRemoved] = useState23([]);
-  const [scrollOffset, setScrollOffset] = useState23(0);
+  const [status, setStatus] = useState24("idle");
+  const [removed, setRemoved] = useState24([]);
+  const [scrollOffset, setScrollOffset] = useState24(0);
   const generationRef = useRef5(0);
   const acceptedKey = [...acceptedKeys].sort().join("\0");
   useEffect7(() => {
@@ -22542,14 +22930,14 @@ var init_scroll_offset = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/FieldEditor.tsx
-import React21, { useState as useState24 } from "react";
-import { Box as Box44, Text as Text47 } from "ink";
+import React22, { useState as useState25 } from "react";
+import { Box as Box45, Text as Text48 } from "ink";
 import {
   CDF_PROPERTY_TYPES,
   CDF_PROPERTY_CATEGORIES,
   DESIGN_TOKEN_TYPES as DESIGN_TOKEN_TYPES2
 } from "@contentful/experience-design-system-types";
-import { Fragment as Fragment14, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 function removeAt(values, index) {
   return values.filter((_, i) => i !== index);
 }
@@ -22672,25 +23060,25 @@ function serializeState(state, originalJson) {
   return JSON.stringify(entry, null, 2);
 }
 function Picker({ value, active }) {
-  return /* @__PURE__ */ jsxs45(Box44, { children: [
-    active && /* @__PURE__ */ jsx50(Text47, { color: PALETTE.info, children: "\u2039" }),
-    /* @__PURE__ */ jsx50(Text47, { color: active ? PALETTE.info : PALETTE.inverse, bold: active, children: value }),
-    active && /* @__PURE__ */ jsx50(Text47, { color: PALETTE.info, children: "\u203A" })
+  return /* @__PURE__ */ jsxs46(Box45, { children: [
+    active && /* @__PURE__ */ jsx51(Text48, { color: PALETTE.info, children: "\u2039" }),
+    /* @__PURE__ */ jsx51(Text48, { color: active ? PALETTE.info : PALETTE.inverse, bold: active, children: value }),
+    active && /* @__PURE__ */ jsx51(Text48, { color: PALETTE.info, children: "\u203A" })
   ] });
 }
 function Toggle({ value, active }) {
-  return /* @__PURE__ */ jsx50(Box44, { children: /* @__PURE__ */ jsx50(Text47, { color: active ? PALETTE.info : value ? PALETTE.success : void 0, children: value ? "[\u2713]" : "[ ]" }) });
+  return /* @__PURE__ */ jsx51(Box45, { children: /* @__PURE__ */ jsx51(Text48, { color: active ? PALETTE.info : value ? PALETTE.success : void 0, children: value ? "[\u2713]" : "[ ]" }) });
 }
 function DefaultValueRow({ display, active }) {
-  return /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-    /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "default:" }),
-    active ? /* @__PURE__ */ jsx50(Picker, { value: display, active: true }) : /* @__PURE__ */ jsx50(Text47, { color: PALETTE.inverse, children: display })
+  return /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+    /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "default:" }),
+    active ? /* @__PURE__ */ jsx51(Picker, { value: display, active: true }) : /* @__PURE__ */ jsx51(Text48, { color: PALETTE.inverse, children: display })
   ] });
 }
 function RowLabel({ name, selected }) {
   const nameDisplay = name.length > 14 ? name.slice(0, 13) + "\u2026" : name.padEnd(14);
-  return /* @__PURE__ */ jsxs45(
-    Text47,
+  return /* @__PURE__ */ jsxs46(
+    Text48,
     {
       color: selected ? PALETTE.inverse : PALETTE.info,
       bold: selected,
@@ -22708,10 +23096,10 @@ function ValueInputRow({
   valueText,
   cursorVisible
 }) {
-  return /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, children: [
-    /* @__PURE__ */ jsx50(Text47, { color: PALETTE.info, children: mode === "edit" ? "\u270E " : "+ " }),
-    /* @__PURE__ */ jsx50(Text47, { children: valueText }),
-    /* @__PURE__ */ jsx50(Text47, { inverse: cursorVisible, children: " " })
+  return /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, children: [
+    /* @__PURE__ */ jsx51(Text48, { color: PALETTE.info, children: mode === "edit" ? "\u270E " : "+ " }),
+    /* @__PURE__ */ jsx51(Text48, { children: valueText }),
+    /* @__PURE__ */ jsx51(Text48, { inverse: cursorVisible, children: " " })
   ] });
 }
 function EditableListItem({
@@ -22724,9 +23112,9 @@ function EditableListItem({
 }) {
   const isBeingEdited = editingValue?.mode === "edit" && editingValue.index === index;
   if (isBeingEdited) {
-    return /* @__PURE__ */ jsx50(ValueInputRow, { mode: "edit", valueText, cursorVisible });
+    return /* @__PURE__ */ jsx51(ValueInputRow, { mode: "edit", valueText, cursorVisible });
   }
-  return /* @__PURE__ */ jsx50(Box44, { gap: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx50(Text47, { color: active ? PALETTE.info : PALETTE.inverse, children: active ? `\u25B6 ${value}` : `  ${value}` }) });
+  return /* @__PURE__ */ jsx51(Box45, { gap: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx51(Text48, { color: active ? PALETTE.info : PALETTE.inverse, children: active ? `\u25B6 ${value}` : `  ${value}` }) });
 }
 function EditableValueList({
   values,
@@ -22739,9 +23127,9 @@ function EditableValueList({
   emptyPaddingLeft,
   showAddInput
 }) {
-  return /* @__PURE__ */ jsxs45(Fragment14, { children: [
-    values.length === 0 && !editingValue && (emptyPaddingLeft === void 0 ? /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: emptyMessage }) : /* @__PURE__ */ jsx50(Box44, { paddingLeft: emptyPaddingLeft, children: /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: emptyMessage }) })),
-    values.map((value, index) => /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs46(Fragment14, { children: [
+    values.length === 0 && !editingValue && (emptyPaddingLeft === void 0 ? /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: emptyMessage }) : /* @__PURE__ */ jsx51(Box45, { paddingLeft: emptyPaddingLeft, children: /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: emptyMessage }) })),
+    values.map((value, index) => /* @__PURE__ */ jsx51(
       EditableListItem,
       {
         value,
@@ -22753,7 +23141,7 @@ function EditableValueList({
       },
       index
     )),
-    showAddInput && editingValue?.mode === "add" && /* @__PURE__ */ jsx50(ValueInputRow, { mode: "add", valueText, cursorVisible })
+    showAddInput && editingValue?.mode === "add" && /* @__PURE__ */ jsx51(ValueInputRow, { mode: "add", valueText, cursorVisible })
   ] });
 }
 function DefaultSubRow({
@@ -22764,39 +23152,39 @@ function DefaultSubRow({
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
   if (prop.type === "richtext" || prop.type === "media" || prop.type === "link") {
-    return /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "default:" }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "(not applicable)" })
+    return /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "default:" }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "(not applicable)" })
     ] });
   }
   if (prop.type === "boolean") {
     const display = prop.default === true ? "true" : prop.default === false ? "false" : "(unset)";
-    return /* @__PURE__ */ jsx50(DefaultValueRow, { display, active });
+    return /* @__PURE__ */ jsx51(DefaultValueRow, { display, active });
   }
   if (prop.type === "enum") {
     if (prop.values.length === 0) {
-      return /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-        /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "default:" }),
-        /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "(no values defined)" })
+      return /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+        /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "default:" }),
+        /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "(no values defined)" })
       ] });
     }
     const display = typeof prop.default === "string" && prop.default !== "" ? prop.default : "(unset)";
-    return /* @__PURE__ */ jsx50(DefaultValueRow, { display, active });
+    return /* @__PURE__ */ jsx51(DefaultValueRow, { display, active });
   }
   const value = typeof prop.default === "string" ? prop.default : "";
   if (active) {
-    return /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "default:" }),
-      /* @__PURE__ */ jsxs45(Box44, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-        /* @__PURE__ */ jsx50(Text47, { children: value.slice(0, textCursor) }),
-        /* @__PURE__ */ jsx50(Text47, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
-        /* @__PURE__ */ jsx50(Text47, { children: value.slice(textCursor + 1) })
+    return /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, flexDirection: "row", children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "default:" }),
+      /* @__PURE__ */ jsxs46(Box45, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+        /* @__PURE__ */ jsx51(Text48, { children: value.slice(0, textCursor) }),
+        /* @__PURE__ */ jsx51(Text48, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
+        /* @__PURE__ */ jsx51(Text48, { children: value.slice(textCursor + 1) })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-    /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "default:" }),
-    /* @__PURE__ */ jsx50(Text47, { color: value ? PALETTE.inverse : void 0, dimColor: !value, children: value || "(none)" })
+  return /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+    /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "default:" }),
+    /* @__PURE__ */ jsx51(Text48, { color: value ? PALETTE.inverse : void 0, dimColor: !value, children: value || "(none)" })
   ] });
 }
 function PropRow({
@@ -22814,28 +23202,28 @@ function PropRow({
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
   const descActive = activeField === "description";
-  return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs45(Box44, { gap: 1, children: [
-      /* @__PURE__ */ jsx50(RowLabel, { name: prop.name, selected }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: !selected, children: "type:" }),
-      activeField === "type" ? /* @__PURE__ */ jsx50(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx50(Text47, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }),
-      activeField === "category" && /* @__PURE__ */ jsx50(Picker, { value: prop.category, active: true }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: !selected, children: "req:" }),
-      activeField === "required" ? /* @__PURE__ */ jsx50(Toggle, { value: prop.required, active: true }) : /* @__PURE__ */ jsx50(Toggle, { value: prop.required, active: false }),
-      prop.type === "enum" && /* @__PURE__ */ jsxs45(Fragment14, { children: [
-        /* @__PURE__ */ jsx50(Text47, { dimColor: !selected, children: "values:" }),
-        /* @__PURE__ */ jsxs45(Text47, { color: selected ? PALETTE.warning : PALETTE.inverse, children: [
+  return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsxs46(Box45, { gap: 1, children: [
+      /* @__PURE__ */ jsx51(RowLabel, { name: prop.name, selected }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: !selected, children: "type:" }),
+      activeField === "type" ? /* @__PURE__ */ jsx51(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx51(Text48, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }),
+      activeField === "category" && /* @__PURE__ */ jsx51(Picker, { value: prop.category, active: true }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: !selected, children: "req:" }),
+      activeField === "required" ? /* @__PURE__ */ jsx51(Toggle, { value: prop.required, active: true }) : /* @__PURE__ */ jsx51(Toggle, { value: prop.required, active: false }),
+      prop.type === "enum" && /* @__PURE__ */ jsxs46(Fragment14, { children: [
+        /* @__PURE__ */ jsx51(Text48, { dimColor: !selected, children: "values:" }),
+        /* @__PURE__ */ jsxs46(Text48, { color: selected ? PALETTE.warning : PALETTE.inverse, children: [
           "[",
           prop.values.join(", "),
           "]"
         ] })
       ] }),
-      prop.type === "token" && /* @__PURE__ */ jsxs45(Fragment14, { children: [
-        /* @__PURE__ */ jsx50(Text47, { dimColor: !selected, children: "kind:" }),
-        activeField === "tokenKind" ? /* @__PURE__ */ jsx50(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx50(Text47, { color: selected ? PALETTE.success : PALETTE.inverse, children: prop.tokenKind || "\u2014" })
+      prop.type === "token" && /* @__PURE__ */ jsxs46(Fragment14, { children: [
+        /* @__PURE__ */ jsx51(Text48, { dimColor: !selected, children: "kind:" }),
+        activeField === "tokenKind" ? /* @__PURE__ */ jsx51(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx51(Text48, { color: selected ? PALETTE.success : PALETTE.inverse, children: prop.tokenKind || "\u2014" })
       ] })
     ] }),
-    selected && /* @__PURE__ */ jsx50(
+    selected && /* @__PURE__ */ jsx51(
       DefaultSubRow,
       {
         prop,
@@ -22844,33 +23232,33 @@ function PropRow({
         cursorVisible
       }
     ),
-    selected && descActive && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsxs45(Box44, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-        /* @__PURE__ */ jsx50(Text47, { children: prop.description.slice(0, textCursor) }),
-        /* @__PURE__ */ jsx50(Text47, { inverse: cursorVisible, children: prop.description[textCursor] ?? cursor }),
-        /* @__PURE__ */ jsx50(Text47, { children: prop.description.slice(textCursor + 1) })
+    selected && descActive && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, flexDirection: "row", children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "desc:" }),
+      /* @__PURE__ */ jsxs46(Box45, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+        /* @__PURE__ */ jsx51(Text48, { children: prop.description.slice(0, textCursor) }),
+        /* @__PURE__ */ jsx51(Text48, { inverse: cursorVisible, children: prop.description[textCursor] ?? cursor }),
+        /* @__PURE__ */ jsx51(Text48, { children: prop.description.slice(textCursor + 1) })
       ] })
     ] }),
-    selected && !descActive && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsx50(Text47, { color: PALETTE.success, children: prop.description || "\u2014" })
+    selected && !descActive && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "desc:" }),
+      /* @__PURE__ */ jsx51(Text48, { color: PALETTE.success, children: prop.description || "\u2014" })
     ] }),
-    selected && prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "allowed:" }),
-      activeField === "allowed" ? /* @__PURE__ */ jsx50(Box44, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx50(Text47, { color: prop.allowed.length > 0 ? PALETTE.info : void 0, dimColor: prop.allowed.length === 0, children: prop.allowed.length > 0 ? prop.allowed.join(", ") : "(any)" })
+    selected && prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "allowed:" }),
+      activeField === "allowed" ? /* @__PURE__ */ jsx51(Box45, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx51(Text48, { color: prop.allowed.length > 0 ? PALETTE.info : void 0, dimColor: prop.allowed.length === 0, children: prop.allowed.length > 0 ? prop.allowed.join(", ") : "(any)" })
     ] }),
-    selected && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx50(Box44, { paddingLeft: 2, children: /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: (() => {
+    selected && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx51(Box45, { paddingLeft: 2, children: /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: (() => {
       const max = Math.max(8, width - 8);
       const text = `~ ${rationale}`;
       return text.length > max ? text.slice(0, max - 1) + "\u2026" : text;
     })() }) }, rowKey ? `rationale-${rowKey}` : void 0),
-    selected && prop.type === "enum" && activeField === "values" && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs45(Box44, { children: [
-        /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "values:" }),
-        activeField === "values" && /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "  [a]dd  [e]dit  [r]emove  [\u2191\u2193] navigate  [K/J] reorder" })
+    selected && prop.type === "enum" && activeField === "values" && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs46(Box45, { children: [
+        /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "values:" }),
+        activeField === "values" && /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "  [a]dd  [e]dit  [r]emove  [\u2191\u2193] navigate  [K/J] reorder" })
       ] }),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         EditableValueList,
         {
           values: prop.values,
@@ -22900,22 +23288,22 @@ function SlotRow({
   pickerCursor
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
-  return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs45(Box44, { gap: 1, children: [
-      /* @__PURE__ */ jsx50(RowLabel, { name: slot.name, selected }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: !selected, children: "req:" }),
-      activeField === "required" ? /* @__PURE__ */ jsx50(Toggle, { value: slot.required, active: true }) : /* @__PURE__ */ jsx50(Toggle, { value: slot.required, active: false })
+  return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsxs46(Box45, { gap: 1, children: [
+      /* @__PURE__ */ jsx51(RowLabel, { name: slot.name, selected }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: !selected, children: "req:" }),
+      activeField === "required" ? /* @__PURE__ */ jsx51(Toggle, { value: slot.required, active: true }) : /* @__PURE__ */ jsx51(Toggle, { value: slot.required, active: false })
     ] }),
-    !selected && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "allowed:" }),
-      slot.allowedComponents.length === 0 ? /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "(any)" }) : /* @__PURE__ */ jsx50(Text47, { color: PALETTE.info, children: slot.allowedComponents.join(", ") })
+    !selected && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "allowed:" }),
+      slot.allowedComponents.length === 0 ? /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "(any)" }) : /* @__PURE__ */ jsx51(Text48, { color: PALETTE.info, children: slot.allowedComponents.join(", ") })
     ] }),
-    selected && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs45(Box44, { children: [
-        /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "allowed:" }),
-        activeField === "allowedComponents" && /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: slot.allowedComponents.length > 0 ? "  [a]dd  [e]dit  [r]emove  [\u2190\u2192] cycle  [\u2191\u2193] navigate  [K/J] reorder" : "  [a]dd  [e]dit  [r]emove  [\u2191\u2193] navigate  [K/J] reorder" })
+    selected && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs46(Box45, { children: [
+        /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "allowed:" }),
+        activeField === "allowedComponents" && /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: slot.allowedComponents.length > 0 ? "  [a]dd  [e]dit  [r]emove  [\u2190\u2192] cycle  [\u2191\u2193] navigate  [K/J] reorder" : "  [a]dd  [e]dit  [r]emove  [\u2191\u2193] navigate  [K/J] reorder" })
       ] }),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         EditableValueList,
         {
           values: slot.allowedComponents,
@@ -22929,36 +23317,36 @@ function SlotRow({
           showAddInput: activeField === "allowedComponents"
         }
       ),
-      editingValue?.mode === "add" && activeField === "allowedComponents" && pickerCandidates !== null && /* @__PURE__ */ jsx50(Box44, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "(no valid components to add \u2014 all remaining candidates would create cycles)" }) : (() => {
+      editingValue?.mode === "add" && activeField === "allowedComponents" && pickerCandidates !== null && /* @__PURE__ */ jsx51(Box45, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "(no valid components to add \u2014 all remaining candidates would create cycles)" }) : (() => {
         const filtered = valueText.length === 0 ? pickerCandidates : pickerCandidates.filter((n) => n.toLowerCase().includes(valueText.toLowerCase()));
         if (filtered.length === 0) {
-          return /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "(no candidates match \u2014 Enter to add as free text)" });
+          return /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "(no candidates match \u2014 Enter to add as free text)" });
         }
         const cursor2 = pickerCursor % filtered.length;
         const MAX_VISIBLE = 5;
         const start = Math.max(0, Math.min(filtered.length - MAX_VISIBLE, cursor2 - 2));
         const slice = filtered.slice(start, start + MAX_VISIBLE);
-        return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "  candidates (\u2191\u2193 cycle, Enter to add):" }),
+        return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "  candidates (\u2191\u2193 cycle, Enter to add):" }),
           slice.map((name, i) => {
             const absIdx = start + i;
             const isCursor = absIdx === cursor2;
-            return /* @__PURE__ */ jsx50(Text47, { color: isCursor ? PALETTE.info : void 0, dimColor: !isCursor, children: isCursor ? `  \u25B6 ${name}` : `    ${name}` }, name);
+            return /* @__PURE__ */ jsx51(Text48, { color: isCursor ? PALETTE.info : void 0, dimColor: !isCursor, children: isCursor ? `  \u25B6 ${name}` : `    ${name}` }, name);
           })
         ] });
       })() })
     ] }),
-    selected && activeField === "description" && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsxs45(Box44, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-        /* @__PURE__ */ jsx50(Text47, { children: slot.description.slice(0, textCursor) }),
-        /* @__PURE__ */ jsx50(Text47, { inverse: cursorVisible, children: slot.description[textCursor] ?? cursor }),
-        /* @__PURE__ */ jsx50(Text47, { children: slot.description.slice(textCursor + 1) })
+    selected && activeField === "description" && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, flexDirection: "row", children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "desc:" }),
+      /* @__PURE__ */ jsxs46(Box45, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+        /* @__PURE__ */ jsx51(Text48, { children: slot.description.slice(0, textCursor) }),
+        /* @__PURE__ */ jsx51(Text48, { inverse: cursorVisible, children: slot.description[textCursor] ?? cursor }),
+        /* @__PURE__ */ jsx51(Text48, { children: slot.description.slice(textCursor + 1) })
       ] })
     ] }),
-    selected && activeField !== "description" && /* @__PURE__ */ jsxs45(Box44, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsx50(Text47, { color: PALETTE.success, children: slot.description || "\u2014" })
+    selected && activeField !== "description" && /* @__PURE__ */ jsxs46(Box45, { paddingLeft: 2, gap: 1, children: [
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "desc:" }),
+      /* @__PURE__ */ jsx51(Text48, { color: PALETTE.success, children: slot.description || "\u2014" })
     ] })
   ] });
 }
@@ -23074,8 +23462,8 @@ function FieldEditor({
   showHiddenProps = true
 }) {
   const { state: initialState, error: parseError } = parseToState(value);
-  const [editorState, setEditorState] = useState24(initialState);
-  const [parseErr] = useState24(parseError);
+  const [editorState, setEditorState] = useState25(initialState);
+  const [parseErr] = useState25(parseError);
   const initialFocus = (() => {
     if (initialFocusTarget?.kind === "description") {
       return {
@@ -23142,42 +23530,42 @@ function FieldEditor({
       textCursor: 0
     };
   })();
-  const [focusLevel, setFocusLevel] = useState24(initialFocus.focusLevel);
-  const [propIdx, setPropIdx] = useState24(initialFocus.propIdx);
-  const [slotIdx, setSlotIdx] = useState24(initialFocus.slotIdx);
-  const [inSlots, setInSlots] = useState24(initialFocus.inSlots);
-  const [inComponentDesc, setInComponentDesc] = useState24(initialFocus.focusLevel === "componentDescription");
-  const [activeField, setActiveField] = useState24(initialFocus.activeField);
-  const [textCursor, setTextCursor] = useState24(initialFocus.textCursor);
-  const [valueCursor, setValueCursor] = useState24(0);
-  const [editingValue, setEditingValue] = useState24(null);
-  const [valueText, setValueText] = useState24("");
-  const [pickerCursor, setPickerCursor] = useState24(0);
-  const [validationError, setValidationError] = useState24(null);
-  const [cursorVisible] = useState24(true);
-  const [sourceOpen, setSourceOpen] = useState24(false);
-  const [rationaleOpen, setRationaleOpen] = useState24(false);
-  const [rationaleScrollOffset, setRationaleScrollOffset] = useState24(0);
-  const [showHelp, setShowHelp] = useState24(false);
+  const [focusLevel, setFocusLevel] = useState25(initialFocus.focusLevel);
+  const [propIdx, setPropIdx] = useState25(initialFocus.propIdx);
+  const [slotIdx, setSlotIdx] = useState25(initialFocus.slotIdx);
+  const [inSlots, setInSlots] = useState25(initialFocus.inSlots);
+  const [inComponentDesc, setInComponentDesc] = useState25(initialFocus.focusLevel === "componentDescription");
+  const [activeField, setActiveField] = useState25(initialFocus.activeField);
+  const [textCursor, setTextCursor] = useState25(initialFocus.textCursor);
+  const [valueCursor, setValueCursor] = useState25(0);
+  const [editingValue, setEditingValue] = useState25(null);
+  const [valueText, setValueText] = useState25("");
+  const [pickerCursor, setPickerCursor] = useState25(0);
+  const [validationError, setValidationError] = useState25(null);
+  const [cursorVisible] = useState25(true);
+  const [sourceOpen, setSourceOpen] = useState25(false);
+  const [rationaleOpen, setRationaleOpen] = useState25(false);
+  const [rationaleScrollOffset, setRationaleScrollOffset] = useState25(0);
+  const [showHelp, setShowHelp] = useState25(false);
   const props = editorState.props;
   const slots = editorState.slots;
-  const contentPropIndexes = React21.useMemo(
+  const contentPropIndexes = React22.useMemo(
     () => props.flatMap((prop, index) => prop.category === "content" ? [index] : []),
     [props]
   );
-  const designPropIndexes = React21.useMemo(
+  const designPropIndexes = React22.useMemo(
     () => props.flatMap((prop, index) => prop.category === "design" ? [index] : []),
     [props]
   );
-  const hiddenPropIndexes = React21.useMemo(
+  const hiddenPropIndexes = React22.useMemo(
     () => showHiddenProps ? props.flatMap((prop, index) => prop.category === "state" || prop.category === "unattached" ? [index] : []) : [],
     [props, showHiddenProps]
   );
-  const visiblePropIndexes = React21.useMemo(
+  const visiblePropIndexes = React22.useMemo(
     () => [...contentPropIndexes, ...designPropIndexes, ...hiddenPropIndexes],
     [contentPropIndexes, designPropIndexes, hiddenPropIndexes]
   );
-  const propGroups = React21.useMemo(
+  const propGroups = React22.useMemo(
     () => [
       { kind: "content", label: "\u2500\u2500 CONTENT PROPERTIES", indexes: contentPropIndexes },
       { kind: "design", label: "\u2500\u2500 DESIGN PROPERTIES", indexes: designPropIndexes },
@@ -23185,7 +23573,7 @@ function FieldEditor({
     ],
     [contentPropIndexes, designPropIndexes, hiddenPropIndexes]
   );
-  const selectableRows = React21.useMemo(
+  const selectableRows = React22.useMemo(
     () => [
       ...contentPropIndexes.map((idx) => ({ kind: "prop", idx })),
       ...designPropIndexes.map((idx) => ({ kind: "prop", idx })),
@@ -23195,7 +23583,7 @@ function FieldEditor({
     [contentPropIndexes, designPropIndexes, hiddenPropIndexes, slots]
   );
   const visiblePropPosition = visiblePropIndexes.indexOf(propIdx);
-  const selectedSelectableIndex = React21.useMemo(
+  const selectedSelectableIndex = React22.useMemo(
     () => selectableRows.findIndex(
       (row) => inSlots ? row.kind === "slot" && row.idx === slotIdx : row.kind === "prop" && row.idx === propIdx
     ),
@@ -23214,12 +23602,12 @@ function FieldEditor({
     }
   };
   const textEntryActive = focusLevel === "field" && activeField === "description" || focusLevel === "field" && activeField === "default" && (editorState.props[propIdx]?.type === "string" || editorState.props[propIdx]?.type === "token") || editingValue != null;
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     onTextEntryActiveChange?.(textEntryActive);
   }, [textEntryActive, onTextEntryActiveChange]);
   const currentProp = props[propIdx] ?? null;
   const currentSlot = slots[slotIdx] ?? null;
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (showHiddenProps || inSlots || inComponentDesc || visiblePropPosition >= 0) return;
     if (visiblePropIndexes.length > 0) {
       setPropIdx(visiblePropIndexes[0]);
@@ -23238,24 +23626,24 @@ function FieldEditor({
     setEditorState(next);
     onChange(serializeState(next, value));
   };
-  const canonicalize = React21.useCallback((json) => {
+  const canonicalize = React22.useCallback((json) => {
     try {
       return JSON.stringify(JSON.parse(json));
     } catch {
       return `__unparseable__:${json}`;
     }
   }, []);
-  const initialStateRef = React21.useRef(initialState);
-  const [baselineCanonical, setBaselineCanonical] = useState24(
+  const initialStateRef = React22.useRef(initialState);
+  const [baselineCanonical, setBaselineCanonical] = useState25(
     () => canonicalize(serializeState(initialState, value))
   );
   const currentCanonical = canonicalize(serializeState(editorState, value));
   const isDirty = currentCanonical !== baselineCanonical;
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     onDirtyChange?.(isDirty);
   }, [isDirty, onDirtyChange]);
-  const lastDiscardTriggerRef = React21.useRef(discardTrigger);
-  React21.useEffect(() => {
+  const lastDiscardTriggerRef = React22.useRef(discardTrigger);
+  React22.useEffect(() => {
     if (discardTrigger === void 0) return;
     if (discardTrigger === lastDiscardTriggerRef.current) return;
     lastDiscardTriggerRef.current = discardTrigger;
@@ -23386,8 +23774,8 @@ function FieldEditor({
       return;
     }
     if (rationaleOpen && !onTogglePropRationale) {
-      const PANEL_HEIGHT2 = 12;
-      const next = computeNextScrollOffset(rationaleScrollOffset, input, key, 9999, PANEL_HEIGHT2);
+      const PANEL_HEIGHT3 = 12;
+      const next = computeNextScrollOffset(rationaleScrollOffset, input, key, 9999, PANEL_HEIGHT3);
       if (next !== null) {
         setRationaleScrollOffset(() => next);
         return;
@@ -23742,18 +24130,18 @@ function FieldEditor({
   });
   const innerWidth = Math.max(1, width - 2);
   if (parseErr) {
-    return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.error, children: [
-      /* @__PURE__ */ jsx50(Text47, { bold: true, color: PALETTE.error, children: "FIELD EDITOR \u2014 parse error" }),
-      /* @__PURE__ */ jsx50(Text47, { color: PALETTE.error, children: parseErr }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "Cannot display structured editor. Fix the JSON first." })
+    return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.error, children: [
+      /* @__PURE__ */ jsx51(Text48, { bold: true, color: PALETTE.error, children: "FIELD EDITOR \u2014 parse error" }),
+      /* @__PURE__ */ jsx51(Text48, { color: PALETTE.error, children: parseErr }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "Cannot display structured editor. Fix the JSON first." })
     ] });
   }
   if (props.length === 0 && slots.length === 0) {
-    return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.warning, children: [
-      /* @__PURE__ */ jsx50(Text47, { bold: true, color: PALETTE.warning, children: "FIELD EDITOR \u2014 no fields" }),
-      /* @__PURE__ */ jsx50(Text47, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify." }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "You can add fields manually below or reject this component." }),
-      /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "Ctrl+S to save \xB7 Esc to discard" })
+    return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.warning, children: [
+      /* @__PURE__ */ jsx51(Text48, { bold: true, color: PALETTE.warning, children: "FIELD EDITOR \u2014 no fields" }),
+      /* @__PURE__ */ jsx51(Text48, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify." }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "You can add fields manually below or reject this component." }),
+      /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "Ctrl+S to save \xB7 Esc to discard" })
     ] });
   }
   const hasEmptyProperties = props.length === 0 && slots.length === 0;
@@ -23804,26 +24192,26 @@ function FieldEditor({
   const visibleRows = Math.max(1, height - 3);
   const scrollStart = selectedRowIdx < 0 ? 0 : Math.max(0, Math.min(selectedRowIdx, rows.length - visibleRows));
   const visibleRowSlice = rows.slice(scrollStart, scrollStart + visibleRows);
-  return /* @__PURE__ */ jsxs45(
-    Box44,
+  return /* @__PURE__ */ jsxs46(
+    Box45,
     {
       flexDirection: "column",
       width,
       borderStyle: "single",
       borderColor: hasEmptyProperties ? PALETTE.warning : PALETTE.info,
       children: [
-        hasEmptyProperties && /* @__PURE__ */ jsx50(Text47, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify. Reject this component or add fields manually." }),
-        /* @__PURE__ */ jsx50(Box44, { flexDirection: "column", width: innerWidth, children: visibleRowSlice.map((row, i) => {
+        hasEmptyProperties && /* @__PURE__ */ jsx51(Text48, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify. Reject this component or add fields manually." }),
+        /* @__PURE__ */ jsx51(Box45, { flexDirection: "column", width: innerWidth, children: visibleRowSlice.map((row, i) => {
           if (row.kind === "header") {
-            return /* @__PURE__ */ jsx50(Text47, { bold: true, color: PALETTE.success, children: row.label }, `header-${i}`);
+            return /* @__PURE__ */ jsx51(Text48, { bold: true, color: PALETTE.success, children: row.label }, `header-${i}`);
           }
           if (row.kind === "component-description") {
             const isSelected2 = inComponentDesc;
             const isEditing = isSelected2 && focusLevel === "field" && activeField === "description";
             const desc = editorState.componentDescription;
-            return /* @__PURE__ */ jsx50(Box44, { flexDirection: "column", children: /* @__PURE__ */ jsxs45(Box44, { gap: 1, children: [
-              /* @__PURE__ */ jsx50(
-                Text47,
+            return /* @__PURE__ */ jsx51(Box45, { flexDirection: "column", children: /* @__PURE__ */ jsxs46(Box45, { gap: 1, children: [
+              /* @__PURE__ */ jsx51(
+                Text48,
                 {
                   color: isSelected2 ? PALETTE.inverse : PALETTE.info,
                   bold: isSelected2,
@@ -23831,18 +24219,18 @@ function FieldEditor({
                   children: " description: "
                 }
               ),
-              isEditing ? /* @__PURE__ */ jsxs45(Box44, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-                /* @__PURE__ */ jsx50(Text47, { children: desc.slice(0, textCursor) }),
-                /* @__PURE__ */ jsx50(Text47, { inverse: cursorVisible, children: desc[textCursor] ?? (cursorVisible ? "\u2588" : " ") }),
-                /* @__PURE__ */ jsx50(Text47, { children: desc.slice(textCursor + 1) })
-              ] }) : /* @__PURE__ */ jsx50(Text47, { color: isSelected2 ? PALETTE.warning : PALETTE.inverse, dimColor: !desc, children: desc || "(none \u2014 Return to edit)" })
+              isEditing ? /* @__PURE__ */ jsxs46(Box45, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+                /* @__PURE__ */ jsx51(Text48, { children: desc.slice(0, textCursor) }),
+                /* @__PURE__ */ jsx51(Text48, { inverse: cursorVisible, children: desc[textCursor] ?? (cursorVisible ? "\u2588" : " ") }),
+                /* @__PURE__ */ jsx51(Text48, { children: desc.slice(textCursor + 1) })
+              ] }) : /* @__PURE__ */ jsx51(Text48, { color: isSelected2 ? PALETTE.warning : PALETTE.inverse, dimColor: !desc, children: desc || "(none \u2014 Return to edit)" })
             ] }) }, `component-description-${i}`);
           }
           if (row.kind === "prop") {
             const p = props[row.idx];
             const isSelected2 = !inSlots && !inComponentDesc && row.idx === propIdx;
             const propMeta = metadata?.props?.[p.name];
-            return /* @__PURE__ */ jsx50(
+            return /* @__PURE__ */ jsx51(
               PropRow,
               {
                 prop: p,
@@ -23863,7 +24251,7 @@ function FieldEditor({
           const s = slots[row.idx];
           const isSelected = inSlots && row.idx === slotIdx;
           const slotPickerCandidates = isSelected && editingValue?.mode === "add" && activeField === "allowedComponents" && projectSlotGraph && currentComponentName ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, s.name) : null;
-          return /* @__PURE__ */ jsx50(
+          return /* @__PURE__ */ jsx51(
             SlotRow,
             {
               slot: s,
@@ -23889,50 +24277,50 @@ function FieldEditor({
           const src = metadata?.componentSource ?? null;
           const headerPath = path ?? "<unknown source path>";
           if (!start || !end || !src) {
-            return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-              /* @__PURE__ */ jsx50(Text47, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
-              /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "(no source location captured for this prop)" }),
-              /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "[s] close" })
+            return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+              /* @__PURE__ */ jsx51(Text48, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
+              /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "(no source location captured for this prop)" }),
+              /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "[s] close" })
             ] });
           }
           const lines = src.split("\n").slice(Math.max(0, start - 1), end);
-          return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-            /* @__PURE__ */ jsx50(Text47, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}\u2013${end}` }),
-            lines.map((ln, i) => /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: ln }, `source-line-${i}`)),
-            /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "[s] close \xB7 [Esc] close" })
+          return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+            /* @__PURE__ */ jsx51(Text48, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}\u2013${end}` }),
+            lines.map((ln, i) => /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: ln }, `source-line-${i}`)),
+            /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "[s] close \xB7 [Esc] close" })
           ] });
         })(),
-        showHelp && /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-          /* @__PURE__ */ jsx50(Text47, { bold: true, color: PALETTE.info, children: "Keybindings" }),
-          /* @__PURE__ */ jsx50(Text47, { children: " " }),
-          /* @__PURE__ */ jsx50(Text47, { bold: true, children: "Row navigation" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  \u2191/\u2193 or j/k       move between rows" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  Enter            edit fields on the current row" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  Esc              exit the panel" }),
-          /* @__PURE__ */ jsx50(Text47, { children: " " }),
-          /* @__PURE__ */ jsx50(Text47, { bold: true, children: "Field editing" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  \u2191/\u2193 or j/k       cycle through fields (j/k literal in text inputs)" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  \u2190/\u2192              cycle picker values \xB7 move cursor in text inputs" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  Space/Enter      toggle required" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  Type             edit description / string default" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  Ctrl+S           save changes" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  Esc              exit field-edit back to the row" }),
-          /* @__PURE__ */ jsx50(Text47, { children: " " }),
-          /* @__PURE__ */ jsx50(Text47, { bold: true, children: "Values / allowedComponents" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  a / e / r        add \xB7 edit \xB7 remove" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  \u2191\u2193 or j/k        navigate the list" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  K / J            reorder up \xB7 down" }),
-          /* @__PURE__ */ jsx50(Text47, { children: " " }),
-          /* @__PURE__ */ jsx50(Text47, { bold: true, children: "Panels" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  s                toggle source-view for the current prop" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  " + propRationaleKey.padEnd(16) + " toggle prop rationale panel" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  " + componentRationaleKey.padEnd(16) + " toggle component rationale panel" }),
-          /* @__PURE__ */ jsx50(Text47, { children: "  ?                toggle this overlay" }),
-          /* @__PURE__ */ jsx50(Text47, { children: " " }),
-          /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: "press ? or Esc to close" })
+        showHelp && /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+          /* @__PURE__ */ jsx51(Text48, { bold: true, color: PALETTE.info, children: "Keybindings" }),
+          /* @__PURE__ */ jsx51(Text48, { children: " " }),
+          /* @__PURE__ */ jsx51(Text48, { bold: true, children: "Row navigation" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  \u2191/\u2193 or j/k       move between rows" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  Enter            edit fields on the current row" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  Esc              exit the panel" }),
+          /* @__PURE__ */ jsx51(Text48, { children: " " }),
+          /* @__PURE__ */ jsx51(Text48, { bold: true, children: "Field editing" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  \u2191/\u2193 or j/k       cycle through fields (j/k literal in text inputs)" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  \u2190/\u2192              cycle picker values \xB7 move cursor in text inputs" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  Space/Enter      toggle required" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  Type             edit description / string default" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  Ctrl+S           save changes" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  Esc              exit field-edit back to the row" }),
+          /* @__PURE__ */ jsx51(Text48, { children: " " }),
+          /* @__PURE__ */ jsx51(Text48, { bold: true, children: "Values / allowedComponents" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  a / e / r        add \xB7 edit \xB7 remove" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  \u2191\u2193 or j/k        navigate the list" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  K / J            reorder up \xB7 down" }),
+          /* @__PURE__ */ jsx51(Text48, { children: " " }),
+          /* @__PURE__ */ jsx51(Text48, { bold: true, children: "Panels" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  s                toggle source-view for the current prop" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  " + propRationaleKey.padEnd(16) + " toggle prop rationale panel" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  " + componentRationaleKey.padEnd(16) + " toggle component rationale panel" }),
+          /* @__PURE__ */ jsx51(Text48, { children: "  ?                toggle this overlay" }),
+          /* @__PURE__ */ jsx51(Text48, { children: " " }),
+          /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: "press ? or Esc to close" })
         ] }),
-        validationError && /* @__PURE__ */ jsx50(Text47, { color: PALETTE.error, children: "\u2717 " + validationError }),
-        /* @__PURE__ */ jsx50(Text47, { dimColor: true, children: modeLabel })
+        validationError && /* @__PURE__ */ jsx51(Text48, { color: PALETTE.error, children: "\u2717 " + validationError }),
+        /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: modeLabel })
       ]
     }
   );
@@ -23987,23 +24375,23 @@ var init_wrap_text = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/RationaleLine.tsx
-import { Box as Box45, Text as Text48 } from "ink";
-import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Box as Box46, Text as Text49 } from "ink";
+import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function RationaleLine({ line, active }) {
   if (line.kind === "blank") {
-    return /* @__PURE__ */ jsx51(Box45, { children: /* @__PURE__ */ jsx51(Text48, { children: " " }) });
+    return /* @__PURE__ */ jsx52(Box46, { children: /* @__PURE__ */ jsx52(Text49, { children: " " }) });
   }
   if (line.kind === "heading") {
-    return /* @__PURE__ */ jsx51(Box45, { children: /* @__PURE__ */ jsx51(Text48, { bold: true, color: PALETTE.info, dimColor: !active, children: line.text }) });
+    return /* @__PURE__ */ jsx52(Box46, { children: /* @__PURE__ */ jsx52(Text49, { bold: true, color: PALETTE.info, dimColor: !active, children: line.text }) });
   }
   if (line.kind === "label") {
-    return /* @__PURE__ */ jsxs46(Box45, { children: [
-      line.prefix && /* @__PURE__ */ jsx51(Text48, { children: line.prefix }),
-      /* @__PURE__ */ jsx51(Text48, { bold: true, color: line.color, dimColor: !active, children: line.text }),
-      line.suffix && /* @__PURE__ */ jsx51(Text48, { dimColor: true, children: line.suffix })
+    return /* @__PURE__ */ jsxs47(Box46, { children: [
+      line.prefix && /* @__PURE__ */ jsx52(Text49, { children: line.prefix }),
+      /* @__PURE__ */ jsx52(Text49, { bold: true, color: line.color, dimColor: !active, children: line.text }),
+      line.suffix && /* @__PURE__ */ jsx52(Text49, { dimColor: true, children: line.suffix })
     ] });
   }
-  return /* @__PURE__ */ jsx51(Box45, { children: /* @__PURE__ */ jsx51(Text48, { dimColor: !active || line.dim, children: line.text }) });
+  return /* @__PURE__ */ jsx52(Box46, { children: /* @__PURE__ */ jsx52(Text49, { dimColor: !active || line.dim, children: line.text }) });
 }
 var init_RationaleLine = __esm({
   "packages/experience-design-system-cli/src/analyze/select/tui/components/RationaleLine.tsx"() {
@@ -24013,8 +24401,8 @@ var init_RationaleLine = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/ComponentRationalePanel.tsx
-import { Box as Box46, Text as Text49 } from "ink";
-import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Box as Box47, Text as Text50 } from "ink";
+import { jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
 function renderComponentRationaleLines(data, innerWidth) {
   const out = [];
   const pushSection = (heading, body) => {
@@ -24081,8 +24469,8 @@ function ComponentRationalePanel({
   const overflowed = totalLines > contentHeight;
   const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
   const visibleEnd = Math.min(totalLines, scrollOffset + contentHeight);
-  return /* @__PURE__ */ jsxs47(
-    Box46,
+  return /* @__PURE__ */ jsxs48(
+    Box47,
     {
       flexDirection: "column",
       width,
@@ -24090,9 +24478,9 @@ function ComponentRationalePanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.inverse : void 0,
       children: [
-        /* @__PURE__ */ jsx52(Box46, { children: /* @__PURE__ */ jsx52(Text49, { bold: true, dimColor: !active, children: `Component rationale: ${data.name}` }) }),
-        visible.map((line, i) => /* @__PURE__ */ jsx52(RationaleLine, { line, active }, i)),
-        /* @__PURE__ */ jsx52(Box46, { children: overflowed ? /* @__PURE__ */ jsx52(Text49, { dimColor: true, children: `${visibleStart}-${visibleEnd}/${totalLines}    [j/k] scroll    [I/Esc] close` }) : /* @__PURE__ */ jsx52(Text49, { dimColor: true, children: "[I/Esc] close" }) })
+        /* @__PURE__ */ jsx53(Box47, { children: /* @__PURE__ */ jsx53(Text50, { bold: true, dimColor: !active, children: `Component rationale: ${data.name}` }) }),
+        visible.map((line, i) => /* @__PURE__ */ jsx53(RationaleLine, { line, active }, i)),
+        /* @__PURE__ */ jsx53(Box47, { children: overflowed ? /* @__PURE__ */ jsx53(Text50, { dimColor: true, children: `${visibleStart}-${visibleEnd}/${totalLines}    [j/k] scroll    [I/Esc] close` }) : /* @__PURE__ */ jsx53(Text50, { dimColor: true, children: "[I/Esc] close" }) })
       ]
     }
   );
@@ -24109,8 +24497,8 @@ var init_ComponentRationalePanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/RationalePanel.tsx
-import { Text as Text50 } from "ink";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { Text as Text51 } from "ink";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function renderRationaleLines(rows, innerWidth) {
   const out = [];
   rows.forEach((row, idx) => {
@@ -24143,10 +24531,10 @@ function RationalePanel({
   const visible = allLines.slice(scrollOffset, scrollOffset + height);
   const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
   const visibleEnd = Math.min(totalLines, scrollOffset + height);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     ScrollablePanel,
     {
-      header: /* @__PURE__ */ jsx53(Text50, { bold: true, dimColor: !active, children: `RATIONALE \u2014 ${componentName}` }),
+      header: /* @__PURE__ */ jsx54(Text51, { bold: true, dimColor: !active, children: `RATIONALE \u2014 ${componentName}` }),
       width,
       height,
       active,
@@ -24154,7 +24542,7 @@ function RationalePanel({
       visibleStart,
       visibleEnd,
       borderColor: active ? PALETTE.inverse : void 0,
-      children: visible.map((line, i) => /* @__PURE__ */ jsx53(RationaleLine, { line, active }, i))
+      children: visible.map((line, i) => /* @__PURE__ */ jsx54(RationaleLine, { line, active }, i))
     }
   );
 }
@@ -24169,8 +24557,8 @@ var init_RationalePanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/TokenReviewPanel.tsx
-import { Box as Box47, Text as Text51 } from "ink";
-import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Box as Box48, Text as Text52 } from "ink";
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 function collectTokenSuggestions(entry, availableTokens = []) {
   return Object.entries(entry.$properties).filter(([, def]) => {
     const rawKind = def["$token.kind"];
@@ -24204,8 +24592,8 @@ function TokenReviewPanel({
     const scrollStart = Math.max(0, Math.min(editCursor - Math.floor(visibleCount / 2), maxStart));
     const visiblePaths = current.paths.slice(scrollStart, scrollStart + visibleCount);
     const rangeLabel = current.paths.length === 0 ? "no compatible tokens" : `${scrollStart + 1}-${scrollStart + visiblePaths.length} of ${current.paths.length}`;
-    return /* @__PURE__ */ jsxs48(
-      Box47,
+    return /* @__PURE__ */ jsxs49(
+      Box48,
       {
         flexDirection: "column",
         width,
@@ -24213,25 +24601,25 @@ function TokenReviewPanel({
         borderStyle: "single",
         borderColor: active ? PALETTE.inverse : void 0,
         children: [
-          /* @__PURE__ */ jsx54(Text51, { bold: true, dimColor: !active, wrap: "truncate", children: `TOKEN REVIEW \u2014 ${componentName} \xB7 ${current.propName} (edit allowed)` }),
-          /* @__PURE__ */ jsx54(Text51, { dimColor: true, wrap: "truncate", children: `select which tokens are allowed (${rangeLabel})` }),
-          /* @__PURE__ */ jsx54(Text51, { children: " " }),
-          current.paths.length === 0 && /* @__PURE__ */ jsx54(Text51, { dimColor: true, children: "(no compatible tokens found for this token kind)" }),
+          /* @__PURE__ */ jsx55(Text52, { bold: true, dimColor: !active, wrap: "truncate", children: `TOKEN REVIEW \u2014 ${componentName} \xB7 ${current.propName} (edit allowed)` }),
+          /* @__PURE__ */ jsx55(Text52, { dimColor: true, wrap: "truncate", children: `select which tokens are allowed (${rangeLabel})` }),
+          /* @__PURE__ */ jsx55(Text52, { children: " " }),
+          current.paths.length === 0 && /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: "(no compatible tokens found for this token kind)" }),
           visiblePaths.map((path, i) => {
             const pathIndex = scrollStart + i;
             const checked = editSelection.has(path);
             const focused = pathIndex === editCursor;
-            return /* @__PURE__ */ jsx54(Box47, { children: /* @__PURE__ */ jsx54(Text51, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, wrap: "truncate", children: `  [${checked ? "x" : " "}] ${path}` }) }, path);
+            return /* @__PURE__ */ jsx55(Box48, { children: /* @__PURE__ */ jsx55(Text52, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, wrap: "truncate", children: `  [${checked ? "x" : " "}] ${path}` }) }, path);
           }),
-          /* @__PURE__ */ jsx54(Text51, { children: " " }),
-          /* @__PURE__ */ jsx54(Text51, { dimColor: true, wrap: "truncate", children: "[\u2191/\u2193] move  [Space] toggle" }),
-          /* @__PURE__ */ jsx54(Text51, { dimColor: true, wrap: "truncate", children: "[Ctrl+S] save  [Esc] cancel" })
+          /* @__PURE__ */ jsx55(Text52, { children: " " }),
+          /* @__PURE__ */ jsx55(Text52, { dimColor: true, wrap: "truncate", children: "[\u2191/\u2193] move  [Space] toggle" }),
+          /* @__PURE__ */ jsx55(Text52, { dimColor: true, wrap: "truncate", children: "[Ctrl+S] save  [Esc] cancel" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs48(
-    Box47,
+  return /* @__PURE__ */ jsxs49(
+    Box48,
     {
       flexDirection: "column",
       width,
@@ -24239,18 +24627,18 @@ function TokenReviewPanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.inverse : void 0,
       children: [
-        /* @__PURE__ */ jsx54(Text51, { bold: true, dimColor: !active, children: `TOKEN REVIEW \u2014 ${componentName}` }),
-        suggestions.length === 0 && /* @__PURE__ */ jsx54(Text51, { dimColor: true, children: "(no token suggestions for this component)" }),
+        /* @__PURE__ */ jsx55(Text52, { bold: true, dimColor: !active, children: `TOKEN REVIEW \u2014 ${componentName}` }),
+        suggestions.length === 0 && /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: "(no token suggestions for this component)" }),
         suggestions.map((s, i) => {
           const focused = i === selectedRow;
-          return /* @__PURE__ */ jsxs48(Box47, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx54(Box47, { children: /* @__PURE__ */ jsx54(Text51, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, children: `${focused ? "\u25B6" : " "} ${s.propName}` }) }),
-            /* @__PURE__ */ jsx54(Text51, { dimColor: true, children: `  suggested: ${s.suggested.join(", ")}` }),
-            /* @__PURE__ */ jsx54(Text51, { dimColor: true, children: `  allowed: ${s.allowed.join(", ")}` })
+          return /* @__PURE__ */ jsxs49(Box48, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsx55(Box48, { children: /* @__PURE__ */ jsx55(Text52, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, children: `${focused ? "\u25B6" : " "} ${s.propName}` }) }),
+            /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: `  suggested: ${s.suggested.join(", ")}` }),
+            /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: `  allowed: ${s.allowed.join(", ")}` })
           ] }, s.propName);
         }),
-        /* @__PURE__ */ jsx54(Text51, { children: " " }),
-        /* @__PURE__ */ jsx54(Text51, { dimColor: true, children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
+        /* @__PURE__ */ jsx55(Text52, { children: " " }),
+        /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
       ]
     }
   );
@@ -24263,8 +24651,8 @@ var init_TokenReviewPanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/steps/review-details-panel.tsx
-import { Box as Box48, Text as Text52 } from "ink";
-import { Fragment as Fragment15, jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Box as Box49, Text as Text53 } from "ink";
+import { Fragment as Fragment15, jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
 function ReviewDetailsPanel({
   selectedKey,
   panelOpen,
@@ -24298,7 +24686,7 @@ function ReviewDetailsPanel({
         rationale: s.rationale ?? ""
       }))
     ];
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       RationalePanel,
       {
         componentName: componentRationale?.name ?? selectedKey,
@@ -24311,7 +24699,7 @@ function ReviewDetailsPanel({
     );
   }
   if (panelOpen === "component-rationale") {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       ComponentRationalePanel,
       {
         data: componentRationale ?? {
@@ -24335,14 +24723,14 @@ function ReviewDetailsPanel({
     const source = reviewMetadata?.componentSource ?? null;
     const headerPath = path ?? "<unknown source path>";
     const lines = source ? source.split("\n").slice(panelScrollOffset, panelScrollOffset + height) : [];
-    return /* @__PURE__ */ jsxs49(Box48, { flexDirection: "column", width, borderStyle: "single", borderColor: sourceBorderColor, paddingX: 1, children: [
-      /* @__PURE__ */ jsx55(Text52, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
-      source ? lines.map((line, index) => /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: line }, `source-line-${index}`)) : /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: "(no source captured)" }),
-      /* @__PURE__ */ jsx55(Text52, { dimColor: true, children: "[s/Esc] close" })
+    return /* @__PURE__ */ jsxs50(Box49, { flexDirection: "column", width, borderStyle: "single", borderColor: sourceBorderColor, paddingX: 1, children: [
+      /* @__PURE__ */ jsx56(Text53, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
+      source ? lines.map((line, index) => /* @__PURE__ */ jsx56(Text53, { dimColor: true, children: line }, `source-line-${index}`)) : /* @__PURE__ */ jsx56(Text53, { dimColor: true, children: "(no source captured)" }),
+      /* @__PURE__ */ jsx56(Text53, { dimColor: true, children: "[s/Esc] close" })
     ] });
   }
   if (panelOpen === "token-review") {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       TokenReviewPanel,
       {
         componentName: selectedKey,
@@ -24358,7 +24746,7 @@ function ReviewDetailsPanel({
     );
   }
   if (showJson) {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       JsonPanel,
       {
         label: "GENERATED DEFINITION (read-only)",
@@ -24370,7 +24758,7 @@ function ReviewDetailsPanel({
       }
     );
   }
-  return /* @__PURE__ */ jsx55(Fragment15, { children: editor });
+  return /* @__PURE__ */ jsx56(Fragment15, { children: editor });
 }
 var init_review_details_panel = __esm({
   "packages/experience-design-system-cli/src/import/tui/steps/review-details-panel.tsx"() {
@@ -24383,7 +24771,7 @@ var init_review_details_panel = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewDetailsEditor.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 import { createElement as createElement7 } from "react";
 function toFieldEditorMetadata(reviewMetadata) {
   if (!reviewMetadata) return void 0;
@@ -24416,7 +24804,7 @@ function ReviewDetailsEditor({
     jsonScrollOffset,
     currentTokenSuggestions
   } = reviewEditor;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     ReviewDetailsPanel,
     {
       selectedKey,
@@ -24459,8 +24847,8 @@ var init_ReviewDetailsEditor = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewComponentPanel.tsx
-import { Box as Box49, Text as Text53 } from "ink";
-import { Fragment as Fragment16, jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Box as Box50, Text as Text54 } from "ink";
+import { Fragment as Fragment16, jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
 function buildReviewFieldEditor(reviewEditor, selectedJson, onExit, overrides = {}) {
   return {
     value: reviewEditor.draftValue || selectedJson,
@@ -24500,17 +24888,17 @@ function ReviewEmptyComponentsWarning({
   hidden
 }) {
   if (hidden || count === 0) return null;
-  return /* @__PURE__ */ jsx57(Text53, { color: PALETTE.warning, children: `\u26A0 ${count} component${count === 1 ? "" : "s"} had no classifiable props \u2014 review with care` });
+  return /* @__PURE__ */ jsx58(Text54, { color: PALETTE.warning, children: `\u26A0 ${count} component${count === 1 ? "" : "s"} had no classifiable props \u2014 review with care` });
 }
 function ReviewNoSelection() {
-  return /* @__PURE__ */ jsx57(Box49, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx57(Text53, { dimColor: true, children: "No component selected" }) });
+  return /* @__PURE__ */ jsx58(Box50, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx58(Text54, { dimColor: true, children: "No component selected" }) });
 }
 function ReviewFinalizeError({
   message,
   hidden
 }) {
   if (hidden || !message) return null;
-  return /* @__PURE__ */ jsx57(Text53, { color: PALETTE.error, children: `\u26A0 ${message}` });
+  return /* @__PURE__ */ jsx58(Text54, { color: PALETTE.error, children: `\u26A0 ${message}` });
 }
 function ReviewPanelFooter({
   reviewEditor,
@@ -24519,10 +24907,10 @@ function ReviewPanelFooter({
   livePreview,
   livePreviewSpinner
 }) {
-  return /* @__PURE__ */ jsxs50(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment16, { children: [
     reviewEditor.panelOpen === "token-review" ? "  [\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" : sidebarFocused ? sidebarFooter : reviewEditor.showJson ? "  [j/k] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  (edit fields)" + (reviewEditor.currentTokenSuggestions().length > 0 ? "  [t] token review" : ""),
-    livePreview.status === "running" && /* @__PURE__ */ jsx57(Text53, { children: `  ${livePreviewSpinner} live preview` }),
-    livePreview.disabled && /* @__PURE__ */ jsx57(Text53, { children: "  \xB7 live preview disabled" })
+    livePreview.status === "running" && /* @__PURE__ */ jsx58(Text54, { children: `  ${livePreviewSpinner} live preview` }),
+    livePreview.disabled && /* @__PURE__ */ jsx58(Text54, { children: "  \xB7 live preview disabled" })
   ] });
 }
 function ReviewComponentPanel({
@@ -24544,11 +24932,11 @@ function ReviewComponentPanel({
 }) {
   const propCount = Object.keys(selectedEntry.$properties).length;
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
-  return /* @__PURE__ */ jsxs50(Box49, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs50(Box49, { children: [
-      /* @__PURE__ */ jsx57(Text53, { bold: true, children: selectedKey }),
-      /* @__PURE__ */ jsx57(Box49, { flexGrow: 1 }),
-      /* @__PURE__ */ jsxs50(Text53, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs51(Box50, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs51(Box50, { children: [
+      /* @__PURE__ */ jsx58(Text54, { bold: true, children: selectedKey }),
+      /* @__PURE__ */ jsx58(Box50, { flexGrow: 1 }),
+      /* @__PURE__ */ jsxs51(Text54, { dimColor: true, children: [
         propCount,
         " prop",
         propCount !== 1 ? "s" : "",
@@ -24557,7 +24945,7 @@ function ReviewComponentPanel({
         sidebarFocused ? "[Tab] focus panel" : "[Tab] focus list"
       ] })
     ] }),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(
       ReviewDetailsEditor,
       {
         selectedKey,
@@ -24572,8 +24960,8 @@ function ReviewComponentPanel({
         fieldEditor
       }
     ),
-    saveError && /* @__PURE__ */ jsx57(Text53, { color: PALETTE.error, children: "\u2717 " + saveError }),
-    /* @__PURE__ */ jsx57(Text53, { dimColor: true, children: /* @__PURE__ */ jsx57(
+    saveError && /* @__PURE__ */ jsx58(Text54, { color: PALETTE.error, children: "\u2717 " + saveError }),
+    /* @__PURE__ */ jsx58(Text54, { dimColor: true, children: /* @__PURE__ */ jsx58(
       ReviewPanelFooter,
       {
         reviewEditor,
@@ -24595,8 +24983,8 @@ var init_ReviewComponentPanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewStatus.tsx
-import { Box as Box50, Text as Text54 } from "ink";
-import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Box as Box51, Text as Text55 } from "ink";
+import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
 function countReviewStatuses(entries) {
   return entries.reduce(
     (counts, entry) => {
@@ -24614,7 +25002,7 @@ function ReviewStatusBar({
   onFinalize
 }) {
   const { accepted, rejected, needsReview } = countReviewStatuses(entries);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     StatusBar,
     {
       accepted,
@@ -24627,13 +25015,13 @@ function ReviewStatusBar({
   );
 }
 function ReviewLoadingState() {
-  return /* @__PURE__ */ jsx58(Box50, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx58(Text54, { dimColor: true, children: "Loading generated definitions..." }) });
+  return /* @__PURE__ */ jsx59(Box51, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx59(Text55, { dimColor: true, children: "Loading generated definitions..." }) });
 }
 function ReviewLoadError({ message }) {
-  return /* @__PURE__ */ jsxs51(Box50, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx58(Text54, { color: PALETTE.error, children: message }),
-    /* @__PURE__ */ jsx58(Text54, { children: " " }),
-    /* @__PURE__ */ jsx58(Text54, { dimColor: true, children: "[q / Enter / Esc] Quit" })
+  return /* @__PURE__ */ jsxs52(Box51, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx59(Text55, { color: PALETTE.error, children: message }),
+    /* @__PURE__ */ jsx59(Text55, { children: " " }),
+    /* @__PURE__ */ jsx59(Text55, { dimColor: true, children: "[q / Enter / Esc] Quit" })
   ] });
 }
 var init_ReviewStatus = __esm({
@@ -24704,7 +25092,7 @@ var init_history = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewSession.ts
-import { useCallback as useCallback4, useEffect as useEffect8, useRef as useRef6, useState as useState25 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useRef as useRef6, useState as useState26 } from "react";
 function loadReviewSessionState({
   extractSessionId,
   tokenSessionId,
@@ -24750,10 +25138,10 @@ function useReviewSession({
   tokensPath,
   onExtraLoaded
 }) {
-  const [components, setComponents] = useState25([]);
-  const [loading, setLoading] = useState25(true);
-  const [loadError, setLoadError] = useState25(null);
-  const [availableTokens, setAvailableTokens] = useState25([]);
+  const [components, setComponents] = useState26([]);
+  const [loading, setLoading] = useState26(true);
+  const [loadError, setLoadError] = useState26(null);
+  const [availableTokens, setAvailableTokens] = useState26([]);
   const loadInitialState = useCallback4(async () => {
     const result = loadSession();
     if (result.error || !tokensPath) return { result, catalog: result.tokens };
@@ -24814,8 +25202,8 @@ function useReviewSession({
   };
 }
 function useReviewMetadata({ components, selectedIdx, extractSessionId }) {
-  const [reviewMetadata, setReviewMetadata] = useState25(null);
-  const [componentRationale, setComponentRationale] = useState25(null);
+  const [reviewMetadata, setReviewMetadata] = useState26(null);
+  const [componentRationale, setComponentRationale] = useState26(null);
   useEffect8(() => {
     const current = components[selectedIdx];
     if (!current) {
@@ -24920,7 +25308,7 @@ var init_useReviewSession = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewEditor.ts
-import { useEffect as useEffect9, useRef as useRef7, useState as useState26 } from "react";
+import { useEffect as useEffect9, useRef as useRef7, useState as useState27 } from "react";
 function parseReviewEntry(draftValue) {
   const parsed = JSON.parse(draftValue);
   const keys = Object.keys(parsed);
@@ -24940,18 +25328,18 @@ function useReviewEditor({
   onEditSaved,
   onTokenSaved
 }) {
-  const [panelOpen, setPanelOpen] = useState26("none");
-  const [panelScrollOffset, setPanelScrollOffset] = useState26(0);
-  const [jsonScrollOffset, setJsonScrollOffset] = useState26(0);
-  const [textEntryActive, setTextEntryActive] = useState26(false);
-  const [showJson, setShowJson] = useState26(false);
-  const [showHiddenProps, setShowHiddenProps] = useState26(false);
-  const [draftValue, setDraftValue] = useState26("");
-  const [saveError, setSaveError] = useState26(null);
-  const [tokenReviewRow, setTokenReviewRow] = useState26(0);
-  const [tokenReviewEditing, setTokenReviewEditing] = useState26(false);
-  const [tokenReviewEditCursor, setTokenReviewEditCursor] = useState26(0);
-  const [tokenReviewEditSelection, setTokenReviewEditSelection] = useState26(/* @__PURE__ */ new Set());
+  const [panelOpen, setPanelOpen] = useState27("none");
+  const [panelScrollOffset, setPanelScrollOffset] = useState27(0);
+  const [jsonScrollOffset, setJsonScrollOffset] = useState27(0);
+  const [textEntryActive, setTextEntryActive] = useState27(false);
+  const [showJson, setShowJson] = useState27(false);
+  const [showHiddenProps, setShowHiddenProps] = useState27(false);
+  const [draftValue, setDraftValue] = useState27("");
+  const [saveError, setSaveError] = useState27(null);
+  const [tokenReviewRow, setTokenReviewRow] = useState27(0);
+  const [tokenReviewEditing, setTokenReviewEditing] = useState27(false);
+  const [tokenReviewEditCursor, setTokenReviewEditCursor] = useState27(0);
+  const [tokenReviewEditSelection, setTokenReviewEditSelection] = useState27(/* @__PURE__ */ new Set());
   const tokenReviewSuggestedRef = useRef7(/* @__PURE__ */ new Map());
   const pendingGRef = useRef7(false);
   useEffect9(() => {
@@ -25073,12 +25461,12 @@ var init_useReviewEditor = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewSurfaceState.ts
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 function useReviewSurfaceState(initialFinalizeError = null) {
-  const [sidebarFocused, setSidebarFocused] = useState27(true);
-  const [showFinalize, setShowFinalize] = useState27(false);
-  const [showQuit, setShowQuit] = useState27(false);
-  const [finalizeError, setFinalizeError] = useState27(initialFinalizeError);
+  const [sidebarFocused, setSidebarFocused] = useState28(true);
+  const [showFinalize, setShowFinalize] = useState28(false);
+  const [showQuit, setShowQuit] = useState28(false);
+  const [finalizeError, setFinalizeError] = useState28(initialFinalizeError);
   return {
     sidebarFocused,
     setSidebarFocused,
@@ -25097,8 +25485,8 @@ var init_useReviewSurfaceState = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewDialogs.tsx
-import { Box as Box51, Text as Text55 } from "ink";
-import { Fragment as Fragment17, jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Box as Box52, Text as Text56 } from "ink";
+import { Fragment as Fragment17, jsx as jsx60, jsxs as jsxs53 } from "react/jsx-runtime";
 function ReviewFinalizeDialogs({
   showFinalize,
   showQuit,
@@ -25112,8 +25500,8 @@ function ReviewFinalizeDialogs({
   onQuitCancel
 }) {
   const { accepted, rejected, needsReview } = countReviewStatuses(components);
-  return /* @__PURE__ */ jsxs52(Fragment17, { children: [
-    showFinalize && /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs53(Fragment17, { children: [
+    showFinalize && /* @__PURE__ */ jsx60(
       FinalizeDialog,
       {
         accepted,
@@ -25126,7 +25514,7 @@ function ReviewFinalizeDialogs({
         onCancel: onFinalizeCancel
       }
     ),
-    showQuit && /* @__PURE__ */ jsx59(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuitConfirm, onCancel: onQuitCancel })
+    showQuit && /* @__PURE__ */ jsx60(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuitConfirm, onCancel: onQuitCancel })
   ] });
 }
 function ReviewStepDialogs({
@@ -25136,7 +25524,7 @@ function ReviewStepDialogs({
   onFinalize,
   onQuit
 }) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     ReviewFinalizeDialogs,
     {
       showFinalize: surfaceState.showFinalize,
@@ -25154,12 +25542,12 @@ function ReviewStepDialogs({
 }
 function ReviewReloadDialog({ open }) {
   if (!open) return null;
-  return /* @__PURE__ */ jsxs52(Box51, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-    /* @__PURE__ */ jsx59(Text55, { bold: true, color: PALETTE.warning, children: "Reload from saved state?" }),
-    /* @__PURE__ */ jsx59(Text55, { children: "Unsaved in-memory changes will be lost." }),
-    /* @__PURE__ */ jsx59(Text55, { children: " " }),
-    /* @__PURE__ */ jsx59(Text55, { children: "  [Enter]  Confirm" }),
-    /* @__PURE__ */ jsx59(Text55, { children: "  [Esc]    Cancel" })
+  return /* @__PURE__ */ jsxs53(Box52, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+    /* @__PURE__ */ jsx60(Text56, { bold: true, color: PALETTE.warning, children: "Reload from saved state?" }),
+    /* @__PURE__ */ jsx60(Text56, { children: "Unsaved in-memory changes will be lost." }),
+    /* @__PURE__ */ jsx60(Text56, { children: " " }),
+    /* @__PURE__ */ jsx60(Text56, { children: "  [Enter]  Confirm" }),
+    /* @__PURE__ */ jsx60(Text56, { children: "  [Esc]    Cancel" })
   ] });
 }
 var init_ReviewDialogs = __esm({
@@ -25402,11 +25790,11 @@ var init_preview_annotations = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/useLivePreview.ts
-import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef8, useState as useState28 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef8, useState as useState29 } from "react";
 function useLivePreview(opts) {
   const debounceMs = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
-  const [status, setStatus] = useState28("idle");
-  const [disabled, setDisabled] = useState28(false);
+  const [status, setStatus] = useState29("idle");
+  const [disabled, setDisabled] = useState29(false);
   const timerRef = useRef8(null);
   const generationRef = useRef8(0);
   const latestRef = useRef8(0);
@@ -25501,7 +25889,7 @@ var init_useLivePreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewPreview.ts
-import { useCallback as useCallback6, useEffect as useEffect11, useState as useState29 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect11, useState as useState30 } from "react";
 function useReviewPreview({
   components,
   loading,
@@ -25516,8 +25904,8 @@ function useReviewPreview({
   allowDeletions,
   onResult
 }) {
-  const [previewAnnotations, setPreviewAnnotations] = useState29(/* @__PURE__ */ new Map());
-  const [removedComponents, setRemovedComponents] = useState29([]);
+  const [previewAnnotations, setPreviewAnnotations] = useState30(/* @__PURE__ */ new Map());
+  const [removedComponents, setRemovedComponents] = useState30([]);
   const handleResult = useCallback6(
     (response) => {
       if (!response) return;
@@ -25544,7 +25932,7 @@ function useReviewPreview({
     deleteAllComponents,
     allowDeletions
   });
-  const [spinnerTick, setSpinnerTick] = useState29(0);
+  const [spinnerTick, setSpinnerTick] = useState30(0);
   useEffect11(() => {
     if (livePreviewHook.status !== "running") return;
     const id = setInterval(() => setSpinnerTick((tick) => tick + 1), 80);
@@ -25570,8 +25958,8 @@ var init_useReviewPreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/LivePreviewSummary.tsx
-import { Box as Box52, Text as Text56 } from "ink";
-import { jsx as jsx60, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Box as Box53, Text as Text57 } from "ink";
+import { jsx as jsx61, jsxs as jsxs54 } from "react/jsx-runtime";
 function LivePreviewSummary({
   enabled,
   previewAnnotations,
@@ -25585,19 +25973,19 @@ function LivePreviewSummary({
   const counts = { new: 0, changed: 0, removed: 0, breaking: 0 };
   for (const annotation of previewAnnotations.values()) counts[annotation] += 1;
   const hasCounts = counts.new + counts.changed + counts.removed + counts.breaking > 0;
-  if (disabled) return /* @__PURE__ */ jsx60(Text56, { dimColor: true, children: "Preview: disabled (creds rejected)" });
-  if (status === "running" && !hasCounts) return /* @__PURE__ */ jsx60(Text56, { dimColor: true, children: `Preview: ${spinner} running...` });
+  if (disabled) return /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "Preview: disabled (creds rejected)" });
+  if (status === "running" && !hasCounts) return /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: `Preview: ${spinner} running...` });
   if (!hasCounts) return null;
-  return /* @__PURE__ */ jsxs53(Box52, { children: [
-    /* @__PURE__ */ jsx60(Text56, { children: "Preview: " }),
-    /* @__PURE__ */ jsx60(Text56, { color: PALETTE.success, children: `${counts.new} new` }),
-    /* @__PURE__ */ jsx60(Text56, { children: " \xB7 " }),
-    /* @__PURE__ */ jsx60(Text56, { color: PALETTE.warning, children: `${counts.changed} changed` }),
-    /* @__PURE__ */ jsx60(Text56, { children: " \xB7 " }),
-    /* @__PURE__ */ jsx60(Text56, { dimColor: true, children: `${counts.removed} removed` }),
-    showRemovedListHint && removedCount > 0 && /* @__PURE__ */ jsx60(Text56, { dimColor: true, children: " ([d] removed list)" }),
-    /* @__PURE__ */ jsx60(Text56, { children: " \xB7 " }),
-    /* @__PURE__ */ jsx60(Text56, { color: PALETTE.error, bold: true, children: `${counts.breaking} breaking` })
+  return /* @__PURE__ */ jsxs54(Box53, { children: [
+    /* @__PURE__ */ jsx61(Text57, { children: "Preview: " }),
+    /* @__PURE__ */ jsx61(Text57, { color: PALETTE.success, children: `${counts.new} new` }),
+    /* @__PURE__ */ jsx61(Text57, { children: " \xB7 " }),
+    /* @__PURE__ */ jsx61(Text57, { color: PALETTE.warning, children: `${counts.changed} changed` }),
+    /* @__PURE__ */ jsx61(Text57, { children: " \xB7 " }),
+    /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: `${counts.removed} removed` }),
+    showRemovedListHint && removedCount > 0 && /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: " ([d] removed list)" }),
+    /* @__PURE__ */ jsx61(Text57, { children: " \xB7 " }),
+    /* @__PURE__ */ jsx61(Text57, { color: PALETTE.error, bold: true, children: `${counts.breaking} breaking` })
   ] });
 }
 var init_LivePreviewSummary = __esm({
@@ -25608,9 +25996,9 @@ var init_LivePreviewSummary = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/steps/GenerateReviewStep.tsx
-import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo6, useRef as useRef9, useState as useState30 } from "react";
-import { Box as Box53, Text as Text57, useStdout as useStdout5 } from "ink";
-import { Fragment as Fragment18, jsx as jsx61, jsxs as jsxs54 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo7, useRef as useRef9, useState as useState31 } from "react";
+import { Box as Box54, Text as Text58, useStdout as useStdout6 } from "ink";
+import { Fragment as Fragment18, jsx as jsx62, jsxs as jsxs55 } from "react/jsx-runtime";
 function sortComponentsForSidebar2(components, cycleParticipants) {
   const isEmpty2 = (entry) => Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
   const tier = (c2) => {
@@ -25651,10 +26039,10 @@ function CyclePathLine({
   highlightComponents = false,
   highlightLine = false
 }) {
-  return /* @__PURE__ */ jsxs54(Text57, { color: highlightLine ? PALETTE.warning : void 0, children: [
+  return /* @__PURE__ */ jsxs55(Text58, { color: highlightLine ? PALETTE.warning : void 0, children: [
     prefix,
     segments.map(
-      (segment, index) => segment.kind === "slot" ? /* @__PURE__ */ jsx61(Text57, { color: PALETTE.info, children: segment.text }, index) : segment.kind === "arrow" ? /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: segment.text }, index) : /* @__PURE__ */ jsx61(Text57, { color: highlightComponents ? PALETTE.warning : void 0, children: segment.text }, index)
+      (segment, index) => segment.kind === "slot" ? /* @__PURE__ */ jsx62(Text58, { color: PALETTE.info, children: segment.text }, index) : segment.kind === "arrow" ? /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: segment.text }, index) : /* @__PURE__ */ jsx62(Text58, { color: highlightComponents ? PALETTE.warning : void 0, children: segment.text }, index)
     )
   ] });
 }
@@ -25713,9 +26101,9 @@ function GenerateReviewStep({
   initialFinalizeError = null,
   allowDeletions = false
 }) {
-  const { stdout } = useStdout5();
+  const { stdout } = useStdout6();
   const terminalWidth = stdout?.columns ?? 80;
-  const [slotCycles, setSlotCycles] = useState30([]);
+  const [slotCycles, setSlotCycles] = useState31([]);
   const setLoadedSlotCycles = useCallback7((cycles) => {
     setSlotCycles(cycles ?? []);
   }, []);
@@ -25747,7 +26135,7 @@ function GenerateReviewStep({
     tokensPath,
     onExtraLoaded: setLoadedSlotCycles
   });
-  const [nav, setNav] = useState30({
+  const [nav, setNav] = useState31({
     cursorRowIdx: 0,
     sidebarScrollOffset: 0
   });
@@ -25763,10 +26151,10 @@ function GenerateReviewStep({
     finalizeError,
     setFinalizeError
   } = reviewSurface;
-  const [removedBannerCollapsed, setRemovedBannerCollapsed] = useState30(false);
+  const [removedBannerCollapsed, setRemovedBannerCollapsed] = useState31(false);
   const removedBannerDefaultedRef = useRef9(false);
-  const [cyclePanelScroll, setCyclePanelScroll] = useState30(0);
-  const [cyclesCursor, setCyclesCursor] = useState30(0);
+  const [cyclePanelScroll, setCyclePanelScroll] = useState31(0);
+  const [cyclesCursor, setCyclesCursor] = useState31(0);
   const cyclePanel = useOverlayPanel({
     toggleKey: "c",
     onClose: () => {
@@ -25781,9 +26169,9 @@ function GenerateReviewStep({
       setBreakConfirm(false);
     }
   });
-  const [breakCursor, setBreakCursor] = useState30(0);
-  const [breakConfirm, setBreakConfirm] = useState30(false);
-  const [expandedGroups, setExpandedGroups] = useState30(/* @__PURE__ */ new Set());
+  const [breakCursor, setBreakCursor] = useState31(0);
+  const [breakConfirm, setBreakConfirm] = useState31(false);
+  const [expandedGroups, setExpandedGroups] = useState31(/* @__PURE__ */ new Set());
   const seededGroupsRef = useRef9(false);
   const {
     searchOpen,
@@ -25802,20 +26190,20 @@ function GenerateReviewStep({
     setShowHelp
   } = useSidebarSearchState();
   const lineagePanel = useOverlayPanel({ toggleKey: "l" });
-  const [lineageCursor, setLineageCursor] = useState30(0);
+  const [lineageCursor, setLineageCursor] = useState31(0);
   const breakingPanel = useOverlayPanel({ toggleKey: "b", onClose: () => setBreakingDetailOpen(false) });
-  const [breakingChanges, setBreakingChanges] = useState30([]);
-  const [breakingCursor, setBreakingCursor] = useState30(0);
-  const [breakingDetailOpen, setBreakingDetailOpen] = useState30(false);
-  const [pendingEditorFocus, setPendingEditorFocus] = useState30(null);
-  const [autoRejected, setAutoRejected] = useState30([]);
-  const [undoSnapshot, setUndoSnapshot] = useState30(null);
+  const [breakingChanges, setBreakingChanges] = useState31([]);
+  const [breakingCursor, setBreakingCursor] = useState31(0);
+  const [breakingDetailOpen, setBreakingDetailOpen] = useState31(false);
+  const [pendingEditorFocus, setPendingEditorFocus] = useState31(null);
+  const [autoRejected, setAutoRejected] = useState31([]);
+  const [undoSnapshot, setUndoSnapshot] = useState31(null);
   const autoRejectFiredRef = useRef9(false);
-  const [editorDirty, setEditorDirty] = useState30(false);
-  const [showUnsavedWarning, setShowUnsavedWarning] = useState30(false);
-  const [pendingFocusAway, setPendingFocusAway] = useState30(null);
-  const [discardTrigger, setDiscardTrigger] = useState30(0);
-  const [showReloadDialog, setShowReloadDialog] = useState30(false);
+  const [editorDirty, setEditorDirty] = useState31(false);
+  const [showUnsavedWarning, setShowUnsavedWarning] = useState31(false);
+  const [pendingFocusAway, setPendingFocusAway] = useState31(null);
+  const [discardTrigger, setDiscardTrigger] = useState31(0);
+  const [showReloadDialog, setShowReloadDialog] = useState31(false);
   const acceptedCountForPreview = components.filter((c2) => c2.status === "accepted").length;
   const { previewAnnotations, removedComponents, livePreviewHook, livePreviewSpinner } = useReviewPreview({
     components,
@@ -25876,12 +26264,12 @@ function GenerateReviewStep({
     } catch {
     }
   };
-  const componentGraph = useMemo6(() => buildComponentGraph(components), [components]);
-  const sidebarGraph = useMemo6(
+  const componentGraph = useMemo7(() => buildComponentGraph(components), [components]);
+  const sidebarGraph = useMemo7(
     () => buildComponentGraph(components, { stripRejectedEdges: true }),
     [components]
   );
-  const closures = useMemo6(() => computeAllClosures(componentGraph), [componentGraph]);
+  const closures = useMemo7(() => computeAllClosures(componentGraph), [componentGraph]);
   useEffect12(() => {
     if (seededGroupsRef.current) return;
     if (closures.size === 0 && slotCycles.length === 0) return;
@@ -25893,14 +26281,14 @@ function GenerateReviewStep({
       )
     );
   }, [closures, slotCycles]);
-  const directIssues = useMemo6(() => {
+  const directIssues = useMemo7(() => {
     const m = /* @__PURE__ */ new Map();
     for (const c2 of components) {
       if (c2.status === "rejected") m.set(c2.key, "error");
     }
     return m;
   }, [components]);
-  const cycleView = useMemo6(() => computeCycleView(components), [components]);
+  const cycleView = useMemo7(() => computeCycleView(components), [components]);
   useEffect12(() => {
     const decision = computeAutoRejectDecision({
       loading,
@@ -25971,7 +26359,7 @@ function GenerateReviewStep({
     reviewEditor.setSaveError(null);
     setFinalizeError(null);
   };
-  const groupedItemsMemo = useMemo6(
+  const groupedItemsMemo = useMemo7(
     () => components.map((c2) => ({
       key: c2.key,
       entry: c2.entry,
@@ -25979,12 +26367,12 @@ function GenerateReviewStep({
     })),
     [components, directIssues]
   );
-  const brokenKeys = useMemo6(
+  const brokenKeys = useMemo7(
     () => new Set(breakingChanges.map((b) => b.componentName)),
     [breakingChanges]
   );
-  const breakingRows = useMemo6(() => buildBreakingRows(breakingChanges), [breakingChanges]);
-  const filterVisibleKeys = useMemo6(() => {
+  const breakingRows = useMemo7(() => buildBreakingRows(breakingChanges), [breakingChanges]);
+  const filterVisibleKeys = useMemo7(() => {
     if (jumpFilterTarget) {
       return findAllAncestors2(jumpFilterTarget, sidebarGraph);
     }
@@ -26000,7 +26388,7 @@ function GenerateReviewStep({
     })();
     return intersectFilterKeys(categoryKeys, searchKeys);
   }, [jumpFilterTarget, activeFilters, cycleView, brokenKeys, searchQuery, groupedItemsMemo, sidebarGraph]);
-  const visibleRowsMemo = useMemo6(
+  const visibleRowsMemo = useMemo7(
     () => buildVisibleRows({
       items: groupedItemsMemo,
       cycleParticipants: cycleView.structural,
@@ -26011,7 +26399,7 @@ function GenerateReviewStep({
     }),
     [groupedItemsMemo, cycleView, expandedGroups, columnOneView, sidebarGraph, filterVisibleKeys]
   );
-  const selectableRowPositions = useMemo6(() => {
+  const selectableRowPositions = useMemo7(() => {
     const out = [];
     for (let i = 0; i < visibleRowsMemo.length; i++) {
       if (visibleRowsMemo[i].itemIdx >= 0) out.push(i);
@@ -26057,7 +26445,7 @@ function GenerateReviewStep({
     selectedIdx,
     extractSessionId
   });
-  const renderStatusByKey = useMemo6(() => {
+  const renderStatusByKey = useMemo7(() => {
     const merged = /* @__PURE__ */ new Map();
     for (const closure of closures.values()) {
       const per = computeRenderStatuses(closure, directIssues);
@@ -26070,7 +26458,7 @@ function GenerateReviewStep({
     }
     return merged;
   }, [closures, directIssues]);
-  const selectionStateByKey = useMemo6(() => {
+  const selectionStateByKey = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const c2 of components) {
       if (c2.status === "accepted") map.set(c2.key, "accepted");
@@ -26079,7 +26467,7 @@ function GenerateReviewStep({
     }
     return map;
   }, [components]);
-  const searchMatches = useMemo6(() => {
+  const searchMatches = useMemo7(() => {
     if (!searchQuery) return [];
     const out = [];
     for (const pos of selectableRowPositions) {
@@ -26089,7 +26477,7 @@ function GenerateReviewStep({
     }
     return out;
   }, [searchQuery, selectableRowPositions, visibleRowsMemo, components]);
-  const searchMatchCount = useMemo6(() => {
+  const searchMatchCount = useMemo7(() => {
     if (searchMatches.length === 0) return 0;
     const seen = /* @__PURE__ */ new Set();
     for (const pos of searchMatches) {
@@ -26098,7 +26486,7 @@ function GenerateReviewStep({
     }
     return seen.size;
   }, [searchMatches, visibleRowsMemo]);
-  const dimPredicate = useMemo6(
+  const dimPredicate = useMemo7(
     () => buildFlatDimPredicate({
       viewMode: columnOneView,
       searchQuery,
@@ -26129,7 +26517,7 @@ function GenerateReviewStep({
       }
     }
   };
-  const breakEdges = useMemo6(() => {
+  const breakEdges = useMemo7(() => {
     const cycle = slotCycles[cyclesCursor];
     if (!cycle) return [];
     return enumerateCycleBreaks(cycle, components);
@@ -26571,30 +26959,30 @@ function GenerateReviewStep({
     }
   });
   if (loading) {
-    return /* @__PURE__ */ jsx61(ReviewLoadingState, {});
+    return /* @__PURE__ */ jsx62(ReviewLoadingState, {});
   }
   if (loadError) {
-    return /* @__PURE__ */ jsx61(ReviewLoadError, { message: loadError });
+    return /* @__PURE__ */ jsx62(ReviewLoadError, { message: loadError });
   }
   if (showHelp) {
-    return /* @__PURE__ */ jsx61(HelpOverlay, { sections: HELP_SECTIONS2, onClose: () => setShowHelp(false) });
+    return /* @__PURE__ */ jsx62(HelpOverlay, { sections: HELP_SECTIONS2, onClose: () => setShowHelp(false) });
   }
   const renderBreakOverlay = (width) => {
     const highlightedCycle = slotCycles[cyclesCursor];
-    return /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, width, children: [
-      /* @__PURE__ */ jsx61(Text57, { bold: true, color: PALETTE.warning, children: `BREAK CYCLE ${cyclesCursor + 1} \u2014 remove a slot edge or reject a member` }),
-      highlightedCycle && /* @__PURE__ */ jsx61(CyclePathLine, { segments: formatCyclePathSegments(highlightedCycle), prefix: "  ", highlightComponents: true }),
-      /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: highlightedCycle ? "Deleting an edge removes it from $allowedComponents (undo with Ctrl+Z)." : "No cycle highlighted." }),
-      /* @__PURE__ */ jsx61(Text57, { children: " " }),
-      breakEdges.length > 0 && /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "remove slot edge:" }),
+    return /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, width, children: [
+      /* @__PURE__ */ jsx62(Text58, { bold: true, color: PALETTE.warning, children: `BREAK CYCLE ${cyclesCursor + 1} \u2014 remove a slot edge or reject a member` }),
+      highlightedCycle && /* @__PURE__ */ jsx62(CyclePathLine, { segments: formatCyclePathSegments(highlightedCycle), prefix: "  ", highlightComponents: true }),
+      /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: highlightedCycle ? "Deleting an edge removes it from $allowedComponents (undo with Ctrl+Z)." : "No cycle highlighted." }),
+      /* @__PURE__ */ jsx62(Text58, { children: " " }),
+      breakEdges.length > 0 && /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "remove slot edge:" }),
       breakEdges.map((edge, idx) => {
         const isCursor = idx === breakCursor;
-        return /* @__PURE__ */ jsx61(Text57, { inverse: isCursor, children: `${isCursor ? "\u25B6" : " "} remove '${edge.toComponent}' from ${edge.fromComponent}.$slots.${edge.slotName}.$allowedComponents` }, `break-${idx}`);
+        return /* @__PURE__ */ jsx62(Text58, { inverse: isCursor, children: `${isCursor ? "\u25B6" : " "} remove '${edge.toComponent}' from ${edge.fromComponent}.$slots.${edge.slotName}.$allowedComponents` }, `break-${idx}`);
       }),
-      breakConfirm ? /* @__PURE__ */ jsxs54(Fragment18, { children: [
-        /* @__PURE__ */ jsx61(Text57, { children: " " }),
-        /* @__PURE__ */ jsx61(Text57, { bold: true, color: PALETTE.warning, children: "Delete this slot edge? [y] confirm  [n] cancel" })
-      ] }) : /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "[\u2191\u2193/j/k] move  [Enter] delete  [x/Esc] close" })
+      breakConfirm ? /* @__PURE__ */ jsxs55(Fragment18, { children: [
+        /* @__PURE__ */ jsx62(Text58, { children: " " }),
+        /* @__PURE__ */ jsx62(Text58, { bold: true, color: PALETTE.warning, children: "Delete this slot edge? [y] confirm  [n] cancel" })
+      ] }) : /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "[\u2191\u2193/j/k] move  [Enter] delete  [x/Esc] close" })
     ] });
   };
   const breakOverlayFullScreen = breakPanel.isOpen && shouldBreakOverlayGoFullScreen({
@@ -26638,8 +27026,8 @@ function GenerateReviewStep({
     for (const c2 of closures.values()) if (c2.nodes.length > 1) return true;
     return false;
   })();
-  return /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx62(
       ReviewStepDialogs,
       {
         surfaceState: reviewSurface,
@@ -26649,24 +27037,24 @@ function GenerateReviewStep({
         onQuit
       }
     ),
-    showUnsavedWarning && !dialogOpen && /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-      /* @__PURE__ */ jsx61(Text57, { bold: true, color: PALETTE.warning, children: "Unsaved changes" }),
-      /* @__PURE__ */ jsx61(Text57, { children: "You have unsaved edits in the current field editor." }),
-      /* @__PURE__ */ jsx61(Text57, { children: " " }),
-      /* @__PURE__ */ jsx61(Text57, { children: "  [Enter]  Save and continue" }),
-      /* @__PURE__ */ jsx61(Text57, { children: "  [Esc]    Discard changes and continue" }),
-      /* @__PURE__ */ jsx61(Text57, { children: "  [Tab]    Stay in the panel" })
+    showUnsavedWarning && !dialogOpen && /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+      /* @__PURE__ */ jsx62(Text58, { bold: true, color: PALETTE.warning, children: "Unsaved changes" }),
+      /* @__PURE__ */ jsx62(Text58, { children: "You have unsaved edits in the current field editor." }),
+      /* @__PURE__ */ jsx62(Text58, { children: " " }),
+      /* @__PURE__ */ jsx62(Text58, { children: "  [Enter]  Save and continue" }),
+      /* @__PURE__ */ jsx62(Text58, { children: "  [Esc]    Discard changes and continue" }),
+      /* @__PURE__ */ jsx62(Text58, { children: "  [Tab]    Stay in the panel" })
     ] }),
-    /* @__PURE__ */ jsx61(ReviewReloadDialog, { open: showReloadDialog && !dialogOpen }),
-    removedComponents.length > 0 && !dialogOpen && /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [
-      /* @__PURE__ */ jsx61(Text57, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removedComponents.length, true) }),
-      !removedBannerCollapsed && /* @__PURE__ */ jsxs54(Fragment18, { children: [
-        /* @__PURE__ */ jsx61(Text57, { children: " " }),
-        removedComponents.map((rc) => /* @__PURE__ */ jsx61(Text57, { children: removedComponentLine(rc) }, rc.id))
+    /* @__PURE__ */ jsx62(ReviewReloadDialog, { open: showReloadDialog && !dialogOpen }),
+    removedComponents.length > 0 && !dialogOpen && /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [
+      /* @__PURE__ */ jsx62(Text58, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removedComponents.length, true) }),
+      !removedBannerCollapsed && /* @__PURE__ */ jsxs55(Fragment18, { children: [
+        /* @__PURE__ */ jsx62(Text58, { children: " " }),
+        removedComponents.map((rc) => /* @__PURE__ */ jsx62(Text58, { children: removedComponentLine(rc) }, rc.id))
       ] })
     ] }),
-    breakingChanges.length > 0 && !dialogOpen && /* @__PURE__ */ jsx61(Box53, { paddingX: 1, children: /* @__PURE__ */ jsx61(
-      Text57,
+    breakingChanges.length > 0 && !dialogOpen && /* @__PURE__ */ jsx62(Box54, { paddingX: 1, children: /* @__PURE__ */ jsx62(
+      Text58,
       {
         color: PALETTE.warning,
         children: `[b] ${breakingChanges.length} breaking change${breakingChanges.length === 1 ? "" : "s"}`
@@ -26676,32 +27064,32 @@ function GenerateReviewStep({
       const row = breakingRows[breakingCursor];
       const comp = row ? breakingChanges.find((b) => b.componentName === row.componentName) : void 0;
       if (!comp) return null;
-      return /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-        /* @__PURE__ */ jsx61(Text57, { bold: true, color: PALETTE.warning, children: `Breaking changes \u2014 ${comp.componentName}` }),
-        comp.impact && /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: `  affects ${comp.impact.affectedExperiences} experience${comp.impact.affectedExperiences === 1 ? "" : "s"}, ${comp.impact.affectedFragments} fragment${comp.impact.affectedFragments === 1 ? "" : "s"}` }),
-        comp.changes.length === 0 ? /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "  (no enumerated changes)" }) : comp.changes.map((change, ci) => /* @__PURE__ */ jsx61(Text57, { children: `  \u2022 ${formatBreakingChange(change, comp.current)}` }, `bd-detail-${ci}`)),
-        /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "[D/Esc] close detail" })
+      return /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+        /* @__PURE__ */ jsx62(Text58, { bold: true, color: PALETTE.warning, children: `Breaking changes \u2014 ${comp.componentName}` }),
+        comp.impact && /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: `  affects ${comp.impact.affectedExperiences} experience${comp.impact.affectedExperiences === 1 ? "" : "s"}, ${comp.impact.affectedFragments} fragment${comp.impact.affectedFragments === 1 ? "" : "s"}` }),
+        comp.changes.length === 0 ? /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "  (no enumerated changes)" }) : comp.changes.map((change, ci) => /* @__PURE__ */ jsx62(Text58, { children: `  \u2022 ${formatBreakingChange(change, comp.current)}` }, `bd-detail-${ci}`)),
+        /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "[D/Esc] close detail" })
       ] });
     })(),
     cyclePanel.isOpen && !dialogOpen && (() => {
       const PANEL_H = 20;
       const lines = [];
       lines.push(
-        /* @__PURE__ */ jsx61(Text57, { bold: true, color: PALETTE.warning, children: `SLOT DEPENDENCY CYCLES (${slotCycles.length})` }, "cyc-title")
+        /* @__PURE__ */ jsx62(Text58, { bold: true, color: PALETTE.warning, children: `SLOT DEPENDENCY CYCLES (${slotCycles.length})` }, "cyc-title")
       );
       lines.push(
-        /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "push will fail until these are resolved" }, "cyc-sub")
+        /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "push will fail until these are resolved" }, "cyc-sub")
       );
       lines.push(
-        /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "To fix: reject a cycle member, or break the cycle by removing a slot edge." }, "cyc-guide")
+        /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "To fix: reject a cycle member, or break the cycle by removing a slot edge." }, "cyc-guide")
       );
-      lines.push(/* @__PURE__ */ jsx61(Text57, { children: " " }, "cyc-space"));
+      lines.push(/* @__PURE__ */ jsx62(Text58, { children: " " }, "cyc-space"));
       slotCycles.forEach((cycle, idx) => {
         const nodeCount = new Set(cycle.path).size;
         const isCursor = idx === cyclesCursor;
         lines.push(
-          /* @__PURE__ */ jsx61(
-            Text57,
+          /* @__PURE__ */ jsx62(
+            Text58,
             {
               bold: true,
               inverse: isCursor,
@@ -26711,23 +27099,23 @@ function GenerateReviewStep({
           )
         );
         lines.push(
-          /* @__PURE__ */ jsx61(CyclePathLine, { segments: formatCyclePathSegments(cycle, 16), prefix: "    " }, `cyc-p-${idx}`)
+          /* @__PURE__ */ jsx62(CyclePathLine, { segments: formatCyclePathSegments(cycle, 16), prefix: "    " }, `cyc-p-${idx}`)
         );
         if (cycle.suggestedBreak) {
           const b = cycle.suggestedBreak;
           lines.push(
-            /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: `    Suggested fix: remove '${b.toComponent}' from ${b.fromComponent}.$slots.${b.slotName}.$allowedComponents` }, `cyc-f-${idx}`)
+            /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: `    Suggested fix: remove '${b.toComponent}' from ${b.fromComponent}.$slots.${b.slotName}.$allowedComponents` }, `cyc-f-${idx}`)
           );
         }
-        lines.push(/* @__PURE__ */ jsx61(Text57, { children: " " }, `cyc-s-${idx}`));
+        lines.push(/* @__PURE__ */ jsx62(Text58, { children: " " }, `cyc-s-${idx}`));
       });
       const visible = lines.slice(cyclePanelScroll, cyclePanelScroll + PANEL_H);
-      return /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+      return /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
         visible,
-        /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "[\u2191\u2193/j/k] move  [Enter] jump  [x] break cycle  [c/q/Esc] close" })
+        /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "[\u2191\u2193/j/k] move  [Enter] jump  [x] break cycle  [c/q/Esc] close" })
       ] });
     })(),
-    !dialogOpen && /* @__PURE__ */ jsx61(
+    !dialogOpen && /* @__PURE__ */ jsx62(
       LivePreviewSummary,
       {
         enabled: livePreview,
@@ -26746,17 +27134,17 @@ function GenerateReviewStep({
       const participantSet = cycleView.structural;
       const members = stillRejected.filter((n) => participantSet.has(n)).sort();
       const ancestors = stillRejected.filter((n) => !participantSet.has(n)).sort();
-      return /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [
-        /* @__PURE__ */ jsx61(Text57, { color: PALETTE.error, bold: true, children: `Cyclic manifest \u2014 auto-rejected ${stillRejected.length} component${stillRejected.length === 1 ? "" : "s"}:` }),
-        members.length > 0 && /* @__PURE__ */ jsx61(Text57, { color: PALETTE.error, children: `  Cycle members: ${members.join(", ")}` }),
-        ancestors.length > 0 && /* @__PURE__ */ jsx61(Text57, { color: PALETTE.error, children: `  Ancestors: ${ancestors.join(", ")}` }),
-        /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: undoSnapshot ? "  [Ctrl+Z] undo \xB7 [r]/[a] manually toggle \xB7 [F] continue" : "  [r]/[a] manually toggle \xB7 [F] continue" })
+      return /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [
+        /* @__PURE__ */ jsx62(Text58, { color: PALETTE.error, bold: true, children: `Cyclic manifest \u2014 auto-rejected ${stillRejected.length} component${stillRejected.length === 1 ? "" : "s"}:` }),
+        members.length > 0 && /* @__PURE__ */ jsx62(Text58, { color: PALETTE.error, children: `  Cycle members: ${members.join(", ")}` }),
+        ancestors.length > 0 && /* @__PURE__ */ jsx62(Text58, { color: PALETTE.error, children: `  Ancestors: ${ancestors.join(", ")}` }),
+        /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: undoSnapshot ? "  [Ctrl+Z] undo \xB7 [r]/[a] manually toggle \xB7 [F] continue" : "  [r]/[a] manually toggle \xB7 [F] continue" })
       ] });
     })(),
-    /* @__PURE__ */ jsx61(ReviewEmptyComponentsWarning, { count: emptyCount, hidden: dialogOpen }),
-    /* @__PURE__ */ jsx61(ReviewFinalizeError, { message: finalizeError, hidden: dialogOpen }),
-    !dialogOpen && /* @__PURE__ */ jsxs54(Box53, { children: [
-      breakingPanel.isOpen ? /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx62(ReviewEmptyComponentsWarning, { count: emptyCount, hidden: dialogOpen }),
+    /* @__PURE__ */ jsx62(ReviewFinalizeError, { message: finalizeError, hidden: dialogOpen }),
+    !dialogOpen && /* @__PURE__ */ jsxs55(Box54, { children: [
+      breakingPanel.isOpen ? /* @__PURE__ */ jsx62(
         GotoBanner,
         {
           title: "Breaking changes",
@@ -26769,7 +27157,7 @@ function GenerateReviewStep({
           width: sidebarWidth,
           footerHint: "[\u2191/\u2193] move \xB7 [Enter] jump \xB7 [D] detail \xB7 [Esc] close"
         }
-      ) : lineagePanel.isOpen && focusedComponentKey ? /* @__PURE__ */ jsx61(
+      ) : lineagePanel.isOpen && focusedComponentKey ? /* @__PURE__ */ jsx62(
         LineagePanel,
         {
           focusedComponentKey,
@@ -26779,45 +27167,565 @@ function GenerateReviewStep({
           maxRows: panelMaxRows,
           width: sidebarWidth
         }
-      ) : /* @__PURE__ */ jsx61(
+      ) : /* @__PURE__ */ jsx62(
         GroupedSidebar,
         {
-          items: groupedItems,
-          cycleParticipants: cycleParticipantSet,
-          selectedIdx,
-          selectedRowIdx: cursorRowIdx,
-          onSelect: (idx) => {
-            for (let i = 0; i < visibleRowsMemo.length; i++) {
-              if (visibleRowsMemo[i].itemIdx === idx) {
-                jumpCursorToRow(i);
-                return;
-              }
-            }
-            reviewEditor.setJsonScrollOffset(0);
-          },
-          expandedGroups,
-          onToggleExpanded: (rootName) => {
-            setExpandedGroups((prev) => {
-              const next = new Set(prev);
-              if (next.has(rootName)) next.delete(rootName);
-              else next.add(rootName);
-              return next;
-            });
-          },
-          width: sidebarWidth,
+          items: groupedItems,
+          cycleParticipants: cycleParticipantSet,
+          selectedIdx,
+          selectedRowIdx: cursorRowIdx,
+          onSelect: (idx) => {
+            for (let i = 0; i < visibleRowsMemo.length; i++) {
+              if (visibleRowsMemo[i].itemIdx === idx) {
+                jumpCursorToRow(i);
+                return;
+              }
+            }
+            reviewEditor.setJsonScrollOffset(0);
+          },
+          expandedGroups,
+          onToggleExpanded: (rootName) => {
+            setExpandedGroups((prev) => {
+              const next = new Set(prev);
+              if (next.has(rootName)) next.delete(rootName);
+              else next.add(rootName);
+              return next;
+            });
+          },
+          width: sidebarWidth,
+          focused: sidebarFocused,
+          renderStatusByKey,
+          previewAnnotationByKey,
+          selectionStateByKey,
+          scrollOffset: sidebarScrollOffset,
+          visibleCount,
+          dimPredicate,
+          visibleRows: visibleRowsMemo,
+          viewMode: columnOneView,
+          graph: sidebarGraph
+        }
+      ),
+      selected ? /* @__PURE__ */ jsx62(
+        ReviewComponentPanel,
+        {
+          selectedKey: selected.key,
+          selectedEntry: selected.entry,
+          componentRationale,
+          reviewMetadata,
+          reviewEditor,
+          width: panelWidth,
+          height: PANEL_HEIGHT,
+          jsonValue: visibleJsonPanelValue,
+          sidebarFocused,
+          fieldEditor: buildReviewFieldEditor(reviewEditor, selectedJson, () => setSidebarFocused(true), {
+            key: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? `${selected.key}::${pendingEditorFocus.target.kind}:${pendingEditorFocus.target.name}` : selected.key,
+            propRationaleKey: "p",
+            componentRationaleKey: "P",
+            projectSlotGraph,
+            currentComponentName: selected.key,
+            onDirtyChange: setEditorDirty,
+            discardTrigger,
+            initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? pendingEditorFocus.target : { kind: "description" }
+          }),
+          saveError: reviewEditor.saveError,
+          sidebarFooter: hasGroupRoots ? "  [Space] expand/collapse group  [E/C] expand/collapse all" : "",
+          livePreview: livePreviewHook,
+          livePreviewSpinner
+        }
+      ) : /* @__PURE__ */ jsx62(ReviewNoSelection, {})
+    ] }),
+    breakPanel.isOpen && !breakOverlayFullScreen && !dialogOpen && renderBreakOverlay(),
+    !dialogOpen && slotCycles.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs55(Box54, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx62(Text58, { color: PALETTE.warning, children: `\u26A0 ${slotCycles.length} slot dependency cycle${slotCycles.length === 1 ? "" : "s"} detected \u2014 push will fail` }),
+      slotCycles.slice(0, 3).map((cycle, idx) => {
+        return /* @__PURE__ */ jsx62(
+          CyclePathLine,
+          {
+            segments: formatCyclePathSegments(cycle),
+            prefix: "  Cycle: ",
+            highlightComponents: true,
+            highlightLine: true
+          },
+          `cyc-banner-${idx}`
+        );
+      }),
+      slotCycles.length > 3 && /* @__PURE__ */ jsx62(Text58, { color: PALETTE.warning, children: `  \u2026${slotCycles.length - 3} more` }),
+      /* @__PURE__ */ jsx62(Text58, { dimColor: true, children: "  press [c] for detail" })
+    ] }),
+    /* @__PURE__ */ jsx62(
+      SearchMatchSummary,
+      {
+        open: searchOpen,
+        query: searchQuery,
+        matches: searchMatchCount,
+        total: components.length,
+        autocompleteCandidates,
+        hidden: dialogOpen
+      }
+    ),
+    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx62(Box54, { columnGap: 2, flexWrap: "wrap", children: reviewEditor.panelOpen === "token-review" ? /* @__PURE__ */ jsxs55(Fragment18, { children: [
+      legendEntry("[\u2191/\u2193]", "move"),
+      legendEntry("[Enter]", "edit allowed"),
+      legendEntry("[Esc]", "close")
+    ] }) : /* @__PURE__ */ jsxs55(Fragment18, { children: [
+      legendEntry("[j/k]", "move"),
+      legendEntry("[a]", "accept"),
+      legendEntry("[r]", "reject"),
+      legendEntry("[A]", "accept all"),
+      legendEntry("[F]", "finalize"),
+      legendEntry("[L]", "flat", columnOneView === "flat"),
+      legendEntry("[l]", "lineage", lineagePanel.isOpen),
+      legendEntry("[i]", "focus lineage", jumpFilterTarget !== null),
+      legendEntry("[w]", "only breaking", activeFilters.has("broken")),
+      slotCycles.length > 0 && legendEntry("[o]", "only cycles", activeFilters.has("cycles")),
+      slotCycles.length > 0 && legendEntry("[c]", "cycle list", cyclePanel.isOpen),
+      legendEntry("[p]", "prop rationale", reviewEditor.panelOpen === "prop-rationale"),
+      legendEntry("[P]", "component rationale", reviewEditor.panelOpen === "component-rationale"),
+      legendEntry("[s]", "source", reviewEditor.panelOpen === "source"),
+      reviewEditor.currentTokenSuggestions().length > 0 && legendEntry("[t]", "token review"),
+      legendEntry("[J]", reviewEditor.showJson ? "hide JSON" : "show JSON", reviewEditor.showJson),
+      legendEntry(
+        "[H]",
+        reviewEditor.showHiddenProps ? "hide state/unattached" : "show state/unattached",
+        reviewEditor.showHiddenProps
+      ),
+      breakingChanges.length > 0 && legendEntry("[b]", "see breaking changes", breakingPanel.isOpen),
+      removedComponents.length > 0 && legendEntry("[d]", removedBannerCollapsed ? "show removed" : "hide removed", !removedBannerCollapsed),
+      legendEntry("[/]", "search", searchOpen || searchQuery.length > 0),
+      legendEntry("[Tab]", "focus panel"),
+      legendEntry("[Ctrl+Z]", "undo"),
+      legendEntry("[Ctrl+Y]", "redo"),
+      legendEntry("[Ctrl+R]", "reload"),
+      legendEntry("[?]", "help"),
+      legendEntry("[q]", "quit")
+    ] }) }),
+    !dialogOpen && /* @__PURE__ */ jsx62(
+      ReviewStatusBar,
+      {
+        entries: components,
+        onApproveAll: () => {
+          setComponents((prev) => prev.map((c2) => c2.status === "needs-review" ? { ...c2, status: "accepted" } : c2));
+        },
+        onFinalize: () => setShowFinalize(true)
+      }
+    )
+  ] });
+}
+var PANEL_HEIGHT, HELP_SECTIONS2;
+var init_GenerateReviewStep = __esm({
+  "packages/experience-design-system-cli/src/import/tui/steps/GenerateReviewStep.tsx"() {
+    "use strict";
+    init_theme();
+    init_review_json_panel();
+    init_GroupedSidebar();
+    init_composite_closure();
+    init_slot_graph();
+    init_cycle_view();
+    init_issue_inheritance();
+    init_removed_components_text();
+    init_useImmediateInput();
+    init_db();
+    init_cycle_detection();
+    init_cycle_panel_scroll();
+    init_useFinalizePreview();
+    init_fuzzy_search();
+    init_search_neighborhood();
+    init_sidebar_width();
+    init_selection_cascade();
+    init_useLineage();
+    init_cycle_auto_reject();
+    init_useOverlayPanel();
+    init_LineagePanel();
+    init_GotoBanner();
+    init_lineage_layout();
+    init_HelpOverlay();
+    init_LegendEntry();
+    init_auto_reject_decision();
+    init_breaking_change_format();
+    init_enumerate_cycle_breaks();
+    init_group_collapse();
+    init_step_filters();
+    init_sidebar_help();
+    init_sidebar_input();
+    init_sidebar_navigation();
+    init_lineage_input();
+    init_sidebar_search_state();
+    init_SearchMatchSummary();
+    init_ReviewComponentPanel();
+    init_ReviewStatus();
+    init_useReviewSession();
+    init_useReviewEditor();
+    init_useReviewSurfaceState();
+    init_ReviewDialogs();
+    init_review_input();
+    init_useReviewPreview();
+    init_LivePreviewSummary();
+    init_cycle_auto_reject();
+    PANEL_HEIGHT = 22;
+    HELP_SECTIONS2 = [
+      {
+        title: "Navigation",
+        entries: [
+          { keys: "j / k / \u2191 / \u2193", label: "Move cursor" },
+          { keys: "Tab", label: "Toggle sidebar/panel" },
+          { keys: "Enter", label: "Drill to source" }
+        ]
+      },
+      {
+        title: "Selection",
+        entries: [
+          { keys: "a", label: "Accept" },
+          { keys: "r", label: "Reject" },
+          { keys: "A", label: "Accept all" },
+          { keys: "F", label: "Finalize" }
+        ]
+      },
+      createSidebarViewsHelpSection(true),
+      {
+        title: "Panels",
+        entries: [
+          { keys: "c", label: "Cycle list" },
+          { keys: "p", label: "Prop rationale" },
+          { keys: "P", label: "Component rationale" },
+          { keys: "s", label: "Source" },
+          { keys: "J", label: "Toggle JSON" }
+        ]
+      },
+      {
+        title: "Resolving cycles",
+        entries: [
+          { keys: "r", label: "Reject a cycle member (drops it from the push), or" },
+          { keys: "", label: "break the cycle by removing a slot's" },
+          { keys: "", label: "$allowedComponents edge (see [c] suggested fix)." },
+          { keys: "x", label: "Break cycle (from [c]): delete a slot edge." }
+        ]
+      },
+      {
+        title: "Search",
+        entries: [{ keys: "/", label: "Search" }]
+      },
+      {
+        title: "History",
+        entries: [
+          { keys: "Ctrl+Z", label: "Undo" },
+          { keys: "Ctrl+Y", label: "Redo" },
+          { keys: "Ctrl+R", label: "Reload from save" }
+        ]
+      },
+      {
+        title: "General",
+        entries: [
+          { keys: "?", label: "Close help" },
+          { keys: "q", label: "Quit" }
+        ]
+      }
+    ];
+  }
+});
+
+// packages/experience-design-system-cli/src/import/tui/steps/AtomicGenerateReviewStep.tsx
+import { useCallback as useCallback8, useState as useState32 } from "react";
+import { Box as Box55, Text as Text59 } from "ink";
+import { jsx as jsx63, jsxs as jsxs56 } from "react/jsx-runtime";
+function sortComponentsForSidebar3(components) {
+  return [...components].sort((a, b) => {
+    const aEmpty = Object.keys(a.entry.$properties ?? {}).length === 0;
+    const bEmpty = Object.keys(b.entry.$properties ?? {}).length === 0;
+    if (aEmpty !== bEmpty) return aEmpty ? -1 : 1;
+    return a.key.localeCompare(b.key);
+  });
+}
+function AtomicGenerateReviewStep({
+  extractSessionId,
+  tokenSessionId,
+  onFinalize,
+  onQuit,
+  livePreview = true,
+  spaceId = "",
+  environmentId = "",
+  cmaToken = "",
+  host = "",
+  tokensPath = "",
+  initialFinalizeError = null
+}) {
+  const terminalWidth = useTerminalColumns();
+  const loadSessionState = useCallback8(
+    () => loadReviewSessionState({
+      extractSessionId,
+      tokenSessionId,
+      sortEntries: (entries) => sortComponentsForSidebar3(entries)
+    }),
+    [extractSessionId, tokenSessionId]
+  );
+  const reviewSurface = useReviewSurfaceState(initialFinalizeError);
+  const {
+    components,
+    setComponents,
+    loading,
+    loadError,
+    availableTokens,
+    reloadFromSave: reloadSessionFromSave
+  } = useReviewSession({
+    loadSession: loadSessionState,
+    tokensPath
+  });
+  const [selectedIdx, setSelectedIdx] = useState32(0);
+  const [sidebarScrollOffset, setSidebarScrollOffset] = useState32(0);
+  const {
+    sidebarFocused,
+    setSidebarFocused,
+    showFinalize,
+    setShowFinalize,
+    showQuit,
+    setShowQuit,
+    finalizeError,
+    setFinalizeError
+  } = reviewSurface;
+  const [showRemovedPanel, setShowRemovedPanel] = useState32(false);
+  const [showReloadDialog, setShowReloadDialog] = useState32(false);
+  const applyHistorySnapshot = (snapshot) => {
+    setComponents(
+      snapshot.components.map((component) => ({
+        key: component.key,
+        entry: component.entry,
+        status: component.status
+      }))
+    );
+  };
+  const { pushHistorySnapshot, handleUndo, handleRedo, resetHistory } = useReviewHistory({
+    loading,
+    components,
+    createSnapshot: (entries) => createReviewHistorySnapshot(entries),
+    applySnapshot: applyHistorySnapshot
+  });
+  const { previewAnnotations, removedComponents, livePreviewHook, livePreviewSpinner } = useReviewPreview({
+    components,
+    loading,
+    livePreview,
+    sessionId: extractSessionId,
+    tokensPath,
+    spaceId,
+    environmentId,
+    cmaToken,
+    host
+  });
+  const reviewEditor = useReviewEditor({
+    components,
+    selectedIdx,
+    extractSessionId,
+    availableTokens,
+    setComponents,
+    pushHistorySnapshot,
+    onEditSaved: () => livePreviewHook.trigger(),
+    onTokenSaved: () => livePreviewHook.trigger()
+  });
+  const reloadFromSave = () => {
+    const result = reloadSessionFromSave();
+    if (!result) return;
+    resetHistory(createReviewHistorySnapshot(result.entries));
+  };
+  const { reviewMetadata, componentRationale } = useReviewMetadata({
+    components,
+    selectedIdx,
+    extractSessionId
+  });
+  const updateStatus = (idx, status) => {
+    setComponents((prev) => {
+      const next = prev.map((c2, i) => i === idx ? { ...c2, status } : c2);
+      pushHistorySnapshot(next, `status:${status}`);
+      return next;
+    });
+  };
+  const acceptAll = () => {
+    setComponents((prev) => {
+      const next = prev.map((c2) => c2.status === "needs-review" ? { ...c2, status: "accepted" } : c2);
+      pushHistorySnapshot(next, "accept-all");
+      return next;
+    });
+  };
+  const finalizePreview = useReviewFinalizePreview({
+    open: showFinalize,
+    extractSessionId,
+    tokensPath,
+    spaceId,
+    environmentId,
+    cmaToken,
+    host,
+    components
+  });
+  const handleFinalizeConfirm = () => {
+    const counts = finalizeReviewSession(extractSessionId, components);
+    onFinalize(counts.accepted, counts.rejected, counts.unresolved);
+  };
+  const dialogOpen = showFinalize || showQuit;
+  useImmediateInput((input, key) => {
+    if (handleReviewOverlayInput(input, key, {
+      loading,
+      loadError,
+      showFinalize,
+      dialogOpen,
+      showReloadDialog,
+      finalizePreview,
+      reloadFromSave,
+      setShowReloadDialog,
+      onQuit,
+      handleUndo,
+      handleRedo
+    }))
+      return;
+    if (showRemovedPanel) {
+      if (input === "d" || key.escape) {
+        setShowRemovedPanel(false);
+      }
+      return;
+    }
+    if (input === "d" && sidebarFocused && livePreview && removedComponents.length > 0) {
+      setShowRemovedPanel(true);
+      return;
+    }
+    if (handleReviewPanelShortcuts(input, key, { ...reviewEditor, propKey: "i", componentKey: "I" })) return;
+    if (key.tab) {
+      setSidebarFocused((prev) => !prev);
+      return;
+    }
+    if (input === "e" && sidebarFocused) {
+      setSidebarFocused(false);
+      return;
+    }
+    const current = components[selectedIdx];
+    if (handleJsonPanelInput(input, key, {
+      ...reviewEditor,
+      sidebarFocused,
+      showJson: reviewEditor.showJson,
+      jsonValue: getReviewJsonPanelValue(current ?? null, reviewEditor.showHiddenProps),
+      height: PANEL_HEIGHT2
+    }))
+      return;
+    if (!sidebarFocused) return;
+    if (input === "q") {
+      setShowQuit(true);
+      return;
+    }
+    if (input === "F") {
+      setShowFinalize(true);
+      return;
+    }
+    if (input === "a") {
+      updateStatus(selectedIdx, "accepted");
+      setFinalizeError(null);
+      return;
+    }
+    if (input === "r") {
+      updateStatus(selectedIdx, "rejected");
+      return;
+    }
+    if (input === "A") {
+      acceptAll();
+      setFinalizeError(null);
+      return;
+    }
+    if (handleReviewViewToggleInput(input, reviewEditor)) return;
+    if (key.upArrow || input === "k") {
+      setSelectedIdx((prev) => {
+        const newIdx = Math.max(0, prev - 1);
+        setSidebarScrollOffset((off) => Math.min(off, newIdx));
+        return newIdx;
+      });
+      reviewEditor.setJsonScrollOffset(0);
+      reviewEditor.setDraftValue("");
+      reviewEditor.setSaveError(null);
+    } else if (key.downArrow || input === "j") {
+      setSelectedIdx((prev) => {
+        const newIdx = Math.min(components.length - 1, prev + 1);
+        setSidebarScrollOffset((off) => newIdx >= off + VISIBLE_COUNT3 ? newIdx - VISIBLE_COUNT3 + 1 : off);
+        return newIdx;
+      });
+      reviewEditor.setJsonScrollOffset(0);
+      reviewEditor.setDraftValue("");
+      reviewEditor.setSaveError(null);
+    }
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx63(ReviewLoadingState, {});
+  }
+  if (loadError) {
+    return /* @__PURE__ */ jsx63(ReviewLoadError, { message: loadError });
+  }
+  const { selected, selectedJson, visibleJsonPanelValue } = getReviewSelectionState(
+    components,
+    selectedIdx,
+    reviewEditor.showHiddenProps
+  );
+  const isEmpty2 = (c2) => Object.keys(c2.entry.$properties).length === 0;
+  const emptyCount = components.filter(isEmpty2).length;
+  const sidebarItems = components.map((c2) => ({
+    id: c2.key,
+    name: isEmpty2(c2) ? `${c2.key} (empty)` : c2.key,
+    status: c2.status,
+    previewAnnotation: previewAnnotations.get(c2.key),
+    extractionConfidence: null,
+    needsReview: false,
+    validationErrorCount: 0,
+    validationWarningCount: isEmpty2(c2) ? 1 : 0
+  }));
+  const longestName = components.reduce((m, c2) => Math.max(m, c2.key.length + (isEmpty2(c2) ? " (empty)".length : 0)), 0);
+  const sidebarWidth = Math.min(Math.max(longestName + 5, 14), 30);
+  const panelWidth = Math.max(10, terminalWidth - sidebarWidth - 4);
+  return /* @__PURE__ */ jsxs56(Box55, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx63(
+      ReviewStepDialogs,
+      {
+        surfaceState: reviewSurface,
+        components,
+        finalizePreview,
+        onFinalize: handleFinalizeConfirm,
+        onQuit
+      }
+    ),
+    /* @__PURE__ */ jsx63(ReviewReloadDialog, { open: showReloadDialog && !dialogOpen }),
+    showRemovedPanel && !dialogOpen && /* @__PURE__ */ jsxs56(Box55, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+      /* @__PURE__ */ jsx63(Text59, { bold: true, color: PALETTE.info, children: `Removed components (${removedComponents.length})` }),
+      /* @__PURE__ */ jsx63(Text59, { dimColor: true, children: "these will be DELETED from the target space" }),
+      /* @__PURE__ */ jsx63(Text59, { children: " " }),
+      removedComponents.map((rc) => /* @__PURE__ */ jsx63(Text59, { children: `- ${rc.name}${rc.id ? `  (${rc.id})` : ""}` }, rc.id)),
+      /* @__PURE__ */ jsx63(Text59, { children: " " }),
+      /* @__PURE__ */ jsx63(Text59, { dimColor: true, children: "press d or Esc to close" })
+    ] }),
+    !dialogOpen && /* @__PURE__ */ jsx63(
+      LivePreviewSummary,
+      {
+        enabled: livePreview,
+        previewAnnotations,
+        status: livePreviewHook.status,
+        disabled: livePreviewHook.disabled,
+        spinner: livePreviewSpinner,
+        removedCount: removedComponents.length,
+        showRemovedListHint: true
+      }
+    ),
+    /* @__PURE__ */ jsx63(ReviewEmptyComponentsWarning, { count: emptyCount, hidden: dialogOpen }),
+    /* @__PURE__ */ jsx63(ReviewFinalizeError, { message: finalizeError, hidden: dialogOpen }),
+    !dialogOpen && /* @__PURE__ */ jsxs56(Box55, { children: [
+      /* @__PURE__ */ jsx63(
+        Sidebar,
+        {
+          components: sidebarItems,
+          selectedId: selected?.key ?? null,
           focused: sidebarFocused,
-          renderStatusByKey,
-          previewAnnotationByKey,
-          selectionStateByKey,
           scrollOffset: sidebarScrollOffset,
-          visibleCount,
-          dimPredicate,
-          visibleRows: visibleRowsMemo,
-          viewMode: columnOneView,
-          graph: sidebarGraph
+          visibleCount: VISIBLE_COUNT3,
+          onSelect: (id) => {
+            const idx = components.findIndex((c2) => c2.key === id);
+            if (idx >= 0) {
+              setSelectedIdx(idx);
+              reviewEditor.setJsonScrollOffset(0);
+            }
+          },
+          onScrollChange: setSidebarScrollOffset,
+          width: sidebarWidth
         }
       ),
-      selected ? /* @__PURE__ */ jsx61(
+      selected ? /* @__PURE__ */ jsx63(
         ReviewComponentPanel,
         {
           selectedKey: selected.key,
@@ -26826,224 +27734,55 @@ function GenerateReviewStep({
           reviewMetadata,
           reviewEditor,
           width: panelWidth,
-          height: PANEL_HEIGHT,
+          height: PANEL_HEIGHT2,
+          sourceBorderColor: PALETTE.border,
           jsonValue: visibleJsonPanelValue,
           sidebarFocused,
-          fieldEditor: buildReviewFieldEditor(reviewEditor, selectedJson, () => setSidebarFocused(true), {
-            key: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? `${selected.key}::${pendingEditorFocus.target.kind}:${pendingEditorFocus.target.name}` : selected.key,
-            propRationaleKey: "p",
-            componentRationaleKey: "P",
-            projectSlotGraph,
-            currentComponentName: selected.key,
-            onDirtyChange: setEditorDirty,
-            discardTrigger,
-            initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? pendingEditorFocus.target : { kind: "description" }
-          }),
+          fieldEditor: buildReviewFieldEditor(reviewEditor, selectedJson, () => setSidebarFocused(true)),
           saveError: reviewEditor.saveError,
-          sidebarFooter: hasGroupRoots ? "  [Space] expand/collapse group  [E/C] expand/collapse all" : "",
+          sidebarFooter: "  [a] accept  [r] reject  [A] accept all  [i] prop rationale  [I] component rationale  [s] source  [J] " + (reviewEditor.showJson ? "hide JSON" : "show JSON") + "  [H] " + (reviewEditor.showHiddenProps ? "hide state/unattached" : "show state/unattached") + (reviewEditor.currentTokenSuggestions().length > 0 ? "  [t] token review" : "") + "  [^z] undo  [^y] redo  [^r] reload  [F] finalize  [e/Tab] focus panel" + (livePreview && removedComponents.length > 0 ? "  [d] removed list" : "") + "  [q] quit",
           livePreview: livePreviewHook,
           livePreviewSpinner
         }
-      ) : /* @__PURE__ */ jsx61(ReviewNoSelection, {})
-    ] }),
-    breakPanel.isOpen && !breakOverlayFullScreen && !dialogOpen && renderBreakOverlay(),
-    !dialogOpen && slotCycles.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs54(Box53, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx61(Text57, { color: PALETTE.warning, children: `\u26A0 ${slotCycles.length} slot dependency cycle${slotCycles.length === 1 ? "" : "s"} detected \u2014 push will fail` }),
-      slotCycles.slice(0, 3).map((cycle, idx) => {
-        return /* @__PURE__ */ jsx61(
-          CyclePathLine,
-          {
-            segments: formatCyclePathSegments(cycle),
-            prefix: "  Cycle: ",
-            highlightComponents: true,
-            highlightLine: true
-          },
-          `cyc-banner-${idx}`
-        );
-      }),
-      slotCycles.length > 3 && /* @__PURE__ */ jsx61(Text57, { color: PALETTE.warning, children: `  \u2026${slotCycles.length - 3} more` }),
-      /* @__PURE__ */ jsx61(Text57, { dimColor: true, children: "  press [c] for detail" })
+      ) : /* @__PURE__ */ jsx63(ReviewNoSelection, {})
     ] }),
-    /* @__PURE__ */ jsx61(
-      SearchMatchSummary,
-      {
-        open: searchOpen,
-        query: searchQuery,
-        matches: searchMatchCount,
-        total: components.length,
-        autocompleteCandidates,
-        hidden: dialogOpen
-      }
-    ),
-    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx61(Box53, { columnGap: 2, flexWrap: "wrap", children: reviewEditor.panelOpen === "token-review" ? /* @__PURE__ */ jsxs54(Fragment18, { children: [
-      legendEntry("[\u2191/\u2193]", "move"),
-      legendEntry("[Enter]", "edit allowed"),
-      legendEntry("[Esc]", "close")
-    ] }) : /* @__PURE__ */ jsxs54(Fragment18, { children: [
-      legendEntry("[j/k]", "move"),
-      legendEntry("[a]", "accept"),
-      legendEntry("[r]", "reject"),
-      legendEntry("[A]", "accept all"),
-      legendEntry("[F]", "finalize"),
-      legendEntry("[L]", "flat", columnOneView === "flat"),
-      legendEntry("[l]", "lineage", lineagePanel.isOpen),
-      legendEntry("[i]", "focus lineage", jumpFilterTarget !== null),
-      legendEntry("[w]", "only breaking", activeFilters.has("broken")),
-      slotCycles.length > 0 && legendEntry("[o]", "only cycles", activeFilters.has("cycles")),
-      slotCycles.length > 0 && legendEntry("[c]", "cycle list", cyclePanel.isOpen),
-      legendEntry("[p]", "prop rationale", reviewEditor.panelOpen === "prop-rationale"),
-      legendEntry("[P]", "component rationale", reviewEditor.panelOpen === "component-rationale"),
-      legendEntry("[s]", "source", reviewEditor.panelOpen === "source"),
-      reviewEditor.currentTokenSuggestions().length > 0 && legendEntry("[t]", "token review"),
-      legendEntry("[J]", reviewEditor.showJson ? "hide JSON" : "show JSON", reviewEditor.showJson),
-      legendEntry(
-        "[H]",
-        reviewEditor.showHiddenProps ? "hide state/unattached" : "show state/unattached",
-        reviewEditor.showHiddenProps
-      ),
-      breakingChanges.length > 0 && legendEntry("[b]", "see breaking changes", breakingPanel.isOpen),
-      removedComponents.length > 0 && legendEntry("[d]", removedBannerCollapsed ? "show removed" : "hide removed", !removedBannerCollapsed),
-      legendEntry("[/]", "search", searchOpen || searchQuery.length > 0),
-      legendEntry("[Tab]", "focus panel"),
-      legendEntry("[Ctrl+Z]", "undo"),
-      legendEntry("[Ctrl+Y]", "redo"),
-      legendEntry("[Ctrl+R]", "reload"),
-      legendEntry("[?]", "help"),
-      legendEntry("[q]", "quit")
-    ] }) }),
-    !dialogOpen && /* @__PURE__ */ jsx61(
-      ReviewStatusBar,
-      {
-        entries: components,
-        onApproveAll: () => {
-          setComponents((prev) => prev.map((c2) => c2.status === "needs-review" ? { ...c2, status: "accepted" } : c2));
-        },
-        onFinalize: () => setShowFinalize(true)
-      }
-    )
+    !dialogOpen && /* @__PURE__ */ jsx63(ReviewStatusBar, { entries: components, onApproveAll: acceptAll, onFinalize: () => setShowFinalize(true) })
   ] });
 }
-var PANEL_HEIGHT, HELP_SECTIONS2;
-var init_GenerateReviewStep = __esm({
-  "packages/experience-design-system-cli/src/import/tui/steps/GenerateReviewStep.tsx"() {
+var VISIBLE_COUNT3, PANEL_HEIGHT2;
+var init_AtomicGenerateReviewStep = __esm({
+  "packages/experience-design-system-cli/src/import/tui/steps/AtomicGenerateReviewStep.tsx"() {
     "use strict";
-    init_theme();
-    init_review_json_panel();
-    init_GroupedSidebar();
-    init_composite_closure();
-    init_slot_graph();
-    init_cycle_view();
-    init_issue_inheritance();
-    init_removed_components_text();
+    init_Sidebar();
     init_useImmediateInput();
-    init_db();
-    init_cycle_detection();
-    init_cycle_panel_scroll();
     init_useFinalizePreview();
-    init_fuzzy_search();
-    init_search_neighborhood();
-    init_sidebar_width();
-    init_selection_cascade();
-    init_useLineage();
-    init_cycle_auto_reject();
-    init_useOverlayPanel();
-    init_LineagePanel();
-    init_GotoBanner();
-    init_lineage_layout();
-    init_HelpOverlay();
-    init_LegendEntry();
-    init_auto_reject_decision();
-    init_breaking_change_format();
-    init_enumerate_cycle_breaks();
-    init_group_collapse();
-    init_step_filters();
-    init_sidebar_help();
-    init_sidebar_input();
-    init_sidebar_navigation();
-    init_lineage_input();
-    init_sidebar_search_state();
-    init_SearchMatchSummary();
+    init_theme();
     init_ReviewComponentPanel();
+    init_review_json_panel();
+    init_LivePreviewSummary();
     init_ReviewStatus();
+    init_review_input();
     init_useReviewSession();
     init_useReviewEditor();
     init_useReviewSurfaceState();
-    init_ReviewDialogs();
-    init_review_input();
     init_useReviewPreview();
-    init_LivePreviewSummary();
-    init_cycle_auto_reject();
-    PANEL_HEIGHT = 22;
-    HELP_SECTIONS2 = [
-      {
-        title: "Navigation",
-        entries: [
-          { keys: "j / k / \u2191 / \u2193", label: "Move cursor" },
-          { keys: "Tab", label: "Toggle sidebar/panel" },
-          { keys: "Enter", label: "Drill to source" }
-        ]
-      },
-      {
-        title: "Selection",
-        entries: [
-          { keys: "a", label: "Accept" },
-          { keys: "r", label: "Reject" },
-          { keys: "A", label: "Accept all" },
-          { keys: "F", label: "Finalize" }
-        ]
-      },
-      createSidebarViewsHelpSection(true),
-      {
-        title: "Panels",
-        entries: [
-          { keys: "c", label: "Cycle list" },
-          { keys: "p", label: "Prop rationale" },
-          { keys: "P", label: "Component rationale" },
-          { keys: "s", label: "Source" },
-          { keys: "J", label: "Toggle JSON" }
-        ]
-      },
-      {
-        title: "Resolving cycles",
-        entries: [
-          { keys: "r", label: "Reject a cycle member (drops it from the push), or" },
-          { keys: "", label: "break the cycle by removing a slot's" },
-          { keys: "", label: "$allowedComponents edge (see [c] suggested fix)." },
-          { keys: "x", label: "Break cycle (from [c]): delete a slot edge." }
-        ]
-      },
-      {
-        title: "Search",
-        entries: [{ keys: "/", label: "Search" }]
-      },
-      {
-        title: "History",
-        entries: [
-          { keys: "Ctrl+Z", label: "Undo" },
-          { keys: "Ctrl+Y", label: "Redo" },
-          { keys: "Ctrl+R", label: "Reload from save" }
-        ]
-      },
-      {
-        title: "General",
-        entries: [
-          { keys: "?", label: "Close help" },
-          { keys: "q", label: "Quit" }
-        ]
-      }
-    ];
+    init_ReviewDialogs();
+    init_useTerminalColumns();
+    VISIBLE_COUNT3 = 20;
+    PANEL_HEIGHT2 = 22;
   }
 });
 
 // packages/experience-design-system-cli/src/import/tui/final-review-host.tsx
-import { Box as Box54, Text as Text58 } from "ink";
-import React23 from "react";
-import { jsx as jsx62, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Box as Box56, Text as Text60 } from "ink";
+import React25 from "react";
+import { jsx as jsx64, jsxs as jsxs57 } from "react/jsx-runtime";
 function FinalReviewHost({
   extractSessionId,
   tokenSessionId,
   generatedCount,
   autoAccept,
+  compositionMode = "atomic",
   onFinalize,
   onQuit,
   livePreview,
@@ -27056,13 +27795,14 @@ function FinalReviewHost({
   allowDeletions
 }) {
   if (!extractSessionId) {
-    return /* @__PURE__ */ jsx62(Box54, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx62(Text58, { color: PALETTE.error, children: "Error: no session ID \u2014 cannot load generated definitions." }) });
+    return /* @__PURE__ */ jsx64(Box56, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx64(Text60, { color: PALETTE.error, children: "Error: no session ID \u2014 cannot load generated definitions." }) });
   }
   if (autoAccept) {
-    return /* @__PURE__ */ jsx62(FinalReviewAutoAccept, { generatedCount, onFinalize });
+    return /* @__PURE__ */ jsx64(FinalReviewAutoAccept, { generatedCount, onFinalize });
   }
-  return /* @__PURE__ */ jsx62(
-    GenerateReviewStep,
+  const StepComponent = compositionMode === "atomic" ? AtomicGenerateReviewStep : GenerateReviewStep;
+  return /* @__PURE__ */ jsx64(
+    StepComponent,
     {
       extractSessionId,
       tokenSessionId,
@@ -27075,7 +27815,7 @@ function FinalReviewHost({
       host,
       tokensPath,
       initialFinalizeError,
-      allowDeletions
+      ...compositionMode !== "atomic" ? { allowDeletions } : {}
     }
   );
 }
@@ -27083,10 +27823,10 @@ function FinalReviewAutoAccept({
   generatedCount,
   onFinalize
 }) {
-  React23.useEffect(() => {
+  React25.useEffect(() => {
     onFinalize(generatedCount, 0, 0);
   }, []);
-  return /* @__PURE__ */ jsx62(Box54, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsxs55(Text58, { dimColor: true, children: [
+  return /* @__PURE__ */ jsx64(Box56, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsxs57(Text60, { dimColor: true, children: [
     "Auto-accepting ",
     generatedCount,
     " generated components..."
@@ -27097,6 +27837,7 @@ var init_final_review_host = __esm({
     "use strict";
     init_theme();
     init_GenerateReviewStep();
+    init_AtomicGenerateReviewStep();
   }
 });
 
@@ -27195,8 +27936,8 @@ __export(WizardApp_exports, {
   parsePrintTokensCount: () => parsePrintTokensCount,
   shouldRunMapTokens: () => shouldRunMapTokens
 });
-import { useEffect as useEffect13, useRef as useRef10, useState as useState31 } from "react";
-import { Box as Box55, Text as Text59, useStdout as useStdout6 } from "ink";
+import { useEffect as useEffect13, useRef as useRef10, useState as useState33 } from "react";
+import { Box as Box57, Text as Text61, useStdout as useStdout7 } from "ink";
 import { join as join25, resolve as resolve25 } from "node:path";
 import { appendFileSync as appendFileSync2, writeFileSync } from "node:fs";
 import { access as access8, readFile as readFile23, stat as stat6 } from "node:fs/promises";
@@ -27204,7 +27945,7 @@ import { tmpdir } from "node:os";
 import { execFile as execFile4, spawn as spawn4 } from "node:child_process";
 import { mkdir as mkdir7 } from "node:fs/promises";
 import { buildManifest as buildManifest4 } from "@contentful/experience-design-system-types";
-import { jsx as jsx63, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs58 } from "react/jsx-runtime";
 function buildSelectAgentArgs(opts) {
   const args = ["analyze", "select-agent", "--agent", opts.agent, "--session", opts.sessionId, "--exclude-invalid"];
   if (opts.model) args.push("--model", opts.model);
@@ -27324,6 +28065,7 @@ function WizardApp({
   host,
   autoAcceptScope = false,
   autoRejectCycles = false,
+  compositionMode = "atomic",
   compositionMap,
   compositionAgent = false,
   compositionAgentMode,
@@ -27352,7 +28094,7 @@ function WizardApp({
 } = {}) {
   const defaultConfiguredHost = toConfiguredHost(host || process.env["EDS_HOST"]) ?? DEFAULT_CONFIGURED_HOST;
   const resolveWizardHost = (hostValue) => hostValue || defaultConfiguredHost;
-  const { stdout } = useStdout6();
+  const { stdout } = useStdout7();
   const terminalWidth = stdout?.columns ?? 80;
   const logInit = useRef10(false);
   if (!logInit.current) {
@@ -27376,7 +28118,7 @@ function WizardApp({
   const initialStepResolved = modifyEntryReady ? "final-review" : pushFromPickerReady ? "push-from-picker" : rawTokensEntryReady ? "generating-tokens" : initialProjectPath ? "token-input" : "welcome";
   const initialOutDir = initialProjectPath ? join25(resolve25(initialProjectPath), ".contentful") : "";
   const initialTokensPath = (modifyEntryReady || pushFromPickerReady) && initialOutDir && seedTokenSessionId ? join25(initialOutDir, "tokens.json") : "";
-  const [state, setState] = useState31({
+  const [state, setState] = useState33({
     step: modifyEntryReady || rawTokensEntryReady || pushFromPickerReady ? initialStepResolved : initialRuns && initialRuns.length > 0 ? "run-picker" : initialStepResolved,
     agent: initialAgent ?? "claude",
     ...initialModel ? { agentModel: initialModel } : {},
@@ -27622,14 +28364,17 @@ If you are using AWS Bedrock, run:
     const outDir = join25(resolve25(projectPath), ".contentful");
     update({ step: "extracting", outDir, extractProgress: null, compositionPhase: null });
     const extractArgs = [findCliPath(), "analyze", "extract", "--project", projectPath];
-    if (compositionMap) extractArgs.push("--composition-map", compositionMap);
-    if (compositionAgent) extractArgs.push("--composition-agent");
-    if (compositionAgentMode) extractArgs.push("--composition-agent-mode", compositionAgentMode);
-    if (compositionRefresh) extractArgs.push("--composition-refresh");
-    if (generateMap) extractArgs.push("--generate-map", generateMap);
-    for (const p of promptOverrides ?? []) extractArgs.push("--prompt", p);
-    if (state.agent) extractArgs.push("--agent", state.agent);
-    if (state.bedrock) extractArgs.push("--bedrock");
+    if (compositionMode === "composite") {
+      extractArgs.push("--composite");
+      if (compositionMap) extractArgs.push("--composition-map", compositionMap);
+      if (compositionAgent) extractArgs.push("--composition-agent");
+      if (compositionAgentMode) extractArgs.push("--composition-agent-mode", compositionAgentMode);
+      if (compositionRefresh) extractArgs.push("--composition-refresh");
+      if (generateMap) extractArgs.push("--generate-map", generateMap);
+      for (const p of promptOverrides ?? []) extractArgs.push("--prompt", p);
+      if (state.agent) extractArgs.push("--agent", state.agent);
+      if (state.bedrock) extractArgs.push("--bedrock");
+    }
     const r = await runSpawnedCli(extractArgs, (chunk) => {
       for (const line of chunk.split("\n")) {
         const scanMatch = /^progress=scan:(\d+)$/.exec(line.trim());
@@ -28472,7 +29217,8 @@ If using a custom --host, make sure the space exists on that host.`
           extractSessionId: state.extractSessionId ?? "",
           generateSessionId: state.generateSessionId,
           sourceFingerprint,
-          savedFingerprint
+          savedFingerprint,
+          compositionMode
         });
         setState((prev) => ({ ...prev, lastRunId: record.id }));
       } catch (err) {
@@ -28545,7 +29291,7 @@ If using a custom --host, make sure the space exists on that host.`
   const stepContent = (() => {
     switch (state.step) {
       case "run-picker":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunPicker,
           {
             runs: initialRuns ?? [],
@@ -28560,7 +29306,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "welcome":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           WelcomeStep,
           {
             onContinue: (path) => {
@@ -28572,7 +29318,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "token-input":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           TokenInputStep,
           {
             onConfirm: (rawTokensPath) => {
@@ -28583,7 +29329,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "token-reuse-gate":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           GateStep,
           {
             successMessage: "Existing tokens.json found",
@@ -28605,7 +29351,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "checking-claude-auth":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: state.authCheckStepNumber,
@@ -28615,7 +29361,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "generating-tokens":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: 1,
@@ -28625,7 +29371,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "path-validation":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           PathValidationStep,
           {
             projectPath: state.projectPath,
@@ -28665,7 +29411,7 @@ If using a custom --host, make sure the space exists on that host.`
           if (phase === "done") return "Composition mapping resolved \u2713";
           return `Composition: ${phase}`;
         })();
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: hasTokens ? 2 : 1,
@@ -28679,7 +29425,7 @@ If using a custom --host, make sure the space exists on that host.`
       }
       case "scope-gate": {
         if (!state.extractSessionId) {
-          return /* @__PURE__ */ jsx63(Box55, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx63(Text59, { color: PALETTE.error, children: "Error: extract session ID missing \u2014 please re-run." }) });
+          return /* @__PURE__ */ jsx65(Box57, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx65(Text61, { color: PALETTE.error, children: "Error: extract session ID missing \u2014 please re-run." }) });
         }
         const sessionId2 = state.extractSessionId;
         const db = openPipelineDb();
@@ -28690,11 +29436,12 @@ If using a custom --host, make sure the space exists on that host.`
           db.close();
         }
         components = mergeAiDecisions(components, state.aiDecisions);
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           ScopeGateHost,
           {
             components,
             autoAccept: autoAcceptScope,
+            compositionMode,
             aiFilterStatus: state.aiFilterStatus,
             aiFilterProgress: state.aiFilterProgress,
             aiFilterError: state.aiFilterError,
@@ -28734,7 +29481,7 @@ If using a custom --host, make sure the space exists on that host.`
         const p = state.generateProgress;
         const stepNum = hasTokens ? 4 : 3;
         const progressDetail = p ? `[${p.done}/${p.total}] ${p.current} \u2014 this can take 10\u201330 minutes for large libraries` : `Starting up ${state.agent}... (this can take 10\u201330 minutes for large libraries \u2014 grab a coffee)`;
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: stepNum,
@@ -28747,7 +29494,7 @@ If using a custom --host, make sure the space exists on that host.`
       }
       case "mapping-tokens": {
         const stepNum = hasTokens ? 5 : 4;
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: stepNum,
@@ -28759,13 +29506,14 @@ If using a custom --host, make sure the space exists on that host.`
         );
       }
       case "final-review": {
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           FinalReviewHost,
           {
             extractSessionId: state.extractSessionId,
             tokenSessionId: state.tokenSessionId,
             generatedCount: state.generatedCount,
             autoAccept: autoAcceptScope,
+            compositionMode,
             livePreview,
             spaceId: state.spaceId,
             environmentId: state.environmentId,
@@ -28906,7 +29654,7 @@ If using a custom --host, make sure the space exists on that host.`
         const files = [tokenDesc, compDesc].filter(Boolean).join(" and ");
         const count = state.generatedAcceptedCount > 0 ? state.generatedAcceptedCount : state.generatedCount;
         const summary = hasComponents ? `${count} component definition${count !== 1 ? "s" : ""} ready${hasTokens ? ", design tokens ready" : ""}.` : hasTokens ? "Design tokens ready." : "Ready to continue.";
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           PushDecisionGateStep,
           {
             summary,
@@ -28938,7 +29686,7 @@ If using a custom --host, make sure the space exists on that host.`
         );
       }
       case "credentials":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           CredentialsStep,
           {
             initialSpaceId: state.spaceId,
@@ -28971,7 +29719,7 @@ If using a custom --host, make sure the space exists on that host.`
         );
       case "push-from-picker":
       case "previewing":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: totalSteps,
@@ -28984,7 +29732,7 @@ If using a custom --host, make sure the space exists on that host.`
         const editableComponentCount = Object.keys(state.manifest?.componentsManifest ?? {}).filter(
           (k) => k !== "$schema"
         ).length;
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           WizardPreviewStep,
           {
             preview: state.serverPreview,
@@ -29014,9 +29762,9 @@ If using a custom --host, make sure the space exists on that host.`
         );
       }
       case "pushing":
-        return /* @__PURE__ */ jsx63(PushingStep, { stepNumber: totalSteps, totalSteps, progress: state.pushProgress });
+        return /* @__PURE__ */ jsx65(PushingStep, { stepNumber: totalSteps, totalSteps, progress: state.pushProgress });
       case "path-prompt":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           PathPrompt,
           {
             defaultPath: state.outDir,
@@ -29035,7 +29783,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "save-conflict-gate":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           SaveConflictGate,
           {
             path: state.outDir,
@@ -29053,7 +29801,7 @@ If using a custom --host, make sure the space exists on that host.`
           }
         );
       case "printing":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           RunningStep,
           {
             stepNumber: totalSteps,
@@ -29064,7 +29812,7 @@ If using a custom --host, make sure the space exists on that host.`
         );
       case "print-gate": {
         const teaser = buildRunTeaserLine(state.lastRunId);
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           GateStep,
           {
             successMessage: "Files saved",
@@ -29083,7 +29831,7 @@ If using a custom --host, make sure the space exists on that host.`
       case "done": {
         const totalFailed = state.pushResult.componentTypes.failed + state.pushResult.designTokens.failed;
         const teaser = buildRunTeaserLine(state.lastRunId);
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           DoneStep,
           {
             componentTypes: state.pushResult.componentTypes,
@@ -29099,7 +29847,7 @@ If using a custom --host, make sure the space exists on that host.`
         );
       }
       case "preview-validation-error": {
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           PreviewValidationErrorStep,
           {
             errors: state.previewValidationErrors,
@@ -29115,7 +29863,7 @@ If using a custom --host, make sure the space exists on that host.`
         );
       }
       case "error":
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx65(
           ErrorStep,
           {
             stepName: state.errorStep,
@@ -29128,9 +29876,9 @@ If using a custom --host, make sure the space exists on that host.`
         return null;
     }
   })();
-  return /* @__PURE__ */ jsxs56(Box55, { flexDirection: "column", width: terminalWidth, children: [
-    /* @__PURE__ */ jsx63(TopBar, { subcommand: "import", hints }),
-    /* @__PURE__ */ jsx63(CustomPromptBanner, { selectPromptPath, generatePromptPath }),
+  return /* @__PURE__ */ jsxs58(Box57, { flexDirection: "column", width: terminalWidth, children: [
+    /* @__PURE__ */ jsx65(TopBar, { subcommand: "import", hints }),
+    /* @__PURE__ */ jsx65(CustomPromptBanner, { selectPromptPath, generatePromptPath }),
     stepContent
   ] });
 }
@@ -29318,15 +30066,15 @@ var push_creds_prompt_exports = {};
 __export(push_creds_prompt_exports, {
   promptForPushCredentials: () => promptForPushCredentials
 });
-import React25 from "react";
+import React27 from "react";
 async function promptForPushCredentials(opts = {}) {
-  const { render: render7, Box: Box56, Text: Text60 } = await import("ink");
-  const { useState: useState32 } = await import("react");
+  const { render: render7, Box: Box58, Text: Text62 } = await import("ink");
+  const { useState: useState34 } = await import("react");
   const { CredentialsStep: CredentialsStep2 } = await Promise.resolve().then(() => (init_CredentialsStep(), CredentialsStep_exports));
   return new Promise((resolve29, reject) => {
     let app = null;
     function App2() {
-      const [done, setDone] = useState32(false);
+      const [done, setDone] = useState34(false);
       const handle = (spaceId, environmentId, cmaToken, host) => {
         if (done) return;
         setDone(true);
@@ -29336,9 +30084,9 @@ async function promptForPushCredentials(opts = {}) {
         });
       };
       if (done) {
-        return React25.createElement(Box56, null, React25.createElement(Text60, null, ""));
+        return React27.createElement(Box58, null, React27.createElement(Text62, null, ""));
       }
-      return React25.createElement(CredentialsStep2, {
+      return React27.createElement(CredentialsStep2, {
         summary: opts.summary ?? "Enter Contentful credentials to push this run. Press Enter on each field to advance.",
         ...opts.initialSpaceId !== void 0 ? { initialSpaceId: opts.initialSpaceId } : {},
         ...opts.initialEnvironmentId !== void 0 ? { initialEnvironmentId: opts.initialEnvironmentId } : {},
@@ -29352,7 +30100,7 @@ async function promptForPushCredentials(opts = {}) {
         }
       });
     }
-    app = render7(React25.createElement(App2));
+    app = render7(React27.createElement(App2));
   });
 }
 var init_push_creds_prompt = __esm({
@@ -29520,11 +30268,11 @@ init_db();
 init_cache_keys();
 
 // packages/experience-design-system-cli/src/helpers/read-existing-contentful-entities-from-session.ts
-import { readFile as readFile11 } from "node:fs/promises";
+import { readFile as readFile12 } from "node:fs/promises";
 async function readExistingContentfulEntitiesFromSession(path) {
   if (!path) return void 0;
   try {
-    const raw = await readFile11(path, "utf8");
+    const raw = await readFile12(path, "utf8");
     const parsed = JSON.parse(raw);
     if (!Array.isArray(parsed.components) || !Array.isArray(parsed.tokens)) return void 0;
     return parsed;
@@ -30515,6 +31263,7 @@ ${error instanceof Error ? error.message : String(error)}
 // packages/experience-design-system-cli/src/analyze/command.ts
 init_db();
 init_cycle_detection();
+init_composition_mode();
 
 // packages/experience-design-system-cli/src/analyze/composition/interchange-schema.ts
 function validateInterchangeMap(input) {
@@ -31331,6 +32080,7 @@ async function resolvePromptOverride(override) {
 
 // packages/experience-design-system-cli/src/analyze/command.ts
 init_src();
+init_credentials_store();
 
 // packages/experience-design-system-cli/src/analyze/build-analyze-view-rows.ts
 var WARNING_PREFIX_SUFFIX = ":";
@@ -31470,6 +32220,13 @@ async function collectSourceFiles(directory, onProgress) {
   await visit(directory);
   return files.sort();
 }
+async function safeReadCompositionMode() {
+  try {
+    return (await readExperiencesCredentials()).compositionMode;
+  } catch {
+    return void 0;
+  }
+}
 function componentsToInterchangeMap(components) {
   const groups = {};
   for (const c2 of components) {
@@ -31512,7 +32269,13 @@ function registerAnalyzeCommand(program) {
     "--resolve-unreachable <mode>",
     "Retry pass for unresolved Svelte Props types: 'auto' (default), 'always', or 'never'",
     "auto"
-  ).option("--composition-map <path>", "Consume a hand-authored parent\u2192children interchange map").option("--composition-agent", "Opt into agentic mapping resolution when deterministic sources find no groups").option("--composition-refresh", "Force the mapping agent to run even where deterministic sources answered").option("--generate-map <path>", "Write a skeleton interchange map from resolved composition").option(
+  ).option("--composite", "Resolve embedded-component composition (opt in; default is atomic)").option("--atomic", "Skip composition resolution \u2014 flat components only (default)").option("--composition-map <path>", "Consume a hand-authored parent\u2192children interchange map (implies --composite)").option(
+    "--composition-agent",
+    "Opt into agentic mapping resolution when deterministic sources find no groups (implies --composite)"
+  ).option(
+    "--composition-refresh",
+    "Force the mapping agent to run even where deterministic sources answered (implies --composite)"
+  ).option("--generate-map <path>", "Write a skeleton interchange map from resolved composition (implies --composite)").option(
     "--prompt <stage=value>",
     "Override a stage prompt (repeatable). value is a file path or literal text, e.g. --prompt composition=./p.md",
     (v, acc) => [...acc, v],
@@ -31630,7 +32393,8 @@ function registerAnalyzeCommand(program) {
       });
     }
     let validatedComponents = validateExtractedComponents(filteredComponents);
-    {
+    const compositionMode = resolveCompositionMode(opts, await safeReadCompositionMode() ?? void 0);
+    if (compositionMode === "composite") {
       const sources = resolveCompositionSources(opts);
       const { overrides: promptOverrides, errors: promptErrors } = parsePromptOverrides(opts.prompt ?? []);
       for (const err of promptErrors) {
@@ -34256,14 +35020,17 @@ async function runPipeline(opts, progressWriter, cliPathOverride) {
     });
     const t0 = Date.now();
     const analyzeArgs = ["analyze", "extract", "--project", projectRoot];
-    if (opts.compositionMap) analyzeArgs.push("--composition-map", opts.compositionMap);
-    if (opts.compositionAgent) analyzeArgs.push("--composition-agent");
-    if (opts.compositionAgentMode) analyzeArgs.push("--composition-agent-mode", opts.compositionAgentMode);
-    if (opts.compositionRefresh) analyzeArgs.push("--composition-refresh");
-    if (opts.generateMap) analyzeArgs.push("--generate-map", opts.generateMap);
-    for (const p of opts.promptOverrides ?? []) analyzeArgs.push("--prompt", p);
-    if (opts.agent) analyzeArgs.push("--agent", opts.agent);
-    if (opts.bedrock) analyzeArgs.push("--bedrock");
+    if (opts.compositionMode === "composite") {
+      analyzeArgs.push("--composite");
+      if (opts.compositionMap) analyzeArgs.push("--composition-map", opts.compositionMap);
+      if (opts.compositionAgent) analyzeArgs.push("--composition-agent");
+      if (opts.compositionAgentMode) analyzeArgs.push("--composition-agent-mode", opts.compositionAgentMode);
+      if (opts.compositionRefresh) analyzeArgs.push("--composition-refresh");
+      if (opts.generateMap) analyzeArgs.push("--generate-map", opts.generateMap);
+      for (const p of opts.promptOverrides ?? []) analyzeArgs.push("--prompt", p);
+      if (opts.agent) analyzeArgs.push("--agent", opts.agent);
+      if (opts.bedrock) analyzeArgs.push("--bedrock");
+    }
     const r = await runStep(analyzeArgs, cliPath, sessionId2);
     const durationMs = Date.now() - t0;
     if (r.exitCode !== 0) {
@@ -34757,6 +35524,7 @@ function resolveModel(flagValue, storedValue) {
 }
 
 // packages/experience-design-system-cli/src/import/command.ts
+init_composition_mode();
 init_command_options();
 init_save_path_resolver();
 init_credentials_store();
@@ -34846,6 +35614,7 @@ async function launchModifyWizard(input) {
     initialStep: input.entryStep
   };
   applyWizardSeedProps(props, input);
+  if (input.compositionMode) props.compositionMode = input.compositionMode;
   if (input.saveMode === "overwrite") props.outDirOverride = input.savePath;
   if (input.outDirOverride) props.outDirOverride = input.outDirOverride;
   if (input.allowDeletions !== void 0) props.allowDeletions = input.allowDeletions;
@@ -34961,6 +35730,7 @@ async function modifyRun(opts) {
     savePath: run.savePath,
     entryStep: "final-review",
     saveMode,
+    ...run.compositionMode ? { compositionMode: run.compositionMode } : {},
     ...opts.outDir ? { outDirOverride: resolve26(opts.outDir) } : {},
     ...mergedSpaceId ? { initialSpaceId: mergedSpaceId } : {},
     ...mergedEnvironmentId ? { initialEnvironmentId: mergedEnvironmentId } : {},
@@ -35164,14 +35934,21 @@ function registerImportCommand(program) {
     "--print-prompt",
     "Print the generate components prompt without invoking the agent. Replaces the legacy --dry-run prompt-print behaviour on this command."
   ).option("--auto-accept-scope", "Accept all extracted components without prompting (for scripted/non-TTY callers)");
+  addCompositionOptions(cmd);
   addAllowDeletionsOption(cmd);
-  cmd.option("--composition-map <path>", "Consume a hand-authored parent\u2192children interchange map").option("--composition-agent", "Opt into agentic mapping resolution when deterministic sources find no groups").option(
+  cmd.option("--composition-map <path>", "Consume a hand-authored parent\u2192children interchange map (implies --composite)").option(
+    "--composition-agent",
+    "Opt into agentic mapping resolution when deterministic sources find no groups (implies --composite)"
+  ).option(
     "--composition-refresh",
-    "Bypass the composition cache and re-resolve from scratch, forcing the agent to run"
+    "Bypass the composition cache and re-resolve from scratch, forcing the agent to run (implies --composite)"
   ).option(
     "--composition-agent-mode <mode>",
     "Agent mode: 'parser' (agent writes a sandboxed parser, default) or 'edges' (agent lists edges)"
-  ).option("--generate-map <path>", "Also write a composition-map skeleton from resolved edges during extract").option(
+  ).option(
+    "--generate-map <path>",
+    "Also write a composition-map skeleton from resolved edges during extract (implies --composite)"
+  ).option(
     "--prompt <stage=value>",
     "Override a stage prompt (repeatable). value is a file path or literal text, e.g. --prompt composition=./p.md",
     (v, acc) => [...acc, v],
@@ -35216,6 +35993,8 @@ function registerImportCommand(program) {
       const interactiveTerminalSupported = getInteractiveTerminalSupport().supported;
       if (opts.modify !== void 0 || opts.pushFromRun !== void 0) {
         const passedCompositionFlags = [
+          opts.composite ? "--composite" : null,
+          opts.atomic ? "--atomic" : null,
           opts.compositionMap ? "--composition-map" : null,
           opts.compositionAgent ? "--composition-agent" : null,
           opts.compositionAgentMode ? "--composition-agent-mode" : null,
@@ -35225,9 +36004,11 @@ function registerImportCommand(program) {
         if (passedCompositionFlags.length > 0) {
           const entry = opts.modify !== void 0 ? "--modify" : "--push-from-run";
           process.stderr.write(
-            `Note: ${passedCompositionFlags.join(", ")} ignored with ${entry} \u2014 composition inputs come from the recorded run.
+            `Note: ${passedCompositionFlags.join(", ")} ignored with ${entry} \u2014 composition mode comes from the recorded run.
 `
           );
+          opts.composite = void 0;
+          opts.atomic = void 0;
           opts.compositionMap = void 0;
           opts.compositionAgent = void 0;
           opts.compositionAgentMode = void 0;
@@ -35380,6 +36161,7 @@ function registerImportCommand(program) {
         const creds = await readExperiencesCredentials();
         const resolvedAgent = resolveAgent(opts.agent, creds.agent);
         const resolvedModel = resolveModel(opts.model, creds.agentModel);
+        const resolvedCompositionMode = resolveCompositionMode(opts, creds.compositionMode);
         if (opts.bedrock && !(isAgentName(resolvedAgent) && agentSupportsBedrock(resolvedAgent))) {
           process.stderr.write(`Error: --bedrock is not supported for --agent ${resolvedAgent}
 `);
@@ -35418,6 +36200,7 @@ function registerImportCommand(program) {
             host: opts.host,
             autoAcceptScope,
             autoRejectCycles: opts.autoRejectCycles ?? false,
+            compositionMode: resolvedCompositionMode,
             ...buildCompositionForwardingOptions(opts),
             noCache: opts.cache === false,
             skipMapTokens: opts.skipMapTokens ?? false,
@@ -35464,6 +36247,7 @@ function registerImportCommand(program) {
       const headlessCreds = await readExperiencesCredentials();
       const headlessAgent = resolveAgent(opts.agent, headlessCreds.agent);
       const headlessModel = resolveModel(opts.model, headlessCreds.agentModel);
+      const headlessCompositionMode = resolveCompositionMode(opts, headlessCreds.compositionMode);
       if (opts.bedrock && !(isAgentName(headlessAgent) && agentSupportsBedrock(headlessAgent))) {
         process.stderr.write(`Error: --bedrock is not supported for --agent ${headlessAgent}
 `);
@@ -35498,6 +36282,7 @@ function registerImportCommand(program) {
           selectPromptPath: opts.selectPromptPath,
           autoRejectCycles: opts.autoRejectCycles ?? false,
           allowDeletions: opts.allowDeletions ?? false,
+          compositionMode: headlessCompositionMode,
           ...buildCompositionForwardingOptions(opts)
         },
         (line) => process.stderr.write(line + "\n")