@contentful/experience-design-system-cli 2.38.1-dev-build-2bb2d130.0 → 2.38.1-dev-build-a2bc858b.0

package/dist/app.js

@@ -19198,6 +19198,7 @@ function GotoBanner({
       borderStyle: "single",
       borderColor: PALETTE.accent,
       paddingX: 1,
+      paddingBottom: 1,
       marginTop: width === void 0 ? 1 : 0,
       width,
       flexShrink: 0,
@@ -19209,7 +19210,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(Text21, { color: PALETTE.muted, children: footerHint })
+        footerHint !== void 0 && /* @__PURE__ */ jsx24(Box21, { marginTop: 1, children: /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: footerHint }) })
       ]
     }
   );
@@ -21714,7 +21715,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 ? " Using your design tokens for prop resolution." : ""}`;
+${agent} is reading each selected component and writing a Contentful component definition for it.${input.hasTokens ? "\nUsing your design tokens for prop resolution." : ""}`;
 }
 function progressRows2(progress, agent) {
   const name = capitalize(agent);
@@ -23372,6 +23373,7 @@ function FieldEditor({
   const [rationaleOpen, setRationaleOpen] = useState19(false);
   const [rationaleScrollOffset, setRationaleScrollOffset] = useState19(0);
   const [showHelp, setShowHelp] = useState19(false);
+  const [pendingDelete, setPendingDelete] = useState19(null);
   const props = editorState.props;
   const slots = editorState.slots;
   const contentPropIndexes = React13.useMemo(
@@ -23463,6 +23465,46 @@ function FieldEditor({
     setEditorState(next);
     onChange(serializeState(next, value));
   };
+  const deleteRow = (row) => {
+    if (row.kind === "prop") {
+      const nextProps = removeAt(editorState.props, row.idx);
+      commit({ ...editorState, props: nextProps });
+      setPropIdx(Math.max(0, Math.min(row.idx, nextProps.length - 1)));
+      const rowsAfter2 = selectableRows.filter((r) => !(r.kind === "prop" && r.idx === row.idx));
+      const neighbour2 = rowsAfter2[Math.max(0, selectableRows.findIndex((r) => r.kind === row.kind && r.idx === row.idx) - 1)];
+      if (!neighbour2) {
+        setInSlots(false);
+        setInComponentDesc(true);
+        setFocusLevel("componentDescription");
+      } else if (neighbour2.kind === "prop") {
+        setInSlots(false);
+        setPropIdx(neighbour2.idx > row.idx ? neighbour2.idx - 1 : neighbour2.idx);
+        setFocusLevel("prop");
+      } else {
+        setInSlots(true);
+        setSlotIdx(neighbour2.idx);
+        setFocusLevel("slot");
+      }
+      return;
+    }
+    const nextSlots = removeAt(editorState.slots, row.idx);
+    commit({ ...editorState, slots: nextSlots });
+    const rowsAfter = selectableRows.filter((r) => !(r.kind === "slot" && r.idx === row.idx));
+    const neighbour = rowsAfter[Math.max(0, selectableRows.findIndex((r) => r.kind === row.kind && r.idx === row.idx) - 1)];
+    if (!neighbour) {
+      setInSlots(false);
+      setInComponentDesc(true);
+      setFocusLevel("componentDescription");
+    } else if (neighbour.kind === "slot") {
+      setInSlots(true);
+      setSlotIdx(neighbour.idx > row.idx ? neighbour.idx - 1 : neighbour.idx);
+      setFocusLevel("slot");
+    } else {
+      setInSlots(false);
+      setPropIdx(neighbour.idx);
+      setFocusLevel("prop");
+    }
+  };
   const canonicalize = React13.useCallback((json) => {
     try {
       return JSON.stringify(JSON.parse(json));
@@ -23499,6 +23541,11 @@ function FieldEditor({
       onSave();
       return;
     }
+    if (pendingDelete) {
+      if (input === "y") deleteRow(pendingDelete);
+      setPendingDelete(null);
+      return;
+    }
     const inDescriptionTextEntryForHelp = focusLevel === "field" && editingField && activeField === "description";
     const inStringDefaultTextEntryForHelp = focusLevel === "field" && editingField && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
     const inValueListTextEntry = editingValue != null;
@@ -23698,6 +23745,11 @@ function FieldEditor({
         }
         return;
       }
+      if (input === "d" && !key.ctrl && !key.meta) {
+        if (focusLevel === "prop" && currentProp) setPendingDelete({ kind: "prop", idx: propIdx });
+        if (focusLevel === "slot" && currentSlot) setPendingDelete({ kind: "slot", idx: slotIdx });
+        return;
+      }
       if (focusLevel === "slot" && key.return && currentSlot) {
         setFocusLevel("field");
         setActiveField(SLOT_FIELDS[0] ?? null);
@@ -24004,6 +24056,10 @@ function FieldEditor({
   }
   const hasEmptyProperties = props.length === 0 && slots.length === 0;
   const modeLabel = (() => {
+    if (pendingDelete) {
+      const name = pendingDelete.kind === "prop" ? props[pendingDelete.idx]?.name : slots[pendingDelete.idx]?.name;
+      return `Delete ${pendingDelete.kind} "${name}"? [y] delete \xB7 any other key cancels`;
+    }
     if (editingValue) {
       return editingValue.mode === "add" ? "Enter to add \xB7 [Esc] to cancel" : "Enter to save edit \xB7 [Esc] to cancel";
     }
@@ -24025,7 +24081,7 @@ function FieldEditor({
     if (rationaleOpen) {
       return "[\u2191\u2193] scroll  [i/Esc] close rationale panel";
     }
-    return `[\u2191\u2193] navigate rows  [Enter] edit fields  [s] source  [${propRationaleKey}] prop rationale  [${componentRationaleKey}] component rationale  [h] help  [Esc] exit panel`;
+    return `[\u2191\u2193] navigate  [Enter] edit fields  [d] delete property  [h] help  [s] source  [Esc] exit panel`;
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
@@ -24291,6 +24347,7 @@ function FieldEditor({
           /* @__PURE__ */ jsx32(Text27, { bold: true, children: "Row navigation" }),
           /* @__PURE__ */ jsx32(Text27, { children: "  \u2191/\u2193               move between rows" }),
           /* @__PURE__ */ jsx32(Text27, { children: "  Enter            edit fields on the current row" }),
+          /* @__PURE__ */ jsx32(Text27, { children: "  d                delete the current prop or slot (asks to confirm)" }),
           /* @__PURE__ */ jsx32(Text27, { children: "  Esc              exit the panel" }),
           /* @__PURE__ */ jsx32(Text27, { children: " " }),
           /* @__PURE__ */ jsx32(Text27, { bold: true, children: "Field editing" }),
@@ -24314,7 +24371,7 @@ function FieldEditor({
           /* @__PURE__ */ jsx32(Text27, { color: PALETTE.muted, children: "press ? or Esc to close" })
         ] }),
         validationError && /* @__PURE__ */ jsx32(Text27, { color: PALETTE.error, children: "\u2717 " + validationError }),
-        /* @__PURE__ */ jsx32(Box26, { paddingTop: 1, children: /* @__PURE__ */ jsx32(Text27, { color: PALETTE.muted, children: modeLabel }) })
+        /* @__PURE__ */ jsx32(Box26, { paddingTop: 1, children: /* @__PURE__ */ jsx32(Text27, { color: pendingDelete ? PALETTE.text : PALETTE.muted, children: modeLabel }) })
       ]
     }
   );
@@ -24653,8 +24710,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: `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, { 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, { children: " " }),
           current.paths.length === 0 && /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "(no compatible tokens found for this token kind)" }),
           visiblePaths.map((path5, i) => {
@@ -24687,18 +24744,33 @@ function TokenReviewPanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.text : void 0,
       children: [
-        /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, children: `TOKEN REVIEW \u2014 ${componentName}` }),
+        /* @__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: " " }),
         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}` }) }),
-            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  suggested: ${s.suggested.join(", ")}` }),
-            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  allowed: ${s.allowed.join(", ")}` })
+            /* @__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: " " })
           ] }, s.propName);
         }),
-        /* @__PURE__ */ jsx39(Text32, { children: " " }),
-        /* @__PURE__ */ jsx39(Text32, { children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
+        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "[\u2191/\u2193] move  [Enter] edit allowed tokens  [Esc] close" })
       ]
     }
   );
@@ -24946,15 +25018,9 @@ function ReviewFinalizeError({
 function ReviewPanelFooter({
   reviewEditor,
   sidebarFocused,
-  sidebarFooter,
-  livePreview,
-  livePreviewSpinner
+  sidebarFooter
 }) {
-  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" })
-  ] });
+  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" : "") });
 }
 function ReviewComponentTitle({
   selectedKey,
@@ -24988,9 +25054,7 @@ function ReviewComponentPanel({
   sidebarFocused,
   fieldEditor,
   saveError,
-  sidebarFooter,
-  livePreview,
-  livePreviewSpinner
+  sidebarFooter
 }) {
   const propCount = Object.keys(selectedEntry.$properties).length;
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
@@ -25027,9 +25091,7 @@ function ReviewComponentPanel({
       {
         reviewEditor,
         sidebarFocused,
-        sidebarFooter,
-        livePreview,
-        livePreviewSpinner
+        sidebarFooter
       }
     ) }) })
   ] }) });
@@ -25573,7 +25635,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, paths, suggested: [...allowed], allowed };
+    return { propName, kinds, paths, suggested: [...allowed], allowed };
   });
 }
 
@@ -26369,7 +26431,7 @@ var HELP_SECTIONS2 = [
       { keys: "P", label: "Component rationale" },
       { keys: "s", label: "Source code snippet" },
       { keys: "J", label: "Toggle JSON" },
-      { keys: "t", label: "Token review" }
+      { keys: "t", label: "Review mapped tokens" }
     ]
   },
   {
@@ -27517,9 +27579,7 @@ function GenerateReviewStepView({
               initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? pendingEditorFocus.target : { kind: "description" }
             }
           ),
-          saveError: reviewEditor.saveError,
-          livePreview: livePreviewHook,
-          livePreviewSpinner
+          saveError: reviewEditor.saveError
         }
       ) : /* @__PURE__ */ jsx48(ReviewNoSelection, {})
     ] }),
@@ -27551,7 +27611,7 @@ function GenerateReviewStepView({
         hidden: dialogOpen
       }
     ),
-    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
+    !dialogOpen && sidebarFocused && reviewEditor.panelOpen !== "token-review" && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
   ] });
 }
 
@@ -28041,12 +28101,20 @@ 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=${JSON.stringify(prop.default)}`);
+  if (prop.default !== void 0) parts.push(`default=${formatDefault(prop.default)}`);
   return parts.join(", ");
 }
 function formatPropDef(def) {
@@ -28055,7 +28123,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=${JSON.stringify(def["$default"])}`);
+  if (def["$default"] !== void 0) parts.push(`default=${formatDefault(def["$default"])}`);
   return parts.join(", ");
 }
 

package/dist/index.js

@@ -21792,6 +21792,7 @@ function GotoBanner({
       borderStyle: "single",
       borderColor: PALETTE.accent,
       paddingX: 1,
+      paddingBottom: 1,
       marginTop: width === void 0 ? 1 : 0,
       width,
       flexShrink: 0,
@@ -21803,7 +21804,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(Text21, { color: PALETTE.muted, children: footerHint })
+        footerHint !== void 0 && /* @__PURE__ */ jsx24(Box21, { marginTop: 1, children: /* @__PURE__ */ jsx24(Text21, { color: PALETTE.muted, children: footerHint }) })
       ]
     }
   );
@@ -24535,7 +24536,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 ? " Using your design tokens for prop resolution." : ""}`;
+${agent} is reading each selected component and writing a Contentful component definition for it.${input.hasTokens ? "\nUsing your design tokens for prop resolution." : ""}`;
 }
 function progressRows2(progress, agent) {
   const name = capitalize(agent);
@@ -26400,6 +26401,7 @@ function FieldEditor({
   const [rationaleOpen, setRationaleOpen] = useState19(false);
   const [rationaleScrollOffset, setRationaleScrollOffset] = useState19(0);
   const [showHelp, setShowHelp] = useState19(false);
+  const [pendingDelete, setPendingDelete] = useState19(null);
   const props = editorState.props;
   const slots = editorState.slots;
   const contentPropIndexes = React13.useMemo(
@@ -26491,6 +26493,46 @@ function FieldEditor({
     setEditorState(next);
     onChange(serializeState(next, value));
   };
+  const deleteRow = (row) => {
+    if (row.kind === "prop") {
+      const nextProps = removeAt(editorState.props, row.idx);
+      commit({ ...editorState, props: nextProps });
+      setPropIdx(Math.max(0, Math.min(row.idx, nextProps.length - 1)));
+      const rowsAfter2 = selectableRows.filter((r) => !(r.kind === "prop" && r.idx === row.idx));
+      const neighbour2 = rowsAfter2[Math.max(0, selectableRows.findIndex((r) => r.kind === row.kind && r.idx === row.idx) - 1)];
+      if (!neighbour2) {
+        setInSlots(false);
+        setInComponentDesc(true);
+        setFocusLevel("componentDescription");
+      } else if (neighbour2.kind === "prop") {
+        setInSlots(false);
+        setPropIdx(neighbour2.idx > row.idx ? neighbour2.idx - 1 : neighbour2.idx);
+        setFocusLevel("prop");
+      } else {
+        setInSlots(true);
+        setSlotIdx(neighbour2.idx);
+        setFocusLevel("slot");
+      }
+      return;
+    }
+    const nextSlots = removeAt(editorState.slots, row.idx);
+    commit({ ...editorState, slots: nextSlots });
+    const rowsAfter = selectableRows.filter((r) => !(r.kind === "slot" && r.idx === row.idx));
+    const neighbour = rowsAfter[Math.max(0, selectableRows.findIndex((r) => r.kind === row.kind && r.idx === row.idx) - 1)];
+    if (!neighbour) {
+      setInSlots(false);
+      setInComponentDesc(true);
+      setFocusLevel("componentDescription");
+    } else if (neighbour.kind === "slot") {
+      setInSlots(true);
+      setSlotIdx(neighbour.idx > row.idx ? neighbour.idx - 1 : neighbour.idx);
+      setFocusLevel("slot");
+    } else {
+      setInSlots(false);
+      setPropIdx(neighbour.idx);
+      setFocusLevel("prop");
+    }
+  };
   const canonicalize = React13.useCallback((json) => {
     try {
       return JSON.stringify(JSON.parse(json));
@@ -26527,6 +26569,11 @@ function FieldEditor({
       onSave();
       return;
     }
+    if (pendingDelete) {
+      if (input === "y") deleteRow(pendingDelete);
+      setPendingDelete(null);
+      return;
+    }
     const inDescriptionTextEntryForHelp = focusLevel === "field" && editingField && activeField === "description";
     const inStringDefaultTextEntryForHelp = focusLevel === "field" && editingField && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
     const inValueListTextEntry = editingValue != null;
@@ -26726,6 +26773,11 @@ function FieldEditor({
         }
         return;
       }
+      if (input === "d" && !key.ctrl && !key.meta) {
+        if (focusLevel === "prop" && currentProp) setPendingDelete({ kind: "prop", idx: propIdx });
+        if (focusLevel === "slot" && currentSlot) setPendingDelete({ kind: "slot", idx: slotIdx });
+        return;
+      }
       if (focusLevel === "slot" && key.return && currentSlot) {
         setFocusLevel("field");
         setActiveField(SLOT_FIELDS[0] ?? null);
@@ -27032,6 +27084,10 @@ function FieldEditor({
   }
   const hasEmptyProperties = props.length === 0 && slots.length === 0;
   const modeLabel = (() => {
+    if (pendingDelete) {
+      const name = pendingDelete.kind === "prop" ? props[pendingDelete.idx]?.name : slots[pendingDelete.idx]?.name;
+      return `Delete ${pendingDelete.kind} "${name}"? [y] delete \xB7 any other key cancels`;
+    }
     if (editingValue) {
       return editingValue.mode === "add" ? "Enter to add \xB7 [Esc] to cancel" : "Enter to save edit \xB7 [Esc] to cancel";
     }
@@ -27053,7 +27109,7 @@ function FieldEditor({
     if (rationaleOpen) {
       return "[\u2191\u2193] scroll  [i/Esc] close rationale panel";
     }
-    return `[\u2191\u2193] navigate rows  [Enter] edit fields  [s] source  [${propRationaleKey}] prop rationale  [${componentRationaleKey}] component rationale  [h] help  [Esc] exit panel`;
+    return `[\u2191\u2193] navigate  [Enter] edit fields  [d] delete property  [h] help  [s] source  [Esc] exit panel`;
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
@@ -27319,6 +27375,7 @@ function FieldEditor({
           /* @__PURE__ */ jsx32(Text27, { bold: true, children: "Row navigation" }),
           /* @__PURE__ */ jsx32(Text27, { children: "  \u2191/\u2193               move between rows" }),
           /* @__PURE__ */ jsx32(Text27, { children: "  Enter            edit fields on the current row" }),
+          /* @__PURE__ */ jsx32(Text27, { children: "  d                delete the current prop or slot (asks to confirm)" }),
           /* @__PURE__ */ jsx32(Text27, { children: "  Esc              exit the panel" }),
           /* @__PURE__ */ jsx32(Text27, { children: " " }),
           /* @__PURE__ */ jsx32(Text27, { bold: true, children: "Field editing" }),
@@ -27342,7 +27399,7 @@ function FieldEditor({
           /* @__PURE__ */ jsx32(Text27, { color: PALETTE.muted, children: "press ? or Esc to close" })
         ] }),
         validationError && /* @__PURE__ */ jsx32(Text27, { color: PALETTE.error, children: "\u2717 " + validationError }),
-        /* @__PURE__ */ jsx32(Box26, { paddingTop: 1, children: /* @__PURE__ */ jsx32(Text27, { color: PALETTE.muted, children: modeLabel }) })
+        /* @__PURE__ */ jsx32(Box26, { paddingTop: 1, children: /* @__PURE__ */ jsx32(Text27, { color: pendingDelete ? PALETTE.text : PALETTE.muted, children: modeLabel }) })
       ]
     }
   );
@@ -27735,8 +27792,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: `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, { 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, { children: " " }),
           current.paths.length === 0 && /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "(no compatible tokens found for this token kind)" }),
           visiblePaths.map((path5, i) => {
@@ -27769,18 +27826,33 @@ function TokenReviewPanel({
       borderStyle: "single",
       borderColor: active ? PALETTE.text : void 0,
       children: [
-        /* @__PURE__ */ jsx39(Text32, { bold: true, color: active ? void 0 : PALETTE.muted, children: `TOKEN REVIEW \u2014 ${componentName}` }),
+        /* @__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: " " }),
         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}` }) }),
-            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  suggested: ${s.suggested.join(", ")}` }),
-            /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: `  allowed: ${s.allowed.join(", ")}` })
+            /* @__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: " " })
           ] }, s.propName);
         }),
-        /* @__PURE__ */ jsx39(Text32, { children: " " }),
-        /* @__PURE__ */ jsx39(Text32, { children: "[\u2191/\u2193] move  [Enter] edit allowed  [Esc] close" })
+        /* @__PURE__ */ jsx39(Text32, { color: PALETTE.muted, children: "[\u2191/\u2193] move  [Enter] edit allowed tokens  [Esc] close" })
       ]
     }
   );
@@ -28054,15 +28126,9 @@ function ReviewFinalizeError({
 function ReviewPanelFooter({
   reviewEditor,
   sidebarFocused,
-  sidebarFooter,
-  livePreview,
-  livePreviewSpinner
+  sidebarFooter
 }) {
-  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" })
-  ] });
+  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" : "") });
 }
 function ReviewComponentTitle({
   selectedKey,
@@ -28096,9 +28162,7 @@ function ReviewComponentPanel({
   sidebarFocused,
   fieldEditor,
   saveError,
-  sidebarFooter,
-  livePreview,
-  livePreviewSpinner
+  sidebarFooter
 }) {
   const propCount = Object.keys(selectedEntry.$properties).length;
   const slotCount = selectedEntry.$slots ? Object.keys(selectedEntry.$slots).length : 0;
@@ -28135,9 +28199,7 @@ function ReviewComponentPanel({
       {
         reviewEditor,
         sidebarFocused,
-        sidebarFooter,
-        livePreview,
-        livePreviewSpinner
+        sidebarFooter
       }
     ) }) })
   ] }) });
@@ -28739,7 +28801,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, paths, suggested: [...allowed], allowed };
+    return { propName, kinds, paths, suggested: [...allowed], allowed };
   });
 }
 var init_token_suggestions = __esm({
@@ -30690,9 +30752,7 @@ function GenerateReviewStepView({
               initialFocusTarget: pendingEditorFocus && pendingEditorFocus.componentName === selected.key ? pendingEditorFocus.target : { kind: "description" }
             }
           ),
-          saveError: reviewEditor.saveError,
-          livePreview: livePreviewHook,
-          livePreviewSpinner
+          saveError: reviewEditor.saveError
         }
       ) : /* @__PURE__ */ jsx48(ReviewNoSelection, {})
     ] }),
@@ -30724,7 +30784,7 @@ function GenerateReviewStepView({
         hidden: dialogOpen
       }
     ),
-    !dialogOpen && sidebarFocused && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
+    !dialogOpen && sidebarFocused && reviewEditor.panelOpen !== "token-review" && /* @__PURE__ */ jsx48(CompactControlBar, { hasGroupRoots, searchActive: searchOpen || searchQuery.length > 0 })
   ] });
 }
 var HELP_SECTIONS2;
@@ -30806,7 +30866,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: "Token review" }
+          { keys: "t", label: "Review mapped tokens" }
         ]
       },
       {
@@ -31385,12 +31445,20 @@ 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=${JSON.stringify(prop.default)}`);
+  if (prop.default !== void 0) parts.push(`default=${formatDefault(prop.default)}`);
   return parts.join(", ");
 }
 function formatPropDef(def) {
@@ -31399,7 +31467,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=${JSON.stringify(def["$default"])}`);
+  if (def["$default"] !== void 0) parts.push(`default=${formatDefault(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-2bb2d130.0",
+  "version": "2.38.1-dev-build-a2bc858b.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,7 +2,6 @@ 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 & {
@@ -10,8 +9,6 @@ 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;
@@ -29,5 +26,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, livePreview, livePreviewSpinner, }: ReviewComponentPanelProps): React.ReactElement;
+export declare function ReviewComponentPanel({ selectedKey, selectedEntry, componentRationale, reviewMetadata, reviewEditor, width, height, sourceBorderColor, jsonValue, sidebarFocused, fieldEditor, saveError, sidebarFooter, }: ReviewComponentPanelProps): React.ReactElement;
 export {};

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

@@ -1,6 +1,7 @@
 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,6 +12,7 @@ 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-2bb2d130.0",
+  "version": "2.38.1-dev-build-a2bc858b.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-2bb2d130.0",
-    "@contentful/experience-design-system-types": "2.38.1-dev-build-2bb2d130.0"
+    "@contentful/experience-design-system-backend-pipeline": "2.38.1-dev-build-a2bc858b.0",
+    "@contentful/experience-design-system-types": "2.38.1-dev-build-a2bc858b.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",