@contentful/experience-design-system-cli 2.27.1-dev-build-5821de5.0 → 2.27.1-dev-build-16b0c21.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.27.1-dev-build-5821de5.0",
+  "version": "2.27.1-dev-build-16b0c21.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@contentful/experience-design-system-types": "workspace:*",
-    "@segment/analytics-node": "^3.1.0",
+    "@segment/analytics-node": "^3.0.0",
     "@vue/compiler-sfc": "^3.5.31",
     "commander": "^13.1.0",
     "ink": "^4.4.1",

package/dist/src/index.js

@@ -21755,8 +21755,7 @@ function PropRow({
       ] }),
       /* @__PURE__ */ jsx44(Text43, { dimColor: !selected, children: "type:" }),
       activeField === "type" ? /* @__PURE__ */ jsx44(Picker, { value: prop.type, active: true }) : /* @__PURE__ */ jsx44(Text43, { color: selected ? PALETTE.warning : PALETTE.inverse, children: prop.type }),
-      /* @__PURE__ */ jsx44(Text43, { dimColor: !selected, children: "cat:" }),
-      activeField === "category" ? /* @__PURE__ */ jsx44(Picker, { value: prop.category, active: true }) : /* @__PURE__ */ jsx44(Text43, { color: selected ? PALETTE.info : PALETTE.inverse, children: prop.category }),
+      activeField === "category" && /* @__PURE__ */ jsx44(Picker, { value: prop.category, active: true }),
       /* @__PURE__ */ jsx44(Text43, { dimColor: !selected, children: "req:" }),
       activeField === "required" ? /* @__PURE__ */ jsx44(Toggle, { value: prop.required, active: true }) : /* @__PURE__ */ jsx44(Toggle, { value: prop.required, active: false }),
       prop.type === "token" && /* @__PURE__ */ jsxs43(Fragment12, { children: [
@@ -22089,13 +22088,58 @@ function FieldEditor({
   const [showHelp, setShowHelp] = useState23(false);
   const props = editorState.props;
   const slots = editorState.slots;
-  const visiblePropIndexes = React23.useMemo(
-    () => props.flatMap(
-      (prop, index) => showHiddenProps || prop.category !== "state" && prop.category !== "unattached" ? [index] : []
-    ),
+  const contentPropIndexes = React23.useMemo(
+    () => props.flatMap((prop, index) => prop.category === "content" ? [index] : []),
+    [props]
+  );
+  const designPropIndexes = React23.useMemo(
+    () => props.flatMap((prop, index) => prop.category === "design" ? [index] : []),
+    [props]
+  );
+  const hiddenPropIndexes = React23.useMemo(
+    () => showHiddenProps ? props.flatMap((prop, index) => prop.category === "state" || prop.category === "unattached" ? [index] : []) : [],
     [props, showHiddenProps]
   );
+  const visiblePropIndexes = React23.useMemo(
+    () => [...contentPropIndexes, ...designPropIndexes, ...hiddenPropIndexes],
+    [contentPropIndexes, designPropIndexes, hiddenPropIndexes]
+  );
+  const propGroups = React23.useMemo(
+    () => [
+      { kind: "content", label: "\u2500\u2500 CONTENT", indexes: contentPropIndexes },
+      { kind: "design", label: "\u2500\u2500 DESIGN", indexes: designPropIndexes },
+      { kind: "hidden", label: "\u2500\u2500 OTHER / HIDDEN", indexes: hiddenPropIndexes }
+    ],
+    [contentPropIndexes, designPropIndexes, hiddenPropIndexes]
+  );
+  const selectableRows = React23.useMemo(
+    () => [
+      ...contentPropIndexes.map((idx) => ({ kind: "prop", idx })),
+      ...designPropIndexes.map((idx) => ({ kind: "prop", idx })),
+      ...slots.map((_, idx) => ({ kind: "slot", idx })),
+      ...hiddenPropIndexes.map((idx) => ({ kind: "prop", idx }))
+    ],
+    [contentPropIndexes, designPropIndexes, hiddenPropIndexes, slots]
+  );
   const visiblePropPosition = visiblePropIndexes.indexOf(propIdx);
+  const selectedSelectableIndex = React23.useMemo(
+    () => selectableRows.findIndex(
+      (row) => inSlots ? row.kind === "slot" && row.idx === slotIdx : row.kind === "prop" && row.idx === propIdx
+    ),
+    [inSlots, propIdx, selectableRows, slotIdx]
+  );
+  const focusSelectableRow = (row) => {
+    setInComponentDesc(false);
+    if (row.kind === "prop") {
+      setInSlots(false);
+      setPropIdx(row.idx);
+      setFocusLevel("prop");
+    } else {
+      setInSlots(true);
+      setSlotIdx(row.idx);
+      setFocusLevel("slot");
+    }
+  };
   const textEntryActive = focusLevel === "field" && activeField === "description" || focusLevel === "field" && activeField === "default" && (editorState.props[propIdx]?.type === "string" || editorState.props[propIdx]?.type === "token") || editingValue != null;
   React23.useEffect(() => {
     onTextEntryActiveChange?.(textEntryActive);
@@ -22316,51 +22360,13 @@ function FieldEditor({
       }
       return;
     }
-    if (focusLevel === "prop") {
-      if (key.upArrow || input === "k") {
-        if (visiblePropPosition > 0) {
-          setPropIdx(visiblePropIndexes[visiblePropPosition - 1]);
-        } else {
-          setFocusLevel("componentDescription");
-          setInSlots(false);
-          setInComponentDesc(true);
-        }
-        return;
-      }
-      if (key.downArrow || input === "j") {
-        if (visiblePropPosition >= 0 && visiblePropPosition < visiblePropIndexes.length - 1) {
-          setPropIdx(visiblePropIndexes[visiblePropPosition + 1]);
-        } else if (slots.length > 0) {
-          setInSlots(true);
-          setSlotIdx(0);
-          setFocusLevel("slot");
-        }
-        return;
-      }
-      if (key.return && currentProp) {
-        setFocusLevel("field");
-        setActiveField(propFields(currentProp)[0] ?? null);
-        setTextCursor(currentProp.description.length);
-        return;
-      }
-      return;
-    }
     if (focusLevel === "componentDescription") {
       if (key.upArrow || input === "k") {
         return;
       }
       if (key.downArrow || input === "j") {
-        if (visiblePropIndexes.length > 0) {
-          setFocusLevel("prop");
-          setPropIdx(visiblePropIndexes[0]);
-          setInSlots(false);
-          setInComponentDesc(false);
-        } else if (slots.length > 0) {
-          setFocusLevel("slot");
-          setSlotIdx(0);
-          setInSlots(true);
-          setInComponentDesc(false);
-        }
+        const firstSelectableRow = selectableRows[0];
+        if (firstSelectableRow) focusSelectableRow(firstSelectableRow);
         return;
       }
       if (key.return) {
@@ -22371,29 +22377,35 @@ function FieldEditor({
       }
       return;
     }
-    if (focusLevel === "slot") {
+    if (focusLevel === "prop" || focusLevel === "slot") {
       if (key.upArrow || input === "k") {
-        if (slotIdx > 0) {
-          setSlotIdx(slotIdx - 1);
-        } else if (visiblePropIndexes.length > 0) {
+        if (selectedSelectableIndex > 0) {
+          focusSelectableRow(selectableRows[selectedSelectableIndex - 1]);
+        } else if (selectedSelectableIndex === 0) {
+          setFocusLevel("componentDescription");
           setInSlots(false);
-          setPropIdx(visiblePropIndexes[visiblePropIndexes.length - 1]);
-          setFocusLevel("prop");
+          setInComponentDesc(true);
         }
         return;
       }
       if (key.downArrow || input === "j") {
-        if (slotIdx < slots.length - 1) {
-          setSlotIdx(slotIdx + 1);
+        if (selectedSelectableIndex >= 0 && selectedSelectableIndex < selectableRows.length - 1) {
+          focusSelectableRow(selectableRows[selectedSelectableIndex + 1]);
         }
         return;
       }
-      if (key.return && currentSlot) {
+      if (focusLevel === "slot" && key.return && currentSlot) {
         setFocusLevel("field");
         setActiveField(SLOT_FIELDS[0] ?? null);
         setTextCursor(currentSlot.description.length);
         return;
       }
+      if (focusLevel === "prop" && key.return && currentProp) {
+        setFocusLevel("field");
+        setActiveField(propFields(currentProp)[0] ?? null);
+        setTextCursor(currentProp.description.length);
+        return;
+      }
       return;
     }
     if (focusLevel === "field") {
@@ -22722,14 +22734,24 @@ function FieldEditor({
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
-  if (visiblePropIndexes.length > 0) {
-    rows.push({ kind: "header", label: `\u2500\u2500 PROPERTIES (${visiblePropIndexes.length}) `, section: "properties" });
-    visiblePropIndexes.forEach((idx) => rows.push({ kind: "prop", idx }));
+  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 });
+    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" });
     slots.forEach((_, i) => rows.push({ kind: "slot", idx: i }));
   }
+  const hiddenGroup = propGroups.find((group) => group.kind === "hidden");
+  if (hiddenGroup && hiddenGroup.indexes.length > 0) {
+    rows.push({
+      kind: "header",
+      label: `${hiddenGroup.label} (${hiddenGroup.indexes.length}) `,
+      section: "hidden"
+    });
+    hiddenGroup.indexes.forEach((idx) => rows.push({ kind: "prop", idx }));
+  }
   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
   );
@@ -22748,7 +22770,15 @@ function FieldEditor({
         hasEmptyProperties && /* @__PURE__ */ jsx44(Text43, { 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__ */ jsx44(Box41, { flexDirection: "column", width: innerWidth, children: visibleRowSlice.map((row, i) => {
           if (row.kind === "header") {
-            return /* @__PURE__ */ jsx44(Text43, { bold: true, color: row.section === "slots" ? PALETTE.info : PALETTE.success, children: row.label }, `header-${i}`);
+            return /* @__PURE__ */ jsx44(
+              Text43,
+              {
+                bold: true,
+                color: row.section === "slots" ? PALETTE.info : row.section === "hidden" ? PALETTE.warning : PALETTE.success,
+                children: row.label
+              },
+              `header-${i}`
+            );
           }
           if (row.kind === "component-description") {
             const isSelected2 = inComponentDesc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.27.1-dev-build-5821de5.0",
+  "version": "2.27.1-dev-build-16b0c21.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -29,7 +29,7 @@
     "skills/"
   ],
   "dependencies": {
-    "@segment/analytics-node": "^3.1.0",
+    "@segment/analytics-node": "^3.0.0",
     "@vue/compiler-sfc": "^3.5.31",
     "commander": "^13.1.0",
     "ink": "^4.4.1",
@@ -39,7 +39,7 @@
     "svelte": "^5.56.4",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.27.1-dev-build-5821de5.0"
+    "@contentful/experience-design-system-types": "2.27.1-dev-build-16b0c21.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
@@ -51,9 +51,9 @@
     "ink-testing-library": "^4.0.0",
     "typescript-eslint": "^8.67.0",
     "vitest": "^4.0.16",
-    "@contentful/experience-design-system-client": "2.27.1-dev-build-5821de5.0",
-    "@contentful/experience-design-system-extraction": "2.27.1-dev-build-5821de5.0",
-    "@contentful/experience-design-system-generation": "2.27.1-dev-build-5821de5.0"
+    "@contentful/experience-design-system-client": "2.27.1-dev-build-16b0c21.0",
+    "@contentful/experience-design-system-generation": "2.27.1-dev-build-16b0c21.0",
+    "@contentful/experience-design-system-extraction": "2.27.1-dev-build-16b0c21.0"
   },
   "repository": {
     "type": "git",