@contentful/experience-design-system-cli 2.12.4-dev-build-9c819d8.0 → 2.13.1-dev-build-847dead.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.12.4-dev-build-9c819d8.0",
+  "version": "2.13.1-dev-build-847dead.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -37,16 +37,13 @@
     "lint:fix": "nx lint:fix experience-design-system-cli"
   },
   "dependencies": {
+    "@contentful/experience-design-system-extraction": "workspace:*",
     "@contentful/experience-design-system-types": "workspace:*",
-    "@vue/compiler-sfc": "^3.5.31",
     "commander": "^13.1.0",
     "ink": "^4.4.1",
     "react": "^18.3.1",
     "react-devtools-core": "^4.19.1",
-    "react-dom": "^18.3.1",
-    "svelte": "^5.56.4",
-    "ts-morph": "^27.0.2",
-    "typescript": "^5.9.3"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",

package/dist/src/analyze/command.js

@@ -2,17 +2,11 @@ import { createElement } from 'react';
 import { render } from 'ink';
 import { mkdir, readdir, stat } from 'node:fs/promises';
 import { isAbsolute, join, relative, resolve } from 'node:path';
-import { extractComponents } from './extract/pipeline.js';
+import { extractComponents, preClassifyComponent, isNonAuthorableComponent, computeExtractionScore, deriveNeedsReview, describeReviewReasons, inspectComponentSource, validateExtractedComponents, } from '@contentful/experience-design-system-extraction';
 import { AnalyzeView } from './tui/AnalyzeView.js';
 import { registerAnalyzeEditCommand } from './select/command.js';
 import { registerAnalyzeSelectAgentCommand } from './select-agent/command.js';
-import { openPipelineDb, getOrCreateSession, createStep, updateStep, storeRawComponents, storeScannedFiles, storeSlotCycles, } from '../session/db.js';
-import { findSlotCycles, suggestCycleBreakEdge } from './cycle-detection.js';
-import { preClassifyComponent } from './pre-classify.js';
-import { isNonAuthorableComponent } from './extract/non-authorable-filter.js';
-import { computeExtractionScore, deriveNeedsReview } from './extract/scoring.js';
-import { describeReviewReasons, inspectComponentSource } from './extract/source-inspection.js';
-import { validateExtractedComponents } from './extract/validate.js';
+import { openPipelineDb, getOrCreateSession, createStep, updateStep, storeRawComponents, storeScannedFiles, } from '../session/db.js';
 import { buildAnalyzeViewRows, partitionGlobalWarnings } from './build-analyze-view-rows.js';
 const SCANNED_FILE_EXTENSIONS = new Set(['.astro', '.js', '.jsx', '.svelte', '.ts', '.tsx', '.vue']);
 const IGNORED_DIRECTORY_NAMES = new Set([
@@ -192,20 +186,6 @@ export function registerAnalyzeCommand(program) {
         }
         const validatedComponents = validateExtractedComponents(filteredComponents);
         storeRawComponents(db, sessionId, validatedComponents);
-        // INTEG-4401: post-extract slot-dependency cycle detection. The apply
-        // worker rejects cyclic slot graphs at push time, so we surface the
-        // same violation locally as a soft warning here (TUI reads
-        // slot_cycles) and as a hard block at manifest finalization.
-        const cycleInput = validatedComponents.map((c) => ({
-            name: c.name,
-            slots: c.slots.map((s) => ({ name: s.name, allowedComponents: s.allowedComponents })),
-        }));
-        const cycles = findSlotCycles(cycleInput);
-        const withBreaks = cycles.map((cycle) => ({
-            ...cycle,
-            suggestedBreak: suggestCycleBreakEdge(cycle, cycles),
-        }));
-        storeSlotCycles(db, sessionId, withBreaks);
         storeScannedFiles(db, sessionId, sourceFiles.map((f) => relative(projectRoot, f)));
         updateStep(db, stepId, 'complete', { sessionId });
         db.close();

package/dist/src/analyze/select/command.js

@@ -6,7 +6,7 @@ import { getRefineArtifactsRoot, ensureRefineSession, getRefineSessionPaths, sav
 import { loadReviewInput } from './parser.js';
 import { App } from './tui/App.js';
 import { openPipelineDb, loadRawComponents, storeRawComponents, createStep, updateStep } from '../../session/db.js';
-import { validateExtractedComponents, shouldExcludeDueToValidation, formatExclusionWarning, } from '../extract/validate.js';
+import { validateExtractedComponents, shouldExcludeDueToValidation, formatExclusionWarning, } from '@contentful/experience-design-system-extraction';
 const SAFE_PATH_RE = /^[a-zA-Z0-9_.$[\]=]+$/;
 const PROTO_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
 function applyDotPath(obj, path, value) {

package/dist/src/analyze/select/tui/components/FieldEditor.js

@@ -924,7 +924,10 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
     if (props.length === 0 && slots.length === 0) {
         return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "yellow", children: [_jsx(Text, { bold: true, color: "yellow", children: "FIELD EDITOR \u2014 no fields" }), _jsx(Text, { color: "yellow", children: "⚠ No properties classified for this component. The LLM didn't find anything to classify." }), _jsx(Text, { dimColor: true, children: "You can add fields manually below or reject this component." }), _jsx(Text, { dimColor: true, children: "Ctrl+S to save \u00B7 Esc to discard" })] }));
     }
-    const hasEmptyProperties = props.length === 0 && slots.length === 0;
+    // When $properties is empty but $slots exist, surface the same warning
+    // prominently in the panel so the user understands why the component looks
+    // sparse — and can act on it (manually add a prop or reject).
+    const hasEmptyProperties = props.length === 0;
     const modeLabel = (() => {
         if (editingValue) {
             return editingValue.mode === 'add' ? 'Enter to add · Esc to cancel' : 'Enter to save edit · Esc to cancel';

package/dist/src/analyze/select-agent/command.js

@@ -11,7 +11,7 @@ import { OutputFormatter, c } from '../../output/format.js';
 import { buildRepoContextIndex, buildSelectionContext } from './context-builder.js';
 import { runShowRationale } from './show-rationale.js';
 import { isAbsolute, resolve } from 'node:path';
-import { validateExtractedComponents, shouldExcludeDueToValidation, formatExclusionWarning, } from '../extract/validate.js';
+import { validateExtractedComponents, shouldExcludeDueToValidation, formatExclusionWarning, } from '@contentful/experience-design-system-extraction';
 const VALID_AGENTS = new Set(['claude', 'codex', 'opencode', 'cursor']);
 const DEFAULT_TIMEOUT_MS = Number(process.env.EDS_AGENT_TIMEOUT_MS ?? 3 * 60 * 1000);
 export const DEFAULT_CONCURRENCY = 10;

package/dist/src/apply/command.d.ts

@@ -1,10 +1,6 @@
 import type { Command } from 'commander';
-import type { CDFComponentEntry, DTCGTokenEntry } from '@contentful/experience-design-system-types';
+import type { DTCGTokenEntry } from '@contentful/experience-design-system-types';
 import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
 export declare function readTokensFromPath(flag: string, p: string): Promise<DTCGTokenEntry[]>;
-export declare function assertNoSlotCycles(components: Array<{
-    key: string;
-    entry: CDFComponentEntry;
-}>): void;
 export declare function hasBreakingChangesWithImpact(preview: ServerPreviewResponse): boolean;
 export declare function registerApplyCommand(program: Command): void;

package/dist/src/apply/command.js

@@ -5,7 +5,6 @@ import { join } from 'node:path';
 import { validateCDF, flattenDTCG, validateDTCG, buildManifest, buildFilteredManifest, } from '@contentful/experience-design-system-types';
 import { ApiError, ImportApiClient } from './api-client.js';
 import { openPipelineDb, loadCDFComponents } from '../session/db.js';
-import { findSlotCycles, suggestCycleBreakEdge, formatCyclePath } from '../analyze/cycle-detection.js';
 import { isEmptyPreview } from './preview-utils.js';
 import { ServerPreviewApp, ServerPreviewConfirm, ServerApplyProgress, ServerApplyDone } from './tui/ServerApplyView.js';
 import { SelectView, makeSelectKey } from './tui/SelectView.js';
@@ -171,37 +170,6 @@ async function resolveSharedInputs(opts) {
     });
     return { components, tokens, client };
 }
-// --- INTEG-4401: pre-push slot-cycle hard block ---
-//
-// The backend apply worker rejects cyclic slot graphs at topo-sort time, but
-// by then the request has already been serialized, transported, and partially
-// applied — leading to confusing partial-failure states. Detecting the same
-// violation locally lets us fail fast with a clear message and zero
-// side-effects. Called from the `apply push` and `apply select` flows only;
-// `apply preview` is read-only and still runs (its diff is used to warn but
-// not to block).
-export function assertNoSlotCycles(components) {
-    const cycleInput = components.map(({ key, entry }) => ({
-        name: key,
-        slots: Object.entries(entry.$slots ?? {}).map(([slotName, slotDef]) => ({
-            name: slotName,
-            allowedComponents: slotDef.$allowedComponents ?? [],
-        })),
-    }));
-    const cycles = findSlotCycles(cycleInput);
-    if (cycles.length === 0)
-        return;
-    const lines = [];
-    lines.push(`Error: manifest:components/slot-cycles — ${cycles.length} slot dependency cycle(s) detected. Push refused.`);
-    for (let i = 0; i < cycles.length; i += 1) {
-        const cycle = cycles[i];
-        lines.push(`  Cycle ${i + 1}: ${formatCyclePath(cycle)}`);
-        const suggested = suggestCycleBreakEdge(cycle, cycles);
-        lines.push(`    Fix: remove '${suggested.toComponent}' from ${suggested.fromComponent}.$slots.${suggested.slotName}.$allowedComponents`);
-    }
-    process.stderr.write(lines.join('\n') + '\n');
-    process.exit(1);
-}
 // --- Output helpers ---
 export function hasBreakingChangesWithImpact(preview) {
     const allChanged = [...preview.components.changed, ...preview.tokens.changed];
@@ -477,12 +445,6 @@ export function registerApplyCommand(program) {
             throw e;
         }
         const { components, tokens, client } = inputs;
-        // INTEG-4401: refuse before spending any credentials or bytes on a
-        // manifest the backend will reject. Cycle detection is deterministic
-        // and cheap so we run it here (not just at extract time) — this also
-        // guards `apply push --components` where extract-time cycles are not
-        // in the session DB.
-        assertNoSlotCycles(components);
         try {
             await client.validateToken();
         }
@@ -661,11 +623,6 @@ export function registerApplyCommand(program) {
             throw e;
         }
         const { components, tokens, client } = inputs;
-        // INTEG-4401: same pre-push cycle block as `apply push`. Running the
-        // check on the FULL component set (not the filtered selection) is
-        // deliberate: partial selection cannot resolve a cycle whose
-        // participants are all still present in the target space.
-        assertNoSlotCycles(components);
         try {
             await client.validateToken();
         }

package/dist/src/import/tui/steps/GenerateReviewStep.d.ts

@@ -37,6 +37,6 @@ type GenerateReviewStepProps = {
 export declare function sortComponentsForSidebar<T extends {
     key: string;
     entry: CDFComponentEntry;
-}>(components: T[], cycleParticipants?: Set<string>): T[];
+}>(components: T[]): T[];
 export declare function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, livePreview, spaceId, environmentId, cmaToken, host, tokensPath, initialFinalizeError, }: GenerateReviewStepProps): React.ReactElement;
 export {};

package/dist/src/import/tui/steps/GenerateReviewStep.js

@@ -8,8 +8,7 @@ import { StatusBar } from '../../../analyze/select/tui/components/StatusBar.js';
 import { FinalizeDialog } from '../../../analyze/select/tui/components/FinalizeDialog.js';
 import { QuitDialog } from '../../../analyze/select/tui/components/QuitDialog.js';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
-import { openPipelineDb, loadCDFComponents, storeCDFComponents, loadComponentReviewMetadata, loadComponentRationale, loadSlotCycles, } from '../../../session/db.js';
-import { formatCyclePath } from '../../../analyze/cycle-detection.js';
+import { openPipelineDb, loadCDFComponents, storeCDFComponents, loadComponentReviewMetadata, loadComponentRationale, } from '../../../session/db.js';
 import { RationalePanel } from '../../../analyze/select/tui/components/RationalePanel.js';
 import { ComponentRationalePanel } from '../../../analyze/select/tui/components/ComponentRationalePanel.js';
 import { applyPreviewAnnotations } from '../../../analyze/select/preview-annotations.js';
@@ -25,22 +24,12 @@ import { computeNextScrollOffset } from '../../../analyze/select/tui/hooks/scrol
  *
  * Within each tier (empty / non-empty) we tie-break alphabetically by `key`.
  */
-export function sortComponentsForSidebar(components, cycleParticipants) {
-    const isEmpty = (entry) => Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
-    // Tier order: cycle members first (they block push — surface loudest),
-    // then empty (soft warning), then everything else. Ties broken alpha.
-    const tier = (c) => {
-        if (cycleParticipants?.has(c.key))
-            return 0;
-        if (isEmpty(c.entry))
-            return 1;
-        return 2;
-    };
+export function sortComponentsForSidebar(components) {
     return [...components].sort((a, b) => {
-        const at = tier(a);
-        const bt = tier(b);
-        if (at !== bt)
-            return at - bt;
+        const aEmpty = Object.keys(a.entry.$properties ?? {}).length === 0;
+        const bEmpty = Object.keys(b.entry.$properties ?? {}).length === 0;
+        if (aEmpty !== bEmpty)
+            return aEmpty ? -1 : 1;
         return a.key.localeCompare(b.key);
     });
 }
@@ -86,12 +75,6 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
     // Tracks the first `g` of a potential `gg` double-tap (jumps to top in
     // JSON-view + panel-focused state). Reset on any non-`g` key.
     const pendingGRef = useRef(false);
-    // INTEG-4401: slot-dependency cycles loaded from the session DB. Non-empty
-    // triggers sidebar (cycle) badges, banner + [c] detail-panel affordance,
-    // and (at push time) a hard block.
-    const [slotCycles, setSlotCycles] = useState([]);
-    const [showCyclePanel, setShowCyclePanel] = useState(false);
-    const [cyclePanelScroll, setCyclePanelScroll] = useState(0);
     const handleLivePreviewResult = (response) => {
         if (!response)
             return;
@@ -123,10 +106,8 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
         async function load() {
             const db = openPipelineDb();
             let cdfComponents;
-            let cycles = [];
             try {
                 cdfComponents = loadCDFComponents(db, extractSessionId);
-                cycles = loadSlotCycles(db, extractSessionId);
             }
             finally {
                 db.close();
@@ -141,12 +122,7 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                 entry,
                 status: 'needs-review',
             }));
-            const cycleParticipants = new Set();
-            for (const c of cycles)
-                for (const p of c.path)
-                    cycleParticipants.add(p);
-            setSlotCycles(cycles);
-            setComponents(sortComponentsForSidebar(reviewEntries, cycleParticipants));
+            setComponents(sortComponentsForSidebar(reviewEntries));
             setLoading(false);
         }
         load().catch((e) => {
@@ -306,31 +282,6 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
             }
             return;
         }
-        // INTEG-4401: slot-cycle detail panel. Same modal-swallow rules as
-        // showRemovedPanel; q/Esc close, ↑↓ scroll.
-        if (showCyclePanel) {
-            if (input === 'c' || input === 'q' || key.escape) {
-                setShowCyclePanel(false);
-                setCyclePanelScroll(0);
-                return;
-            }
-            if (key.upArrow || input === 'k') {
-                setCyclePanelScroll((v) => Math.max(0, v - 1));
-                return;
-            }
-            if (key.downArrow || input === 'j') {
-                setCyclePanelScroll((v) => v + 1);
-                return;
-            }
-            return;
-        }
-        // Open the cycle panel from sidebar-focused state when there is at
-        // least one cycle to display.
-        if (input === 'c' && sidebarFocused && slotCycles.length > 0) {
-            setShowCyclePanel(true);
-            setCyclePanelScroll(0);
-            return;
-        }
         // `d` opens the panel only when live-preview is enabled and there is at
         // least one removed component to display. Sidebar-focused only so it
         // doesn't collide with FieldEditor input.
@@ -522,34 +473,26 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
     }
     const selected = components[selectedIdx] ?? null;
     const selectedJson = selected ? JSON.stringify({ [selected.key]: selected.entry }, null, 2) : '';
-    const isEmpty = (c) => Object.keys(c.entry.$properties).length === 0 && Object.keys(c.entry.$slots ?? {}).length === 0;
+    // A component with zero classified $properties is a real defensibility issue —
+    // it can't be pushed to Contentful (no fields). Surface it in the sidebar via
+    // the existing warning-color path (yellow) and a "(empty)" suffix so the user
+    // can see what went wrong. They can manually add props in FieldEditor or
+    // explicitly reject the component.
+    const isEmpty = (c) => Object.keys(c.entry.$properties).length === 0;
     const emptyCount = components.filter(isEmpty).length;
-    // INTEG-4401: cycle-participant set drives sidebar `(cycle)` badges plus
-    // the banner counts. Recomputed on every render — cheap for typical N.
-    const cycleParticipantSet = new Set();
-    for (const cycle of slotCycles)
-        for (const p of cycle.path)
-            cycleParticipantSet.add(p);
-    const sidebarSuffix = (c) => {
-        if (cycleParticipantSet.has(c.key))
-            return ' (cycle)';
-        if (isEmpty(c))
-            return ' (empty)';
-        return '';
-    };
     const sidebarItems = components.map((c) => ({
         id: c.key,
-        name: `${c.key}${sidebarSuffix(c)}`,
+        name: isEmpty(c) ? `${c.key} (empty)` : c.key,
         status: c.status,
         previewAnnotation: previewAnnotations.get(c.key),
         extractionConfidence: null,
         needsReview: false,
         validationErrorCount: 0,
-        validationWarningCount: sidebarSuffix(c) !== '' ? 1 : 0,
+        validationWarningCount: isEmpty(c) ? 1 : 0,
     }));
-    // Account for the "(cycle)" / "(empty)" suffix added to badged component
-    // names so the sidebar doesn't truncate them.
-    const longestName = components.reduce((m, c) => Math.max(m, c.key.length + sidebarSuffix(c).length), 0);
+    // Account for the "(empty)" suffix added to zero-prop component names so the
+    // sidebar doesn't truncate it.
+    const longestName = components.reduce((m, c) => Math.max(m, c.key.length + (isEmpty(c) ? ' (empty)'.length : 0)), 0);
     // +5 = border (1) + status icon (1) + badge column (1) + space (1) + border (1).
     // The badge column is reserved even when no annotation is present so the
     // sidebar width doesn't jitter as live-preview annotations flip in/out.
@@ -560,31 +503,7 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
     const needsReview = components.filter((c) => c.status === 'needs-review').length;
     const propCount = selected ? Object.keys(selected.entry.$properties).length : 0;
     const slotCount = selected?.entry.$slots ? Object.keys(selected.entry.$slots).length : 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), showRemovedPanel && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: `Removed components (${removedComponents.length})` }), _jsx(Text, { dimColor: true, children: "these will be DELETED from the target space" }), _jsx(Text, { children: " " }), removedComponents.map((rc) => (_jsx(Text, { children: `- ${rc.name}${rc.id ? `  (${rc.id})` : ''}` }, rc.id))), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press d or Esc to close" })] })), showCyclePanel &&
-                !dialogOpen &&
-                (() => {
-                    // Materialize the full panel body as a flat list of Text lines,
-                    // then slice by cyclePanelScroll so ↑↓ can walk arbitrarily long
-                    // content. Each cycle contributes 3-4 lines: heading, path,
-                    // suggested fix (if any), and a blank separator.
-                    const PANEL_H = 20;
-                    const lines = [];
-                    lines.push(_jsx(Text, { bold: true, color: "yellow", children: `SLOT DEPENDENCY CYCLES (${slotCycles.length})` }, "cyc-title"));
-                    lines.push(_jsx(Text, { dimColor: true, children: 'push will fail until these are resolved' }, "cyc-sub"));
-                    lines.push(_jsx(Text, { children: " " }, "cyc-space"));
-                    slotCycles.forEach((cycle, idx) => {
-                        const nodeCount = new Set(cycle.path).size;
-                        lines.push(_jsx(Text, { bold: true, children: `▸ Cycle ${idx + 1} (${nodeCount} component${nodeCount === 1 ? '' : 's'}):` }, `cyc-h-${idx}`));
-                        lines.push(_jsx(Text, { children: `    ${formatCyclePath(cycle, 16)}` }, `cyc-p-${idx}`));
-                        if (cycle.suggestedBreak) {
-                            const b = cycle.suggestedBreak;
-                            lines.push(_jsx(Text, { dimColor: true, children: `    Suggested fix: remove '${b.toComponent}' from ${b.fromComponent}.$slots.${b.slotName}.$allowedComponents` }, `cyc-f-${idx}`));
-                        }
-                        lines.push(_jsx(Text, { children: " " }, `cyc-s-${idx}`));
-                    });
-                    const visible = lines.slice(cyclePanelScroll, cyclePanelScroll + PANEL_H);
-                    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [visible, _jsx(Text, { dimColor: true, children: '[↑↓/j/k] scroll  [c/q/Esc] close' })] }));
-                })(), !dialogOpen &&
+    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), showRemovedPanel && !dialogOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: `Removed components (${removedComponents.length})` }), _jsx(Text, { dimColor: true, children: "these will be DELETED from the target space" }), _jsx(Text, { children: " " }), removedComponents.map((rc) => (_jsx(Text, { children: `- ${rc.name}${rc.id ? `  (${rc.id})` : ''}` }, rc.id))), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press d or Esc to close" })] })), !dialogOpen &&
                 livePreview &&
                 (() => {
                     // Pilot-2026-06-23 R2: at-a-glance diff summary at the top of the
@@ -607,7 +526,7 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                     if (!hasCounts)
                         return null;
                     return (_jsxs(Box, { children: [_jsx(Text, { children: 'Preview: ' }), _jsx(Text, { color: "green", children: `${counts.new} new` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: "yellow", children: `${counts.changed} changed` }), _jsx(Text, { children: ' · ' }), _jsx(Text, { dimColor: true, children: `${counts.removed} removed` }), removedComponents.length > 0 && _jsx(Text, { dimColor: true, children: ' ([d] removed list)' }), _jsx(Text, { children: ' · ' }), _jsx(Text, { color: "red", bold: true, children: `${counts.breaking} breaking` })] }));
-                })(), !dialogOpen && slotCycles.length > 0 && !showCyclePanel && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: `⚠ ${slotCycles.length} slot dependency cycle${slotCycles.length === 1 ? '' : 's'} detected — push will fail` }), slotCycles.slice(0, 3).map((cycle, idx) => (_jsx(Text, { color: "yellow", children: `  Cycle: ${formatCyclePath(cycle)}` }, `cyc-banner-${idx}`))), slotCycles.length > 3 && _jsx(Text, { color: "yellow", children: `  …${slotCycles.length - 3} more` }), _jsx(Text, { dimColor: true, children: '  press [c] for detail' })] })), !dialogOpen && emptyCount > 0 && (_jsx(Text, { color: "yellow", children: `⚠ ${emptyCount} component${emptyCount === 1 ? '' : 's'} had no classifiable props — review with care` })), !dialogOpen && finalizeError && _jsx(Text, { color: "red", children: `⚠ ${finalizeError}` }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
+                })(), !dialogOpen && emptyCount > 0 && (_jsx(Text, { color: "yellow", children: `⚠ ${emptyCount} component${emptyCount === 1 ? '' : 's'} had no classifiable props — review with care` })), !dialogOpen && finalizeError && _jsx(Text, { color: "red", children: `⚠ ${finalizeError}` }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
                             const idx = components.findIndex((c) => c.key === id);
                             if (idx >= 0) {
                                 setSelectedIdx(idx);
@@ -661,7 +580,6 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, liveP
                                                 (showJson ? 'hide JSON' : 'show JSON') +
                                                 '  [F] finalize  [e/Tab] focus panel' +
                                                 (livePreview && removedComponents.length > 0 ? '  [d] removed list' : '') +
-                                                (slotCycles.length > 0 ? '  [c] cycles' : '') +
                                                 '  [q] quit'
                                             : showJson
                                                 ? '  [j/k] scroll  [Ctrl+u/d] half-page  [gg/G] top/bottom  [Tab] focus list'

package/dist/src/import/tui/steps/WizardPreviewStep.d.ts

@@ -1,15 +1,5 @@
 import React from 'react';
 import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
-export interface PreviewDiffLine {
-    key: string;
-    color: 'green' | 'red' | 'yellow' | 'gray';
-    text: string;
-}
-/**
- * Pure builder for the wizard preview diff lines. Extracted from the render
- * layer so it can be unit-tested independently of Ink.
- */
-export declare function buildPreviewDiffLines(preview: ServerPreviewResponse): PreviewDiffLine[];
 type WizardPreviewStepProps = {
     preview: ServerPreviewResponse;
     spaceId: string;

package/dist/src/import/tui/steps/WizardPreviewStep.js

@@ -1,99 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import { Box, Text, useStdout } from 'ink';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
 import { hasBreakingChangesWithImpact } from '../../../apply/manifest.js';
 import { computeComponentDiffLines } from './preview-diff.js';
-/**
- * Pure builder for the wizard preview diff lines. Extracted from the render
- * layer so it can be unit-tested independently of Ink.
- */
-export function buildPreviewDiffLines(preview) {
-    const lines = [];
-    const { components, tokens } = preview;
-    for (const item of components.new) {
-        const raw = item;
-        const name = raw.key ?? raw.$name ?? 'unknown';
-        lines.push({ key: `comp-new-${name}`, color: 'green', text: ` + ${name}` });
-        const slots = (raw.$slots ?? {});
-        for (const slotName of Object.keys(slots).sort()) {
-            lines.push({
-                key: `comp-new-${name}-slot-${slotName}`,
-                color: 'green',
-                text: `   slot: ${slotName}`,
-            });
-            const allowed = slots[slotName]?.['$allowedComponents'];
-            if (Array.isArray(allowed) && allowed.length > 0) {
-                const names = allowed.filter((n) => typeof n === 'string');
-                lines.push({
-                    key: `comp-new-${name}-slot-${slotName}-allow`,
-                    color: 'green',
-                    text: `     allowedComponents: [${names.join(', ')}]`,
-                });
-            }
-        }
-    }
-    for (const item of components.removed) {
-        lines.push({ key: `comp-rm-${item.name}`, color: 'red', text: ` - ${item.name}` });
-    }
-    for (const item of components.changed) {
-        lines.push({
-            key: `comp-h-${item.current.name}`,
-            color: 'yellow',
-            text: ` ~ ${item.current.name}${item.hasPendingDraftChanges ? ' ⚡ has pending draft changes' : ''}`,
-        });
-        if (item.changeClassification?.classification === 'breaking') {
-            const reasons = item.changeClassification.breakingChanges
-                .map((bc) => `${bc.propertyId}: ${bc.reason}`)
-                .join(', ');
-            lines.push({ key: `comp-b-${item.current.name}`, color: 'red', text: ` ⚠ BREAKING: ${reasons}` });
-        }
-        const diffLines = computeComponentDiffLines(item.current, item.proposed, item.changeClassification);
-        for (const d of diffLines) {
-            lines.push({ key: `comp-d-${item.current.name}-${d.key}`, color: d.color, text: ` ${d.text}` });
-        }
-        // Also enumerate slots + allowedComponents from the proposed side so the
-        // reviewer sees the shape they're pushing, not just the delta.
-        const proposedSlots = item.proposed['$slots'] ?? {};
-        for (const slotName of Object.keys(proposedSlots).sort()) {
-            const allowed = proposedSlots[slotName]?.['$allowedComponents'];
-            if (Array.isArray(allowed) && allowed.length > 0) {
-                const names = allowed.filter((n) => typeof n === 'string');
-                const key = `comp-d-${item.current.name}-slot-${slotName}-allow-list`;
-                if (!lines.some((l) => l.key === key)) {
-                    lines.push({
-                        key,
-                        color: 'gray',
-                        text: `   slot ${slotName} allowedComponents: [${names.join(', ')}]`,
-                    });
-                }
-            }
-        }
-    }
-    for (const item of tokens.new) {
-        const raw = item;
-        const name = raw.name ?? raw.path ?? 'unknown';
-        lines.push({ key: `tok-new-${name}`, color: 'green', text: ` + ${name}` });
-    }
-    for (const item of tokens.removed) {
-        lines.push({ key: `tok-rm-${item.name}`, color: 'red', text: ` - ${item.name}` });
-    }
-    for (const item of tokens.changed) {
-        const tokenName = item.current.name;
-        lines.push({
-            key: `tok-h-${tokenName}`,
-            color: 'yellow',
-            text: ` ~ ${tokenName}${item.hasPendingDraftChanges ? ' ⚡ has pending draft changes' : ''}`,
-        });
-        if (item.changeClassification?.classification === 'breaking') {
-            const reasons = item.changeClassification.breakingChanges
-                .map((bc) => `${bc.propertyId}: ${bc.reason}`)
-                .join(', ');
-            lines.push({ key: `tok-b-${tokenName}`, color: 'red', text: ` ⚠ BREAKING: ${reasons}` });
-        }
-    }
-    return lines;
-}
 export function WizardPreviewStep({ preview, spaceId, environmentId, stepNumber, totalSteps, onConfirm, onEdit, onSaveFiles, onQuit, }) {
     const breakingWithImpact = hasBreakingChangesWithImpact(preview);
     const [diffExpanded, setDiffExpanded] = useState(false);
@@ -104,10 +14,56 @@ export function WizardPreviewStep({ preview, spaceId, environmentId, stepNumber,
     const allDiffLines = useMemo(() => {
         if (!diffExpanded)
             return [];
-        return buildPreviewDiffLines(preview).map((line) => ({
-            key: line.key,
-            element: (_jsx(Text, { color: line.color === 'gray' ? undefined : line.color, dimColor: line.color === 'gray', children: line.text })),
-        }));
+        const lines = [];
+        const { components, tokens } = preview;
+        for (const item of components.new) {
+            const name = item.key ??
+                item.$name ??
+                'unknown';
+            lines.push({ key: `comp-new-${name}`, element: _jsxs(Text, { color: "green", children: [" + ", name] }) });
+        }
+        for (const item of components.removed) {
+            lines.push({ key: `comp-rm-${item.name}`, element: _jsxs(Text, { color: "red", children: [" - ", item.name] }) });
+        }
+        for (const item of components.changed) {
+            lines.push({
+                key: `comp-h-${item.current.name}`,
+                element: (_jsxs(Text, { color: "yellow", children: [' ', "~ ", item.current.name, item.hasPendingDraftChanges ? _jsx(Text, { color: "yellow", children: " \u26A1 has pending draft changes" }) : null] })),
+            });
+            if (item.changeClassification?.classification === 'breaking') {
+                const reasons = item.changeClassification.breakingChanges
+                    .map((bc) => `${bc.propertyId}: ${bc.reason}`)
+                    .join(', ');
+                lines.push({ key: `comp-b-${item.current.name}`, element: _jsxs(Text, { color: "red", children: [" \u26A0 BREAKING: ", reasons] }) });
+            }
+            const diffLines = computeComponentDiffLines(item.current, item.proposed, item.changeClassification);
+            for (const d of diffLines) {
+                lines.push({ key: `comp-d-${item.current.name}-${d.key}`, element: _jsxs(Text, { color: d.color, children: [" ", d.text] }) });
+            }
+        }
+        for (const item of tokens.new) {
+            const name = item.name ??
+                item.path ??
+                'unknown';
+            lines.push({ key: `tok-new-${name}`, element: _jsxs(Text, { color: "green", children: [" + ", name] }) });
+        }
+        for (const item of tokens.removed) {
+            lines.push({ key: `tok-rm-${item.name}`, element: _jsxs(Text, { color: "red", children: [" - ", item.name] }) });
+        }
+        for (const item of tokens.changed) {
+            const tokenName = item.current.name;
+            lines.push({
+                key: `tok-h-${tokenName}`,
+                element: (_jsxs(Text, { color: "yellow", children: [' ', "~ ", tokenName, item.hasPendingDraftChanges ? _jsx(Text, { color: "yellow", children: " \u26A1 has pending draft changes" }) : null] })),
+            });
+            if (item.changeClassification?.classification === 'breaking') {
+                const reasons = item.changeClassification.breakingChanges
+                    .map((bc) => `${bc.propertyId}: ${bc.reason}`)
+                    .join(', ');
+                lines.push({ key: `tok-b-${tokenName}`, element: _jsxs(Text, { color: "red", children: [" \u26A0 BREAKING: ", reasons] }) });
+            }
+        }
+        return lines;
     }, [diffExpanded, preview]);
     const maxScroll = Math.max(0, allDiffLines.length - viewportHeight);
     useImmediateInput((input, key) => {