@contentful/experience-design-system-cli 2.14.2 → 2.15.0

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
+import { PALETTE } from '../../../analyze/select/tui/theme.js';
 import { Box, Text } from 'ink';
 import { statSync } from 'node:fs';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
@@ -83,5 +84,5 @@ export function TokenInputStep({ onConfirm, onSkip, onQuit }) {
         }
     });
     const displayValue = inputValue + (cursorVisible ? '█' : ' ');
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Design tokens" }), _jsx(Text, { dimColor: true, children: "Point me to your raw token file (e.g. ~/design-tokens/tokens.json). You can use ~, relative, or absolute paths. Claude will map it to DTCG format." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", children: "?" }), _jsx(Text, { children: "Token path (file or directory):" }), _jsx(Text, { children: displayValue })] }), resolvedPath && resolvedPath !== inputValue.trim() && !error && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2192 ", resolvedPath] }) })), error && (_jsxs(Box, { marginTop: 0, flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["\u2717 ", error] }), resolvedPath && _jsxs(Text, { dimColor: true, children: [" Resolved to: ", resolvedPath] })] }))] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Submit / Skip if empty" }), _jsx(Text, { dimColor: true, children: "[Tab] Exit typing" }), _jsx(Text, { dimColor: true, children: "[Esc] Clear & exit" }), _jsx(Text, { dimColor: true, children: "[s] Skip" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Design tokens" }), _jsx(Text, { dimColor: true, children: "Point me to your raw token file (e.g. ~/design-tokens/tokens.json). You can use ~, relative, or absolute paths. Claude will map it to DTCG format." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.info, children: "?" }), _jsx(Text, { children: "Token path (file or directory):" }), _jsx(Text, { children: displayValue })] }), resolvedPath && resolvedPath !== inputValue.trim() && !error && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2192 ", resolvedPath] }) })), error && (_jsxs(Box, { marginTop: 0, flexDirection: "column", children: [_jsxs(Text, { color: PALETTE.error, children: ["\u2717 ", error] }), resolvedPath && _jsxs(Text, { dimColor: true, children: [" Resolved to: ", resolvedPath] })] }))] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Submit / Skip if empty" }), _jsx(Text, { dimColor: true, children: "[Tab] Exit typing" }), _jsx(Text, { dimColor: true, children: "[Esc] Clear & exit" }), _jsx(Text, { dimColor: true, children: "[s] Skip" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
 }

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
+import { PALETTE } from '../../../analyze/select/tui/theme.js';
 import { Box, Text } from 'ink';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
 export function WelcomeStep({ onContinue, onQuit }) {
@@ -29,5 +30,5 @@ export function WelcomeStep({ onContinue, onQuit }) {
         }
     });
     const displayValue = inputValue + (cursorVisible ? '█' : ' ');
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "green", children: "\uD83D\uDC4B Hey! Let's import your design system into Contentful." }), _jsx(Text, { dimColor: true, children: "I'll walk you through 5 steps to get your components into Contentful ExO." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 1" }), _jsx(Text, { dimColor: true, children: "Extract components from your codebase" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 2" }), _jsx(Text, { dimColor: true, children: "Review what was extracted" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 3" }), _jsx(Text, { dimColor: true, children: "Generate CDF definitions with Claude" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 4" }), _jsx(Text, { dimColor: true, children: "Review generated definitions" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 5" }), _jsx(Text, { dimColor: true, children: "Push to Contentful" })] }), _jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" })] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsx(Text, { children: "Where is your component library?" }), _jsxs(Box, { gap: 1, marginTop: 0, children: [_jsx(Text, { color: "cyan", children: "?" }), _jsx(Text, { children: "Project path:" }), _jsx(Text, { children: displayValue })] })] }), _jsxs(Box, { marginTop: 1, gap: 3, children: [_jsx(Text, { dimColor: true, children: "[Enter] Continue" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: PALETTE.success, children: "\uD83D\uDC4B Hey! Let's import your design system into Contentful." }), _jsx(Text, { dimColor: true, children: "I'll walk you through 5 steps to get your components into Contentful ExO." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 1" }), _jsx(Text, { dimColor: true, children: "Extract components from your codebase" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 2" }), _jsx(Text, { dimColor: true, children: "Review what was extracted" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 3" }), _jsx(Text, { dimColor: true, children: "Generate CDF definitions with Claude" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 4" }), _jsx(Text, { dimColor: true, children: "Review generated definitions" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, children: "Step 5" }), _jsx(Text, { dimColor: true, children: "Push to Contentful" })] }), _jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" })] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 0, children: [_jsx(Text, { children: "Where is your component library?" }), _jsxs(Box, { gap: 1, marginTop: 0, children: [_jsx(Text, { color: PALETTE.info, children: "?" }), _jsx(Text, { children: "Project path:" }), _jsx(Text, { children: displayValue })] })] }), _jsxs(Box, { marginTop: 1, gap: 3, children: [_jsx(Text, { dimColor: true, children: "[Enter] Continue" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
 }

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

@@ -1,5 +1,11 @@
 import React from 'react';
 import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
+export interface PreviewDiffLine {
+    key: string;
+    color: string;
+    text: string;
+}
+export declare function buildPreviewDiffLines(preview: ServerPreviewResponse): PreviewDiffLine[];
 type WizardPreviewStepProps = {
     preview: ServerPreviewResponse;
     spaceId: string;

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

@@ -1,9 +1,94 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
+import { PALETTE } from '../../../analyze/select/tui/theme.js';
 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';
+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: PALETTE.success, text: ` + ${name}` });
+        const slots = (raw.$slots ?? {});
+        for (const slotName of Object.keys(slots).sort()) {
+            lines.push({
+                key: `comp-new-${name}-slot-${slotName}`,
+                color: PALETTE.success,
+                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: PALETTE.success,
+                    text: `     allowedComponents: [${names.join(', ')}]`,
+                });
+            }
+        }
+    }
+    for (const item of components.removed) {
+        lines.push({ key: `comp-rm-${item.name}`, color: PALETTE.error, text: ` - ${item.name}` });
+    }
+    for (const item of components.changed) {
+        lines.push({
+            key: `comp-h-${item.current.name}`,
+            color: PALETTE.warning,
+            text: ` ~ ${item.current.name}${item.hasPendingDraftChanges ? ' ⚡ has pending draft changes' : ''}`,
+        });
+        if (item.changeClassification?.classification === 'breaking') {
+            const reasons = item.changeClassification.breakingChanges
+                .map((bc) => `${'slotId' in bc ? bc.slotId : bc.propertyId}: ${bc.reason}`)
+                .join(', ');
+            lines.push({ key: `comp-b-${item.current.name}`, color: PALETTE.error, 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}` });
+        }
+        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: PALETTE.success, text: ` + ${name}` });
+    }
+    for (const item of tokens.removed) {
+        lines.push({ key: `tok-rm-${item.name}`, color: PALETTE.error, text: ` - ${item.name}` });
+    }
+    for (const item of tokens.changed) {
+        const tokenName = item.current.name;
+        lines.push({
+            key: `tok-h-${tokenName}`,
+            color: PALETTE.warning,
+            text: ` ~ ${tokenName}${item.hasPendingDraftChanges ? ' ⚡ has pending draft changes' : ''}`,
+        });
+        if (item.changeClassification?.classification === 'breaking') {
+            const reasons = item.changeClassification.breakingChanges
+                .map((bc) => `${'slotId' in bc ? bc.slotId : bc.propertyId}: ${bc.reason}`)
+                .join(', ');
+            lines.push({ key: `tok-b-${tokenName}`, color: PALETTE.error, 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);
@@ -14,56 +99,10 @@ export function WizardPreviewStep({ preview, spaceId, environmentId, stepNumber,
     const allDiffLines = useMemo(() => {
         if (!diffExpanded)
             return [];
-        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;
+        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 })),
+        }));
     }, [diffExpanded, preview]);
     const maxScroll = Math.max(0, allDiffLines.length - viewportHeight);
     useImmediateInput((input, key) => {
@@ -111,11 +150,11 @@ export function WizardPreviewStep({ preview, spaceId, environmentId, stepNumber,
     const hasComponents = components.new.length + components.changed.length + components.removed.length > 0;
     const hasTokens = tokens.new.length + tokens.changed.length + tokens.removed.length > 0;
     const hasAnything = hasComponents || hasTokens;
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Box, { gap: 1, children: [_jsxs(Text, { bold: true, children: ["Step ", stepNumber, " of ", totalSteps] }), _jsx(Text, { bold: true, children: "\u2014" }), _jsx(Text, { bold: true, children: "Push to Contentful" })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) })] }), hasAnything ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Here's what will happen in your space:" }), hasComponents && (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Box, { gap: 1, marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: "ComponentTypes" }) }), components.new.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: " \uFF0B" }), _jsxs(Text, { children: [components.new.length, " will be created"] })] }), components.new.map((item, i) => {
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Box, { gap: 1, children: [_jsxs(Text, { bold: true, children: ["Step ", stepNumber, " of ", totalSteps] }), _jsx(Text, { bold: true, children: "\u2014" }), _jsx(Text, { bold: true, children: "Push to Contentful" })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) })] }), hasAnything ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Here's what will happen in your space:" }), hasComponents && (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Box, { gap: 1, marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: "ComponentTypes" }) }), components.new.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.success, children: " \uFF0B" }), _jsxs(Text, { children: [components.new.length, " will be created"] })] }), components.new.map((item, i) => {
                                         const name = item.key ?? item.$name ?? 'unknown';
-                                        return (_jsxs(Text, { color: "green", children: [' ', "+ ", name] }, `new-${i}`));
-                                    })] })), components.changed.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "yellow", children: " \uFF5E" }), _jsxs(Text, { children: [components.changed.length, " will be updated"] })] }), components.changed.map((item, i) => {
+                                        return (_jsxs(Text, { color: PALETTE.success, children: [' ', "+ ", name] }, `new-${i}`));
+                                    })] })), components.changed.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.warning, children: " \uFF5E" }), _jsxs(Text, { children: [components.changed.length, " will be updated"] })] }), components.changed.map((item, i) => {
                                         const isBreaking = item.changeClassification?.classification === 'breaking';
-                                        return (_jsxs(Text, { color: isBreaking ? 'red' : 'yellow', children: [' ', isBreaking ? '⚠' : '~', " ", item.current.name] }, `chg-${i}`));
-                                    })] })), components.removed.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: " \u2717" }), _jsxs(Text, { children: [components.removed.length, " will be removed"] })] }), components.removed.map((item, i) => (_jsxs(Text, { color: "red", children: [' ', "\u2717 ", item.name] }, `rm-${i}`)))] })), components.unchanged.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: " \u00B7" }), _jsxs(Text, { dimColor: true, children: [components.unchanged.length, " unchanged"] })] }))] })), hasTokens && (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Box, { gap: 1, marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: "Design Tokens" }) }), tokens.new.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: " \uFF0B" }), _jsxs(Text, { children: [tokens.new.length, " will be created"] })] })), tokens.changed.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "yellow", children: " \uFF5E" }), _jsxs(Text, { children: [tokens.changed.length, " will be updated"] })] })), tokens.removed.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: " \u2717" }), _jsxs(Text, { children: [tokens.removed.length, " will be removed"] })] })), tokens.unchanged.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: " \u00B7" }), _jsxs(Text, { dimColor: true, children: [tokens.unchanged.length, " unchanged"] })] }))] })), diffExpanded && allDiffLines.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Text, { dimColor: true, children: [' ', "Diff (", allDiffLines.length, " lines) \u2014 line ", scrollOffset + 1, "\u2013", Math.min(scrollOffset + viewportHeight, allDiffLines.length), " of ", allDiffLines.length] }), _jsx(Box, { flexDirection: "column", children: allDiffLines.slice(scrollOffset, scrollOffset + viewportHeight).map((line) => (_jsx(Box, { children: line.element }, line.key))) }), maxScroll > 0 && _jsx(Text, { dimColor: true, children: " \u2195 j/k to scroll, f/b to page" })] }))] })) : (_jsx(Text, { dimColor: true, children: "Nothing to push \u2014 everything is already up to date." })), _jsxs(Box, { gap: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Space:" }), _jsx(Text, { children: spaceId }), _jsx(Text, { dimColor: true, children: "/" }), _jsx(Text, { dimColor: true, children: "Environment:" }), _jsx(Text, { children: environmentId })] }), breakingWithImpact && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", bold: true, children: "\u26A0 Breaking changes will affect downstream entities. Press Enter to acknowledge and apply." }) })), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Push to Contentful" }), _jsxs(Text, { dimColor: true, children: ["[d] ", diffExpanded ? 'Hide' : 'Show', " diff"] }), diffExpanded && _jsx(Text, { dimColor: true, children: "[j/k] Scroll [f/b] Page" }), onEdit && _jsx(Text, { dimColor: true, children: "[e] Edit definitions" }), onSaveFiles && _jsx(Text, { dimColor: true, children: "[s] Save files instead" }), _jsx(Text, { dimColor: true, children: "[q] Cancel" })] })] }));
+                                        return (_jsxs(Text, { color: isBreaking ? PALETTE.error : PALETTE.warning, children: [' ', isBreaking ? '⚠' : '~', " ", item.current.name] }, `chg-${i}`));
+                                    })] })), components.removed.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.error, children: " \u2717" }), _jsxs(Text, { children: [components.removed.length, " will be removed"] })] }), components.removed.map((item, i) => (_jsxs(Text, { color: PALETTE.error, children: [' ', "\u2717 ", item.name] }, `rm-${i}`)))] })), components.unchanged.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: " \u00B7" }), _jsxs(Text, { dimColor: true, children: [components.unchanged.length, " unchanged"] })] }))] })), hasTokens && (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Box, { gap: 1, marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: "Design Tokens" }) }), tokens.new.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.success, children: " \uFF0B" }), _jsxs(Text, { children: [tokens.new.length, " will be created"] })] })), tokens.changed.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.warning, children: " \uFF5E" }), _jsxs(Text, { children: [tokens.changed.length, " will be updated"] })] })), tokens.removed.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: PALETTE.error, children: " \u2717" }), _jsxs(Text, { children: [tokens.removed.length, " will be removed"] })] })), tokens.unchanged.length > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: " \u00B7" }), _jsxs(Text, { dimColor: true, children: [tokens.unchanged.length, " unchanged"] })] }))] })), diffExpanded && allDiffLines.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Text, { dimColor: true, children: [' ', "Diff (", allDiffLines.length, " lines) \u2014 line ", scrollOffset + 1, "\u2013", Math.min(scrollOffset + viewportHeight, allDiffLines.length), " of ", allDiffLines.length] }), _jsx(Box, { flexDirection: "column", children: allDiffLines.slice(scrollOffset, scrollOffset + viewportHeight).map((line) => (_jsx(Box, { children: line.element }, line.key))) }), maxScroll > 0 && _jsx(Text, { dimColor: true, children: " \u2195 j/k to scroll, f/b to page" })] }))] })) : (_jsx(Text, { dimColor: true, children: "Nothing to push \u2014 everything is already up to date." })), _jsxs(Box, { gap: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Space:" }), _jsx(Text, { children: spaceId }), _jsx(Text, { dimColor: true, children: "/" }), _jsx(Text, { dimColor: true, children: "Environment:" }), _jsx(Text, { children: environmentId })] }), breakingWithImpact && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: PALETTE.error, bold: true, children: "\u26A0 Breaking changes will affect downstream entities. Press Enter to acknowledge and apply." }) })), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Push to Contentful" }), _jsxs(Text, { dimColor: true, children: ["[d] ", diffExpanded ? 'Hide' : 'Show', " diff"] }), diffExpanded && _jsx(Text, { dimColor: true, children: "[j/k] Scroll [f/b] Page" }), onEdit && _jsx(Text, { dimColor: true, children: "[e] Edit definitions" }), onSaveFiles && _jsx(Text, { dimColor: true, children: "[s] Save files instead" }), _jsx(Text, { dimColor: true, children: "[q] Cancel" })] })] }));
 }

package/dist/src/import/tui/steps/auto-reject-decision.d.ts

@@ -0,0 +1,7 @@
+export interface AutoRejectDecisionInput {
+    loading: boolean;
+    autoRejectFired: boolean;
+    hasCycle: boolean;
+}
+export type AutoRejectDecision = 'fire' | 'skip';
+export declare function computeAutoRejectDecision(input: AutoRejectDecisionInput): AutoRejectDecision;

package/dist/src/import/tui/steps/auto-reject-decision.js

@@ -0,0 +1,9 @@
+export function computeAutoRejectDecision(input) {
+    if (input.loading)
+        return 'skip';
+    if (input.autoRejectFired)
+        return 'skip';
+    if (!input.hasCycle)
+        return 'skip';
+    return 'fire';
+}

package/dist/src/import/tui/steps/breaking-change-format.d.ts

@@ -0,0 +1,2 @@
+import type { BreakingChange, ComponentTypeSummary } from '@contentful/experience-design-system-types';
+export declare function formatBreakingChange(bc: BreakingChange, current?: Pick<ComponentTypeSummary, 'fullProperties'>): string;

package/dist/src/import/tui/steps/breaking-change-format.js

@@ -0,0 +1,24 @@
+const PROPERTY_REASON_COPY = {
+    removed: 'removed',
+    added_required_no_default: 'now required, no default',
+    type_changed: 'type changed',
+    validation_narrowed: 'allowed values narrowed',
+};
+const SLOT_REASON_COPY = {
+    slot_removed: 'slot removed',
+    slot_allowed_components_narrowed: 'allowed components narrowed',
+};
+export function formatBreakingChange(bc, current) {
+    if ('slotId' in bc) {
+        const copy = SLOT_REASON_COPY[bc.reason] ?? bc.reason;
+        return `${bc.slotId} — ${copy}`;
+    }
+    const copy = PROPERTY_REASON_COPY[bc.reason] ?? bc.reason;
+    const meta = current?.fullProperties?.[bc.propertyId];
+    if (meta) {
+        const tags = [meta.category, meta.type].filter((t) => typeof t === 'string' && t.length > 0);
+        const suffix = tags.length > 0 ? ` (${tags.join(', ')})` : '';
+        return `${bc.propertyId}${suffix} — ${copy}`;
+    }
+    return `${bc.propertyId} — ${copy}`;
+}

package/dist/src/import/tui/steps/enumerate-cycle-breaks.d.ts

@@ -0,0 +1,14 @@
+import type { CDFComponentEntry } from '@contentful/experience-design-system-types';
+import type { SlotCycle, SlotEdge } from '../../../analyze/cycle-detection.js';
+export type BreakEdge = SlotEdge;
+/** Row shape accepted by {@link enumerateCycleBreaks}. */
+export interface BreakEnumComponent {
+    key: string;
+    entry: CDFComponentEntry;
+}
+export declare function enumerateCycleBreaks(cycle: Pick<SlotCycle, 'edges'>, components: BreakEnumComponent[]): BreakEdge[];
+export declare function shouldBreakOverlayGoFullScreen({ rows, edgeCount, reservedChrome, }: {
+    rows: number;
+    edgeCount: number;
+    reservedChrome?: number;
+}): boolean;

package/dist/src/import/tui/steps/preview-diff.js

@@ -7,14 +7,12 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
     const proposedProperties = (proposed['$properties'] ?? {});
     const proposedProps = new Set(Object.keys(proposedProperties));
     const oldProps = current.fullProperties;
-    // Added props
     for (const name of [...proposedProps].sort()) {
         if (!currentProps.has(name)) {
             const def = proposedProperties[name];
             lines.push({ key: `${name}-add`, color: 'green', text: `+ ${name}: ${formatPropDef(def)}` });
         }
     }
-    // Removed props
     for (const name of [...currentProps].sort()) {
         if (!proposedProps.has(name)) {
             if (oldProps?.[name]) {
@@ -26,7 +24,6 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
             }
         }
     }
-    // Modified props — compare old vs new definitions
     const handledProps = new Set();
     for (const name of [...currentProps].sort()) {
         if (!proposedProps.has(name))
@@ -42,9 +39,10 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
                 lines.push(d);
         }
     }
-    // If no old definitions available, fall back to breaking change reasons
     if (!oldProps && changeClassification?.breakingChanges) {
         for (const bc of changeClassification.breakingChanges) {
+            if (!('propertyId' in bc))
+                continue;
             if (!currentProps.has(bc.propertyId) || !proposedProps.has(bc.propertyId))
                 continue;
             if (handledProps.has(bc.propertyId))
@@ -55,10 +53,10 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
             lines.push({ key: `${bc.propertyId}-new`, color: 'green', text: `+ ${bc.propertyId}: ${formatPropDef(def)}` });
         }
     }
-    // Slot diffs
     const currentSlots = new Set(current.slots);
     const proposedSlots = (proposed['$slots'] ?? {});
     const proposedSlotNames = new Set(Object.keys(proposedSlots));
+    const currentSlotAllowed = current.currentSlotAllowed ?? {};
     for (const name of [...proposedSlotNames].sort()) {
         if (!currentSlots.has(name)) {
             lines.push({ key: `slot-${name}-add`, color: 'green', text: `+ slot: ${name}` });
@@ -69,8 +67,53 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
             lines.push({ key: `slot-${name}-rm`, color: 'red', text: `- slot: ${name}` });
         }
     }
+    for (const name of [...proposedSlotNames].sort()) {
+        const nextAllowed = normalizeAllowedComponents(proposedSlots[name]?.['$allowedComponents']);
+        const prevAllowed = normalizeAllowedComponents(currentSlotAllowed[name]);
+        const prevExists = currentSlots.has(name);
+        if (!prevExists) {
+            if (nextAllowed.length > 0) {
+                lines.push({
+                    key: `slot-${name}-allow-new`,
+                    color: 'green',
+                    text: `+ slot ${name} allowedComponents: [${nextAllowed.join(', ')}]`,
+                });
+            }
+            continue;
+        }
+        if (arraysEqual(prevAllowed, nextAllowed))
+            continue;
+        lines.push({
+            key: `slot-${name}-allow-old`,
+            color: 'red',
+            text: `- slot ${name} allowedComponents: [${prevAllowed.join(', ')}]`,
+        });
+        lines.push({
+            key: `slot-${name}-allow-new`,
+            color: 'green',
+            text: `+ slot ${name} allowedComponents: [${nextAllowed.join(', ')}]`,
+        });
+    }
     return lines;
 }
+function normalizeAllowedComponents(value) {
+    if (!Array.isArray(value))
+        return [];
+    const out = [];
+    for (const item of value) {
+        if (typeof item === 'string' && item.length > 0)
+            out.push(item);
+    }
+    return out.sort();
+}
+function arraysEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++)
+        if (a[i] !== b[i])
+            return false;
+    return true;
+}
 function normalizeType(type) {
     switch (type.toLowerCase()) {
         case 'boolean':

package/dist/src/import/tui/useFinalizePreview.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentTypeSummary } from '@contentful/experience-design-system-types';
+export type FinalizePreviewStatus = 'idle' | 'running' | 'done' | 'error';
+export type UseFinalizePreviewOptions = {
+    /** True while the Finalize dialog is open. Toggling true (re)fires the preview. */
+    open: boolean;
+    extractSessionId: string | null;
+    tokensPath: string;
+    spaceId: string;
+    environmentId: string;
+    cmaToken: string;
+    host: string;
+    /** Component keys the operator has accepted; drives the scoped preview. */
+    acceptedKeys: ReadonlySet<string>;
+};
+export type UseFinalizePreviewReturn = {
+    status: FinalizePreviewStatus;
+    removed: ComponentTypeSummary[];
+    scrollOffset: number;
+    /** Adjust the removed-list scroll (clamped to the window). */
+    scrollBy: (delta: number) => void;
+};
+/**
+ * Shared Finalize-dialog deletion preview, used by both the composite and
+ * atomic generate-review steps so the "what will this push delete" experience
+ * is identical.
+ *
+ * When the dialog opens it fires a preview scoped to the ACCEPTED set (so the
+ * result reflects exactly what the push does, independent of the session's
+ * not-yet-reclassified generated rows), tracks loading/error, and owns the
+ * scroll offset for the (windowed) removed list. Credentials-missing (e.g.
+ * `--no-push`) short-circuits to `done` with an empty list — the dialog then
+ * simply omits the deletion section.
+ */
+export declare function useFinalizePreview(opts: UseFinalizePreviewOptions): UseFinalizePreviewReturn;

package/dist/src/import/tui/useLivePreview.d.ts

@@ -9,6 +9,9 @@ export type UseLivePreviewOptions = {
     host: string;
     onResult: (response: ServerPreviewResponse | null) => void;
     debounceMs?: number;
+    /** Preview an empty-but-present manifest (delete-all diff) when nothing is
+     *  accepted, so the final-review UI can show what a push would delete. */
+    deleteAllComponents?: boolean;
 };
 export type LivePreviewStatus = 'idle' | 'running';
 export type UseLivePreviewReturn = {

package/dist/src/import/tui/useLivePreview.js

@@ -81,6 +81,7 @@ export function useLivePreview(opts) {
                 cmaToken: current.cmaToken,
                 host: current.host,
                 generation,
+                deleteAllComponents: current.deleteAllComponents === true,
             });
             // Discard stale responses (generation tag).
             if (result.generation !== latestRef.current)

package/dist/src/import/tui/wizard-state-transitions.d.ts

@@ -1,45 +1,9 @@
-/**
- * Pure state-machine helpers for the wizard. Extracted from WizardApp.tsx so the
- * transitions can be unit-tested without rendering ink.
- *
- * Bug fix (2026-06): credentials moved BEFORE generate so:
- *   1. Bad creds (401/403) are caught upfront — before the operator pays the cost
- *      of extract + LLM classification (potentially many minutes).
- *   2. Live preview in final-review actually fires, because the validated creds
- *      are present in WizardApp state when GenerateReviewStep mounts.
- *
- * New order:
- *   welcome → token-input → path-validation → extracting → scope-gate
- *          → credentials (validates inline) → generating
- *          → generating → final-review → push-decision-gate → previewing
- *          → preview-gate → pushing → done
- *
- * `--no-push` short-circuits the credentials/preview/push branch — the operator
- * just wants extract + classify + final-review without ever touching Contentful.
- */
 export type WizardStepAfterScope = 'credentials' | 'generating' | 'push-decision-gate' | 'print-gate';
 export type WizardStepAfterCredentials = 'generating' | 'push-decision-gate';
-/**
- * Transition target after the scope-gate confirms.
- *
- * - acceptedCount > 0:
- *   - !noPush → `credentials` (gather + validate creds upfront, before LLM cost)
- *   - noPush  → `generating` (skip creds entirely; live preview no-ops gracefully)
- * - acceptedCount === 0 (everything rejected):
- *   - !noPush → `credentials` (still need creds to push tokens / removals)
- *   - noPush  → `print-gate` (nothing to do; let the operator save files and exit)
- */
 export declare function nextStepAfterScopeGate(opts: {
     acceptedCount: number;
     noPush: boolean;
 }): WizardStepAfterScope;
-/**
- * Transition target after credentials are validated (or skipped via the
- * inline validation pings the API). Drives the post-credentials branch:
- *   - acceptedCount > 0 → `generating` (run the generator now that creds are good)
- *   - acceptedCount === 0 → `push-decision-gate` (no components to generate;
- *     skip straight to push-decision and preview)
- */
 export declare function nextStepAfterCredentialsValidated(opts: {
     acceptedCount: number;
 }): WizardStepAfterCredentials;
@@ -48,38 +12,20 @@ export declare function shouldSkipFinalReviewAfterCredentials(state: {
     finalReviewPassed: boolean;
 }): boolean;
 export declare function resolveNoCacheForGenerate(opts: {
-    isFreshSession: boolean;
     cliNoCache: boolean;
 }): boolean;
-/**
- * Skip-credentials spec — Task 2. When the operator pressed `s` on the
- * credentials screen, the wizard advanced without validating creds. That
- * makes `previewImport` impossible (no working token) and undesirable (the
- * whole point is to inspect locally without touching the server). Callers
- * check this before issuing the API call and route to
- * `buildSkippedPreviewTransition()` instead.
- */
 export declare function shouldBypassPreview(state: {
     credentialsSkipped: boolean;
 }): boolean;
-/**
- * State patch applied when `shouldBypassPreview` is true: skip the preview
- * step entirely, surface no server preview to downstream consumers, and
- * hand control to the push-decision-gate (which will render with push
- * disabled — see Task 3).
- */
 export declare function buildSkippedPreviewTransition(): {
     step: 'push-decision-gate';
     serverPreview: null;
 };
-/**
- * Skip-credentials spec — Task 4 (defensive guard). The push-decision-gate
- * disables "Save AND push" and "Push only" when credentialsSkipped is true,
- * so `runPush` should never be reached. If a state-machine regression ever
- * routed an operator past that guard, `runPush` checks this helper and
- * refuses to issue the API call — instead it routes back to the print-files
- * local-save path via `buildSkippedPushTransition`.
- */
+export type CycleGateAction = 'block' | 'auto-reject' | 'proceed';
+export declare function resolveCycleGateAction(opts: {
+    hasCycles: boolean;
+    autoRejectCycles: boolean;
+}): CycleGateAction;
 export declare function shouldRefusePush(state: {
     credentialsSkipped: boolean;
 }): boolean;