@contentful/experience-design-system-cli 2.34.5-dev-build-d0fcb46e.0 → 2.34.5-dev-build-0dbc122c.0

package/dist/src/index.js

@@ -3605,19 +3605,33 @@ function copyComponentFromCache(db, sourceSessionId, targetSessionId, componentI
   const now = (/* @__PURE__ */ new Date()).toISOString();
   db.exec("BEGIN");
   try {
-    const srcComp = db.prepare(`SELECT description, status FROM raw_components WHERE session_id = ? AND component_id = ?`).get(sourceSessionId, componentId);
+    const srcComp = db.prepare(
+      `SELECT description, status, component_description_rationale, props_rationale, slots_rationale
+         FROM raw_components WHERE session_id = ? AND component_id = ?`
+    ).get(sourceSessionId, componentId);
     if (srcComp) {
       db.prepare(
-        `UPDATE raw_components SET description = ?, status = ?, extracted_at = ? WHERE session_id = ? AND component_id = ?`
-      ).run(srcComp.description, srcComp.status, now, targetSessionId, componentId);
+        `UPDATE raw_components
+         SET description = ?, status = ?, component_description_rationale = ?, props_rationale = ?, slots_rationale = ?, extracted_at = ?
+         WHERE session_id = ? AND component_id = ?`
+      ).run(
+        srcComp.description,
+        srcComp.status,
+        srcComp.component_description_rationale,
+        srcComp.props_rationale,
+        srcComp.slots_rationale,
+        now,
+        targetSessionId,
+        componentId
+      );
     }
     const srcProps = db.prepare(
-      `SELECT name, cdf_type, cdf_category, cdf_token_kind, required, description, default_value
+      `SELECT name, cdf_type, cdf_category, cdf_token_kind, required, description, default_value, rationale
          FROM raw_props WHERE session_id = ? AND component_id = ?`
     ).all(sourceSessionId, componentId);
     for (const p of srcProps) {
       db.prepare(
-        `UPDATE raw_props SET cdf_type = ?, cdf_category = ?, cdf_token_kind = ?, required = ?, description = ?, default_value = ?
+        `UPDATE raw_props SET cdf_type = ?, cdf_category = ?, cdf_token_kind = ?, required = ?, description = ?, default_value = ?, rationale = ?
          WHERE session_id = ? AND component_id = ? AND name = ?`
       ).run(
         p.cdf_type,
@@ -3626,6 +3640,7 @@ function copyComponentFromCache(db, sourceSessionId, targetSessionId, componentI
         p.required,
         p.description,
         p.default_value,
+        p.rationale,
         targetSessionId,
         componentId,
         p.name
@@ -3644,11 +3659,11 @@ function copyComponentFromCache(db, sourceSessionId, targetSessionId, componentI
     for (const av of srcAV) {
       insertAV.run(targetSessionId, componentId, av.prop_name, av.position, av.value);
     }
-    const srcSlots = db.prepare(`SELECT name, required, description FROM raw_slots WHERE session_id = ? AND component_id = ?`).all(sourceSessionId, componentId);
+    const srcSlots = db.prepare(`SELECT name, required, description, rationale FROM raw_slots WHERE session_id = ? AND component_id = ?`).all(sourceSessionId, componentId);
     for (const s of srcSlots) {
       db.prepare(
-        `UPDATE raw_slots SET required = ?, description = ? WHERE session_id = ? AND component_id = ? AND name = ?`
-      ).run(s.required, s.description, targetSessionId, componentId, s.name);
+        `UPDATE raw_slots SET required = ?, description = ?, rationale = ? WHERE session_id = ? AND component_id = ? AND name = ?`
+      ).run(s.required, s.description, s.rationale, targetSessionId, componentId, s.name);
     }
     db.prepare(`DELETE FROM raw_slot_allowed_components WHERE session_id = ? AND component_id = ?`).run(
       targetSessionId,
@@ -19748,14 +19763,29 @@ var init_LegendEntry = __esm({
 // packages/experience-design-system-cli/src/import/tui/components/CompactControlBar.tsx
 import { Box as Box26 } from "ink";
 import { jsxs as jsxs27 } from "react/jsx-runtime";
-function CompactControlBar({ hasGroupRoots, searchActive }) {
+function CompactControlBar({
+  hasGroupRoots,
+  searchActive,
+  showJson = false,
+  tokenReviewAvailable = false
+}) {
   return /* @__PURE__ */ jsxs27(Box26, { borderStyle: "single", borderColor: PALETTE.border, paddingX: 1, marginTop: 1, flexWrap: "wrap", columnGap: 2, children: [
     legendEntry("[\u2191/\u2193]", "move"),
     legendEntry("[a/r]", "accept/reject"),
+    legendEntry("[A]", "accept all"),
     hasGroupRoots && legendEntry("[space/E/C]", "expand/collapse"),
+    legendEntry("[L]", "flat"),
+    legendEntry("[i]", "focus lineage"),
+    legendEntry("[w]", "only breaking"),
+    legendEntry("[o]", "only cycles"),
+    legendEntry("[c]", "cycle list"),
+    legendEntry("[b]", "breaking changes"),
     legendEntry("[/]", "search", searchActive),
     legendEntry("[f]", "continue/finalize"),
     legendEntry("[h]", "help"),
+    legendEntry("[J]", showJson ? "hide JSON" : "show JSON"),
+    tokenReviewAvailable && legendEntry("[t]", "token review"),
+    legendEntry("[Ctrl+Z/Y/R]", "undo/redo/reload"),
     legendEntry("[q]", "quit")
   ] });
 }
@@ -19861,55 +19891,6 @@ function findAllAncestors(target, components) {
   }
   return ancestors;
 }
-function buildAncestorTree(target, components) {
-  const visited = /* @__PURE__ */ new Set();
-  visited.add(target);
-  function walk(name, depth) {
-    const parents = findDirectParents(name, components);
-    const out = [];
-    for (const { parent, slotName } of parents) {
-      if (parent === target) {
-        out.push({
-          name: parent,
-          incomingSlotName: slotName,
-          depth: depth + 1,
-          shared: false,
-          cycle: true,
-          parents: []
-        });
-        continue;
-      }
-      if (visited.has(parent)) {
-        out.push({
-          name: parent,
-          incomingSlotName: slotName,
-          depth: depth + 1,
-          shared: true,
-          cycle: false,
-          parents: []
-        });
-        continue;
-      }
-      visited.add(parent);
-      out.push({
-        name: parent,
-        incomingSlotName: slotName,
-        depth: depth + 1,
-        shared: false,
-        cycle: false,
-        parents: walk(parent, depth + 1)
-      });
-    }
-    return out;
-  }
-  return {
-    name: target,
-    depth: 0,
-    shared: false,
-    cycle: false,
-    parents: walk(target, 0)
-  };
-}
 var init_lineage = __esm({
   "packages/experience-design-system-cli/src/analyze/lineage.ts"() {
     "use strict";
@@ -21298,113 +21279,6 @@ var init_selection_cascade = __esm({
   }
 });
 
-// packages/experience-design-system-cli/src/import/tui/hooks/useLineage.ts
-import { useMemo as useMemo3 } from "react";
-function renderCleanAncestorTree(node) {
-  const lines = [];
-  lines.push({ text: node.name, jumpTarget: node.name });
-  const walk = (parents, prefix) => {
-    for (let i = 0; i < parents.length; i++) {
-      const child = parents[i];
-      const isLast = i === parents.length - 1;
-      const glyph = isLast ? "\u2514\u2500" : "\u251C\u2500";
-      lines.push({ text: `${prefix}${glyph} ${child.name}`, jumpTarget: child.name });
-      if (child.parents.length > 0) {
-        const nextPrefix = prefix + (isLast ? "   " : "\u2502  ");
-        walk(child.parents, nextPrefix);
-      }
-    }
-  };
-  walk(node.parents, "");
-  return lines;
-}
-function renderDescendantTree(root, closure, graph) {
-  const lines = [];
-  if (closure.containsCycle) {
-    for (const node of closure.nodes) {
-      if (node.name === root) continue;
-      lines.push({ text: `  ${node.name}`, jumpTarget: node.name });
-    }
-    return lines;
-  }
-  const byName = new Map(graph.map((n) => [n.name, n]));
-  const known = new Set(closure.nodes.map((n) => n.name));
-  const childrenOf = (name) => {
-    const node = byName.get(name);
-    if (!node) return [];
-    const seen = /* @__PURE__ */ new Set();
-    const out = [];
-    for (const slot of node.slots) {
-      for (const target of slot.allowedComponents ?? []) {
-        if (!known.has(target)) continue;
-        if (target === name) continue;
-        if (seen.has(target)) continue;
-        seen.add(target);
-        out.push(target);
-      }
-    }
-    return out.sort((a, b) => a.localeCompare(b));
-  };
-  const visited = /* @__PURE__ */ new Set([root]);
-  const walk = (parent, prefix) => {
-    const kids = childrenOf(parent);
-    for (let i = 0; i < kids.length; i++) {
-      const child = kids[i];
-      if (visited.has(child)) continue;
-      visited.add(child);
-      const isLast = i === kids.length - 1;
-      const glyph = isLast ? "\u2514\u2500" : "\u251C\u2500";
-      lines.push({ text: `${prefix}${glyph} ${child}`, jumpTarget: child });
-      const nextPrefix = prefix + (isLast ? "   " : "\u2502  ");
-      walk(child, nextPrefix);
-    }
-  };
-  walk(root, "");
-  return lines;
-}
-function useLineage(focusedKey, graph) {
-  const graphKey = useMemo3(() => JSON.stringify(graph), [graph]);
-  const stableGraph = useMemo3(() => graph, [graphKey]);
-  const closures = useMemo3(() => computeAllClosures(stableGraph), [stableGraph]);
-  const entries = useMemo3(() => {
-    if (!focusedKey) return [];
-    const name = focusedKey;
-    const tree = buildAncestorTree(name, stableGraph);
-    const closure = closures.get(name);
-    const out = [];
-    out.push({ kind: "section", label: "Ancestors:" });
-    if (tree.parents.length === 0) {
-      out.push({ kind: "empty", label: "  (no ancestors)" });
-    } else {
-      const lines = renderCleanAncestorTree(tree);
-      for (const line of lines) {
-        out.push({ kind: "ancestor", label: "  " + line.text, jumpTarget: line.jumpTarget ?? name });
-      }
-    }
-    out.push({ kind: "section", label: "Descendants:" });
-    if (!closure || closure.nodes.length <= 1) {
-      out.push({ kind: "empty", label: "  (none)" });
-    } else {
-      for (const line of renderDescendantTree(name, closure, stableGraph)) {
-        out.push({ kind: "descendant", label: "  " + line.text, jumpTarget: line.jumpTarget });
-      }
-    }
-    return out;
-  }, [focusedKey, stableGraph, closures]);
-  const jumpables = useMemo3(
-    () => entries.map((entry, i) => ({ entry, i })).filter(({ entry }) => entry.kind === "ancestor" || entry.kind === "descendant"),
-    [entries]
-  );
-  return { entries, jumpables };
-}
-var init_useLineage = __esm({
-  "packages/experience-design-system-cli/src/import/tui/hooks/useLineage.ts"() {
-    "use strict";
-    init_composite_closure();
-    init_lineage();
-  }
-});
-
 // packages/experience-design-system-cli/src/import/cycle-auto-reject.ts
 function computeCycleAutoRejectTargets(slotCycles, graph) {
   const targets = /* @__PURE__ */ new Set();
@@ -21423,65 +21297,6 @@ var init_cycle_auto_reject = __esm({
   }
 });
 
-// packages/experience-design-system-cli/src/analyze/select/tui/components/LineagePanel.tsx
-import figures4 from "figures";
-import { Text as Text30 } from "ink";
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
-function LineagePanel({
-  focusedComponentKey,
-  entries,
-  cursor,
-  jumpables,
-  maxRows,
-  width
-}) {
-  const rows = entries.map((e) => ({
-    label: e.label,
-    jumpTarget: e.kind === "ancestor" || e.kind === "descendant" ? e.jumpTarget : "",
-    kind: e.kind
-  }));
-  const cursorRowIndex = jumpables[cursor]?.i ?? 0;
-  return /* @__PURE__ */ jsx33(
-    GotoBanner,
-    {
-      title: `Lineage: ${focusedComponentKey}`,
-      rows,
-      cursor,
-      cursorRowIndex,
-      maxRows,
-      width,
-      footerHint: LINEAGE_FOOTER_HINT,
-      renderRow: (row, i, isCursor) => {
-        if (row.kind === "section") {
-          return /* @__PURE__ */ jsxs30(Text30, { bold: true, children: [
-            "  ",
-            row.label
-          ] }, i);
-        }
-        if (row.kind === "empty") {
-          return /* @__PURE__ */ jsxs30(Text30, { children: [
-            /* @__PURE__ */ jsx33(Text30, { children: " " }),
-            /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: " " + row.label })
-          ] }, i);
-        }
-        return /* @__PURE__ */ jsxs30(Text30, { children: [
-          isCursor ? /* @__PURE__ */ jsx33(Text30, { color: PALETTE.info, bold: true, children: figures4.pointer }) : /* @__PURE__ */ jsx33(Text30, { children: " " }),
-          /* @__PURE__ */ jsx33(Text30, { inverse: isCursor, children: " " + row.label })
-        ] }, i);
-      }
-    }
-  );
-}
-var LINEAGE_FOOTER_HINT;
-var init_LineagePanel = __esm({
-  "packages/experience-design-system-cli/src/analyze/select/tui/components/LineagePanel.tsx"() {
-    "use strict";
-    init_theme();
-    init_GotoBanner();
-    LINEAGE_FOOTER_HINT = "[\u2191/\u2193] move \xB7 [Enter] jump \xB7 [l/Esc] close";
-  }
-});
-
 // packages/experience-design-system-cli/src/import/tui/steps/auto-reject-decision.ts
 function computeAutoRejectDecision(input) {
   if (input.loading) return "skip";
@@ -21549,60 +21364,12 @@ function enumerateCycleBreaks(cycle, components) {
   }
   return out;
 }
-function shouldBreakOverlayGoFullScreen({
-  rows,
-  edgeCount,
-  reservedChrome = 12
-}) {
-  const OVERLAY_CHROME = 5;
-  const needed = edgeCount + OVERLAY_CHROME;
-  const available = rows - reservedChrome;
-  return needed > available;
-}
 var init_enumerate_cycle_breaks = __esm({
   "packages/experience-design-system-cli/src/import/tui/steps/enumerate-cycle-breaks.ts"() {
     "use strict";
   }
 });
 
-// packages/experience-design-system-cli/src/import/tui/lineage-input.ts
-function handleLineageNavigation({
-  key,
-  cursor,
-  jumpables,
-  onCursorChange,
-  onJump,
-  onClose,
-  allowTab
-}) {
-  if (key.upArrow) {
-    onCursorChange((current) => Math.max(0, current - 1));
-    return true;
-  }
-  if (key.downArrow) {
-    onCursorChange((current) => Math.min(Math.max(0, jumpables.length - 1), current + 1));
-    return true;
-  }
-  if (allowTab && key.tab) {
-    onCursorChange((current) => jumpables.length === 0 ? 0 : (current + 1) % jumpables.length);
-    return true;
-  }
-  if (key.return) {
-    const target = jumpables[cursor];
-    if (target && (target.entry.kind === "ancestor" || target.entry.kind === "descendant")) {
-      onJump(target.entry.jumpTarget);
-    }
-    onClose();
-    return true;
-  }
-  return false;
-}
-var init_lineage_input = __esm({
-  "packages/experience-design-system-cli/src/import/tui/lineage-input.ts"() {
-    "use strict";
-  }
-});
-
 // packages/experience-design-system-cli/src/analyze/select/tui/hooks/scroll-offset.ts
 function computeNextScrollOffset(current, input, key, totalLines, panelHeight) {
   const maxOffset = Math.max(0, totalLines - panelHeight);
@@ -21637,15 +21404,27 @@ var init_scroll_offset = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/FieldEditor.tsx
-import React14, { useState as useState15 } from "react";
-import figures5 from "figures";
-import { Box as Box29, Text as Text31 } from "ink";
+import React14, { useEffect as useEffect8, useState as useState15 } from "react";
+import figures4 from "figures";
+import { Box as Box29, Text as Text30 } 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 Fragment10, jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+function createCommonRowProps(selected, focusLevel, editingField, textCursor, valueCursor, cursorVisible, editingValue, valueText, width) {
+  return {
+    selected,
+    editingField: selected && focusLevel === "field" && editingField,
+    textCursor,
+    valueCursor,
+    cursorVisible,
+    editingValue: selected ? editingValue : null,
+    valueText: selected ? valueText : "",
+    width
+  };
+}
 function removeAt(values, index) {
   return values.filter((_, i) => i !== index);
 }
@@ -21768,25 +21547,53 @@ function serializeState(state, originalJson) {
   return JSON.stringify(entry, null, 2);
 }
 function Picker({ value, active }) {
-  return /* @__PURE__ */ jsxs31(Box29, { children: [
-    active && /* @__PURE__ */ jsx34(Text31, { color: PALETTE.info, children: "\u2039" }),
-    /* @__PURE__ */ jsx34(Text31, { color: active ? PALETTE.info : PALETTE.inverse, bold: active, children: value }),
-    active && /* @__PURE__ */ jsx34(Text31, { color: PALETTE.info, children: "\u203A" })
+  return /* @__PURE__ */ jsxs30(Box29, { children: [
+    active && /* @__PURE__ */ jsx33(Text30, { color: PALETTE.info, children: "\u2039" }),
+    /* @__PURE__ */ jsx33(Text30, { color: active ? PALETTE.info : PALETTE.inverse, bold: active, children: value }),
+    active && /* @__PURE__ */ jsx33(Text30, { color: PALETTE.info, children: "\u203A" })
   ] });
 }
+function categorySwitchTarget(category) {
+  return category === "content" ? "design" : "content";
+}
 function Toggle({ value, active }) {
-  return /* @__PURE__ */ jsx34(Box29, { children: /* @__PURE__ */ jsx34(Text31, { color: active ? PALETTE.info : value ? PALETTE.success : void 0, children: value ? "[\u2713]" : "[ ]" }) });
+  return /* @__PURE__ */ jsx33(Box29, { children: /* @__PURE__ */ jsx33(Text30, { color: active ? PALETTE.info : value ? PALETTE.success : void 0, children: value ? "[\u2713]" : "[ ]" }) });
 }
-function DefaultValueRow({ display, active }) {
-  return /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-    /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "default:" }),
-    active ? /* @__PURE__ */ jsx34(Picker, { value: display, active: true }) : /* @__PURE__ */ jsx34(Text31, { color: PALETTE.inverse, children: display })
+function InlinePropField({
+  label,
+  selected,
+  focused = false,
+  children,
+  flexible = false
+}) {
+  return /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexShrink: flexible ? 1 : 0, flexGrow: flexible ? 1 : 0, children: [
+    /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !selected && !focused, children: [
+      focused ? "\u203A " : "  ",
+      label
+    ] }),
+    children
+  ] });
+}
+function DefaultValueRow({
+  display,
+  active,
+  focused
+}) {
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
+    /* @__PURE__ */ jsx33(DefaultLabel, { focused }),
+    active ? /* @__PURE__ */ jsx33(Picker, { value: display, active: true }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.inverse, children: display })
+  ] });
+}
+function DefaultLabel({ focused }) {
+  return /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+    focused ? "\u203A " : "  ",
+    "default:"
   ] });
 }
 function RowLabel({ name, selected }) {
   const nameDisplay = name.length > 14 ? name.slice(0, 13) + "\u2026" : name.padEnd(14);
-  return /* @__PURE__ */ jsxs31(
-    Text31,
+  return /* @__PURE__ */ jsxs30(
+    Text30,
     {
       color: selected ? PALETTE.inverse : PALETTE.info,
       bold: selected,
@@ -21804,10 +21611,10 @@ function ValueInputRow({
   valueText,
   cursorVisible
 }) {
-  return /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, children: [
-    /* @__PURE__ */ jsx34(Text31, { color: PALETTE.info, children: mode === "edit" ? "\u270E " : "+ " }),
-    /* @__PURE__ */ jsx34(Text31, { children: valueText }),
-    /* @__PURE__ */ jsx34(Text31, { inverse: cursorVisible, children: " " })
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, children: [
+    /* @__PURE__ */ jsx33(Text30, { color: PALETTE.info, children: mode === "edit" ? "\u270E " : "+ " }),
+    /* @__PURE__ */ jsx33(Text30, { children: valueText }),
+    /* @__PURE__ */ jsx33(Text30, { inverse: cursorVisible, children: " " })
   ] });
 }
 function EditableListItem({
@@ -21820,9 +21627,9 @@ function EditableListItem({
 }) {
   const isBeingEdited = editingValue?.mode === "edit" && editingValue.index === index;
   if (isBeingEdited) {
-    return /* @__PURE__ */ jsx34(ValueInputRow, { mode: "edit", valueText, cursorVisible });
+    return /* @__PURE__ */ jsx33(ValueInputRow, { mode: "edit", valueText, cursorVisible });
   }
-  return /* @__PURE__ */ jsx34(Box29, { gap: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx34(Text31, { color: active ? PALETTE.info : PALETTE.inverse, children: active ? `${figures5.pointer} ${value}` : `  ${value}` }) });
+  return /* @__PURE__ */ jsx33(Box29, { gap: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx33(Text30, { color: active ? PALETTE.info : PALETTE.inverse, children: active ? `${figures4.pointer} ${value}` : `  ${value}` }) });
 }
 function EditableValueList({
   values,
@@ -21835,9 +21642,9 @@ function EditableValueList({
   emptyPaddingLeft,
   showAddInput
 }) {
-  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
-    values.length === 0 && !editingValue && (emptyPaddingLeft === void 0 ? /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: emptyMessage }) : /* @__PURE__ */ jsx34(Box29, { paddingLeft: emptyPaddingLeft, children: /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: emptyMessage }) })),
-    values.map((value, index) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
+    values.length === 0 && !editingValue && (emptyPaddingLeft === void 0 ? /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: emptyMessage }) : /* @__PURE__ */ jsx33(Box29, { paddingLeft: emptyPaddingLeft, children: /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: emptyMessage }) })),
+    values.map((value, index) => /* @__PURE__ */ jsx33(
       EditableListItem,
       {
         value,
@@ -21849,56 +21656,95 @@ function EditableValueList({
       },
       index
     )),
-    showAddInput && editingValue?.mode === "add" && /* @__PURE__ */ jsx34(ValueInputRow, { mode: "add", valueText, cursorVisible })
+    showAddInput && editingValue?.mode === "add" && /* @__PURE__ */ jsx33(ValueInputRow, { mode: "add", valueText, cursorVisible })
   ] });
 }
 function DefaultSubRow({
   prop,
   active,
+  focused,
   textCursor,
   cursorVisible
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
   if (prop.type === "richtext" || prop.type === "media" || prop.type === "link") {
-    return /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "default:" }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "(not applicable)" })
+    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
+      /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+        focused ? "\u203A " : "  ",
+        "default:"
+      ] }),
+      /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "(not applicable)" })
     ] });
   }
   if (prop.type === "boolean") {
     const display = prop.default === true ? "true" : prop.default === false ? "false" : "(unset)";
-    return /* @__PURE__ */ jsx34(DefaultValueRow, { display, active });
+    return /* @__PURE__ */ jsx33(DefaultValueRow, { display, active, focused });
   }
   if (prop.type === "enum") {
     if (prop.values.length === 0) {
-      return /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-        /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "default:" }),
-        /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "(no values defined)" })
+      return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
+        /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+          focused ? "\u203A " : "  ",
+          "default:"
+        ] }),
+        /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "(no values defined)" })
       ] });
     }
     const display = typeof prop.default === "string" && prop.default !== "" ? prop.default : "(unset)";
-    return /* @__PURE__ */ jsx34(DefaultValueRow, { display, active });
+    return /* @__PURE__ */ jsx33(DefaultValueRow, { display, active, focused });
   }
   const value = typeof prop.default === "string" ? prop.default : "";
   if (active) {
-    return /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "default:" }),
-      /* @__PURE__ */ jsxs31(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-        /* @__PURE__ */ jsx34(Text31, { children: value.slice(0, textCursor) }),
-        /* @__PURE__ */ jsx34(Text31, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
-        /* @__PURE__ */ jsx34(Text31, { children: value.slice(textCursor + 1) })
+    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "row", children: [
+      /* @__PURE__ */ jsx33(DefaultLabel, { focused }),
+      /* @__PURE__ */ jsxs30(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+        /* @__PURE__ */ jsx33(Text30, { children: value.slice(0, textCursor) }),
+        /* @__PURE__ */ jsx33(Text30, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
+        /* @__PURE__ */ jsx33(Text30, { children: value.slice(textCursor + 1) })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-    /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "default:" }),
-    /* @__PURE__ */ jsx34(Text31, { color: value ? PALETTE.inverse : void 0, dimColor: !value, children: value || "(none)" })
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
+    /* @__PURE__ */ jsx33(DefaultLabel, { focused }),
+    /* @__PURE__ */ jsx33(Text30, { color: value ? PALETTE.inverse : void 0, dimColor: !value, children: value || "(none)" })
+  ] });
+}
+function DescriptionField({
+  value,
+  focused,
+  editing,
+  textCursor,
+  cursorVisible,
+  width,
+  label = "desc:",
+  compact = false
+}) {
+  const cursor = cursorVisible ? "\u2588" : " ";
+  const outerWidth = width === void 0 ? void 0 : Math.max(1, width - 2);
+  const contentWidth = outerWidth === void 0 ? void 0 : Math.max(1, outerWidth - 2);
+  if (compact) {
+    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, width: outerWidth, children: [
+      /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: `  ${label}` }),
+      /* @__PURE__ */ jsx33(Text30, { wrap: "truncate-end", color: value ? PALETTE.success : void 0, dimColor: !value, children: ` ${value || "\u2014"}` })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", width: outerWidth, children: [
+    /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? "\u203A " : "  ",
+      label
+    ] }),
+    /* @__PURE__ */ jsx33(Box29, { width: contentWidth, borderStyle: "round", borderColor: focused ? PALETTE.info : PALETTE.border, paddingX: 1, children: editing ? /* @__PURE__ */ jsxs30(Fragment10, { children: [
+      /* @__PURE__ */ jsx33(Text30, { children: value.slice(0, textCursor) }),
+      /* @__PURE__ */ jsx33(Text30, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
+      /* @__PURE__ */ jsx33(Text30, { children: value.slice(textCursor + 1) })
+    ] }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.success, wrap: "wrap", children: value || "\u2014" }) })
   ] });
 }
 function PropRow({
   prop,
   selected,
   activeField,
+  editingField,
   textCursor,
   valueCursor,
   cursorVisible,
@@ -21908,65 +21754,92 @@ function PropRow({
   rationale,
   rowKey
 }) {
-  const cursor = cursorVisible ? "\u2588" : " ";
-  const descActive = activeField === "description";
-  return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs31(Box29, { gap: 1, children: [
-      /* @__PURE__ */ jsx34(RowLabel, { name: prop.name, selected }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: !selected, children: "type:" }),
-      activeField === "type" ? /* @__PURE__ */ jsx34(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx34(Text31, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }),
-      activeField === "category" && /* @__PURE__ */ jsx34(Picker, { value: prop.category, active: true }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: !selected, children: "req:" }),
-      activeField === "required" ? /* @__PURE__ */ jsx34(Toggle, { value: prop.required, active: true }) : /* @__PURE__ */ jsx34(Toggle, { value: prop.required, active: false }),
-      prop.type === "enum" && /* @__PURE__ */ jsxs31(Fragment10, { children: [
-        /* @__PURE__ */ jsx34(Text31, { dimColor: !selected, children: "values:" }),
-        /* @__PURE__ */ jsxs31(Text31, { color: selected ? PALETTE.warning : PALETTE.inverse, children: [
-          "[",
-          prop.values.join(", "),
-          "]"
-        ] })
-      ] }),
-      prop.type === "token" && /* @__PURE__ */ jsxs31(Fragment10, { children: [
-        /* @__PURE__ */ jsx34(Text31, { dimColor: !selected, children: "kind:" }),
-        activeField === "tokenKind" ? /* @__PURE__ */ jsx34(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx34(Text31, { color: selected ? PALETTE.success : PALETTE.inverse, children: prop.tokenKind || "\u2014" })
-      ] })
+  const descFocused = activeField === "description";
+  const descActive = editingField && descFocused;
+  return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx33(RowLabel, { name: prop.name, selected }),
+      /* @__PURE__ */ jsx33(InlinePropField, { label: "type:", selected, focused: activeField === "type", children: editingField && activeField === "type" ? /* @__PURE__ */ jsx33(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }) }),
+      /* @__PURE__ */ jsx33(
+        InlinePropField,
+        {
+          label: "category:",
+          selected,
+          focused: activeField === "category",
+          flexible: editingField && activeField === "category",
+          children: editingField && activeField === "category" ? /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, bold: true, wrap: "wrap", children: `[Enter] switch to ${categorySwitchTarget(prop.category)} property` }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.category })
+        }
+      ),
+      /* @__PURE__ */ jsx33(InlinePropField, { label: "req:", selected, focused: activeField === "required", children: /* @__PURE__ */ jsx33(Toggle, { value: prop.required, active: editingField && activeField === "required" }) }),
+      prop.type === "token" && /* @__PURE__ */ jsx33(InlinePropField, { label: "kind:", selected, focused: activeField === "tokenKind", children: editingField && activeField === "tokenKind" ? /* @__PURE__ */ jsx33(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.success : PALETTE.inverse, children: prop.tokenKind || "\u2014" }) })
+    ] }),
+    prop.type === "enum" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsxs30(
+        Text30,
+        {
+          color: activeField === "values" ? PALETTE.warning : void 0,
+          bold: activeField === "values",
+          dimColor: !selected,
+          children: [
+            activeField === "values" ? "\u203A " : "  ",
+            "values:"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx33(Box29, { flexGrow: 1, children: /* @__PURE__ */ jsxs30(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, wrap: "wrap", children: [
+        "[",
+        prop.values.join(", "),
+        "]"
+      ] }) })
     ] }),
-    selected && /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx33(
       DefaultSubRow,
       {
         prop,
-        active: activeField === "default",
+        active: selected && editingField && activeField === "default",
+        focused: selected && activeField === "default",
         textCursor,
         cursorVisible
       }
     ),
-    selected && descActive && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsxs31(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-        /* @__PURE__ */ jsx34(Text31, { children: prop.description.slice(0, textCursor) }),
-        /* @__PURE__ */ jsx34(Text31, { inverse: cursorVisible, children: prop.description[textCursor] ?? cursor }),
-        /* @__PURE__ */ jsx34(Text31, { children: prop.description.slice(textCursor + 1) })
-      ] })
-    ] }),
-    selected && !descActive && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsx34(Text31, { color: PALETTE.success, children: prop.description || "\u2014" })
-    ] }),
-    selected && prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "allowed:" }),
-      activeField === "allowed" ? /* @__PURE__ */ jsx34(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx34(Text31, { color: prop.allowed.length > 0 ? PALETTE.info : void 0, dimColor: prop.allowed.length === 0, children: prop.allowed.length > 0 ? prop.allowed.join(", ") : "(any)" })
+    /* @__PURE__ */ jsx33(
+      DescriptionField,
+      {
+        value: prop.description,
+        focused: selected && descFocused,
+        editing: selected && descActive,
+        textCursor,
+        cursorVisible,
+        width,
+        compact: !selected
+      }
+    ),
+    selected && prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsxs30(
+        Text30,
+        {
+          color: activeField === "allowed" ? PALETTE.warning : void 0,
+          bold: activeField === "allowed",
+          dimColor: !selected,
+          children: [
+            activeField === "allowed" ? "\u203A " : "  ",
+            "allowed:"
+          ]
+        }
+      ),
+      editingField && activeField === "allowed" ? /* @__PURE__ */ jsx33(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx33(Text30, { 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__ */ jsx34(Box29, { paddingLeft: 2, children: /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: (() => {
+    selected && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx33(Box29, { paddingLeft: 2, children: /* @__PURE__ */ jsx33(Text30, { 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__ */ jsxs31(Box29, { paddingLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs31(Box29, { children: [
-        /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "values:" }),
-        activeField === "values" && /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "  [a]dd  [e]dit  [r]emove  [\u2191\u2193] navigate  [K/J] reorder" })
+    selected && prop.type === "enum" && activeField === "values" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs30(Box29, { children: [
+        /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "values:" }),
+        activeField === "values" && /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "  [a]dd  [e]dit  [r]emove  [\u2191\u2193] navigate  [K/J] reorder" })
       ] }),
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx33(
         EditableValueList,
         {
           values: prop.values,
@@ -21986,6 +21859,7 @@ function SlotRow({
   slot,
   selected,
   activeField,
+  editingField,
   textCursor,
   valueCursor,
   cursorVisible,
@@ -21995,67 +21869,87 @@ function SlotRow({
   pickerCandidates,
   pickerCursor
 }) {
-  const cursor = cursorVisible ? "\u2588" : " ";
-  return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs31(Box29, { gap: 1, children: [
-      /* @__PURE__ */ jsx34(RowLabel, { name: slot.name, selected }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: !selected, children: "req:" }),
-      activeField === "required" ? /* @__PURE__ */ jsx34(Toggle, { value: slot.required, active: true }) : /* @__PURE__ */ jsx34(Toggle, { value: slot.required, active: false })
+  return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx33(RowLabel, { name: slot.name, selected }),
+      /* @__PURE__ */ jsx33(InlinePropField, { label: "req:", selected, focused: activeField === "required", children: /* @__PURE__ */ jsx33(Toggle, { value: slot.required, active: editingField && activeField === "required" }) })
     ] }),
-    !selected && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "allowed:" }),
-      slot.allowedComponents.length === 0 ? /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "(any)" }) : /* @__PURE__ */ jsx34(Text31, { color: PALETTE.info, children: slot.allowedComponents.join(", ") })
+    !selected && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsxs30(
+        Text30,
+        {
+          color: activeField === "allowedComponents" ? PALETTE.warning : void 0,
+          bold: activeField === "allowedComponents",
+          dimColor: !selected,
+          children: [
+            activeField === "allowedComponents" ? "\u203A " : "  ",
+            "allowed:"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx33(Box29, { flexGrow: 1, children: slot.allowedComponents.length === 0 ? /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "(any)" }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.info, wrap: "wrap", children: slot.allowedComponents.join(", ") }) })
     ] }),
-    selected && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs31(Box29, { children: [
-        /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "allowed:" }),
-        activeField === "allowedComponents" && /* @__PURE__ */ jsx34(Text31, { 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__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs30(Box29, { children: [
+        /* @__PURE__ */ jsxs30(
+          Text30,
+          {
+            color: activeField === "allowedComponents" ? PALETTE.warning : void 0,
+            bold: activeField === "allowedComponents",
+            dimColor: !selected,
+            children: [
+              activeField === "allowedComponents" ? "\u203A " : "  ",
+              "allowed:"
+            ]
+          }
+        ),
+        editingField && activeField === "allowedComponents" && /* @__PURE__ */ jsx33(Text30, { 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__ */ jsx34(
+      /* @__PURE__ */ jsx33(
         EditableValueList,
         {
           values: slot.allowedComponents,
           valueCursor,
-          cursorActive: activeField === "allowedComponents",
+          cursorActive: editingField && activeField === "allowedComponents",
           editingValue,
           valueText,
           cursorVisible,
-          emptyMessage: activeField === "allowedComponents" ? "(any \u2014 press [a] to add)" : "(any)",
+          emptyMessage: editingField && activeField === "allowedComponents" ? "(any \u2014 press [a] to add)" : "(any)",
           emptyPaddingLeft: 2,
-          showAddInput: activeField === "allowedComponents"
+          showAddInput: editingField && activeField === "allowedComponents"
         }
       ),
-      editingValue?.mode === "add" && activeField === "allowedComponents" && pickerCandidates !== null && /* @__PURE__ */ jsx34(Box29, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "(no valid components to add \u2014 all remaining candidates would create cycles)" }) : (() => {
+      editingField && editingValue?.mode === "add" && activeField === "allowedComponents" && pickerCandidates !== null && /* @__PURE__ */ jsx33(Box29, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? /* @__PURE__ */ jsx33(Text30, { 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__ */ jsx34(Text31, { dimColor: true, children: "(no candidates match \u2014 Enter to add as free text)" });
+          return /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "(no candidates match \u2014 Enter to add as free text)" });
         }
-        const cursor2 = pickerCursor % filtered.length;
+        const cursor = pickerCursor % filtered.length;
         const MAX_VISIBLE = 5;
-        const start = Math.max(0, Math.min(filtered.length - MAX_VISIBLE, cursor2 - 2));
+        const start = Math.max(0, Math.min(filtered.length - MAX_VISIBLE, cursor - 2));
         const slice = filtered.slice(start, start + MAX_VISIBLE);
-        return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "  candidates (\u2191\u2193 cycle, Enter to add):" }),
+        return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "  candidates (\u2191\u2193 cycle, Enter to add):" }),
           slice.map((name, i) => {
             const absIdx = start + i;
-            const isCursor = absIdx === cursor2;
-            return /* @__PURE__ */ jsx34(Text31, { color: isCursor ? PALETTE.info : void 0, dimColor: !isCursor, children: isCursor ? `  ${figures5.pointer} ${name}` : `    ${name}` }, name);
+            const isCursor = absIdx === cursor;
+            return /* @__PURE__ */ jsx33(Text30, { color: isCursor ? PALETTE.info : void 0, dimColor: !isCursor, children: isCursor ? `  ${figures4.pointer} ${name}` : `    ${name}` }, name);
           })
         ] });
       })() })
     ] }),
-    selected && activeField === "description" && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsxs31(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-        /* @__PURE__ */ jsx34(Text31, { children: slot.description.slice(0, textCursor) }),
-        /* @__PURE__ */ jsx34(Text31, { inverse: cursorVisible, children: slot.description[textCursor] ?? cursor }),
-        /* @__PURE__ */ jsx34(Text31, { children: slot.description.slice(textCursor + 1) })
-      ] })
-    ] }),
-    selected && activeField !== "description" && /* @__PURE__ */ jsxs31(Box29, { paddingLeft: 2, gap: 1, children: [
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "desc:" }),
-      /* @__PURE__ */ jsx34(Text31, { color: PALETTE.success, children: slot.description || "\u2014" })
-    ] })
+    /* @__PURE__ */ jsx33(
+      DescriptionField,
+      {
+        value: slot.description,
+        focused: selected && activeField === "description",
+        editing: selected && editingField && activeField === "description",
+        textCursor,
+        cursorVisible,
+        width,
+        compact: !selected
+      }
+    )
   ] });
 }
 function propFields(prop) {
@@ -22150,6 +22044,7 @@ function FieldEditor({
   value,
   width,
   height,
+  fixedHeight = false,
   active = true,
   onChange,
   onSave,
@@ -22173,6 +22068,8 @@ function FieldEditor({
   const { state: initialState, error: parseError } = parseToState(value);
   const [editorState, setEditorState] = useState15(initialState);
   const [parseErr] = useState15(parseError);
+  const [listScrollStart, setListScrollStart] = useState15(0);
+  const initialFocusScrollApplied = React14.useRef(false);
   const initialFocus = (() => {
     if (initialFocusTarget?.kind === "description") {
       return {
@@ -22245,6 +22142,7 @@ function FieldEditor({
   const [inSlots, setInSlots] = useState15(initialFocus.inSlots);
   const [inComponentDesc, setInComponentDesc] = useState15(initialFocus.focusLevel === "componentDescription");
   const [activeField, setActiveField] = useState15(initialFocus.activeField);
+  const [editingField, setEditingField] = useState15(false);
   const [textCursor, setTextCursor] = useState15(initialFocus.textCursor);
   const [valueCursor, setValueCursor] = useState15(0);
   const [editingValue, setEditingValue] = useState15(null);
@@ -22310,7 +22208,7 @@ function FieldEditor({
       setFocusLevel("slot");
     }
   };
-  const textEntryActive = focusLevel === "field" && activeField === "description" || focusLevel === "field" && activeField === "default" && (editorState.props[propIdx]?.type === "string" || editorState.props[propIdx]?.type === "token") || editingValue != null;
+  const textEntryActive = focusLevel === "field" && editingField && activeField === "description" || focusLevel === "field" && editingField && activeField === "default" && (editorState.props[propIdx]?.type === "string" || editorState.props[propIdx]?.type === "token") || editingValue != null;
   React14.useEffect(() => {
     onTextEntryActiveChange?.(textEntryActive);
   }, [textEntryActive, onTextEntryActiveChange]);
@@ -22343,9 +22241,7 @@ function FieldEditor({
     }
   }, []);
   const initialStateRef = React14.useRef(initialState);
-  const [baselineCanonical, setBaselineCanonical] = useState15(
-    () => canonicalize(serializeState(initialState, value))
-  );
+  const baselineCanonical = canonicalize(serializeState(initialStateRef.current, value));
   const currentCanonical = canonicalize(serializeState(editorState, value));
   const isDirty = currentCanonical !== baselineCanonical;
   React14.useEffect(() => {
@@ -22362,15 +22258,15 @@ function FieldEditor({
   useImmediateInput((input, key) => {
     if (!active) return;
     if (showHelp) {
-      if (input === "?" || key.escape) {
+      if (input === "h" || key.escape) {
         setShowHelp(false);
       }
       return;
     }
-    const inDescriptionTextEntryForHelp = focusLevel === "field" && activeField === "description";
-    const inStringDefaultTextEntryForHelp = focusLevel === "field" && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
+    const inDescriptionTextEntryForHelp = focusLevel === "field" && editingField && activeField === "description";
+    const inStringDefaultTextEntryForHelp = focusLevel === "field" && editingField && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
     const inValueListTextEntry = editingValue != null;
-    if (input === "?" && !key.ctrl && !key.meta && !inDescriptionTextEntryForHelp && !inStringDefaultTextEntryForHelp && !inValueListTextEntry) {
+    if (input === "h" && !key.ctrl && !key.meta && !inDescriptionTextEntryForHelp && !inStringDefaultTextEntryForHelp && !inValueListTextEntry) {
       setShowHelp(true);
       return;
     }
@@ -22462,16 +22358,8 @@ function FieldEditor({
       }
       return;
     }
-    if (key.ctrl && input === "s") {
-      setValidationError(null);
-      const canonicalNow = canonicalize(serializeState(editorState, value));
-      setBaselineCanonical(canonicalNow);
-      initialStateRef.current = editorState;
-      onSave();
-      return;
-    }
-    const inDescriptionTextEntry = focusLevel === "field" && activeField === "description";
-    const inComponentDescTextEntry = focusLevel === "field" && inComponentDesc && activeField === "description";
+    const inDescriptionTextEntry = focusLevel === "field" && editingField && activeField === "description";
+    const inComponentDescTextEntry = focusLevel === "field" && editingField && inComponentDesc && activeField === "description";
     if (input === "s" && !key.ctrl && !key.meta && !inDescriptionTextEntry && !inComponentDescTextEntry) {
       if (onToggleSourceExternal) {
         onToggleSourceExternal();
@@ -22483,8 +22371,8 @@ function FieldEditor({
       return;
     }
     if (rationaleOpen && !onTogglePropRationale) {
-      const PANEL_HEIGHT2 = 12;
-      const next = computeNextScrollOffset(rationaleScrollOffset, input, key, 9999, PANEL_HEIGHT2);
+      const PANEL_HEIGHT = 12;
+      const next = computeNextScrollOffset(rationaleScrollOffset, input, key, 9999, PANEL_HEIGHT);
       if (next !== null) {
         setRationaleScrollOffset(() => next);
         return;
@@ -22496,7 +22384,13 @@ function FieldEditor({
       }
       return;
     }
-    const inStringDefaultTextEntry = focusLevel === "field" && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
+    if (key.ctrl && input === "s") {
+      initialStateRef.current = editorState;
+      onDirtyChange?.(false);
+      onSave();
+      return;
+    }
+    const inStringDefaultTextEntry = focusLevel === "field" && editingField && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
     const rationaleKeyAllowed = !key.ctrl && !key.meta && !inDescriptionTextEntry && !inComponentDescTextEntry && !inStringDefaultTextEntry && !inValueListTextEntry;
     if (input === propRationaleKey && rationaleKeyAllowed && onTogglePropRationale) {
       onTogglePropRationale();
@@ -22518,9 +22412,16 @@ function FieldEditor({
     }
     if (key.escape) {
       if (focusLevel === "field") {
-        if (inComponentDesc) setFocusLevel("componentDescription");
-        else setFocusLevel(inSlots ? "slot" : "prop");
-        setActiveField(null);
+        if (editingField) {
+          initialStateRef.current = editorState;
+          onDirtyChange?.(false);
+          onSave();
+          setEditingField(false);
+        } else {
+          if (inComponentDesc) setFocusLevel("componentDescription");
+          else setFocusLevel(inSlots ? "slot" : "prop");
+          setActiveField(null);
+        }
         return;
       }
       if (onExit) {
@@ -22531,10 +22432,10 @@ function FieldEditor({
       return;
     }
     if (focusLevel === "componentDescription") {
-      if (key.upArrow || input === "k") {
+      if (key.upArrow) {
         return;
       }
-      if (key.downArrow || input === "j") {
+      if (key.downArrow) {
         const firstSelectableRow = selectableRows[0];
         if (firstSelectableRow) focusSelectableRow(firstSelectableRow);
         return;
@@ -22542,13 +22443,16 @@ function FieldEditor({
       if (key.return) {
         setFocusLevel("field");
         setActiveField("description");
+        setEditingField(false);
         setTextCursor(editorState.componentDescription.length);
         return;
       }
       return;
     }
     if (focusLevel === "prop" || focusLevel === "slot") {
-      if (key.upArrow || input === "k") {
+      const rowPrevious = key.upArrow || input === "k";
+      const rowNext = key.downArrow || input === "j";
+      if (rowPrevious) {
         if (selectedSelectableIndex > 0) {
           focusSelectableRow(selectableRows[selectedSelectableIndex - 1]);
         } else if (selectedSelectableIndex === 0) {
@@ -22558,7 +22462,7 @@ function FieldEditor({
         }
         return;
       }
-      if (key.downArrow || input === "j") {
+      if (rowNext) {
         if (selectedSelectableIndex >= 0 && selectedSelectableIndex < selectableRows.length - 1) {
           focusSelectableRow(selectableRows[selectedSelectableIndex + 1]);
         }
@@ -22567,12 +22471,14 @@ function FieldEditor({
       if (focusLevel === "slot" && key.return && currentSlot) {
         setFocusLevel("field");
         setActiveField(SLOT_FIELDS[0] ?? null);
+        setEditingField(false);
         setTextCursor(currentSlot.description.length);
         return;
       }
       if (focusLevel === "prop" && key.return && currentProp) {
         setFocusLevel("field");
         setActiveField(propFields(currentProp)[0] ?? null);
+        setEditingField(false);
         setTextCursor(currentProp.description.length);
         return;
       }
@@ -22581,33 +22487,22 @@ function FieldEditor({
     if (focusLevel === "field") {
       const fields = inSlots ? SLOT_FIELDS : currentProp ? propFields(currentProp) : [];
       const currentFieldIdx = fields.indexOf(activeField);
-      const isDescriptionTextEntry = activeField === "description";
-      const isDefaultTextEntry = activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
       const isValuesNav = activeField === "values" || activeField === "allowedComponents";
       const arrowUp = key.upArrow;
       const arrowDown = key.downArrow;
-      if (isValuesNav) {
-        const vals = activeField === "values" && currentProp ? currentProp.values : activeField === "allowedComponents" && currentSlot ? currentSlot.allowedComponents : null;
-        if (vals !== null) {
-          if (arrowUp || input === "k") {
-            if (valueCursor > 0) {
-              setValueCursor((c2) => Math.max(0, c2 - 1));
-              return;
-            }
-          } else if (arrowDown || input === "j") {
-            if (valueCursor < vals.length - 1) {
-              setValueCursor((c2) => Math.min(vals.length - 1, c2 + 1));
-              return;
-            }
-          }
+      const arrowLeft = key.leftArrow;
+      const arrowRight = key.rightArrow;
+      if (!editingField) {
+        if (key.return) {
+          setEditingField(true);
+          return;
         }
-      }
-      {
-        const navUp = arrowUp || !isDescriptionTextEntry && !isDefaultTextEntry && input === "k";
-        const navDown = arrowDown || !isDescriptionTextEntry && !isDefaultTextEntry && input === "j";
-        if ((navUp || navDown) && fields.length > 0) {
+        const navPrevious = arrowUp || arrowLeft;
+        const navNext = arrowDown || arrowRight || input === "j";
+        const navBack = navPrevious || input === "k";
+        if ((navBack || navNext) && fields.length > 0) {
           const lastIdx = fields.length - 1;
-          const targetIdx = navDown ? currentFieldIdx >= lastIdx ? 0 : currentFieldIdx + 1 : currentFieldIdx <= 0 ? lastIdx : currentFieldIdx - 1;
+          const targetIdx = navNext ? currentFieldIdx >= lastIdx ? 0 : currentFieldIdx + 1 : currentFieldIdx <= 0 ? lastIdx : currentFieldIdx - 1;
           const next = fields[targetIdx];
           setActiveField(next);
           if (next === "description") {
@@ -22618,9 +22513,38 @@ function FieldEditor({
             setTextCursor(cur.length);
           } else if (next === "values" || next === "allowedComponents") {
             const nextVals = next === "values" && currentProp ? currentProp.values : next === "allowedComponents" && currentSlot ? currentSlot.allowedComponents : [];
-            setValueCursor(navDown ? 0 : Math.max(0, nextVals.length - 1));
+            setValueCursor(navNext ? 0 : Math.max(0, nextVals.length - 1));
+          }
+        }
+        return;
+      }
+      if (key.return && activeField === "category" && currentProp) {
+        const next = categorySwitchTarget(currentProp.category);
+        const nextProps = props.map((p, i) => i === propIdx ? { ...p, category: next } : p);
+        commit({ ...editorState, props: nextProps });
+        setEditingField(false);
+        setActiveField(null);
+        setFocusLevel("prop");
+        return;
+      }
+      if (key.return) {
+        setEditingField(false);
+        return;
+      }
+      if (isValuesNav) {
+        const vals = activeField === "values" && currentProp ? currentProp.values : activeField === "allowedComponents" && currentSlot ? currentSlot.allowedComponents : null;
+        if (vals !== null) {
+          if (arrowUp) {
+            if (valueCursor > 0) {
+              setValueCursor((c2) => Math.max(0, c2 - 1));
+              return;
+            }
+          } else if (arrowDown) {
+            if (valueCursor < vals.length - 1) {
+              setValueCursor((c2) => Math.min(vals.length - 1, c2 + 1));
+              return;
+            }
           }
-          return;
         }
       }
       if (activeField === "type" && (key.leftArrow || key.rightArrow) && currentProp) {
@@ -22639,14 +22563,6 @@ function FieldEditor({
         commit({ ...editorState, props: nextProps });
         return;
       }
-      if (activeField === "category" && (key.leftArrow || key.rightArrow) && currentProp) {
-        const options = CDF_PROPERTY_CATEGORIES;
-        const idx = options.indexOf(currentProp.category);
-        const next = key.leftArrow ? options[(idx - 1 + options.length) % options.length] : options[(idx + 1) % options.length];
-        const nextProps = props.map((p, i) => i === propIdx ? { ...p, category: next } : p);
-        commit({ ...editorState, props: nextProps });
-        return;
-      }
       if (activeField === "tokenKind" && (key.leftArrow || key.rightArrow) && currentProp) {
         const options = DESIGN_TOKEN_TYPES2;
         const cur = currentProp.tokenKind || options[0];
@@ -22794,20 +22710,32 @@ function FieldEditor({
           setValueCursor((c2) => Math.max(0, Math.min(c2, nextVals.length - 1)));
           return;
         }
+        if (key.shift && key.upArrow && valueCursor > 0) {
+          const nextVals = swapValues(currentValueList, valueCursor - 1, valueCursor);
+          setCurrentValueList(nextVals);
+          setValueCursor((c2) => c2 - 1);
+          return;
+        }
         if (input === "K" && valueCursor > 0) {
           const nextVals = swapValues(currentValueList, valueCursor - 1, valueCursor);
           setCurrentValueList(nextVals);
           setValueCursor((c2) => c2 - 1);
           return;
         }
-        if (input === "J" && valueCursor < currentValueList.length - 1) {
+        if (key.shift && key.downArrow && valueCursor < currentValueList.length - 1) {
           const nextVals = swapValues(currentValueList, valueCursor, valueCursor + 1);
           setCurrentValueList(nextVals);
           setValueCursor((c2) => c2 + 1);
           return;
         }
-      }
-      if (activeField === "allowedComponents" && currentSlot) {
+        if (input === "J" && valueCursor < currentValueList.length - 1) {
+          const nextVals = swapValues(currentValueList, valueCursor, valueCursor + 1);
+          setCurrentValueList(nextVals);
+          setValueCursor((c2) => c2 + 1);
+          return;
+        }
+      }
+      if (activeField === "allowedComponents" && currentSlot) {
         const vals = currentSlot.allowedComponents;
         if ((key.leftArrow || key.rightArrow || input === "h" || input === "l") && vals.length > 0 && projectSlotGraph && currentComponentName) {
           const candidates = computeAllowedComponentReplacementCandidates(
@@ -22839,18 +22767,18 @@ function FieldEditor({
   });
   const innerWidth = Math.max(1, width - 2);
   if (parseErr) {
-    return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.error, children: [
-      /* @__PURE__ */ jsx34(Text31, { bold: true, color: PALETTE.error, children: "FIELD EDITOR \u2014 parse error" }),
-      /* @__PURE__ */ jsx34(Text31, { color: PALETTE.error, children: parseErr }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "Cannot display structured editor. Fix the JSON first." })
+    return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.error, children: [
+      /* @__PURE__ */ jsx33(Text30, { bold: true, color: PALETTE.error, children: "FIELD EDITOR \u2014 parse error" }),
+      /* @__PURE__ */ jsx33(Text30, { color: PALETTE.error, children: parseErr }),
+      /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "Cannot display structured editor. Fix the JSON first." })
     ] });
   }
   if (props.length === 0 && slots.length === 0) {
-    return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.warning, children: [
-      /* @__PURE__ */ jsx34(Text31, { bold: true, color: PALETTE.warning, children: "FIELD EDITOR \u2014 no fields" }),
-      /* @__PURE__ */ jsx34(Text31, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify." }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "You can add fields manually below or reject this component." }),
-      /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "Ctrl+S to save \xB7 Esc to discard" })
+    return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.warning, children: [
+      /* @__PURE__ */ jsx33(Text30, { bold: true, color: PALETTE.warning, children: "FIELD EDITOR \u2014 no fields" }),
+      /* @__PURE__ */ jsx33(Text30, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify." }),
+      /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "You can add fields manually below or reject this component." }),
+      /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "Enter to save \xB7 Esc to discard" })
     ] });
   }
   const hasEmptyProperties = props.length === 0 && slots.length === 0;
@@ -22858,22 +22786,28 @@ function FieldEditor({
     if (editingValue) {
       return editingValue.mode === "add" ? "Enter to add \xB7 Esc to cancel" : "Enter to save edit \xB7 Esc to cancel";
     }
-    if (focusLevel === "field" && activeField === "description") {
-      return "Type to edit  \u2190\u2192 cursor  \u2191\u2193 cycle field  Esc row  Ctrl+S save";
+    if (focusLevel === "field" && editingField && activeField === "description") {
+      return "Type to edit  \u2190\u2192 cursor  \u2191\u2193 cycle field  Esc row  Enter save";
+    }
+    if (focusLevel === "field" && editingField && (activeField === "type" || activeField === "tokenKind")) {
+      return "\u2190\u2192 cycle value  \u2191\u2193/\u2190\u2192 cycle field  Esc row";
     }
-    if (focusLevel === "field" && (activeField === "type" || activeField === "category" || activeField === "tokenKind")) {
-      return "\u2190\u2192 cycle value  \u2191\u2193/jk cycle field  Esc row";
+    if (focusLevel === "field" && editingField && activeField === "category") {
+      return "Enter switch property group  \u2191\u2193/\u2190\u2192 cycle field  Esc row";
     }
-    if (focusLevel === "field" && activeField === "required") {
-      return "Space/Enter toggle  \u2191\u2193/jk cycle field  Esc row";
+    if (focusLevel === "field" && editingField && activeField === "required") {
+      return "Space toggle  Enter save  Esc back";
     }
-    if (focusLevel === "field" && (activeField === "values" || activeField === "allowedComponents")) {
-      return "[a]dd  [e]dit  [r]emove  \u2191\u2193/jk navigate  [K/J] reorder  Esc row";
+    if (focusLevel === "field" && editingField && (activeField === "values" || activeField === "allowedComponents")) {
+      return "[a]dd  [e]dit  [r]emove  \u2191\u2193 navigate  Shift+\u2191/\u2193 reorder  Esc row";
+    }
+    if (focusLevel === "field" && !editingField) {
+      return "\u2191\u2193/\u2190\u2192 navigate fields  Enter edit  Esc back";
     }
     if (rationaleOpen) {
-      return "jk/Ctrl+u/d scroll  i/Esc close  rationale panel";
+      return "\u2191\u2193/Ctrl+u/d scroll  i/Esc close  rationale panel";
     }
-    return `\u2191\u2193/jk navigate rows  Enter edit fields  s source  ${propRationaleKey} prop rationale  ${componentRationaleKey} component rationale  ? help  Ctrl+S save  Esc exit panel`;
+    return `\u2191\u2193 navigate rows  Enter edit fields  s source  ${propRationaleKey} prop rationale  ${componentRationaleKey} component rationale  h help  Esc exit panel`;
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
@@ -22898,59 +22832,113 @@ function FieldEditor({
   const selectedRowIdx = rows.findIndex(
     (r) => r.kind === "prop" && !inSlots && !inComponentDesc && r.idx === propIdx || r.kind === "slot" && inSlots && r.idx === slotIdx || r.kind === "component-description" && inComponentDesc
   );
-  const visibleRows = Math.max(1, height - 3);
-  const scrollStart = selectedRowIdx < 0 ? 0 : Math.max(0, Math.min(selectedRowIdx, rows.length - visibleRows));
+  const visibleRows = focusLevel === "field" || initialFocusTarget ? 1 : fixedHeight ? Math.max(1, Math.floor((height - 3) / 3)) : rows.length;
+  useEffect8(() => {
+    if (focusLevel === "field" || selectedRowIdx < 0) return;
+    setListScrollStart((previous) => {
+      const maxStart = Math.max(0, rows.length - visibleRows);
+      if (initialFocusTarget && !initialFocusScrollApplied.current) {
+        initialFocusScrollApplied.current = true;
+        return Math.min(selectedRowIdx, maxStart);
+      }
+      const clamped = Math.min(previous, maxStart);
+      if (selectedRowIdx < clamped) return selectedRowIdx;
+      if (selectedRowIdx >= clamped + visibleRows) {
+        return Math.min(maxStart, selectedRowIdx - visibleRows + 1);
+      }
+      return clamped;
+    });
+  }, [focusLevel, rows.length, selectedRowIdx, visibleRows]);
+  const scrollStart = Math.min(listScrollStart, Math.max(0, rows.length - visibleRows));
+  const nextHeader = rows.slice(scrollStart + visibleRows).find((row) => row.kind === "header");
+  const categoryBelow = focusLevel !== "field" && nextHeader?.kind === "header" ? nextHeader.label.replace(/^──\s*/, "").trim() : null;
   const visibleRowSlice = rows.slice(scrollStart, scrollStart + visibleRows);
-  return /* @__PURE__ */ jsxs31(
-    Box29,
+  const focusedSlotPickerCandidates = focusLevel === "field" && inSlots && editingValue?.mode === "add" && activeField === "allowedComponents" && projectSlotGraph && currentComponentName && currentSlot ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, currentSlot.name) : null;
+  return /* @__PURE__ */ jsxs30(
+    FixedPanel,
     {
-      flexDirection: "column",
       width,
+      ...fixedHeight ? { height } : { minHeight: height },
+      clipOverflow: fixedHeight,
       borderStyle: "single",
       borderColor: hasEmptyProperties ? PALETTE.warning : PALETTE.info,
       children: [
-        hasEmptyProperties && /* @__PURE__ */ jsx34(Text31, { 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__ */ jsx34(Box29, { flexDirection: "column", width: innerWidth, children: visibleRowSlice.map((row, i) => {
+        hasEmptyProperties && /* @__PURE__ */ jsx33(Text30, { 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__ */ jsx33(Box29, { flexDirection: "column", width: innerWidth, children: focusLevel === "field" && !inComponentDesc && currentProp ? /* @__PURE__ */ jsx33(
+          PropRow,
+          {
+            prop: currentProp,
+            selected: true,
+            activeField,
+            editingField,
+            textCursor,
+            valueCursor,
+            cursorVisible,
+            editingValue,
+            valueText,
+            width: innerWidth,
+            rationale: metadata?.props?.[currentProp.name]?.rationale ?? null
+          }
+        ) : focusLevel === "field" && inSlots && currentSlot ? /* @__PURE__ */ jsx33(
+          SlotRow,
+          {
+            slot: currentSlot,
+            selected: true,
+            activeField,
+            editingField,
+            textCursor,
+            valueCursor,
+            cursorVisible,
+            editingValue,
+            valueText,
+            width: innerWidth,
+            pickerCandidates: focusedSlotPickerCandidates,
+            pickerCursor
+          }
+        ) : visibleRowSlice.map((row, i) => {
           if (row.kind === "header") {
-            return /* @__PURE__ */ jsx34(Text31, { bold: true, color: PALETTE.success, children: row.label }, `header-${i}`);
+            return /* @__PURE__ */ jsx33(Text30, { bold: true, color: PALETTE.success, children: row.label }, `header-${i}`);
           }
           if (row.kind === "component-description") {
             const isSelected2 = inComponentDesc && active;
-            const isEditing = isSelected2 && focusLevel === "field" && activeField === "description";
+            const isEditing = isSelected2 && focusLevel === "field" && editingField && activeField === "description";
             const desc = editorState.componentDescription;
-            return /* @__PURE__ */ jsx34(Box29, { flexDirection: "column", children: /* @__PURE__ */ jsxs31(Box29, { gap: 1, children: [
-              /* @__PURE__ */ jsx34(
-                Text31,
-                {
-                  color: isSelected2 ? PALETTE.inverse : PALETTE.info,
-                  bold: isSelected2,
-                  backgroundColor: isSelected2 ? "blue" : void 0,
-                  children: `${isSelected2 ? "\u203A" : " "} description: `
-                }
-              ),
-              isEditing ? /* @__PURE__ */ jsxs31(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-                /* @__PURE__ */ jsx34(Text31, { children: desc.slice(0, textCursor) }),
-                /* @__PURE__ */ jsx34(Text31, { inverse: cursorVisible, children: desc[textCursor] ?? (cursorVisible ? "\u2588" : " ") }),
-                /* @__PURE__ */ jsx34(Text31, { children: desc.slice(textCursor + 1) })
-              ] }) : /* @__PURE__ */ jsx34(Text31, { color: isSelected2 ? PALETTE.warning : PALETTE.inverse, dimColor: !desc, children: desc || "(none \u2014 Return to edit)" })
-            ] }) }, `component-description-${i}`);
+            return /* @__PURE__ */ jsx33(
+              DescriptionField,
+              {
+                value: desc,
+                focused: isSelected2,
+                editing: isEditing,
+                textCursor,
+                cursorVisible,
+                width: innerWidth,
+                label: "description:",
+                compact: !isSelected2
+              },
+              `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__ */ jsx34(
+            const commonRowProps2 = createCommonRowProps(
+              isSelected2,
+              focusLevel,
+              editingField,
+              textCursor,
+              valueCursor,
+              cursorVisible,
+              editingValue,
+              valueText,
+              innerWidth
+            );
+            return /* @__PURE__ */ jsx33(
               PropRow,
               {
                 prop: p,
-                selected: isSelected2,
+                ...commonRowProps2,
                 activeField: isSelected2 && focusLevel === "field" ? activeField : null,
-                textCursor,
-                valueCursor,
-                cursorVisible,
-                editingValue: isSelected2 ? editingValue : null,
-                valueText: isSelected2 ? valueText : "",
-                width: innerWidth,
                 rationale: showInlineRationales ? propMeta?.rationale ?? null : null,
                 rowKey: String(row.idx)
               },
@@ -22960,24 +22948,30 @@ 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__ */ jsx34(
+          const commonRowProps = createCommonRowProps(
+            isSelected,
+            focusLevel,
+            editingField,
+            textCursor,
+            valueCursor,
+            cursorVisible,
+            editingValue,
+            valueText,
+            innerWidth
+          );
+          return /* @__PURE__ */ jsx33(
             SlotRow,
             {
               slot: s,
-              selected: isSelected,
+              ...commonRowProps,
               activeField: isSelected && focusLevel === "field" ? activeField : null,
-              textCursor,
-              valueCursor,
-              cursorVisible,
-              editingValue: isSelected ? editingValue : null,
-              valueText: isSelected ? valueText : "",
-              width: innerWidth,
               pickerCandidates: slotPickerCandidates,
               pickerCursor
             },
             `slot-${row.idx}`
           );
         }) }),
+        categoryBelow && /* @__PURE__ */ jsx33(Text30, { color: PALETTE.success, bold: true, children: `(${categoryBelow} below)` }),
         sourceOpen && !onToggleSourceExternal && (() => {
           const propMeta = !inSlots && !inComponentDesc && currentProp ? metadata?.props?.[currentProp.name] : void 0;
           const start = propMeta?.sourceStartLine ?? null;
@@ -22986,50 +22980,50 @@ function FieldEditor({
           const src = metadata?.componentSource ?? null;
           const headerPath = path ?? "<unknown source path>";
           if (!start || !end || !src) {
-            return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-              /* @__PURE__ */ jsx34(Text31, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
-              /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "(no source location captured for this prop)" }),
-              /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "[s] close" })
+            return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+              /* @__PURE__ */ jsx33(Text30, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
+              /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "(no source location captured for this prop)" }),
+              /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "[s] close" })
             ] });
           }
           const lines = src.split("\n").slice(Math.max(0, start - 1), end);
-          return /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-            /* @__PURE__ */ jsx34(Text31, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}\u2013${end}` }),
-            lines.map((ln, i) => /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: ln }, `source-line-${i}`)),
-            /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "[s] close \xB7 [Esc] close" })
+          return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+            /* @__PURE__ */ jsx33(Text30, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}\u2013${end}` }),
+            lines.map((ln, i) => /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: ln }, `source-line-${i}`)),
+            /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "[s] close \xB7 [Esc] close" })
           ] });
         })(),
-        showHelp && /* @__PURE__ */ jsxs31(Box29, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
-          /* @__PURE__ */ jsx34(Text31, { bold: true, color: PALETTE.info, children: "Keybindings" }),
-          /* @__PURE__ */ jsx34(Text31, { children: " " }),
-          /* @__PURE__ */ jsx34(Text31, { bold: true, children: "Row navigation" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  \u2191/\u2193 or j/k       move between rows" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  Enter            edit fields on the current row" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  Esc              exit the panel" }),
-          /* @__PURE__ */ jsx34(Text31, { children: " " }),
-          /* @__PURE__ */ jsx34(Text31, { bold: true, children: "Field editing" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  \u2191/\u2193 or j/k       cycle through fields (j/k literal in text inputs)" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  \u2190/\u2192              cycle picker values \xB7 move cursor in text inputs" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  Space/Enter      toggle required" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  Type             edit description / string default" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  Ctrl+S           save changes" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  Esc              exit field-edit back to the row" }),
-          /* @__PURE__ */ jsx34(Text31, { children: " " }),
-          /* @__PURE__ */ jsx34(Text31, { bold: true, children: "Values / allowedComponents" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  a / e / r        add \xB7 edit \xB7 remove" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  \u2191\u2193 or j/k        navigate the list" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  K / J            reorder up \xB7 down" }),
-          /* @__PURE__ */ jsx34(Text31, { children: " " }),
-          /* @__PURE__ */ jsx34(Text31, { bold: true, children: "Panels" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  s                toggle source-view for the current prop" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  " + propRationaleKey.padEnd(16) + " toggle prop rationale panel" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  " + componentRationaleKey.padEnd(16) + " toggle component rationale panel" }),
-          /* @__PURE__ */ jsx34(Text31, { children: "  ?                toggle this overlay" }),
-          /* @__PURE__ */ jsx34(Text31, { children: " " }),
-          /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: "press ? or Esc to close" })
+        showHelp && /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
+          /* @__PURE__ */ jsx33(Text30, { bold: true, color: PALETTE.info, children: "Keybindings" }),
+          /* @__PURE__ */ jsx33(Text30, { children: " " }),
+          /* @__PURE__ */ jsx33(Text30, { bold: true, children: "Row navigation" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  \u2191/\u2193               move between rows" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  Enter            edit fields on the current row" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  Esc              exit the panel" }),
+          /* @__PURE__ */ jsx33(Text30, { children: " " }),
+          /* @__PURE__ */ jsx33(Text30, { bold: true, children: "Field editing" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  \u2191/\u2193/\u2190\u2192           cycle through fields" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  \u2190/\u2192              cycle picker values \xB7 move cursor in text inputs" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  Space/Enter      toggle required" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  Type             edit description / string default" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  Esc              exit field-edit back to the row" }),
+          /* @__PURE__ */ jsx33(Text30, { children: " " }),
+          /* @__PURE__ */ jsx33(Text30, { bold: true, children: "Values / allowedComponents" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  a / e / r        add \xB7 edit \xB7 remove" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  \u2191\u2193               navigate the list" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  K / J            reorder up \xB7 down" }),
+          /* @__PURE__ */ jsx33(Text30, { children: " " }),
+          /* @__PURE__ */ jsx33(Text30, { bold: true, children: "Panels" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  s                toggle source-view for the current prop" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  Ctrl+S           save field edits" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  " + propRationaleKey.padEnd(16) + " toggle prop rationale panel" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  " + componentRationaleKey.padEnd(16) + " toggle component rationale panel" }),
+          /* @__PURE__ */ jsx33(Text30, { children: "  ?                toggle this overlay" }),
+          /* @__PURE__ */ jsx33(Text30, { children: " " }),
+          /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "press ? or Esc to close" })
         ] }),
-        validationError && /* @__PURE__ */ jsx34(Text31, { color: PALETTE.error, children: "\u2717 " + validationError }),
-        /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: modeLabel })
+        validationError && /* @__PURE__ */ jsx33(Text30, { color: PALETTE.error, children: "\u2717 " + validationError }),
+        /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: modeLabel })
       ]
     }
   );
@@ -23042,6 +23036,7 @@ var init_FieldEditor = __esm({
     init_useImmediateInput();
     init_scroll_offset();
     init_cycle_detection();
+    init_windowed_panel();
     SLOT_FIELDS = ["required", "allowedComponents", "description"];
   }
 });
@@ -23084,23 +23079,23 @@ var init_wrap_text = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/RationaleLine.tsx
-import { Box as Box30, Text as Text32 } from "ink";
-import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Box as Box30, Text as Text31 } from "ink";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 function RationaleLine({ line, active }) {
   if (line.kind === "blank") {
-    return /* @__PURE__ */ jsx35(Box30, { children: /* @__PURE__ */ jsx35(Text32, { children: " " }) });
+    return /* @__PURE__ */ jsx34(Box30, { children: /* @__PURE__ */ jsx34(Text31, { children: " " }) });
   }
   if (line.kind === "heading") {
-    return /* @__PURE__ */ jsx35(Box30, { children: /* @__PURE__ */ jsx35(Text32, { bold: true, color: PALETTE.info, dimColor: !active, children: line.text }) });
+    return /* @__PURE__ */ jsx34(Box30, { children: /* @__PURE__ */ jsx34(Text31, { bold: true, color: PALETTE.info, dimColor: !active, children: line.text }) });
   }
   if (line.kind === "label") {
-    return /* @__PURE__ */ jsxs32(Box30, { children: [
-      line.prefix && /* @__PURE__ */ jsx35(Text32, { children: line.prefix }),
-      /* @__PURE__ */ jsx35(Text32, { bold: true, color: line.color, dimColor: !active, children: line.text }),
-      line.suffix && /* @__PURE__ */ jsx35(Text32, { dimColor: true, children: line.suffix })
+    return /* @__PURE__ */ jsxs31(Box30, { children: [
+      line.prefix && /* @__PURE__ */ jsx34(Text31, { children: line.prefix }),
+      /* @__PURE__ */ jsx34(Text31, { bold: true, color: line.color, dimColor: !active, children: line.text }),
+      line.suffix && /* @__PURE__ */ jsx34(Text31, { dimColor: true, children: line.suffix })
     ] });
   }
-  return /* @__PURE__ */ jsx35(Box30, { children: /* @__PURE__ */ jsx35(Text32, { dimColor: !active || line.dim, children: line.text }) });
+  return /* @__PURE__ */ jsx34(Box30, { children: /* @__PURE__ */ jsx34(Text31, { dimColor: !active || line.dim, children: line.text }) });
 }
 var init_RationaleLine = __esm({
   "packages/experience-design-system-cli/src/analyze/select/tui/components/RationaleLine.tsx"() {
@@ -23110,8 +23105,8 @@ var init_RationaleLine = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/ComponentRationalePanel.tsx
-import { Box as Box31, Text as Text33 } from "ink";
-import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Box as Box31, Text as Text32 } from "ink";
+import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
 function renderComponentRationaleLines(data, innerWidth) {
   const out = [];
   const pushSection = (heading, body) => {
@@ -23178,7 +23173,7 @@ function ComponentRationalePanel({
   const overflowed = totalLines > contentHeight;
   const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
   const visibleEnd = Math.min(totalLines, scrollOffset + contentHeight);
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     Box31,
     {
       flexDirection: "column",
@@ -23187,9 +23182,9 @@ function ComponentRationalePanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.inverse : void 0,
       children: [
-        /* @__PURE__ */ jsx36(Box31, { children: /* @__PURE__ */ jsx36(Text33, { bold: true, dimColor: !active, children: `Component rationale: ${data.name}` }) }),
-        visible.map((line, i) => /* @__PURE__ */ jsx36(RationaleLine, { line, active }, i)),
-        /* @__PURE__ */ jsx36(Box31, { children: overflowed ? /* @__PURE__ */ jsx36(Text33, { dimColor: true, children: `${visibleStart}-${visibleEnd}/${totalLines}    [j/k] scroll    [I/Esc] close` }) : /* @__PURE__ */ jsx36(Text33, { dimColor: true, children: "[I/Esc] close" }) })
+        /* @__PURE__ */ jsx35(Box31, { children: /* @__PURE__ */ jsx35(Text32, { bold: true, dimColor: !active, children: `Component rationale: ${data.name}` }) }),
+        visible.map((line, i) => /* @__PURE__ */ jsx35(RationaleLine, { line, active }, i)),
+        /* @__PURE__ */ jsx35(Box31, { children: overflowed ? /* @__PURE__ */ jsx35(Text32, { dimColor: true, children: `${visibleStart}-${visibleEnd}/${totalLines}    [\u2191\u2193] scroll    [I/Esc] close` }) : /* @__PURE__ */ jsx35(Text32, { dimColor: true, children: "[I/Esc] close" }) })
       ]
     }
   );
@@ -23206,10 +23201,10 @@ var init_ComponentRationalePanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/HighlightedLine.tsx
-import { Text as Text34 } from "ink";
-import { Fragment as Fragment11, jsx as jsx37 } from "react/jsx-runtime";
+import { Text as Text33 } from "ink";
+import { Fragment as Fragment11, jsx as jsx36 } from "react/jsx-runtime";
 function HighlightedLine({ parts }) {
-  return /* @__PURE__ */ jsx37(Fragment11, { children: parts.map((part, i) => /* @__PURE__ */ jsx37(Text34, { color: part.color, dimColor: part.dim, children: part.text }, i)) });
+  return /* @__PURE__ */ jsx36(Fragment11, { children: parts.map((part, i) => /* @__PURE__ */ jsx36(Text33, { color: part.color, dimColor: part.dim, children: part.text }, i)) });
 }
 var init_HighlightedLine = __esm({
   "packages/experience-design-system-cli/src/analyze/select/tui/components/HighlightedLine.tsx"() {
@@ -23218,8 +23213,8 @@ var init_HighlightedLine = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/ScrollablePanel.tsx
-import { Box as Box32, Text as Text35 } from "ink";
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Box as Box32, Text as Text34 } from "ink";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function ScrollablePanel({
   header,
   width,
@@ -23232,12 +23227,12 @@ function ScrollablePanel({
   children
 }) {
   const overflowed = totalLines > height;
-  return /* @__PURE__ */ jsxs34(Box32, { flexDirection: "column", width, height: height + 2, borderStyle: "single", borderColor, children: [
-    /* @__PURE__ */ jsxs34(Box32, { children: [
+  return /* @__PURE__ */ jsxs33(Box32, { flexDirection: "column", width, height: height + 2, borderStyle: "single", borderColor, children: [
+    /* @__PURE__ */ jsxs33(Box32, { children: [
       header,
-      overflowed && /* @__PURE__ */ jsxs34(Fragment12, { children: [
-        /* @__PURE__ */ jsx38(Box32, { flexGrow: 1 }),
-        /* @__PURE__ */ jsx38(Text35, { dimColor: !active, children: `\u2195 ${visibleStart}-${visibleEnd}/${totalLines}` })
+      overflowed && /* @__PURE__ */ jsxs33(Fragment12, { children: [
+        /* @__PURE__ */ jsx37(Box32, { flexGrow: 1 }),
+        /* @__PURE__ */ jsx37(Text34, { dimColor: !active, children: `\u2195 ${visibleStart}-${visibleEnd}/${totalLines}` })
       ] })
     ] }),
     children
@@ -23250,8 +23245,8 @@ var init_ScrollablePanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/JsonPanel.tsx
-import { Box as Box33, Text as Text36 } from "ink";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { Box as Box33, Text as Text35 } from "ink";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function highlightJson(line) {
   const parts = [];
   let remaining = line;
@@ -23289,7 +23284,7 @@ function highlightJson(line) {
     parts.push({ text: remaining[0] });
     remaining = remaining.slice(1);
   }
-  return /* @__PURE__ */ jsx39(HighlightedLine, { parts });
+  return /* @__PURE__ */ jsx38(HighlightedLine, { parts });
 }
 function truncateLine(line, maxWidth) {
   if (line.length <= maxWidth) return line;
@@ -23302,10 +23297,10 @@ function JsonPanel({ label, value, scrollOffset, width, height, active }) {
   const totalLines = allLines.length;
   const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
   const visibleEnd = Math.min(totalLines, scrollOffset + height);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(
     ScrollablePanel,
     {
-      header: /* @__PURE__ */ jsx39(Text36, { bold: true, dimColor: !active, children: label }),
+      header: /* @__PURE__ */ jsx38(Text35, { bold: true, dimColor: !active, children: label }),
       width,
       height,
       active,
@@ -23315,7 +23310,7 @@ function JsonPanel({ label, value, scrollOffset, width, height, active }) {
       borderColor: active ? "white" : void 0,
       children: visibleLines.map((line, i) => {
         const truncated = truncateLine(line, innerWidth);
-        return /* @__PURE__ */ jsx39(Box33, { children: highlightJson(truncated) }, i);
+        return /* @__PURE__ */ jsx38(Box33, { children: highlightJson(truncated) }, i);
       })
     }
   );
@@ -23329,8 +23324,8 @@ var init_JsonPanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/RationalePanel.tsx
-import { Text as Text37 } from "ink";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { Text as Text36 } from "ink";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function renderRationaleLines(rows, innerWidth) {
   const out = [];
   rows.forEach((row, idx) => {
@@ -23363,10 +23358,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__ */ jsx40(
+  return /* @__PURE__ */ jsx39(
     ScrollablePanel,
     {
-      header: /* @__PURE__ */ jsx40(Text37, { bold: true, dimColor: !active, children: `RATIONALE \u2014 ${componentName}` }),
+      header: /* @__PURE__ */ jsx39(Text36, { bold: true, dimColor: !active, children: `RATIONALE \u2014 ${componentName}` }),
       width,
       height,
       active,
@@ -23374,7 +23369,7 @@ function RationalePanel({
       visibleStart,
       visibleEnd,
       borderColor: active ? PALETTE.inverse : void 0,
-      children: visible.map((line, i) => /* @__PURE__ */ jsx40(RationaleLine, { line, active }, i))
+      children: visible.map((line, i) => /* @__PURE__ */ jsx39(RationaleLine, { line, active }, i))
     }
   );
 }
@@ -23389,9 +23384,9 @@ var init_RationalePanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/TokenReviewPanel.tsx
-import figures6 from "figures";
-import { Box as Box34, Text as Text38 } from "ink";
-import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
+import figures5 from "figures";
+import { Box as Box34, Text as Text37 } from "ink";
+import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 function collectTokenSuggestions(entry, availableTokens = []) {
   return Object.entries(entry.$properties).filter(([, def]) => {
     const rawKind = def["$token.kind"];
@@ -23425,7 +23420,7 @@ 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__ */ jsxs35(
+    return /* @__PURE__ */ jsxs34(
       Box34,
       {
         flexDirection: "column",
@@ -23434,24 +23429,24 @@ function TokenReviewPanel({
         borderStyle: "single",
         borderColor: active ? PALETTE.inverse : void 0,
         children: [
-          /* @__PURE__ */ jsx41(Text38, { bold: true, dimColor: !active, wrap: "truncate", children: `TOKEN REVIEW \u2014 ${componentName} \xB7 ${current.propName} (edit allowed)` }),
-          /* @__PURE__ */ jsx41(Text38, { dimColor: true, wrap: "truncate", children: `select which tokens are allowed (${rangeLabel})` }),
-          /* @__PURE__ */ jsx41(Text38, { children: " " }),
-          current.paths.length === 0 && /* @__PURE__ */ jsx41(Text38, { dimColor: true, children: "(no compatible tokens found for this token kind)" }),
+          /* @__PURE__ */ jsx40(Text37, { bold: true, dimColor: !active, wrap: "truncate", children: `TOKEN REVIEW \u2014 ${componentName} \xB7 ${current.propName} (edit allowed)` }),
+          /* @__PURE__ */ jsx40(Text37, { dimColor: true, wrap: "truncate", children: `select which tokens are allowed (${rangeLabel})` }),
+          /* @__PURE__ */ jsx40(Text37, { children: " " }),
+          current.paths.length === 0 && /* @__PURE__ */ jsx40(Text37, { 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__ */ jsx41(Box34, { children: /* @__PURE__ */ jsx41(Text38, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, wrap: "truncate", children: `  [${checked ? "x" : " "}] ${path}` }) }, path);
+            return /* @__PURE__ */ jsx40(Box34, { children: /* @__PURE__ */ jsx40(Text37, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, wrap: "truncate", children: `  [${checked ? "x" : " "}] ${path}` }) }, path);
           }),
-          /* @__PURE__ */ jsx41(Text38, { children: " " }),
-          /* @__PURE__ */ jsx41(Text38, { dimColor: true, wrap: "truncate", children: "[\u2191/\u2193] move  [Space] toggle" }),
-          /* @__PURE__ */ jsx41(Text38, { dimColor: true, wrap: "truncate", children: "[Ctrl+S] save  [Esc] cancel" })
+          /* @__PURE__ */ jsx40(Text37, { children: " " }),
+          /* @__PURE__ */ jsx40(Text37, { dimColor: true, wrap: "truncate", children: "[\u2191/\u2193] move  [Space] toggle" }),
+          /* @__PURE__ */ jsx40(Text37, { dimColor: true, wrap: "truncate", children: "[Ctrl+S] save  [Esc] cancel" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs34(
     Box34,
     {
       flexDirection: "column",
@@ -23460,18 +23455,18 @@ function TokenReviewPanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.inverse : void 0,
       children: [
-        /* @__PURE__ */ jsx41(Text38, { bold: true, dimColor: !active, children: `TOKEN REVIEW \u2014 ${componentName}` }),
-        suggestions.length === 0 && /* @__PURE__ */ jsx41(Text38, { dimColor: true, children: "(no token suggestions for this component)" }),
+        /* @__PURE__ */ jsx40(Text37, { bold: true, dimColor: !active, children: `TOKEN REVIEW \u2014 ${componentName}` }),
+        suggestions.length === 0 && /* @__PURE__ */ jsx40(Text37, { dimColor: true, children: "(no token suggestions for this component)" }),
         suggestions.map((s, i) => {
           const focused = i === selectedRow;
-          return /* @__PURE__ */ jsxs35(Box34, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx41(Box34, { children: /* @__PURE__ */ jsx41(Text38, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, children: `${focused ? figures6.pointer : " "} ${s.propName}` }) }),
-            /* @__PURE__ */ jsx41(Text38, { dimColor: true, children: `  suggested: ${s.suggested.join(", ")}` }),
-            /* @__PURE__ */ jsx41(Text38, { dimColor: true, children: `  allowed: ${s.allowed.join(", ")}` })
+          return /* @__PURE__ */ jsxs34(Box34, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsx40(Box34, { children: /* @__PURE__ */ jsx40(Text37, { color: focused ? PALETTE.info : void 0, bold: focused, dimColor: !active, children: `${focused ? figures5.pointer : " "} ${s.propName}` }) }),
+            /* @__PURE__ */ jsx40(Text37, { dimColor: true, children: `  suggested: ${s.suggested.join(", ")}` }),
+            /* @__PURE__ */ jsx40(Text37, { dimColor: true, children: `  allowed: ${s.allowed.join(", ")}` })
           ] }, s.propName);
         }),
-        /* @__PURE__ */ jsx41(Text38, { children: " " }),
-        /* @__PURE__ */ jsx41(Text38, { dimColor: true, children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
+        /* @__PURE__ */ jsx40(Text37, { children: " " }),
+        /* @__PURE__ */ jsx40(Text37, { dimColor: true, children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
       ]
     }
   );
@@ -23484,8 +23479,8 @@ var init_TokenReviewPanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/steps/review-details-panel.tsx
-import { Text as Text39 } from "ink";
-import { Fragment as Fragment13, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Text as Text38 } from "ink";
+import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 function ReviewDetailsPanel({
   selectedKey,
   panelOpen,
@@ -23520,7 +23515,7 @@ function ReviewDetailsPanel({
         rationale: s.rationale ?? ""
       }))
     ];
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx41(
       RationalePanel,
       {
         componentName: componentRationale?.name ?? selectedKey,
@@ -23533,7 +23528,7 @@ function ReviewDetailsPanel({
     );
   }
   if (panelOpen === "component-rationale") {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx41(
       ComponentRationalePanel,
       {
         data: componentRationale ?? {
@@ -23558,14 +23553,14 @@ function ReviewDetailsPanel({
     const headerPath = path ?? "<unknown source path>";
     const sourceLineCount = Math.max(1, height - 4);
     const lines = source ? source.split("\n").slice(panelScrollOffset, panelScrollOffset + sourceLineCount) : [];
-    return /* @__PURE__ */ jsxs36(FixedPanel, { width, height, borderStyle: "single", borderColor: sourceBorderColor, paddingLeft: 1, children: [
-      /* @__PURE__ */ jsx42(Text39, { dimColor: true, bold: true, wrap: "truncate-end", children: `source: ${headerPath}` }),
-      source ? lines.map((line, index) => /* @__PURE__ */ jsx42(Text39, { dimColor: true, wrap: "truncate-end", children: line }, `source-line-${index}`)) : /* @__PURE__ */ jsx42(Text39, { dimColor: true, children: "(no source captured)" }),
-      /* @__PURE__ */ jsx42(Text39, { dimColor: true, wrap: "truncate-end", children: "[s/Esc] close" })
+    return /* @__PURE__ */ jsxs35(FixedPanel, { width, height, borderStyle: "single", borderColor: sourceBorderColor, paddingLeft: 1, children: [
+      /* @__PURE__ */ jsx41(Text38, { dimColor: true, bold: true, wrap: "truncate-end", children: `source: ${headerPath}` }),
+      source ? lines.map((line, index) => /* @__PURE__ */ jsx41(Text38, { dimColor: true, wrap: "truncate-end", children: line }, `source-line-${index}`)) : /* @__PURE__ */ jsx41(Text38, { dimColor: true, children: "(no source captured)" }),
+      /* @__PURE__ */ jsx41(Text38, { dimColor: true, wrap: "truncate-end", children: "[s/Esc] close" })
     ] });
   }
   if (panelOpen === "token-review") {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx41(
       TokenReviewPanel,
       {
         componentName: selectedKey,
@@ -23581,7 +23576,7 @@ function ReviewDetailsPanel({
     );
   }
   if (showJson) {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx41(
       JsonPanel,
       {
         label: "GENERATED DEFINITION (read-only)",
@@ -23593,7 +23588,7 @@ function ReviewDetailsPanel({
       }
     );
   }
-  return /* @__PURE__ */ jsx42(Fragment13, { children: editor });
+  return /* @__PURE__ */ jsx41(Fragment13, { children: editor });
 }
 var init_review_details_panel = __esm({
   "packages/experience-design-system-cli/src/import/tui/steps/review-details-panel.tsx"() {
@@ -23607,7 +23602,7 @@ var init_review_details_panel = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewDetailsEditor.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 function toFieldEditorMetadata(reviewMetadata) {
   if (!reviewMetadata) return void 0;
@@ -23640,7 +23635,7 @@ function ReviewDetailsEditor({
     jsonScrollOffset,
     currentTokenSuggestions
   } = reviewEditor;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(
     ReviewDetailsPanel,
     {
       selectedKey,
@@ -23664,10 +23659,12 @@ function ReviewDetailsEditor({
         FieldEditor,
         {
           ...fieldEditor,
-          key: fieldEditor.key ?? selectedKey,
+          key: `${fieldEditor.key ?? selectedKey}:${sidebarFocused ? "list" : "panel"}`,
           width,
           height,
+          fixedHeight: true,
           active: !sidebarFocused,
+          initialFocusTarget: sidebarFocused ? void 0 : fieldEditor.initialFocusTarget,
           metadata: toFieldEditorMetadata(reviewMetadata),
           showInlineRationales: false
         }
@@ -23684,8 +23681,8 @@ var init_ReviewDetailsEditor = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewComponentPanel.tsx
-import { Box as Box35, Text as Text40 } from "ink";
-import { Fragment as Fragment14, jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Box as Box35, Text as Text39 } from "ink";
+import { Fragment as Fragment14, jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 function buildReviewFieldEditor(reviewEditor, selectedJson, onExit, overrides = {}) {
   return {
     value: reviewEditor.draftValue || selectedJson,
@@ -23725,17 +23722,17 @@ function ReviewEmptyComponentsWarning({
   hidden
 }) {
   if (hidden || count === 0) return null;
-  return /* @__PURE__ */ jsx44(Text40, { color: PALETTE.warning, children: `\u26A0 ${count} component${count === 1 ? "" : "s"} had no classifiable props \u2014 review with care` });
+  return /* @__PURE__ */ jsx43(Text39, { color: PALETTE.warning, children: `\u26A0 ${count} component${count === 1 ? "" : "s"} had no classifiable props \u2014 review with care` });
 }
 function ReviewNoSelection() {
-  return /* @__PURE__ */ jsx44(Box35, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx44(Text40, { dimColor: true, children: "No component selected" }) });
+  return /* @__PURE__ */ jsx43(Box35, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx43(Text39, { dimColor: true, children: "No component selected" }) });
 }
 function ReviewFinalizeError({
   message,
   hidden
 }) {
   if (hidden || !message) return null;
-  return /* @__PURE__ */ jsx44(Text40, { color: PALETTE.error, children: `\u26A0 ${message}` });
+  return /* @__PURE__ */ jsx43(Text39, { color: PALETTE.error, children: `\u26A0 ${message}` });
 }
 function ReviewPanelFooter({
   reviewEditor,
@@ -23744,10 +23741,10 @@ function ReviewPanelFooter({
   livePreview,
   livePreviewSpinner
 }) {
-  return /* @__PURE__ */ jsxs37(Fragment14, { 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__ */ jsx44(Text40, { children: `  ${livePreviewSpinner} live preview` }),
-    livePreview.disabled && /* @__PURE__ */ jsx44(Text40, { children: "  \xB7 live preview disabled" })
+  return /* @__PURE__ */ jsxs36(Fragment14, { children: [
+    reviewEditor.panelOpen === "token-review" ? "  [\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" : sidebarFocused ? sidebarFooter : reviewEditor.showJson ? "  [\u2191\u2193] 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__ */ jsx43(Text39, { children: `  ${livePreviewSpinner} live preview` }),
+    livePreview.disabled && /* @__PURE__ */ jsx43(Text39, { children: "  \xB7 live preview disabled" })
   ] });
 }
 function ReviewComponentPanel({
@@ -23771,11 +23768,11 @@ function ReviewComponentPanel({
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
   const contentHeight = Math.max(1, height - 3);
   const contentWidth = Math.max(1, width - 1);
-  return /* @__PURE__ */ jsx44(FixedPanel, { width, height, borderStyle: void 0, paddingLeft: 1, children: /* @__PURE__ */ jsxs37(Box35, { flexDirection: "column", width: contentWidth, height, flexShrink: 0, overflowY: "hidden", children: [
-    /* @__PURE__ */ jsxs37(Box35, { width: contentWidth, height: 1, flexShrink: 0, children: [
-      /* @__PURE__ */ jsx44(Text40, { bold: true, wrap: "truncate-end", children: selectedKey }),
-      /* @__PURE__ */ jsx44(Box35, { flexGrow: 1 }),
-      /* @__PURE__ */ jsxs37(Text40, { dimColor: true, wrap: "truncate-end", children: [
+  return /* @__PURE__ */ jsx43(FixedPanel, { width, height, borderStyle: void 0, paddingLeft: 1, children: /* @__PURE__ */ jsxs36(Box35, { flexDirection: "column", width: contentWidth, height, flexShrink: 0, overflowY: "hidden", children: [
+    /* @__PURE__ */ jsxs36(Box35, { width: contentWidth, height: 1, flexShrink: 0, children: [
+      /* @__PURE__ */ jsx43(Text39, { bold: true, wrap: "truncate-end", children: selectedKey }),
+      /* @__PURE__ */ jsx43(Box35, { flexGrow: 1 }),
+      /* @__PURE__ */ jsxs36(Text39, { dimColor: true, wrap: "truncate-end", children: [
         propCount,
         " prop",
         propCount !== 1 ? "s" : "",
@@ -23784,7 +23781,7 @@ function ReviewComponentPanel({
         sidebarFocused ? "[Tab] focus panel" : "[Tab] focus list"
       ] })
     ] }),
-    /* @__PURE__ */ jsx44(Box35, { width: contentWidth, height: contentHeight, flexShrink: 0, overflowY: "hidden", children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx43(Box35, { width: contentWidth, height: contentHeight, flexShrink: 0, overflowY: "hidden", children: /* @__PURE__ */ jsx43(
       ReviewDetailsEditor,
       {
         selectedKey,
@@ -23799,8 +23796,8 @@ function ReviewComponentPanel({
         fieldEditor
       }
     ) }),
-    /* @__PURE__ */ jsx44(Box35, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx44(Text40, { color: saveError ? PALETTE.error : void 0, wrap: "truncate-end", children: saveError ? "\u2717 " + saveError : " " }) }),
-    /* @__PURE__ */ jsx44(Box35, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx44(Text40, { dimColor: true, wrap: "truncate-end", children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx43(Box35, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx43(Text39, { color: saveError ? PALETTE.error : void 0, wrap: "truncate-end", children: saveError ? "\u2717 " + saveError : " " }) }),
+    /* @__PURE__ */ jsx43(Box35, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx43(Text39, { dimColor: true, wrap: "truncate-end", children: /* @__PURE__ */ jsx43(
       ReviewPanelFooter,
       {
         reviewEditor,
@@ -23822,43 +23819,9 @@ var init_ReviewComponentPanel = __esm({
   }
 });
 
-// packages/experience-design-system-cli/src/analyze/select/tui/components/StatusBar.tsx
-import { Box as Box36, Text as Text41 } from "ink";
-import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
-function StatusBar({ accepted, rejected, reviewed, needsReview }) {
-  const allResolved = needsReview === 0;
-  return /* @__PURE__ */ jsxs38(Box36, { gap: 2, flexWrap: "wrap", children: [
-    /* @__PURE__ */ jsxs38(Text41, { color: PALETTE.success, children: [
-      accepted,
-      " accepted"
-    ] }),
-    /* @__PURE__ */ jsxs38(Text41, { color: PALETTE.error, children: [
-      rejected,
-      " rejected"
-    ] }),
-    /* @__PURE__ */ jsxs38(Text41, { dimColor: true, children: [
-      needsReview,
-      " pending"
-    ] }),
-    /* @__PURE__ */ jsxs38(Text41, { color: PALETTE.info, children: [
-      reviewed,
-      " reviewed"
-    ] }),
-    /* @__PURE__ */ jsx45(Text41, { dimColor: true, children: "\xB7" }),
-    /* @__PURE__ */ jsx45(Text41, { dimColor: true, children: "[A] accept all" }),
-    /* @__PURE__ */ jsx45(Text41, { bold: allResolved, color: allResolved ? PALETTE.success : PALETTE.fg, children: "[F] finalize" })
-  ] });
-}
-var init_StatusBar = __esm({
-  "packages/experience-design-system-cli/src/analyze/select/tui/components/StatusBar.tsx"() {
-    "use strict";
-    init_theme();
-  }
-});
-
 // packages/experience-design-system-cli/src/import/tui/components/ReviewStatus.tsx
-import { Box as Box37, Text as Text42 } from "ink";
-import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Box as Box36, Text as Text40 } from "ink";
+import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
 function countReviewStatuses(entries) {
   return entries.reduce(
     (counts, entry) => {
@@ -23870,39 +23833,20 @@ function countReviewStatuses(entries) {
     { accepted: 0, rejected: 0, needsReview: 0 }
   );
 }
-function ReviewStatusBar({
-  entries,
-  onApproveAll,
-  onFinalize
-}) {
-  const { accepted, rejected, needsReview } = countReviewStatuses(entries);
-  return /* @__PURE__ */ jsx46(
-    StatusBar,
-    {
-      accepted,
-      rejected,
-      reviewed: 0,
-      needsReview,
-      onApproveAll,
-      onFinalize
-    }
-  );
-}
 function ReviewLoadingState() {
-  return /* @__PURE__ */ jsx46(Box37, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx46(Text42, { dimColor: true, children: "Loading generated definitions..." }) });
+  return /* @__PURE__ */ jsx44(Box36, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx44(Text40, { dimColor: true, children: "Loading generated definitions..." }) });
 }
 function ReviewLoadError({ message }) {
-  return /* @__PURE__ */ jsxs39(Box37, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsx46(Text42, { color: PALETTE.error, children: message }),
-    /* @__PURE__ */ jsx46(Text42, { children: " " }),
-    /* @__PURE__ */ jsx46(Text42, { dimColor: true, children: "[q / Enter / Esc] Quit" })
+  return /* @__PURE__ */ jsxs37(Box36, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsx44(Text40, { color: PALETTE.error, children: message }),
+    /* @__PURE__ */ jsx44(Text40, { children: " " }),
+    /* @__PURE__ */ jsx44(Text40, { dimColor: true, children: "[q / Enter / Esc] Quit" })
   ] });
 }
 var init_ReviewStatus = __esm({
   "packages/experience-design-system-cli/src/import/tui/components/ReviewStatus.tsx"() {
     "use strict";
     init_theme();
-    init_StatusBar();
   }
 });
 
@@ -24030,8 +23974,8 @@ var init_runLivePreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/FinalizeDialog.tsx
-import { Box as Box38, Text as Text43 } from "ink";
-import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Box as Box37, Text as Text41 } from "ink";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 function FinalizeDialog({
   accepted,
   rejected,
@@ -24045,7 +23989,7 @@ function FinalizeDialog({
   removedScrollOffset = 0
 }) {
   useImmediateInput((input, key) => {
-    if (input === "j" || input === "k" || key.upArrow || key.downArrow) return;
+    if (key.upArrow || key.downArrow) return;
     if (input === "y" || key.return) {
       onConfirm();
     } else if (input === "n" || key.escape) {
@@ -24059,51 +24003,51 @@ function FinalizeDialog({
   const windowed = removed.slice(offset, offset + FINALIZE_REMOVED_WINDOW);
   const hasMoreBelow = offset + FINALIZE_REMOVED_WINDOW < removed.length;
   const hasMoreAbove = offset > 0;
-  return /* @__PURE__ */ jsxs40(Box38, { flexDirection: "column", borderStyle: "round", padding: 1, width: 58, children: [
-    /* @__PURE__ */ jsx47(Text43, { bold: true, children: "\u2500".repeat(17) + " Finalize " + "\u2500".repeat(17) }),
-    /* @__PURE__ */ jsx47(Text43, { children: " " }),
-    /* @__PURE__ */ jsxs40(Text43, { children: [
-      /* @__PURE__ */ jsxs40(Text43, { color: PALETTE.success, children: [
+  return /* @__PURE__ */ jsxs38(Box37, { flexDirection: "column", borderStyle: "round", padding: 1, width: 58, children: [
+    /* @__PURE__ */ jsx45(Text41, { bold: true, children: "\u2500".repeat(17) + " Finalize " + "\u2500".repeat(17) }),
+    /* @__PURE__ */ jsx45(Text41, { children: " " }),
+    /* @__PURE__ */ jsxs38(Text41, { children: [
+      /* @__PURE__ */ jsxs38(Text41, { color: PALETTE.success, children: [
         accepted,
         " accepted"
       ] }),
-      /* @__PURE__ */ jsx47(Text43, { children: " \xB7 " }),
-      /* @__PURE__ */ jsxs40(Text43, { color: PALETTE.error, children: [
+      /* @__PURE__ */ jsx45(Text41, { children: " \xB7 " }),
+      /* @__PURE__ */ jsxs38(Text41, { color: PALETTE.error, children: [
         rejected,
         " rejected"
       ] }),
-      /* @__PURE__ */ jsx47(Text43, { children: " \xB7 " }),
-      /* @__PURE__ */ jsxs40(Text43, { dimColor: true, children: [
+      /* @__PURE__ */ jsx45(Text41, { children: " \xB7 " }),
+      /* @__PURE__ */ jsxs38(Text41, { dimColor: true, children: [
         needsReview,
         " unresolved"
       ] })
     ] }),
-    /* @__PURE__ */ jsx47(Text43, { children: " " }),
-    noneAccepted && /* @__PURE__ */ jsxs40(Fragment15, { children: [
-      /* @__PURE__ */ jsx47(Text43, { bold: true, color: PALETTE.warning, children: "\u26A0 No components are accepted \u2014 nothing will be pushed." }),
-      /* @__PURE__ */ jsx47(Text43, { color: PALETTE.warning, children: "  Accept at least one component ([a] a row, [A] accept all) to push." }),
-      /* @__PURE__ */ jsx47(Text43, { children: " " })
+    /* @__PURE__ */ jsx45(Text41, { children: " " }),
+    noneAccepted && /* @__PURE__ */ jsxs38(Fragment15, { children: [
+      /* @__PURE__ */ jsx45(Text41, { bold: true, color: PALETTE.warning, children: "\u26A0 No components are accepted \u2014 nothing will be pushed." }),
+      /* @__PURE__ */ jsx45(Text41, { color: PALETTE.warning, children: "  Accept at least one component ([a] a row, [A] accept all) to push." }),
+      /* @__PURE__ */ jsx45(Text41, { children: " " })
     ] }),
-    !allResolved && /* @__PURE__ */ jsxs40(Fragment15, { children: [
-      /* @__PURE__ */ jsx47(Text43, { color: PALETTE.warning, children: "\u26A0 " + needsReview + " unresolved component" + (needsReview === 1 ? "" : "s") + " will not be pushed." }),
-      /* @__PURE__ */ jsx47(Text43, { color: PALETTE.warning, children: "  Only explicitly accepted components ship." }),
-      /* @__PURE__ */ jsx47(Text43, { children: " " })
+    !allResolved && /* @__PURE__ */ jsxs38(Fragment15, { children: [
+      /* @__PURE__ */ jsx45(Text41, { color: PALETTE.warning, children: "\u26A0 " + needsReview + " unresolved component" + (needsReview === 1 ? "" : "s") + " will not be pushed." }),
+      /* @__PURE__ */ jsx45(Text41, { color: PALETTE.warning, children: "  Only explicitly accepted components ship." }),
+      /* @__PURE__ */ jsx45(Text41, { children: " " })
     ] }),
-    /* @__PURE__ */ jsxs40(Box38, { flexDirection: "column", height: 2, children: [
-      previewStatus === "running" ? /* @__PURE__ */ jsx47(Text43, { dimColor: true, children: "Previewing deletions against the target space\u2026" }) : previewStatus === "error" ? /* @__PURE__ */ jsx47(Text43, { color: PALETTE.warning, children: "\u26A0 Could not preview deletions (the push will still proceed)." }) : /* @__PURE__ */ jsx47(Text43, { children: " " }),
-      /* @__PURE__ */ jsx47(Text43, { children: " " })
+    /* @__PURE__ */ jsxs38(Box37, { flexDirection: "column", height: 2, children: [
+      previewStatus === "running" ? /* @__PURE__ */ jsx45(Text41, { dimColor: true, children: "Previewing deletions against the target space\u2026" }) : previewStatus === "error" ? /* @__PURE__ */ jsx45(Text41, { color: PALETTE.warning, children: "\u26A0 Could not preview deletions (the push will still proceed)." }) : /* @__PURE__ */ jsx45(Text41, { children: " " }),
+      /* @__PURE__ */ jsx45(Text41, { children: " " })
     ] }),
-    previewStatus === "done" && removed.length > 0 && /* @__PURE__ */ jsxs40(Fragment15, { children: [
-      /* @__PURE__ */ jsx47(Text43, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removed.length, false) }),
-      hasMoreAbove && /* @__PURE__ */ jsx47(Text43, { dimColor: true, children: "  \u2191 more above" }),
-      windowed.map((rc) => /* @__PURE__ */ jsx47(Text43, { color: PALETTE.error, children: removedComponentLine(rc) }, rc.id)),
-      hasMoreBelow && /* @__PURE__ */ jsx47(Text43, { dimColor: true, children: "  \u2193 more below" }),
-      removed.length > FINALIZE_REMOVED_WINDOW && /* @__PURE__ */ jsx47(Text43, { dimColor: true, children: "  [j/k] scroll deletions" }),
-      /* @__PURE__ */ jsx47(Text43, { children: " " })
+    previewStatus === "done" && removed.length > 0 && /* @__PURE__ */ jsxs38(Fragment15, { children: [
+      /* @__PURE__ */ jsx45(Text41, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removed.length, false) }),
+      hasMoreAbove && /* @__PURE__ */ jsx45(Text41, { dimColor: true, children: "  \u2191 more above" }),
+      windowed.map((rc) => /* @__PURE__ */ jsx45(Text41, { color: PALETTE.error, children: removedComponentLine(rc) }, rc.id)),
+      hasMoreBelow && /* @__PURE__ */ jsx45(Text41, { dimColor: true, children: "  \u2193 more below" }),
+      removed.length > FINALIZE_REMOVED_WINDOW && /* @__PURE__ */ jsx45(Text41, { dimColor: true, children: "  [\u2191\u2193] scroll deletions" }),
+      /* @__PURE__ */ jsx45(Text41, { children: " " })
     ] }),
-    /* @__PURE__ */ jsx47(Text43, { children: noneAccepted ? "Confirm exit with nothing accepted?" : allResolved ? "Save decisions and exit? All components resolved." : "Save decisions and exit?" }),
-    /* @__PURE__ */ jsx47(Text43, { children: " " }),
-    /* @__PURE__ */ jsx47(Text43, { children: "  [y / Enter]  Confirm    [n / Esc]  Cancel" })
+    /* @__PURE__ */ jsx45(Text41, { children: noneAccepted ? "Confirm exit with nothing accepted?" : allResolved ? "Save decisions and exit? All components resolved." : "Save decisions and exit?" }),
+    /* @__PURE__ */ jsx45(Text41, { children: " " }),
+    /* @__PURE__ */ jsx45(Text41, { children: "  [y / Enter]  Confirm    [n / Esc]  Cancel" })
   ] });
 }
 var FINALIZE_REMOVED_WINDOW;
@@ -24118,7 +24062,7 @@ var init_FinalizeDialog = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/useFinalizePreview.ts
-import { useEffect as useEffect8, useRef as useRef5, useState as useState16 } from "react";
+import { useEffect as useEffect9, useRef as useRef5, useState as useState16 } from "react";
 function useReviewFinalizePreview({
   components,
   ...options
@@ -24135,7 +24079,7 @@ function useFinalizePreview(opts) {
   const [scrollOffset, setScrollOffset] = useState16(0);
   const generationRef = useRef5(0);
   const acceptedKey = [...acceptedKeys].sort().join("\0");
-  useEffect8(() => {
+  useEffect9(() => {
     if (!open) {
       setStatus("idle");
       setRemoved([]);
@@ -24187,7 +24131,7 @@ var init_useFinalizePreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewSession.ts
-import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef6, useState as useState17 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useRef as useRef6, useState as useState17 } from "react";
 function loadReviewSessionState({
   extractSessionId,
   tokenSessionId,
@@ -24246,7 +24190,7 @@ function useReviewSession({
     }));
     return { result, catalog };
   }, [loadSession, tokensPath]);
-  useEffect9(() => {
+  useEffect10(() => {
     let disposed = false;
     void (async () => {
       try {
@@ -24299,7 +24243,7 @@ function useReviewSession({
 function useReviewMetadata({ components, selectedIdx, extractSessionId }) {
   const [reviewMetadata, setReviewMetadata] = useState17(null);
   const [componentRationale, setComponentRationale] = useState17(null);
-  useEffect9(() => {
+  useEffect10(() => {
     const current = components[selectedIdx];
     if (!current) {
       setReviewMetadata(null);
@@ -24342,7 +24286,7 @@ function createReviewHistorySnapshot(components, options = {}) {
 function useReviewHistory({ loading, components, createSnapshot, applySnapshot }) {
   const historyRef = useRef6(null);
   const historySeededRef = useRef6(false);
-  useEffect9(() => {
+  useEffect10(() => {
     if (loading || historySeededRef.current) return;
     historySeededRef.current = true;
     historyRef.current = createHistoryStack(createSnapshot(components));
@@ -24431,7 +24375,7 @@ var init_useReviewSession = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewEditor.ts
-import { useEffect as useEffect10, useRef as useRef7, useState as useState18 } from "react";
+import { useEffect as useEffect11, useRef as useRef7, useState as useState18 } from "react";
 function parseReviewEntry(draftValue) {
   const parsed = JSON.parse(draftValue);
   const keys = Object.keys(parsed);
@@ -24465,7 +24409,7 @@ function useReviewEditor({
   const [tokenReviewEditSelection, setTokenReviewEditSelection] = useState18(/* @__PURE__ */ new Set());
   const tokenReviewSuggestedRef = useRef7(/* @__PURE__ */ new Map());
   const pendingGRef = useRef7(false);
-  useEffect10(() => {
+  useEffect11(() => {
     setTokenReviewRow(0);
     setTokenReviewEditing(false);
     setTokenReviewEditCursor(0);
@@ -24485,6 +24429,7 @@ function useReviewEditor({
   const handleEditSave = () => {
     const current = components[selectedIdx];
     if (!current) return;
+    if (draftValue.trim() === "") return;
     try {
       const entry = parseReviewEntry(draftValue);
       const next = components.map(
@@ -24608,8 +24553,8 @@ var init_useReviewSurfaceState = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/QuitDialog.tsx
-import { Box as Box39, Text as Text44 } from "ink";
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Box as Box38, Text as Text42 } from "ink";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
 function QuitDialog({ hasUnsavedDrafts, onConfirm, onCancel }) {
   useImmediateInput((input, key) => {
     if (input === "y" || key.return) {
@@ -24618,16 +24563,16 @@ function QuitDialog({ hasUnsavedDrafts, onConfirm, onCancel }) {
       onCancel();
     }
   });
-  return /* @__PURE__ */ jsxs41(Box39, { flexDirection: "column", borderStyle: "round", padding: 1, width: 50, children: [
-    /* @__PURE__ */ jsx48(Text44, { bold: true, children: "\u2500".repeat(19) + " Quit " + "\u2500".repeat(19) }),
-    /* @__PURE__ */ jsx48(Text44, { children: " " }),
-    hasUnsavedDrafts ? /* @__PURE__ */ jsxs41(Fragment16, { children: [
-      /* @__PURE__ */ jsx48(Text44, { children: "You have unsaved draft edits." }),
-      /* @__PURE__ */ jsx48(Text44, { children: "Session state is preserved \u2014 you can resume" }),
-      /* @__PURE__ */ jsx48(Text44, { children: "by running the same review command again." })
-    ] }) : /* @__PURE__ */ jsx48(Text44, { children: "Session is saved. Quit without finalizing?" }),
-    /* @__PURE__ */ jsx48(Text44, { children: " " }),
-    /* @__PURE__ */ jsx48(Text44, { children: "  [y / Enter]  Quit    [n / Esc]  Stay" })
+  return /* @__PURE__ */ jsxs39(Box38, { flexDirection: "column", borderStyle: "round", padding: 1, width: 50, children: [
+    /* @__PURE__ */ jsx46(Text42, { bold: true, children: "\u2500".repeat(19) + " Quit " + "\u2500".repeat(19) }),
+    /* @__PURE__ */ jsx46(Text42, { children: " " }),
+    hasUnsavedDrafts ? /* @__PURE__ */ jsxs39(Fragment16, { children: [
+      /* @__PURE__ */ jsx46(Text42, { children: "You have unsaved draft edits." }),
+      /* @__PURE__ */ jsx46(Text42, { children: "Session state is preserved \u2014 you can resume" }),
+      /* @__PURE__ */ jsx46(Text42, { children: "by running the same review command again." })
+    ] }) : /* @__PURE__ */ jsx46(Text42, { children: "Session is saved. Quit without finalizing?" }),
+    /* @__PURE__ */ jsx46(Text42, { children: " " }),
+    /* @__PURE__ */ jsx46(Text42, { children: "  [y / Enter]  Quit    [n / Esc]  Stay" })
   ] });
 }
 var init_QuitDialog = __esm({
@@ -24638,8 +24583,8 @@ var init_QuitDialog = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/ReviewDialogs.tsx
-import { Box as Box40, Text as Text45 } from "ink";
-import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Box as Box39, Text as Text43 } from "ink";
+import { Fragment as Fragment17, jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
 function ReviewFinalizeDialogs({
   showFinalize,
   showQuit,
@@ -24653,8 +24598,8 @@ function ReviewFinalizeDialogs({
   onQuitCancel
 }) {
   const { accepted, rejected, needsReview } = countReviewStatuses(components);
-  return /* @__PURE__ */ jsxs42(Fragment17, { children: [
-    showFinalize && /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs40(Fragment17, { children: [
+    showFinalize && /* @__PURE__ */ jsx47(
       FinalizeDialog,
       {
         accepted,
@@ -24667,7 +24612,7 @@ function ReviewFinalizeDialogs({
         onCancel: onFinalizeCancel
       }
     ),
-    showQuit && /* @__PURE__ */ jsx49(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuitConfirm, onCancel: onQuitCancel })
+    showQuit && /* @__PURE__ */ jsx47(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuitConfirm, onCancel: onQuitCancel })
   ] });
 }
 function ReviewStepDialogs({
@@ -24677,7 +24622,7 @@ function ReviewStepDialogs({
   onFinalize,
   onQuit
 }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx47(
     ReviewFinalizeDialogs,
     {
       showFinalize: surfaceState.showFinalize,
@@ -24695,12 +24640,12 @@ function ReviewStepDialogs({
 }
 function ReviewReloadDialog({ open }) {
   if (!open) return null;
-  return /* @__PURE__ */ jsxs42(Box40, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-    /* @__PURE__ */ jsx49(Text45, { bold: true, color: PALETTE.warning, children: "Reload from saved state?" }),
-    /* @__PURE__ */ jsx49(Text45, { children: "Unsaved in-memory changes will be lost." }),
-    /* @__PURE__ */ jsx49(Text45, { children: " " }),
-    /* @__PURE__ */ jsx49(Text45, { children: "  [Enter]  Confirm" }),
-    /* @__PURE__ */ jsx49(Text45, { children: "  [Esc]    Cancel" })
+  return /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+    /* @__PURE__ */ jsx47(Text43, { bold: true, color: PALETTE.warning, children: "Reload from saved state?" }),
+    /* @__PURE__ */ jsx47(Text43, { children: "Unsaved in-memory changes will be lost." }),
+    /* @__PURE__ */ jsx47(Text43, { children: " " }),
+    /* @__PURE__ */ jsx47(Text43, { children: "  [Enter]  Confirm" }),
+    /* @__PURE__ */ jsx47(Text43, { children: "  [Esc]    Cancel" })
   ] });
 }
 var init_ReviewDialogs = __esm({
@@ -24721,11 +24666,11 @@ function handleReviewOverlayInput(input, key, state) {
     return true;
   }
   if (state.showFinalize) {
-    if (input === "j" || key.downArrow) {
+    if (key.downArrow) {
       state.finalizePreview.scrollBy(1);
       return true;
     }
-    if (input === "k" || key.upArrow) {
+    if (key.upArrow) {
       state.finalizePreview.scrollBy(-1);
       return true;
     }
@@ -24763,6 +24708,10 @@ function handleTokenReviewInput(input, key, state) {
   const suggestions = state.currentTokenSuggestions();
   const row = suggestions[state.tokenReviewRow];
   if (state.tokenReviewEditing) {
+    if (key.ctrl && input === "s" && row) {
+      state.handleTokenEditSave(row);
+      return true;
+    }
     if (row && row.paths.length > 0) {
       if (key.upArrow || input === "k") {
         state.setTokenReviewEditCursor((cursor) => Math.max(0, cursor - 1));
@@ -24783,10 +24732,6 @@ function handleTokenReviewInput(input, key, state) {
         });
         return true;
       }
-      if (key.ctrl && input === "s") {
-        state.handleTokenEditSave(row);
-        return true;
-      }
     }
     if (key.escape) {
       state.setTokenReviewEditing(false);
@@ -24865,12 +24810,6 @@ function handleReviewViewToggleInput(input, state) {
     state.pendingGRef.current = false;
     return true;
   }
-  if (input === "H") {
-    state.setShowHiddenProps((previous) => !previous);
-    state.setJsonScrollOffset(0);
-    state.pendingGRef.current = false;
-    return true;
-  }
   return false;
 }
 function handleJsonPanelInput(input, key, state) {
@@ -24943,7 +24882,7 @@ var init_preview_annotations = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/useLivePreview.ts
-import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef8, useState as useState20 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef8, useState as useState20 } from "react";
 function useLivePreview(opts) {
   const debounceMs = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
   const [status, setStatus] = useState20("idle");
@@ -24953,14 +24892,14 @@ function useLivePreview(opts) {
   const latestRef = useRef8(0);
   const inflightRef = useRef8(0);
   const optsRef = useRef8(opts);
-  useEffect11(() => {
+  useEffect12(() => {
     optsRef.current = opts;
   });
   const disabledRef = useRef8(disabled);
-  useEffect11(() => {
+  useEffect12(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  useEffect11(() => {
+  useEffect12(() => {
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -25041,7 +24980,7 @@ var init_useLivePreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/hooks/useReviewPreview.ts
-import { useCallback as useCallback5, useEffect as useEffect12, useState as useState21 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect13, useState as useState21 } from "react";
 function useReviewPreview({
   components,
   loading,
@@ -25083,13 +25022,13 @@ function useReviewPreview({
     deleteAllComponents
   });
   const [spinnerTick, setSpinnerTick] = useState21(0);
-  useEffect12(() => {
+  useEffect13(() => {
     if (livePreviewHook.status !== "running") return;
     const id = setInterval(() => setSpinnerTick((tick2) => tick2 + 1), 80);
     return () => clearInterval(id);
   }, [livePreviewHook.status]);
   const livePreviewSpinner = SPINNER_FRAMES2[spinnerTick % SPINNER_FRAMES2.length];
-  useEffect12(() => {
+  useEffect13(() => {
     if (loading) return;
     if (!livePreview) return;
     if (components.length === 0) return;
@@ -25108,8 +25047,8 @@ var init_useReviewPreview = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/components/LivePreviewSummary.tsx
-import { Box as Box41, Text as Text46 } from "ink";
-import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Box as Box40, Text as Text44 } from "ink";
+import { jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
 function LivePreviewSummary({
   enabled,
   previewAnnotations,
@@ -25123,19 +25062,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__ */ jsx50(Text46, { dimColor: true, children: "Preview: disabled (creds rejected)" });
-  if (status === "running" && !hasCounts) return /* @__PURE__ */ jsx50(Text46, { dimColor: true, children: `Preview: ${spinner} running...` });
+  if (disabled) return /* @__PURE__ */ jsx48(Text44, { dimColor: true, children: "Preview: disabled (creds rejected)" });
+  if (status === "running" && !hasCounts) return /* @__PURE__ */ jsx48(Text44, { dimColor: true, children: `Preview: ${spinner} running...` });
   if (!hasCounts) return null;
-  return /* @__PURE__ */ jsxs43(Box41, { children: [
-    /* @__PURE__ */ jsx50(Text46, { children: "Preview: " }),
-    /* @__PURE__ */ jsx50(Text46, { color: PALETTE.success, children: `${counts.new} new` }),
-    /* @__PURE__ */ jsx50(Text46, { children: " \xB7 " }),
-    /* @__PURE__ */ jsx50(Text46, { color: PALETTE.warning, children: `${counts.changed} changed` }),
-    /* @__PURE__ */ jsx50(Text46, { children: " \xB7 " }),
-    /* @__PURE__ */ jsx50(Text46, { dimColor: true, children: `${counts.removed} removed` }),
-    showRemovedListHint && removedCount > 0 && /* @__PURE__ */ jsx50(Text46, { dimColor: true, children: " ([d] removed list)" }),
-    /* @__PURE__ */ jsx50(Text46, { children: " \xB7 " }),
-    /* @__PURE__ */ jsx50(Text46, { color: PALETTE.error, bold: true, children: `${counts.breaking} breaking` })
+  return /* @__PURE__ */ jsxs41(Box40, { children: [
+    /* @__PURE__ */ jsx48(Text44, { children: "Preview: " }),
+    /* @__PURE__ */ jsx48(Text44, { color: PALETTE.success, children: `${counts.new} new` }),
+    /* @__PURE__ */ jsx48(Text44, { children: " \xB7 " }),
+    /* @__PURE__ */ jsx48(Text44, { color: PALETTE.warning, children: `${counts.changed} changed` }),
+    /* @__PURE__ */ jsx48(Text44, { children: " \xB7 " }),
+    /* @__PURE__ */ jsx48(Text44, { dimColor: true, children: `${counts.removed} removed` }),
+    showRemovedListHint && removedCount > 0 && /* @__PURE__ */ jsx48(Text44, { dimColor: true, children: " ([d] removed list)" }),
+    /* @__PURE__ */ jsx48(Text44, { children: " \xB7 " }),
+    /* @__PURE__ */ jsx48(Text44, { color: PALETTE.error, bold: true, children: `${counts.breaking} breaking` })
   ] });
 }
 var init_LivePreviewSummary = __esm({
@@ -25146,10 +25085,10 @@ var init_LivePreviewSummary = __esm({
 });
 
 // packages/experience-design-system-cli/src/import/tui/steps/GenerateReviewStep.tsx
-import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo4, useRef as useRef9, useState as useState22 } from "react";
-import figures7 from "figures";
-import { Box as Box42, Text as Text47, useStdout as useStdout2 } from "ink";
-import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useRef as useRef9, useState as useState22 } from "react";
+import figures6 from "figures";
+import { Box as Box41, Text as Text45 } from "ink";
+import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
 function sortComponentsForSidebar(components, cycleParticipants) {
   const isEmpty2 = (entry) => Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
   const tier = (c2) => {
@@ -25190,13 +25129,66 @@ function CyclePathLine({
   highlightComponents = false,
   highlightLine = false
 }) {
-  return /* @__PURE__ */ jsxs44(Text47, { color: highlightLine ? PALETTE.warning : void 0, children: [
+  return /* @__PURE__ */ jsxs42(Text45, { color: highlightLine ? PALETTE.warning : void 0, children: [
     prefix,
     segments.map(
-      (segment, index) => segment.kind === "slot" ? /* @__PURE__ */ jsx51(Text47, { color: PALETTE.info, children: segment.text }, index) : segment.kind === "arrow" ? /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: segment.text }, index) : /* @__PURE__ */ jsx51(Text47, { color: highlightComponents ? PALETTE.warning : void 0, children: segment.text }, index)
+      (segment, index) => segment.kind === "slot" ? /* @__PURE__ */ jsx49(Text45, { color: PALETTE.info, children: segment.text }, index) : segment.kind === "arrow" ? /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: segment.text }, index) : /* @__PURE__ */ jsx49(Text45, { color: highlightComponents ? PALETTE.warning : void 0, children: segment.text }, index)
     )
   ] });
 }
+function CycleDetailPanel({
+  cycles,
+  cursor,
+  scrollOffset,
+  width,
+  height
+}) {
+  const lines = [
+    /* @__PURE__ */ jsx49(Text45, { bold: true, color: PALETTE.warning, children: `SLOT DEPENDENCY CYCLES (${cycles.length})` }, "cyc-title"),
+    /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: "push will fail until these are resolved" }, "cyc-sub"),
+    /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: "Reject a cycle member or remove a slot edge to break the cycle." }, "cyc-guidance"),
+    /* @__PURE__ */ jsx49(Text45, { children: " " }, "cyc-space")
+  ];
+  cycles.forEach((cycle, index) => {
+    const nodeCount = new Set(cycle.path).size;
+    const isCursor = index === cursor;
+    lines.push(
+      /* @__PURE__ */ jsx49(Text45, { bold: true, inverse: isCursor, children: `${isCursor ? figures6.pointer : " "} Cycle ${index + 1} (${nodeCount} component${nodeCount === 1 ? "" : "s"}):` }, `cyc-h-${index}`),
+      /* @__PURE__ */ jsx49(CyclePathLine, { segments: formatCyclePathSegments(cycle, 16), prefix: "    " }, `cyc-p-${index}`)
+    );
+    if (cycle.suggestedBreak) {
+      lines.push(
+        /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: `    Suggested fix: remove [${cycle.suggestedBreak.slotName}] from ${cycle.suggestedBreak.fromComponent}` }, `cyc-fix-${index}`)
+      );
+    }
+    lines.push(/* @__PURE__ */ jsx49(Text45, { children: " " }, `cyc-s-${index}`));
+  });
+  const footer = "[\u2191\u2193] move  [Enter] fix cycle  [c/q/Esc] close";
+  const viewportHeight = Math.max(1, height - 3);
+  const visible = lines.slice(scrollOffset, scrollOffset + viewportHeight - 1);
+  return /* @__PURE__ */ jsxs42(FixedPanel, { width, height, borderStyle: "round", borderColor: PALETTE.warning, paddingLeft: 1, children: [
+    visible,
+    /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: footer })
+  ] });
+}
+function BreakCyclePanel({
+  cycle,
+  edges,
+  cursor,
+  confirming,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsxs42(FixedPanel, { width, height, borderStyle: "round", borderColor: PALETTE.warning, paddingLeft: 1, children: [
+    /* @__PURE__ */ jsx49(Text45, { bold: true, color: PALETTE.warning, children: "BREAK CYCLE \u2014 remove a slot edge" }),
+    cycle && /* @__PURE__ */ jsx49(CyclePathLine, { segments: formatCyclePathSegments(cycle), prefix: "  ", highlightComponents: true }),
+    /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: cycle ? "Deleting an edge removes it from $allowedComponents (undo with Ctrl+Z)." : "No cycle highlighted." }),
+    /* @__PURE__ */ jsx49(Text45, { children: " " }),
+    edges.length > 0 && /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: "remove slot edge:" }),
+    edges.map((edge, index) => /* @__PURE__ */ jsx49(Text45, { inverse: index === cursor, children: `${index === cursor ? figures6.pointer : " "} remove '${edge.toComponent}' from ${edge.fromComponent}.$slots.${edge.slotName}.$allowedComponents` }, `${edge.fromComponent}-${edge.slotName}-${edge.toComponent}`)),
+    confirming ? /* @__PURE__ */ jsx49(Text45, { bold: true, color: PALETTE.warning, children: "Delete this slot edge? [y] confirm  [n] cancel" }) : /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: "[\u2191\u2193] move  [Enter] delete  [x/Esc] close" })
+  ] });
+}
 function buildBreakingRows(breakingChanges) {
   const out = [];
   for (const b of breakingChanges) {
@@ -25240,9 +25232,9 @@ function deriveBreakingChanges(response) {
 }
 function GenerateReviewStep(props) {
   if (!props.extractSessionId) {
-    return /* @__PURE__ */ jsx51(Box42, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx51(Text47, { color: PALETTE.error, children: "Error: no session ID \u2014 cannot load generated definitions." }) });
+    return /* @__PURE__ */ jsx49(Box41, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx49(Text45, { color: PALETTE.error, children: "Error: no session ID \u2014 cannot load generated definitions." }) });
   }
-  return /* @__PURE__ */ jsx51(GenerateReviewStepView, { ...props, extractSessionId: props.extractSessionId });
+  return /* @__PURE__ */ jsx49(GenerateReviewStepView, { ...props, extractSessionId: props.extractSessionId });
 }
 function GenerateReviewStepView({
   extractSessionId,
@@ -25257,8 +25249,7 @@ function GenerateReviewStepView({
   tokensPath = "",
   initialFinalizeError = null
 }) {
-  const { stdout } = useStdout2();
-  const terminalWidth = stdout?.columns ?? 80;
+  const { columns: terminalWidth, rows: terminalRows } = useTerminalSize();
   const [slotCycles, setSlotCycles] = useState22([]);
   const setLoadedSlotCycles = useCallback6((cycles) => {
     setSlotCycles(cycles ?? []);
@@ -25345,8 +25336,6 @@ function GenerateReviewStepView({
     showHelp,
     setShowHelp
   } = useSidebarSearchState();
-  const lineagePanel = useOverlayPanel({ toggleKey: "l" });
-  const [lineageCursor, setLineageCursor] = useState22(0);
   const breakingPanel = useOverlayPanel({ toggleKey: "b", onClose: () => setBreakingDetailOpen(false) });
   const [breakingChanges, setBreakingChanges] = useState22([]);
   const [breakingCursor, setBreakingCursor] = useState22(0);
@@ -25355,10 +25344,6 @@ function GenerateReviewStepView({
   const [autoRejected, setAutoRejected] = useState22([]);
   const [undoSnapshot, setUndoSnapshot] = useState22(null);
   const autoRejectFiredRef = useRef9(false);
-  const [editorDirty, setEditorDirty] = useState22(false);
-  const [showUnsavedWarning, setShowUnsavedWarning] = useState22(false);
-  const [pendingFocusAway, setPendingFocusAway] = useState22(null);
-  const [discardTrigger, setDiscardTrigger] = useState22(0);
   const [showReloadDialog, setShowReloadDialog] = useState22(false);
   const acceptedCountForPreview = components.filter((c2) => c2.status === "accepted").length;
   const { previewAnnotations, removedComponents, livePreviewHook, livePreviewSpinner } = useReviewPreview({
@@ -25415,13 +25400,13 @@ function GenerateReviewStepView({
     } catch {
     }
   };
-  const componentGraph = useMemo4(() => buildComponentGraph(components), [components]);
-  const sidebarGraph = useMemo4(
+  const componentGraph = useMemo3(() => buildComponentGraph(components), [components]);
+  const sidebarGraph = useMemo3(
     () => buildComponentGraph(components, { stripRejectedEdges: true }),
     [components]
   );
-  const closures = useMemo4(() => computeAllClosures(componentGraph), [componentGraph]);
-  useEffect13(() => {
+  const closures = useMemo3(() => computeAllClosures(componentGraph), [componentGraph]);
+  useEffect14(() => {
     if (seededGroupsRef.current) return;
     if (closures.size === 0 && slotCycles.length === 0) return;
     seededGroupsRef.current = true;
@@ -25432,15 +25417,23 @@ function GenerateReviewStepView({
       )
     );
   }, [closures, slotCycles]);
-  const directIssues = useMemo4(() => {
+  const directIssues = useMemo3(() => {
     const m = /* @__PURE__ */ new Map();
     for (const c2 of components) {
       if (c2.status === "rejected") m.set(c2.key, "error");
     }
     return m;
   }, [components]);
-  const cycleView = useMemo4(() => computeCycleView(components), [components]);
-  useEffect13(() => {
+  const cycleView = useMemo3(() => computeCycleView(components), [components]);
+  const cycleRows = useMemo3(() => {
+    if (slotCycles.length > 0) return slotCycles;
+    return cycleView.pushBlocking.map((cycle) => ({
+      path: cycle.path,
+      edges: cycle.edges,
+      suggestedBreak: cycle.edges.length > 0 ? suggestCycleBreakEdge(cycle, cycleView.pushBlocking) : null
+    }));
+  }, [slotCycles, cycleView]);
+  useEffect14(() => {
     const decision = computeAutoRejectDecision({
       loading,
       autoRejectFired: autoRejectFiredRef.current,
@@ -25484,7 +25477,7 @@ function GenerateReviewStepView({
     applySnapshot: applyHistorySnapshot
   });
   const autoRejectPushedRef = useRef9(false);
-  useEffect13(() => {
+  useEffect14(() => {
     if (loading) return;
     if (!historySeededRef.current) return;
     if (!autoRejectFiredRef.current) return;
@@ -25510,7 +25503,7 @@ function GenerateReviewStepView({
     reviewEditor.setSaveError(null);
     setFinalizeError(null);
   };
-  const groupedItemsMemo = useMemo4(
+  const groupedItemsMemo = useMemo3(
     () => components.map((c2) => ({
       key: c2.key,
       entry: c2.entry,
@@ -25518,12 +25511,12 @@ function GenerateReviewStepView({
     })),
     [components, directIssues]
   );
-  const brokenKeys = useMemo4(
+  const brokenKeys = useMemo3(
     () => new Set(breakingChanges.map((b) => b.componentName)),
     [breakingChanges]
   );
-  const breakingRows = useMemo4(() => buildBreakingRows(breakingChanges), [breakingChanges]);
-  const filterVisibleKeys = useMemo4(() => {
+  const breakingRows = useMemo3(() => buildBreakingRows(breakingChanges), [breakingChanges]);
+  const filterVisibleKeys = useMemo3(() => {
     if (jumpFilterTarget) {
       return findAllAncestors2(jumpFilterTarget, sidebarGraph);
     }
@@ -25539,7 +25532,7 @@ function GenerateReviewStepView({
     })();
     return intersectFilterKeys(categoryKeys, searchKeys);
   }, [jumpFilterTarget, activeFilters, cycleView, brokenKeys, searchQuery, groupedItemsMemo, sidebarGraph]);
-  const visibleRowsMemo = useMemo4(
+  const visibleRowsMemo = useMemo3(
     () => buildVisibleRows({
       items: groupedItemsMemo,
       cycleParticipants: cycleView.structural,
@@ -25550,7 +25543,7 @@ function GenerateReviewStepView({
     }),
     [groupedItemsMemo, cycleView, expandedGroups, columnOneView, sidebarGraph, filterVisibleKeys]
   );
-  const selectableRowPositions = useMemo4(() => {
+  const selectableRowPositions = useMemo3(() => {
     const out = [];
     for (let i = 0; i < visibleRowsMemo.length; i++) {
       if (visibleRowsMemo[i].itemIdx >= 0) out.push(i);
@@ -25559,13 +25552,16 @@ function GenerateReviewStepView({
   }, [visibleRowsMemo]);
   const selectedIdx = visibleRowsMemo[cursorRowIdx]?.itemIdx ?? -1;
   const focusedComponentKey = components[selectedIdx]?.key ?? null;
-  const { entries: lineageEntries, jumpables: lineageJumpables } = useLineage(focusedComponentKey, componentGraph);
   const { sidebarVisibleCount: visibleCount, panelMaxRows } = computeSidebarBudget({
-    rows: stdout?.rows ?? FALLBACK_ROWS,
-    panelOpen: lineagePanel.isOpen,
-    entryCount: lineageEntries.length
+    rows: terminalRows || FALLBACK_ROWS,
+    panelOpen: false,
+    entryCount: 0
   });
-  useEffect13(() => {
+  const leftPanelHeight = visibleCount + 4;
+  const panelHeight = leftPanelHeight + 2;
+  const panelContentHeight = Math.max(1, panelHeight - 3);
+  const cycleViewportHeight = Math.max(1, panelHeight - 4);
+  useEffect14(() => {
     if (selectableRowPositions.length === 0) return;
     const cursorInRange = selectableRowPositions.includes(cursorRowIdx);
     const maxScroll = Math.max(0, visibleRowsMemo.length - visibleCount);
@@ -25596,7 +25592,7 @@ function GenerateReviewStepView({
     selectedIdx,
     extractSessionId
   });
-  const renderStatusByKey = useMemo4(() => {
+  const renderStatusByKey = useMemo3(() => {
     const merged = /* @__PURE__ */ new Map();
     for (const closure of closures.values()) {
       const per = computeRenderStatuses(closure, directIssues);
@@ -25609,7 +25605,7 @@ function GenerateReviewStepView({
     }
     return merged;
   }, [closures, directIssues]);
-  const selectionStateByKey = useMemo4(() => {
+  const selectionStateByKey = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     for (const c2 of components) {
       if (c2.status === "accepted") map.set(c2.key, "accepted");
@@ -25618,7 +25614,7 @@ function GenerateReviewStepView({
     }
     return map;
   }, [components]);
-  const searchMatches = useMemo4(() => {
+  const searchMatches = useMemo3(() => {
     if (!searchQuery) return [];
     const out = [];
     for (const pos of selectableRowPositions) {
@@ -25628,7 +25624,7 @@ function GenerateReviewStepView({
     }
     return out;
   }, [searchQuery, selectableRowPositions, visibleRowsMemo, components]);
-  const searchMatchCount = useMemo4(() => {
+  const searchMatchCount = useMemo3(() => {
     if (searchMatches.length === 0) return 0;
     const seen = /* @__PURE__ */ new Set();
     for (const pos of searchMatches) {
@@ -25637,7 +25633,7 @@ function GenerateReviewStepView({
     }
     return seen.size;
   }, [searchMatches, visibleRowsMemo]);
-  const dimPredicate = useMemo4(
+  const dimPredicate = useMemo3(
     () => buildFlatDimPredicate({
       viewMode: columnOneView,
       searchQuery,
@@ -25654,7 +25650,7 @@ function GenerateReviewStepView({
       return { cursorRowIdx: rowIdx, sidebarScrollOffset: nextOff };
     });
     reviewEditor.setJsonScrollOffset(0);
-    reviewEditor.setDraftValue("");
+    reviewEditor.handleEditSave();
     reviewEditor.setSaveError(null);
     setPendingEditorFocus(null);
   };
@@ -25668,26 +25664,27 @@ function GenerateReviewStepView({
       }
     }
   };
-  const breakEdges = useMemo4(() => {
-    const cycle = slotCycles[cyclesCursor];
-    if (!cycle) return [];
-    return enumerateCycleBreaks(cycle, components);
-  }, [slotCycles, cyclesCursor, components]);
+  const breakEdges = useMemo3(() => {
+    const cycle = cycleRows[cyclesCursor];
+    return cycle ? enumerateCycleBreaks(cycle, components) : [];
+  }, [cycleRows, cyclesCursor, components]);
   const handleBreakEdge = (edge) => {
-    const idx = components.findIndex((c2) => c2.key === edge.fromComponent);
-    if (idx < 0) return;
-    const target = components[idx];
-    const slot = target.entry.$slots?.[edge.slotName];
-    if (!slot || !Array.isArray(slot.$allowedComponents)) return;
-    const nextAllowed = slot.$allowedComponents.filter((v) => v !== edge.toComponent);
+    const target = components.find((component) => component.key === edge.fromComponent);
+    const slot = target?.entry.$slots?.[edge.slotName];
+    if (!target || !slot || !Array.isArray(slot.$allowedComponents)) return;
     const nextEntry = {
       ...target.entry,
       $slots: {
         ...target.entry.$slots,
-        [edge.slotName]: { ...slot, $allowedComponents: nextAllowed }
+        [edge.slotName]: {
+          ...slot,
+          $allowedComponents: slot.$allowedComponents.filter((value) => value !== edge.toComponent)
+        }
       }
     };
-    const next = components.map((c2, i) => i === idx ? { ...c2, entry: nextEntry } : c2);
+    const next = components.map(
+      (component) => component.key === target.key ? { ...component, entry: nextEntry } : component
+    );
     setComponents(next);
     const db = openPipelineDb();
     try {
@@ -25717,6 +25714,14 @@ function GenerateReviewStepView({
   };
   const dialogOpen = showFinalize || showQuit;
   useImmediateInput((input, key) => {
+    if (showHelp) {
+      if (input === "h") {
+        setShowHelp((open) => !open);
+      } else if (key.escape) {
+        setShowHelp(false);
+      }
+      return;
+    }
     if (handleReviewOverlayInput(input, key, {
       loading,
       loadError,
@@ -25732,25 +25737,6 @@ function GenerateReviewStepView({
       handleRedo
     }))
       return;
-    if (showUnsavedWarning) {
-      if (key.return) {
-        reviewEditor.handleEditSave();
-        setShowUnsavedWarning(false);
-        if (pendingFocusAway === "tab-to-sidebar") setSidebarFocused(true);
-        setPendingFocusAway(null);
-        return;
-      }
-      if (key.escape) {
-        setDiscardTrigger((n) => n + 1);
-        setShowUnsavedWarning(false);
-        if (pendingFocusAway === "tab-to-sidebar") setSidebarFocused(true);
-        setPendingFocusAway(null);
-        return;
-      }
-      setShowUnsavedWarning(false);
-      setPendingFocusAway(null);
-      return;
-    }
     if (searchOpen) {
       if (key.escape) {
         setSearchOpen(false);
@@ -25821,21 +25807,6 @@ function GenerateReviewStepView({
       }
       return;
     }
-    if (lineagePanel.isOpen) {
-      if (lineagePanel.handleInput(input, key)) return;
-      if (handleLineageNavigation({
-        input,
-        key,
-        cursor: lineageCursor,
-        jumpables: lineageJumpables,
-        onCursorChange: setLineageCursor,
-        onJump: jumpCursorToName,
-        onClose: lineagePanel.close,
-        allowTab: true
-      }))
-        return;
-      return;
-    }
     if (breakPanel.isOpen) {
       if (breakConfirm) {
         if (input === "y") {
@@ -25843,6 +25814,7 @@ function GenerateReviewStepView({
           if (edge) handleBreakEdge(edge);
           setBreakConfirm(false);
           breakPanel.close();
+          cyclePanel.close();
           return;
         }
         if (input === "n" || key.escape) {
@@ -25852,12 +25824,12 @@ function GenerateReviewStepView({
         return;
       }
       if (breakPanel.handleInput(input, key)) return;
-      if (key.upArrow || input === "k") {
-        setBreakCursor((c2) => Math.max(0, c2 - 1));
+      if (key.upArrow) {
+        setBreakCursor((cursor) => Math.max(0, cursor - 1));
         return;
       }
-      if (key.downArrow || input === "j") {
-        setBreakCursor((c2) => Math.min(Math.max(0, breakEdges.length - 1), c2 + 1));
+      if (key.downArrow) {
+        setBreakCursor((cursor) => Math.min(Math.max(0, breakEdges.length - 1), cursor + 1));
         return;
       }
       if (key.return) {
@@ -25881,48 +25853,41 @@ function GenerateReviewStepView({
       if (key.upArrow || input === "k") {
         setCyclesCursor((c2) => {
           const next = Math.max(0, c2 - 1);
-          setCyclePanelScroll((scroll) => followCycleScroll(scroll, next, slotCycles, 20));
+          setCyclePanelScroll((scroll) => followCycleScroll(scroll, next, cycleRows, cycleViewportHeight));
           return next;
         });
         return;
       }
       if (key.downArrow || input === "j") {
         setCyclesCursor((c2) => {
-          const next = Math.min(Math.max(0, slotCycles.length - 1), c2 + 1);
-          setCyclePanelScroll((scroll) => followCycleScroll(scroll, next, slotCycles, 20));
+          const next = Math.min(Math.max(0, cycleRows.length - 1), c2 + 1);
+          setCyclePanelScroll((scroll) => followCycleScroll(scroll, next, cycleRows, cycleViewportHeight));
           return next;
         });
         return;
       }
       if (key.return) {
-        const target = slotCycles[cyclesCursor];
-        if (target && target.path.length > 0) jumpCursorToName(target.path[0]);
-        cyclePanel.close();
+        if (breakEdges.length > 0) {
+          breakPanel.open();
+          setBreakCursor(0);
+          setBreakConfirm(false);
+        }
         return;
       }
       return;
     }
-    if (input === "c" && sidebarFocused && slotCycles.length > 0) {
+    if (input === "c" && cycleRows.length > 0) {
       cyclePanel.open();
       setCyclePanelScroll(0);
       setCyclesCursor(0);
       return;
     }
-    if (input === "l" && sidebarFocused && focusedComponentKey) {
-      lineagePanel.open();
-      setLineageCursor(0);
-      return;
-    }
     if (input === "b" && sidebarFocused && breakingChanges.length > 0) {
       breakingPanel.open();
       setBreakingCursor(0);
       return;
     }
-    if (input === "d" && sidebarFocused && removedComponents.length > 0) {
-      setRemovedBannerCollapsed((prev) => !prev);
-      return;
-    }
-    if (sidebarFocused && (input === "o" || input === "w")) {
+    if (input === "o" || input === "w") {
       const category = input === "o" ? "cycles" : "broken";
       setActiveFilters((prev) => {
         const next = new Set(prev);
@@ -25939,9 +25904,9 @@ function GenerateReviewStepView({
     }
     if (handleReviewPanelShortcuts(input, key, { ...reviewEditor, propKey: "p", componentKey: "P" })) return;
     if (key.tab) {
-      if (!sidebarFocused && editorDirty) {
-        setPendingFocusAway("tab-to-sidebar");
-        setShowUnsavedWarning(true);
+      if (!sidebarFocused) {
+        reviewEditor.handleEditSave();
+        setSidebarFocused(true);
         return;
       }
       setSidebarFocused((prev) => !prev);
@@ -25965,9 +25930,25 @@ function GenerateReviewStepView({
       sidebarFocused,
       showJson: reviewEditor.showJson,
       jsonValue: getReviewJsonPanelValue(components[selectedIdx] ?? null, reviewEditor.showHiddenProps),
-      height: PANEL_HEIGHT
+      height: panelContentHeight
     }))
       return;
+    if (sidebarFocused && (input === "j" || input === "k")) {
+      setNav(
+        ({ cursorRowIdx: previousRow, sidebarScrollOffset: previousScroll }) => moveSelectableCursor({
+          direction: input === "j" ? "down" : "up",
+          previousRow,
+          previousScroll,
+          positions: selectableRowPositions,
+          visibleCount
+        })
+      );
+      reviewEditor.setJsonScrollOffset(0);
+      reviewEditor.handleEditSave();
+      reviewEditor.setSaveError(null);
+      setPendingEditorFocus(null);
+      return;
+    }
     if (!sidebarFocused) return;
     if (input === "/") {
       setSearchOpen(true);
@@ -25982,7 +25963,7 @@ function GenerateReviewStepView({
       setAutocompleteCandidates([]);
       return;
     }
-    if (input === "?") {
+    if (input === "h") {
       setShowHelp(true);
       return;
     }
@@ -26079,7 +26060,7 @@ function GenerateReviewStepView({
       }
       return;
     }
-    if (key.upArrow || input === "k") {
+    if (key.upArrow) {
       setNav(
         ({ cursorRowIdx: previousRow, sidebarScrollOffset: previousScroll }) => moveSelectableCursor({
           direction: "up",
@@ -26090,10 +26071,10 @@ function GenerateReviewStepView({
         })
       );
       reviewEditor.setJsonScrollOffset(0);
-      reviewEditor.setDraftValue("");
+      reviewEditor.handleEditSave();
       reviewEditor.setSaveError(null);
       setPendingEditorFocus(null);
-    } else if (key.downArrow || input === "j") {
+    } else if (key.downArrow) {
       setNav(
         ({ cursorRowIdx: previousRow, sidebarScrollOffset: previousScroll }) => moveSelectableCursor({
           direction: "down",
@@ -26104,44 +26085,19 @@ function GenerateReviewStepView({
         })
       );
       reviewEditor.setJsonScrollOffset(0);
-      reviewEditor.setDraftValue("");
+      reviewEditor.handleEditSave();
       reviewEditor.setSaveError(null);
       setPendingEditorFocus(null);
     }
   });
   if (loading) {
-    return /* @__PURE__ */ jsx51(ReviewLoadingState, {});
+    return /* @__PURE__ */ jsx49(ReviewLoadingState, {});
   }
   if (loadError) {
-    return /* @__PURE__ */ jsx51(ReviewLoadError, { message: loadError });
+    return /* @__PURE__ */ jsx49(ReviewLoadError, { message: loadError });
   }
   if (showHelp) {
-    return /* @__PURE__ */ jsx51(HelpOverlay, { sections: HELP_SECTIONS2, onClose: () => setShowHelp(false) });
-  }
-  const renderBreakOverlay = (width) => {
-    const highlightedCycle = slotCycles[cyclesCursor];
-    return /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, width, children: [
-      /* @__PURE__ */ jsx51(Text47, { bold: true, color: PALETTE.warning, children: `BREAK CYCLE ${cyclesCursor + 1} \u2014 remove a slot edge or reject a member` }),
-      highlightedCycle && /* @__PURE__ */ jsx51(CyclePathLine, { segments: formatCyclePathSegments(highlightedCycle), prefix: "  ", highlightComponents: true }),
-      /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: highlightedCycle ? "Deleting an edge removes it from $allowedComponents (undo with Ctrl+Z)." : "No cycle highlighted." }),
-      /* @__PURE__ */ jsx51(Text47, { children: " " }),
-      breakEdges.length > 0 && /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "remove slot edge:" }),
-      breakEdges.map((edge, idx) => {
-        const isCursor = idx === breakCursor;
-        return /* @__PURE__ */ jsx51(Text47, { inverse: isCursor, children: `${isCursor ? figures7.pointer : " "} remove '${edge.toComponent}' from ${edge.fromComponent}.$slots.${edge.slotName}.$allowedComponents` }, `break-${idx}`);
-      }),
-      breakConfirm ? /* @__PURE__ */ jsxs44(Fragment18, { children: [
-        /* @__PURE__ */ jsx51(Text47, { children: " " }),
-        /* @__PURE__ */ jsx51(Text47, { bold: true, color: PALETTE.warning, children: "Delete this slot edge? [y] confirm  [n] cancel" })
-      ] }) : /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "[\u2191\u2193/j/k] move  [Enter] delete  [x/Esc] close" })
-    ] });
-  };
-  const breakOverlayFullScreen = breakPanel.isOpen && shouldBreakOverlayGoFullScreen({
-    rows: stdout?.rows ?? FALLBACK_ROWS,
-    edgeCount: breakEdges.length
-  });
-  if (breakOverlayFullScreen) {
-    return renderBreakOverlay();
+    return /* @__PURE__ */ jsx49(HelpOverlay, { sections: HELP_SECTIONS2, handleInput: false, onClose: () => setShowHelp(false) });
   }
   const { selected, selectedJson, visibleJsonPanelValue } = getReviewSelectionState(
     components,
@@ -26163,9 +26119,13 @@ function GenerateReviewStepView({
     const groupOverhead = 12;
     return Math.max(m, c2.key.length + Math.max(suffixLen, groupOverhead));
   }, 0);
-  const sidebarWidthCap = computeSidebarWidth(terminalWidth);
+  const minimumPanelWidth = Math.min(24, Math.max(10, terminalWidth - 16));
+  const sidebarWidthCap = Math.min(
+    computeSidebarWidth(terminalWidth),
+    Math.max(10, terminalWidth - minimumPanelWidth - 4)
+  );
   const sidebarWidth = Math.min(Math.max(longestName + 9, 18), sidebarWidthCap);
-  const panelWidth = Math.max(10, terminalWidth - sidebarWidth - 4);
+  const panelWidth = Math.max(minimumPanelWidth, terminalWidth - sidebarWidth - 4);
   const projectSlotGraph = components.map((c2) => ({
     name: c2.key,
     slots: Object.entries(c2.entry.$slots ?? {}).map(([slotName, slotDef]) => ({
@@ -26177,8 +26137,8 @@ function GenerateReviewStepView({
     for (const c2 of closures.values()) if (c2.nodes.length > 1) return true;
     return false;
   })();
-  return /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx49(
       ReviewStepDialogs,
       {
         surfaceState: reviewSurface,
@@ -26188,24 +26148,16 @@ function GenerateReviewStepView({
         onQuit
       }
     ),
-    showUnsavedWarning && !dialogOpen && /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-      /* @__PURE__ */ jsx51(Text47, { bold: true, color: PALETTE.warning, children: "Unsaved changes" }),
-      /* @__PURE__ */ jsx51(Text47, { children: "You have unsaved edits in the current field editor." }),
-      /* @__PURE__ */ jsx51(Text47, { children: " " }),
-      /* @__PURE__ */ jsx51(Text47, { children: "  [Enter]  Save and continue" }),
-      /* @__PURE__ */ jsx51(Text47, { children: "  [Esc]    Discard changes and continue" }),
-      /* @__PURE__ */ jsx51(Text47, { children: "  [Tab]    Stay in the panel" })
-    ] }),
-    /* @__PURE__ */ jsx51(ReviewReloadDialog, { open: showReloadDialog && !dialogOpen }),
-    removedComponents.length > 0 && !dialogOpen && /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [
-      /* @__PURE__ */ jsx51(Text47, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removedComponents.length, true) }),
-      !removedBannerCollapsed && /* @__PURE__ */ jsxs44(Fragment18, { children: [
-        /* @__PURE__ */ jsx51(Text47, { children: " " }),
-        removedComponents.map((rc) => /* @__PURE__ */ jsx51(Text47, { children: removedComponentLine(rc) }, rc.id))
+    /* @__PURE__ */ jsx49(ReviewReloadDialog, { open: showReloadDialog && !dialogOpen }),
+    removedComponents.length > 0 && !dialogOpen && /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [
+      /* @__PURE__ */ jsx49(Text45, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removedComponents.length, true) }),
+      !removedBannerCollapsed && /* @__PURE__ */ jsxs42(Fragment18, { children: [
+        /* @__PURE__ */ jsx49(Text45, { children: " " }),
+        removedComponents.map((rc) => /* @__PURE__ */ jsx49(Text45, { children: removedComponentLine(rc) }, rc.id))
       ] })
     ] }),
-    breakingChanges.length > 0 && !dialogOpen && /* @__PURE__ */ jsx51(Box42, { paddingX: 1, children: /* @__PURE__ */ jsx51(
-      Text47,
+    breakingChanges.length > 0 && !dialogOpen && /* @__PURE__ */ jsx49(Box41, { paddingX: 1, children: /* @__PURE__ */ jsx49(
+      Text45,
       {
         color: PALETTE.warning,
         children: `[b] ${breakingChanges.length} breaking change${breakingChanges.length === 1 ? "" : "s"}`
@@ -26215,58 +26167,14 @@ function GenerateReviewStepView({
       const row = breakingRows[breakingCursor];
       const comp = row ? breakingChanges.find((b) => b.componentName === row.componentName) : void 0;
       if (!comp) return null;
-      return /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-        /* @__PURE__ */ jsx51(Text47, { bold: true, color: PALETTE.warning, children: `Breaking changes \u2014 ${comp.componentName}` }),
-        comp.impact && /* @__PURE__ */ jsx51(Text47, { 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__ */ jsx51(Text47, { dimColor: true, children: "  (no enumerated changes)" }) : comp.changes.map((change, ci) => /* @__PURE__ */ jsx51(Text47, { children: `  \u2022 ${formatBreakingChange(change, comp.current)}` }, `bd-detail-${ci}`)),
-        /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "[D/Esc] close detail" })
+      return /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+        /* @__PURE__ */ jsx49(Text45, { bold: true, color: PALETTE.warning, children: `Breaking changes \u2014 ${comp.componentName}` }),
+        comp.impact && /* @__PURE__ */ jsx49(Text45, { 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__ */ jsx49(Text45, { dimColor: true, children: "  (no enumerated changes)" }) : comp.changes.map((change, ci) => /* @__PURE__ */ jsx49(Text45, { children: `  \u2022 ${formatBreakingChange(change, comp.current)}` }, `bd-detail-${ci}`)),
+        /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: "[D/Esc] close detail" })
       ] });
     })(),
-    cyclePanel.isOpen && !dialogOpen && (() => {
-      const PANEL_H = 20;
-      const lines = [];
-      lines.push(
-        /* @__PURE__ */ jsx51(Text47, { bold: true, color: PALETTE.warning, children: `SLOT DEPENDENCY CYCLES (${slotCycles.length})` }, "cyc-title")
-      );
-      lines.push(
-        /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "push will fail until these are resolved" }, "cyc-sub")
-      );
-      lines.push(
-        /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "To fix: reject a cycle member, or break the cycle by removing a slot edge." }, "cyc-guide")
-      );
-      lines.push(/* @__PURE__ */ jsx51(Text47, { children: " " }, "cyc-space"));
-      slotCycles.forEach((cycle, idx) => {
-        const nodeCount = new Set(cycle.path).size;
-        const isCursor = idx === cyclesCursor;
-        lines.push(
-          /* @__PURE__ */ jsx51(
-            Text47,
-            {
-              bold: true,
-              inverse: isCursor,
-              children: `${isCursor ? figures7.pointer : " "} Cycle ${idx + 1} (${nodeCount} component${nodeCount === 1 ? "" : "s"}):`
-            },
-            `cyc-h-${idx}`
-          )
-        );
-        lines.push(
-          /* @__PURE__ */ jsx51(CyclePathLine, { segments: formatCyclePathSegments(cycle, 16), prefix: "    " }, `cyc-p-${idx}`)
-        );
-        if (cycle.suggestedBreak) {
-          const b = cycle.suggestedBreak;
-          lines.push(
-            /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: `    Suggested fix: remove '${b.toComponent}' from ${b.fromComponent}.$slots.${b.slotName}.$allowedComponents` }, `cyc-f-${idx}`)
-          );
-        }
-        lines.push(/* @__PURE__ */ jsx51(Text47, { children: " " }, `cyc-s-${idx}`));
-      });
-      const visible = lines.slice(cyclePanelScroll, cyclePanelScroll + PANEL_H);
-      return /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
-        visible,
-        /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "[\u2191\u2193/j/k] move  [Enter] jump  [x] break cycle  [c/q/Esc] close" })
-      ] });
-    })(),
-    !dialogOpen && /* @__PURE__ */ jsx51(
+    !dialogOpen && /* @__PURE__ */ jsx49(
       LivePreviewSummary,
       {
         enabled: livePreview,
@@ -26285,20 +26193,41 @@ function GenerateReviewStepView({
       const participantSet = cycleView.structural;
       const members = stillRejected.filter((n) => participantSet.has(n)).sort();
       const ancestors = stillRejected.filter((n) => !participantSet.has(n)).sort();
-      return /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [
-        /* @__PURE__ */ jsx51(Text47, { color: PALETTE.error, bold: true, children: `Cyclic component graph \u2014 auto-rejected ${stillRejected.length} component${stillRejected.length === 1 ? "" : "s"}:` }),
-        members.length > 0 && /* @__PURE__ */ jsx51(Text47, { color: PALETTE.error, children: `  Cycle members: ${members.join(", ")}` }),
-        ancestors.length > 0 && /* @__PURE__ */ jsx51(Text47, { color: PALETTE.error, children: `  Ancestors: ${ancestors.join(", ")}` }),
-        /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: undoSnapshot ? "  [Ctrl+Z] undo \xB7 [r]/[a] manually toggle \xB7 [F] continue" : "  [r]/[a] manually toggle \xB7 [F] continue" })
+      return /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [
+        /* @__PURE__ */ jsx49(Text45, { color: PALETTE.error, bold: true, children: `Cyclic component graph \u2014 auto-rejected ${stillRejected.length} component${stillRejected.length === 1 ? "" : "s"}:` }),
+        members.length > 0 && /* @__PURE__ */ jsx49(Text45, { color: PALETTE.error, children: `  Cycle members: ${members.join(", ")}` }),
+        ancestors.length > 0 && /* @__PURE__ */ jsx49(Text45, { color: PALETTE.error, children: `  Ancestors: ${ancestors.join(", ")}` }),
+        /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: undoSnapshot ? "  [Ctrl+Z] undo \xB7 [r]/[a] manually toggle \xB7 [F] continue" : "  [r]/[a] manually toggle \xB7 [F] continue" })
       ] });
     })(),
-    /* @__PURE__ */ jsx51(ReviewEmptyComponentsWarning, { count: emptyCount, hidden: dialogOpen }),
-    /* @__PURE__ */ jsx51(ReviewFinalizeError, { message: finalizeError, hidden: dialogOpen }),
-    !dialogOpen && /* @__PURE__ */ jsxs44(Box42, { children: [
-      breakingPanel.isOpen ? /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx49(ReviewEmptyComponentsWarning, { count: emptyCount, hidden: dialogOpen }),
+    /* @__PURE__ */ jsx49(ReviewFinalizeError, { message: finalizeError, hidden: dialogOpen }),
+    !dialogOpen && breakPanel.isOpen && /* @__PURE__ */ jsx49(
+      BreakCyclePanel,
+      {
+        cycle: cycleRows[cyclesCursor],
+        edges: breakEdges,
+        cursor: breakCursor,
+        confirming: breakConfirm,
+        width: Math.max(20, terminalWidth - 2),
+        height: panelHeight
+      }
+    ),
+    !dialogOpen && cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsx49(
+      CycleDetailPanel,
+      {
+        cycles: cycleRows,
+        cursor: cyclesCursor,
+        scrollOffset: cyclePanelScroll,
+        width: Math.max(20, terminalWidth - 2),
+        height: panelHeight
+      }
+    ),
+    !dialogOpen && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs42(Box41, { children: [
+      breakingPanel.isOpen ? /* @__PURE__ */ jsx49(
         GotoBanner,
         {
-          title: "Breaking changes",
+          title: `Breaking changes \u2014 ${breakingRows[breakingCursor]?.componentName ?? "unknown component"}`,
           rows: breakingRows.map((r) => ({
             label: r.label,
             jumpTarget: r.componentName
@@ -26308,17 +26237,7 @@ function GenerateReviewStepView({
           width: sidebarWidth,
           footerHint: "[\u2191/\u2193] move \xB7 [Enter] jump \xB7 [D] detail \xB7 [Esc] close"
         }
-      ) : lineagePanel.isOpen && focusedComponentKey ? /* @__PURE__ */ jsx51(
-        LineagePanel,
-        {
-          focusedComponentKey,
-          entries: lineageEntries,
-          cursor: lineageCursor,
-          jumpables: lineageJumpables,
-          maxRows: panelMaxRows,
-          width: sidebarWidth
-        }
-      ) : /* @__PURE__ */ jsx51(
+      ) : /* @__PURE__ */ jsx49(
         GroupedSidebar,
         {
           items: groupedItems,
@@ -26344,6 +26263,8 @@ function GenerateReviewStepView({
             });
           },
           width: sidebarWidth,
+          height: leftPanelHeight,
+          wrapLabels: true,
           focused: sidebarFocused,
           renderStatusByKey,
           previewAnnotationByKey,
@@ -26356,7 +26277,7 @@ function GenerateReviewStepView({
           graph: sidebarGraph
         }
       ),
-      selected ? /* @__PURE__ */ jsx51(
+      selected ? /* @__PURE__ */ jsx49(
         ReviewComponentPanel,
         {
           selectedKey: selected.key,
@@ -26365,31 +26286,36 @@ function GenerateReviewStepView({
           reviewMetadata,
           reviewEditor,
           width: panelWidth,
-          height: PANEL_HEIGHT,
+          height: panelHeight,
           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,
+            () => {
+              reviewEditor.handleEditSave();
+              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,
+              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__ */ jsx51(ReviewNoSelection, {})
+      ) : /* @__PURE__ */ jsx49(ReviewNoSelection, {})
     ] }),
-    breakPanel.isOpen && !breakOverlayFullScreen && !dialogOpen && renderBreakOverlay(),
-    !dialogOpen && slotCycles.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs44(Box42, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx51(Text47, { 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__ */ jsx51(
+    !dialogOpen && cycleRows.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx49(Text45, { color: PALETTE.warning, children: `\u26A0 ${cycleRows.length} slot dependency cycle${cycleRows.length === 1 ? "" : "s"} detected \u2014 push will fail` }),
+      cycleRows.slice(0, 3).map((cycle, idx) => {
+        return /* @__PURE__ */ jsx49(
           CyclePathLine,
           {
             segments: formatCyclePathSegments(cycle),
@@ -26400,10 +26326,10 @@ function GenerateReviewStepView({
           `cyc-banner-${idx}`
         );
       }),
-      slotCycles.length > 3 && /* @__PURE__ */ jsx51(Text47, { color: PALETTE.warning, children: `  \u2026${slotCycles.length - 3} more` }),
-      /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: "  press [c] for detail" })
+      cycleRows.length > 3 && /* @__PURE__ */ jsx49(Text45, { color: PALETTE.warning, children: `  \u2026${cycleRows.length - 3} more` }),
+      /* @__PURE__ */ jsx49(Text45, { dimColor: true, children: "  press [c] for detail" })
     ] }),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx49(
       SearchMatchSummary,
       {
         open: searchOpen,
@@ -26414,55 +26340,18 @@ function GenerateReviewStepView({
         hidden: dialogOpen
       }
     ),
-    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx51(Box42, { columnGap: 2, flexWrap: "wrap", children: reviewEditor.panelOpen === "token-review" ? /* @__PURE__ */ jsxs44(Fragment18, { children: [
-      legendEntry("[\u2191/\u2193]", "move"),
-      legendEntry("[Enter]", "edit allowed"),
-      legendEntry("[Esc]", "close")
-    ] }) : /* @__PURE__ */ jsxs44(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__ */ jsx51(
-      ReviewStatusBar,
+    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx49(
+      CompactControlBar,
       {
-        entries: components,
-        onApproveAll: () => {
-          setComponents((prev) => prev.map((c2) => c2.status === "needs-review" ? { ...c2, status: "accepted" } : c2));
-        },
-        onFinalize: () => setShowFinalize(true)
+        hasGroupRoots,
+        searchActive: searchOpen || searchQuery.length > 0,
+        showJson: reviewEditor.showJson,
+        tokenReviewAvailable: reviewEditor.currentTokenSuggestions().length > 0
       }
     )
   ] });
 }
-var PANEL_HEIGHT, HELP_SECTIONS2;
+var HELP_SECTIONS2;
 var init_GenerateReviewStep = __esm({
   "packages/experience-design-system-cli/src/import/tui/steps/GenerateReviewStep.tsx"() {
     "use strict";
@@ -26481,15 +26370,14 @@ var init_GenerateReviewStep = __esm({
     init_fuzzy_search();
     init_search_neighborhood();
     init_sidebar_width();
+    init_use_terminal_size();
     init_selection_cascade();
-    init_useLineage();
     init_cycle_auto_reject();
     init_useOverlayPanel();
-    init_LineagePanel();
     init_GotoBanner();
     init_lineage_layout();
     init_HelpOverlay();
-    init_LegendEntry();
+    init_CompactControlBar();
     init_auto_reject_decision();
     init_breaking_change_format();
     init_enumerate_cycle_breaks();
@@ -26498,9 +26386,9 @@ var init_GenerateReviewStep = __esm({
     init_sidebar_help();
     init_sidebar_input();
     init_sidebar_navigation();
-    init_lineage_input();
     init_sidebar_search_state();
     init_SearchMatchSummary();
+    init_windowed_panel();
     init_ReviewComponentPanel();
     init_ReviewStatus();
     init_useReviewSession();
@@ -26511,7 +26399,6 @@ var init_GenerateReviewStep = __esm({
     init_useReviewPreview();
     init_LivePreviewSummary();
     init_cycle_auto_reject();
-    PANEL_HEIGHT = 22;
     HELP_SECTIONS2 = [
       {
         title: "Navigation",
@@ -26535,19 +26422,14 @@ var init_GenerateReviewStep = __esm({
         title: "Panels",
         entries: [
           { keys: "c", label: "Cycle list" },
+          { keys: "b", label: "Breaking changes" },
+          { keys: "w", label: "Only breaking" },
+          { keys: "o", label: "Only cycles" },
           { 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." }
+          { keys: "J", label: "Toggle JSON" },
+          { keys: "t", label: "Token review" }
         ]
       },
       {
@@ -26562,10 +26444,17 @@ var init_GenerateReviewStep = __esm({
           { keys: "Ctrl+R", label: "Reload from save" }
         ]
       },
+      {
+        title: "Review",
+        entries: [
+          { keys: "Tab", label: "Focus panel" },
+          { keys: "Enter", label: "Edit selected field" }
+        ]
+      },
       {
         title: "General",
         entries: [
-          { keys: "?", label: "Close help" },
+          { keys: "h", label: "Close help" },
           { keys: "q", label: "Quit" }
         ]
       }
@@ -26826,8 +26715,8 @@ __export(WizardApp_exports, {
   parsePrintTokensCount: () => parsePrintTokensCount,
   shouldRunMapTokens: () => shouldRunMapTokens
 });
-import { useEffect as useEffect14, useRef as useRef10, useState as useState23 } from "react";
-import { Box as Box43, Text as Text48 } from "ink";
+import { useEffect as useEffect15, useRef as useRef10, useState as useState23 } from "react";
+import { Box as Box42, Text as Text46 } from "ink";
 import { join as join20, resolve as resolve17 } from "node:path";
 import { appendFileSync as appendFileSync2, writeFileSync } from "node:fs";
 import { access as access7, stat as stat5, writeFile as writeFile6 } from "node:fs/promises";
@@ -26835,7 +26724,7 @@ import { tmpdir } from "node:os";
 import { execFile as execFile2, spawn as spawn3 } from "node:child_process";
 import { mkdir as mkdir5 } from "node:fs/promises";
 import { buildCDF as buildCDF3, validateCDF as validateCDF3, validateSlotReferences as validateSlotReferences2 } from "@contentful/experience-design-system-types";
-import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
 function buildGenerateComponentsArgs(opts) {
   const args = ["__generate", "components", "--agent", opts.agent, "--session", opts.sessionId];
   if (opts.tokensPath) args.push("--tokens", opts.tokensPath);
@@ -27034,7 +26923,7 @@ function WizardApp({
     finalizeErrorBanner: null,
     finalReviewPassed: false
   });
-  useEffect14(() => {
+  useEffect15(() => {
     sessionRef.current = {
       extractSessionId: state.extractSessionId,
       tokensPath: state.tokensPath
@@ -27686,7 +27575,7 @@ Make sure this path contains TypeScript/React/Vue component files (.tsx, .ts, .v
       update({ credentialsValidating: false, credentialsBackgroundValidating: false, credentialsError: "" });
     }
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.step !== "credentials" || state.credentialsSkipped) return;
     if (!state.spaceId.trim() || !state.environmentId.trim() || !state.cmaToken.trim()) return;
     const validationId = ++credentialsValidationIdRef.current;
@@ -28190,7 +28079,7 @@ If using a custom host configuration, make sure the space exists on that host.`
     }
   };
   const tokenReuseChecked = useRef10(false);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.rawTokensPath) {
       if (tokenReuseChecked.current) return;
       tokenReuseChecked.current = true;
@@ -28241,7 +28130,7 @@ If using a custom host configuration, make sure the space exists on that host.`
   const stepContent = (() => {
     switch (state.step) {
       case "welcome":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           WelcomeStep,
           {
             onContinue: (path) => {
@@ -28253,7 +28142,7 @@ If using a custom host configuration, make sure the space exists on that host.`
           }
         );
       case "token-input":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           TokenInputStep,
           {
             onConfirm: (rawTokensPath) => {
@@ -28264,7 +28153,7 @@ If using a custom host configuration, make sure the space exists on that host.`
           }
         );
       case "token-reuse-gate":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           GateStep,
           {
             successMessage: "Existing tokens.json found",
@@ -28292,7 +28181,7 @@ If using a custom host configuration, make sure the space exists on that host.`
           }
         );
       case "checking-claude-auth":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           RunningStep,
           {
             stepNumber: state.authCheckStepNumber,
@@ -28302,7 +28191,7 @@ If using a custom host configuration, make sure the space exists on that host.`
           }
         );
       case "path-validation":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           PathValidationStep,
           {
             projectPath: state.projectPath,
@@ -28335,7 +28224,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         }
         const selectionDetail = state.selectionAgentStatus === "complete" ? "Selection agent complete" : `Filtering component selection via ${state.agent}...`;
         const compositionDetail = state.compositionPhase === "cache-hit" ? "Composition mapping (cached)" : compositionComplete ? "Composition mapping complete" : state.compositionPhase?.startsWith("agent:") ? `Mapping composition via ${state.compositionPhase.slice("agent:".length)}...` : `Mapping composition via ${state.agent}...`;
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           RunningStep,
           {
             stepNumber: hasTokenStage ? 2 : 1,
@@ -28357,7 +28246,7 @@ If using a custom host configuration, make sure the space exists on that host.`
       }
       case "scope-gate": {
         if (!state.extractSessionId) {
-          return /* @__PURE__ */ jsx52(Box43, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx52(Text48, { color: PALETTE.error, children: "Error: extract session ID missing \u2014 please re-run." }) });
+          return /* @__PURE__ */ jsx50(Box42, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx50(Text46, { color: PALETTE.error, children: "Error: extract session ID missing \u2014 please re-run." }) });
         }
         const sessionId2 = state.extractSessionId;
         const db = openPipelineDb();
@@ -28367,7 +28256,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         } finally {
           db.close();
         }
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           ScopeGateStep,
           {
             components,
@@ -28408,7 +28297,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         const displayAgent = state.agent.charAt(0).toUpperCase() + state.agent.slice(1);
         const progressDetail = p ? `[${p.done}/${p.total}] ${p.current}` : `Starting up ${displayAgent}...`;
         const mapTokensDetail = state.mapTokensStatus === "running" ? skipMapTokens ? "Resolving token defaults..." : `Mapping token restrictions via ${displayAgent}...` : state.mapTokensStatus === "complete" ? skipMapTokens ? "Token defaults ready" : "Token restrictions ready" : void 0;
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           RunningStep,
           {
             stepNumber: stepNum,
@@ -28423,7 +28312,7 @@ If using a custom host configuration, make sure the space exists on that host.`
       }
       case "mapping-tokens": {
         const stepNum = hasTokenStage ? 5 : 4;
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           RunningStep,
           {
             stepNumber: stepNum,
@@ -28435,7 +28324,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       }
       case "final-review": {
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           GenerateReviewStep,
           {
             extractSessionId: state.extractSessionId,
@@ -28491,7 +28380,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       }
       case "credentials":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           CredentialsStep,
           {
             initialSpaceId: state.spaceId,
@@ -28526,7 +28415,7 @@ If using a custom host configuration, make sure the space exists on that host.`
           }
         );
       case "previewing":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           RunningStep,
           {
             stepNumber: totalSteps,
@@ -28537,7 +28426,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       case "preview-gate": {
         const editableComponentCount = extractComponents(state.cdf).length;
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           WizardPreviewStep,
           {
             preview: state.serverPreview,
@@ -28562,9 +28451,9 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       }
       case "pushing":
-        return /* @__PURE__ */ jsx52(PushingStep, { stepNumber: totalSteps, totalSteps, progress: state.pushProgress });
+        return /* @__PURE__ */ jsx50(PushingStep, { stepNumber: totalSteps, totalSteps, progress: state.pushProgress });
       case "path-prompt":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           PathPrompt,
           {
             defaultPath: state.outDir,
@@ -28585,7 +28474,7 @@ If using a custom host configuration, make sure the space exists on that host.`
           }
         );
       case "printing":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           RunningStep,
           {
             stepNumber: totalSteps,
@@ -28596,7 +28485,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       case "print-gate": {
         const teaser = buildRunTeaserLine(state.lastRunId);
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           GateStep,
           {
             successMessage: "Files saved",
@@ -28614,7 +28503,7 @@ If using a custom host configuration, 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__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           DoneStep,
           {
             componentTypes: state.pushResult.componentTypes,
@@ -28630,7 +28519,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       }
       case "preview-validation-error": {
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           PreviewValidationErrorStep,
           {
             errors: state.previewValidationErrors,
@@ -28646,7 +28535,7 @@ If using a custom host configuration, make sure the space exists on that host.`
         );
       }
       case "error":
-        return /* @__PURE__ */ jsx52(
+        return /* @__PURE__ */ jsx50(
           ErrorStep,
           {
             stepName: state.errorStep,
@@ -28668,9 +28557,9 @@ If using a custom host configuration, make sure the space exists on that host.`
         return null;
     }
   })();
-  return /* @__PURE__ */ jsxs45(Box43, { flexDirection: "column", width: terminalWidth, children: [
-    /* @__PURE__ */ jsx52(TopBar, { subcommand: "import", hints }),
-    /* @__PURE__ */ jsx52(CustomPromptBanner, { generatePromptPath }),
+  return /* @__PURE__ */ jsxs43(Box42, { flexDirection: "column", width: terminalWidth, children: [
+    /* @__PURE__ */ jsx50(TopBar, { subcommand: "import", hints }),
+    /* @__PURE__ */ jsx50(CustomPromptBanner, { generatePromptPath }),
     stepContent
   ] });
 }
@@ -29184,8 +29073,8 @@ var init_command7 = __esm({
 
 // packages/experience-design-system-cli/src/setup/SetupStepper.tsx
 import React17 from "react";
-import { Box as Box44, Text as Text49 } from "ink";
-import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Box as Box43, Text as Text47 } from "ink";
+import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
 function stepLabel(step, title, state, wide) {
   if (state === "complete") return wide ? `\u2713 ${title}` : "\u2713";
   if (state === "active") return wide ? `[${step} ${title}]` : `[${step}]`;
@@ -29198,12 +29087,12 @@ function stepColor(state) {
 }
 function SetupStepper({ activeStep, columns }) {
   const wide = columns !== void 0 && columns >= WIDE_MIN_COLUMNS;
-  return /* @__PURE__ */ jsx53(Box44, { columnGap: wide ? 0 : COMPACT_GAP, children: SETUP_SCREENS.map((title, index) => {
+  return /* @__PURE__ */ jsx51(Box43, { columnGap: wide ? 0 : COMPACT_GAP, children: SETUP_SCREENS.map((title, index) => {
     const step = index + 1;
     const state = step < activeStep ? "complete" : step === activeStep ? "active" : "pending";
-    return /* @__PURE__ */ jsxs46(React17.Fragment, { children: [
-      wide && index > 0 && /* @__PURE__ */ jsx53(Text49, { dimColor: true, children: WIDE_SEPARATOR }),
-      /* @__PURE__ */ jsx53(Text49, { bold: state === "active", dimColor: state === "pending", color: stepColor(state), children: stepLabel(step, title, state, wide) })
+    return /* @__PURE__ */ jsxs44(React17.Fragment, { children: [
+      wide && index > 0 && /* @__PURE__ */ jsx51(Text47, { dimColor: true, children: WIDE_SEPARATOR }),
+      /* @__PURE__ */ jsx51(Text47, { bold: state === "active", dimColor: state === "pending", color: stepColor(state), children: stepLabel(step, title, state, wide) })
     ] }, step);
   }) });
 }
@@ -29222,33 +29111,33 @@ var init_SetupStepper = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/StepLayout.tsx
-import { Box as Box45, Text as Text50 } from "ink";
-import { jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Box as Box44, Text as Text48 } from "ink";
+import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
 function StepLayout({ helpText, children, prompt }) {
-  return /* @__PURE__ */ jsxs47(Box45, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", children: [
     children,
-    prompt && /* @__PURE__ */ jsx54(Box45, { marginTop: 1, children: prompt }),
-    helpText && /* @__PURE__ */ jsx54(Box45, { marginTop: 1, children: /* @__PURE__ */ jsx54(Text50, { dimColor: true, children: helpText }) })
+    prompt && /* @__PURE__ */ jsx52(Box44, { marginTop: 1, children: prompt }),
+    helpText && /* @__PURE__ */ jsx52(Box44, { marginTop: 1, children: /* @__PURE__ */ jsx52(Text48, { dimColor: true, children: helpText }) })
   ] });
 }
 function StepSuccess({ children }) {
-  return /* @__PURE__ */ jsxs47(Text50, { color: PALETTE.success, children: [
+  return /* @__PURE__ */ jsxs45(Text48, { color: PALETTE.success, children: [
     "\u2713 ",
     children
   ] });
 }
 function StepWarning({ children }) {
-  return /* @__PURE__ */ jsxs47(Text50, { color: PALETTE.warning, children: [
+  return /* @__PURE__ */ jsxs45(Text48, { color: PALETTE.warning, children: [
     "\u26A0 ",
     children
   ] });
 }
 function StepValue({ label, value }) {
   const color = value ? void 0 : PALETTE.warning;
-  return /* @__PURE__ */ jsxs47(Box45, { children: [
-    /* @__PURE__ */ jsx54(Box45, { width: 2, children: /* @__PURE__ */ jsx54(Text50, { color, children: value ? "" : "\u26A0" }) }),
-    /* @__PURE__ */ jsx54(Box45, { width: 20, flexShrink: 0, children: /* @__PURE__ */ jsx54(Text50, { color, children: label }) }),
-    /* @__PURE__ */ jsx54(Text50, { color, children: value || "(not set)" })
+  return /* @__PURE__ */ jsxs45(Box44, { children: [
+    /* @__PURE__ */ jsx52(Box44, { width: 2, children: /* @__PURE__ */ jsx52(Text48, { color, children: value ? "" : "\u26A0" }) }),
+    /* @__PURE__ */ jsx52(Box44, { width: 20, flexShrink: 0, children: /* @__PURE__ */ jsx52(Text48, { color, children: label }) }),
+    /* @__PURE__ */ jsx52(Text48, { color, children: value || "(not set)" })
   ] });
 }
 var init_StepLayout = __esm({
@@ -29259,10 +29148,10 @@ var init_StepLayout = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/CodingAgentScreen.tsx
-import { useEffect as useEffect15, useRef as useRef11, useState as useState24 } from "react";
-import { Box as Box46, Text as Text51 } from "ink";
+import { useEffect as useEffect16, useRef as useRef11, useState as useState24 } from "react";
+import { Box as Box45, Text as Text49 } from "ink";
 import { Select, TextInput } from "@inkjs/ui";
-import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
 async function detectAgents(exists = binaryExists) {
   const found = await Promise.all(AGENT_DEFS.map(async (agent) => await exists(agent.binary) ? agent : void 0));
   return found.filter((agent) => agent !== void 0);
@@ -29288,14 +29177,14 @@ function CodingAgentScreen({ onDone, deps }) {
     }
     void save(agent.binary, void 0);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (startedRef.current) return;
     startedRef.current = true;
     void (async () => {
       const found = await detectAgents(exists);
       if (found.length === 1) {
         const only = found[0];
-        setNotes([/* @__PURE__ */ jsx55(StepSuccess, { children: `${only.name} (${only.binary}) found` }, "found")]);
+        setNotes([/* @__PURE__ */ jsx53(StepSuccess, { children: `${only.name} (${only.binary}) found` }, "found")]);
         afterSelection(only);
         return;
       }
@@ -29303,7 +29192,7 @@ function CodingAgentScreen({ onDone, deps }) {
         setPhase({ kind: "choose", found });
         return;
       }
-      setNotes([/* @__PURE__ */ jsx55(StepWarning, { children: "No coding agent found on PATH" }, "none")]);
+      setNotes([/* @__PURE__ */ jsx53(StepWarning, { children: "No coding agent found on PATH" }, "none")]);
       setPhase({ kind: "install-choice" });
     })();
   }, []);
@@ -29315,12 +29204,12 @@ function CodingAgentScreen({ onDone, deps }) {
       onDone("failed");
       return;
     }
-    setNotes((current) => [...current, /* @__PURE__ */ jsx55(StepSuccess, { children: `${agent.name} installed` }, "installed")]);
+    setNotes((current) => [...current, /* @__PURE__ */ jsx53(StepSuccess, { children: `${agent.name} installed` }, "installed")]);
     afterSelection(agent);
   };
-  const chooser = (question, options, describe, onPick) => /* @__PURE__ */ jsxs48(Box46, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx55(Text51, { children: question }),
-    /* @__PURE__ */ jsx55(Box46, { marginTop: 1, children: /* @__PURE__ */ jsx55(
+  const chooser = (question, options, describe, onPick) => /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx53(Text49, { children: question }),
+    /* @__PURE__ */ jsx53(Box45, { marginTop: 1, children: /* @__PURE__ */ jsx53(
       Select,
       {
         options: [
@@ -29332,7 +29221,7 @@ function CodingAgentScreen({ onDone, deps }) {
     ) })
   ] });
   if (phase.kind === "choose") {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx53(
       StepLayout,
       {
         helpText: AGENT_HELP,
@@ -29347,7 +29236,7 @@ function CodingAgentScreen({ onDone, deps }) {
     );
   }
   if (phase.kind === "install-choice") {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx53(
       StepLayout,
       {
         helpText: AGENT_HELP,
@@ -29362,13 +29251,13 @@ function CodingAgentScreen({ onDone, deps }) {
     );
   }
   if (phase.kind === "model") {
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx53(
       StepLayout,
       {
         helpText: AGENT_HELP,
-        prompt: /* @__PURE__ */ jsxs48(Box46, { children: [
-          /* @__PURE__ */ jsx55(Text51, { children: "Model name (optional - press Enter for Codex default): " }),
-          /* @__PURE__ */ jsx55(
+        prompt: /* @__PURE__ */ jsxs46(Box45, { children: [
+          /* @__PURE__ */ jsx53(Text49, { children: "Model name (optional - press Enter for Codex default): " }),
+          /* @__PURE__ */ jsx53(
             TextInput,
             {
               onSubmit: (value) => void save(phase.agent.binary, value.trim() || void 0)
@@ -29378,19 +29267,19 @@ function CodingAgentScreen({ onDone, deps }) {
         ] }),
         children: [
           ...notes,
-          /* @__PURE__ */ jsx55(StepWarning, { children: "No OPENAI_API_KEY \u2014 using ChatGPT account authentication." }, "no-key"),
-          /* @__PURE__ */ jsx55(Text51, { dimColor: true, children: "Tip: run codex then type /model to browse all available models." }, "tip")
+          /* @__PURE__ */ jsx53(StepWarning, { children: "No OPENAI_API_KEY \u2014 using ChatGPT account authentication." }, "no-key"),
+          /* @__PURE__ */ jsx53(Text49, { dimColor: true, children: "Tip: run codex then type /model to browse all available models." }, "tip")
         ]
       }
     );
   }
   if (phase.kind === "installing") {
-    return /* @__PURE__ */ jsx55(StepLayout, { helpText: AGENT_HELP, children: [...notes, /* @__PURE__ */ jsx55(Text51, { children: `Installing ${phase.agent.name}\u2026` }, "installing")] });
+    return /* @__PURE__ */ jsx53(StepLayout, { helpText: AGENT_HELP, children: [...notes, /* @__PURE__ */ jsx53(Text49, { children: `Installing ${phase.agent.name}\u2026` }, "installing")] });
   }
   if (phase.kind === "failed") {
-    return /* @__PURE__ */ jsx55(StepLayout, { helpText: AGENT_HELP, children: [...notes, /* @__PURE__ */ jsx55(Text51, { children: `\u2717 ${phase.message}` }, "failed")] });
+    return /* @__PURE__ */ jsx53(StepLayout, { helpText: AGENT_HELP, children: [...notes, /* @__PURE__ */ jsx53(Text49, { children: `\u2717 ${phase.message}` }, "failed")] });
   }
-  return /* @__PURE__ */ jsx55(Text51, { dimColor: true, children: "Looking for a coding agent\u2026" });
+  return /* @__PURE__ */ jsx53(Text49, { dimColor: true, children: "Looking for a coding agent\u2026" });
 }
 var AGENT_HELP, SKIP_VALUE;
 var init_CodingAgentScreen = __esm({
@@ -29406,10 +29295,10 @@ var init_CodingAgentScreen = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/ContentfulCredentialsScreen.tsx
-import { useEffect as useEffect16, useRef as useRef12, useState as useState25 } from "react";
-import { Box as Box47, Text as Text52 } from "ink";
+import { useEffect as useEffect17, useRef as useRef12, useState as useState25 } from "react";
+import { Box as Box46, Text as Text50 } from "ink";
 import { PasswordInput, Select as Select2, TextInput as TextInput2 } from "@inkjs/ui";
-import { Fragment as Fragment19, jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
 function envShadowingWarning(env) {
   const set = ENV_KEYS.filter((key) => env[key]);
   if (set.length === 0) return null;
@@ -29423,24 +29312,24 @@ function ContentfulCredentialsScreen({ onDone }) {
   const [field, setField] = useState25("confirm");
   const enteredRef = useRef12({});
   const [error, setError] = useState25(null);
-  useEffect16(() => {
+  useEffect17(() => {
     void readExperiencesCredentials().then(setStored);
   }, []);
-  if (!stored) return /* @__PURE__ */ jsx56(Text52, { dimColor: true, children: "Reading saved credentials\u2026" });
+  if (!stored) return /* @__PURE__ */ jsx54(Text50, { dimColor: true, children: "Reading saved credentials\u2026" });
   const currentHost = stored.host ?? DEFAULT_CONFIGURED_HOST;
   const hasAny = Boolean(stored.spaceId || stored.environmentId || stored.cmaToken);
   const allSet = Boolean(stored.spaceId && stored.environmentId && stored.cmaToken);
   const shadowing = envShadowingWarning(process.env);
-  const summary = /* @__PURE__ */ jsxs49(Fragment19, { children: [
-    shadowing && /* @__PURE__ */ jsx56(StepWarning, { children: shadowing }),
-    hasAny && /* @__PURE__ */ jsxs49(Box47, { flexDirection: "column", marginTop: shadowing ? 1 : 0, children: [
-      /* @__PURE__ */ jsx56(Text52, { children: "Current values:" }),
-      /* @__PURE__ */ jsx56(StepValue, { label: "Space ID", value: stored.spaceId }),
-      /* @__PURE__ */ jsx56(StepValue, { label: "Environment ID", value: stored.environmentId }),
-      /* @__PURE__ */ jsx56(StepValue, { label: "CMA Token", value: stored.cmaToken ? maskToken(stored.cmaToken) : void 0 }),
-      /* @__PURE__ */ jsx56(StepValue, { label: "API Host", value: currentHost })
+  const summary = /* @__PURE__ */ jsxs47(Fragment19, { children: [
+    shadowing && /* @__PURE__ */ jsx54(StepWarning, { children: shadowing }),
+    hasAny && /* @__PURE__ */ jsxs47(Box46, { flexDirection: "column", marginTop: shadowing ? 1 : 0, children: [
+      /* @__PURE__ */ jsx54(Text50, { children: "Current values:" }),
+      /* @__PURE__ */ jsx54(StepValue, { label: "Space ID", value: stored.spaceId }),
+      /* @__PURE__ */ jsx54(StepValue, { label: "Environment ID", value: stored.environmentId }),
+      /* @__PURE__ */ jsx54(StepValue, { label: "CMA Token", value: stored.cmaToken ? maskToken(stored.cmaToken) : void 0 }),
+      /* @__PURE__ */ jsx54(StepValue, { label: "API Host", value: currentHost })
     ] }),
-    error && /* @__PURE__ */ jsx56(StepWarning, { children: error })
+    error && /* @__PURE__ */ jsx54(StepWarning, { children: error })
   ] });
   const helpText = `Saved to ${experiencesCredentialsPath()} \u2014 loaded automatically by experiences import.`;
   if (field === "confirm") {
@@ -29448,13 +29337,13 @@ function ContentfulCredentialsScreen({ onDone }) {
       { label: hasAny ? "Update the saved credentials" : "Enter credentials now", value: ENTER },
       { label: allSet ? "Keep them as they are" : "Skip for now", value: KEEP }
     ];
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx54(
       StepLayout,
       {
         helpText,
-        prompt: /* @__PURE__ */ jsxs49(Box47, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsx56(Text52, { children: "Contentful credentials" }),
-          /* @__PURE__ */ jsx56(Box47, { marginTop: 1, children: /* @__PURE__ */ jsx56(
+        prompt: /* @__PURE__ */ jsxs47(Box46, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx54(Text50, { children: "Contentful credentials" }),
+          /* @__PURE__ */ jsx54(Box46, { marginTop: 1, children: /* @__PURE__ */ jsx54(
             Select2,
             {
               options: allSet ? [...options].reverse() : options,
@@ -29495,24 +29384,24 @@ function ContentfulCredentialsScreen({ onDone }) {
     onDone("completed");
   };
   const prompts = {
-    spaceId: /* @__PURE__ */ jsxs49(Box47, { children: [
-      /* @__PURE__ */ jsx56(Text52, { children: `Space ID${stored.spaceId ? ` [${stored.spaceId}]` : ""}: ` }),
-      /* @__PURE__ */ jsx56(TextInput2, { onSubmit: (v) => advance("spaceId", v) }, "spaceId")
+    spaceId: /* @__PURE__ */ jsxs47(Box46, { children: [
+      /* @__PURE__ */ jsx54(Text50, { children: `Space ID${stored.spaceId ? ` [${stored.spaceId}]` : ""}: ` }),
+      /* @__PURE__ */ jsx54(TextInput2, { onSubmit: (v) => advance("spaceId", v) }, "spaceId")
     ] }),
-    environmentId: /* @__PURE__ */ jsxs49(Box47, { children: [
-      /* @__PURE__ */ jsx56(Text52, { children: `Environment ID [${stored.environmentId || "master"}]: ` }),
-      /* @__PURE__ */ jsx56(TextInput2, { onSubmit: (v) => advance("environmentId", v) }, "environmentId")
+    environmentId: /* @__PURE__ */ jsxs47(Box46, { children: [
+      /* @__PURE__ */ jsx54(Text50, { children: `Environment ID [${stored.environmentId || "master"}]: ` }),
+      /* @__PURE__ */ jsx54(TextInput2, { onSubmit: (v) => advance("environmentId", v) }, "environmentId")
     ] }),
-    cmaToken: /* @__PURE__ */ jsxs49(Box47, { children: [
-      /* @__PURE__ */ jsx56(Text52, { children: `CMA token${stored.cmaToken ? " [press Enter to keep existing]" : " (paste here)"}: ` }),
-      /* @__PURE__ */ jsx56(PasswordInput, { onSubmit: (v) => advance("cmaToken", v) }, "cmaToken")
+    cmaToken: /* @__PURE__ */ jsxs47(Box46, { children: [
+      /* @__PURE__ */ jsx54(Text50, { children: `CMA token${stored.cmaToken ? " [press Enter to keep existing]" : " (paste here)"}: ` }),
+      /* @__PURE__ */ jsx54(PasswordInput, { onSubmit: (v) => advance("cmaToken", v) }, "cmaToken")
     ] }),
-    host: /* @__PURE__ */ jsxs49(Box47, { children: [
-      /* @__PURE__ */ jsx56(Text52, { children: `API host [${currentHost}]: ` }),
-      /* @__PURE__ */ jsx56(TextInput2, { onSubmit: (v) => advance("host", v) }, "host")
+    host: /* @__PURE__ */ jsxs47(Box46, { children: [
+      /* @__PURE__ */ jsx54(Text50, { children: `API host [${currentHost}]: ` }),
+      /* @__PURE__ */ jsx54(TextInput2, { onSubmit: (v) => advance("host", v) }, "host")
     ] })
   };
-  return /* @__PURE__ */ jsx56(StepLayout, { helpText, prompt: prompts[field], children: summary });
+  return /* @__PURE__ */ jsx54(StepLayout, { helpText, prompt: prompts[field], children: summary });
 }
 var ENV_KEYS, ENTER, KEEP, FIELD_ORDER;
 var init_ContentfulCredentialsScreen = __esm({
@@ -29529,10 +29418,10 @@ var init_ContentfulCredentialsScreen = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/preferences/BooleanInput.tsx
-import { useEffect as useEffect17, useState as useState26 } from "react";
-import { Box as Box48, Text as Text53 } from "ink";
+import { useEffect as useEffect18, useState as useState26 } from "react";
+import { Box as Box47, Text as Text51 } from "ink";
 import { Select as Select3 } from "@inkjs/ui";
-import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
 function tick(labels, forOn, current) {
   const label = forOn ? labels.on : labels.off;
   return forOn === current ? `${label} \u2713` : label;
@@ -29547,10 +29436,10 @@ function BooleanInput({
   onDone
 }) {
   const [stored, setStored] = useState26(null);
-  useEffect17(() => {
+  useEffect18(() => {
     void readExperiencesCredentials().then(setStored);
   }, []);
-  if (!stored) return /* @__PURE__ */ jsx57(Text53, { dimColor: true, children: "Reading saved preferences\u2026" });
+  if (!stored) return /* @__PURE__ */ jsx55(Text51, { dimColor: true, children: "Reading saved preferences\u2026" });
   const current = read(stored) ?? fallback;
   const submit = (value) => {
     if (value === current) {
@@ -29559,13 +29448,13 @@ function BooleanInput({
     }
     void writeExperiencesCredentials(write2(stored, value)).then(() => onDone("completed"));
   };
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55(
     StepLayout,
     {
       helpText,
-      prompt: /* @__PURE__ */ jsxs50(Box48, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx57(Text53, { children: question }),
-        /* @__PURE__ */ jsx57(Box48, { marginTop: 1, children: /* @__PURE__ */ jsx57(
+      prompt: /* @__PURE__ */ jsxs48(Box47, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx55(Text51, { children: question }),
+        /* @__PURE__ */ jsx55(Box47, { marginTop: 1, children: /* @__PURE__ */ jsx55(
           Select3,
           {
             options: [
@@ -29590,9 +29479,9 @@ var init_BooleanInput = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/preferences/AnalyticsScreen.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function AnalyticsScreen({ onDone }) {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx56(
     BooleanInput,
     {
       helpText: "Shares anonymous usage data about which CLI commands are used and where imports succeed or fail. Never includes source code, file paths, credentials, or authored content",
@@ -29613,9 +29502,9 @@ var init_AnalyticsScreen = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/preferences/ColorPreferenceScreen.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function ColorPreferenceScreen({ onDone }) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx57(
     BooleanInput,
     {
       helpText: `Prints plain text with no color, which suits CI logs and basic terminals.`,
@@ -29636,10 +29525,10 @@ var init_ColorPreferenceScreen = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/preferences/CustomPromptScreen.tsx
-import { useEffect as useEffect18, useState as useState27 } from "react";
-import { Box as Box49, Text as Text54 } from "ink";
+import { useEffect as useEffect19, useState as useState27 } from "react";
+import { Box as Box48, Text as Text52 } from "ink";
 import { ConfirmInput, TextInput as TextInput3 } from "@inkjs/ui";
-import { jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
 function parseCustomSkillPath(answer) {
   const trimmed = answer.trim();
   if (trimmed === "") return void 0;
@@ -29658,22 +29547,22 @@ function applyCustomSkillPath(credentials, parsed) {
 function CustomPromptsScreen({ onDone }) {
   const [stored, setStored] = useState27(null);
   const [phase, setPhase] = useState27("confirm");
-  useEffect18(() => {
+  useEffect19(() => {
     void readExperiencesCredentials().then(setStored);
   }, []);
-  if (!stored) return /* @__PURE__ */ jsx60(Text54, { dimColor: true, children: "Reading saved prompt paths\u2026" });
+  if (!stored) return /* @__PURE__ */ jsx58(Text52, { dimColor: true, children: "Reading saved prompt paths\u2026" });
   const submit = (answer) => {
     const next = applyCustomSkillPath(stored, parseCustomSkillPath(answer));
     void writeExperiencesCredentials(next).then(() => onDone("completed"));
   };
   if (phase === "confirm") {
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx58(
       StepLayout,
       {
         helpText: CUSTOM_PROMPTS_HELP,
-        prompt: /* @__PURE__ */ jsxs51(Box49, { children: [
-          /* @__PURE__ */ jsx60(Text54, { children: "Use your own prompt file instead of the built-in one? " }),
-          /* @__PURE__ */ jsx60(
+        prompt: /* @__PURE__ */ jsxs49(Box48, { children: [
+          /* @__PURE__ */ jsx58(Text52, { children: "Use your own prompt file instead of the built-in one? " }),
+          /* @__PURE__ */ jsx58(
             ConfirmInput,
             {
               defaultChoice: "cancel",
@@ -29685,13 +29574,13 @@ function CustomPromptsScreen({ onDone }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx58(
     StepLayout,
     {
       helpText: CUSTOM_PROMPTS_HELP,
-      prompt: /* @__PURE__ */ jsxs51(Box49, { children: [
-        /* @__PURE__ */ jsx60(Text54, { children: customSkillPathQuestion(stored.generatePromptPath) }),
-        /* @__PURE__ */ jsx60(TextInput3, { onSubmit: submit })
+      prompt: /* @__PURE__ */ jsxs49(Box48, { children: [
+        /* @__PURE__ */ jsx58(Text52, { children: customSkillPathQuestion(stored.generatePromptPath) }),
+        /* @__PURE__ */ jsx58(TextInput3, { onSubmit: submit })
       ] })
     }
   );
@@ -29707,9 +29596,9 @@ var init_CustomPromptScreen = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/preferences/DebugLogsScreen.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function DebugLogsScreen({ onDone }) {
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx59(
     BooleanInput,
     {
       helpText: `Writes a verbose trace of every command decision, for troubleshooting.`,
@@ -29731,16 +29620,16 @@ var init_DebugLogsScreen = __esm({
 
 // packages/experience-design-system-cli/src/setup/steps/preferences/PreferencesMenu.tsx
 import { useState as useState28 } from "react";
-import { Box as Box50, Text as Text55 } from "ink";
+import { Box as Box49, Text as Text53 } from "ink";
 import { Select as Select4 } from "@inkjs/ui";
-import { jsx as jsx62, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
 function PreferencesMenu({ onDone }) {
   const [open, setOpen] = useState28(null);
   const [changed, setChanged] = useState28(/* @__PURE__ */ new Set());
   const entry = open === null ? void 0 : PREFERENCE_OPTIONS.find((option) => option.key === open);
-  if (!entry) return /* @__PURE__ */ jsx62(PreferenceList, { changed, onOpen: setOpen, onDone });
+  if (!entry) return /* @__PURE__ */ jsx60(PreferenceList, { changed, onOpen: setOpen, onDone });
   const { key, Screen } = entry;
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx60(
     Screen,
     {
       onDone: (status) => {
@@ -29757,13 +29646,13 @@ function PreferenceList({ changed, onOpen, onDone }) {
     ...PREFERENCE_OPTIONS.map((option) => ({ label: option.label, value: option.key })),
     { label: "Done", value: DONE_VALUE }
   ];
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx60(
     StepLayout,
     {
       helpText: PREFERENCES_MENU_HELP,
-      prompt: /* @__PURE__ */ jsxs52(Box50, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx62(Text55, { children: "Preferences" }),
-        /* @__PURE__ */ jsx62(Box50, { marginTop: 1, children: /* @__PURE__ */ jsx62(
+      prompt: /* @__PURE__ */ jsxs50(Box49, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx60(Text53, { children: "Preferences" }),
+        /* @__PURE__ */ jsx60(Box49, { marginTop: 1, children: /* @__PURE__ */ jsx60(
           Select4,
           {
             options,
@@ -29796,22 +29685,22 @@ var init_PreferencesMenu = __esm({
       {
         key: "customPrompts",
         label: "Custom prompts",
-        Screen: ({ onDone }) => /* @__PURE__ */ jsx62(CustomPromptsScreen, { onDone })
+        Screen: ({ onDone }) => /* @__PURE__ */ jsx60(CustomPromptsScreen, { onDone })
       },
       {
         key: "debug",
         label: "Debug logging",
-        Screen: ({ onDone }) => /* @__PURE__ */ jsx62(DebugLogsScreen, { onDone })
+        Screen: ({ onDone }) => /* @__PURE__ */ jsx60(DebugLogsScreen, { onDone })
       },
       {
         key: "analytics",
         label: "Usage analytics",
-        Screen: ({ onDone }) => /* @__PURE__ */ jsx62(AnalyticsScreen, { onDone })
+        Screen: ({ onDone }) => /* @__PURE__ */ jsx60(AnalyticsScreen, { onDone })
       },
       {
         key: "noColor",
         label: "Terminal colors",
-        Screen: ({ onDone }) => /* @__PURE__ */ jsx62(ColorPreferenceScreen, { onDone })
+        Screen: ({ onDone }) => /* @__PURE__ */ jsx60(ColorPreferenceScreen, { onDone })
       }
     ];
     DONE_VALUE = "menu:done";
@@ -30026,24 +29915,24 @@ var init_prerequisites = __esm({
 });
 
 // packages/experience-design-system-cli/src/setup/steps/prerequisites/PrerequisitesScreen.tsx
-import { useEffect as useEffect19, useRef as useRef13, useState as useState29 } from "react";
-import { Box as Box51, Text as Text56 } from "ink";
+import { useEffect as useEffect20, useRef as useRef13, useState as useState29 } from "react";
+import { Box as Box50, Text as Text54 } from "ink";
 import { ConfirmInput as ConfirmInput2 } from "@inkjs/ui";
-import { jsx as jsx63, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs51 } from "react/jsx-runtime";
 function EventLine({ event }) {
-  if (event.kind === "success") return /* @__PURE__ */ jsxs53(Text56, { color: PALETTE.success, children: [
+  if (event.kind === "success") return /* @__PURE__ */ jsxs51(Text54, { color: PALETTE.success, children: [
     "\u2713 ",
     event.message
   ] });
-  if (event.kind === "failure") return /* @__PURE__ */ jsxs53(Text56, { color: PALETTE.error, children: [
+  if (event.kind === "failure") return /* @__PURE__ */ jsxs51(Text54, { color: PALETTE.error, children: [
     "\u2717 ",
     event.message
   ] });
-  if (event.kind === "warning") return /* @__PURE__ */ jsxs53(Text56, { color: PALETTE.warning, children: [
+  if (event.kind === "warning") return /* @__PURE__ */ jsxs51(Text54, { color: PALETTE.warning, children: [
     "\u26A0 ",
     event.message
   ] });
-  return /* @__PURE__ */ jsx63(Text56, { children: event.message });
+  return /* @__PURE__ */ jsx61(Text54, { children: event.message });
 }
 function PrerequisitesScreen({
   repoRoot,
@@ -30054,7 +29943,7 @@ function PrerequisitesScreen({
   const [events, setEvents] = useState29([]);
   const [confirm, setConfirm] = useState29(null);
   const startedRef = useRef13(false);
-  useEffect19(() => {
+  useEffect20(() => {
     if (startedRef.current) return;
     startedRef.current = true;
     const base = deps ?? {
@@ -30082,15 +29971,15 @@ function PrerequisitesScreen({
       ...skipBuild !== void 0 ? { skipBuild } : {}
     }).then(onDone);
   }, []);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx61(
     StepLayout,
     {
-      prompt: confirm ? /* @__PURE__ */ jsxs53(Box51, { children: [
-        /* @__PURE__ */ jsxs53(Text56, { children: [
+      prompt: confirm ? /* @__PURE__ */ jsxs51(Box50, { children: [
+        /* @__PURE__ */ jsxs51(Text54, { children: [
           confirm.question,
           " "
         ] }),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx61(
           ConfirmInput2,
           {
             defaultChoice: confirm.defaultYes ? "confirm" : "cancel",
@@ -30099,8 +29988,8 @@ function PrerequisitesScreen({
           },
           confirm.question
         )
-      ] }) : /* @__PURE__ */ jsx63(Text56, { color: PALETTE.info, children: "\u27F3 Checking prerequisites\u2026" }),
-      children: /* @__PURE__ */ jsx63(Box51, { flexDirection: "column", children: events.map((event, index) => /* @__PURE__ */ jsx63(EventLine, { event }, `${index}-${event.message}`)) })
+      ] }) : /* @__PURE__ */ jsx61(Text54, { color: PALETTE.info, children: "\u27F3 Checking prerequisites\u2026" }),
+      children: /* @__PURE__ */ jsx61(Box50, { flexDirection: "column", children: events.map((event, index) => /* @__PURE__ */ jsx61(EventLine, { event }, `${index}-${event.message}`)) })
     }
   );
 }
@@ -30120,9 +30009,9 @@ __export(SetupScreen_exports, {
   SetupScreen: () => SetupScreen,
   formatSetupCompletionMessage: () => formatSetupCompletionMessage
 });
-import { useEffect as useEffect20, useRef as useRef14, useState as useState30 } from "react";
-import { Box as Box52, Text as Text57 } from "ink";
-import { jsx as jsx64, jsxs as jsxs54 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useRef as useRef14, useState as useState30 } from "react";
+import { Box as Box51, Text as Text55 } from "ink";
+import { jsx as jsx62, jsxs as jsxs52 } from "react/jsx-runtime";
 function countRequiredFailures(results) {
   return results.filter((result) => result.required && result.status === "failed").length;
 }
@@ -30145,7 +30034,7 @@ function SetupScreen({
   const [notice, setNotice] = useState30(null);
   const [screen, setScreen] = useState30(null);
   const startedRef = useRef14(false);
-  useEffect20(() => {
+  useEffect21(() => {
     if (startedRef.current) return;
     startedRef.current = true;
     const runScreen = (build) => new Promise((resolve21) => {
@@ -30153,7 +30042,7 @@ function SetupScreen({
     });
     void (async () => {
       const results = [];
-      const prerequisites = await runScreen((done) => /* @__PURE__ */ jsx64(
+      const prerequisites = await runScreen((done) => /* @__PURE__ */ jsx62(
         PrerequisitesScreen,
         {
           repoRoot,
@@ -30187,21 +30076,21 @@ function SetupScreen({
       if (skip.skipAgent) {
         results.push({ name: "Coding agent", status: "skipped", required: false });
       } else {
-        const status = await runScreen((done) => /* @__PURE__ */ jsx64(CodingAgentScreen, { onDone: done }));
+        const status = await runScreen((done) => /* @__PURE__ */ jsx62(CodingAgentScreen, { onDone: done }));
         results.push({ name: "Coding agent", status, required: true });
       }
       setActiveStep(3);
       if (skip.skipCredentials) {
         results.push({ name: "Contentful credentials", status: "skipped", required: false });
       } else {
-        const status = await runScreen((done) => /* @__PURE__ */ jsx64(ContentfulCredentialsScreen, { onDone: done }));
+        const status = await runScreen((done) => /* @__PURE__ */ jsx62(ContentfulCredentialsScreen, { onDone: done }));
         results.push({ name: "Contentful credentials", status, required: false });
       }
       setActiveStep(4);
       if (skip.skipOptional) {
         results.push({ name: "Preferences", status: "skipped", required: false });
       } else {
-        const status = await runScreen((done) => /* @__PURE__ */ jsx64(PreferencesMenu, { onDone: done }));
+        const status = await runScreen((done) => /* @__PURE__ */ jsx62(PreferencesMenu, { onDone: done }));
         results.push({ name: "Preferences", status, required: false });
       }
       const exitCode = countRequiredFailures(results) === 0 ? 0 : 1;
@@ -30210,37 +30099,37 @@ function SetupScreen({
       onComplete(finalOutcome);
     })();
   }, []);
-  return /* @__PURE__ */ jsxs54(Box52, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs54(Box52, { justifyContent: "space-between", columnGap: 1, ...columns !== void 0 ? { width: columns - 2 } : {}, children: [
-      /* @__PURE__ */ jsx64(Box52, { flexShrink: 0, children: /* @__PURE__ */ jsx64(Text57, { bold: true, children: "experiences setup" }) }),
-      /* @__PURE__ */ jsx64(Box52, { flexShrink: 0, children: /* @__PURE__ */ jsxs54(Text57, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs52(Box51, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs52(Box51, { justifyContent: "space-between", columnGap: 1, ...columns !== void 0 ? { width: columns - 2 } : {}, children: [
+      /* @__PURE__ */ jsx62(Box51, { flexShrink: 0, children: /* @__PURE__ */ jsx62(Text55, { bold: true, children: "experiences setup" }) }),
+      /* @__PURE__ */ jsx62(Box51, { flexShrink: 0, children: /* @__PURE__ */ jsxs52(Text55, { dimColor: true, children: [
         "v",
         version
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx64(Box52, { marginTop: 1, children: /* @__PURE__ */ jsx64(SetupStepper, { activeStep, columns }) }),
-    outcome ? /* @__PURE__ */ jsx64(SetupSummary, { outcome, notice }) : screen && /* @__PURE__ */ jsx64(Box52, { marginTop: 1, children: screen })
+    /* @__PURE__ */ jsx62(Box51, { marginTop: 1, children: /* @__PURE__ */ jsx62(SetupStepper, { activeStep, columns }) }),
+    outcome ? /* @__PURE__ */ jsx62(SetupSummary, { outcome, notice }) : screen && /* @__PURE__ */ jsx62(Box51, { marginTop: 1, children: screen })
   ] });
 }
 function SetupSummary({ outcome, notice }) {
   const requiredFailed = countRequiredFailures(outcome.results);
-  return /* @__PURE__ */ jsxs54(Box52, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsx64(Text57, { bold: true, children: "Summary" }),
+  return /* @__PURE__ */ jsxs52(Box51, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsx62(Text55, { bold: true, children: "Summary" }),
     outcome.results.map((result) => {
       if (result.status === "completed") {
-        return /* @__PURE__ */ jsxs54(Text57, { color: PALETTE.success, children: [
+        return /* @__PURE__ */ jsxs52(Text55, { color: PALETTE.success, children: [
           "\u2713 ",
           result.name
         ] }, result.name);
       }
       if (result.status === "skipped") {
-        return /* @__PURE__ */ jsxs54(Text57, { dimColor: true, children: [
+        return /* @__PURE__ */ jsxs52(Text55, { dimColor: true, children: [
           "\u2013 ",
           result.name,
           " \u2014 skipped"
         ] }, result.name);
       }
-      return /* @__PURE__ */ jsxs54(Text57, { color: result.required ? PALETTE.error : PALETTE.warning, children: [
+      return /* @__PURE__ */ jsxs52(Text55, { color: result.required ? PALETTE.error : PALETTE.warning, children: [
         result.required ? "\u2717" : "\u26A0",
         " ",
         result.name,
@@ -30248,10 +30137,10 @@ function SetupSummary({ outcome, notice }) {
         result.required ? "required" : "optional"
       ] }, result.name);
     }),
-    notice && /* @__PURE__ */ jsx64(Box52, { marginTop: 1, children: /* @__PURE__ */ jsx64(Text57, { color: PALETTE.warning, children: notice }) }),
-    /* @__PURE__ */ jsx64(Box52, { marginTop: 1, children: /* @__PURE__ */ jsx64(Text57, { bold: true, color: requiredFailed === 0 ? PALETTE.success : PALETTE.warning, children: formatSetupCompletionMessage(outcome.results) }) }),
-    requiredFailed > 0 && /* @__PURE__ */ jsx64(Text57, { dimColor: true, children: "Complete the steps above, then re-run experiences setup." }),
-    /* @__PURE__ */ jsx64(Text57, { dimColor: true, children: "Run experiences doctor any time to re-check." })
+    notice && /* @__PURE__ */ jsx62(Box51, { marginTop: 1, children: /* @__PURE__ */ jsx62(Text55, { color: PALETTE.warning, children: notice }) }),
+    /* @__PURE__ */ jsx62(Box51, { marginTop: 1, children: /* @__PURE__ */ jsx62(Text55, { bold: true, color: requiredFailed === 0 ? PALETTE.success : PALETTE.warning, children: formatSetupCompletionMessage(outcome.results) }) }),
+    requiredFailed > 0 && /* @__PURE__ */ jsx62(Text55, { dimColor: true, children: "Complete the steps above, then re-run experiences setup." }),
+    /* @__PURE__ */ jsx62(Text55, { dimColor: true, children: "Run experiences doctor any time to re-check." })
   ] });
 }
 var init_SetupScreen = __esm({