@contentful/experience-design-system-cli 2.37.1-dev-build-a6ef2d40.0 → 2.37.1-dev-build-25425992.0

package/dist/index.js

@@ -19802,8 +19802,71 @@ var init_validate4 = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/04-credentials/screen.tsx
 import { useRef as useRef2, useState as useState9 } from "react";
-import { Text as Text14 } from "ink";
+import { Box as Box14, Text as Text14, useInput as useInput11 } from "ink";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function CredentialsReview({
+  values,
+  subtitle,
+  notice,
+  validating,
+  onChoose,
+  children
+}) {
+  const [focus, setFocus] = useState9(0);
+  useInput11((_input, key) => {
+    if (validating) return;
+    if (key.escape) onChoose("quit");
+    else if (key.return) onChoose(MENU[focus].choice);
+    else if (key.upArrow) setFocus((current) => (current - 1 + MENU.length) % MENU.length);
+    else if (key.downArrow || key.tab) setFocus((current) => (current + 1) % MENU.length);
+  });
+  const labelWidth = formLabelWidth([...FIELDS2, ...MENU]);
+  return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx15(StepHeader, { step: "setup" }),
+    /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", paddingX: 2, paddingBottom: 1, children: [
+      /* @__PURE__ */ jsx15(Text14, { bold: true, children: "Contentful Credentials" }),
+      /* @__PURE__ */ jsx15(Text14, { children: " " }),
+      /* @__PURE__ */ jsx15(Text14, { color: PALETTE.muted, children: subtitle }),
+      /* @__PURE__ */ jsx15(Text14, { children: " " }),
+      MENU.map((item, index) => {
+        const focused = index === focus;
+        return /* @__PURE__ */ jsxs14(Box14, { gap: 1, children: [
+          /* @__PURE__ */ jsx15(Text14, { color: focused ? PALETTE.accent : void 0, children: focused ? "\u276F" : " " }),
+          /* @__PURE__ */ jsx15(Box14, { width: labelWidth, flexShrink: 0, children: /* @__PURE__ */ jsx15(Text14, { bold: focused, color: focused ? PALETTE.accent : PALETTE.muted, children: item.label }) }),
+          /* @__PURE__ */ jsx15(Text14, { color: PALETTE.muted, children: item.description })
+        ] }, item.choice);
+      }),
+      /* @__PURE__ */ jsx15(Text14, { children: " " }),
+      FIELDS2.map((field) => {
+        const value = values[field.key];
+        return /* @__PURE__ */ jsx15(FormReadOnlyRow, { label: field.label, labelWidth, children: /* @__PURE__ */ jsx15(Text14, { bold: value !== "", children: field.masked ? "\u2022".repeat(value.length) : value || "(empty)" }) }, field.key);
+      }),
+      notice && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+        /* @__PURE__ */ jsx15(Text14, { children: " " }),
+        /* @__PURE__ */ jsxs14(Text14, { color: PALETTE.error, children: [
+          "\u2717 ",
+          notice.text
+        ] })
+      ] }),
+      validating && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+        /* @__PURE__ */ jsx15(Text14, { children: " " }),
+        /* @__PURE__ */ jsx15(Text14, { color: PALETTE.accent, children: "Validating credentials..." })
+      ] }),
+      children,
+      /* @__PURE__ */ jsx15(Text14, { children: " " }),
+      /* @__PURE__ */ jsx15(
+        ControlHints,
+        {
+          hints: [
+            { keys: "\u2191/\u2193", label: "move" },
+            { keys: "\u23CE", label: MENU[focus].label.toLowerCase() },
+            { keys: "Esc", label: "back" }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
 function CredentialsScreen({
   onDone,
   onBack,
@@ -19823,6 +19886,7 @@ function CredentialsScreen({
   const [notice, setNotice] = useState9(null);
   const [validating, setValidating] = useState9(false);
   const prefilled = initialValues.spaceId !== "" && initialValues.cmaToken !== "";
+  const [editing, setEditing] = useState9(!prefilled);
   const submit = async () => {
     const credentials = normalize(values);
     if (missingField(credentials)) {
@@ -19835,12 +19899,27 @@ function CredentialsScreen({
     if (result.ok) onDone({ skipped: false, credentials });
     else setNotice({ kind: "error", text: result.error });
   };
+  const subtitle = prefilled ? "Credentials pre-filled from the configuration settings." : "Enter the Contentful space you want to import into.";
+  const choose = (choice) => {
+    if (choice === "continue") void submit();
+    else if (choice === "edit") {
+      setNotice(null);
+      setEditing(true);
+    } else if (choice === "skip") onDone({ skipped: true });
+    else onBack();
+  };
+  if (!editing) {
+    return /* @__PURE__ */ jsx15(CredentialsReview, { values, subtitle, notice, validating, onChoose: choose, children: !isUnchanged(normalize(values), initialValues) && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+      /* @__PURE__ */ jsx15(Text14, { children: " " }),
+      /* @__PURE__ */ jsx15(Text14, { color: PALETTE.muted, children: "Changed values are saved after they validate." })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs14(
     FieldForm,
     {
       header: /* @__PURE__ */ jsx15(StepHeader, { step: "setup" }),
       title: "Contentful Credentials",
-      subtitle: prefilled ? "Credentials pre-filled from the configuration settings." : "Enter the Contentful space you want to import into.",
+      subtitle,
       fields: FIELDS2,
       values,
       onChange: (key, value) => {
@@ -19850,10 +19929,8 @@ function CredentialsScreen({
       enterAdvances: true,
       onSave: () => void submit(),
       saveLabel: "continue",
-      onSkip: () => onDone({ skipped: true }),
-      skipLabel: "skip, save files only",
-      onQuit: onBack,
-      quitLabel: "back",
+      onQuit: prefilled ? () => setEditing(false) : onBack,
+      quitLabel: prefilled ? "stop editing" : "back",
       notice,
       busy: validating,
       children: [
@@ -19874,12 +19951,13 @@ function CredentialsScreen({
     }
   );
 }
-var FIELDS2;
+var FIELDS2, MENU;
 var init_screen5 = __esm({
   "packages/experience-design-system-cli/src/tui/import/steps/04-credentials/screen.tsx"() {
     "use strict";
     init_theme();
     init_FieldForm();
+    init_ControlHints();
     init_StepHeader();
     init_logic8();
     init_validate4();
@@ -19889,6 +19967,12 @@ var init_screen5 = __esm({
       { key: "cmaToken", label: "CMA Token", masked: true },
       { key: "host", label: "API Host", hint: "(default: api.contentful.com \xB7 EU spaces: api.eu.contentful.com)" }
     ];
+    MENU = [
+      { choice: "continue", label: "Continue", description: "Check the credentials and go on" },
+      { choice: "edit", label: "Edit", description: "Change the credentials" },
+      { choice: "skip", label: "Skip", description: "Save files only, nothing is pushed" },
+      { choice: "quit", label: "Quit", description: "Go back" }
+    ];
   }
 });
 
@@ -20498,7 +20582,7 @@ var init_columns = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/sidebar/components/windowed-panel.tsx
-import { Box as Box14, Text as Text15 } from "ink";
+import { Box as Box15, Text as Text15 } from "ink";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function terminalPanelHeight(rows, reservedRows = 4) {
   return Math.max(MIN_TERMINAL_PANEL_HEIGHT, rows - reservedRows);
@@ -20515,7 +20599,7 @@ function FixedPanel({
   children
 }) {
   return /* @__PURE__ */ jsx17(
-    Box14,
+    Box15,
     {
       flexDirection: "column",
       width,
@@ -20551,7 +20635,7 @@ function WindowedPanelHeader({
   width,
   focused
 }) {
-  return /* @__PURE__ */ jsxs15(Box14, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx17(Text15, { bold: true, color: PALETTE.accent, inverse: focused, children: title }),
     /* @__PURE__ */ jsx17(Text15, { color: PALETTE.muted, children: "\u2500".repeat(Math.max(0, width - 2)) })
   ] });
@@ -20578,7 +20662,7 @@ var init_windowed_panel = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/panels/added-column.tsx
 import React10 from "react";
-import { Box as Box15, Text as Text16 } from "ink";
+import { Box as Box16, Text as Text16 } from "ink";
 import figures2 from "figures";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function AddedColumn(props) {
@@ -20597,7 +20681,7 @@ function AddedColumn(props) {
       const style = sideColumnLabelStyle({ isCycle: entry.isCycle, isSelected, focused });
       return /* @__PURE__ */ jsxs16(React10.Fragment, { children: [
         showSeparator && /* @__PURE__ */ jsx18(Text16, { color: PALETTE.muted, children: "\u2500".repeat(Math.max(0, width - 2)) }),
-        /* @__PURE__ */ jsxs16(Box15, { children: [
+        /* @__PURE__ */ jsxs16(Box16, { children: [
           isCursor ? /* @__PURE__ */ jsx18(Text16, { color: PALETTE.accent, bold: true, children: figures2.pointer }) : /* @__PURE__ */ jsx18(Text16, { children: " " }),
           reserveAiBadge && (aiFlagged ? /* @__PURE__ */ jsx18(Text16, { color: PALETTE.warning, bold: true, children: " [\xD7]" }) : /* @__PURE__ */ jsx18(Text16, { children: "    " })),
           entry.isCycle && /* @__PURE__ */ jsx18(Text16, { color: isCursor ? PALETTE.accent : PALETTE.warning, bold: true, underline: style.nameUnderline, children: " \u26A0" }),
@@ -20628,7 +20712,7 @@ var init_added_column = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/panels/cycles-panel.tsx
-import { Box as Box16, Text as Text17 } from "ink";
+import { Box as Box17, Text as Text17 } from "ink";
 import figures3 from "figures";
 import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function cycleLabel(cycle, index) {
@@ -20641,7 +20725,7 @@ function cycleLabel(cycle, index) {
   return `Cycle ${index + 1}: ${parts.join(" \u2192 ")}`;
 }
 function CyclesPanel({ cycles, cursor }) {
-  return /* @__PURE__ */ jsxs17(Box16, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.warning, paddingX: 1, marginTop: 1, children: [
+  return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.warning, paddingX: 1, marginTop: 1, children: [
     /* @__PURE__ */ jsx19(Text17, { bold: true, color: PALETTE.warning, children: `Cycles detected (${cycles.length}):` }),
     /* @__PURE__ */ jsx19(Text17, { children: " " }),
     cycles.map((cycle, i) => {
@@ -20662,10 +20746,10 @@ var init_cycles_panel = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/panels/reject-prompt.tsx
-import { Box as Box17, Text as Text18 } from "ink";
+import { Box as Box18, Text as Text18 } from "ink";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function RejectPrompt({ pending }) {
-  return /* @__PURE__ */ jsxs18(Box17, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.warning, paddingX: 1, marginTop: 1, children: [
+  return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.warning, paddingX: 1, marginTop: 1, children: [
     /* @__PURE__ */ jsx20(Text18, { bold: true, color: PALETTE.warning, children: `Rejecting ${pending.target} will:` }),
     pending.ancestors.length > 0 && /* @__PURE__ */ jsx20(Text18, { children: `- Reject ancestors: ${pending.ancestors.join(", ")}` }),
     pending.descendants.length > 0 && /* @__PURE__ */ jsx20(Text18, { children: `- Deselect descendants: ${pending.descendants.join(", ")}` }),
@@ -20705,7 +20789,7 @@ var init_CompactControlBar = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/sidebar/components/CounterStrip.tsx
-import { Box as Box18, Text as Text19 } from "ink";
+import { Box as Box19, Text as Text19 } from "ink";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function CounterStrip(props) {
   const { counters, totalWidth } = props;
@@ -20714,7 +20798,7 @@ function CounterStrip(props) {
   const labelRej = condensed ? "Rej" : "Rejected";
   const labelUnd = condensed ? "Und" : "Undecided";
   const sep = condensed ? " | " : "    ";
-  return /* @__PURE__ */ jsx22(Box18, { children: /* @__PURE__ */ jsxs19(Text19, { children: [
+  return /* @__PURE__ */ jsx22(Box19, { children: /* @__PURE__ */ jsxs19(Text19, { children: [
     /* @__PURE__ */ jsxs19(Text19, { color: PALETTE.muted, children: [
       labelGrp,
       " "
@@ -20744,7 +20828,7 @@ var init_CounterStrip = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/sidebar/components/GotoBanner.tsx
 import figures4 from "figures";
-import { Box as Box19, Text as Text20 } from "ink";
+import { Box as Box20, Text as Text20 } from "ink";
 import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function windowStart(rowCount, highlightIndex, maxRows) {
   if (rowCount <= maxRows) return 0;
@@ -20777,7 +20861,7 @@ function GotoBanner({
   const moreAbove = start;
   const moreBelow = rows.length - end;
   return /* @__PURE__ */ jsxs20(
-    Box19,
+    Box20,
     {
       flexDirection: "column",
       borderStyle: "single",
@@ -21188,7 +21272,7 @@ var init_badge = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/sidebar/components/GroupedSidebar.tsx
 import figures5 from "figures";
-import { Box as Box20, Text as Text22 } from "ink";
+import { Box as Box21, Text as Text22 } from "ink";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function hasDirectChild(node) {
   return node.slots.some((slot) => (slot.allowedComponents ?? []).some((target) => target !== node.name));
@@ -21639,7 +21723,7 @@ function GroupedSidebar(props) {
         isOwn: rs?.isOwn ?? false,
         isCursor
       });
-      return /* @__PURE__ */ jsxs21(Box20, { children: [
+      return /* @__PURE__ */ jsxs21(Box21, { children: [
         isCursor ? /* @__PURE__ */ jsx25(Text22, { color: PALETTE.accent, bold: true, children: figures5.pointer }) : /* @__PURE__ */ jsx25(Text22, { children: " " }),
         /* @__PURE__ */ jsx25(PreviewBadge, { badge, highlighted: isSelected }),
         selectionStateByKey !== void 0 && (selGlyph && !isSynthetic ? /* @__PURE__ */ jsx25(Text22, { color: !isSelected && selDim ? PALETTE.muted : selColor, bold: selBold, children: " " + selGlyph }) : /* @__PURE__ */ jsx25(Text22, { children: "    " })),
@@ -21790,7 +21874,7 @@ var init_use_terminal_size = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/sidebar/components/HelpOverlay.tsx
 import React11 from "react";
-import { Box as Box21, Text as Text23 } from "ink";
+import { Box as Box22, Text as Text23 } from "ink";
 import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function HelpOverlay(props) {
   const { onClose } = props;
@@ -21803,7 +21887,7 @@ function HelpOverlay(props) {
   }, props.handleInput !== false);
   if (props.sections) {
     return /* @__PURE__ */ jsxs22(
-      Box21,
+      Box22,
       {
         flexDirection: "column",
         borderStyle: "round",
@@ -21824,7 +21908,7 @@ function HelpOverlay(props) {
   }
   const mode = props.mode;
   return /* @__PURE__ */ jsxs22(
-    Box21,
+    Box22,
     {
       flexDirection: "column",
       borderStyle: "round",
@@ -21937,7 +22021,7 @@ var init_sidebar_input = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/sidebar/components/SearchMatchSummary.tsx
-import { Box as Box22, Text as Text24 } from "ink";
+import { Box as Box23, Text as Text24 } from "ink";
 import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function SearchMatchSummary({
   open,
@@ -21950,7 +22034,7 @@ function SearchMatchSummary({
 }) {
   if (hidden) return null;
   return /* @__PURE__ */ jsxs23(Fragment4, { children: [
-    open && /* @__PURE__ */ jsxs23(Box22, { marginTop, flexDirection: "column", children: [
+    open && /* @__PURE__ */ jsxs23(Box23, { marginTop, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs23(Text24, { children: [
         `/${query}`,
         /* @__PURE__ */ jsx27(Text24, { color: PALETTE.accent, children: "\u258E" }),
@@ -21959,7 +22043,7 @@ function SearchMatchSummary({
       ] }),
       autocompleteCandidates.length > 1 && /* @__PURE__ */ jsx27(Text24, { color: PALETTE.muted, children: `  possibilities: ${autocompleteCandidates.join(" \xB7 ").slice(0, 120)}` })
     ] }),
-    !open && query && /* @__PURE__ */ jsx27(Box22, { marginTop, children: /* @__PURE__ */ jsx27(Text24, { children: `/${query}${formatSearchMatchSummary(matches, total)} \xB7 [Esc] clear` }) })
+    !open && query && /* @__PURE__ */ jsx27(Box23, { marginTop, children: /* @__PURE__ */ jsx27(Text24, { children: `/${query}${formatSearchMatchSummary(matches, total)} \xB7 [Esc] clear` }) })
   ] });
 }
 var init_SearchMatchSummary = __esm({
@@ -23219,11 +23303,11 @@ var init_use_scope_gate = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/07-scope-gate/screen.tsx
-import { Box as Box23, Text as Text25 } from "ink";
+import { Box as Box24, Text as Text25 } from "ink";
 import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function ScopeGateScreen(props) {
   if (props.components.length === 0) {
-    return /* @__PURE__ */ jsx28(Box23, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx28(Text25, { color: PALETTE.error, children: "Error: no components found for this session \u2014 please re-run analyze extract." }) });
+    return /* @__PURE__ */ jsx28(Box24, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx28(Text25, { color: PALETTE.error, children: "Error: no components found for this session \u2014 please re-run analyze extract." }) });
   }
   return /* @__PURE__ */ jsx28(ScopeGateView, { ...props });
 }
@@ -23233,18 +23317,18 @@ function ScopeGateView({ components, onConfirm, onQuit }) {
   if (gate.showHelp) {
     return /* @__PURE__ */ jsx28(HelpOverlay, { sections: HELP_SECTIONS, handleInput: false, onClose: gate.closeHelp });
   }
-  return /* @__PURE__ */ jsxs24(Box23, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs24(Box24, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx28(StepHeader, { step: "scope-gate" }),
-    /* @__PURE__ */ jsxs24(Box23, { flexDirection: "column", paddingX: 2, children: [
-      /* @__PURE__ */ jsxs24(Box23, { flexDirection: "row", flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsxs24(Box24, { flexDirection: "column", paddingX: 2, children: [
+      /* @__PURE__ */ jsxs24(Box24, { flexDirection: "row", flexWrap: "wrap", children: [
         /* @__PURE__ */ jsx28(CounterStrip, { counters, totalWidth: gate.totalWidth }),
         gate.aiExcludedCount > 0 && /* @__PURE__ */ jsxs24(Text25, { color: PALETTE.muted, children: [
           `${gate.aiExcludedCount} component${gate.aiExcludedCount === 1 ? "" : "s"} flagged by AI`,
           gate.aiRows.length > 0 && /* @__PURE__ */ jsx28(Text25, { color: PALETTE.accent, children: " \u2014 press [x] to see why" })
         ] })
       ] }),
-      graph.cycles.length > 0 && /* @__PURE__ */ jsx28(Box23, { marginTop: 1, children: /* @__PURE__ */ jsx28(Text25, { color: PALETTE.muted, children: "If you must have components with cycles, select them together into the generate step and then use the editor to fix them." }) }),
-      /* @__PURE__ */ jsxs24(Box23, { flexDirection: "row", alignItems: "stretch", children: [
+      graph.cycles.length > 0 && /* @__PURE__ */ jsx28(Box24, { marginTop: 1, children: /* @__PURE__ */ jsx28(Text25, { color: PALETTE.muted, children: "If you must have components with cycles, select them together into the generate step and then use the editor to fix them." }) }),
+      /* @__PURE__ */ jsxs24(Box24, { flexDirection: "row", alignItems: "stretch", children: [
         gate.aiRationalePanelOpen ? /* @__PURE__ */ jsx28(
           GotoBanner,
           {
@@ -23284,7 +23368,7 @@ function ScopeGateView({ components, onConfirm, onQuit }) {
           }
         ),
         columnPlan.layout === "two-column" && /* @__PURE__ */ jsxs24(Fragment5, { children: [
-          /* @__PURE__ */ jsx28(Box23, { width: 2, flexShrink: 0 }),
+          /* @__PURE__ */ jsx28(Box24, { width: 2, flexShrink: 0 }),
           /* @__PURE__ */ jsx28(
             AddedColumn,
             {
@@ -23474,7 +23558,7 @@ function formatAcceptanceSummary(counts) {
 function describeGeneration(input) {
   const agent = capitalize(input.agent);
   return `${formatAcceptanceSummary({ accepted: input.acceptedCount, autoRejected: 0 })}
-${agent} is mapping your selected components to Contentful's Component Definition Format (CDF).${input.hasTokens ? " Using your design tokens for prop resolution." : ""}`;
+${agent} is reading each selected component and writing a Contentful component definition for it${input.hasTokens ? " Using your design tokens for prop resolution." : ""}`;
 }
 function progressRows2(progress, agent) {
   const name = capitalize(agent);
@@ -24574,7 +24658,7 @@ var init_scroll_offset = __esm({
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/FieldEditor.tsx
 import React12, { useEffect as useEffect11, useLayoutEffect as useLayoutEffect2, useState as useState18 } from "react";
 import figures6 from "figures";
-import { Box as Box24, measureElement, Text as Text26 } from "ink";
+import { Box as Box25, measureElement, Text as Text26 } from "ink";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function createCommonRowProps(selected, focusLevel, editingField, textCursor, valueCursor, cursorVisible, editingValue, valueText, width) {
   return {
@@ -24713,14 +24797,14 @@ function serializeState(state2, originalJson) {
   return JSON.stringify(entry, null, 2);
 }
 function Picker({ value, active }) {
-  return /* @__PURE__ */ jsxs25(Box24, { children: [
+  return /* @__PURE__ */ jsxs25(Box25, { children: [
     active && /* @__PURE__ */ jsx31(Text26, { color: PALETTE.warning, children: "\u2039" }),
     /* @__PURE__ */ jsx31(Text26, { color: active ? PALETTE.warning : void 0, bold: active, children: value }),
     active && /* @__PURE__ */ jsx31(Text26, { color: PALETTE.warning, children: "\u203A" })
   ] });
 }
 function Toggle({ value, active }) {
-  return /* @__PURE__ */ jsx31(Box24, { children: /* @__PURE__ */ jsx31(Text26, { color: active ? PALETTE.warning : value ? PALETTE.success : PALETTE.border, children: value ? "[\u2713]" : "[ ]" }) });
+  return /* @__PURE__ */ jsx31(Box25, { children: /* @__PURE__ */ jsx31(Text26, { color: active ? PALETTE.warning : value ? PALETTE.success : PALETTE.border, children: value ? "[\u2713]" : "[ ]" }) });
 }
 function InlinePropField({
   label,
@@ -24729,7 +24813,7 @@ function InlinePropField({
   flexible = false,
   width
 }) {
-  return /* @__PURE__ */ jsxs25(Box24, { width, gap: 1, flexShrink: flexible ? 1 : 0, flexGrow: flexible ? 1 : 0, flexWrap: "wrap", children: [
+  return /* @__PURE__ */ jsxs25(Box25, { width, gap: 1, flexShrink: flexible ? 1 : 0, flexGrow: flexible ? 1 : 0, flexWrap: "wrap", children: [
     /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, wrap: "truncate-end", children: [
       focused ? "\u203A " : "  ",
       label
@@ -24750,7 +24834,7 @@ function DefaultValueRow({
   active,
   focused
 }) {
-  return /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexWrap: "wrap", flexShrink: 0, children: [
+  return /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexWrap: "wrap", flexShrink: 0, children: [
     /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
       focused ? "\u203A " : "  ",
       "default:"
@@ -24783,7 +24867,7 @@ function ValueInputRow({
   valueText,
   cursorVisible
 }) {
-  return /* @__PURE__ */ jsxs25(Box24, { paddingLeft: 2, children: [
+  return /* @__PURE__ */ jsxs25(Box25, { paddingLeft: 2, children: [
     /* @__PURE__ */ jsx31(Text26, { color: PALETTE.accent, children: mode === "edit" ? "\u270E " : "+ " }),
     /* @__PURE__ */ jsx31(Text26, { children: valueText }),
     /* @__PURE__ */ jsx31(Text26, { inverse: cursorVisible, children: " " })
@@ -24801,7 +24885,7 @@ function EditableListItem({
   if (isBeingEdited) {
     return /* @__PURE__ */ jsx31(ValueInputRow, { mode: "edit", valueText, cursorVisible });
   }
-  return /* @__PURE__ */ jsx31(Box24, { gap: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx31(Text26, { color: active ? PALETTE.accent : void 0, children: active ? `${figures6.pointer} ${value}` : `  ${value}` }) });
+  return /* @__PURE__ */ jsx31(Box25, { gap: 1, paddingLeft: 2, children: /* @__PURE__ */ jsx31(Text26, { color: active ? PALETTE.accent : void 0, children: active ? `${figures6.pointer} ${value}` : `  ${value}` }) });
 }
 function EditableValueList({
   values,
@@ -24815,7 +24899,7 @@ function EditableValueList({
   showAddInput
 }) {
   return /* @__PURE__ */ jsxs25(Fragment6, { children: [
-    values.length === 0 && !editingValue && (emptyPaddingLeft === void 0 ? /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: emptyMessage }) : /* @__PURE__ */ jsx31(Box24, { paddingLeft: emptyPaddingLeft, children: /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: emptyMessage }) })),
+    values.length === 0 && !editingValue && (emptyPaddingLeft === void 0 ? /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: emptyMessage }) : /* @__PURE__ */ jsx31(Box25, { paddingLeft: emptyPaddingLeft, children: /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: emptyMessage }) })),
     values.map((value, index) => /* @__PURE__ */ jsx31(
       EditableListItem,
       {
@@ -24840,7 +24924,7 @@ function DefaultSubRow({
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
   if (prop.type === "richtext" || prop.type === "media" || prop.type === "link") {
-    return /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexShrink: 0, children: [
+    return /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
         focused ? "\u203A " : "  ",
         "default:"
@@ -24854,7 +24938,7 @@ function DefaultSubRow({
   }
   if (prop.type === "enum") {
     if (prop.values.length === 0) {
-      return /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexShrink: 0, children: [
+      return /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexShrink: 0, children: [
         /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
           focused ? "\u203A " : "  ",
           "default:"
@@ -24867,19 +24951,19 @@ function DefaultSubRow({
   }
   const value = typeof prop.default === "string" ? prop.default : "";
   if (active) {
-    return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "row", flexShrink: 0, children: [
+    return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "row", flexShrink: 0, children: [
       /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
         focused ? "\u203A " : "  ",
         "default:"
       ] }),
-      /* @__PURE__ */ jsxs25(Box24, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+      /* @__PURE__ */ jsxs25(Box25, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
         /* @__PURE__ */ jsx31(Text26, { children: value.slice(0, textCursor) }),
         /* @__PURE__ */ jsx31(Text26, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
         /* @__PURE__ */ jsx31(Text26, { children: value.slice(textCursor + 1) })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexShrink: 0, children: [
+  return /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexShrink: 0, children: [
     /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
       focused ? "\u203A " : "  ",
       "default:"
@@ -24899,7 +24983,7 @@ function DescriptionField({
   paddingLeft = 2
 }) {
   if (compact) {
-    return /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
+    return /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
         focused ? "\u203A " : "  ",
         label
@@ -24907,7 +24991,7 @@ function DescriptionField({
       /* @__PURE__ */ jsx31(Text26, { wrap: "truncate-end", color: value ? void 0 : PALETTE.muted, children: value || "\u2014" })
     ] });
   }
-  return /* @__PURE__ */ jsxs25(Box24, { paddingLeft, flexDirection: "column", width, flexShrink: 0, children: [
+  return /* @__PURE__ */ jsxs25(Box25, { paddingLeft, flexDirection: "column", width, flexShrink: 0, children: [
     /* @__PURE__ */ jsxs25(Text26, { color: focused ? PALETTE.warning : PALETTE.muted, bold: focused, children: [
       focused ? "\u203A " : "  ",
       label
@@ -24943,8 +25027,8 @@ function PropRow({
 }) {
   const descFocused = activeField === "description";
   const descActive = editingField && descFocused;
-  return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", width, flexShrink: 0, children: [
-    /* @__PURE__ */ jsx31(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: /* @__PURE__ */ jsx31(RowLabel, { name: prop.name, selected }) }),
+  return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsx31(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: /* @__PURE__ */ jsx31(RowLabel, { name: prop.name, selected }) }),
     /* @__PURE__ */ jsx31(
       DescriptionField,
       {
@@ -24958,7 +25042,7 @@ function PropRow({
         paddingLeft: 0
       }
     ),
-    /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsx31(
         RequiredField,
         {
@@ -24971,7 +25055,7 @@ function PropRow({
       /* @__PURE__ */ jsx31(InlinePropField, { label: "type:", focused: activeField === "type", children: editingField && activeField === "type" ? /* @__PURE__ */ jsx31(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx31(Text26, { children: prop.type }) })
     ] }),
     prop.type === "token" && /* @__PURE__ */ jsx31(InlinePropField, { label: "kind:", focused: activeField === "tokenKind", width, children: editingField && activeField === "tokenKind" ? /* @__PURE__ */ jsx31(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx31(Text26, { wrap: "wrap", children: prop.tokenKind || "\u2014" }) }),
-    prop.type === "enum" && /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
+    prop.type === "enum" && /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs25(Text26, { color: activeField === "values" ? PALETTE.warning : PALETTE.muted, bold: activeField === "values", children: [
         activeField === "values" ? "\u203A " : "  ",
         "values:"
@@ -24992,12 +25076,12 @@ function PropRow({
         cursorVisible
       }
     ),
-    prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
+    prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs25(Text26, { color: activeField === "allowed" ? PALETTE.warning : PALETTE.muted, bold: activeField === "allowed", children: [
         activeField === "allowed" ? "\u203A " : "  ",
         "allowed:"
       ] }),
-      editingField && activeField === "allowed" ? /* @__PURE__ */ jsx31(Box24, { width: Math.max(1, width - 4), borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: /* @__PURE__ */ jsx31(Text26, { children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx31(
+      editingField && activeField === "allowed" ? /* @__PURE__ */ jsx31(Box25, { width: Math.max(1, width - 4), borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: /* @__PURE__ */ jsx31(Text26, { children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx31(
         Text26,
         {
           color: activeField !== "allowed" && prop.allowed.length === 0 ? PALETTE.muted : void 0,
@@ -25006,13 +25090,13 @@ function PropRow({
         }
       )
     ] }),
-    selected && showRationale && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx31(Box24, { paddingLeft: 2, children: /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: (() => {
+    selected && showRationale && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx31(Box25, { paddingLeft: 2, children: /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, 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__ */ jsxs25(Box24, { paddingLeft: 2, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs25(Box24, { children: [
+    selected && prop.type === "enum" && activeField === "values" && /* @__PURE__ */ jsxs25(Box25, { paddingLeft: 2, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs25(Box25, { children: [
         /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "values:" }),
         activeField === "values" && /* @__PURE__ */ jsx31(Text26, { children: "  [a] add  [e] edit  [r] remove  [\u2191\u2193] navigate  [K/J] reorder" })
       ] }),
@@ -25046,8 +25130,8 @@ function SlotRow({
   pickerCandidates,
   pickerCursor
 }) {
-  return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", width, flexShrink: 0, children: [
-    /* @__PURE__ */ jsx31(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: /* @__PURE__ */ jsx31(RowLabel, { name: slot.name, selected, trailing: false }) }),
+  return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsx31(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: /* @__PURE__ */ jsx31(RowLabel, { name: slot.name, selected, trailing: false }) }),
     /* @__PURE__ */ jsx31(
       DescriptionField,
       {
@@ -25061,7 +25145,7 @@ function SlotRow({
         paddingLeft: 0
       }
     ),
-    /* @__PURE__ */ jsx31(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx31(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: /* @__PURE__ */ jsx31(
       RequiredField,
       {
         value: slot.required,
@@ -25070,7 +25154,7 @@ function SlotRow({
         activeField
       }
     ) }),
-    !(selected && editingField && activeField === "allowedComponents") && /* @__PURE__ */ jsxs25(Box24, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
+    !(selected && editingField && activeField === "allowedComponents") && /* @__PURE__ */ jsxs25(Box25, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs25(
         Text26,
         {
@@ -25084,8 +25168,8 @@ function SlotRow({
       ),
       slot.allowedComponents.length === 0 ? /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "(any)" }) : /* @__PURE__ */ jsx31(Text26, { wrap: "wrap", children: slot.allowedComponents.join(", ") })
     ] }),
-    selected && editingField && activeField === "allowedComponents" && /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs25(Box24, { children: [
+    selected && editingField && activeField === "allowedComponents" && /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs25(Box25, { children: [
         /* @__PURE__ */ jsxs25(
           Text26,
           {
@@ -25113,7 +25197,7 @@ function SlotRow({
           showAddInput: editingField && activeField === "allowedComponents"
         }
       ),
-      editingField && editingValue?.mode === "add" && activeField === "allowedComponents" && pickerCandidates !== null && /* @__PURE__ */ jsx31(Box24, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "(no valid components to add \u2014 all remaining candidates would create cycles)" }) : (() => {
+      editingField && editingValue?.mode === "add" && activeField === "allowedComponents" && pickerCandidates !== null && /* @__PURE__ */ jsx31(Box25, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, 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__ */ jsx31(Text26, { color: PALETTE.muted, children: "(no candidates match \u2014 Enter to add as free text)" });
@@ -25122,7 +25206,7 @@ function SlotRow({
         const MAX_VISIBLE = 5;
         const start = Math.max(0, Math.min(filtered.length - MAX_VISIBLE, cursor - 2));
         const slice = filtered.slice(start, start + MAX_VISIBLE);
-        return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", children: [
+        return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", children: [
           /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "  candidates (\u2191\u2193 cycle, Enter to add):" }),
           slice.map((name, i) => {
             const absIdx = start + i;
@@ -25955,14 +26039,14 @@ function FieldEditor({
   });
   const innerWidth = Math.max(1, width - 2);
   if (parseErr) {
-    return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.error, children: [
+    return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.error, children: [
       /* @__PURE__ */ jsx31(Text26, { bold: true, color: PALETTE.error, children: "FIELD EDITOR \u2014 parse error" }),
       /* @__PURE__ */ jsx31(Text26, { color: PALETTE.error, children: parseErr }),
       /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "Cannot display structured editor. Fix the JSON first." })
     ] });
   }
   if (props.length === 0 && slots.length === 0) {
-    return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.warning, children: [
+    return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", width, borderStyle: "single", borderColor: PALETTE.warning, children: [
       /* @__PURE__ */ jsx31(Text26, { bold: true, color: PALETTE.warning, children: "FIELD EDITOR \u2014 no fields" }),
       /* @__PURE__ */ jsx31(Text26, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify." }),
       /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "You can add fields manually below or reject this component." }),
@@ -26095,7 +26179,7 @@ function FieldEditor({
   const renderRow = (row, index) => {
     const key = rowKey(row, index);
     if (row.kind === "header") {
-      return /* @__PURE__ */ jsx31(Box24, { flexDirection: "column", paddingTop: 1, children: /* @__PURE__ */ jsx31(Text26, { bold: true, color: PALETTE.success, children: row.label }) }, key);
+      return /* @__PURE__ */ jsx31(Box25, { flexDirection: "column", paddingTop: 1, children: /* @__PURE__ */ jsx31(Text26, { bold: true, color: PALETTE.success, children: row.label }) }, key);
     }
     if (row.kind === "component-description") {
       const isSelected2 = inComponentDesc && active;
@@ -26181,7 +26265,7 @@ function FieldEditor({
       children: [
         hasEmptyProperties && /* @__PURE__ */ jsx31(Text26, { 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." }),
         header,
-        /* @__PURE__ */ jsx31(Box24, { flexDirection: "column", width: innerWidth, flexShrink: 0, children: focusLevel === "field" && !inComponentDesc && currentProp ? /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx31(Box25, { flexDirection: "column", width: innerWidth, flexShrink: 0, children: focusLevel === "field" && !inComponentDesc && currentProp ? /* @__PURE__ */ jsx31(
           PropRow,
           {
             prop: currentProp,
@@ -26217,7 +26301,7 @@ function FieldEditor({
           const absoluteIndex = scrollStart + index;
           const key = rowKey(row, absoluteIndex);
           return /* @__PURE__ */ jsx31(
-            Box24,
+            Box25,
             {
               ref: (node) => {
                 if (node) rowMeasureRefs.current.set(key, node);
@@ -26239,20 +26323,20 @@ function FieldEditor({
           const src = metadata?.componentSource ?? null;
           const headerPath = path5 ?? "<unknown source path>";
           if (!start || !end2 || !src) {
-            return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+            return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
               /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, bold: true, children: `source: ${headerPath}` }),
               /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "(no source location captured for this prop)" }),
               /* @__PURE__ */ jsx31(Text26, { children: "[s] close" })
             ] });
           }
           const lines = src.split("\n").slice(Math.max(0, start - 1), end2);
-          return /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+          return /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
             /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, bold: true, children: `${headerPath}: lines ${start}\u2013${end2}` }),
             lines.map((ln, i) => /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: ln }, `source-line-${i}`)),
             /* @__PURE__ */ jsx31(Text26, { children: "[s] close \xB7 [Esc] close" })
           ] });
         })(),
-        showHelp && /* @__PURE__ */ jsxs25(Box24, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.accent, paddingX: 1, children: [
+        showHelp && /* @__PURE__ */ jsxs25(Box25, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.accent, paddingX: 1, children: [
           /* @__PURE__ */ jsx31(Text26, { bold: true, color: PALETTE.accent, children: "Keybindings" }),
           /* @__PURE__ */ jsx31(Text26, { children: " " }),
           /* @__PURE__ */ jsx31(Text26, { bold: true, children: "Row navigation" }),
@@ -26281,7 +26365,7 @@ function FieldEditor({
           /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: "press ? or Esc to close" })
         ] }),
         validationError && /* @__PURE__ */ jsx31(Text26, { color: PALETTE.error, children: "\u2717 " + validationError }),
-        /* @__PURE__ */ jsx31(Box24, { paddingTop: 1, children: /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: modeLabel }) })
+        /* @__PURE__ */ jsx31(Box25, { paddingTop: 1, children: /* @__PURE__ */ jsx31(Text26, { color: PALETTE.muted, children: modeLabel }) })
       ]
     }
   );
@@ -26338,23 +26422,23 @@ var init_wrap_text = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/RationaleLine.tsx
-import { Box as Box25, Text as Text27 } from "ink";
+import { Box as Box26, Text as Text27 } from "ink";
 import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function RationaleLine({ line, active }) {
   if (line.kind === "blank") {
-    return /* @__PURE__ */ jsx32(Box25, { children: /* @__PURE__ */ jsx32(Text27, { children: " " }) });
+    return /* @__PURE__ */ jsx32(Box26, { children: /* @__PURE__ */ jsx32(Text27, { children: " " }) });
   }
   if (line.kind === "heading") {
-    return /* @__PURE__ */ jsx32(Box25, { children: /* @__PURE__ */ jsx32(Text27, { bold: true, color: active ? PALETTE.accent : PALETTE.muted, children: line.text }) });
+    return /* @__PURE__ */ jsx32(Box26, { children: /* @__PURE__ */ jsx32(Text27, { bold: true, color: active ? PALETTE.accent : PALETTE.muted, children: line.text }) });
   }
   if (line.kind === "label") {
-    return /* @__PURE__ */ jsxs26(Box25, { children: [
+    return /* @__PURE__ */ jsxs26(Box26, { children: [
       line.prefix && /* @__PURE__ */ jsx32(Text27, { children: line.prefix }),
       /* @__PURE__ */ jsx32(Text27, { bold: true, color: active ? line.color : PALETTE.muted, children: line.text }),
       line.suffix && /* @__PURE__ */ jsx32(Text27, { color: PALETTE.muted, children: line.suffix })
     ] });
   }
-  return /* @__PURE__ */ jsx32(Box25, { children: /* @__PURE__ */ jsx32(Text27, { color: !active || line.dim ? PALETTE.muted : void 0, children: line.text }) });
+  return /* @__PURE__ */ jsx32(Box26, { children: /* @__PURE__ */ jsx32(Text27, { color: !active || line.dim ? PALETTE.muted : void 0, children: line.text }) });
 }
 var init_RationaleLine = __esm({
   "packages/experience-design-system-cli/src/tui/import/steps/09-review/components/RationaleLine.tsx"() {
@@ -26364,7 +26448,7 @@ var init_RationaleLine = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/ComponentRationalePanel.tsx
-import { Box as Box26, Text as Text28 } from "ink";
+import { Box as Box27, Text as Text28 } from "ink";
 import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function renderComponentRationaleLines(data, innerWidth) {
   const out = [];
@@ -26433,7 +26517,7 @@ function ComponentRationalePanel({
   const visibleStart = totalLines === 0 ? 0 : scrollOffset + 1;
   const visibleEnd = Math.min(totalLines, scrollOffset + contentHeight);
   return /* @__PURE__ */ jsxs27(
-    Box26,
+    Box27,
     {
       flexDirection: "column",
       width,
@@ -26441,9 +26525,9 @@ function ComponentRationalePanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.text : void 0,
       children: [
-        /* @__PURE__ */ jsx33(Box26, { children: /* @__PURE__ */ jsx33(Text28, { bold: true, color: active ? void 0 : PALETTE.muted, children: `Component rationale: ${data.name}` }) }),
+        /* @__PURE__ */ jsx33(Box27, { children: /* @__PURE__ */ jsx33(Text28, { bold: true, color: active ? void 0 : PALETTE.muted, children: `Component rationale: ${data.name}` }) }),
         visible.map((line, i) => /* @__PURE__ */ jsx33(RationaleLine, { line, active }, i)),
-        /* @__PURE__ */ jsx33(Box26, { children: overflowed ? /* @__PURE__ */ jsx33(Text28, { children: `${visibleStart}-${visibleEnd}/${totalLines}    [\u2191\u2193] scroll    [I/Esc] close` }) : /* @__PURE__ */ jsx33(Text28, { children: "[I/Esc] close" }) })
+        /* @__PURE__ */ jsx33(Box27, { children: overflowed ? /* @__PURE__ */ jsx33(Text28, { children: `${visibleStart}-${visibleEnd}/${totalLines}    [\u2191\u2193] scroll    [I/Esc] close` }) : /* @__PURE__ */ jsx33(Text28, { children: "[I/Esc] close" }) })
       ]
     }
   );
@@ -26473,7 +26557,7 @@ var init_HighlightedLine = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/ScrollablePanel.tsx
-import { Box as Box27, Text as Text30 } from "ink";
+import { Box as Box28, Text as Text30 } from "ink";
 import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 function ScrollablePanel({
   title,
@@ -26487,11 +26571,11 @@ function ScrollablePanel({
   children
 }) {
   const overflowed = totalLines > height;
-  return /* @__PURE__ */ jsxs28(Box27, { flexDirection: "column", width, height: height + 2, borderStyle: "single", borderColor, children: [
-    /* @__PURE__ */ jsxs28(Box27, { children: [
+  return /* @__PURE__ */ jsxs28(Box28, { flexDirection: "column", width, height: height + 2, borderStyle: "single", borderColor, children: [
+    /* @__PURE__ */ jsxs28(Box28, { children: [
       /* @__PURE__ */ jsx35(Text30, { bold: true, color: active ? void 0 : PALETTE.muted, children: title }),
       overflowed && /* @__PURE__ */ jsxs28(Fragment8, { children: [
-        /* @__PURE__ */ jsx35(Box27, { flexGrow: 1 }),
+        /* @__PURE__ */ jsx35(Box28, { flexGrow: 1 }),
         /* @__PURE__ */ jsx35(Text30, { color: active ? void 0 : PALETTE.muted, children: `\u2195 ${visibleStart}-${visibleEnd}/${totalLines}` })
       ] })
     ] }),
@@ -26506,7 +26590,7 @@ var init_ScrollablePanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/JsonPanel.tsx
-import { Box as Box28 } from "ink";
+import { Box as Box29 } from "ink";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function highlightJson(line) {
   const parts = [];
@@ -26571,7 +26655,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__ */ jsx36(Box28, { children: highlightJson(truncated) }, i);
+        return /* @__PURE__ */ jsx36(Box29, { children: highlightJson(truncated) }, i);
       })
     }
   );
@@ -26645,7 +26729,7 @@ var init_RationalePanel = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/TokenReviewPanel.tsx
 import figures7 from "figures";
-import { Box as Box29, Text as Text31 } from "ink";
+import { Box as Box30, Text as Text31 } from "ink";
 import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 function TokenReviewPanel({
   componentName,
@@ -26666,7 +26750,7 @@ function TokenReviewPanel({
     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__ */ jsxs29(
-      Box29,
+      Box30,
       {
         flexDirection: "column",
         width,
@@ -26682,7 +26766,7 @@ function TokenReviewPanel({
             const pathIndex = scrollStart + i;
             const checked = editSelection.has(path5);
             const focused = pathIndex === editCursor;
-            return /* @__PURE__ */ jsx38(Box29, { children: /* @__PURE__ */ jsx38(
+            return /* @__PURE__ */ jsx38(Box30, { children: /* @__PURE__ */ jsx38(
               Text31,
               {
                 color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted,
@@ -26700,7 +26784,7 @@ function TokenReviewPanel({
     );
   }
   return /* @__PURE__ */ jsxs29(
-    Box29,
+    Box30,
     {
       flexDirection: "column",
       width,
@@ -26712,8 +26796,8 @@ function TokenReviewPanel({
         suggestions.length === 0 && /* @__PURE__ */ jsx38(Text31, { color: PALETTE.muted, children: "(no token suggestions for this component)" }),
         suggestions.map((s, i) => {
           const focused = i === selectedRow;
-          return /* @__PURE__ */ jsxs29(Box29, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx38(Box29, { children: /* @__PURE__ */ jsx38(Text31, { color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted, bold: focused, children: `${focused ? figures7.pointer : " "} ${s.propName}` }) }),
+          return /* @__PURE__ */ jsxs29(Box30, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsx38(Box30, { children: /* @__PURE__ */ jsx38(Text31, { color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted, bold: focused, children: `${focused ? figures7.pointer : " "} ${s.propName}` }) }),
             /* @__PURE__ */ jsx38(Text31, { color: PALETTE.muted, children: `  suggested: ${s.suggested.join(", ")}` }),
             /* @__PURE__ */ jsx38(Text31, { color: PALETTE.muted, children: `  allowed: ${s.allowed.join(", ")}` })
           ] }, s.propName);
@@ -26937,7 +27021,7 @@ var init_ReviewDetailsEditor = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/ReviewComponentPanel.tsx
-import { Box as Box30, Text as Text33 } from "ink";
+import { Box as Box31, Text as Text33 } from "ink";
 import { Fragment as Fragment10, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function buildReviewFieldEditor(reviewEditor, selectedJson, onExit, overrides = {}) {
   return {
@@ -26981,7 +27065,7 @@ function ReviewEmptyComponentsWarning({
   return /* @__PURE__ */ jsx41(Text33, { color: PALETTE.warning, children: `\u26A0 ${count} component${count === 1 ? "" : "s"} had no classifiable props \u2014 review with care` });
 }
 function ReviewNoSelection() {
-  return /* @__PURE__ */ jsx41(Box30, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx41(Text33, { color: PALETTE.muted, children: "No component selected" }) });
+  return /* @__PURE__ */ jsx41(Box31, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx41(Text33, { color: PALETTE.muted, children: "No component selected" }) });
 }
 function ReviewFinalizeError({
   message,
@@ -27009,9 +27093,9 @@ function ReviewComponentTitle({
   slotCount,
   sidebarFocused
 }) {
-  return /* @__PURE__ */ jsxs31(Box30, { paddingLeft: 2, paddingBottom: 1, children: [
+  return /* @__PURE__ */ jsxs31(Box31, { paddingLeft: 2, paddingBottom: 1, children: [
     /* @__PURE__ */ jsx41(Text33, { bold: true, wrap: "truncate-end", children: selectedKey }),
-    /* @__PURE__ */ jsx41(Box30, { flexGrow: 1 }),
+    /* @__PURE__ */ jsx41(Box31, { flexGrow: 1 }),
     /* @__PURE__ */ jsxs31(Text33, { color: PALETTE.muted, wrap: "truncate-end", children: [
       propCount,
       " prop",
@@ -27043,8 +27127,8 @@ function ReviewComponentPanel({
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
   const contentHeight = Math.max(1, height - 2);
   const contentWidth = Math.max(1, width - 1);
-  return /* @__PURE__ */ jsx41(FixedPanel, { width, height, borderStyle: void 0, paddingLeft: 1, children: /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", width: contentWidth, height, flexShrink: 0, overflowY: "hidden", children: [
-    /* @__PURE__ */ jsx41(Box30, { width: contentWidth, height: contentHeight, flexShrink: 0, overflowY: "hidden", children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx41(FixedPanel, { width, height, borderStyle: void 0, paddingLeft: 1, children: /* @__PURE__ */ jsxs31(Box31, { flexDirection: "column", width: contentWidth, height, flexShrink: 0, overflowY: "hidden", children: [
+    /* @__PURE__ */ jsx41(Box31, { width: contentWidth, height: contentHeight, flexShrink: 0, overflowY: "hidden", children: /* @__PURE__ */ jsx41(
       ReviewDetailsEditor,
       {
         selectedKey,
@@ -27068,8 +27152,8 @@ function ReviewComponentPanel({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx41(Box30, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx41(Text33, { color: saveError ? PALETTE.error : void 0, wrap: "truncate-end", children: saveError ? "\u2717 " + saveError : " " }) }),
-    /* @__PURE__ */ jsx41(Box30, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx41(Text33, { color: PALETTE.muted, wrap: "truncate-end", children: /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx41(Box31, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx41(Text33, { color: saveError ? PALETTE.error : void 0, wrap: "truncate-end", children: saveError ? "\u2717 " + saveError : " " }) }),
+    /* @__PURE__ */ jsx41(Box31, { width: contentWidth, height: 1, flexShrink: 0, children: /* @__PURE__ */ jsx41(Text33, { color: PALETTE.muted, wrap: "truncate-end", children: /* @__PURE__ */ jsx41(
       ReviewPanelFooter,
       {
         reviewEditor,
@@ -27092,7 +27176,7 @@ var init_ReviewComponentPanel = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/ReviewStatus.tsx
-import { Box as Box31, Text as Text34 } from "ink";
+import { Box as Box32, Text as Text34 } from "ink";
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 function countReviewStatuses(entries) {
   return entries.reduce(
@@ -27106,10 +27190,10 @@ function countReviewStatuses(entries) {
   );
 }
 function ReviewLoadingState() {
-  return /* @__PURE__ */ jsx42(Box31, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx42(Text34, { color: PALETTE.muted, children: "Loading generated definitions..." }) });
+  return /* @__PURE__ */ jsx42(Box32, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx42(Text34, { color: PALETTE.muted, children: "Loading generated definitions..." }) });
 }
 function ReviewLoadError({ message }) {
-  return /* @__PURE__ */ jsxs32(Box31, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+  return /* @__PURE__ */ jsxs32(Box32, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsx42(Text34, { color: PALETTE.error, children: message }),
     /* @__PURE__ */ jsx42(Text34, { children: " " }),
     /* @__PURE__ */ jsx42(ControlHints, { hints: [{ keys: "q / Enter / Esc", label: "Quit" }] })
@@ -27336,7 +27420,7 @@ var init_run_live_preview = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/FinalizeDialog.tsx
-import { Box as Box32, Text as Text35 } from "ink";
+import { Box as Box33, Text as Text35 } from "ink";
 import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 function FinalizeDialog({
   accepted,
@@ -27365,7 +27449,7 @@ 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__ */ jsx43(Box32, { width: "100%", paddingX: 2, children: /* @__PURE__ */ jsxs33(Box32, { flexDirection: "column", alignItems: "flex-start", children: [
+  return /* @__PURE__ */ jsx43(Box33, { width: "100%", paddingX: 2, children: /* @__PURE__ */ jsxs33(Box33, { flexDirection: "column", alignItems: "flex-start", children: [
     /* @__PURE__ */ jsx43(Text35, { bold: true, children: "Finalize" }),
     /* @__PURE__ */ jsx43(Text35, { children: " " }),
     /* @__PURE__ */ jsxs33(Text35, { children: [
@@ -27395,7 +27479,7 @@ function FinalizeDialog({
       /* @__PURE__ */ jsx43(Text35, { color: PALETTE.warning, children: "Only explicitly accepted components ship." }),
       /* @__PURE__ */ jsx43(Text35, { children: " " })
     ] }),
-    /* @__PURE__ */ jsxs33(Box32, { flexDirection: "column", height: 2, children: [
+    /* @__PURE__ */ jsxs33(Box33, { flexDirection: "column", height: 2, children: [
       previewStatus === "running" ? /* @__PURE__ */ jsx43(Text35, { color: PALETTE.muted, children: "Previewing deletions against the target space\u2026" }) : previewStatus === "error" ? /* @__PURE__ */ jsx43(Text35, { color: PALETTE.warning, children: "\u26A0 Could not preview deletions (the push will still proceed)." }) : /* @__PURE__ */ jsx43(Text35, { children: " " }),
       /* @__PURE__ */ jsx43(Text35, { children: " " })
     ] }),
@@ -27866,7 +27950,7 @@ var init_use_review_surface_state = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/QuitDialog.tsx
-import { Box as Box33, Text as Text36 } from "ink";
+import { Box as Box34, Text as Text36 } from "ink";
 import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 function QuitDialog({ hasUnsavedDrafts, onConfirm, onCancel }) {
   useImmediateInput((input, key) => {
@@ -27876,7 +27960,7 @@ function QuitDialog({ hasUnsavedDrafts, onConfirm, onCancel }) {
       onCancel();
     }
   });
-  return /* @__PURE__ */ jsxs34(Box33, { flexDirection: "column", borderStyle: "round", padding: 1, width: 50, children: [
+  return /* @__PURE__ */ jsxs34(Box34, { flexDirection: "column", borderStyle: "round", padding: 1, width: 50, children: [
     /* @__PURE__ */ jsx44(Text36, { bold: true, children: "\u2500".repeat(19) + " Quit " + "\u2500".repeat(19) }),
     /* @__PURE__ */ jsx44(Text36, { children: " " }),
     hasUnsavedDrafts ? /* @__PURE__ */ jsxs34(Fragment12, { children: [
@@ -27905,7 +27989,7 @@ var init_QuitDialog = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/ReviewDialogs.tsx
-import { Box as Box34, Text as Text37 } from "ink";
+import { Box as Box35, Text as Text37 } from "ink";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 function ReviewFinalizeDialogs({
   showFinalize,
@@ -27962,7 +28046,7 @@ function ReviewStepDialogs({
 }
 function ReviewReloadDialog({ open }) {
   if (!open) return null;
-  return /* @__PURE__ */ jsxs35(Box34, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs35(Box35, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
     /* @__PURE__ */ jsx45(Text37, { bold: true, color: PALETTE.warning, children: "Reload from saved state?" }),
     /* @__PURE__ */ jsx45(Text37, { children: "Unsaved in-memory changes will be lost." }),
     /* @__PURE__ */ jsx45(Text37, { children: " " }),
@@ -28369,7 +28453,7 @@ var init_use_review_preview = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/components/LivePreviewSummary.tsx
-import { Box as Box35, Text as Text38 } from "ink";
+import { Box as Box36, Text as Text38 } from "ink";
 import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 function LivePreviewSummary({
   enabled,
@@ -28387,7 +28471,7 @@ function LivePreviewSummary({
   if (disabled) return /* @__PURE__ */ jsx46(Text38, { color: PALETTE.muted, children: "Preview: disabled (creds rejected)" });
   if (status === "running" && !hasCounts) return /* @__PURE__ */ jsx46(Text38, { color: PALETTE.muted, children: `Preview: ${spinner} running...` });
   if (!hasCounts) return null;
-  return /* @__PURE__ */ jsxs36(Box35, { children: [
+  return /* @__PURE__ */ jsxs36(Box36, { children: [
     /* @__PURE__ */ jsx46(Text38, { children: "Preview: " }),
     /* @__PURE__ */ jsx46(Text38, { color: PALETTE.success, children: `${counts.new} new` }),
     /* @__PURE__ */ jsx46(Text38, { children: " \xB7 " }),
@@ -28409,7 +28493,7 @@ var init_LivePreviewSummary = __esm({
 // packages/experience-design-system-cli/src/tui/import/steps/09-review/generate-review-step.tsx
 import { useCallback as useCallback5, useEffect as useEffect17, useMemo as useMemo4, useRef as useRef13, useState as useState25 } from "react";
 import figures8 from "figures";
-import { Box as Box36, Text as Text39 } from "ink";
+import { Box as Box37, Text as Text39 } from "ink";
 import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 function sortComponentsForSidebar(components, cycleParticipants) {
   const isEmpty2 = (entry) => Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
@@ -28554,7 +28638,7 @@ function deriveBreakingChanges(response) {
 }
 function GenerateReviewStep(props) {
   if (!props.extractSessionId) {
-    return /* @__PURE__ */ jsx47(Box36, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx47(Text39, { color: PALETTE.error, children: "Error: no session ID \u2014 cannot load generated definitions." }) });
+    return /* @__PURE__ */ jsx47(Box37, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx47(Text39, { color: PALETTE.error, children: "Error: no session ID \u2014 cannot load generated definitions." }) });
   }
   return /* @__PURE__ */ jsx47(GenerateReviewStepView, { ...props, extractSessionId: props.extractSessionId });
 }
@@ -29459,7 +29543,7 @@ function GenerateReviewStepView({
     for (const c2 of closures.values()) if (c2.nodes.length > 1) return true;
     return false;
   })();
-  return /* @__PURE__ */ jsxs37(Box36, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs37(Box37, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx47(StepHeader, { step: "review" }),
     /* @__PURE__ */ jsx47(
       ReviewStepDialogs,
@@ -29472,14 +29556,14 @@ function GenerateReviewStepView({
       }
     ),
     /* @__PURE__ */ jsx47(ReviewReloadDialog, { open: showReloadDialog && !dialogOpen }),
-    removedComponents.length > 0 && !dialogOpen && /* @__PURE__ */ jsxs37(Box36, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [
+    removedComponents.length > 0 && !dialogOpen && /* @__PURE__ */ jsxs37(Box37, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.error, paddingX: 1, children: [
       /* @__PURE__ */ jsx47(Text39, { bold: true, color: PALETTE.error, children: removedComponentsHeader(removedComponents.length, true) }),
       !removedBannerCollapsed && /* @__PURE__ */ jsxs37(Fragment14, { children: [
         /* @__PURE__ */ jsx47(Text39, { children: " " }),
         removedComponents.map((rc) => /* @__PURE__ */ jsx47(Text39, { children: removedComponentLine(rc) }, rc.id))
       ] })
     ] }),
-    breakingChanges.length > 0 && !dialogOpen && /* @__PURE__ */ jsx47(Box36, { paddingX: 1, children: /* @__PURE__ */ jsx47(
+    breakingChanges.length > 0 && !dialogOpen && /* @__PURE__ */ jsx47(Box37, { paddingX: 1, children: /* @__PURE__ */ jsx47(
       Text39,
       {
         color: PALETTE.warning,
@@ -29490,7 +29574,7 @@ function GenerateReviewStepView({
       const row = breakingRows[breakingCursor];
       const comp = row ? breakingChanges.find((b) => b.componentName === row.componentName) : void 0;
       if (!comp) return null;
-      return /* @__PURE__ */ jsxs37(Box36, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+      return /* @__PURE__ */ jsxs37(Box37, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
         /* @__PURE__ */ jsx47(Text39, { bold: true, color: PALETTE.warning, children: `Breaking changes \u2014 ${comp.componentName}` }),
         comp.impact && /* @__PURE__ */ jsx47(Text39, { color: PALETTE.muted, 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__ */ jsx47(Text39, { color: PALETTE.muted, children: "  (no enumerated changes)" }) : comp.changes.map((change, ci) => /* @__PURE__ */ jsx47(Text39, { children: `  \u2022 ${formatBreakingChange(change, comp.current)}` }, `bd-detail-${ci}`)),
@@ -29516,7 +29600,7 @@ 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__ */ jsxs37(Box36, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [
+      return /* @__PURE__ */ jsxs37(Box37, { flexDirection: "column", borderStyle: "single", borderColor: PALETTE.error, paddingX: 1, children: [
         /* @__PURE__ */ jsx47(Text39, { color: PALETTE.error, bold: true, children: `Cyclic component graph \u2014 auto-rejected ${stillRejected.length} component${stillRejected.length === 1 ? "" : "s"}:` }),
         members.length > 0 && /* @__PURE__ */ jsx47(Text39, { color: PALETTE.error, children: `  Cycle members: ${members.join(", ")}` }),
         ancestors.length > 0 && /* @__PURE__ */ jsx47(Text39, { color: PALETTE.error, children: `  Ancestors: ${ancestors.join(", ")}` }),
@@ -29546,7 +29630,7 @@ function GenerateReviewStepView({
         height: panelHeight
       }
     ),
-    !dialogOpen && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs37(Box36, { children: [
+    !dialogOpen && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs37(Box37, { children: [
       breakingPanel.isOpen ? /* @__PURE__ */ jsx47(
         GotoBanner,
         {
@@ -29635,7 +29719,7 @@ function GenerateReviewStepView({
         }
       ) : /* @__PURE__ */ jsx47(ReviewNoSelection, {})
     ] }),
-    !dialogOpen && cycleRows.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs37(Box36, { flexDirection: "column", children: [
+    !dialogOpen && cycleRows.length > 0 && !cyclePanel.isOpen && !breakPanel.isOpen && /* @__PURE__ */ jsxs37(Box37, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx47(Text39, { 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__ */ jsx47(
@@ -29779,11 +29863,11 @@ var init_generate_review_step = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/components/CustomPromptBanner.tsx
-import { Box as Box37, Text as Text40 } from "ink";
+import { Box as Box38, Text as Text40 } from "ink";
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 function CustomPromptBanner({ generatePromptPath }) {
   if (!generatePromptPath) return null;
-  return /* @__PURE__ */ jsxs38(Box37, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs38(Box38, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.warning, paddingX: 1, children: [
     /* @__PURE__ */ jsx48(Text40, { color: PALETTE.warning, bold: true, children: "WARNING: Custom prompt active" }),
     generatePromptPath ? /* @__PURE__ */ jsxs38(Text40, { color: PALETTE.warning, children: [
       "components: ",
@@ -29818,10 +29902,10 @@ var init_contentful_urls2 = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/components/SpaceEnvironment.tsx
-import { Box as Box38, Text as Text41 } from "ink";
+import { Box as Box39, Text as Text41 } from "ink";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function SpaceEnvironment({ spaceId, environmentId }) {
-  return /* @__PURE__ */ jsxs39(Box38, { gap: 1, marginTop: 1, children: [
+  return /* @__PURE__ */ jsxs39(Box39, { gap: 1, marginTop: 1, children: [
     /* @__PURE__ */ jsx49(Text41, { color: PALETTE.muted, children: "Space:" }),
     /* @__PURE__ */ jsx49(Text41, { children: spaceId }),
     /* @__PURE__ */ jsx49(Text41, { color: PALETTE.muted, children: "/" }),
@@ -29837,7 +29921,7 @@ var init_SpaceEnvironment = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/screens/DoneStep.tsx
-import { Box as Box39, Text as Text42 } from "ink";
+import { Box as Box40, Text as Text42 } from "ink";
 import { Fragment as Fragment15, jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 function EntityRows({ entity, label }) {
   const plural3 = (n) => `${n} ${label}${n !== 1 ? "s" : ""}`;
@@ -29857,7 +29941,7 @@ function EntityRows({ entity, label }) {
   ] });
 }
 function LinkRow({ title, url }) {
-  return /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs40(Box40, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx50(Text42, { color: PALETTE.muted, children: title }),
     /* @__PURE__ */ jsx50(Text42, { color: PALETTE.accent, children: url })
   ] });
@@ -29883,14 +29967,14 @@ function DoneStep({
   const totalPushed = componentTypes.created + componentTypes.updated + componentTypes.removed + designTokens.created + designTokens.updated + designTokens.removed;
   const success = totalFailed === 0;
   const urlArgs = { host: host ?? "api.contentful.com", spaceId, environmentId };
-  return /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs40(Box40, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx50(StepHeader, { step: "done" }),
-    /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
+    /* @__PURE__ */ jsxs40(Box40, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
       success ? /* @__PURE__ */ jsx50(Text42, { bold: true, color: PALETTE.success, children: "Done!" }) : /* @__PURE__ */ jsx50(Text42, { bold: true, color: PALETTE.warning, children: "\u26A0 Finished with errors" }),
-      totalPushed === 0 && totalFailed === 0 && !summary ? /* @__PURE__ */ jsx50(Text42, { color: PALETTE.muted, children: credentialsSkipped ? "Nothing was pushed \u2014 you skipped the Contentful credentials, so the files were only saved locally." : "Nothing was pushed \u2014 everything was already up to date." }) : /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx50(EntityRows, { entity: componentTypes, label: "Component Type" }),
+      totalPushed === 0 && totalFailed === 0 && !summary ? /* @__PURE__ */ jsx50(Text42, { color: PALETTE.muted, children: credentialsSkipped ? "Nothing was pushed \u2014 you skipped the Contentful credentials, so the files were only saved locally." : "Nothing was pushed \u2014 everything was already up to date." }) : /* @__PURE__ */ jsxs40(Box40, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx50(EntityRows, { entity: componentTypes, label: "Component" }),
         /* @__PURE__ */ jsx50(EntityRows, { entity: designTokens, label: "Design Token" }),
-        summary && /* @__PURE__ */ jsx50(Box39, { marginTop: 1, children: /* @__PURE__ */ jsxs40(Text42, { color: PALETTE.muted, children: [
+        summary && /* @__PURE__ */ jsx50(Box40, { marginTop: 1, children: /* @__PURE__ */ jsxs40(Text42, { color: PALETTE.muted, children: [
           "Push result: ",
           summary.succeeded,
           "/",
@@ -29903,7 +29987,7 @@ function DoneStep({
           ] })
         ] }) })
       ] }),
-      failures.length > 0 && /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", children: [
+      failures.length > 0 && /* @__PURE__ */ jsxs40(Box40, { flexDirection: "column", children: [
         /* @__PURE__ */ jsx50(Text42, { bold: true, color: PALETTE.error, children: "Failure details" }),
         failures.map((failure) => /* @__PURE__ */ jsxs40(Text42, { color: PALETTE.error, children: [
           failure.entityType,
@@ -29914,7 +29998,7 @@ function DoneStep({
         ] }, `${failure.entityType}:${failure.entityId}`))
       ] }),
       /* @__PURE__ */ jsx50(SpaceEnvironment, { spaceId, environmentId }),
-      success && totalPushed > 0 && /* @__PURE__ */ jsxs40(Box39, { flexDirection: "column", gap: 1, children: [
+      success && totalPushed > 0 && /* @__PURE__ */ jsxs40(Box40, { flexDirection: "column", gap: 1, children: [
         /* @__PURE__ */ jsx50(Text42, { color: PALETTE.success, children: "Your design system is now in Contentful Experiences." }),
         produced.components && /* @__PURE__ */ jsx50(LinkRow, { title: "View your components here:", url: buildPostPushUrl2(urlArgs) }),
         produced.tokens && /* @__PURE__ */ jsx50(
@@ -29984,7 +30068,7 @@ var init_use_blinking_cursor = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/screens/PathPrompt.tsx
 import { useState as useState27 } from "react";
-import { Box as Box40, Text as Text43 } from "ink";
+import { Box as Box41, Text as Text43 } from "ink";
 import { readdirSync as readdirSync3 } from "node:fs";
 import { dirname as dirname15, basename as basename6, join as join21 } from "node:path";
 import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -30044,10 +30128,10 @@ function PathPrompt({
   const shown = input || defaultPath;
   const isPlaceholder = input === "";
   const cursor = cursorVisible ? "\u2588" : " ";
-  return /* @__PURE__ */ jsxs41(Box40, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs41(Box41, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx51(StepHeader, { step: "push" }),
-    /* @__PURE__ */ jsxs41(Box40, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
-      /* @__PURE__ */ jsxs41(Box40, { gap: 1, children: [
+    /* @__PURE__ */ jsxs41(Box41, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
+      /* @__PURE__ */ jsxs41(Box41, { gap: 1, children: [
         /* @__PURE__ */ jsx51(Text43, { color: PALETTE.accent, children: "?" }),
         /* @__PURE__ */ jsxs41(Text43, { bold: true, children: [
           label,
@@ -30124,7 +30208,7 @@ var init_use_timed_spinner = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/screens/PushingStep.tsx
-import { Box as Box41, Text as Text44 } from "ink";
+import { Box as Box42, Text as Text44 } from "ink";
 import { ProgressBar as ProgressBar2, ThemeProvider as ThemeProvider2 } from "@inkjs/ui";
 import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 function PushingStep({ progress, produced }) {
@@ -30132,20 +30216,20 @@ function PushingStep({ progress, produced }) {
   const operationId = progress && progress.kind === "queued" ? progress.operationId : null;
   const showGlobal = progress && progress.kind === "progress";
   const showCurrent = progress && progress.kind === "progress" && progress.current ? progress.current : null;
-  return /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs42(Box42, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx53(StepHeader, { step: "push" }),
-    /* @__PURE__ */ jsxs42(Box41, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
+    /* @__PURE__ */ jsxs42(Box42, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
       /* @__PURE__ */ jsxs42(Text44, { children: [
         "Writing ",
         writtenThings(produced),
         " to your Contentful space..."
       ] }),
-      operationId && /* @__PURE__ */ jsxs42(Box41, { gap: 1, children: [
+      operationId && /* @__PURE__ */ jsxs42(Box42, { gap: 1, children: [
         /* @__PURE__ */ jsx53(Text44, { color: PALETTE.muted, children: "Operation:" }),
         /* @__PURE__ */ jsx53(Text44, { children: operationId })
       ] }),
-      showGlobal && progress && progress.kind === "progress" && /* @__PURE__ */ jsx53(Box41, { gap: 1, flexDirection: "column", children: /* @__PURE__ */ jsxs42(Box41, { gap: 2, children: [
-        /* @__PURE__ */ jsx53(Box41, { width: 40, children: /* @__PURE__ */ jsx53(ThemeProvider2, { theme: PROGRESS_THEME, children: /* @__PURE__ */ jsx53(ProgressBar2, { value: Math.round(progress.processed / progress.total * 100) }) }) }),
+      showGlobal && progress && progress.kind === "progress" && /* @__PURE__ */ jsx53(Box42, { gap: 1, flexDirection: "column", children: /* @__PURE__ */ jsxs42(Box42, { gap: 2, children: [
+        /* @__PURE__ */ jsx53(Box42, { width: 40, children: /* @__PURE__ */ jsx53(ThemeProvider2, { theme: PROGRESS_THEME, children: /* @__PURE__ */ jsx53(ProgressBar2, { value: Math.round(progress.processed / progress.total * 100) }) }) }),
         /* @__PURE__ */ jsxs42(Text44, { color: PALETTE.muted, children: [
           progress.processed,
           "/",
@@ -30153,11 +30237,11 @@ function PushingStep({ progress, produced }) {
           " entities"
         ] })
       ] }) }),
-      showCurrent && /* @__PURE__ */ jsxs42(Box41, { gap: 1, children: [
+      showCurrent && /* @__PURE__ */ jsxs42(Box42, { gap: 1, children: [
         /* @__PURE__ */ jsx53(Text44, { color: PALETTE.muted, children: "Now processing:" }),
         /* @__PURE__ */ jsx53(Text44, { children: showCurrent })
       ] }),
-      /* @__PURE__ */ jsx53(Box41, { marginTop: 1, children: /* @__PURE__ */ jsxs42(Text44, { color: PALETTE.muted, children: [
+      /* @__PURE__ */ jsx53(Box42, { marginTop: 1, children: /* @__PURE__ */ jsxs42(Text44, { color: PALETTE.muted, children: [
         "Elapsed: ",
         elapsed
       ] }) })
@@ -30363,7 +30447,7 @@ var init_preview_confirmation_input = __esm({
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/screens/WizardPreviewStep.tsx
 import { useEffect as useEffect20, useState as useState29, useMemo as useMemo5 } from "react";
-import { Box as Box42, Text as Text45 } from "ink";
+import { Box as Box43, Text as Text45 } from "ink";
 import { Fragment as Fragment16, jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 function buildPreviewSummaryLines(preview) {
   const lines = [];
@@ -30616,9 +30700,9 @@ function WizardPreviewStep({
       return;
     }
   });
-  return /* @__PURE__ */ jsxs43(Box42, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs43(Box43, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx54(StepHeader, { step: "push" }),
-    /* @__PURE__ */ jsxs43(Box42, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 2, children: [
+    /* @__PURE__ */ jsxs43(Box43, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 2, children: [
       hasAnything ? /* @__PURE__ */ jsxs43(Fragment16, { children: [
         /* @__PURE__ */ jsx54(Text45, { children: "Here's what will happen in your space:" }),
         /* @__PURE__ */ jsxs43(
@@ -30635,9 +30719,9 @@ function WizardPreviewStep({
           }
         )
       ] }) : /* @__PURE__ */ jsx54(Text45, { color: PALETTE.muted, children: "Nothing to push \u2014 everything is already up to date." }),
-      breakingWithImpact && /* @__PURE__ */ jsx54(Box42, { marginTop: 1, children: /* @__PURE__ */ jsx54(Text45, { color: PALETTE.error, bold: true, children: "\u26A0 Breaking changes will affect downstream entities. Press Enter to acknowledge and apply." }) }),
+      breakingWithImpact && /* @__PURE__ */ jsx54(Box43, { marginTop: 1, children: /* @__PURE__ */ jsx54(Text45, { color: PALETTE.error, bold: true, children: "\u26A0 Breaking changes will affect downstream entities. Press Enter to acknowledge and apply." }) }),
       /* @__PURE__ */ jsx54(SpaceEnvironment, { spaceId, environmentId }),
-      /* @__PURE__ */ jsx54(Box42, { marginTop: 1, children: /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx54(Box43, { marginTop: 1, children: /* @__PURE__ */ jsx54(
         ControlHints,
         {
           hints: [
@@ -30683,7 +30767,7 @@ var init_run_teaser = __esm({
 });
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/flow/screen.tsx
-import { Box as Box43 } from "ink";
+import { Box as Box44 } from "ink";
 import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 function canEditFromPreview(cdf) {
   if (!cdf) return false;
@@ -30801,7 +30885,7 @@ function FlowScreen({
         );
     }
   })();
-  return /* @__PURE__ */ jsxs44(Box43, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs44(Box44, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx55(CustomPromptBanner, { generatePromptPath }),
     content
   ] });
@@ -32012,13 +32096,13 @@ var init_help_info = __esm({
 
 // packages/experience-design-system-cli/src/tui/help/PageContainer.tsx
 import { useEffect as useEffect22, useState as useState30 } from "react";
-import { Box as Box44, Text as Text46, useInput as useInput11 } from "ink";
+import { Box as Box45, Text as Text46, useInput as useInput12 } from "ink";
 import { Fragment as Fragment17, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 function Section({ title, rows }) {
-  return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs45(Box45, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx56(Text46, { bold: true, color: PALETTE.accent, children: title }),
-    rows.map((row) => /* @__PURE__ */ jsxs45(Box44, { gap: 1, children: [
-      /* @__PURE__ */ jsx56(Box44, { width: 16, flexShrink: 0, children: /* @__PURE__ */ jsx56(Text46, { color: PALETTE.muted, children: row.label }) }),
+    rows.map((row) => /* @__PURE__ */ jsxs45(Box45, { gap: 1, children: [
+      /* @__PURE__ */ jsx56(Box45, { width: 16, flexShrink: 0, children: /* @__PURE__ */ jsx56(Text46, { color: PALETTE.muted, children: row.label }) }),
       /* @__PURE__ */ jsx56(Text46, { children: row.value })
     ] }, row.label))
   ] });
@@ -32033,7 +32117,7 @@ function HelpScreen({ onDone }) {
     void finishDebugRun({ outputs: {}, status: "success", exitMethod });
     onDone();
   };
-  useInput11((input, key) => {
+  useInput12((input, key) => {
     if (key.return) {
       leave("saved");
       return;
@@ -32043,7 +32127,7 @@ function HelpScreen({ onDone }) {
       return;
     }
   });
-  return /* @__PURE__ */ jsxs45(Box44, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [
+  return /* @__PURE__ */ jsxs45(Box45, { flexDirection: "column", paddingX: 2, paddingY: 1, gap: 1, children: [
     /* @__PURE__ */ jsx56(Text46, { bold: true, children: "Help" }),
     info ? /* @__PURE__ */ jsxs45(Fragment17, { children: [
       /* @__PURE__ */ jsx56(Section, { title: "Where things are stored", rows: info.storage }),
@@ -32073,7 +32157,7 @@ var init_PageContainer2 = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/PageContainer.tsx
 import { useState as useState31 } from "react";
-import { Box as Box45, Text as Text47, useInput as useInput12 } from "ink";
+import { Box as Box46, Text as Text47, useInput as useInput13 } from "ink";
 import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 function SettingsScreen({
   onNavigate,
@@ -32085,7 +32169,7 @@ function SettingsScreen({
     { label: "Opt-in Analytics", screen: "settings-opt-in-analytics" },
     { label: "Debug Mode", screen: "settings-debug-mode" }
   ];
-  useInput12((input, key) => {
+  useInput13((input, key) => {
     if (key.upArrow) {
       setFocusIdx((i) => (i - 1 + items.length) % items.length);
       return;
@@ -32105,7 +32189,7 @@ function SettingsScreen({
       onBack();
     }
   });
-  return /* @__PURE__ */ jsxs46(Box45, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+  return /* @__PURE__ */ jsxs46(Box46, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsx57(Text47, { bold: true, children: "Settings" }),
     /* @__PURE__ */ jsx57(Text47, { color: PALETTE.muted, children: " " }),
     items.map((item, i) => /* @__PURE__ */ jsxs46(Text47, { color: i === focusIdx ? PALETTE.accent : void 0, children: [
@@ -32447,10 +32531,10 @@ var init_AgentStatusBadge = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/configuration/agents/AgentDetail.tsx
 import { useEffect as useEffect23, useState as useState32 } from "react";
-import { Box as Box46, Text as Text49 } from "ink";
+import { Box as Box47, Text as Text49 } from "ink";
 import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
 function StatusHeading() {
-  return /* @__PURE__ */ jsxs47(Box46, { gap: 1, children: [
+  return /* @__PURE__ */ jsxs47(Box47, { gap: 1, children: [
     /* @__PURE__ */ jsx59(Text49, { bold: true, color: PALETTE.muted, children: "STATUS" }),
     /* @__PURE__ */ jsx59(Text49, { color: PALETTE.muted, children: "\xB7 read only" })
   ] });
@@ -32532,7 +32616,7 @@ function AgentDetail({
       actions: [action],
       notice: testing ? null : notice,
       busy: saving || testing,
-      children: /* @__PURE__ */ jsxs47(Box46, { flexDirection: "column", marginTop: 1, children: [
+      children: /* @__PURE__ */ jsxs47(Box47, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsx59(StatusHeading, {}),
         statusRows(name, checks, settings.binary).map((row) => /* @__PURE__ */ jsx59(FormReadOnlyRow, { label: row.label, labelWidth, children: /* @__PURE__ */ jsx59(Text49, { color: TONE_COLOR[row.tone], children: row.value }) }, row.label))
       ] })
@@ -32560,7 +32644,7 @@ var init_AgentDetail = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/configuration/agents/AgentsScreen.tsx
 import { useEffect as useEffect24, useRef as useRef15, useState as useState33 } from "react";
-import { Box as Box47, Text as Text50, useInput as useInput13 } from "ink";
+import { Box as Box48, Text as Text50, useInput as useInput14 } from "ink";
 import { Fragment as Fragment18, jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
 function AgentsScreen({ onDone }) {
   const [config, setConfig] = useState33(null);
@@ -32637,7 +32721,7 @@ function AgentsScreen({ onDone }) {
       setNotice({ kind: "error", text: `Default agent not changed: ${visit.error}` });
     }).finally(() => setSaving(false));
   };
-  useInput13((input, key) => {
+  useInput14((input, key) => {
     if (loadError && (key.escape || input === "q")) {
       endVisit(null);
       onDone();
@@ -32669,7 +32753,7 @@ function AgentsScreen({ onDone }) {
     }
   });
   if (!config) {
-    return /* @__PURE__ */ jsxs48(Box47, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    return /* @__PURE__ */ jsxs48(Box48, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
       /* @__PURE__ */ jsx60(Text50, { bold: true, children: "Settings \u203A Configuration \u203A Agents" }),
       /* @__PURE__ */ jsx60(Text50, { children: " " }),
       loadError ? /* @__PURE__ */ jsxs48(Fragment18, { children: [
@@ -32704,35 +32788,35 @@ function AgentsScreen({ onDone }) {
     );
   }
   const focusedAgent = AGENT_NAMES[focus];
-  return /* @__PURE__ */ jsxs48(Box47, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+  return /* @__PURE__ */ jsxs48(Box48, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsx60(Text50, { bold: true, children: "Settings \u203A Configuration \u203A Agents" }),
     /* @__PURE__ */ jsx60(Text50, { children: " " }),
     /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: "The coding agent the CLI runs, and what was found for each one." }),
     /* @__PURE__ */ jsx60(Text50, { children: " " }),
-    /* @__PURE__ */ jsxs48(Box47, { gap: 1, children: [
+    /* @__PURE__ */ jsxs48(Box48, { gap: 1, children: [
       /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: "Default agent" }),
       /* @__PURE__ */ jsx60(Text50, { bold: true, children: AGENT_LABELS[config.defaultAgent] }),
       saving && /* @__PURE__ */ jsx60(Text50, { color: PALETTE.accent, children: "\u2026 saving" })
     ] }),
-    /* @__PURE__ */ jsxs48(Box47, { marginTop: 1, gap: 1, children: [
+    /* @__PURE__ */ jsxs48(Box48, { marginTop: 1, gap: 1, children: [
       /* @__PURE__ */ jsx60(Text50, { children: " " }),
       /* @__PURE__ */ jsx60(Text50, { children: " " }),
-      /* @__PURE__ */ jsx60(Box47, { width: NAME_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: "AGENT" }) }),
+      /* @__PURE__ */ jsx60(Box48, { width: NAME_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: "AGENT" }) }),
       /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: "STATUS" })
     ] }),
     AGENT_NAMES.map((name) => {
       const isFocused = focusedAgent === name;
-      return /* @__PURE__ */ jsxs48(Box47, { gap: 1, children: [
+      return /* @__PURE__ */ jsxs48(Box48, { gap: 1, children: [
         /* @__PURE__ */ jsx60(Text50, { color: isFocused ? PALETTE.accent : void 0, children: isFocused ? "\u276F" : " " }),
         /* @__PURE__ */ jsx60(Text50, { color: PALETTE.success, children: name === config.defaultAgent ? "\u2605" : " " }),
-        /* @__PURE__ */ jsx60(Box47, { width: NAME_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx60(Text50, { bold: isFocused, color: isFocused ? PALETTE.accent : void 0, children: AGENT_LABELS[name] }) }),
+        /* @__PURE__ */ jsx60(Box48, { width: NAME_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx60(Text50, { bold: isFocused, color: isFocused ? PALETTE.accent : void 0, children: AGENT_LABELS[name] }) }),
         /* @__PURE__ */ jsx60(AgentStatusBadge, { name, checks: checks[name], binary: config.agents[name].binary })
       ] }, name);
     }),
-    /* @__PURE__ */ jsxs48(Box47, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsxs48(Box48, { flexDirection: "column", marginTop: 1, children: [
       /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: `\u2500 ${AGENT_LABELS[focusedAgent]} ${"\u2500".repeat(30)}` }),
-      panelRows(focusedAgent, checks[focusedAgent], config.agents[focusedAgent]).map((row) => /* @__PURE__ */ jsxs48(Box47, { gap: 1, paddingLeft: 1, children: [
-        /* @__PURE__ */ jsx60(Box47, { width: PANEL_LABEL_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: row.label }) }),
+      panelRows(focusedAgent, checks[focusedAgent], config.agents[focusedAgent]).map((row) => /* @__PURE__ */ jsxs48(Box48, { gap: 1, paddingLeft: 1, children: [
+        /* @__PURE__ */ jsx60(Box48, { width: PANEL_LABEL_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx60(Text50, { color: PALETTE.muted, children: row.label }) }),
         /* @__PURE__ */ jsx60(Text50, { color: TONE_COLOR[row.tone], children: row.value })
       ] }, row.label))
     ] }),
@@ -32810,7 +32894,7 @@ var init_project_store = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/configuration/project/ProjectScreen.tsx
 import { useEffect as useEffect25, useRef as useRef16, useState as useState34 } from "react";
-import { Box as Box48, Text as Text51, useInput as useInput14 } from "ink";
+import { Box as Box49, Text as Text51, useInput as useInput15 } from "ink";
 import { Fragment as Fragment19, jsx as jsx61, jsxs as jsxs49 } from "react/jsx-runtime";
 function debugFields(config) {
   return {
@@ -32873,14 +32957,14 @@ function ProjectScreen({ onDone }) {
       exitMethod: change.changed ? "saved" : "discarded"
     });
   };
-  useInput14((input, key) => {
+  useInput15((input, key) => {
     if (!config && loadError && (key.escape || input === "q")) {
       endVisit(null);
       onDone();
     }
   });
   if (!config) {
-    return /* @__PURE__ */ jsxs49(Box48, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    return /* @__PURE__ */ jsxs49(Box49, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
       /* @__PURE__ */ jsx61(Text51, { bold: true, children: "Settings \u203A Configuration \u203A Project" }),
       /* @__PURE__ */ jsx61(Text51, { children: " " }),
       loadError ? /* @__PURE__ */ jsxs49(Fragment19, { children: [
@@ -32957,13 +33041,13 @@ var init_ProjectScreen = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/configuration/ConfigurationScreen.tsx
 import { useState as useState35 } from "react";
-import { Box as Box49, Text as Text52, useInput as useInput15 } from "ink";
+import { Box as Box50, Text as Text52, useInput as useInput16 } from "ink";
 import { jsx as jsx62, jsxs as jsxs50 } from "react/jsx-runtime";
 function ConfigurationScreen({ onDone }) {
   const [focus, setFocus] = useState35(0);
   const [open, setOpen] = useState35(null);
   const close = () => setOpen(null);
-  useInput15((input, key) => {
+  useInput16((input, key) => {
     if (open) return;
     if (key.upArrow) {
       setFocus((i) => (i - 1 + SECTIONS.length) % SECTIONS.length);
@@ -32981,12 +33065,12 @@ function ConfigurationScreen({ onDone }) {
   });
   if (open === "project") return /* @__PURE__ */ jsx62(ProjectScreen, { onDone: close });
   if (open === "agents") return /* @__PURE__ */ jsx62(AgentsScreen, { onDone: close });
-  return /* @__PURE__ */ jsxs50(Box49, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+  return /* @__PURE__ */ jsxs50(Box50, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsx62(Text52, { bold: true, children: "Settings \u203A Configuration" }),
     /* @__PURE__ */ jsx62(Text52, { children: " " }),
-    SECTIONS.map((section, index) => /* @__PURE__ */ jsxs50(Box49, { gap: 1, children: [
+    SECTIONS.map((section, index) => /* @__PURE__ */ jsxs50(Box50, { gap: 1, children: [
       /* @__PURE__ */ jsx62(Text52, { color: index === focus ? PALETTE.accent : void 0, children: index === focus ? "\u276F" : " " }),
-      /* @__PURE__ */ jsx62(Box49, { width: 9, flexShrink: 0, children: /* @__PURE__ */ jsx62(Text52, { bold: index === focus, color: index === focus ? PALETTE.accent : void 0, children: section.label }) }),
+      /* @__PURE__ */ jsx62(Box50, { width: 9, flexShrink: 0, children: /* @__PURE__ */ jsx62(Text52, { bold: index === focus, color: index === focus ? PALETTE.accent : void 0, children: section.label }) }),
       /* @__PURE__ */ jsx62(Text52, { color: PALETTE.muted, children: section.description })
     ] }, section.id)),
     /* @__PURE__ */ jsx62(Text52, { children: " " }),
@@ -33023,7 +33107,7 @@ var init_ConfigurationScreen = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/opt-in-analytics/screen.tsx
 import { useEffect as useEffect26, useState as useState36 } from "react";
-import { Box as Box50, Text as Text53, useInput as useInput16 } from "ink";
+import { Box as Box51, Text as Text53, useInput as useInput17 } from "ink";
 import { Fragment as Fragment20, jsx as jsx63, jsxs as jsxs51 } from "react/jsx-runtime";
 function OptInAnalyticsScreen({ onDone }) {
   const [loading, setLoading] = useState36(true);
@@ -33040,7 +33124,7 @@ function OptInAnalyticsScreen({ onDone }) {
       });
     });
   }, []);
-  useInput16((input, key) => {
+  useInput17((input, key) => {
     if (loading) return;
     if (key.return || input === " ") {
       setEnabled((current) => {
@@ -33055,7 +33139,7 @@ function OptInAnalyticsScreen({ onDone }) {
       onDone();
     }
   });
-  return /* @__PURE__ */ jsxs51(Box50, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+  return /* @__PURE__ */ jsxs51(Box51, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsx63(Text53, { bold: true, children: "Settings \u203A Opt-in Analytics" }),
     /* @__PURE__ */ jsx63(Text53, { children: " " }),
     loading ? /* @__PURE__ */ jsx63(Text53, { color: PALETTE.muted, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs51(Fragment20, { children: [
@@ -33092,7 +33176,7 @@ var init_screen11 = __esm({
 
 // packages/experience-design-system-cli/src/tui/settings/debug-mode/screen.tsx
 import { useEffect as useEffect27, useRef as useRef17, useState as useState37 } from "react";
-import { Box as Box51, Text as Text54, useInput as useInput17 } from "ink";
+import { Box as Box52, Text as Text54, useInput as useInput18 } from "ink";
 import { Fragment as Fragment21, jsx as jsx64, jsxs as jsxs52 } from "react/jsx-runtime";
 function DebugModeScreen({ onDone }) {
   const [setting, setSetting] = useState37(null);
@@ -33142,7 +33226,7 @@ function DebugModeScreen({ onDone }) {
       exitMethod: change.changed ? "saved" : "discarded"
     });
   };
-  useInput17((input, key) => {
+  useInput18((input, key) => {
     if (!setting) return;
     if (key.upArrow || key.downArrow) {
       setFocus((current) => ROWS[(ROWS.indexOf(current) + (key.downArrow ? 1 : ROWS.length - 1)) % ROWS.length]);
@@ -33171,16 +33255,16 @@ function DebugModeScreen({ onDone }) {
   });
   const marker = (row) => /* @__PURE__ */ jsx64(Text54, { color: focus === row ? PALETTE.accent : void 0, children: focus === row ? "\u276F" : " " });
   const label = (row, text) => /* @__PURE__ */ jsx64(Text54, { bold: focus === row, color: focus === row ? PALETTE.accent : PALETTE.muted, children: text });
-  return /* @__PURE__ */ jsxs52(Box51, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+  return /* @__PURE__ */ jsxs52(Box52, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
     /* @__PURE__ */ jsx64(Text54, { bold: true, children: "Settings \u203A Debug Mode" }),
     /* @__PURE__ */ jsx64(Text54, { children: " " }),
     setting ? /* @__PURE__ */ jsxs52(Fragment21, { children: [
-      /* @__PURE__ */ jsxs52(Box51, { gap: 1, children: [
+      /* @__PURE__ */ jsxs52(Box52, { gap: 1, children: [
         marker("enabled"),
         label("enabled", "Debug logging:"),
         /* @__PURE__ */ jsx64(Text54, { bold: true, color: setting.enabled ? PALETTE.success : PALETTE.muted, children: setting.enabled ? "On" : "Off" })
       ] }),
-      /* @__PURE__ */ jsxs52(Box51, { gap: 1, children: [
+      /* @__PURE__ */ jsxs52(Box52, { gap: 1, children: [
         marker("retentionDays"),
         label("retentionDays", "Delete logs after:"),
         RETENTION_CHOICES.map((days) => {