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

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

@@ -1,15 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-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();
-        }
-    });
+// Pure render — input handled by inputToAction in App.
+export function FinalizeDialog({ accepted, rejected, needsReview, onConfirm: _onConfirm, onCancel: _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 }: HelpOverlayProps): React.ReactElement;
+export declare function HelpOverlay({ mode, onClose: _onClose }: HelpOverlayProps): React.ReactElement;
 export {};

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

@@ -1,11 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { useImmediateInput } from '../hooks/useImmediateInput.js';
-export function HelpOverlay({ mode, onClose }) {
-    useImmediateInput((input, key) => {
-        if (input === '?' || key.escape) {
-            onClose();
-        }
-    });
+// Pure render — input handled by inputToAction in App.
+export function HelpOverlay({ mode, onClose: _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,11 +1,13 @@
 import React from 'react';
+import type { EditorState } from '../state.js';
 type JsonEditorProps = {
-    value: string;
+    editorState: EditorState;
     width: number;
     height: number;
-    onChange: (value: string) => void;
-    onSave: () => void;
-    onDiscard: () => void;
 };
-export declare function JsonEditor({ value, width, height, onChange, onSave, onDiscard }: JsonEditorProps): React.ReactElement;
+/**
+ * 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 {};

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

@@ -1,154 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
-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'));
-    });
+/**
+ * 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;
     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 [EDITING — Ctrl+S save · Esc discard]' }), visibleLines.map((line, displayRow) => {
+    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) => {
                 const actualRow = displayRow + scrollRow;
-                const displayLine = line.slice(scrollCol, scrollCol + innerWidth);
+                const displayLine = line.slice(0, innerWidth);
                 if (actualRow === cursorRow) {
-                    // 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));
+                    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));
                 }
-                return _jsx(Text, { children: displayLine }, displayRow);
-            }), validationError && _jsx(Text, { color: "red", children: '✗ Invalid JSON: ' + validationError })] }));
+                return _jsx(Text, { children: displayLine }, actualRow);
+            }), validationError && _jsx(Text, { color: "red", children: '✗ ' + 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, onCancel }: QuitDialogProps): React.ReactElement;
+export declare function QuitDialog({ hasUnsavedDrafts, onConfirm: _onConfirm, onCancel: _onCancel, }: QuitDialogProps): React.ReactElement;
 export {};

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

@@ -1,14 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-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();
-        }
-    });
+// Pure render — input handled by inputToAction in App.
+export function QuitDialog({ hasUnsavedDrafts, onConfirm: _onConfirm, onCancel: _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,8 +6,6 @@ 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,8 +4,6 @@ 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,6 +19,11 @@ 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,13 +47,17 @@ 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, setRawMode } = useStdin();
+    const { stdin } = 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);
@@ -62,7 +66,6 @@ export function useImmediateInput(handler) {
         stdin.on('data', handleData);
         return () => {
             stdin.off('data', handleData);
-            setRawMode(false);
         };
-    }, [stdin, setRawMode]);
+    }, []); // Register once on mount. Handler is always fresh via handlerRef — no re-registration needed.
 }

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

@@ -1,24 +1 @@
-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,67 +1 @@
-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();
-            }
-        }
-    });
-}
+export {};

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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,17 @@
+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 {};