@contentful/experience-design-system-cli 2.26.8-dev-build-5d1e683.0 → 2.26.8-dev-build-a7afae3.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.26.8-dev-build-5d1e683.0",
+  "version": "2.26.8-dev-build-a7afae3.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -44,7 +44,7 @@
     "commander": "^13.1.0",
     "ink": "^4.4.1",
     "react": "^18.3.1",
-    "react-devtools-core": "^4.28.5",
+    "react-devtools-core": "^4.19.1",
     "react-dom": "^18.3.1",
     "svelte": "^5.56.4",
     "ts-morph": "^27.0.2",
@@ -56,7 +56,7 @@
     "@contentful/experience-design-system-generation": "workspace:*",
     "@tsconfig/node24": "^24.0.4",
     "@types/node": "^24.0.3",
-    "@types/react": "^18.3.31",
+    "@types/react": "^18.3.24",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",

package/dist/src/analyze/select/tui/components/FieldEditor.d.ts

@@ -37,6 +37,7 @@ type FieldEditorProps = {
         kind: 'prop' | 'slot';
         name: string;
     };
+    showHiddenProps?: boolean;
 };
 export declare function simulateGraphWithCandidate(projectSlotGraph: ComponentSlotInfo[], selfName: string, currentSlots: {
     name: string;
@@ -55,5 +56,5 @@ export declare function computeAllowedComponentReplacementCandidates(projectSlot
     name: string;
     allowedComponents: string[];
 }[], targetSlotName: string, replaceIndex: number): string[];
-export declare function FieldEditor({ value, width, height, active, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, propRationaleKey, onToggleComponentRationale, componentRationaleKey, onToggleSourceExternal, onTextEntryActiveChange, projectSlotGraph, currentComponentName, onDirtyChange, discardTrigger, initialFocusTarget, }: FieldEditorProps): React.ReactElement;
+export declare function FieldEditor({ value, width, height, active, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, propRationaleKey, onToggleComponentRationale, componentRationaleKey, onToggleSourceExternal, onTextEntryActiveChange, projectSlotGraph, currentComponentName, onDirtyChange, discardTrigger, initialFocusTarget, showHiddenProps, }: FieldEditorProps): React.ReactElement;
 export {};

package/dist/src/import/tui/steps/review-json-panel.d.ts

@@ -0,0 +1,7 @@
+import type { CDFComponentEntry } from '@contentful/experience-design-system-types';
+type ReviewJsonComponent = {
+    key: string;
+    entry: CDFComponentEntry;
+};
+export declare function getReviewJsonPanelValue(selected: ReviewJsonComponent | null, showHiddenProps: boolean): string;
+export {};

package/dist/src/index.js

@@ -8564,6 +8564,63 @@ function applyDbMigrations(db) {
   if (!rawPropColNames.has("source_end_line")) {
     db.exec("ALTER TABLE raw_props ADD COLUMN source_end_line INTEGER");
   }
+  const rawPropsDdl = db.prepare(`SELECT sql FROM sqlite_master WHERE type = 'table' AND name = 'raw_props'`).get();
+  if (rawPropsDdl && !rawPropsDdl.sql.includes(`'unattached'`)) {
+    db.exec("PRAGMA foreign_keys = OFF");
+    try {
+      db.exec("BEGIN");
+      try {
+        db.exec(`
+        CREATE TABLE raw_props__new (
+          session_id        TEXT NOT NULL,
+          component_id      TEXT NOT NULL,
+          name              TEXT NOT NULL,
+          type              TEXT NOT NULL,
+          required          INTEGER NOT NULL CHECK (required IN (0, 1)),
+          category          TEXT CHECK (category IN ('content', 'design', 'state')),
+          default_value     TEXT,
+          description       TEXT,
+          token_reference   TEXT,
+          position          INTEGER NOT NULL,
+          cdf_type          TEXT,
+          cdf_category      TEXT CHECK (cdf_category IN ('content', 'design', 'state', 'unattached')),
+          cdf_token_kind    TEXT,
+          rationale         TEXT,
+          source_start_line INTEGER,
+          source_end_line   INTEGER,
+          PRIMARY KEY (session_id, component_id, name),
+          FOREIGN KEY (session_id, component_id) REFERENCES raw_components(session_id, component_id) ON DELETE CASCADE
+        );
+
+        INSERT INTO raw_props__new
+          (session_id, component_id, name, type, required, category, default_value,
+           description, token_reference, position, cdf_type, cdf_category, cdf_token_kind,
+           rationale, source_start_line, source_end_line)
+        SELECT
+          session_id, component_id, name, type, required, category, default_value,
+          description, token_reference, position, cdf_type, cdf_category, cdf_token_kind,
+          rationale, source_start_line, source_end_line
+        FROM raw_props;
+
+        DROP TABLE raw_props;
+        ALTER TABLE raw_props__new RENAME TO raw_props;
+        CREATE INDEX IF NOT EXISTS idx_raw_props_session ON raw_props(session_id, component_id);
+
+        UPDATE raw_props
+        SET cdf_category = 'unattached',
+            cdf_type = CASE WHEN type = 'boolean' THEN 'boolean' ELSE 'string' END,
+            required = 0
+        WHERE cdf_type = 'excluded';
+      `);
+        db.exec("COMMIT");
+      } catch (e) {
+        db.exec("ROLLBACK");
+        throw e;
+      }
+    } finally {
+      db.exec("PRAGMA foreign_keys = ON");
+    }
+  }
   if (!rawCompColNames.has("reject_reason")) {
     db.exec("ALTER TABLE raw_components ADD COLUMN reject_reason TEXT");
   }
@@ -8749,7 +8806,12 @@ function applyToolCalls(db, sessionId2, componentId, componentName, calls, incom
      WHERE session_id = ? AND component_id = ? AND name = ?`
   );
   const clearProp = db.prepare(
-    `UPDATE raw_props SET cdf_type = 'excluded', cdf_category = NULL, cdf_token_kind = NULL, rationale = ?
+    `UPDATE raw_props
+     SET cdf_type = CASE WHEN type = 'boolean' THEN 'boolean' ELSE 'string' END,
+         cdf_category = 'unattached',
+         cdf_token_kind = NULL,
+         required = 0,
+         rationale = ?
      WHERE session_id = ? AND component_id = ? AND name = ?`
   );
   const deleteAllowedValues = db.prepare(
@@ -9348,7 +9410,7 @@ function loadCDFComponents(db, sessionId2) {
     `SELECT component_id, name, required, default_value, description,
               cdf_type, cdf_category, cdf_token_kind, position
        FROM raw_props
-       WHERE session_id = ? AND cdf_type IS NOT NULL AND cdf_type != 'excluded'
+       WHERE session_id = ? AND cdf_type IS NOT NULL
        ORDER BY component_id, position`
   ).all(sessionId2);
   const allowedValues = db.prepare(
@@ -21318,6 +21380,27 @@ var init_merge_ai_decisions = __esm({
   }
 });
 
+// packages/experience-design-system-cli/src/import/tui/steps/review-json-panel.ts
+function getReviewJsonPanelValue(selected, showHiddenProps) {
+  if (!selected) return "";
+  const entry = showHiddenProps ? selected.entry : {
+    ...selected.entry,
+    $properties: Object.fromEntries(
+      Object.entries(selected.entry.$properties ?? {}).filter(
+        ([, definition]) => !HIDDEN_PROP_CATEGORIES.has(definition.$category)
+      )
+    )
+  };
+  return JSON.stringify({ [selected.key]: entry }, null, 2);
+}
+var HIDDEN_PROP_CATEGORIES;
+var init_review_json_panel = __esm({
+  "packages/experience-design-system-cli/src/import/tui/steps/review-json-panel.ts"() {
+    "use strict";
+    HIDDEN_PROP_CATEGORIES = /* @__PURE__ */ new Set(["state", "unattached"]);
+  }
+});
+
 // packages/experience-design-system-cli/src/analyze/cycle-view.ts
 function computeCycleView(components) {
   const filtered = components.filter((c2) => c2.status !== "rejected");
@@ -21924,7 +22007,8 @@ function FieldEditor({
   currentComponentName,
   onDirtyChange,
   discardTrigger,
-  initialFocusTarget
+  initialFocusTarget,
+  showHiddenProps = true
 }) {
   const { state: initialState, error: parseError } = parseToState(value);
   const [editorState, setEditorState] = useState23(initialState);
@@ -22005,12 +22089,34 @@ 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] : []
+    ),
+    [props, showHiddenProps]
+  );
+  const visiblePropPosition = visiblePropIndexes.indexOf(propIdx);
   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);
   }, [textEntryActive, onTextEntryActiveChange]);
   const currentProp = props[propIdx] ?? null;
   const currentSlot = slots[slotIdx] ?? null;
+  React23.useEffect(() => {
+    if (showHiddenProps || inSlots || inComponentDesc || visiblePropPosition >= 0) return;
+    if (visiblePropIndexes.length > 0) {
+      setPropIdx(visiblePropIndexes[0]);
+      return;
+    }
+    if (slots.length > 0) {
+      setInSlots(true);
+      setSlotIdx(0);
+      setFocusLevel("slot");
+      return;
+    }
+    setInComponentDesc(true);
+    setFocusLevel("componentDescription");
+  }, [inComponentDesc, inSlots, showHiddenProps, slots.length, visiblePropIndexes, visiblePropPosition]);
   const commit = (next) => {
     setEditorState(next);
     onChange(serializeState(next, value));
@@ -22212,8 +22318,8 @@ function FieldEditor({
     }
     if (focusLevel === "prop") {
       if (key.upArrow || input === "k") {
-        if (propIdx > 0) {
-          setPropIdx(propIdx - 1);
+        if (visiblePropPosition > 0) {
+          setPropIdx(visiblePropIndexes[visiblePropPosition - 1]);
         } else {
           setFocusLevel("componentDescription");
           setInSlots(false);
@@ -22222,8 +22328,8 @@ function FieldEditor({
         return;
       }
       if (key.downArrow || input === "j") {
-        if (propIdx < props.length - 1) {
-          setPropIdx(propIdx + 1);
+        if (visiblePropPosition >= 0 && visiblePropPosition < visiblePropIndexes.length - 1) {
+          setPropIdx(visiblePropIndexes[visiblePropPosition + 1]);
         } else if (slots.length > 0) {
           setInSlots(true);
           setSlotIdx(0);
@@ -22244,9 +22350,9 @@ function FieldEditor({
         return;
       }
       if (key.downArrow || input === "j") {
-        if (props.length > 0) {
+        if (visiblePropIndexes.length > 0) {
           setFocusLevel("prop");
-          setPropIdx(0);
+          setPropIdx(visiblePropIndexes[0]);
           setInSlots(false);
           setInComponentDesc(false);
         } else if (slots.length > 0) {
@@ -22269,9 +22375,9 @@ function FieldEditor({
       if (key.upArrow || input === "k") {
         if (slotIdx > 0) {
           setSlotIdx(slotIdx - 1);
-        } else if (props.length > 0) {
+        } else if (visiblePropIndexes.length > 0) {
           setInSlots(false);
-          setPropIdx(props.length - 1);
+          setPropIdx(visiblePropIndexes[visiblePropIndexes.length - 1]);
           setFocusLevel("prop");
         }
         return;
@@ -22616,9 +22722,9 @@ function FieldEditor({
   })();
   const rows = [];
   rows.push({ kind: "component-description" });
-  if (props.length > 0) {
-    rows.push({ kind: "header", label: `\u2500\u2500 PROPERTIES (${props.length}) `, section: "properties" });
-    props.forEach((_, i) => rows.push({ kind: "prop", idx: i }));
+  if (visiblePropIndexes.length > 0) {
+    rows.push({ kind: "header", label: `\u2500\u2500 PROPERTIES (${visiblePropIndexes.length}) `, section: "properties" });
+    visiblePropIndexes.forEach((idx) => rows.push({ kind: "prop", idx }));
   }
   if (slots.length > 0) {
     rows.push({ kind: "header", label: `\u2500\u2500 SLOTS (${slots.length}) `, section: "slots" });
@@ -23610,6 +23716,7 @@ function GenerateReviewStep({
   const [showFinalize, setShowFinalize] = useState26(false);
   const [showQuit, setShowQuit] = useState26(false);
   const [showJson, setShowJson] = useState26(false);
+  const [showHiddenProps, setShowHiddenProps] = useState26(false);
   const [draftValue, setDraftValue] = useState26("");
   const [saveError, setSaveError] = useState26(null);
   const [finalizeError, setFinalizeError] = useState26(initialFinalizeError);
@@ -24559,7 +24666,7 @@ function GenerateReviewStep({
     }
     if (!sidebarFocused && showJson) {
       const current = components[selectedIdx];
-      const currentJson = current ? JSON.stringify({ [current.key]: current.entry }, null, 2) : "";
+      const currentJson = getReviewJsonPanelValue(current ?? null, showHiddenProps);
       const totalLines = currentJson.split("\n").length;
       const maxOffset = Math.max(0, totalLines - PANEL_HEIGHT);
       if (input === "g" && !key.ctrl) {
@@ -24696,6 +24803,12 @@ function GenerateReviewStep({
       pendingGRef.current = false;
       return;
     }
+    if (input === "H") {
+      setShowHiddenProps((prev) => !prev);
+      setJsonScrollOffset(0);
+      pendingGRef.current = false;
+      return;
+    }
     if (key.return) {
       const current = components[selectedIdx];
       if (!current) return;
@@ -24796,6 +24909,7 @@ function GenerateReviewStep({
   }
   const selected = components[selectedIdx] ?? null;
   const selectedJson = selected ? JSON.stringify({ [selected.key]: selected.entry }, null, 2) : "";
+  const visibleJsonPanelValue = getReviewJsonPanelValue(selected, showHiddenProps);
   const isEmpty2 = (c2) => Object.keys(c2.entry.$properties).length === 0 && Object.keys(c2.entry.$slots ?? {}).length === 0;
   const emptyCount = components.filter(isEmpty2).length;
   const cycleParticipantSet = cycleView.structural;
@@ -25117,7 +25231,7 @@ function GenerateReviewStep({
           JsonPanel,
           {
             label: "GENERATED DEFINITION (read-only)",
-            value: selectedJson,
+            value: visibleJsonPanelValue,
             scrollOffset: jsonScrollOffset,
             width: panelWidth,
             height: PANEL_HEIGHT,
@@ -25127,6 +25241,7 @@ function GenerateReviewStep({
           FieldEditor,
           {
             value: draftValue || selectedJson,
+            showHiddenProps,
             width: panelWidth,
             height: PANEL_HEIGHT,
             active: !sidebarFocused,
@@ -25210,6 +25325,7 @@ function GenerateReviewStep({
       legendEntry("[P]", "component rationale", panelOpen === "component-rationale"),
       legendEntry("[s]", "source", panelOpen === "source"),
       legendEntry("[J]", showJson ? "hide JSON" : "show JSON", showJson),
+      legendEntry("[H]", showHiddenProps ? "hide state/unattached" : "show state/unattached", showHiddenProps),
       breakingChanges.length > 0 && legendEntry("[b]", "see breaking changes", breakingPanel.isOpen),
       removedComponents.length > 0 && legendEntry("[d]", removedBannerCollapsed ? "show removed" : "hide removed", !removedBannerCollapsed),
       legendEntry("[/]", "search", searchOpen || searchQuery.length > 0),
@@ -25240,6 +25356,7 @@ var init_GenerateReviewStep = __esm({
   "packages/experience-design-system-cli/src/import/tui/steps/GenerateReviewStep.tsx"() {
     "use strict";
     init_theme();
+    init_review_json_panel();
     init_GroupedSidebar();
     init_composite_closure();
     init_slot_graph();
@@ -25390,6 +25507,7 @@ function AtomicGenerateReviewStep({
   const [showFinalize, setShowFinalize] = useState27(false);
   const [showQuit, setShowQuit] = useState27(false);
   const [showJson, setShowJson] = useState27(false);
+  const [showHiddenProps, setShowHiddenProps] = useState27(false);
   const [draftValue, setDraftValue] = useState27("");
   const [saveError, setSaveError] = useState27(null);
   const [finalizeError, setFinalizeError] = useState27(initialFinalizeError);
@@ -25753,7 +25871,7 @@ function AtomicGenerateReviewStep({
     }
     if (!sidebarFocused && showJson) {
       const current = components[selectedIdx];
-      const currentJson = current ? JSON.stringify({ [current.key]: current.entry }, null, 2) : "";
+      const currentJson = getReviewJsonPanelValue(current ?? null, showHiddenProps);
       const totalLines = currentJson.split("\n").length;
       const maxOffset = Math.max(0, totalLines - PANEL_HEIGHT2);
       if (input === "g" && !key.ctrl) {
@@ -25809,6 +25927,12 @@ function AtomicGenerateReviewStep({
       pendingGRef.current = false;
       return;
     }
+    if (input === "H") {
+      setShowHiddenProps((prev) => !prev);
+      setJsonScrollOffset(0);
+      pendingGRef.current = false;
+      return;
+    }
     if (key.upArrow || input === "k") {
       setSelectedIdx((prev) => {
         const newIdx = Math.max(0, prev - 1);
@@ -25841,6 +25965,7 @@ function AtomicGenerateReviewStep({
   }
   const selected = components[selectedIdx] ?? null;
   const selectedJson = selected ? JSON.stringify({ [selected.key]: selected.entry }, null, 2) : "";
+  const visibleJsonPanelValue = getReviewJsonPanelValue(selected, showHiddenProps);
   const isEmpty2 = (c2) => Object.keys(c2.entry.$properties).length === 0;
   const emptyCount = components.filter(isEmpty2).length;
   const sidebarItems = components.map((c2) => ({
@@ -26016,7 +26141,7 @@ function AtomicGenerateReviewStep({
           JsonPanel,
           {
             label: "GENERATED DEFINITION (read-only)",
-            value: selectedJson,
+            value: visibleJsonPanelValue,
             scrollOffset: jsonScrollOffset,
             width: panelWidth,
             height: PANEL_HEIGHT2,
@@ -26026,6 +26151,7 @@ function AtomicGenerateReviewStep({
           FieldEditor,
           {
             value: draftValue || selectedJson,
+            showHiddenProps,
             width: panelWidth,
             height: PANEL_HEIGHT2,
             active: !sidebarFocused,
@@ -26056,7 +26182,7 @@ function AtomicGenerateReviewStep({
         ),
         saveError && /* @__PURE__ */ jsx48(Text47, { color: PALETTE.error, children: "\u2717 " + saveError }),
         /* @__PURE__ */ jsxs47(Text47, { dimColor: true, children: [
-          sidebarFocused ? "  [a] accept  [r] reject  [A] accept all  [i] prop rationale  [I] component rationale  [s] source  [J] " + (showJson ? "hide JSON" : "show JSON") + "  [^z] undo  [^y] redo  [^r] reload  [F] finalize  [e/Tab] focus panel" + (livePreview && removedComponents.length > 0 ? "  [d] removed list" : "") + "  [q] quit" : showJson ? "  [j/k] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  (edit fields)",
+          sidebarFocused ? "  [a] accept  [r] reject  [A] accept all  [i] prop rationale  [I] component rationale  [s] source  [J] " + (showJson ? "hide JSON" : "show JSON") + "  [H] " + (showHiddenProps ? "hide state/unattached" : "show state/unattached") + "  [^z] undo  [^y] redo  [^r] reload  [F] finalize  [e/Tab] focus panel" + (livePreview && removedComponents.length > 0 ? "  [d] removed list" : "") + "  [q] quit" : showJson ? "  [j/k] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list" : "  [Tab] focus list  (edit fields)",
           livePreviewHook.status === "running" && /* @__PURE__ */ jsx48(Text47, { children: `  ${livePreviewSpinner} live preview` }),
           livePreviewHook.disabled && /* @__PURE__ */ jsx48(Text47, { children: "  \xB7 live preview disabled" })
         ] })
@@ -26103,6 +26229,7 @@ var init_AtomicGenerateReviewStep = __esm({
     init_useFinalizePreview();
     init_scroll_offset();
     init_theme();
+    init_review_json_panel();
     VISIBLE_COUNT3 = 20;
     PANEL_HEIGHT2 = 22;
   }
@@ -31357,7 +31484,7 @@ async function runGenerateSkill(skill, opts, verbose = false) {
     const allOk = failed.length === 0;
     const cachedNote = cachedResults.length > 0 ? c.dim(`  (${cachedResults.length} cached)`) : "";
     process.stderr.write(
-      (allOk ? c.green("\u2713") : c.yellow("\u26A0")) + `  ${generated.length + cachedResults.length}/${componentResults.length} components` + cachedNote + c.dim(`  ${totalClassified} classified, ${totalExcluded} excluded`) + "\n"
+      (allOk ? c.green("\u2713") : c.yellow("\u26A0")) + `  ${generated.length + cachedResults.length}/${componentResults.length} components` + cachedNote + c.dim(`  ${totalClassified} classified, ${totalExcluded} unattached`) + "\n"
     );
     process.stdout.write(`renamed-slots: ${totalRenamedSlots}
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.26.8-dev-build-5d1e683.0",
+  "version": "2.26.8-dev-build-a7afae3.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -34,26 +34,26 @@
     "commander": "^13.1.0",
     "ink": "^4.4.1",
     "react": "^18.3.1",
-    "react-devtools-core": "^4.28.5",
+    "react-devtools-core": "^4.19.1",
     "react-dom": "^18.3.1",
     "svelte": "^5.56.4",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.26.8-dev-build-5d1e683.0"
+    "@contentful/experience-design-system-types": "2.26.8-dev-build-a7afae3.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/node": "^24.0.3",
-    "@types/react": "^18.3.31",
+    "@types/react": "^18.3.24",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
     "ink-testing-library": "^4.0.0",
     "typescript-eslint": "^8.67.0",
     "vitest": "^4.0.16",
-    "@contentful/experience-design-system-client": "2.26.8-dev-build-5d1e683.0",
-    "@contentful/experience-design-system-extraction": "2.26.8-dev-build-5d1e683.0",
-    "@contentful/experience-design-system-generation": "2.26.8-dev-build-5d1e683.0"
+    "@contentful/experience-design-system-client": "2.26.8-dev-build-a7afae3.0",
+    "@contentful/experience-design-system-extraction": "2.26.8-dev-build-a7afae3.0",
+    "@contentful/experience-design-system-generation": "2.26.8-dev-build-a7afae3.0"
   },
   "repository": {
     "type": "git",