@contentful/experience-design-system-cli 2.2.1

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

@@ -0,0 +1,531 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text } from 'ink';
+import { CDF_PROPERTY_TYPES, CDF_PROPERTY_CATEGORIES, DESIGN_TOKEN_TYPES, } from '@contentful/experience-design-system-types';
+import { useImmediateInput } from '../hooks/useImmediateInput.js';
+// Section indices for top-level navigation
+// 0 = component $description row
+// 1 = $properties header (then props[0..n-1])
+// 2 = $slots header (then slots[0..m-1])
+// ── Parsing helpers ───────────────────────────────────────────────────────────
+function parseToState(json) {
+    let parsed;
+    try {
+        parsed = JSON.parse(json);
+    }
+    catch (e) {
+        return { state: { componentDescription: '', props: [], slots: [] }, error: String(e) };
+    }
+    if (typeof parsed !== 'object' || parsed === null) {
+        return {
+            state: { componentDescription: '', props: [], slots: [] },
+            error: 'Expected a JSON object',
+        };
+    }
+    const entry = parsed;
+    // Handle both bare CDFComponentEntry and wrapped { [name]: entry } forms
+    let component;
+    const keys = Object.keys(entry);
+    if (entry.$type === 'component' || entry.$properties !== undefined) {
+        component = entry;
+    }
+    else if (keys.length === 1 && typeof entry[keys[0]] === 'object') {
+        component = entry[keys[0]];
+    }
+    else {
+        component = entry;
+    }
+    const componentDescription = typeof component.$description === 'string' ? component.$description : '';
+    const rawProps = (component.$properties ?? {});
+    const props = Object.entries(rawProps).map(([name, raw]) => {
+        const p = (raw ?? {});
+        return {
+            name,
+            type: CDF_PROPERTY_TYPES.includes(p.$type) ? p.$type : 'string',
+            category: CDF_PROPERTY_CATEGORIES.includes(p.$category)
+                ? p.$category
+                : 'content',
+            required: p.$required === true,
+            description: typeof p.$description === 'string' ? p.$description : '',
+            values: Array.isArray(p.$values) ? p.$values.filter((v) => typeof v === 'string') : [],
+            tokenKind: typeof p['$token.kind'] === 'string' ? p['$token.kind'] : '',
+        };
+    });
+    const rawSlots = (component.$slots ?? {});
+    const slots = Object.entries(rawSlots).map(([name, raw]) => {
+        const s = (raw ?? {});
+        return {
+            name,
+            description: typeof s.$description === 'string' ? s.$description : '',
+            required: s.$required === true,
+        };
+    });
+    return { state: { componentDescription, props, slots }, error: null };
+}
+function serializeState(state, originalJson) {
+    // Preserve the wrapper key if the original was wrapped
+    let wrapperKey = null;
+    try {
+        const orig = JSON.parse(originalJson);
+        const keys = Object.keys(orig);
+        if (keys.length === 1 && orig[keys[0]] !== null && typeof orig[keys[0]] === 'object') {
+            const inner = orig[keys[0]];
+            if (inner.$type === 'component' || inner.$properties !== undefined) {
+                wrapperKey = keys[0];
+            }
+        }
+    }
+    catch {
+        // ignore
+    }
+    const $properties = {};
+    for (const p of state.props) {
+        const def = {
+            $type: p.type,
+            $category: p.category,
+        };
+        if (p.required)
+            def.$required = true;
+        if (p.description)
+            def.$description = p.description;
+        if (p.type === 'enum' && p.values.length > 0)
+            def.$values = p.values;
+        if (p.type === 'token' && p.tokenKind)
+            def['$token.kind'] = p.tokenKind;
+        $properties[p.name] = def;
+    }
+    const entry = {
+        $type: 'component',
+        $properties,
+    };
+    if (state.componentDescription)
+        entry.$description = state.componentDescription;
+    if (state.slots.length > 0) {
+        entry.$slots = {};
+        for (const s of state.slots) {
+            const slotDef = {};
+            if (s.description)
+                slotDef.$description = s.description;
+            if (s.required)
+                slotDef.$required = true;
+            entry.$slots[s.name] = slotDef;
+        }
+    }
+    if (wrapperKey) {
+        return JSON.stringify({ [wrapperKey]: entry }, null, 2);
+    }
+    return JSON.stringify(entry, null, 2);
+}
+// ── Sub-components ────────────────────────────────────────────────────────────
+function Picker({ value, active }) {
+    return (_jsxs(Box, { children: [active && _jsx(Text, { color: "cyan", children: '‹' }), _jsx(Text, { color: active ? 'cyan' : 'white', bold: active, children: value }), active && _jsx(Text, { color: "cyan", children: '›' })] }));
+}
+function Toggle({ value, active }) {
+    return (_jsx(Box, { children: _jsx(Text, { color: active ? 'cyan' : value ? 'green' : undefined, children: value ? '[✓]' : '[ ]' }) }));
+}
+function PropRow({ prop, selected, activeField, textCursor, valueCursor, cursorVisible, width, }) {
+    const cursor = cursorVisible ? '█' : ' ';
+    const bg = selected ? 'blue' : undefined;
+    // Name column — fixed 14 chars
+    const nameDisplay = prop.name.length > 14 ? prop.name.slice(0, 13) + '…' : prop.name.padEnd(14);
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: selected ? 'white' : 'cyan', bold: selected, backgroundColor: bg, children: [' ', nameDisplay, ' '] }), _jsx(Text, { dimColor: !selected, children: "type:" }), activeField === 'type' ? (_jsx(Picker, { value: prop.type, active: true })) : (_jsx(Text, { color: selected ? 'yellow' : 'white', children: prop.type })), _jsx(Text, { dimColor: !selected, children: "cat:" }), activeField === 'category' ? (_jsx(Picker, { value: prop.category, active: true })) : (_jsx(Text, { color: selected ? 'magenta' : 'white', children: prop.category })), _jsx(Text, { dimColor: !selected, children: "req:" }), activeField === 'required' ? (_jsx(Toggle, { value: prop.required, active: true })) : (_jsx(Toggle, { value: prop.required, active: false })), prop.type === 'token' && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: !selected, children: "kind:" }), activeField === 'tokenKind' ? (_jsx(Picker, { value: prop.tokenKind || DESIGN_TOKEN_TYPES[0], active: true })) : (_jsx(Text, { color: selected ? 'green' : 'white', children: prop.tokenKind || '—' }))] }))] }), selected && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "desc:" }), activeField === 'description' ? (_jsxs(Box, { children: [_jsx(Text, { children: prop.description.slice(0, textCursor) }), _jsx(Text, { inverse: cursorVisible, children: prop.description[textCursor] ?? cursor }), _jsx(Text, { children: prop.description.slice(textCursor + 1) })] })) : (_jsx(Text, { color: "green", children: prop.description || '—' }))] })), selected && prop.type === 'enum' && (_jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "values:" }), prop.values.length === 0 && _jsx(Text, { dimColor: true, children: " (none)" }), prop.values.map((v, i) => (_jsx(Box, { gap: 1, paddingLeft: 2, children: _jsx(Text, { color: activeField === 'values' && valueCursor === i ? 'cyan' : 'white', children: activeField === 'values' && valueCursor === i ? `▶ ${v}` : `  ${v}` }) }, i))), activeField === 'values' && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: "[+] add [x] remove [[] up []] down [Esc] done" }) }))] }))] }));
+}
+function SlotRow({ slot, selected, activeField, textCursor, cursorVisible, width, }) {
+    const cursor = cursorVisible ? '█' : ' ';
+    const bg = selected ? 'blue' : undefined;
+    const nameDisplay = slot.name.length > 14 ? slot.name.slice(0, 13) + '…' : slot.name.padEnd(14);
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: selected ? 'white' : 'cyan', bold: selected, backgroundColor: bg, children: [' ', nameDisplay, ' '] }), _jsx(Text, { dimColor: !selected, children: "req:" }), activeField === 'required' ? (_jsx(Toggle, { value: slot.required, active: true })) : (_jsx(Toggle, { value: slot.required, active: false }))] }), selected && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "desc:" }), activeField === 'description' ? (_jsxs(Box, { children: [_jsx(Text, { children: slot.description.slice(0, textCursor) }), _jsx(Text, { inverse: cursorVisible, children: slot.description[textCursor] ?? cursor }), _jsx(Text, { children: slot.description.slice(textCursor + 1) })] })) : (_jsx(Text, { color: "green", children: slot.description || '—' }))] }))] }));
+}
+const PROP_FIELDS_BASE = ['type', 'category', 'required', 'description'];
+function propFields(prop) {
+    const fields = [...PROP_FIELDS_BASE];
+    if (prop.type === 'token')
+        fields.splice(3, 0, 'tokenKind');
+    if (prop.type === 'enum')
+        fields.push('values');
+    return fields;
+}
+const SLOT_FIELDS = ['required', 'description'];
+// ── Main component ────────────────────────────────────────────────────────────
+export function FieldEditor({ value, width, height, onChange, onSave, onDiscard, }) {
+    const { state: initialState, error: parseError } = parseToState(value);
+    const [editorState, setEditorState] = useState(initialState);
+    const [parseErr] = useState(parseError);
+    // Navigation state
+    const [focusLevel, setFocusLevel] = useState('prop');
+    const [propIdx, setPropIdx] = useState(0);
+    const [slotIdx, setSlotIdx] = useState(0);
+    // Whether we're navigating props (true) or slots (false) at the top level
+    const [inSlots, setInSlots] = useState(false);
+    // Active field within a prop/slot
+    const [activeField, setActiveField] = useState(null);
+    // Text cursor position for description fields
+    const [textCursor, setTextCursor] = useState(0);
+    // Value list cursor for $values editing
+    const [valueCursor, setValueCursor] = useState(0);
+    // New value being typed in $values add mode
+    const [addingValue, setAddingValue] = useState(false);
+    const [newValueText, setNewValueText] = useState('');
+    const [validationError, setValidationError] = useState(null);
+    const [cursorVisible] = useState(true);
+    const props = editorState.props;
+    const slots = editorState.slots;
+    const currentProp = props[propIdx] ?? null;
+    const currentSlot = slots[slotIdx] ?? null;
+    // Emit serialized JSON whenever state changes
+    const commit = (next) => {
+        setEditorState(next);
+        onChange(serializeState(next, value));
+    };
+    useImmediateInput((input, key) => {
+        // ── Save / Discard ───────────────────────────────────────────────────────
+        if (key.ctrl && input === 's') {
+            setValidationError(null);
+            onSave();
+            return;
+        }
+        if (key.escape) {
+            if (focusLevel === 'field') {
+                // Exit field editing back to prop/slot row level
+                setFocusLevel(inSlots ? 'slot' : 'prop');
+                setActiveField(null);
+                setAddingValue(false);
+                setNewValueText('');
+                return;
+            }
+            if (focusLevel === 'value') {
+                setFocusLevel('field');
+                setAddingValue(false);
+                setNewValueText('');
+                return;
+            }
+            onDiscard();
+            return;
+        }
+        // ── Prop-level navigation (not inside a field) ───────────────────────────
+        if (focusLevel === 'prop') {
+            if (key.upArrow || input === 'k') {
+                if (propIdx > 0) {
+                    setPropIdx((i) => i - 1);
+                    setActiveField(null);
+                }
+                else if (slots.length > 0) {
+                    setInSlots(true);
+                    setFocusLevel('slot');
+                    setActiveField(null);
+                }
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                if (propIdx < props.length - 1) {
+                    setPropIdx((i) => i + 1);
+                    setActiveField(null);
+                }
+                else if (slots.length > 0) {
+                    setInSlots(true);
+                    setFocusLevel('slot');
+                    setActiveField(null);
+                }
+                return;
+            }
+            if (key.return && currentProp) {
+                // Enter field editing on the first field of this prop
+                setFocusLevel('field');
+                setActiveField(propFields(currentProp)[0] ?? null);
+                setTextCursor(currentProp.description.length);
+                return;
+            }
+            return;
+        }
+        // ── Slot-level navigation ────────────────────────────────────────────────
+        if (focusLevel === 'slot') {
+            if (key.upArrow || input === 'k') {
+                if (slotIdx > 0) {
+                    setSlotIdx((i) => i - 1);
+                    setActiveField(null);
+                }
+                else if (props.length > 0) {
+                    setInSlots(false);
+                    setFocusLevel('prop');
+                    setPropIdx(props.length - 1);
+                    setActiveField(null);
+                }
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                if (slotIdx < slots.length - 1) {
+                    setSlotIdx((i) => i + 1);
+                    setActiveField(null);
+                }
+                return;
+            }
+            if (key.return && currentSlot) {
+                setFocusLevel('field');
+                setActiveField(SLOT_FIELDS[0] ?? null);
+                setTextCursor(currentSlot.description.length);
+                return;
+            }
+            return;
+        }
+        // ── Field-level navigation (inside a prop/slot, selecting which field) ───
+        if (focusLevel === 'field') {
+            const fields = inSlots ? SLOT_FIELDS : currentProp ? propFields(currentProp) : [];
+            const currentFieldIdx = fields.indexOf(activeField);
+            if (key.upArrow || input === 'k') {
+                if (currentFieldIdx > 0) {
+                    const next = fields[currentFieldIdx - 1];
+                    setActiveField(next);
+                    if (next === 'description') {
+                        const desc = inSlots ? (currentSlot?.description ?? '') : (currentProp?.description ?? '');
+                        setTextCursor(desc.length);
+                    }
+                }
+                else {
+                    // Back to row navigation
+                    setFocusLevel(inSlots ? 'slot' : 'prop');
+                    setActiveField(null);
+                }
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                if (currentFieldIdx < fields.length - 1) {
+                    const next = fields[currentFieldIdx + 1];
+                    setActiveField(next);
+                    if (next === 'description') {
+                        const desc = inSlots ? (currentSlot?.description ?? '') : (currentProp?.description ?? '');
+                        setTextCursor(desc.length);
+                    }
+                }
+                return;
+            }
+            // ── Picker fields (left/right cycle) ──────────────────────────────────
+            if (activeField === 'type' && (key.leftArrow || key.rightArrow) && currentProp) {
+                const options = CDF_PROPERTY_TYPES;
+                const idx = options.indexOf(currentProp.type);
+                const next = key.leftArrow
+                    ? options[(idx - 1 + options.length) % options.length]
+                    : options[(idx + 1) % options.length];
+                const updated = { ...currentProp, type: next };
+                // Clear token/enum specific fields when switching away
+                if (next !== 'token')
+                    updated.tokenKind = '';
+                if (next !== 'enum')
+                    updated.values = [];
+                const nextProps = props.map((p, i) => (i === propIdx ? updated : p));
+                commit({ ...editorState, props: nextProps });
+                return;
+            }
+            if (activeField === 'category' && (key.leftArrow || key.rightArrow) && currentProp) {
+                const options = CDF_PROPERTY_CATEGORIES;
+                const idx = options.indexOf(currentProp.category);
+                const next = key.leftArrow
+                    ? options[(idx - 1 + options.length) % options.length]
+                    : options[(idx + 1) % options.length];
+                const nextProps = props.map((p, i) => (i === propIdx ? { ...p, category: next } : p));
+                commit({ ...editorState, props: nextProps });
+                return;
+            }
+            if (activeField === 'tokenKind' && (key.leftArrow || key.rightArrow) && currentProp) {
+                const options = DESIGN_TOKEN_TYPES;
+                const cur = currentProp.tokenKind || options[0];
+                const idx = options.indexOf(cur);
+                const next = key.leftArrow
+                    ? options[(idx - 1 + options.length) % options.length]
+                    : options[(idx + 1) % options.length];
+                const nextProps = props.map((p, i) => (i === propIdx ? { ...p, tokenKind: next } : p));
+                commit({ ...editorState, props: nextProps });
+                return;
+            }
+            // ── Toggle fields (space/enter) ────────────────────────────────────────
+            if (activeField === 'required' && (key.return || input === ' ')) {
+                if (inSlots && currentSlot) {
+                    const nextSlots = slots.map((s, i) => (i === slotIdx ? { ...s, required: !s.required } : s));
+                    commit({ ...editorState, slots: nextSlots });
+                }
+                else if (currentProp) {
+                    const nextProps = props.map((p, i) => (i === propIdx ? { ...p, required: !p.required } : p));
+                    commit({ ...editorState, props: nextProps });
+                }
+                return;
+            }
+            // ── Description text input ─────────────────────────────────────────────
+            if (activeField === 'description') {
+                const getDesc = () => (inSlots ? (currentSlot?.description ?? '') : (currentProp?.description ?? ''));
+                const setDesc = (next) => {
+                    if (inSlots && currentSlot) {
+                        const nextSlots = slots.map((s, i) => (i === slotIdx ? { ...s, description: next } : s));
+                        commit({ ...editorState, slots: nextSlots });
+                    }
+                    else if (currentProp) {
+                        const nextProps = props.map((p, i) => (i === propIdx ? { ...p, description: next } : p));
+                        commit({ ...editorState, props: nextProps });
+                    }
+                };
+                const desc = getDesc();
+                if (key.leftArrow) {
+                    setTextCursor((c) => Math.max(0, c - 1));
+                    return;
+                }
+                if (key.rightArrow) {
+                    setTextCursor((c) => Math.min(desc.length, c + 1));
+                    return;
+                }
+                if (input === '\x1b[H' || input === '\x1b[1~') {
+                    setTextCursor(0);
+                    return;
+                }
+                if (input === '\x1b[F' || input === '\x1b[4~') {
+                    setTextCursor(desc.length);
+                    return;
+                }
+                if (key.backspace) {
+                    if (textCursor > 0) {
+                        setDesc(desc.slice(0, textCursor - 1) + desc.slice(textCursor));
+                        setTextCursor((c) => c - 1);
+                    }
+                    return;
+                }
+                if (key.delete) {
+                    if (textCursor < desc.length)
+                        setDesc(desc.slice(0, textCursor) + desc.slice(textCursor + 1));
+                    return;
+                }
+                if (input && input.length === 1 && !key.ctrl && !key.meta && !key.return) {
+                    setDesc(desc.slice(0, textCursor) + input + desc.slice(textCursor));
+                    setTextCursor((c) => c + 1);
+                    return;
+                }
+                return;
+            }
+            // ── Enter $values sub-list ─────────────────────────────────────────────
+            if (activeField === 'values' && key.return && currentProp) {
+                setFocusLevel('value');
+                setValueCursor(0);
+                return;
+            }
+            return;
+        }
+        // ── Value-list editing ────────────────────────────────────────────────────
+        if (focusLevel === 'value' && currentProp) {
+            const vals = currentProp.values;
+            if (addingValue) {
+                // Typing a new value
+                if (key.return) {
+                    if (newValueText.trim()) {
+                        const nextVals = [...vals, newValueText.trim()];
+                        const nextProps = props.map((p, i) => (i === propIdx ? { ...p, values: nextVals } : p));
+                        commit({ ...editorState, props: nextProps });
+                        setValueCursor(nextVals.length - 1);
+                    }
+                    setAddingValue(false);
+                    setNewValueText('');
+                    return;
+                }
+                if (key.escape) {
+                    setAddingValue(false);
+                    setNewValueText('');
+                    return;
+                }
+                if (key.backspace) {
+                    setNewValueText((t) => t.slice(0, -1));
+                    return;
+                }
+                if (input && input.length === 1 && !key.ctrl && !key.meta) {
+                    setNewValueText((t) => t + input);
+                    return;
+                }
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setValueCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setValueCursor((c) => Math.max(0, Math.min(vals.length - 1, c + 1)));
+                return;
+            }
+            if (key.escape) {
+                setFocusLevel('field');
+                return;
+            }
+            if (input === '+') {
+                setAddingValue(true);
+                setNewValueText('');
+                return;
+            }
+            if (input === 'x' && vals.length > 0) {
+                const nextVals = vals.filter((_, i) => i !== valueCursor);
+                const nextProps = props.map((p, i) => (i === propIdx ? { ...p, values: nextVals } : p));
+                commit({ ...editorState, props: nextProps });
+                setValueCursor((c) => Math.max(0, Math.min(c, nextVals.length - 1)));
+                return;
+            }
+            // '[' moves item up, ']' moves item down
+            if (input === '[' && valueCursor > 0) {
+                const nextVals = [...vals];
+                [nextVals[valueCursor - 1], nextVals[valueCursor]] = [nextVals[valueCursor], nextVals[valueCursor - 1]];
+                const nextProps = props.map((p, i) => (i === propIdx ? { ...p, values: nextVals } : p));
+                commit({ ...editorState, props: nextProps });
+                setValueCursor((c) => c - 1);
+                return;
+            }
+            if (input === ']' && valueCursor < vals.length - 1) {
+                const nextVals = [...vals];
+                [nextVals[valueCursor], nextVals[valueCursor + 1]] = [nextVals[valueCursor + 1], nextVals[valueCursor]];
+                const nextProps = props.map((p, i) => (i === propIdx ? { ...p, values: nextVals } : p));
+                commit({ ...editorState, props: nextProps });
+                setValueCursor((c) => c + 1);
+                return;
+            }
+            return;
+        }
+    });
+    // ── Render ────────────────────────────────────────────────────────────────
+    const innerWidth = Math.max(1, width - 2);
+    if (parseErr) {
+        return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "red", children: [_jsx(Text, { bold: true, color: "red", children: "FIELD EDITOR \u2014 parse error" }), _jsx(Text, { color: "red", children: parseErr }), _jsx(Text, { dimColor: true, children: "Cannot display structured editor. Fix the JSON first." })] }));
+    }
+    if (props.length === 0 && slots.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "yellow", children: [_jsx(Text, { bold: true, children: "FIELD EDITOR \u2014 no fields" }), _jsx(Text, { dimColor: true, children: "This component has no properties or slots to edit." }), _jsx(Text, { dimColor: true, children: "Ctrl+S to save \u00B7 Esc to discard" })] }));
+    }
+    const modeLabel = focusLevel === 'field' && activeField === 'description'
+        ? '← → move cursor  Esc exit field'
+        : focusLevel === 'field' && (activeField === 'type' || activeField === 'category' || activeField === 'tokenKind')
+            ? '← → cycle values  ↑↓ next field  Esc exit'
+            : focusLevel === 'field' && activeField === 'required'
+                ? 'Space/Enter toggle  ↑↓ next field  Esc exit'
+                : focusLevel === 'field' && activeField === 'values'
+                    ? 'Enter edit list  Esc exit field'
+                    : focusLevel === 'value'
+                        ? '+ add  x remove  [ up  ] down  Esc done'
+                        : '↑↓ navigate  Enter edit fields  Ctrl+S save  Esc discard';
+    const rows = [];
+    if (props.length > 0) {
+        rows.push({ kind: 'header', label: `── $properties (${props.length}) ` });
+        props.forEach((_, i) => rows.push({ kind: 'prop', idx: i }));
+    }
+    if (slots.length > 0) {
+        rows.push({ kind: 'header', label: `── $slots (${slots.length}) ` });
+        slots.forEach((_, i) => rows.push({ kind: 'slot', idx: i }));
+    }
+    // Scroll to keep selected row visible
+    const selectedRowIdx = rows.findIndex((r) => (r.kind === 'prop' && !inSlots && r.idx === propIdx && focusLevel !== 'section') ||
+        (r.kind === 'slot' && inSlots && r.idx === slotIdx));
+    const visibleRows = Math.max(1, height - 3); // title + hint bar + border
+    const scrollStart = selectedRowIdx < 0 ? 0 : Math.max(0, Math.min(selectedRowIdx, rows.length - visibleRows));
+    const visibleRowSlice = rows.slice(scrollStart, scrollStart + visibleRows);
+    return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "cyan", children: [_jsx(Text, { bold: true, color: "cyan", children: 'FIELDS [Ctrl+S save · Esc discard]' }), _jsxs(Box, { flexDirection: "column", width: innerWidth, children: [visibleRowSlice.map((row, i) => {
+                        if (row.kind === 'header') {
+                            return (_jsx(Text, { dimColor: true, children: row.label }, i));
+                        }
+                        if (row.kind === 'prop') {
+                            const p = props[row.idx];
+                            const isSelected = !inSlots && row.idx === propIdx;
+                            return (_jsx(PropRow, { prop: p, selected: isSelected, activeField: isSelected && focusLevel === 'field' ? activeField : null, textCursor: textCursor, valueCursor: valueCursor, cursorVisible: cursorVisible, width: innerWidth }, row.idx));
+                        }
+                        // slot row
+                        const s = slots[row.idx];
+                        const isSelected = inSlots && row.idx === slotIdx;
+                        return (_jsx(SlotRow, { slot: s, selected: isSelected, activeField: isSelected && focusLevel === 'field' ? activeField : null, textCursor: textCursor, cursorVisible: cursorVisible, width: innerWidth }, `slot-${row.idx}`));
+                    }), focusLevel === 'value' && addingValue && (_jsxs(Box, { paddingLeft: 4, gap: 1, children: [_jsx(Text, { color: "cyan", children: "+ " }), _jsx(Text, { children: newValueText }), _jsx(Text, { inverse: cursorVisible, children: " " }), _jsx(Text, { dimColor: true, children: "(Enter confirm \u00B7 Esc cancel)" })] }))] }), validationError && _jsx(Text, { color: "red", children: '✗ ' + validationError }), _jsx(Text, { dimColor: true, children: modeLabel })] }));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type FinalizeDialogProps = {
+    accepted: number;
+    rejected: number;
+    needsReview: number;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+export declare function FinalizeDialog({ accepted, rejected, needsReview, onConfirm, onCancel, }: FinalizeDialogProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,15 @@
+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();
+        }
+    });
+    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

@@ -0,0 +1,7 @@
+import React from 'react';
+type HelpOverlayProps = {
+    mode: 'analyze' | 'validate' | 'review';
+    onClose: () => void;
+};
+export declare function HelpOverlay({ mode, onClose }: HelpOverlayProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,11 @@
+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();
+        }
+    });
+    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

@@ -0,0 +1,11 @@
+import React from 'react';
+type JsonEditorProps = {
+    value: string;
+    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;
+export {};