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

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.34.5-dev-build-0dbc122c.0",
+  "version": "2.34.5-dev-build-7ebabd5d.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",

package/dist/src/index.js

@@ -21404,9 +21404,9 @@ var init_scroll_offset = __esm({
 });
 
 // packages/experience-design-system-cli/src/analyze/select/tui/components/FieldEditor.tsx
-import React14, { useEffect as useEffect8, useState as useState15 } from "react";
+import React14, { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useState as useState15 } from "react";
 import figures4 from "figures";
-import { Box as Box29, Text as Text30 } from "ink";
+import { Box as Box29, measureElement, Text as Text30 } from "ink";
 import {
   CDF_PROPERTY_TYPES,
   CDF_PROPERTY_CATEGORIES,
@@ -21438,7 +21438,10 @@ function parseToState(json) {
   try {
     parsed = JSON.parse(json);
   } catch (e) {
-    return { state: { componentDescription: "", props: [], slots: [] }, error: String(e) };
+    return {
+      state: { componentDescription: "", props: [], slots: [] },
+      error: String(e)
+    };
   }
   if (typeof parsed !== "object" || parsed === null) {
     return {
@@ -21564,13 +21567,23 @@ function InlinePropField({
   selected,
   focused = false,
   children,
-  flexible = false
+  flexible = false,
+  width
 }) {
-  return /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexShrink: flexible ? 1 : 0, flexGrow: flexible ? 1 : 0, children: [
-    /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !selected && !focused, children: [
-      focused ? "\u203A " : "  ",
-      label
-    ] }),
+  return /* @__PURE__ */ jsxs30(Box29, { width, gap: 1, flexShrink: flexible ? 1 : 0, flexGrow: flexible ? 1 : 0, flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsxs30(
+      Text30,
+      {
+        color: focused ? PALETTE.warning : void 0,
+        bold: focused,
+        dimColor: !selected && !focused,
+        wrap: "truncate-end",
+        children: [
+          focused ? "\u203A " : "  ",
+          label
+        ]
+      }
+    ),
     children
   ] });
 }
@@ -21579,15 +21592,12 @@ function DefaultValueRow({
   active,
   focused
 }) {
-  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
-    /* @__PURE__ */ jsx33(DefaultLabel, { focused }),
-    active ? /* @__PURE__ */ jsx33(Picker, { value: display, active: true }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.inverse, children: display })
-  ] });
-}
-function DefaultLabel({ focused }) {
-  return /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
-    focused ? "\u203A " : "  ",
-    "default:"
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexWrap: "wrap", flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? "\u203A " : "  ",
+      "default:"
+    ] }),
+    active ? /* @__PURE__ */ jsx33(Picker, { value: display, active: true }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.inverse, wrap: "wrap", children: display })
   ] });
 }
 function RowLabel({ name, selected }) {
@@ -21668,7 +21678,7 @@ function DefaultSubRow({
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
   if (prop.type === "richtext" || prop.type === "media" || prop.type === "link") {
-    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
+    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
         focused ? "\u203A " : "  ",
         "default:"
@@ -21682,7 +21692,7 @@ function DefaultSubRow({
   }
   if (prop.type === "enum") {
     if (prop.values.length === 0) {
-      return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
+      return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexShrink: 0, children: [
         /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
           focused ? "\u203A " : "  ",
           "default:"
@@ -21695,8 +21705,11 @@ function DefaultSubRow({
   }
   const value = typeof prop.default === "string" ? prop.default : "";
   if (active) {
-    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "row", children: [
-      /* @__PURE__ */ jsx33(DefaultLabel, { focused }),
+    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "row", flexShrink: 0, children: [
+      /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+        focused ? "\u203A " : "  ",
+        "default:"
+      ] }),
       /* @__PURE__ */ jsxs30(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [
         /* @__PURE__ */ jsx33(Text30, { children: value.slice(0, textCursor) }),
         /* @__PURE__ */ jsx33(Text30, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
@@ -21704,8 +21717,11 @@ function DefaultSubRow({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, children: [
-    /* @__PURE__ */ jsx33(DefaultLabel, { focused }),
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
+      focused ? "\u203A " : "  ",
+      "default:"
+    ] }),
     /* @__PURE__ */ jsx33(Text30, { color: value ? PALETTE.inverse : void 0, dimColor: !value, children: value || "(none)" })
   ] });
 }
@@ -21720,24 +21736,40 @@ function DescriptionField({
   compact = false
 }) {
   const cursor = cursorVisible ? "\u2588" : " ";
-  const outerWidth = width === void 0 ? void 0 : Math.max(1, width - 2);
-  const contentWidth = outerWidth === void 0 ? void 0 : Math.max(1, outerWidth - 2);
   if (compact) {
-    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, width: outerWidth, children: [
+    return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, width, flexShrink: 0, children: [
       /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: `  ${label}` }),
       /* @__PURE__ */ jsx33(Text30, { wrap: "truncate-end", color: value ? PALETTE.success : void 0, dimColor: !value, children: ` ${value || "\u2014"}` })
     ] });
   }
-  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", width: outerWidth, children: [
+  return /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", width, flexShrink: 0, children: [
     /* @__PURE__ */ jsxs30(Text30, { color: focused ? PALETTE.warning : void 0, bold: focused, dimColor: !focused, children: [
       focused ? "\u203A " : "  ",
       label
     ] }),
-    /* @__PURE__ */ jsx33(Box29, { width: contentWidth, borderStyle: "round", borderColor: focused ? PALETTE.info : PALETTE.border, paddingX: 1, children: editing ? /* @__PURE__ */ jsxs30(Fragment10, { children: [
-      /* @__PURE__ */ jsx33(Text30, { children: value.slice(0, textCursor) }),
-      /* @__PURE__ */ jsx33(Text30, { inverse: cursorVisible, children: value[textCursor] ?? cursor }),
-      /* @__PURE__ */ jsx33(Text30, { children: value.slice(textCursor + 1) })
-    ] }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.success, wrap: "wrap", children: value || "\u2014" }) })
+    /* @__PURE__ */ jsx33(
+      Box29,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: focused ? PALETTE.info : PALETTE.border,
+        paddingX: 1,
+        flexShrink: 0,
+        children: editing ? /* @__PURE__ */ jsx33(EditableDescription, { cursor, cursorVisible, value, textCursor }) : /* @__PURE__ */ jsx33(Text30, { color: PALETTE.success, wrap: "wrap", children: value || "\u2014" })
+      }
+    )
+  ] });
+}
+function EditableDescription({
+  cursor,
+  cursorVisible,
+  value,
+  textCursor
+}) {
+  return /* @__PURE__ */ jsxs30(Text30, { wrap: "wrap", children: [
+    value.slice(0, textCursor),
+    /* @__PURE__ */ jsx33(Text30, { inverse: cursorVisible, children: cursor }),
+    value.slice(textCursor)
   ] });
 }
 function PropRow({
@@ -21752,28 +21784,30 @@ function PropRow({
   valueText,
   width,
   rationale,
+  showRationale,
   rowKey
 }) {
   const descFocused = activeField === "description";
   const descActive = editingField && descFocused;
-  return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexWrap: "wrap", children: [
+  return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsx33(RowLabel, { name: prop.name, selected }),
-      /* @__PURE__ */ jsx33(InlinePropField, { label: "type:", selected, focused: activeField === "type", children: editingField && activeField === "type" ? /* @__PURE__ */ jsx33(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }) }),
-      /* @__PURE__ */ jsx33(
-        InlinePropField,
-        {
-          label: "category:",
-          selected,
-          focused: activeField === "category",
-          flexible: editingField && activeField === "category",
-          children: editingField && activeField === "category" ? /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, bold: true, wrap: "wrap", children: `[Enter] switch to ${categorySwitchTarget(prop.category)} property` }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.category })
-        }
-      ),
-      /* @__PURE__ */ jsx33(InlinePropField, { label: "req:", selected, focused: activeField === "required", children: /* @__PURE__ */ jsx33(Toggle, { value: prop.required, active: editingField && activeField === "required" }) }),
-      prop.type === "token" && /* @__PURE__ */ jsx33(InlinePropField, { label: "kind:", selected, focused: activeField === "tokenKind", children: editingField && activeField === "tokenKind" ? /* @__PURE__ */ jsx33(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.success : PALETTE.inverse, children: prop.tokenKind || "\u2014" }) })
+      /* @__PURE__ */ jsx33(InlinePropField, { label: "type:", selected, focused: activeField === "type", children: editingField && activeField === "type" ? /* @__PURE__ */ jsx33(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }) })
     ] }),
-    prop.type === "enum" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsx33(
+      InlinePropField,
+      {
+        label: "category:",
+        selected,
+        focused: activeField === "category",
+        flexible: editingField && activeField === "category",
+        width,
+        children: editingField && activeField === "category" ? /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, bold: true, wrap: "wrap", children: `[Enter] switch to ${categorySwitchTarget(prop.category)} property` }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, wrap: "wrap", children: prop.category })
+      }
+    ),
+    /* @__PURE__ */ jsx33(InlinePropField, { label: "req:", selected, focused: activeField === "required", width, children: /* @__PURE__ */ jsx33(Toggle, { value: prop.required, active: editingField && activeField === "required" }) }),
+    prop.type === "token" && /* @__PURE__ */ jsx33(InlinePropField, { label: "kind:", selected, focused: activeField === "tokenKind", width, children: editingField && activeField === "tokenKind" ? /* @__PURE__ */ jsx33(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES2[0], active: true }) : /* @__PURE__ */ jsx33(Text30, { color: selected ? PALETTE.success : PALETTE.inverse, wrap: "wrap", children: prop.tokenKind || "\u2014" }) }),
+    prop.type === "enum" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs30(
         Text30,
         {
@@ -21786,7 +21820,7 @@ function PropRow({
           ]
         }
       ),
-      /* @__PURE__ */ jsx33(Box29, { flexGrow: 1, children: /* @__PURE__ */ jsxs30(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, wrap: "wrap", children: [
+      /* @__PURE__ */ jsx33(Box29, { paddingLeft: 2, width: Math.max(1, width - 4), children: /* @__PURE__ */ jsxs30(Text30, { color: selected ? PALETTE.warning : PALETTE.inverse, wrap: "wrap", children: [
         "[",
         prop.values.join(", "),
         "]"
@@ -21814,7 +21848,7 @@ function PropRow({
         compact: !selected
       }
     ),
-    selected && prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "row", gap: 1, children: [
+    selected && prop.type === "token" && prop.category === "design" && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, flexDirection: "column", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsxs30(
         Text30,
         {
@@ -21827,9 +21861,17 @@ function PropRow({
           ]
         }
       ),
-      editingField && activeField === "allowed" ? /* @__PURE__ */ jsx33(Box29, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx33(Text30, { color: prop.allowed.length > 0 ? PALETTE.info : void 0, dimColor: prop.allowed.length === 0, children: prop.allowed.length > 0 ? prop.allowed.join(", ") : "(any)" })
+      editingField && activeField === "allowed" ? /* @__PURE__ */ jsx33(Box29, { width: Math.max(1, width - 4), borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "press [t] to edit allowed tokens" }) }) : /* @__PURE__ */ jsx33(
+        Text30,
+        {
+          color: prop.allowed.length > 0 ? PALETTE.info : void 0,
+          dimColor: prop.allowed.length === 0,
+          wrap: "wrap",
+          children: prop.allowed.length > 0 ? prop.allowed.join(", ") : "(any)"
+        }
+      )
     ] }),
-    selected && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx33(Box29, { paddingLeft: 2, children: /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: (() => {
+    selected && showRationale && rationale && rationale.trim().length > 0 && /* @__PURE__ */ jsx33(Box29, { paddingLeft: 2, children: /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: (() => {
       const max = Math.max(8, width - 8);
       const text = `~ ${rationale}`;
       return text.length > max ? text.slice(0, max - 1) + "\u2026" : text;
@@ -21869,10 +21911,10 @@ function SlotRow({
   pickerCandidates,
   pickerCursor
 }) {
-  return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, children: [
-    /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexWrap: "wrap", children: [
+  return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs30(Box29, { gap: 1, flexWrap: "wrap", width, flexShrink: 0, children: [
       /* @__PURE__ */ jsx33(RowLabel, { name: slot.name, selected }),
-      /* @__PURE__ */ jsx33(InlinePropField, { label: "req:", selected, focused: activeField === "required", children: /* @__PURE__ */ jsx33(Toggle, { value: slot.required, active: editingField && activeField === "required" }) })
+      /* @__PURE__ */ jsx33(InlinePropField, { label: "req:", selected, focused: activeField === "required", width, children: /* @__PURE__ */ jsx33(Toggle, { value: slot.required, active: editingField && activeField === "required" }) })
     ] }),
     !selected && /* @__PURE__ */ jsxs30(Box29, { paddingLeft: 2, gap: 1, flexWrap: "wrap", children: [
       /* @__PURE__ */ jsxs30(
@@ -22070,6 +22112,8 @@ function FieldEditor({
   const [parseErr] = useState15(parseError);
   const [listScrollStart, setListScrollStart] = useState15(0);
   const initialFocusScrollApplied = React14.useRef(false);
+  const [rowHeights, setRowHeights] = useState15({});
+  const rowMeasureRefs = React14.useRef(/* @__PURE__ */ new Map());
   const initialFocus = (() => {
     if (initialFocusTarget?.kind === "description") {
       return {
@@ -22174,9 +22218,21 @@ function FieldEditor({
   );
   const propGroups = React14.useMemo(
     () => [
-      { kind: "content", label: "\u2500\u2500 CONTENT PROPERTIES", indexes: contentPropIndexes },
-      { kind: "design", label: "\u2500\u2500 DESIGN PROPERTIES", indexes: designPropIndexes },
-      { kind: "hidden", label: "\u2500\u2500 OTHER / HIDDEN", indexes: hiddenPropIndexes }
+      {
+        kind: "content",
+        label: "\u2500\u2500 CONTENT PROPERTIES",
+        indexes: contentPropIndexes
+      },
+      {
+        kind: "design",
+        label: "\u2500\u2500 DESIGN PROPERTIES",
+        indexes: designPropIndexes
+      },
+      {
+        kind: "hidden",
+        label: "\u2500\u2500 OTHER / HIDDEN",
+        indexes: hiddenPropIndexes
+      }
     ],
     [contentPropIndexes, designPropIndexes, hiddenPropIndexes]
   );
@@ -22263,6 +22319,12 @@ function FieldEditor({
       }
       return;
     }
+    if (key.ctrl && input === "s") {
+      initialStateRef.current = editorState;
+      onDirtyChange?.(false);
+      onSave();
+      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;
@@ -22384,12 +22446,6 @@ function FieldEditor({
       }
       return;
     }
-    if (key.ctrl && input === "s") {
-      initialStateRef.current = editorState;
-      onDirtyChange?.(false);
-      onSave();
-      return;
-    }
     const inStringDefaultTextEntry = focusLevel === "field" && editingField && activeField === "default" && currentProp != null && (currentProp.type === "string" || currentProp.type === "token");
     const rationaleKeyAllowed = !key.ctrl && !key.meta && !inDescriptionTextEntry && !inComponentDescTextEntry && !inStringDefaultTextEntry && !inValueListTextEntry;
     if (input === propRationaleKey && rationaleKeyAllowed && onTogglePropRationale) {
@@ -22716,18 +22772,18 @@ function FieldEditor({
           setValueCursor((c2) => c2 - 1);
           return;
         }
-        if (input === "K" && valueCursor > 0) {
-          const nextVals = swapValues(currentValueList, valueCursor - 1, valueCursor);
-          setCurrentValueList(nextVals);
-          setValueCursor((c2) => c2 - 1);
-          return;
-        }
         if (key.shift && key.downArrow && valueCursor < currentValueList.length - 1) {
           const nextVals = swapValues(currentValueList, valueCursor, valueCursor + 1);
           setCurrentValueList(nextVals);
           setValueCursor((c2) => c2 + 1);
           return;
         }
+        if (input === "K" && valueCursor > 0) {
+          const nextVals = swapValues(currentValueList, valueCursor - 1, valueCursor);
+          setCurrentValueList(nextVals);
+          setValueCursor((c2) => c2 - 1);
+          return;
+        }
         if (input === "J" && valueCursor < currentValueList.length - 1) {
           const nextVals = swapValues(currentValueList, valueCursor, valueCursor + 1);
           setCurrentValueList(nextVals);
@@ -22813,11 +22869,19 @@ function FieldEditor({
   rows.push({ kind: "component-description" });
   for (const group of propGroups.filter((candidate) => candidate.kind !== "hidden")) {
     if (group.indexes.length === 0) continue;
-    rows.push({ kind: "header", label: `${group.label} (${group.indexes.length}) `, section: group.kind });
+    rows.push({
+      kind: "header",
+      label: `${group.label} (${group.indexes.length}) `,
+      section: group.kind
+    });
     group.indexes.forEach((idx) => rows.push({ kind: "prop", idx }));
   }
   if (slots.length > 0) {
-    rows.push({ kind: "header", label: `\u2500\u2500 SLOTS (${slots.length}) `, section: "slots" });
+    rows.push({
+      kind: "header",
+      label: `\u2500\u2500 SLOTS (${slots.length}) `,
+      section: "slots"
+    });
     slots.forEach((_, i) => rows.push({ kind: "slot", idx: i }));
   }
   const hiddenGroup = propGroups.find((group) => group.kind === "hidden");
@@ -22832,28 +22896,150 @@ function FieldEditor({
   const selectedRowIdx = rows.findIndex(
     (r) => r.kind === "prop" && !inSlots && !inComponentDesc && r.idx === propIdx || r.kind === "slot" && inSlots && r.idx === slotIdx || r.kind === "component-description" && inComponentDesc
   );
-  const visibleRows = focusLevel === "field" || initialFocusTarget ? 1 : fixedHeight ? Math.max(1, Math.floor((height - 3) / 3)) : rows.length;
+  const rowKey = (row, index) => {
+    const selected = row.kind === "prop" && !inSlots && !inComponentDesc && row.idx === propIdx || row.kind === "slot" && inSlots && row.idx === slotIdx || row.kind === "component-description" && inComponentDesc;
+    const base = row.kind === "component-description" || row.kind === "header" ? `${row.kind}-${index}` : `${row.kind}-${row.idx}`;
+    return `${base}-${selected ? "selected" : "normal"}`;
+  };
+  const rowHeight = (row, index) => rowHeights[rowKey(row, index)] ?? 1;
+  const contentHeight = Math.max(1, height - 2 - (hasEmptyProperties ? 1 : 0) - 1);
+  const visibleEnd = (start) => {
+    if (focusLevel === "field") return Math.min(rows.length, start + 1);
+    let used = 0;
+    let end2 = start;
+    while (end2 < rows.length) {
+      const nextHeight = rowHeight(rows[end2], end2);
+      if (end2 > start && used + nextHeight > contentHeight) break;
+      used += nextHeight;
+      end2 += 1;
+    }
+    return Math.max(start + 1, end2);
+  };
   useEffect8(() => {
     if (focusLevel === "field" || selectedRowIdx < 0) return;
     setListScrollStart((previous) => {
-      const maxStart = Math.max(0, rows.length - visibleRows);
       if (initialFocusTarget && !initialFocusScrollApplied.current) {
         initialFocusScrollApplied.current = true;
-        return Math.min(selectedRowIdx, maxStart);
+        return Math.min(selectedRowIdx, Math.max(0, rows.length - 1));
       }
-      const clamped = Math.min(previous, maxStart);
+      const clamped = Math.min(previous, Math.max(0, rows.length - 1));
+      const end2 = visibleEnd(clamped);
       if (selectedRowIdx < clamped) return selectedRowIdx;
-      if (selectedRowIdx >= clamped + visibleRows) {
-        return Math.min(maxStart, selectedRowIdx - visibleRows + 1);
+      if (selectedRowIdx >= end2) {
+        let start = selectedRowIdx;
+        let used = rowHeight(rows[selectedRowIdx], selectedRowIdx);
+        while (start > 0) {
+          const previousHeight = rowHeight(rows[start - 1], start - 1);
+          if (used + previousHeight > contentHeight) break;
+          start -= 1;
+          used += previousHeight;
+        }
+        return start;
       }
       return clamped;
     });
-  }, [focusLevel, rows.length, selectedRowIdx, visibleRows]);
-  const scrollStart = Math.min(listScrollStart, Math.max(0, rows.length - visibleRows));
-  const nextHeader = rows.slice(scrollStart + visibleRows).find((row) => row.kind === "header");
+  }, [contentHeight, focusLevel, rowHeights, rows, selectedRowIdx]);
+  const scrollStart = Math.min(listScrollStart, Math.max(0, rows.length - 1));
+  const end = visibleEnd(scrollStart);
+  const nextHeader = rows.slice(end).find((row) => row.kind === "header");
   const categoryBelow = focusLevel !== "field" && nextHeader?.kind === "header" ? nextHeader.label.replace(/^──\s*/, "").trim() : null;
-  const visibleRowSlice = rows.slice(scrollStart, scrollStart + visibleRows);
+  const visibleRowSlice = rows.slice(scrollStart, end);
+  useLayoutEffect2(() => {
+    const nextHeights = {};
+    for (const [key, node] of rowMeasureRefs.current) {
+      const measuredHeight = measureElement(node).height;
+      if (measuredHeight > 0) nextHeights[key] = measuredHeight;
+    }
+    setRowHeights((previous) => {
+      let changed = false;
+      const next = { ...previous };
+      for (const [key, height2] of Object.entries(nextHeights)) {
+        if (next[key] !== height2) {
+          next[key] = height2;
+          changed = true;
+        }
+      }
+      return changed ? next : previous;
+    });
+  });
   const focusedSlotPickerCandidates = focusLevel === "field" && inSlots && editingValue?.mode === "add" && activeField === "allowedComponents" && projectSlotGraph && currentComponentName && currentSlot ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, currentSlot.name) : null;
+  const renderRow = (row, index) => {
+    const key = rowKey(row, index);
+    if (row.kind === "header") {
+      return /* @__PURE__ */ jsx33(Text30, { bold: true, color: PALETTE.success, children: row.label }, key);
+    }
+    if (row.kind === "component-description") {
+      const isSelected2 = inComponentDesc && active;
+      const isEditing = isSelected2 && focusLevel === "field" && editingField && activeField === "description";
+      return /* @__PURE__ */ jsx33(
+        DescriptionField,
+        {
+          value: editorState.componentDescription,
+          focused: isSelected2,
+          editing: isEditing,
+          textCursor,
+          cursorVisible,
+          width: innerWidth,
+          label: "description:",
+          compact: !isSelected2
+        },
+        key
+      );
+    }
+    if (row.kind === "prop") {
+      const p = props[row.idx];
+      const isSelected2 = !inSlots && !inComponentDesc && row.idx === propIdx;
+      const propMeta = metadata?.props?.[p.name];
+      const commonRowProps2 = createCommonRowProps(
+        isSelected2,
+        focusLevel,
+        editingField,
+        textCursor,
+        valueCursor,
+        cursorVisible,
+        editingValue,
+        valueText,
+        innerWidth
+      );
+      return /* @__PURE__ */ jsx33(
+        PropRow,
+        {
+          prop: p,
+          ...commonRowProps2,
+          activeField: isSelected2 && focusLevel === "field" ? activeField : null,
+          rationale: propMeta?.rationale ?? null,
+          showRationale: showInlineRationales,
+          rowKey: String(row.idx)
+        },
+        key
+      );
+    }
+    const s = slots[row.idx];
+    const isSelected = inSlots && row.idx === slotIdx;
+    const slotPickerCandidates = isSelected && editingValue?.mode === "add" && activeField === "allowedComponents" && projectSlotGraph && currentComponentName ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, s.name) : null;
+    const commonRowProps = createCommonRowProps(
+      isSelected,
+      focusLevel,
+      editingField,
+      textCursor,
+      valueCursor,
+      cursorVisible,
+      editingValue,
+      valueText,
+      innerWidth
+    );
+    return /* @__PURE__ */ jsx33(
+      SlotRow,
+      {
+        slot: s,
+        ...commonRowProps,
+        activeField: isSelected && focusLevel === "field" ? activeField : null,
+        pickerCandidates: slotPickerCandidates,
+        pickerCursor
+      },
+      key
+    );
+  };
   return /* @__PURE__ */ jsxs30(
     FixedPanel,
     {
@@ -22864,7 +23050,7 @@ function FieldEditor({
       borderColor: hasEmptyProperties ? PALETTE.warning : PALETTE.info,
       children: [
         hasEmptyProperties && /* @__PURE__ */ jsx33(Text30, { color: PALETTE.warning, children: "\u26A0 No properties classified for this component. The LLM didn't find anything to classify. Reject this component or add fields manually." }),
-        /* @__PURE__ */ jsx33(Box29, { flexDirection: "column", width: innerWidth, children: focusLevel === "field" && !inComponentDesc && currentProp ? /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx33(Box29, { flexDirection: "column", width: innerWidth, flexShrink: 0, children: focusLevel === "field" && !inComponentDesc && currentProp ? /* @__PURE__ */ jsx33(
           PropRow,
           {
             prop: currentProp,
@@ -22877,7 +23063,8 @@ function FieldEditor({
             editingValue,
             valueText,
             width: innerWidth,
-            rationale: metadata?.props?.[currentProp.name]?.rationale ?? null
+            rationale: metadata?.props?.[currentProp.name]?.rationale ?? null,
+            showRationale: showInlineRationales
           }
         ) : focusLevel === "field" && inSlots && currentSlot ? /* @__PURE__ */ jsx33(
           SlotRow,
@@ -22895,100 +23082,41 @@ function FieldEditor({
             pickerCandidates: focusedSlotPickerCandidates,
             pickerCursor
           }
-        ) : visibleRowSlice.map((row, i) => {
-          if (row.kind === "header") {
-            return /* @__PURE__ */ jsx33(Text30, { bold: true, color: PALETTE.success, children: row.label }, `header-${i}`);
-          }
-          if (row.kind === "component-description") {
-            const isSelected2 = inComponentDesc && active;
-            const isEditing = isSelected2 && focusLevel === "field" && editingField && activeField === "description";
-            const desc = editorState.componentDescription;
-            return /* @__PURE__ */ jsx33(
-              DescriptionField,
-              {
-                value: desc,
-                focused: isSelected2,
-                editing: isEditing,
-                textCursor,
-                cursorVisible,
-                width: innerWidth,
-                label: "description:",
-                compact: !isSelected2
-              },
-              `component-description-${i}`
-            );
-          }
-          if (row.kind === "prop") {
-            const p = props[row.idx];
-            const isSelected2 = !inSlots && !inComponentDesc && row.idx === propIdx;
-            const propMeta = metadata?.props?.[p.name];
-            const commonRowProps2 = createCommonRowProps(
-              isSelected2,
-              focusLevel,
-              editingField,
-              textCursor,
-              valueCursor,
-              cursorVisible,
-              editingValue,
-              valueText,
-              innerWidth
-            );
-            return /* @__PURE__ */ jsx33(
-              PropRow,
-              {
-                prop: p,
-                ...commonRowProps2,
-                activeField: isSelected2 && focusLevel === "field" ? activeField : null,
-                rationale: showInlineRationales ? propMeta?.rationale ?? null : null,
-                rowKey: String(row.idx)
-              },
-              `prop-${row.idx}`
-            );
-          }
-          const s = slots[row.idx];
-          const isSelected = inSlots && row.idx === slotIdx;
-          const slotPickerCandidates = isSelected && editingValue?.mode === "add" && activeField === "allowedComponents" && projectSlotGraph && currentComponentName ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, s.name) : null;
-          const commonRowProps = createCommonRowProps(
-            isSelected,
-            focusLevel,
-            editingField,
-            textCursor,
-            valueCursor,
-            cursorVisible,
-            editingValue,
-            valueText,
-            innerWidth
-          );
+        ) : visibleRowSlice.map((row, index) => {
+          const absoluteIndex = scrollStart + index;
+          const key = rowKey(row, absoluteIndex);
           return /* @__PURE__ */ jsx33(
-            SlotRow,
+            Box29,
             {
-              slot: s,
-              ...commonRowProps,
-              activeField: isSelected && focusLevel === "field" ? activeField : null,
-              pickerCandidates: slotPickerCandidates,
-              pickerCursor
+              ref: (node) => {
+                if (node) rowMeasureRefs.current.set(key, node);
+                else rowMeasureRefs.current.delete(key);
+              },
+              width: innerWidth,
+              flexShrink: 0,
+              children: renderRow(row, absoluteIndex)
             },
-            `slot-${row.idx}`
+            `visible-${key}`
           );
         }) }),
         categoryBelow && /* @__PURE__ */ jsx33(Text30, { color: PALETTE.success, bold: true, children: `(${categoryBelow} below)` }),
         sourceOpen && !onToggleSourceExternal && (() => {
           const propMeta = !inSlots && !inComponentDesc && currentProp ? metadata?.props?.[currentProp.name] : void 0;
           const start = propMeta?.sourceStartLine ?? null;
-          const end = propMeta?.sourceEndLine ?? null;
+          const end2 = propMeta?.sourceEndLine ?? null;
           const path = metadata?.sourcePath ?? null;
           const src = metadata?.componentSource ?? null;
           const headerPath = path ?? "<unknown source path>";
-          if (!start || !end || !src) {
+          if (!start || !end2 || !src) {
             return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
               /* @__PURE__ */ jsx33(Text30, { dimColor: true, bold: true, children: `source: ${headerPath}` }),
               /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "(no source location captured for this prop)" }),
               /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "[s] close" })
             ] });
           }
-          const lines = src.split("\n").slice(Math.max(0, start - 1), end);
+          const lines = src.split("\n").slice(Math.max(0, start - 1), end2);
           return /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-            /* @__PURE__ */ jsx33(Text30, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}\u2013${end}` }),
+            /* @__PURE__ */ jsx33(Text30, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}\u2013${end2}` }),
             lines.map((ln, i) => /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: ln }, `source-line-${i}`)),
             /* @__PURE__ */ jsx33(Text30, { dimColor: true, children: "[s] close \xB7 [Esc] close" })
           ] });
@@ -23015,7 +23143,6 @@ function FieldEditor({
           /* @__PURE__ */ jsx33(Text30, { children: " " }),
           /* @__PURE__ */ jsx33(Text30, { bold: true, children: "Panels" }),
           /* @__PURE__ */ jsx33(Text30, { children: "  s                toggle source-view for the current prop" }),
-          /* @__PURE__ */ jsx33(Text30, { children: "  Ctrl+S           save field edits" }),
           /* @__PURE__ */ jsx33(Text30, { children: "  " + propRationaleKey.padEnd(16) + " toggle prop rationale panel" }),
           /* @__PURE__ */ jsx33(Text30, { children: "  " + componentRationaleKey.padEnd(16) + " toggle component rationale panel" }),
           /* @__PURE__ */ jsx33(Text30, { children: "  ?                toggle this overlay" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.34.5-dev-build-0dbc122c.0",
+  "version": "2.34.5-dev-build-7ebabd5d.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -41,8 +41,8 @@
     "svelte": "^5.56.4",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.34.5-dev-build-0dbc122c.0",
-    "@contentful/experience-design-system-cli-v2": "2.34.5-dev-build-0dbc122c.0"
+    "@contentful/experience-design-system-cli-v2": "2.34.5-dev-build-7ebabd5d.0",
+    "@contentful/experience-design-system-types": "2.34.5-dev-build-7ebabd5d.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
@@ -54,9 +54,9 @@
     "ink-testing-library": "^4.0.0",
     "typescript-eslint": "^8.67.0",
     "vitest": "^4.0.16",
-    "@contentful/experience-design-system-extraction": "2.34.5-dev-build-0dbc122c.0",
-    "@contentful/experience-design-system-client": "2.34.5-dev-build-0dbc122c.0",
-    "@contentful/experience-design-system-generation": "2.34.5-dev-build-0dbc122c.0"
+    "@contentful/experience-design-system-client": "2.34.5-dev-build-7ebabd5d.0",
+    "@contentful/experience-design-system-extraction": "2.34.5-dev-build-7ebabd5d.0",
+    "@contentful/experience-design-system-generation": "2.34.5-dev-build-7ebabd5d.0"
   },
   "repository": {
     "type": "git",