@contentful/experience-design-system-cli 2.2.1

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type RunningStepProps = {
+    stepNumber: number;
+    totalSteps: number;
+    title: string;
+    description: string;
+    detail?: string;
+};
+export declare function RunningStep({ stepNumber, totalSteps, title, description, detail, }: RunningStepProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export function RunningStep({ stepNumber, totalSteps, title, description, detail, }) {
+    const [frame, setFrame] = useState(0);
+    const [elapsed, setElapsed] = useState(0);
+    useEffect(() => {
+        const spinner = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), 80);
+        const timer = setInterval(() => setElapsed((s) => s + 1), 1000);
+        return () => {
+            clearInterval(spinner);
+            clearInterval(timer);
+        };
+    }, []);
+    const mins = Math.floor(elapsed / 60);
+    const secs = elapsed % 60;
+    const elapsedStr = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+    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: title })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) })] }), _jsx(Text, { children: description }), _jsxs(Box, { gap: 1, marginTop: 1, children: [_jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] }), _jsx(Text, { dimColor: true, children: detail ?? 'Running...' })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Elapsed: ", elapsedStr] }) })] }));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type TokenInputStepProps = {
+    onConfirm: (rawTokensPath: string) => void;
+    onSkip: () => void;
+    onQuit: () => void;
+};
+export declare function TokenInputStep({ onConfirm, onSkip, onQuit }: TokenInputStepProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { statSync } from 'node:fs';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+import { normalizePath } from '../../path-utils.js';
+export function TokenInputStep({ onConfirm, onSkip, onQuit }) {
+    const [inputValue, setInputValue] = useState('');
+    const [cursorVisible, setCursorVisible] = useState(true);
+    const [error, setError] = useState(null);
+    const [resolvedPath, setResolvedPath] = useState(null);
+    useEffect(() => {
+        const interval = setInterval(() => setCursorVisible((v) => !v), 500);
+        return () => clearInterval(interval);
+    }, []);
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            const trimmed = inputValue.trim();
+            if (!trimmed) {
+                onSkip();
+                return;
+            }
+            const normalized = normalizePath(trimmed);
+            let stat;
+            try {
+                stat = statSync(normalized);
+            }
+            catch {
+                setError(`Path not found: ${normalized}`);
+                setResolvedPath(normalized);
+                return;
+            }
+            if (stat.isDirectory()) {
+                setError(`That's a directory — provide a path to a token file (e.g. tokens.json), not a folder.`);
+                setResolvedPath(normalized);
+                return;
+            }
+            if (!stat.isFile()) {
+                setError(`Not a regular file: ${normalized}`);
+                setResolvedPath(normalized);
+                return;
+            }
+            setError(null);
+            setResolvedPath(normalized);
+            onConfirm(normalized);
+            return;
+        }
+        if (input === 's') {
+            onSkip();
+            return;
+        }
+        if (key.escape || input === 'q') {
+            onQuit();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setInputValue((v) => v.slice(0, -1));
+            setError(null);
+            setResolvedPath(null);
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setInputValue((v) => v + input);
+            setError(null);
+            setResolvedPath(null);
+        }
+    });
+    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] Confirm path" }), _jsx(Text, { dimColor: true, children: "[s] Skip tokens" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type WelcomeStepProps = {
+    onContinue: (projectPath: string) => void;
+    onQuit: () => void;
+};
+export declare function WelcomeStep({ onContinue, onQuit }: WelcomeStepProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+export function WelcomeStep({ onContinue, onQuit }) {
+    const [inputValue, setInputValue] = useState('');
+    const [cursorVisible, setCursorVisible] = useState(true);
+    useEffect(() => {
+        const interval = setInterval(() => setCursorVisible((v) => !v), 500);
+        return () => clearInterval(interval);
+    }, []);
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            const trimmed = inputValue.trim();
+            if (trimmed)
+                onContinue(trimmed);
+            return;
+        }
+        if (key.escape || input === 'q') {
+            onQuit();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setInputValue((v) => v.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setInputValue((v) => v + input);
+        }
+    });
+    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" })] })] }));
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
+type WizardPreviewStepProps = {
+    preview: ServerPreviewResponse;
+    spaceId: string;
+    environmentId: string;
+    stepNumber: number;
+    totalSteps: number;
+    onConfirm: (acknowledge: boolean) => void;
+    onEdit?: () => void;
+    onSaveFiles?: () => void;
+    onQuit: () => void;
+};
+export declare function WizardPreviewStep({ preview, spaceId, environmentId, stepNumber, totalSteps, onConfirm, onEdit, onSaveFiles, onQuit, }: WizardPreviewStepProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,121 @@
+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';
+export function WizardPreviewStep({ preview, spaceId, environmentId, stepNumber, totalSteps, onConfirm, onEdit, onSaveFiles, onQuit, }) {
+    const breakingWithImpact = hasBreakingChangesWithImpact(preview);
+    const [diffExpanded, setDiffExpanded] = useState(false);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const { stdout } = useStdout();
+    const terminalRows = stdout?.rows ?? 40;
+    const viewportHeight = Math.max(terminalRows - 14, 10);
+    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;
+    }, [diffExpanded, preview]);
+    const maxScroll = Math.max(0, allDiffLines.length - viewportHeight);
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            onConfirm(breakingWithImpact);
+            return;
+        }
+        if (input === 'd' || input === 'D') {
+            setDiffExpanded((prev) => !prev);
+            setScrollOffset(0);
+            return;
+        }
+        if (diffExpanded) {
+            if (input === 'j' || key.downArrow) {
+                setScrollOffset((prev) => Math.min(prev + 1, maxScroll));
+                return;
+            }
+            if (input === 'k' || key.upArrow) {
+                setScrollOffset((prev) => Math.max(prev - 1, 0));
+                return;
+            }
+            if (input === 'f') {
+                setScrollOffset((prev) => Math.min(prev + viewportHeight, maxScroll));
+                return;
+            }
+            if (input === 'b') {
+                setScrollOffset((prev) => Math.max(prev - viewportHeight, 0));
+                return;
+            }
+        }
+        if ((input === 'e' || input === 'E') && onEdit) {
+            onEdit();
+            return;
+        }
+        if (input === 's' && onSaveFiles) {
+            onSaveFiles();
+            return;
+        }
+        if (input === 'q' || key.escape) {
+            onQuit();
+            return;
+        }
+    });
+    const { components, tokens } = preview;
+    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) => {
+                                        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) => {
+                                        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" })] })] }));
+}

package/dist/src/import/tui/steps/preview-diff.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeClassification, ComponentTypeSummary, PropertySummary } from '@contentful/experience-design-system-types';
+export interface PropertyDiffLine {
+    key: string;
+    color: 'green' | 'red' | 'yellow';
+    text: string;
+}
+export declare function computeComponentDiffLines(current: ComponentTypeSummary, proposed: Record<string, unknown>, changeClassification?: ChangeClassification): PropertyDiffLine[];
+export declare function diffProperty(name: string, old: PropertySummary, newDef: Record<string, unknown>): PropertyDiffLine[];
+export declare function formatOldProp(prop: PropertySummary): string;
+export declare function formatPropDef(def: Record<string, unknown>): string;

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

@@ -0,0 +1,132 @@
+export function computeComponentDiffLines(current, proposed, changeClassification) {
+    const lines = [];
+    // Use fullProperties keys as authoritative server state (includes state props, not just content+design)
+    const currentProps = current.fullProperties
+        ? new Set(Object.keys(current.fullProperties))
+        : new Set([...current.contentProperties, ...current.designProperties]);
+    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]) {
+                lines.push({ key: `${name}-rm`, color: 'red', text: `- ${name}: ${formatOldProp(oldProps[name])}` });
+            }
+            else {
+                const cat = current.contentProperties.includes(name) ? 'content' : 'design';
+                lines.push({ key: `${name}-rm`, color: 'red', text: `- ${name} (${cat})` });
+            }
+        }
+    }
+    // Modified props — compare old vs new definitions
+    const handledProps = new Set();
+    for (const name of [...currentProps].sort()) {
+        if (!proposedProps.has(name))
+            continue;
+        const newDef = proposedProperties[name];
+        const oldDef = oldProps?.[name];
+        if (!oldDef)
+            continue;
+        const diffs = diffProperty(name, oldDef, newDef);
+        if (diffs.length > 0) {
+            handledProps.add(name);
+            for (const d of diffs)
+                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 (!currentProps.has(bc.propertyId) || !proposedProps.has(bc.propertyId))
+                continue;
+            if (handledProps.has(bc.propertyId))
+                continue;
+            handledProps.add(bc.propertyId);
+            const def = proposedProperties[bc.propertyId];
+            lines.push({ key: `${bc.propertyId}-old`, color: 'red', text: `- ${bc.propertyId}: ${bc.reason}` });
+            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));
+    for (const name of [...proposedSlotNames].sort()) {
+        if (!currentSlots.has(name)) {
+            lines.push({ key: `slot-${name}-add`, color: 'green', text: `+ slot: ${name}` });
+        }
+    }
+    for (const name of [...currentSlots].sort()) {
+        if (!proposedSlotNames.has(name)) {
+            lines.push({ key: `slot-${name}-rm`, color: 'red', text: `- slot: ${name}` });
+        }
+    }
+    return lines;
+}
+function normalizeType(type) {
+    switch (type.toLowerCase()) {
+        case 'boolean':
+            return 'boolean';
+        case 'number':
+            return 'number';
+        case 'symbol':
+        case 'enum':
+            return 'symbol';
+        case 'string':
+        case 'text':
+        case 'richtext':
+        case 'media':
+            return 'string';
+        default:
+            return type.toLowerCase();
+    }
+}
+export function diffProperty(name, old, newDef) {
+    const diffs = [];
+    const newType = newDef['$type'] ?? '';
+    const newCategory = newDef['$category'] ?? '';
+    const newRequired = newDef['$required'] === true;
+    const newDefault = newDef['$default'];
+    const typeChanged = old.type !== '' && newType !== '' && normalizeType(old.type) !== normalizeType(newType);
+    const categoryChanged = old.category !== newCategory;
+    const requiredChanged = old.required !== newRequired;
+    const defaultChanged = JSON.stringify(old.default) !== JSON.stringify(newDefault);
+    if (!typeChanged && !categoryChanged && !requiredChanged && !defaultChanged)
+        return [];
+    diffs.push({ key: `${name}-old`, color: 'red', text: `- ${name}: ${formatOldProp(old)}` });
+    diffs.push({ key: `${name}-new`, color: 'green', text: `+ ${name}: ${formatPropDef(newDef)}` });
+    return diffs;
+}
+export function formatOldProp(prop) {
+    const parts = [];
+    if (prop.type)
+        parts.push(prop.type);
+    if (prop.category)
+        parts.push(prop.category);
+    parts.push(prop.required ? 'required' : 'optional');
+    if (prop.default !== undefined)
+        parts.push(`default=${JSON.stringify(prop.default)}`);
+    return parts.join(', ');
+}
+export function formatPropDef(def) {
+    const parts = [];
+    if (def['$type'])
+        parts.push(def['$type']);
+    if (def['$category'])
+        parts.push(def['$category']);
+    if (def['$required'] === true)
+        parts.push('required');
+    else
+        parts.push('optional');
+    if (def['$default'] !== undefined)
+        parts.push(`default=${JSON.stringify(def['$default'])}`);
+    return parts.join(', ');
+}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.js

@@ -0,0 +1,2 @@
+import { createProgram } from './program.js';
+await createProgram().parseAsync();

package/dist/src/output/format.d.ts

@@ -0,0 +1,23 @@
+export declare const c: {
+    green: (s: string) => string;
+    red: (s: string) => string;
+    cyan: (s: string) => string;
+    yellow: (s: string) => string;
+    dim: (s: string) => string;
+    bold: (s: string) => string;
+};
+/**
+ * Processes streaming agent output line by line.
+ *
+ * Tool-call JSON lines are translated into human-readable summaries.
+ * Prose (reasoning text) is shown only when verbose=true.
+ */
+export declare class OutputFormatter {
+    private _buf;
+    private _verbose;
+    private _write;
+    constructor(verbose: boolean, write?: (s: string) => void);
+    push(chunk: string): void;
+    flush(): void;
+    private _processLine;
+}

package/dist/src/output/format.js

@@ -0,0 +1,110 @@
+// Color support — checked once at module load.
+// Honors NO_COLOR (https://no-color.org) and FORCE_COLOR (set by orchestrator for non-TTY subprocesses).
+function detectColors() {
+    if (process.env['NO_COLOR'] !== undefined)
+        return false;
+    if (process.env['FORCE_COLOR'] !== undefined)
+        return true;
+    return process.stderr.isTTY === true;
+}
+const col = detectColors();
+export const c = {
+    green: (s) => (col ? `\x1b[32m${s}\x1b[0m` : s),
+    red: (s) => (col ? `\x1b[31m${s}\x1b[0m` : s),
+    cyan: (s) => (col ? `\x1b[36m${s}\x1b[0m` : s),
+    yellow: (s) => (col ? `\x1b[33m${s}\x1b[0m` : s),
+    dim: (s) => (col ? `\x1b[2m${s}\x1b[0m` : s),
+    bold: (s) => (col ? `\x1b[1m${s}\x1b[0m` : s),
+};
+// Formats a single parsed tool-call object into a human-readable line, or returns null to suppress it.
+function formatToolCall(obj) {
+    switch (obj['tool']) {
+        case 'classify_component': {
+            const desc = typeof obj['description'] === 'string' ? obj['description'] : null;
+            return desc ? `    ${c.dim('→')}  ${c.dim(desc)}` : null;
+        }
+        case 'classify_prop': {
+            const prop = String(obj['prop'] ?? '');
+            const type = String(obj['cdf_type'] ?? '');
+            const cat = String(obj['cdf_category'] ?? '');
+            return `    ${c.green('+')}  ${prop}  ${c.dim(`${type}  ${cat}`)}`;
+        }
+        case 'exclude_prop': {
+            const prop = String(obj['prop'] ?? '');
+            const reason = typeof obj['reason'] === 'string' ? obj['reason'] : '';
+            return `    ${c.dim('–')}  ${prop}  ${c.dim(reason)}`;
+        }
+        case 'classify_slot': {
+            const slot = String(obj['slot'] ?? '');
+            const desc = typeof obj['description'] === 'string' ? obj['description'] : '';
+            const req = obj['required'] === true ? c.dim(' required') : '';
+            return `    ${c.cyan('◈')}  ${slot}${req}  ${c.dim(desc)}`;
+        }
+        case 'select_component': {
+            const name = String(obj['name'] ?? '');
+            const reason = typeof obj['reason'] === 'string' ? obj['reason'] : '';
+            return `    ${c.green('+')}  ${name}  ${c.dim(reason)}`;
+        }
+        case 'reject_component': {
+            const name = String(obj['name'] ?? '');
+            const reason = typeof obj['reason'] === 'string' ? obj['reason'] : '';
+            return `    ${c.dim('–')}  ${name}  ${c.dim(reason)}`;
+        }
+        default:
+            return null;
+    }
+}
+/**
+ * Processes streaming agent output line by line.
+ *
+ * Tool-call JSON lines are translated into human-readable summaries.
+ * Prose (reasoning text) is shown only when verbose=true.
+ */
+export class OutputFormatter {
+    _buf = '';
+    _verbose;
+    _write;
+    constructor(verbose, write = (s) => process.stderr.write(s)) {
+        this._verbose = verbose;
+        this._write = write;
+    }
+    push(chunk) {
+        this._buf += chunk;
+        // Process all complete lines; keep any trailing partial line in the buffer.
+        const nl = this._buf.lastIndexOf('\n');
+        if (nl === -1)
+            return;
+        const complete = this._buf.slice(0, nl + 1);
+        this._buf = this._buf.slice(nl + 1);
+        for (const line of complete.split('\n')) {
+            this._processLine(line);
+        }
+    }
+    flush() {
+        if (this._buf.trim())
+            this._processLine(this._buf);
+        this._buf = '';
+    }
+    _processLine(line) {
+        const trimmed = line.trim();
+        if (!trimmed)
+            return;
+        if (trimmed.startsWith('{')) {
+            try {
+                const obj = JSON.parse(trimmed);
+                if (typeof obj['tool'] === 'string') {
+                    const formatted = formatToolCall(obj);
+                    if (formatted !== null)
+                        this._write(formatted + '\n');
+                    return;
+                }
+            }
+            catch {
+                // not JSON — fall through to prose handling
+            }
+        }
+        if (this._verbose) {
+            this._write(c.dim('    ' + trimmed) + '\n');
+        }
+    }
+}

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

@@ -0,0 +1,2 @@
+import type { Command } from 'commander';
+export declare function registerPrintCommand(program: Command): void;