@contentful/experience-design-system-cli 2.38.1-dev-build-40e920ee.0 → 2.38.1-dev-build-8e139f2f.0

package/dist/app.js

@@ -19198,7 +19198,6 @@ function GotoBanner({
       borderStyle: "single",
       borderColor: PALETTE.accent,
       paddingX: 1,
-      paddingBottom: 1,
       marginTop: width === void 0 ? 1 : 0,
       width,
       flexShrink: 0,
@@ -19210,7 +19209,7 @@ function GotoBanner({
           return renderRow(row, i, i === highlightIndex);
         }),
         moreBelow > 0 && /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: `  \u25BC ${moreBelow} more` }),
-        footerHint !== void 0 && /* @__PURE__ */ jsx24(Box21, { marginTop: 1, children: /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: footerHint }) })
+        footerHint !== void 0 && /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: footerHint })
       ]
     }
   );
@@ -21715,7 +21714,7 @@ var capitalize = (name) => name.charAt(0).toUpperCase() + name.slice(1);
 function describeGeneration(input) {
   const agent = capitalize(input.agent);
   return `${formatAcceptanceSummary({ accepted: input.acceptedCount, autoRejected: 0 })}
-${agent} is reading each selected component and writing a Contentful component definition for it.${input.hasTokens ? "\nUsing 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);
@@ -24026,7 +24025,7 @@ function FieldEditor({
     if (rationaleOpen) {
       return "[\u2191\u2193] scroll  [i/Esc] close rationale panel";
     }
-    return `[\u2191\u2193] navigate  [Enter] edit fields  [h] help  [s] source  [Esc] exit panel`;
+    return `[\u2191\u2193] navigate rows  [Enter] edit fields  [s] source  [${propRationaleKey}] prop rationale  [${componentRationaleKey}] component rationale  [h] help  [Esc] exit panel`;
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
@@ -24654,8 +24653,8 @@ function TokenReviewPanel({
         borderStyle: "single",
         borderColor: active ? PALETTE.text : void 0,
         children: [
-          /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, wrap: "truncate", children: `Review mapped tokens \u2014 ${componentName} \xB7 ${current.propName}${current.kinds.length > 0 ? ` (${current.kinds.join(", ")})` : ""}` }),
-          /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: `Tick the tokens this property may use (${rangeLabel}).` }),
+          /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, wrap: "truncate", children: `TOKEN REVIEW \u2014 ${componentName} \xB7 ${current.propName} (edit allowed)` }),
+          /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: `select which tokens are allowed (${rangeLabel})` }),
           /* @__PURE__ */ jsx39(Text32, { children: " " }),
           current.paths.length === 0 && /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "(no compatible tokens found for this token kind)" }),
           visiblePaths.map((path5, i) => {
@@ -24688,33 +24687,18 @@ function TokenReviewPanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.text : void 0,
       children: [
-        /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, children: `Review mapped tokens \u2014 ${componentName}` }),
-        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: `${componentName} has ${suggestions.length} design ${suggestions.length === 1 ? "prop" : "props"} of type token. Select which tokens are allowed for each property.` }),
-        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: "Suggested tokens come from the agent. Allowed tokens are what editors can pick in Contentful." }),
-        /* @__PURE__ */ jsx39(Text32, { children: " " }),
+        /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, children: `TOKEN REVIEW \u2014 ${componentName}` }),
         suggestions.length === 0 && /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "(no token suggestions for this component)" }),
         suggestions.map((s, i) => {
           const focused = i === selectedRow;
           return /* @__PURE__ */ jsxs30(Box31, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx39(Box31, { children: /* @__PURE__ */ jsx39(Text32, { color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted, bold: focused, children: `${focused ? figures7.pointer : " "} ${s.propName}${s.kinds.length > 0 ? ` (${s.kinds.join(", ")})` : ""}` }) }),
-            /* @__PURE__ */ jsx39(
-              Text32,
-              {
-                color: PALETTE.muted,
-                children: `  suggested: ${s.suggested.length > 0 ? s.suggested.join(", ") : "none"}`
-              }
-            ),
-            /* @__PURE__ */ jsx39(
-              Text32,
-              {
-                color: PALETTE.muted,
-                children: `  allowed: ${s.allowed.length > 0 ? s.allowed.join(", ") : "none (any token)"}`
-              }
-            ),
-            /* @__PURE__ */ jsx39(Text32, { children: " " })
+            /* @__PURE__ */ jsx39(Box31, { children: /* @__PURE__ */ jsx39(Text32, { color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted, bold: focused, children: `${focused ? figures7.pointer : " "} ${s.propName}` }) }),
+            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  suggested: ${s.suggested.join(", ")}` }),
+            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  allowed: ${s.allowed.join(", ")}` })
           ] }, s.propName);
         }),
-        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "[\u2191/\u2193] move  [Enter] edit allowed tokens  [Esc] close" })
+        /* @__PURE__ */ jsx39(Text32, { children: " " }),
+        /* @__PURE__ */ jsx39(Text32, { children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
       ]
     }
   );
@@ -24962,9 +24946,15 @@ function ReviewFinalizeError({
 function ReviewPanelFooter({
   reviewEditor,
   sidebarFocused,
-  sidebarFooter
+  sidebarFooter,
+  livePreview,
+  livePreviewSpinner
 }) {
-  return /* @__PURE__ */ jsx42(Fragment10, { children: reviewEditor.panelOpen === "token-review" ? "" : sidebarFocused ? sidebarFooter : reviewEditor.showJson ? "  [\u2191\u2193] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  [Enter] edit fields" + (reviewEditor.currentTokenSuggestions().length > 0 ? "  [t] review mapped tokens" : "") });
+  return /* @__PURE__ */ jsxs32(Fragment10, { children: [
+    reviewEditor.panelOpen === "token-review" ? "  [\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" : sidebarFocused ? sidebarFooter : reviewEditor.showJson ? "  [\u2191\u2193] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  (edit fields)" + (reviewEditor.currentTokenSuggestions().length > 0 ? "  [t] token review" : ""),
+    livePreview.status === "running" && /* @__PURE__ */ jsx42(Text34, { children: `  ${livePreviewSpinner} live preview` }),
+    livePreview.disabled && /* @__PURE__ */ jsx42(Text34, { children: "  \xB7 live preview disabled" })
+  ] });
 }
 function ReviewComponentTitle({
   selectedKey,
@@ -24998,7 +24988,9 @@ function ReviewComponentPanel({
   sidebarFocused,
   fieldEditor,
   saveError,
-  sidebarFooter
+  sidebarFooter,
+  livePreview,
+  livePreviewSpinner
 }) {
   const propCount = Object.keys(selectedEntry.$properties).length;
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
@@ -25035,7 +25027,9 @@ function ReviewComponentPanel({
       {
         reviewEditor,
         sidebarFocused,
-        sidebarFooter
+        sidebarFooter,
+        livePreview,
+        livePreviewSpinner
       }
     ) }) })
   ] }) });
@@ -25579,7 +25573,7 @@ function collectTokenSuggestions(entry, availableTokens = []) {
     const compatiblePaths = new Set(compatible);
     const allowed = availableTokens.length > 0 ? persistedAllowed.filter((path5) => compatiblePaths.has(path5)) : persistedAllowed;
     const paths = availableTokens.length > 0 ? compatible : allowed;
-    return { propName, kinds, paths, suggested: [...allowed], allowed };
+    return { propName, paths, suggested: [...allowed], allowed };
   });
 }
 
@@ -26375,7 +26369,7 @@ var HELP_SECTIONS2 = [
       { keys: "P", label: "Component rationale" },
       { keys: "s", label: "Source code snippet" },
       { keys: "J", label: "Toggle JSON" },
-      { keys: "t", label: "Review mapped tokens" }
+      { keys: "t", label: "Token review" }
     ]
   },
   {
@@ -27523,7 +27517,9 @@ function GenerateReviewStepView({
               initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? pendingEditorFocus.target : { kind: "description" }
             }
           ),
-          saveError: reviewEditor.saveError
+          saveError: reviewEditor.saveError,
+          livePreview: livePreviewHook,
+          livePreviewSpinner
         }
       ) : /* @__PURE__ */ jsx48(ReviewNoSelection, {})
     ] }),
@@ -27555,7 +27551,7 @@ function GenerateReviewStepView({
         hidden: dialogOpen
       }
     ),
-    !dialogOpen && sidebarFocused && reviewEditor.panelOpen !== "token-review" && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
+    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
   ] });
 }
 
@@ -27759,7 +27755,8 @@ function PathPrompt({
   defaultPath,
   onSubmit,
   onCancel,
-  label = "Save to"
+  label = "Save to",
+  summary
 }) {
   const [input, setInput] = useState28("");
   const cursorVisible = useBlinkingCursor();
@@ -27793,6 +27790,7 @@ function PathPrompt({
   return /* @__PURE__ */ jsxs42(Box42, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx52(StepHeader, { step: "push" }),
     /* @__PURE__ */ jsxs42(Box42, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
+      summary && /* @__PURE__ */ jsx52(Text44, { color: PALETTE.muted, children: summary }),
       /* @__PURE__ */ jsxs42(Box42, { gap: 1, children: [
         /* @__PURE__ */ jsx52(Text44, { color: PALETTE.accent, children: "?" }),
         /* @__PURE__ */ jsxs42(Text44, { bold: true, children: [
@@ -27827,9 +27825,15 @@ function producedOf(state2) {
 function fileSummaryLabel({ components }) {
   return components ? "components.json" : "components.json (design tokens only)";
 }
-function writtenThings({ components, tokens }) {
-  if (components && tokens) return "component types and design tokens";
-  return tokens ? "design tokens" : "component types";
+function counted(count, noun) {
+  if (!count) return `${noun}s`;
+  return `${count} ${noun}${count === 1 ? "" : "s"}`;
+}
+function countedThings({ components, tokens }, counts = {}) {
+  const parts = [];
+  if (components || !tokens) parts.push(counted(counts.components, "component type"));
+  if (tokens) parts.push(counted(counts.tokens, "design token"));
+  return parts.join(" and ");
 }
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/support/use-timed-spinner.tsx
@@ -27854,18 +27858,21 @@ function useTimedSpinner() {
 
 // packages/experience-design-system-cli/src/tui/import/steps/10-flow/screens/PushingStep.tsx
 import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
-function PushingStep({ progress, produced }) {
-  const { elapsed } = useTimedSpinner();
+function PushingStep({ progress, produced, counts }) {
+  const { spinner, elapsed } = useTimedSpinner();
   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__ */ jsxs43(Box43, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx54(StepHeader, { step: "push" }),
     /* @__PURE__ */ jsxs43(Box43, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
-      /* @__PURE__ */ jsxs43(Text45, { children: [
-        "Writing ",
-        writtenThings(produced),
-        " to your Contentful space..."
+      /* @__PURE__ */ jsxs43(Box43, { gap: 1, children: [
+        spinner,
+        /* @__PURE__ */ jsxs43(Text45, { children: [
+          "Writing ",
+          countedThings(produced, counts),
+          " to your Contentful space..."
+        ] })
       ] }),
       operationId && /* @__PURE__ */ jsxs43(Box43, { gap: 1, children: [
         /* @__PURE__ */ jsx54(Text45, { color: PALETTE.muted, children: "Operation:" }),
@@ -28034,20 +28041,12 @@ function diffProperty(name, old, newDef) {
   diffs.push({ key: `${name}-new`, color: PALETTE.success, text: `+ ${name}: ${formatPropDef(newDef)}` });
   return diffs;
 }
-function formatDefault(value) {
-  const sys = value?.sys;
-  if (sys?.linkType === "Contentful:DesignToken" && typeof sys.urn === "string") {
-    const name = sys.urn.split("/designTokens/")[1];
-    if (name) return name;
-  }
-  return JSON.stringify(value);
-}
 function formatOldProp(prop) {
   const parts = [];
   if (prop.type) parts.push(prop.type);
   if (prop.category) parts.push(prop.category);
   parts.push(prop.required ? "required" : "optional");
-  if (prop.default !== void 0) parts.push(`default=${formatDefault(prop.default)}`);
+  if (prop.default !== void 0) parts.push(`default=${JSON.stringify(prop.default)}`);
   return parts.join(", ");
 }
 function formatPropDef(def) {
@@ -28056,7 +28055,7 @@ function formatPropDef(def) {
   if (def["$category"]) parts.push(def["$category"]);
   if (def["$required"] === true) parts.push("required");
   else parts.push("optional");
-  if (def["$default"] !== void 0) parts.push(`default=${formatDefault(def["$default"])}`);
+  if (def["$default"] !== void 0) parts.push(`default=${JSON.stringify(def["$default"])}`);
   return parts.join(", ");
 }
 
@@ -28392,6 +28391,8 @@ function FlowScreen({
   onExit
 }) {
   const produced = producedOf(state2);
+  const counts = { components: state2.generatedAcceptedCount, tokens: state2.tokenCount };
+  const things = countedThings(produced, counts);
   const quit = () => onExit(0);
   const content = (() => {
     switch (state2.step) {
@@ -28413,7 +28414,7 @@ function FlowScreen({
           }
         );
       case "previewing":
-        return /* @__PURE__ */ jsx56(RunningStep, { step: "push", description: "Computing diff against your Contentful space..." });
+        return /* @__PURE__ */ jsx56(RunningStep, { step: "push", description: `Computing diff for ${things} against your Contentful space...` });
       case "preview-gate":
         if (!state2.serverPreview) return null;
         return /* @__PURE__ */ jsx56(
@@ -28428,11 +28429,12 @@ function FlowScreen({
           }
         );
       case "pushing":
-        return /* @__PURE__ */ jsx56(PushingStep, { progress: state2.pushProgress, produced });
+        return /* @__PURE__ */ jsx56(PushingStep, { progress: state2.pushProgress, produced, counts });
       case "path-prompt":
         return /* @__PURE__ */ jsx56(
           PathPrompt,
           {
+            summary: `Saving ${things}${state2.credentialsSkipped ? "" : " and pushing them to your Contentful space"}.`,
             defaultPath: state2.outDir,
             onSubmit: (submitted) => void controller.submitPath(submitted),
             onCancel: quit

package/dist/index.js

@@ -21792,7 +21792,6 @@ function GotoBanner({
       borderStyle: "single",
       borderColor: PALETTE.accent,
       paddingX: 1,
-      paddingBottom: 1,
       marginTop: width === void 0 ? 1 : 0,
       width,
       flexShrink: 0,
@@ -21804,7 +21803,7 @@ function GotoBanner({
           return renderRow(row, i, i === highlightIndex);
         }),
         moreBelow > 0 && /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: `  \u25BC ${moreBelow} more` }),
-        footerHint !== void 0 && /* @__PURE__ */ jsx24(Box21, { marginTop: 1, children: /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: footerHint }) })
+        footerHint !== void 0 && /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: footerHint })
       ]
     }
   );
@@ -24536,7 +24535,7 @@ function formatAcceptanceSummary(counts) {
 function describeGeneration(input) {
   const agent = capitalize(input.agent);
   return `${formatAcceptanceSummary({ accepted: input.acceptedCount, autoRejected: 0 })}
-${agent} is reading each selected component and writing a Contentful component definition for it.${input.hasTokens ? "\nUsing 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);
@@ -27054,7 +27053,7 @@ function FieldEditor({
     if (rationaleOpen) {
       return "[\u2191\u2193] scroll  [i/Esc] close rationale panel";
     }
-    return `[\u2191\u2193] navigate  [Enter] edit fields  [h] help  [s] source  [Esc] exit panel`;
+    return `[\u2191\u2193] navigate rows  [Enter] edit fields  [s] source  [${propRationaleKey}] prop rationale  [${componentRationaleKey}] component rationale  [h] help  [Esc] exit panel`;
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
@@ -27736,8 +27735,8 @@ function TokenReviewPanel({
         borderStyle: "single",
         borderColor: active ? PALETTE.text : void 0,
         children: [
-          /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, wrap: "truncate", children: `Review mapped tokens \u2014 ${componentName} \xB7 ${current.propName}${current.kinds.length > 0 ? ` (${current.kinds.join(", ")})` : ""}` }),
-          /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: `Tick the tokens this property may use (${rangeLabel}).` }),
+          /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, wrap: "truncate", children: `TOKEN REVIEW \u2014 ${componentName} \xB7 ${current.propName} (edit allowed)` }),
+          /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: `select which tokens are allowed (${rangeLabel})` }),
           /* @__PURE__ */ jsx39(Text32, { children: " " }),
           current.paths.length === 0 && /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "(no compatible tokens found for this token kind)" }),
           visiblePaths.map((path5, i) => {
@@ -27770,33 +27769,18 @@ function TokenReviewPanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.text : void 0,
       children: [
-        /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, children: `Review mapped tokens \u2014 ${componentName}` }),
-        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: `${componentName} has ${suggestions.length} design ${suggestions.length === 1 ? "prop" : "props"} of type token. Select which tokens are allowed for each property.` }),
-        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, wrap: "truncate", children: "Suggested tokens come from the agent. Allowed tokens are what editors can pick in Contentful." }),
-        /* @__PURE__ */ jsx39(Text32, { children: " " }),
+        /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, children: `TOKEN REVIEW \u2014 ${componentName}` }),
         suggestions.length === 0 && /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "(no token suggestions for this component)" }),
         suggestions.map((s, i) => {
           const focused = i === selectedRow;
           return /* @__PURE__ */ jsxs30(Box31, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx39(Box31, { children: /* @__PURE__ */ jsx39(Text32, { color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted, bold: focused, children: `${focused ? figures7.pointer : " "} ${s.propName}${s.kinds.length > 0 ? ` (${s.kinds.join(", ")})` : ""}` }) }),
-            /* @__PURE__ */ jsx39(
-              Text32,
-              {
-                color: PALETTE.muted,
-                children: `  suggested: ${s.suggested.length > 0 ? s.suggested.join(", ") : "none"}`
-              }
-            ),
-            /* @__PURE__ */ jsx39(
-              Text32,
-              {
-                color: PALETTE.muted,
-                children: `  allowed: ${s.allowed.length > 0 ? s.allowed.join(", ") : "none (any token)"}`
-              }
-            ),
-            /* @__PURE__ */ jsx39(Text32, { children: " " })
+            /* @__PURE__ */ jsx39(Box31, { children: /* @__PURE__ */ jsx39(Text32, { color: focused ? PALETTE.accent : active ? void 0 : PALETTE.muted, bold: focused, children: `${focused ? figures7.pointer : " "} ${s.propName}` }) }),
+            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  suggested: ${s.suggested.join(", ")}` }),
+            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  allowed: ${s.allowed.join(", ")}` })
           ] }, s.propName);
         }),
-        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "[\u2191/\u2193] move  [Enter] edit allowed tokens  [Esc] close" })
+        /* @__PURE__ */ jsx39(Text32, { children: " " }),
+        /* @__PURE__ */ jsx39(Text32, { children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
       ]
     }
   );
@@ -28070,9 +28054,15 @@ function ReviewFinalizeError({
 function ReviewPanelFooter({
   reviewEditor,
   sidebarFocused,
-  sidebarFooter
+  sidebarFooter,
+  livePreview,
+  livePreviewSpinner
 }) {
-  return /* @__PURE__ */ jsx42(Fragment10, { children: reviewEditor.panelOpen === "token-review" ? "" : sidebarFocused ? sidebarFooter : reviewEditor.showJson ? "  [\u2191\u2193] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  [Enter] edit fields" + (reviewEditor.currentTokenSuggestions().length > 0 ? "  [t] review mapped tokens" : "") });
+  return /* @__PURE__ */ jsxs32(Fragment10, { children: [
+    reviewEditor.panelOpen === "token-review" ? "  [\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" : sidebarFocused ? sidebarFooter : reviewEditor.showJson ? "  [\u2191\u2193] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  (edit fields)" + (reviewEditor.currentTokenSuggestions().length > 0 ? "  [t] token review" : ""),
+    livePreview.status === "running" && /* @__PURE__ */ jsx42(Text34, { children: `  ${livePreviewSpinner} live preview` }),
+    livePreview.disabled && /* @__PURE__ */ jsx42(Text34, { children: "  \xB7 live preview disabled" })
+  ] });
 }
 function ReviewComponentTitle({
   selectedKey,
@@ -28106,7 +28096,9 @@ function ReviewComponentPanel({
   sidebarFocused,
   fieldEditor,
   saveError,
-  sidebarFooter
+  sidebarFooter,
+  livePreview,
+  livePreviewSpinner
 }) {
   const propCount = Object.keys(selectedEntry.$properties).length;
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
@@ -28143,7 +28135,9 @@ function ReviewComponentPanel({
       {
         reviewEditor,
         sidebarFocused,
-        sidebarFooter
+        sidebarFooter,
+        livePreview,
+        livePreviewSpinner
       }
     ) }) })
   ] }) });
@@ -28745,7 +28739,7 @@ function collectTokenSuggestions(entry, availableTokens = []) {
     const compatiblePaths = new Set(compatible);
     const allowed = availableTokens.length > 0 ? persistedAllowed.filter((path5) => compatiblePaths.has(path5)) : persistedAllowed;
     const paths = availableTokens.length > 0 ? compatible : allowed;
-    return { propName, kinds, paths, suggested: [...allowed], allowed };
+    return { propName, paths, suggested: [...allowed], allowed };
   });
 }
 var init_token_suggestions = __esm({
@@ -30696,7 +30690,9 @@ function GenerateReviewStepView({
               initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? pendingEditorFocus.target : { kind: "description" }
             }
           ),
-          saveError: reviewEditor.saveError
+          saveError: reviewEditor.saveError,
+          livePreview: livePreviewHook,
+          livePreviewSpinner
         }
       ) : /* @__PURE__ */ jsx48(ReviewNoSelection, {})
     ] }),
@@ -30728,7 +30724,7 @@ function GenerateReviewStepView({
         hidden: dialogOpen
       }
     ),
-    !dialogOpen && sidebarFocused && reviewEditor.panelOpen !== "token-review" && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
+    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
   ] });
 }
 var HELP_SECTIONS2;
@@ -30810,7 +30806,7 @@ var init_generate_review_step = __esm({
           { keys: "P", label: "Component rationale" },
           { keys: "s", label: "Source code snippet" },
           { keys: "J", label: "Toggle JSON" },
-          { keys: "t", label: "Review mapped tokens" }
+          { keys: "t", label: "Token review" }
         ]
       },
       {
@@ -31078,7 +31074,8 @@ function PathPrompt({
   defaultPath,
   onSubmit,
   onCancel,
-  label = "Save to"
+  label = "Save to",
+  summary
 }) {
   const [input, setInput] = useState28("");
   const cursorVisible = useBlinkingCursor();
@@ -31112,6 +31109,7 @@ function PathPrompt({
   return /* @__PURE__ */ jsxs42(Box42, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx52(StepHeader, { step: "push" }),
     /* @__PURE__ */ jsxs42(Box42, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
+      summary && /* @__PURE__ */ jsx52(Text44, { color: PALETTE.muted, children: summary }),
       /* @__PURE__ */ jsxs42(Box42, { gap: 1, children: [
         /* @__PURE__ */ jsx52(Text44, { color: PALETTE.accent, children: "?" }),
         /* @__PURE__ */ jsxs42(Text44, { bold: true, children: [
@@ -31153,9 +31151,15 @@ function producedOf(state2) {
 function fileSummaryLabel({ components }) {
   return components ? "components.json" : "components.json (design tokens only)";
 }
-function writtenThings({ components, tokens }) {
-  if (components && tokens) return "component types and design tokens";
-  return tokens ? "design tokens" : "component types";
+function counted(count, noun) {
+  if (!count) return `${noun}s`;
+  return `${count} ${noun}${count === 1 ? "" : "s"}`;
+}
+function countedThings({ components, tokens }, counts = {}) {
+  const parts = [];
+  if (components || !tokens) parts.push(counted(counts.components, "component type"));
+  if (tokens) parts.push(counted(counts.tokens, "design token"));
+  return parts.join(" and ");
 }
 var init_produced = __esm({
   "packages/experience-design-system-cli/src/tui/import/steps/10-flow/support/produced.ts"() {
@@ -31192,18 +31196,21 @@ var init_use_timed_spinner = __esm({
 import { Box as Box43, Text as Text45 } from "ink";
 import { ProgressBar as ProgressBar2, ThemeProvider as ThemeProvider2 } from "@inkjs/ui";
 import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
-function PushingStep({ progress, produced }) {
-  const { elapsed } = useTimedSpinner();
+function PushingStep({ progress, produced, counts }) {
+  const { spinner, elapsed } = useTimedSpinner();
   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__ */ jsxs43(Box43, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx54(StepHeader, { step: "push" }),
     /* @__PURE__ */ jsxs43(Box43, { flexDirection: "column", gap: 1, paddingX: 2, paddingBottom: 1, children: [
-      /* @__PURE__ */ jsxs43(Text45, { children: [
-        "Writing ",
-        writtenThings(produced),
-        " to your Contentful space..."
+      /* @__PURE__ */ jsxs43(Box43, { gap: 1, children: [
+        spinner,
+        /* @__PURE__ */ jsxs43(Text45, { children: [
+          "Writing ",
+          countedThings(produced, counts),
+          " to your Contentful space..."
+        ] })
       ] }),
       operationId && /* @__PURE__ */ jsxs43(Box43, { gap: 1, children: [
         /* @__PURE__ */ jsx54(Text45, { color: PALETTE.muted, children: "Operation:" }),
@@ -31378,20 +31385,12 @@ function diffProperty(name, old, newDef) {
   diffs.push({ key: `${name}-new`, color: PALETTE.success, text: `+ ${name}: ${formatPropDef(newDef)}` });
   return diffs;
 }
-function formatDefault(value) {
-  const sys = value?.sys;
-  if (sys?.linkType === "Contentful:DesignToken" && typeof sys.urn === "string") {
-    const name = sys.urn.split("/designTokens/")[1];
-    if (name) return name;
-  }
-  return JSON.stringify(value);
-}
 function formatOldProp(prop) {
   const parts = [];
   if (prop.type) parts.push(prop.type);
   if (prop.category) parts.push(prop.category);
   parts.push(prop.required ? "required" : "optional");
-  if (prop.default !== void 0) parts.push(`default=${formatDefault(prop.default)}`);
+  if (prop.default !== void 0) parts.push(`default=${JSON.stringify(prop.default)}`);
   return parts.join(", ");
 }
 function formatPropDef(def) {
@@ -31400,7 +31399,7 @@ function formatPropDef(def) {
   if (def["$category"]) parts.push(def["$category"]);
   if (def["$required"] === true) parts.push("required");
   else parts.push("optional");
-  if (def["$default"] !== void 0) parts.push(`default=${formatDefault(def["$default"])}`);
+  if (def["$default"] !== void 0) parts.push(`default=${JSON.stringify(def["$default"])}`);
   return parts.join(", ");
 }
 var init_preview_diff = __esm({
@@ -31770,6 +31769,8 @@ function FlowScreen({
   onExit
 }) {
   const produced = producedOf(state2);
+  const counts = { components: state2.generatedAcceptedCount, tokens: state2.tokenCount };
+  const things = countedThings(produced, counts);
   const quit = () => onExit(0);
   const content = (() => {
     switch (state2.step) {
@@ -31791,7 +31792,7 @@ function FlowScreen({
           }
         );
       case "previewing":
-        return /* @__PURE__ */ jsx56(RunningStep, { step: "push", description: "Computing diff against your Contentful space..." });
+        return /* @__PURE__ */ jsx56(RunningStep, { step: "push", description: `Computing diff for ${things} against your Contentful space...` });
       case "preview-gate":
         if (!state2.serverPreview) return null;
         return /* @__PURE__ */ jsx56(
@@ -31806,11 +31807,12 @@ function FlowScreen({
           }
         );
       case "pushing":
-        return /* @__PURE__ */ jsx56(PushingStep, { progress: state2.pushProgress, produced });
+        return /* @__PURE__ */ jsx56(PushingStep, { progress: state2.pushProgress, produced, counts });
       case "path-prompt":
         return /* @__PURE__ */ jsx56(
           PathPrompt,
           {
+            summary: `Saving ${things}${state2.credentialsSkipped ? "" : " and pushing them to your Contentful space"}.`,
             defaultPath: state2.outDir,
             onSubmit: (submitted) => void controller.submitPath(submitted),
             onCancel: quit

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.38.1-dev-build-40e920ee.0",
+  "version": "2.38.1-dev-build-8e139f2f.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",

package/dist/src/tui/import/steps/09-review/components/ReviewComponentPanel.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { CDFComponentEntry } from '@contentful/experience-design-system-types';
 import type { CdfReviewEntry } from '../types.js';
 import type { UseReviewEditorResult } from '../use-review-editor.js';
+import type { UseLivePreviewReturn } from '../use-live-preview.js';
 import { type ReviewDetailsEditorProps } from './ReviewDetailsEditor.js';
 type ReviewDetailsEditorConfig = Pick<ReviewDetailsEditorProps, 'componentRationale' | 'reviewMetadata' | 'reviewEditor' | 'width' | 'height' | 'sourceBorderColor' | 'jsonValue' | 'sidebarFocused' | 'fieldEditor'>;
 export type ReviewComponentPanelProps = ReviewDetailsEditorConfig & {
@@ -9,6 +10,8 @@ export type ReviewComponentPanelProps = ReviewDetailsEditorConfig & {
     selectedEntry: CDFComponentEntry;
     saveError: string | null;
     sidebarFooter?: React.ReactNode;
+    livePreview: Pick<UseLivePreviewReturn, 'status' | 'disabled'>;
+    livePreviewSpinner: string;
 };
 type ReviewFieldEditor = ReviewDetailsEditorProps['fieldEditor'];
 export declare function buildReviewFieldEditor(reviewEditor: UseReviewEditorResult, selectedJson: string, onExit: () => void, overrides?: Partial<ReviewFieldEditor>): ReviewFieldEditor;
@@ -26,5 +29,5 @@ export declare function ReviewFinalizeError({ message, hidden, }: {
     message: string | null;
     hidden: boolean;
 }): React.ReactElement | null;
-export declare function ReviewComponentPanel({ selectedKey, selectedEntry, componentRationale, reviewMetadata, reviewEditor, width, height, sourceBorderColor, jsonValue, sidebarFocused, fieldEditor, saveError, sidebarFooter, }: ReviewComponentPanelProps): React.ReactElement;
+export declare function ReviewComponentPanel({ selectedKey, selectedEntry, componentRationale, reviewMetadata, reviewEditor, width, height, sourceBorderColor, jsonValue, sidebarFocused, fieldEditor, saveError, sidebarFooter, livePreview, livePreviewSpinner, }: ReviewComponentPanelProps): React.ReactElement;
 export {};

package/dist/src/tui/import/steps/09-review/components/TokenReviewPanel.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export type TokenPropSuggestion = {
     propName: string;
-    kinds: string[];
     paths: string[];
     suggested: string[];
     allowed: string[];

package/dist/src/tui/import/steps/09-review/types.d.ts

@@ -12,7 +12,6 @@ export type TokenReviewToken = {
 };
 export type TokenPropSuggestion = {
     propName: string;
-    kinds: string[];
     paths: string[];
     suggested: string[];
     allowed: string[];

package/dist/src/tui/import/steps/10-flow/screens/PathPrompt.d.ts

@@ -4,5 +4,7 @@ export type PathPromptProps = {
     onSubmit: (path: string) => void;
     onCancel: () => void;
     label?: string;
+    /** What is being saved, shown above the path, such as "Saving 42 design tokens." */
+    summary?: string;
 };
-export declare function PathPrompt({ defaultPath, onSubmit, onCancel, label, }: PathPromptProps): React.ReactElement;
+export declare function PathPrompt({ defaultPath, onSubmit, onCancel, label, summary, }: PathPromptProps): React.ReactElement;

package/dist/src/tui/import/steps/10-flow/screens/PushingStep.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { PushProgress } from '../support/push-progress.js';
-import { type Produced } from '../support/produced.js';
+import { type Produced, type ProducedCounts } from '../support/produced.js';
 type PushingStepProps = {
     progress: PushProgress;
     produced: Produced;
+    counts: ProducedCounts;
 };
-export declare function PushingStep({ progress, produced }: PushingStepProps): React.ReactElement;
+export declare function PushingStep({ progress, produced, counts }: PushingStepProps): React.ReactElement;
 export {};

package/dist/src/tui/import/steps/10-flow/support/produced.d.ts

@@ -11,5 +11,15 @@ export declare function producedOf(state: Pick<FlowState, 'extractSessionId' | '
  * holds just the tokens, and calling it a components file would mislead.
  */
 export declare function fileSummaryLabel({ components }: Produced): string;
+/** How many of each thing a run writes. A missing or zero count is left out of the wording, never shown as "0". */
+export interface ProducedCounts {
+    components?: number;
+    tokens?: number;
+}
+/**
+ * "12 component types and 42 design tokens", "42 design tokens", or "component types": the things this run writes, with
+ * how many of each when known.
+ */
+export declare function countedThings({ components, tokens }: Produced, counts?: ProducedCounts): string;
 /** "component types and design tokens", "design tokens", or "component types": the things this run writes. */
-export declare function writtenThings({ components, tokens }: Produced): string;
+export declare function writtenThings(produced: Produced): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.38.1-dev-build-40e920ee.0",
+  "version": "2.38.1-dev-build-8e139f2f.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -45,8 +45,8 @@
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
     "zod": "^4.6.5",
-    "@contentful/experience-design-system-backend-pipeline": "2.38.1-dev-build-40e920ee.0",
-    "@contentful/experience-design-system-types": "2.38.1-dev-build-40e920ee.0"
+    "@contentful/experience-design-system-backend-pipeline": "2.38.1-dev-build-8e139f2f.0",
+    "@contentful/experience-design-system-types": "2.38.1-dev-build-8e139f2f.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",