@contentful/experience-design-system-cli 2.7.1-dev-build-02830eb.0 → 2.7.1

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

@@ -1,7 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-// Pure render — input handled by inputToAction in App.
-export function FinalizeDialog({ accepted, rejected, needsReview, onConfirm: _onConfirm, onCancel: _onCancel, }) {
+import { useImmediateInput } from '../hooks/useImmediateInput.js';
+export function FinalizeDialog({ accepted, rejected, needsReview, onConfirm, onCancel, }) {
+    useImmediateInput((input, key) => {
+        if (input === 'y' || key.return) {
+            onConfirm();
+        }
+        else if (input === 'n' || key.escape) {
+            onCancel();
+        }
+    });
     const allResolved = needsReview === 0;
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", padding: 1, width: 58, children: [_jsx(Text, { bold: true, children: '─'.repeat(17) + ' Finalize ' + '─'.repeat(17) }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsxs(Text, { color: "green", children: [accepted, " accepted"] }), _jsx(Text, { children: " \u00B7 " }), _jsxs(Text, { color: "red", children: [rejected, " rejected"] }), _jsx(Text, { children: " \u00B7 " }), _jsxs(Text, { dimColor: true, children: [needsReview, " unresolved"] })] }), _jsx(Text, { children: " " }), !allResolved && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: '⚠ ' + needsReview + ' component' + (needsReview === 1 ? ' is' : 's are') + ' unresolved and will be' }), _jsx(Text, { color: "yellow", children: '  excluded from the output.' }), _jsx(Text, { children: " " })] })), _jsx(Text, { children: allResolved ? 'Save decisions and exit? All components resolved.' : 'Save decisions and exit?' }), _jsx(Text, { children: " " }), _jsx(Text, { children: '  [y / Enter]  Confirm    [n / Esc]  Cancel' })] }));
 }

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

@@ -3,5 +3,5 @@ type HelpOverlayProps = {
     mode: 'analyze' | 'validate' | 'review';
     onClose: () => void;
 };
-export declare function HelpOverlay({ mode, onClose: _onClose }: HelpOverlayProps): React.ReactElement;
+export declare function HelpOverlay({ mode, onClose }: HelpOverlayProps): React.ReactElement;
 export {};

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

@@ -1,6 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-// Pure render — input handled by inputToAction in App.
-export function HelpOverlay({ mode, onClose: _onClose }) {
+import { useImmediateInput } from '../hooks/useImmediateInput.js';
+export function HelpOverlay({ mode, onClose }) {
+    useImmediateInput((input, key) => {
+        if (input === '?' || key.escape) {
+            onClose();
+        }
+    });
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", padding: 1, width: 46, children: [_jsx(Text, { bold: true, children: '─'.repeat(18) + ' Help ' + '─'.repeat(18) }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Navigation" }), _jsx(Text, { children: '  ↑ / k / PgUp     Scroll up' }), _jsx(Text, { children: '  ↓ / j / PgDn     Scroll down' }), _jsx(Text, { children: '  g / Home         Jump to top' }), _jsx(Text, { children: '  G / End          Jump to bottom' }), mode === 'review' && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "[Review mode only]" }), _jsx(Text, { children: '  Tab              Toggle sidebar/detail' }), _jsx(Text, { children: '  a                Accept component' }), _jsx(Text, { children: '  r                Reject component' }), _jsx(Text, { children: '  e                Edit proposal' }), _jsx(Text, { children: '  s                Toggle source code' }), _jsx(Text, { children: '  A                Approve all' }), _jsx(Text, { children: '  F                Open finalize dialog' }), _jsx(Text, { children: '  Ctrl+S           Save draft' }), _jsx(Text, { children: '  Ctrl+Z           Undo' }), _jsx(Text, { children: '  Esc              Exit edit / close' })] })), _jsx(Text, { children: " " }), _jsx(Text, { children: '  ?                Close help' }), _jsx(Text, { children: '  q                Quit' })] }));
 }

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

@@ -1,13 +1,11 @@
 import React from 'react';
-import type { EditorState } from '../state.js';
 type JsonEditorProps = {
-    editorState: EditorState;
+    value: string;
     width: number;
     height: number;
+    onChange: (value: string) => void;
+    onSave: () => void;
+    onDiscard: () => void;
 };
-/**
- * Pure render component — no input handling, no hooks.
- * All state lives in the reducer; all keys are handled by inputToAction.
- */
-export declare function JsonEditor({ editorState, width, height }: JsonEditorProps): React.ReactElement;
+export declare function JsonEditor({ value, width, height, onChange, onSave, onDiscard }: JsonEditorProps): React.ReactElement;
 export {};

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

@@ -1,23 +1,154 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
-/**
- * Pure render component — no input handling, no hooks.
- * All state lives in the reducer; all keys are handled by inputToAction.
- */
-export function JsonEditor({ editorState, width, height }) {
-    const { cursor, scrollRow, validationError } = editorState;
-    const { lines, cursorRow, cursorCol } = cursor;
+import { useUndo } from '../hooks/useUndo.js';
+import { useImmediateInput } from '../hooks/useImmediateInput.js';
+export function JsonEditor({ value, width, height, onChange, onSave, onDiscard }) {
+    const undo = useUndo({
+        lines: value.split('\n'),
+        cursorRow: 0,
+        cursorCol: 0,
+    });
+    const [scrollRow, setScrollRow] = useState(0);
+    const [scrollCol] = useState(0);
+    const [validationError, setValidationError] = useState(null);
+    const [cursorVisible, setCursorVisible] = useState(true);
+    // Blinking cursor
+    useEffect(() => {
+        const interval = setInterval(() => setCursorVisible((v) => !v), 500);
+        return () => clearInterval(interval);
+    }, []);
+    const { lines, cursorRow, cursorCol } = undo.current;
+    // Keep scroll in sync with cursor
+    useEffect(() => {
+        if (cursorRow < scrollRow)
+            setScrollRow(cursorRow);
+        if (cursorRow >= scrollRow + height)
+            setScrollRow(cursorRow - height + 1);
+    }, [cursorRow, scrollRow, height]);
+    useImmediateInput((input, key) => {
+        const currentLines = undo.current.lines;
+        const currentRow = undo.current.cursorRow;
+        const currentCol = undo.current.cursorCol;
+        if (key.ctrl && input === 's') {
+            // Validate and save
+            const text = currentLines.join('\n');
+            try {
+                JSON.parse(text);
+                setValidationError(null);
+                onChange(text);
+                onSave();
+            }
+            catch (e) {
+                setValidationError(e instanceof Error ? e.message : String(e));
+            }
+            return;
+        }
+        if (key.escape) {
+            onDiscard();
+            return;
+        }
+        if (key.ctrl && input === 'z') {
+            undo.undo();
+            onChange(undo.current.lines.join('\n'));
+            return;
+        }
+        let newLines = [...currentLines];
+        let newRow = currentRow;
+        let newCol = currentCol;
+        if (key.return) {
+            const before = newLines[currentRow].slice(0, currentCol);
+            const after = newLines[currentRow].slice(currentCol);
+            newLines = [...newLines.slice(0, currentRow), before, after, ...newLines.slice(currentRow + 1)];
+            newRow = currentRow + 1;
+            newCol = 0;
+        }
+        else if (key.backspace || key.delete) {
+            if (key.backspace) {
+                if (currentCol > 0) {
+                    newLines[currentRow] = newLines[currentRow].slice(0, currentCol - 1) + newLines[currentRow].slice(currentCol);
+                    newCol = currentCol - 1;
+                }
+                else if (currentRow > 0) {
+                    const prevLen = newLines[currentRow - 1].length;
+                    newLines[currentRow - 1] = newLines[currentRow - 1] + newLines[currentRow];
+                    newLines = [...newLines.slice(0, currentRow), ...newLines.slice(currentRow + 1)];
+                    newRow = currentRow - 1;
+                    newCol = prevLen;
+                }
+            }
+            else {
+                // Delete key
+                if (currentCol < newLines[currentRow].length) {
+                    newLines[currentRow] = newLines[currentRow].slice(0, currentCol) + newLines[currentRow].slice(currentCol + 1);
+                }
+                else if (currentRow < newLines.length - 1) {
+                    newLines[currentRow] = newLines[currentRow] + newLines[currentRow + 1];
+                    newLines = [...newLines.slice(0, currentRow + 1), ...newLines.slice(currentRow + 2)];
+                }
+            }
+        }
+        else if (key.leftArrow) {
+            if (currentCol > 0) {
+                newCol = currentCol - 1;
+            }
+            else if (currentRow > 0) {
+                newRow = currentRow - 1;
+                newCol = newLines[currentRow - 1].length;
+            }
+        }
+        else if (key.rightArrow) {
+            if (currentCol < newLines[currentRow].length) {
+                newCol = currentCol + 1;
+            }
+            else if (currentRow < newLines.length - 1) {
+                newRow = currentRow + 1;
+                newCol = 0;
+            }
+        }
+        else if (key.upArrow) {
+            if (currentRow > 0) {
+                newRow = currentRow - 1;
+                newCol = Math.min(currentCol, newLines[currentRow - 1].length);
+            }
+        }
+        else if (key.downArrow) {
+            if (currentRow < newLines.length - 1) {
+                newRow = currentRow + 1;
+                newCol = Math.min(currentCol, newLines[currentRow + 1].length);
+            }
+        }
+        else if (input === '\x1b[H' || input === '\x1b[1~') {
+            // Home key
+            newCol = 0;
+        }
+        else if (input === '\x1b[F' || input === '\x1b[4~') {
+            // End key
+            newCol = newLines[currentRow].length;
+        }
+        else if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            // Printable character
+            newLines[currentRow] = newLines[currentRow].slice(0, currentCol) + input + newLines[currentRow].slice(currentCol);
+            newCol = currentCol + 1;
+        }
+        else {
+            return; // No change
+        }
+        undo.push({ lines: newLines, cursorRow: newRow, cursorCol: newCol });
+        onChange(newLines.join('\n'));
+    });
     const innerWidth = Math.max(1, width - 2);
     const visibleLines = lines.slice(scrollRow, scrollRow + height);
-    return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "white", children: [_jsx(Text, { bold: true, children: 'EDIT  [Ctrl+S save · Ctrl+Z undo · Esc discard]' }), visibleLines.map((line, displayRow) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "white", children: [_jsx(Text, { bold: true, children: 'EDIT [EDITING — Ctrl+S save · Esc discard]' }), visibleLines.map((line, displayRow) => {
                 const actualRow = displayRow + scrollRow;
-                const displayLine = line.slice(0, innerWidth);
+                const displayLine = line.slice(scrollCol, scrollCol + innerWidth);
                 if (actualRow === cursorRow) {
-                    const before = displayLine.slice(0, cursorCol);
-                    const cursorChar = displayLine[cursorCol] ?? ' ';
-                    const after = displayLine.slice(cursorCol + 1);
-                    return (_jsxs(Box, { children: [_jsx(Text, { children: before }), _jsx(Text, { inverse: true, children: cursorChar }), _jsx(Text, { children: after })] }, actualRow));
+                    // Render cursor on this line
+                    const beforeCursor = displayLine.slice(0, cursorCol - scrollCol);
+                    const cursorChar = displayLine[cursorCol - scrollCol] ?? ' ';
+                    const afterCursor = displayLine.slice(cursorCol - scrollCol + 1);
+                    return (_jsxs(Box, { children: [_jsx(Text, { children: beforeCursor }), _jsx(Text, { inverse: cursorVisible, children: cursorChar }), _jsx(Text, { children: afterCursor })] }, displayRow));
                 }
-                return _jsx(Text, { children: displayLine }, actualRow);
-            }), validationError && _jsx(Text, { color: "red", children: '✗ ' + validationError })] }));
+                return _jsx(Text, { children: displayLine }, displayRow);
+            }), validationError && _jsx(Text, { color: "red", children: '✗ Invalid JSON: ' + validationError })] }));
 }

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

@@ -4,5 +4,5 @@ type QuitDialogProps = {
     onConfirm: () => void;
     onCancel: () => void;
 };
-export declare function QuitDialog({ hasUnsavedDrafts, onConfirm: _onConfirm, onCancel: _onCancel, }: QuitDialogProps): React.ReactElement;
+export declare function QuitDialog({ hasUnsavedDrafts, onConfirm, onCancel }: QuitDialogProps): React.ReactElement;
 export {};

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

@@ -1,6 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-// Pure render — input handled by inputToAction in App.
-export function QuitDialog({ hasUnsavedDrafts, onConfirm: _onConfirm, onCancel: _onCancel, }) {
+import { useImmediateInput } from '../hooks/useImmediateInput.js';
+export function QuitDialog({ hasUnsavedDrafts, onConfirm, onCancel }) {
+    useImmediateInput((input, key) => {
+        if (input === 'y' || key.return) {
+            onConfirm();
+        }
+        else if (input === 'n' || key.escape) {
+            onCancel();
+        }
+    });
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", padding: 1, width: 50, children: [_jsx(Text, { bold: true, children: '─'.repeat(19) + ' Quit ' + '─'.repeat(19) }), _jsx(Text, { children: " " }), hasUnsavedDrafts ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "You have unsaved draft edits." }), _jsx(Text, { children: 'Session state is preserved — you can resume' }), _jsx(Text, { children: 'by running the same review command again.' })] })) : (_jsx(Text, { children: "Session is saved. Quit without finalizing?" })), _jsx(Text, { children: " " }), _jsx(Text, { children: '  [y / Enter]  Quit    [n / Esc]  Stay' })] }));
 }

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

@@ -6,6 +6,8 @@ type SidebarProps = {
     focused: boolean;
     scrollOffset: number;
     visibleCount: number;
+    onSelect: (id: string) => void;
+    onScrollChange: (offset: number) => void;
     collapsed?: boolean;
     width?: number;
 };

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

@@ -4,6 +4,8 @@ type StatusBarProps = {
     rejected: number;
     reviewed: number;
     needsReview: number;
+    onApproveAll: () => void;
+    onFinalize: () => void;
 };
 export declare function StatusBar({ accepted, rejected, reviewed, needsReview }: StatusBarProps): React.ReactElement;
 export {};

package/dist/src/analyze/select/tui/hooks/useImmediateInput.d.ts

@@ -19,11 +19,6 @@ type InputHandler = (input: string, key: Key) => void;
  * Like Ink's useInput, but uses useLayoutEffect so the listener is registered
  * synchronously after render. This allows stdin.write() calls in tests to work
  * immediately after render() without awaiting effects.
- *
- * Raw mode is NOT toggled here — it is managed once at the App level via
- * useRawMode. Toggling setRawMode per-hook caused brief raw-mode drops during
- * re-renders (e.g. when FieldEditor mounted alongside useKeymap), blanking the
- * terminal.
  */
 export declare function useImmediateInput(handler: InputHandler): void;
 export {};

package/dist/src/analyze/select/tui/hooks/useImmediateInput.js

@@ -47,17 +47,13 @@ function parseInput(data) {
  * Like Ink's useInput, but uses useLayoutEffect so the listener is registered
  * synchronously after render. This allows stdin.write() calls in tests to work
  * immediately after render() without awaiting effects.
- *
- * Raw mode is NOT toggled here — it is managed once at the App level via
- * useRawMode. Toggling setRawMode per-hook caused brief raw-mode drops during
- * re-renders (e.g. when FieldEditor mounted alongside useKeymap), blanking the
- * terminal.
  */
 export function useImmediateInput(handler) {
-    const { stdin } = useStdin();
+    const { stdin, setRawMode } = useStdin();
     const handlerRef = useRef(handler);
     handlerRef.current = handler;
     useLayoutEffect(() => {
+        setRawMode(true);
         const handleData = (data) => {
             const str = Buffer.isBuffer(data) ? data.toString('utf8') : data;
             const { input, key } = parseInput(str);
@@ -66,6 +62,7 @@ export function useImmediateInput(handler) {
         stdin.on('data', handleData);
         return () => {
             stdin.off('data', handleData);
+            setRawMode(false);
         };
-    }, []); // Register once on mount. Handler is always fresh via handlerRef — no re-registration needed.
+    }, [stdin, setRawMode]);
 }

package/dist/src/analyze/select/tui/hooks/useKeymap.d.ts

@@ -1 +1,24 @@
+type KeymapContext = {
+    sidebarFocused: boolean;
+    editMode: boolean;
+    dialogOpen: boolean;
+    disabled: boolean;
+};
+type KeymapHandlers = {
+    onSidebarUp: () => void;
+    onSidebarDown: () => void;
+    onSidebarSelect: () => void;
+    onAccept: () => void;
+    onReject: () => void;
+    onEnterEditMode: () => void;
+    onToggleSource: () => void;
+    onScrollUp: () => void;
+    onScrollDown: () => void;
+    onToggleFocus: () => void;
+    onApproveAll: () => void;
+    onFinalize: () => void;
+    onQuit: () => void;
+    onToggleHelp: () => void;
+};
+export declare function useKeymap(context: KeymapContext, handlers: KeymapHandlers): void;
 export {};

package/dist/src/analyze/select/tui/hooks/useKeymap.js

@@ -1 +1,67 @@
-export {};
+import { useImmediateInput } from './useImmediateInput.js';
+export function useKeymap(context, handlers) {
+    useImmediateInput((input, key) => {
+        if (context.disabled)
+            return;
+        if (context.dialogOpen)
+            return;
+        if (context.editMode)
+            return;
+        if (input === 'q') {
+            handlers.onQuit();
+            return;
+        }
+        if (input === '?') {
+            handlers.onToggleHelp();
+            return;
+        }
+        if (key.tab) {
+            handlers.onToggleFocus();
+            return;
+        }
+        if (input === 'A') {
+            handlers.onApproveAll();
+            return;
+        }
+        if (input === 'F') {
+            handlers.onFinalize();
+            return;
+        }
+        // a/r/e/s work regardless of sidebar focus
+        if (input === 'a') {
+            handlers.onAccept();
+            return;
+        }
+        if (input === 'r') {
+            handlers.onReject();
+            return;
+        }
+        if (input === 'e') {
+            handlers.onEnterEditMode();
+            return;
+        }
+        if (input === 's') {
+            handlers.onToggleSource();
+            return;
+        }
+        if (context.sidebarFocused) {
+            if (key.upArrow || input === 'k') {
+                handlers.onSidebarUp();
+            }
+            else if (key.downArrow || input === 'j') {
+                handlers.onSidebarDown();
+            }
+            else if (key.return) {
+                handlers.onSidebarSelect();
+            }
+        }
+        else {
+            if (key.upArrow || input === 'k') {
+                handlers.onScrollUp();
+            }
+            else if (key.downArrow || input === 'j') {
+                handlers.onScrollDown();
+            }
+        }
+    });
+}

package/dist/src/analyze/select/tui/hooks/useUndo.js

@@ -1,20 +1,26 @@
 import { useState } from 'react';
-// Single-state implementation — push and undo are atomic single setState calls,
-// eliminating the double-render that caused flash in the JsonEditor.
 export function useUndo(initial, maxSize = 50) {
-    const [state, setState] = useState({ stack: [], current: initial });
+    const [stack, setStack] = useState([]);
+    const [current, setCurrent] = useState(initial);
     return {
-        current: state.current,
-        push: (next) => setState(({ stack, current }) => {
-            const newStack = [...stack, current];
-            return { stack: newStack.length > maxSize ? newStack.slice(1) : newStack, current: next };
-        }),
-        undo: () => setState(({ stack, current }) => {
-            if (stack.length === 0)
-                return { stack, current };
-            return { stack: stack.slice(0, -1), current: stack[stack.length - 1] };
-        }),
-        canUndo: state.stack.length > 0,
-        clear: () => setState(({ current }) => ({ stack: [], current })),
+        current,
+        push: (next) => {
+            setStack((prev) => {
+                const newStack = [...prev, current];
+                return newStack.length > maxSize ? newStack.slice(1) : newStack;
+            });
+            setCurrent(next);
+        },
+        undo: () => {
+            setStack((prev) => {
+                if (prev.length === 0)
+                    return prev;
+                const newStack = prev.slice(0, -1);
+                setCurrent(prev[prev.length - 1]);
+                return newStack;
+            });
+        },
+        canUndo: stack.length > 0,
+        clear: () => setStack([]),
     };
 }

package/dist/src/analyze/tui/AnalyzeView.js

@@ -3,14 +3,12 @@ import { useState } from 'react';
 import { Box, Text, useStdout } from 'ink';
 import { TopBar } from '../select/tui/components/TopBar.js';
 import { useImmediateInput } from '../select/tui/hooks/useImmediateInput.js';
-import { useRawMode } from '../select/tui/hooks/useRawMode.js';
 function truncateName(name, maxLen = 30) {
     if (name.length <= maxLen)
         return name;
     return name.slice(0, maxLen - 1) + '…';
 }
 export function AnalyzeView({ result, onExit }) {
-    useRawMode();
     const [scrollOffset, setScrollOffset] = useState(0);
     const { stdout } = useStdout();
     // Header lines: TopBar(1) + summary(3) + blank(1) + dividers+header(3) + blank(1) + footer(1) + footer-bar(1) = ~12

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

@@ -8,7 +8,6 @@ import { homedir, tmpdir } from 'node:os';
 import { fileURLToPath } from 'node:url';
 import { execFile, spawn } from 'node:child_process';
 import { TopBar } from '../../analyze/select/tui/components/TopBar.js';
-import { useRawMode } from '../../analyze/select/tui/hooks/useRawMode.js';
 import { WelcomeStep } from './steps/WelcomeStep.js';
 import { PathValidationStep } from './steps/PathValidationStep.js';
 import { RunningStep } from './steps/RunningStep.js';
@@ -45,7 +44,6 @@ function logStep(entry) {
 export function WizardApp({ initialSpaceId = '', initialEnvironmentId = 'master', initialCmaToken = '', initialHost, initialAgent, initialProjectPath, host, } = {}) {
     const defaultConfiguredHost = toConfiguredHost(host || process.env['EDS_HOST']) ?? DEFAULT_CONFIGURED_HOST;
     const resolveWizardHost = (hostValue) => hostValue || defaultConfiguredHost;
-    useRawMode();
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns ?? 80;
     const logInit = useRef(false);

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

@@ -8,7 +8,6 @@ import { StatusBar } from '../../../analyze/select/tui/components/StatusBar.js';
 import { FinalizeDialog } from '../../../analyze/select/tui/components/FinalizeDialog.js';
 import { QuitDialog } from '../../../analyze/select/tui/components/QuitDialog.js';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
-import { computeScrollOffset } from '../../../analyze/select/tui/utils.js';
 import { openPipelineDb, loadCDFComponents, storeCDFComponents } from '../../../session/db.js';
 const VISIBLE_COUNT = 20;
 const PANEL_HEIGHT = 22;
@@ -162,7 +161,7 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, }) {
                 const newIdx = Math.min(components.length - 1, selectedIdx + 1);
                 setSelectedIdx(newIdx);
                 setJsonScrollOffset(0);
-                setSidebarScrollOffset((prev) => computeScrollOffset(newIdx, prev, VISIBLE_COUNT));
+                setSidebarScrollOffset((prev) => (newIdx >= prev + VISIBLE_COUNT ? newIdx - VISIBLE_COUNT + 1 : prev));
             }
         }
         else {
@@ -197,7 +196,15 @@ export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, }) {
     const needsReview = components.filter((c) => c.status === 'needs-review').length;
     const propCount = selected ? Object.keys(selected.entry.$properties).length : 0;
     const slotCount = selected?.entry.$slots ? Object.keys(selected.entry.$slots).length : 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: selected.key }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [propCount, " prop", propCount !== 1 ? 's' : '', slotCount > 0 ? ` · ${slotCount} slot${slotCount !== 1 ? 's' : ''}` : '', '  ', sidebarFocused ? '[Tab] focus panel' : '[Tab] focus list'] })] }), editMode ? (_jsx(FieldEditor, { value: draftValue || selectedJson, width: panelWidth, height: PANEL_HEIGHT, onChange: setDraftValue, onSave: handleEditSave, onDiscard: handleEditDiscard })) : (_jsx(JsonPanel, { label: "GENERATED DEFINITION", value: selectedJson, scrollOffset: jsonScrollOffset, width: panelWidth, height: PANEL_HEIGHT, active: !sidebarFocused })), saveError && _jsx(Text, { color: "red", children: '✗ ' + saveError }), _jsx(Text, { dimColor: true, children: editMode
+    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
+                            const idx = components.findIndex((c) => c.key === id);
+                            if (idx >= 0) {
+                                setSelectedIdx(idx);
+                                setJsonScrollOffset(0);
+                            }
+                        }, onScrollChange: setSidebarScrollOffset, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: selected.key }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [propCount, " prop", propCount !== 1 ? 's' : '', slotCount > 0 ? ` · ${slotCount} slot${slotCount !== 1 ? 's' : ''}` : '', '  ', sidebarFocused ? '[Tab] focus panel' : '[Tab] focus list'] })] }), editMode ? (_jsx(FieldEditor, { value: draftValue || selectedJson, width: panelWidth, height: PANEL_HEIGHT, onChange: setDraftValue, onSave: handleEditSave, onDiscard: handleEditDiscard })) : (_jsx(JsonPanel, { label: "GENERATED DEFINITION", value: selectedJson, scrollOffset: jsonScrollOffset, width: panelWidth, height: PANEL_HEIGHT, active: !sidebarFocused })), saveError && _jsx(Text, { color: "red", children: '✗ ' + saveError }), _jsx(Text, { dimColor: true, children: editMode
                                         ? '  [Ctrl+S] save  [Esc] discard'
-                                        : '  [a] accept  [r] reject  [e] edit  [A] accept all  [F] finalize  [Tab] toggle focus  [q] quit' })] })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), !dialogOpen && _jsx(StatusBar, { accepted: accepted, rejected: rejected, reviewed: 0, needsReview: needsReview })] }));
+                                        : '  [a] accept  [r] reject  [e] edit  [A] accept all  [F] finalize  [Tab] toggle focus  [q] quit' })] })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), !dialogOpen && (_jsx(StatusBar, { accepted: accepted, rejected: rejected, reviewed: 0, needsReview: needsReview, onApproveAll: () => {
+                    setComponents((prev) => prev.map((c) => (c.status === 'needs-review' ? { ...c, status: 'accepted' } : c)));
+                }, onFinalize: () => setShowFinalize(true) }))] }));
 }

package/dist/src/print/validate/tui/ValidateView.js

@@ -3,9 +3,7 @@ import { useState } from 'react';
 import { Box, Text } from 'ink';
 import { TopBar } from '../../../analyze/select/tui/components/TopBar.js';
 import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
-import { useRawMode } from '../../../analyze/select/tui/hooks/useRawMode.js';
 export function ValidateView({ results, onExit }) {
-    useRawMode();
     const [scrollOffset, setScrollOffset] = useState(0);
     const allValid = results.every((r) => r.valid);
     useImmediateInput((input, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experience-design-system-cli",
-  "version": "2.7.1-dev-build-02830eb.0",
+  "version": "2.7.1",
   "description": "Contentful Experiences design system import CLI",
   "license": "MIT",
   "type": "module",
@@ -36,7 +36,7 @@
     "react-dom": "^18.3.1",
     "ts-morph": "^27.0.2",
     "typescript": "^5.9.3",
-    "@contentful/experience-design-system-types": "2.7.1-dev-build-02830eb.0"
+    "@contentful/experience-design-system-types": "2.7.1"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",

package/dist/src/analyze/select/tui/hooks/useRawMode.d.ts

@@ -1,6 +0,0 @@
-/**
- * Enables raw terminal mode for the lifetime of the component.
- * Call once at the root of each top-level TUI component.
- * useImmediateInput does NOT manage raw mode — this hook does.
- */
-export declare function useRawMode(): void;

package/dist/src/analyze/select/tui/hooks/useRawMode.js

@@ -1,16 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { useStdin } from 'ink';
-/**
- * Enables raw terminal mode for the lifetime of the component.
- * Call once at the root of each top-level TUI component.
- * useImmediateInput does NOT manage raw mode — this hook does.
- */
-export function useRawMode() {
-    const { setRawMode } = useStdin();
-    useLayoutEffect(() => {
-        setRawMode(true);
-        return () => {
-            setRawMode(false);
-        };
-    }, [setRawMode]);
-}

package/dist/src/analyze/select/tui/hooks/useSideEffects.d.ts

@@ -1,17 +0,0 @@
-import type { AppState, AppAction } from '../state.js';
-import type { ReviewSessionSnapshot } from '../../types.js';
-type Services = {
-    sessionId: string;
-    saveState: (session: ReviewSessionSnapshot) => Promise<void>;
-    appendEvent: (event: {
-        type: string;
-        payload: Record<string, unknown>;
-    }) => Promise<void>;
-};
-type Dispatch = (action: AppAction) => void;
-/**
- * All async side effects in one place.
- * Detects transitions by comparing state to prevState — no pending* counter signals needed.
- */
-export declare function useSideEffects(state: AppState, dispatch: Dispatch, services: Services): void;
-export {};