@contentful/experience-design-system-cli 2.38.1-dev-build-dda16770.0 → 2.39.1-dev-build-61afabf3.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 })
   ] });
 }
 
@@ -28045,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) {
@@ -28067,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(", ");
 }
 

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" }
         ]
       },
       {
@@ -31389,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) {
@@ -31411,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({

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.38.1-dev-build-dda16770.0",
+  "version": "2.39.1-dev-build-61afabf3.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.38.1-dev-build-dda16770.0",
+  "version": "2.39.1-dev-build-61afabf3.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-dda16770.0",
-    "@contentful/experience-design-system-types": "2.38.1-dev-build-dda16770.0"
+    "@contentful/experience-design-system-types": "2.39.1-dev-build-61afabf3.0",
+    "@contentful/experience-design-system-backend-pipeline": "2.39.1-dev-build-61afabf3.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",