@contentful/experience-design-system-cli 2.12.3 → 2.12.4-dev-build-262febd.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.12.3",
+  "version": "2.12.4-dev-build-262febd.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",

package/dist/src/analyze/extract/react.js

@@ -1,6 +1,20 @@
 import { Project, Node, SyntaxKind, } from 'ts-morph';
 import { extractAllowedValues, getNodeDefinitions, getTypeReferenceName, getTypeTargetDeclarations, } from './tsx-shared.js';
 import { shouldBeSlot } from './slot-detection.js';
+import { extractAllowedComponentsFromTypeText, extractAllowedComponentsFromJsdoc } from './slot-allowed-components.js';
+/**
+ * Matches ReactElement<XProps ...> (with optional `React.` prefix) anywhere in
+ * a type text. TS often resolves this to ReactElement<XProps, string | JSXElementConstructor<any>>,
+ * so we allow anything after the first type argument.
+ */
+const REACT_ELEMENT_GENERIC_TEST = /(?:React\.)?ReactElement\s*<\s*[A-Za-z_$][\w$.]*/;
+/**
+ * True when a type text references ReactElement<XProps> — either directly, as a
+ * union with null/undefined, or as a union of ReactElement<...> types.
+ */
+function isReactElementGenericSlotType(typeText) {
+    return REACT_ELEMENT_GENERIC_TEST.test(typeText);
+}
 const PROP_WRAPPER_TYPE_NAMES = new Set(['ExpandProps']);
 const CHILD_WRAPPER_TYPE_NAMES = new Set(['PropsWithChildren']);
 const TRANSPARENT_POLYMORPHIC_TYPE_NAMES = new Set(['PolymorphicProps', 'PropsWithAs', 'PropsWithHTMLElement']);
@@ -948,7 +962,7 @@ function extractDestructuredBindingFallbackProps(func, param, existingPropNames,
 function extractSlots(type, hasChildren) {
     const slots = [];
     if (hasChildren) {
-        slots.push({ name: 'default', isDefault: true });
+        slots.push({ name: 'children', isDefault: true });
     }
     for (const property of type.getProperties()) {
         const name = property.getName();
@@ -1653,6 +1667,40 @@ export async function extractReactComponents(filePaths) {
             warnings.push(`Failed to extract from ${filePath}: ${e instanceof Error ? e.message : String(e)}`);
         }
     }
+    // Post-pass: resolve $allowedComponents for slots whose type text referenced
+    // ReactElement<XProps>. Build a props-type-name → component-name map from the
+    // full run first so cross-file references resolve.
+    const propsToComponent = new Map();
+    const componentNames = new Set();
+    for (const c of components) {
+        componentNames.add(c.name);
+        if (c._propsTypeName)
+            propsToComponent.set(c._propsTypeName, c.name);
+    }
+    for (const c of components) {
+        for (const slot of c.slots) {
+            const found = new Set();
+            if (slot._rawTypeText) {
+                for (const n of extractAllowedComponentsFromTypeText(slot._rawTypeText, {
+                    propsToComponent,
+                    componentNames,
+                })) {
+                    found.add(n);
+                }
+            }
+            if (slot._rawJsdoc) {
+                for (const n of extractAllowedComponentsFromJsdoc(slot._rawJsdoc, componentNames)) {
+                    found.add(n);
+                }
+            }
+            delete slot._rawTypeText;
+            delete slot._rawJsdoc;
+            if (found.size > 0) {
+                slot.allowedComponents = [...found].sort();
+            }
+        }
+        delete c._propsTypeName;
+    }
     return {
         components: components.sort((a, b) => a.name.localeCompare(b.name)),
         warnings,
@@ -1763,19 +1811,28 @@ function extractFromSourceFile(sourceFile, isNext) {
             };
         });
         const filteredProps = filterImplementationOnlyAliasProps(propsWithDefaults, funcNode);
-        // Second pass: expand ReactNode-typed props into slots
+        // Second pass: expand ReactNode-typed and ReactElement<XProps>-typed props into slots
         const existingSlotNames = new Set(slots.map((s) => s.name));
         const expandedSlots = [];
         const propsAfterSlotExpansion = filteredProps.filter((prop) => {
             if (existingSlotNames.has(prop.name))
                 return true; // already handled
-            if (shouldBeSlot(prop.name, prop.type)) {
-                expandedSlots.push({ name: prop.name, isDefault: false });
+            const isElementSlot = isReactElementGenericSlotType(prop.type);
+            if (shouldBeSlot(prop.name, prop.type) || isElementSlot) {
+                expandedSlots.push({
+                    name: prop.name,
+                    isDefault: false,
+                    ...(isElementSlot ? { _rawTypeText: prop.type } : {}),
+                });
                 return false;
             }
             return true;
         });
         const finalSlots = [...slots, ...expandedSlots];
+        // Capture the props-type-name so the run-level post-pass can build a
+        // props-type → component-name map for $allowedComponents resolution.
+        const propsTypeName = firstParamTypeNode?.getText?.().trim();
+        const propsTypeNameCapture = propsTypeName && /^[A-Za-z_$][\w$]*$/.test(propsTypeName) ? propsTypeName : undefined;
         components.push({
             name,
             source: sourceFile.getFilePath(),
@@ -1784,6 +1841,7 @@ function extractFromSourceFile(sourceFile, isNext) {
             props: propsAfterSlotExpansion,
             slots: finalSlots,
             ...(usesCreateContext && { usesCreateContext: true }),
+            ...(propsTypeNameCapture ? { _propsTypeName: propsTypeNameCapture } : {}),
         });
     }
     return components;

package/dist/src/analyze/extract/slot-allowed-components.d.ts

@@ -0,0 +1,8 @@
+export interface AllowedComponentsContext {
+    /** e.g. { HeadingProps -> Heading, ButtonProps -> Button } */
+    propsToComponent: ReadonlyMap<string, string>;
+    /** ComponentType names known to the project (post-filter). */
+    componentNames: ReadonlySet<string>;
+}
+export declare function extractAllowedComponentsFromTypeText(typeText: string, ctx: AllowedComponentsContext): string[];
+export declare function extractAllowedComponentsFromJsdoc(jsdocText: string, componentNames: ReadonlySet<string>): string[];

package/dist/src/analyze/extract/slot-allowed-components.js

@@ -0,0 +1,39 @@
+// Matches ReactElement<XProps> and ReactElement<XProps, ...> (TS often
+// expands the second generic argument to string | JSXElementConstructor<any>).
+// Only the first generic argument (the props type name) is captured.
+const REACT_ELEMENT_GENERIC = /(?:React\.)?ReactElement\s*<\s*([A-Za-z_$][\w$.]*)(?![\w$.])/g;
+// Svelte 5 typed snippets: `Snippet<[XProps]>`. The type argument is a tuple
+// listing render args; when a snippet is authored to render a nested
+// ComponentType, the single tuple element is that component's Props type.
+// We only match the single-element tuple form — non-props render args
+// (e.g. `Snippet<[year: number]>`) don't reference a ComponentType and are
+// filtered out below via propsToComponent lookup.
+const SVELTE_SNIPPET_GENERIC = /Snippet\s*<\s*\[\s*([A-Za-z_$][\w$.]*)\s*\]\s*>/g;
+export function extractAllowedComponentsFromTypeText(typeText, ctx) {
+    const found = new Set();
+    for (const re of [REACT_ELEMENT_GENERIC, SVELTE_SNIPPET_GENERIC]) {
+        re.lastIndex = 0;
+        let m;
+        while ((m = re.exec(typeText)) !== null) {
+            const propsTypeName = m[1];
+            const componentName = ctx.propsToComponent.get(propsTypeName);
+            if (componentName && ctx.componentNames.has(componentName)) {
+                found.add(componentName);
+            }
+        }
+    }
+    return [...found].sort();
+}
+const JSDOC_TAG = /@allowedComponents\s+([^\n*]+)/;
+export function extractAllowedComponentsFromJsdoc(jsdocText, componentNames) {
+    const m = JSDOC_TAG.exec(jsdocText);
+    if (!m)
+        return [];
+    const found = new Set();
+    for (const raw of m[1].split(',')) {
+        const name = raw.trim();
+        if (name && componentNames.has(name))
+            found.add(name);
+    }
+    return [...found].sort();
+}

package/dist/src/analyze/extract/svelte.js

@@ -6,6 +6,7 @@ import os from 'node:os';
 import { parse as parseSvelte } from 'svelte/compiler';
 import { Project, Node, ScriptTarget, ModuleKind, ts } from 'ts-morph';
 import { computeExtractionScore, deriveNeedsReview } from './scoring.js';
+import { extractAllowedComponentsFromTypeText } from './slot-allowed-components.js';
 const SVELTE_EXTRACT_CONCURRENCY = Number(process.env['EDS_EXTRACT_CONCURRENCY'] ?? 0) || os.cpus().length;
 export async function extractSvelteComponents(filePaths, onProgress, opts) {
     const svelteFiles = filePaths.filter((f) => f.endsWith('.svelte'));
@@ -42,11 +43,36 @@ export async function extractSvelteComponents(filePaths, onProgress, opts) {
     }
     await Promise.all(Array.from({ length: Math.min(SVELTE_EXTRACT_CONCURRENCY, svelteFiles.length) }, worker));
     const finalWarnings = await maybeRunResolveUnreachableRetry(components, warnings, retryContexts, opts);
+    // Post-pass: resolve $allowedComponents for snippet slots whose type text
+    // referenced Snippet<[XProps]>. Build a props-type-name → component-name map
+    // from the full run first so cross-file references resolve.
+    resolveAllowedComponents(components);
     return {
         components: components.sort((a, b) => a.name.localeCompare(b.name)),
         warnings: collapseUnresolvedTypeWarnings(finalWarnings),
     };
 }
+function resolveAllowedComponents(components) {
+    const propsToComponent = new Map();
+    const componentNames = new Set();
+    for (const c of components) {
+        componentNames.add(c.name);
+        if (c._propsTypeName)
+            propsToComponent.set(c._propsTypeName, c.name);
+    }
+    for (const c of components) {
+        for (const slot of c.slots) {
+            const raw = slot._rawTypeText;
+            if (raw) {
+                const found = extractAllowedComponentsFromTypeText(raw, { propsToComponent, componentNames });
+                if (found.length > 0)
+                    slot.allowedComponents = found;
+            }
+            delete slot._rawTypeText;
+        }
+        delete c._propsTypeName;
+    }
+}
 // ---------------------------------------------------------------------------
 // Resolve-unreachable retry pass (Approach B)
 //
@@ -548,12 +574,26 @@ async function extractFromSvelteFile(filePath, source) {
     if (mixedWarning) {
         warnings.push(`${name}: mixed Snippet and <slot> usage detected (${filePath}); preferring Snippet entries`);
     }
+    // Capture the props-type-name (if any) so the run-level post-pass can build
+    // a props-type → component-name map for $allowedComponents resolution
+    // (mirrors the React extractor's `_propsTypeName` mechanism).
+    let propsTypeNameCapture;
+    if (propsCall) {
+        const id = propsCall['id'];
+        const annotation = id?.['typeAnnotation']?.['typeAnnotation'];
+        if (annotation?.type === 'TSTypeReference') {
+            const tn = annotation['typeName']?.['name'];
+            if (tn && /^[A-Za-z_$][\w$]*$/.test(tn))
+                propsTypeNameCapture = tn;
+        }
+    }
     const component = {
         name,
         source: filePath,
         framework: 'svelte',
         props,
         slots,
+        ...(propsTypeNameCapture ? { _propsTypeName: propsTypeNameCapture } : {}),
     };
     // Score & flag review. Forward extraction-time reasons (e.g. props-type-unresolved)
     // so they count toward the confidence score AND surface in reviewReasons.
@@ -899,6 +939,7 @@ async function resolveViaTypeChecker(annotation, instance, moduleScript, filePat
             name,
             optional,
             typeText,
+            ...(declaredTypeText ? { declaredTypeText } : {}),
             isSnippet,
             ...(allowed ? { allowedValues: allowed } : {}),
             ...(description ? { description } : {}),
@@ -1120,6 +1161,19 @@ function renderType(typeNode) {
         case 'TSArrayType': {
             return `${renderType(typeNode['elementType'])}[]`;
         }
+        case 'TSTupleType': {
+            // Tuple element types can be plain (`T`) or labeled (`name: T` →
+            // TSNamedTupleMember). Render each element by drilling to the type.
+            const elements = typeNode['elementTypes'] ?? [];
+            const rendered = elements.map((el) => {
+                if (el.type === 'TSNamedTupleMember') {
+                    const inner = el['elementType'];
+                    return renderType(inner);
+                }
+                return renderType(el);
+            });
+            return `[${rendered.join(', ')}]`;
+        }
         case 'TSUnionType': {
             const members = typeNode['types'] ?? [];
             return members.map(renderType).join(' | ');
@@ -1204,11 +1258,19 @@ function extractFromDestructure(propsCall, _ctx, typeMembers, warnings, addition
         const typeMember = typeByName.get(name);
         if (typeMember?.isSnippet) {
             snippetNames.add(name);
-            snippetSlots.push({
+            const slot = {
                 name,
                 isDefault: name === 'children',
                 ...(typeMember.description ? { description: typeMember.description } : {}),
-            });
+            };
+            // Stash the author-facing type text so the run-level post-pass can
+            // resolve $allowedComponents from `Snippet<[XProps]>`.
+            // Prefer the author-facing `Snippet<[XProps]>` shape; the resolved
+            // typeText may be an expanded call signature that loses the tuple form.
+            const authorText = typeMember.declaredTypeText ?? typeMember.typeText;
+            if (authorText)
+                slot._rawTypeText = authorText;
+            snippetSlots.push(slot);
             continue;
         }
         const required = typeMember ? !typeMember.optional && !hasDefault : !hasDefault;
@@ -1253,11 +1315,15 @@ function extractFromTypeMembersOnly(typeMembers) {
     for (const m of typeMembers) {
         if (m.isSnippet) {
             snippetNames.add(m.name);
-            snippetSlots.push({
+            const slot = {
                 name: m.name,
                 isDefault: m.name === 'children',
                 ...(m.description ? { description: m.description } : {}),
-            });
+            };
+            const authorText = m.declaredTypeText ?? m.typeText;
+            if (authorText)
+                slot._rawTypeText = authorText;
+            snippetSlots.push(slot);
             continue;
         }
         const propDef = {

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

@@ -1,5 +1,15 @@
 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,9 +1,99 @@
-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 { 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);
@@ -14,56 +104,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) => {

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

@@ -59,6 +59,7 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
     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 +70,55 @@ export function computeComponentDiffLines(current, proposed, changeClassificatio
             lines.push({ key: `slot-${name}-rm`, color: 'red', text: `- slot: ${name}` });
         }
     }
+    // $allowedComponents diffs — for each slot present in both sides, or newly-added
+    // with a non-empty allowedComponents list.
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.12.3",
+  "version": "2.12.4-dev-build-262febd.0",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
     "svelte": "^5.56.4",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.12.3"
+    "@contentful/experience-design-system-types": "2.12.4-dev-build-262febd.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",