@contentful/experience-design-system-cli 2.26.1-dev-build-a852362.0 → 2.26.1-dev-build-f03f014.0

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

@@ -1,1131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { PALETTE } from '../theme.js';
-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';
-import { computeNextScrollOffset } from '../hooks/scroll-offset.js';
-import { findSlotCycles } from '../../../cycle-detection.js';
-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;
-    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 ?? {});
-        const type = CDF_PROPERTY_TYPES.includes(p.$type) ? p.$type : 'string';
-        let defaultValue = null;
-        if (p.$default !== undefined && p.$default !== null) {
-            if (type === 'boolean') {
-                defaultValue = typeof p.$default === 'boolean' ? p.$default : null;
-            }
-            else {
-                defaultValue = typeof p.$default === 'string' ? p.$default : String(p.$default);
-            }
-        }
-        return {
-            name,
-            type,
-            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'] : '',
-            default: defaultValue,
-        };
-    });
-    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,
-            allowedComponents: Array.isArray(s.$allowedComponents)
-                ? s.$allowedComponents.filter((v) => typeof v === 'string')
-                : [],
-        };
-    });
-    return { state: { componentDescription, props, slots }, error: null };
-}
-function serializeState(state, originalJson) {
-    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 { }
-    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;
-        if (p.default !== null) {
-            if (p.type === 'boolean' && typeof p.default === 'boolean') {
-                def.$default = p.default;
-            }
-            else if ((p.type === 'string' || p.type === 'token' || p.type === 'enum') &&
-                typeof p.default === 'string' &&
-                p.default !== '') {
-                def.$default = p.default;
-            }
-        }
-        $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;
-            if (s.allowedComponents.length > 0)
-                slotDef.$allowedComponents = s.allowedComponents;
-            entry.$slots[s.name] = slotDef;
-        }
-    }
-    if (wrapperKey) {
-        return JSON.stringify({ [wrapperKey]: entry }, null, 2);
-    }
-    return JSON.stringify(entry, null, 2);
-}
-function Picker({ value, active }) {
-    return (_jsxs(Box, { children: [active && _jsx(Text, { color: PALETTE.info, children: '‹' }), _jsx(Text, { color: active ? PALETTE.info : PALETTE.inverse, bold: active, children: value }), active && _jsx(Text, { color: PALETTE.info, children: '›' })] }));
-}
-function Toggle({ value, active }) {
-    return (_jsx(Box, { children: _jsx(Text, { color: active ? PALETTE.info : value ? PALETTE.success : undefined, children: value ? '[✓]' : '[ ]' }) }));
-}
-function DefaultSubRow({ prop, active, textCursor, cursorVisible, }) {
-    const cursor = cursorVisible ? '█' : ' ';
-    if (prop.type === 'richtext' || prop.type === 'media' || prop.type === 'link') {
-        return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "default:" }), _jsx(Text, { dimColor: true, children: "(not applicable)" })] }));
-    }
-    if (prop.type === 'boolean') {
-        const display = prop.default === true ? 'true' : prop.default === false ? 'false' : '(unset)';
-        return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "default:" }), active ? _jsx(Picker, { value: display, active: true }) : _jsx(Text, { color: PALETTE.inverse, children: display })] }));
-    }
-    if (prop.type === 'enum') {
-        if (prop.values.length === 0) {
-            return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "default:" }), _jsx(Text, { dimColor: true, children: "(no values defined)" })] }));
-        }
-        const display = typeof prop.default === 'string' && prop.default !== '' ? prop.default : '(unset)';
-        return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "default:" }), active ? _jsx(Picker, { value: display, active: true }) : _jsx(Text, { color: PALETTE.inverse, children: display })] }));
-    }
-    const value = typeof prop.default === 'string' ? prop.default : '';
-    if (active) {
-        return (_jsxs(Box, { paddingLeft: 2, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "default:" }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [_jsx(Text, { children: value.slice(0, textCursor) }), _jsx(Text, { inverse: cursorVisible, children: value[textCursor] ?? cursor }), _jsx(Text, { children: value.slice(textCursor + 1) })] })] }));
-    }
-    return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "default:" }), _jsx(Text, { color: value ? PALETTE.inverse : undefined, dimColor: !value, children: value || '(none)' })] }));
-}
-function PropRow({ prop, selected, activeField, textCursor, valueCursor, cursorVisible, editingValue, valueText, width, rationale, rowKey, }) {
-    const cursor = cursorVisible ? '█' : ' ';
-    const bg = selected ? 'blue' : undefined;
-    const descActive = activeField === 'description';
-    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 ? PALETTE.inverse : PALETTE.info, 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 ? PALETTE.warning : PALETTE.inverse, children: prop.type })), _jsx(Text, { dimColor: !selected, children: "cat:" }), activeField === 'category' ? (_jsx(Picker, { value: prop.category, active: true })) : (_jsx(Text, { color: selected ? PALETTE.info : PALETTE.inverse, 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 ? PALETTE.success : PALETTE.inverse, children: prop.tokenKind || '—' }))] }))] }), selected && (_jsx(DefaultSubRow, { prop: prop, active: activeField === 'default', textCursor: textCursor, cursorVisible: cursorVisible })), selected && descActive && (_jsxs(Box, { paddingLeft: 2, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, 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) })] })] })), selected && !descActive && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsx(Text, { color: PALETTE.success, children: prop.description || '—' })] })), selected && rationale && rationale.trim().length > 0 && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: (() => {
-                        const max = Math.max(8, width - 8);
-                        const text = `~ ${rationale}`;
-                        return text.length > max ? text.slice(0, max - 1) + '…' : text;
-                    })() }) }, rowKey ? `rationale-${rowKey}` : undefined)), selected && prop.type === 'enum' && (_jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "values:" }), activeField === 'values' && (_jsx(Text, { dimColor: true, children: '  [a]dd  [e]dit  [r]emove  [↑↓] navigate  [K/J] reorder' }))] }), prop.values.length === 0 && !editingValue && _jsx(Text, { dimColor: true, children: " (none \u2014 press [a] to add)" }), prop.values.map((v, i) => {
-                        const isActiveCursor = activeField === 'values' && valueCursor === i;
-                        const isBeingEdited = editingValue?.mode === 'edit' && editingValue.index === i;
-                        if (isBeingEdited) {
-                            return (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: PALETTE.info, children: '✎ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }, i));
-                        }
-                        return (_jsx(Box, { gap: 1, paddingLeft: 2, children: _jsx(Text, { color: isActiveCursor ? PALETTE.info : PALETTE.inverse, children: isActiveCursor ? `▶ ${v}` : `  ${v}` }) }, i));
-                    }), editingValue?.mode === 'add' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: PALETTE.info, children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }))] }))] }));
-}
-function SlotRow({ slot, selected, activeField, textCursor, valueCursor, cursorVisible, editingValue, valueText, width, pickerCandidates, pickerCursor, }) {
-    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 ? PALETTE.inverse : PALETTE.info, 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: "allowed:" }), slot.allowedComponents.length === 0 ? (_jsx(Text, { dimColor: true, children: "(any)" })) : (_jsx(Text, { color: PALETTE.info, children: slot.allowedComponents.join(', ') }))] })), selected && (_jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "allowed:" }), activeField === 'allowedComponents' && (_jsx(Text, { dimColor: true, children: slot.allowedComponents.length > 0
-                                    ? '  [a]dd  [e]dit  [r]emove  [←→] cycle  [↑↓] navigate  [K/J] reorder'
-                                    : '  [a]dd  [e]dit  [r]emove  [↑↓] navigate  [K/J] reorder' }))] }), slot.allowedComponents.length === 0 && !editingValue && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: activeField === 'allowedComponents' ? '(any — press [a] to add)' : '(any)' }) })), slot.allowedComponents.map((v, i) => {
-                        const isActiveCursor = activeField === 'allowedComponents' && valueCursor === i;
-                        const isBeingEdited = editingValue?.mode === 'edit' && editingValue.index === i;
-                        if (isBeingEdited) {
-                            return (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: PALETTE.info, children: '✎ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }, i));
-                        }
-                        return (_jsx(Box, { gap: 1, paddingLeft: 2, children: _jsx(Text, { color: isActiveCursor ? PALETTE.info : PALETTE.inverse, children: isActiveCursor ? `▶ ${v}` : `  ${v}` }) }, i));
-                    }), editingValue?.mode === 'add' && activeField === 'allowedComponents' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: PALETTE.info, children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] })), editingValue?.mode === 'add' && activeField === 'allowedComponents' && pickerCandidates !== null && (_jsx(Box, { paddingLeft: 2, flexDirection: "column", children: pickerCandidates.length === 0 ? (_jsx(Text, { dimColor: true, children: '(no valid components to add — all remaining candidates would create cycles)' })) : ((() => {
-                            const filtered = valueText.length === 0
-                                ? pickerCandidates
-                                : pickerCandidates.filter((n) => n.toLowerCase().includes(valueText.toLowerCase()));
-                            if (filtered.length === 0) {
-                                return _jsx(Text, { dimColor: true, children: '(no candidates match — Enter to add as free text)' });
-                            }
-                            const cursor = pickerCursor % filtered.length;
-                            const MAX_VISIBLE = 5;
-                            const start = Math.max(0, Math.min(filtered.length - MAX_VISIBLE, cursor - 2));
-                            const slice = filtered.slice(start, start + MAX_VISIBLE);
-                            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: '  candidates (↑↓ cycle, Enter to add):' }), slice.map((name, i) => {
-                                        const absIdx = start + i;
-                                        const isCursor = absIdx === cursor;
-                                        return (_jsx(Text, { color: isCursor ? PALETTE.info : undefined, dimColor: !isCursor, children: isCursor ? `  ▶ ${name}` : `    ${name}` }, name));
-                                    })] }));
-                        })()) }))] })), selected && activeField === 'description' && (_jsxs(Box, { paddingLeft: 2, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, 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) })] })] })), selected && activeField !== 'description' && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsx(Text, { color: PALETTE.success, children: slot.description || '—' })] }))] }));
-}
-function propFields(prop) {
-    const fields = ['type', 'category', 'required'];
-    if (prop.type === 'token')
-        fields.push('tokenKind');
-    if (prop.type === 'enum')
-        fields.push('values');
-    if (prop.type !== 'richtext' && prop.type !== 'media' && prop.type !== 'link') {
-        fields.push('default');
-    }
-    fields.push('description');
-    return fields;
-}
-const SLOT_FIELDS = ['required', 'allowedComponents', 'description'];
-export function simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, targetSlotName, candidate) {
-    const selfEntry = {
-        name: selfName,
-        slots: currentSlots.map((s) => ({
-            name: s.name,
-            allowedComponents: s.name === targetSlotName ? [...s.allowedComponents, candidate] : [...s.allowedComponents],
-        })),
-    };
-    const withoutSelf = projectSlotGraph.filter((c) => c.name !== selfName);
-    return [...withoutSelf, selfEntry];
-}
-export function introducesNewCycle(before, next) {
-    const key = (edges) => {
-        if (edges.length === 0)
-            return '';
-        const encoded = edges.map((e) => `${e.fromComponent}|${e.slotName}|${e.toComponent}`);
-        let minIdx = 0;
-        for (let i = 1; i < encoded.length; i += 1)
-            if (encoded[i] < encoded[minIdx])
-                minIdx = i;
-        return [...encoded.slice(minIdx), ...encoded.slice(0, minIdx)].join(';');
-    };
-    const beforeSet = new Set(before.map((c) => key(c.edges)));
-    for (const cycle of next)
-        if (!beforeSet.has(key(cycle.edges)))
-            return true;
-    return false;
-}
-export function computeAllowedComponentCandidates(projectSlotGraph, selfName, currentSlots, targetSlotName) {
-    const targetSlot = currentSlots.find((s) => s.name === targetSlotName);
-    const alreadyAdded = new Set(targetSlot?.allowedComponents ?? []);
-    const universe = new Set();
-    for (const c of projectSlotGraph)
-        universe.add(c.name);
-    universe.delete(selfName);
-    for (const added of alreadyAdded)
-        universe.delete(added);
-    const baseline = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, '', ''));
-    const safe = [];
-    for (const candidate of universe) {
-        const nextCycles = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, targetSlotName, candidate));
-        if (!introducesNewCycle(baseline, nextCycles))
-            safe.push(candidate);
-    }
-    safe.sort((a, b) => a.localeCompare(b));
-    return safe;
-}
-export function simulateGraphWithReplacement(projectSlotGraph, selfName, currentSlots, targetSlotName, replaceIndex, candidate) {
-    const selfEntry = {
-        name: selfName,
-        slots: currentSlots.map((s) => {
-            if (s.name !== targetSlotName)
-                return { name: s.name, allowedComponents: [...s.allowedComponents] };
-            const nextVals = s.allowedComponents.map((v, i) => (i === replaceIndex ? candidate : v));
-            return { name: s.name, allowedComponents: nextVals };
-        }),
-    };
-    const withoutSelf = projectSlotGraph.filter((c) => c.name !== selfName);
-    return [...withoutSelf, selfEntry];
-}
-export function computeAllowedComponentReplacementCandidates(projectSlotGraph, selfName, currentSlots, targetSlotName, replaceIndex) {
-    const targetSlot = currentSlots.find((s) => s.name === targetSlotName);
-    const existing = targetSlot?.allowedComponents ?? [];
-    const excludeOtherEntries = new Set();
-    existing.forEach((v, i) => {
-        if (i !== replaceIndex)
-            excludeOtherEntries.add(v);
-    });
-    const universe = new Set();
-    for (const c of projectSlotGraph)
-        universe.add(c.name);
-    universe.delete(selfName);
-    for (const other of excludeOtherEntries)
-        universe.delete(other);
-    const baseline = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, selfName, currentSlots, '', ''));
-    const safe = [];
-    for (const candidate of universe) {
-        const nextCycles = findSlotCycles(simulateGraphWithReplacement(projectSlotGraph, selfName, currentSlots, targetSlotName, replaceIndex, candidate));
-        if (!introducesNewCycle(baseline, nextCycles))
-            safe.push(candidate);
-    }
-    safe.sort((a, b) => a.localeCompare(b));
-    return safe;
-}
-export function FieldEditor({ value, width, height, active = true, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, propRationaleKey = 'i', onToggleComponentRationale, componentRationaleKey = 'I', onToggleSourceExternal, onTextEntryActiveChange, projectSlotGraph, currentComponentName, onDirtyChange, discardTrigger, initialFocusTarget, }) {
-    const { state: initialState, error: parseError } = parseToState(value);
-    const [editorState, setEditorState] = useState(initialState);
-    const [parseErr] = useState(parseError);
-    const initialFocus = (() => {
-        if (initialFocusTarget) {
-            if (initialFocusTarget.kind === 'prop') {
-                const idx = initialState.props.findIndex((p) => p.name === initialFocusTarget.name);
-                if (idx >= 0) {
-                    return {
-                        focusLevel: 'prop',
-                        inSlots: false,
-                        propIdx: idx,
-                        slotIdx: 0,
-                        activeField: null,
-                        textCursor: 0,
-                    };
-                }
-            }
-            else {
-                const idx = initialState.slots.findIndex((s) => s.name === initialFocusTarget.name);
-                if (idx >= 0) {
-                    return {
-                        focusLevel: 'slot',
-                        inSlots: true,
-                        propIdx: 0,
-                        slotIdx: idx,
-                        activeField: null,
-                        textCursor: 0,
-                    };
-                }
-            }
-        }
-        if (initialState.props.length > 0) {
-            return {
-                focusLevel: 'prop',
-                inSlots: false,
-                propIdx: 0,
-                slotIdx: 0,
-                activeField: null,
-                textCursor: 0,
-            };
-        }
-        if (initialState.slots.length > 0) {
-            return {
-                focusLevel: 'slot',
-                inSlots: true,
-                propIdx: 0,
-                slotIdx: 0,
-                activeField: null,
-                textCursor: 0,
-            };
-        }
-        return {
-            focusLevel: 'prop',
-            inSlots: false,
-            propIdx: 0,
-            slotIdx: 0,
-            activeField: null,
-            textCursor: 0,
-        };
-    })();
-    const [focusLevel, setFocusLevel] = useState(initialFocus.focusLevel);
-    const [propIdx, setPropIdx] = useState(initialFocus.propIdx);
-    const [slotIdx, setSlotIdx] = useState(initialFocus.slotIdx);
-    const [inSlots, setInSlots] = useState(initialFocus.inSlots);
-    const [inComponentDesc, setInComponentDesc] = useState(false);
-    const [activeField, setActiveField] = useState(initialFocus.activeField);
-    const [textCursor, setTextCursor] = useState(initialFocus.textCursor);
-    const [valueCursor, setValueCursor] = useState(0);
-    const [editingValue, setEditingValue] = useState(null);
-    const [valueText, setValueText] = useState('');
-    const [pickerCursor, setPickerCursor] = useState(0);
-    const [validationError, setValidationError] = useState(null);
-    const [cursorVisible] = useState(true);
-    const [sourceOpen, setSourceOpen] = useState(false);
-    const [rationaleOpen, setRationaleOpen] = useState(false);
-    const [rationaleScrollOffset, setRationaleScrollOffset] = useState(0);
-    const [showHelp, setShowHelp] = useState(false);
-    const props = editorState.props;
-    const slots = editorState.slots;
-    const textEntryActive = (focusLevel === 'field' && activeField === 'description') ||
-        (focusLevel === 'field' &&
-            activeField === 'default' &&
-            (editorState.props[propIdx]?.type === 'string' || editorState.props[propIdx]?.type === 'token')) ||
-        editingValue != null;
-    React.useEffect(() => {
-        onTextEntryActiveChange?.(textEntryActive);
-    }, [textEntryActive, onTextEntryActiveChange]);
-    const currentProp = props[propIdx] ?? null;
-    const currentSlot = slots[slotIdx] ?? null;
-    const commit = (next) => {
-        setEditorState(next);
-        onChange(serializeState(next, value));
-    };
-    const canonicalize = React.useCallback((json) => {
-        try {
-            return JSON.stringify(JSON.parse(json));
-        }
-        catch {
-            return `__unparseable__:${json}`;
-        }
-    }, []);
-    const initialStateRef = React.useRef(initialState);
-    const [baselineCanonical, setBaselineCanonical] = useState(() => canonicalize(serializeState(initialState, value)));
-    const currentCanonical = canonicalize(serializeState(editorState, value));
-    const isDirty = currentCanonical !== baselineCanonical;
-    React.useEffect(() => {
-        onDirtyChange?.(isDirty);
-    }, [isDirty, onDirtyChange]);
-    const lastDiscardTriggerRef = React.useRef(discardTrigger);
-    React.useEffect(() => {
-        if (discardTrigger === undefined)
-            return;
-        if (discardTrigger === lastDiscardTriggerRef.current)
-            return;
-        lastDiscardTriggerRef.current = discardTrigger;
-        setEditorState(initialStateRef.current);
-        onChange(serializeState(initialStateRef.current, value));
-    }, [discardTrigger, onChange, value]);
-    useImmediateInput((input, key) => {
-        if (!active)
-            return;
-        if (showHelp) {
-            if (input === '?' || key.escape) {
-                setShowHelp(false);
-            }
-            return;
-        }
-        const inDescriptionTextEntryForHelp = focusLevel === 'field' && activeField === 'description';
-        const inStringDefaultTextEntryForHelp = focusLevel === 'field' &&
-            activeField === 'default' &&
-            currentProp != null &&
-            (currentProp.type === 'string' || currentProp.type === 'token');
-        const inValueListTextEntry = editingValue != null;
-        if (input === '?' &&
-            !key.ctrl &&
-            !key.meta &&
-            !inDescriptionTextEntryForHelp &&
-            !inStringDefaultTextEntryForHelp &&
-            !inValueListTextEntry) {
-            setShowHelp(true);
-            return;
-        }
-        const isPropValuesEntry = editingValue && currentProp && activeField === 'values' && !inSlots;
-        const isSlotAllowedEntry = editingValue && currentSlot && activeField === 'allowedComponents' && inSlots;
-        const slotAddCandidates = isSlotAllowedEntry && editingValue?.mode === 'add' && projectSlotGraph && currentSlot && currentComponentName
-            ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, currentSlot.name)
-            : null;
-        const filteredCandidates = slotAddCandidates
-            ? valueText.length === 0
-                ? slotAddCandidates
-                : slotAddCandidates.filter((n) => n.toLowerCase().includes(valueText.toLowerCase()))
-            : null;
-        if (isPropValuesEntry || isSlotAllowedEntry) {
-            const vals = isPropValuesEntry ? currentProp.values : currentSlot.allowedComponents;
-            const pickerActive = isSlotAllowedEntry && editingValue?.mode === 'add' && slotAddCandidates !== null;
-            if (pickerActive && (key.upArrow || key.downArrow)) {
-                const len = filteredCandidates.length;
-                if (len > 0) {
-                    setPickerCursor((c) => (key.upArrow ? (c - 1 + len) % len : (c + 1) % len));
-                }
-                return;
-            }
-            if (key.return) {
-                let chosen = null;
-                if (pickerActive && filteredCandidates && filteredCandidates.length > 0) {
-                    if (valueText.trim() === '') {
-                        chosen = filteredCandidates[pickerCursor % filteredCandidates.length] ?? null;
-                    }
-                    else {
-                        const exact = filteredCandidates.find((n) => n === valueText.trim());
-                        if (exact)
-                            chosen = exact;
-                    }
-                }
-                const trimmed = chosen ?? valueText.trim();
-                if (trimmed) {
-                    if (isSlotAllowedEntry &&
-                        editingValue?.mode === 'add' &&
-                        projectSlotGraph &&
-                        currentSlot &&
-                        currentComponentName &&
-                        chosen === null) {
-                        if (trimmed === currentComponentName) {
-                            setValidationError(`"${trimmed}" cannot be added to its own slot (self-loop).`);
-                            return;
-                        }
-                        const baseline = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, currentComponentName, slots, '', ''));
-                        const next = findSlotCycles(simulateGraphWithCandidate(projectSlotGraph, currentComponentName, slots, currentSlot.name, trimmed));
-                        if (introducesNewCycle(baseline, next)) {
-                            setValidationError(`Adding "${trimmed}" to slot "${currentSlot.name}" would create a slot-dependency cycle. Choose a different component.`);
-                            return;
-                        }
-                    }
-                    let nextVals;
-                    let cursorAfter;
-                    if (editingValue.mode === 'add') {
-                        nextVals = [...vals, trimmed];
-                        cursorAfter = nextVals.length - 1;
-                    }
-                    else {
-                        const idx = editingValue.index ?? 0;
-                        nextVals = vals.map((v, i) => (i === idx ? trimmed : v));
-                        cursorAfter = idx;
-                    }
-                    if (isPropValuesEntry) {
-                        const nextProps = props.map((p, i) => (i === propIdx ? { ...p, values: nextVals } : p));
-                        commit({ ...editorState, props: nextProps });
-                    }
-                    else {
-                        const nextSlots = slots.map((s, i) => (i === slotIdx ? { ...s, allowedComponents: nextVals } : s));
-                        commit({ ...editorState, slots: nextSlots });
-                    }
-                    setValueCursor(cursorAfter);
-                    setValidationError(null);
-                }
-                setEditingValue(null);
-                setValueText('');
-                setPickerCursor(0);
-                return;
-            }
-            if (key.escape) {
-                setEditingValue(null);
-                setValueText('');
-                setPickerCursor(0);
-                setValidationError(null);
-                return;
-            }
-            if (key.backspace) {
-                setValueText((t) => t.slice(0, -1));
-                setPickerCursor(0);
-                return;
-            }
-            if (input && input.length === 1 && !key.ctrl && !key.meta) {
-                setValueText((t) => t + input);
-                setPickerCursor(0);
-                return;
-            }
-            return;
-        }
-        if (key.ctrl && input === 's') {
-            setValidationError(null);
-            const canonicalNow = canonicalize(serializeState(editorState, value));
-            setBaselineCanonical(canonicalNow);
-            initialStateRef.current = editorState;
-            onSave();
-            return;
-        }
-        const inDescriptionTextEntry = focusLevel === 'field' && activeField === 'description';
-        const inComponentDescTextEntry = focusLevel === 'field' && inComponentDesc && activeField === 'description';
-        if (input === 's' && !key.ctrl && !key.meta && !inDescriptionTextEntry && !inComponentDescTextEntry) {
-            if (onToggleSourceExternal) {
-                onToggleSourceExternal();
-                return;
-            }
-            setRationaleOpen(false);
-            setRationaleScrollOffset(() => 0);
-            setSourceOpen((o) => !o);
-            return;
-        }
-        if (rationaleOpen && !onTogglePropRationale) {
-            const PANEL_HEIGHT = 12;
-            const next = computeNextScrollOffset(rationaleScrollOffset, input, key, 9999, PANEL_HEIGHT);
-            if (next !== null) {
-                setRationaleScrollOffset(() => next);
-                return;
-            }
-            if (input === 'i' || key.escape) {
-                setRationaleOpen(false);
-                setRationaleScrollOffset(() => 0);
-                return;
-            }
-            return;
-        }
-        const inStringDefaultTextEntry = focusLevel === 'field' &&
-            activeField === 'default' &&
-            currentProp != null &&
-            (currentProp.type === 'string' || currentProp.type === 'token');
-        const rationaleKeyAllowed = !key.ctrl &&
-            !key.meta &&
-            !inDescriptionTextEntry &&
-            !inComponentDescTextEntry &&
-            !inStringDefaultTextEntry &&
-            !inValueListTextEntry;
-        if (input === propRationaleKey && rationaleKeyAllowed && onTogglePropRationale) {
-            onTogglePropRationale();
-            return;
-        }
-        if (input === 'i' && rationaleKeyAllowed && !onTogglePropRationale) {
-            setSourceOpen(false);
-            setRationaleScrollOffset(() => 0);
-            setRationaleOpen((o) => !o);
-            return;
-        }
-        if (input === componentRationaleKey && rationaleKeyAllowed && onToggleComponentRationale) {
-            onToggleComponentRationale();
-            return;
-        }
-        if (key.escape && sourceOpen) {
-            setSourceOpen(false);
-            return;
-        }
-        if (key.escape) {
-            if (focusLevel === 'field') {
-                if (inComponentDesc)
-                    setFocusLevel('componentDescription');
-                else
-                    setFocusLevel(inSlots ? 'slot' : 'prop');
-                setActiveField(null);
-                return;
-            }
-            if (onExit) {
-                onExit();
-            }
-            else {
-                onDiscard();
-            }
-            return;
-        }
-        if (focusLevel === 'prop') {
-            if (key.upArrow || input === 'k') {
-                if (propIdx > 0) {
-                    setPropIdx(propIdx - 1);
-                }
-                else {
-                    setFocusLevel('componentDescription');
-                    setInSlots(false);
-                    setInComponentDesc(true);
-                }
-                return;
-            }
-            if (key.downArrow || input === 'j') {
-                if (propIdx < props.length - 1) {
-                    setPropIdx(propIdx + 1);
-                }
-                else if (slots.length > 0) {
-                    setInSlots(true);
-                    setSlotIdx(0);
-                    setFocusLevel('slot');
-                }
-                return;
-            }
-            if (key.return && currentProp) {
-                setFocusLevel('field');
-                setActiveField(propFields(currentProp)[0] ?? null);
-                setTextCursor(currentProp.description.length);
-                return;
-            }
-            return;
-        }
-        if (focusLevel === 'componentDescription') {
-            if (key.upArrow || input === 'k') {
-                return;
-            }
-            if (key.downArrow || input === 'j') {
-                if (props.length > 0) {
-                    setFocusLevel('prop');
-                    setPropIdx(0);
-                    setInSlots(false);
-                    setInComponentDesc(false);
-                }
-                else if (slots.length > 0) {
-                    setFocusLevel('slot');
-                    setSlotIdx(0);
-                    setInSlots(true);
-                    setInComponentDesc(false);
-                }
-                return;
-            }
-            if (key.return) {
-                setFocusLevel('field');
-                setActiveField('description');
-                setTextCursor(editorState.componentDescription.length);
-                return;
-            }
-            return;
-        }
-        if (focusLevel === 'slot') {
-            if (key.upArrow || input === 'k') {
-                if (slotIdx > 0) {
-                    setSlotIdx(slotIdx - 1);
-                }
-                else if (props.length > 0) {
-                    setInSlots(false);
-                    setPropIdx(props.length - 1);
-                    setFocusLevel('prop');
-                }
-                return;
-            }
-            if (key.downArrow || input === 'j') {
-                if (slotIdx < slots.length - 1) {
-                    setSlotIdx(slotIdx + 1);
-                }
-                return;
-            }
-            if (key.return && currentSlot) {
-                setFocusLevel('field');
-                setActiveField(SLOT_FIELDS[0] ?? null);
-                setTextCursor(currentSlot.description.length);
-                return;
-            }
-            return;
-        }
-        if (focusLevel === 'field') {
-            const fields = inSlots ? SLOT_FIELDS : currentProp ? propFields(currentProp) : [];
-            const currentFieldIdx = fields.indexOf(activeField);
-            const isDescriptionTextEntry = activeField === 'description';
-            const isDefaultTextEntry = activeField === 'default' &&
-                currentProp != null &&
-                (currentProp.type === 'string' || currentProp.type === 'token');
-            const isValuesNav = activeField === 'values' || activeField === 'allowedComponents';
-            const arrowUp = key.upArrow;
-            const arrowDown = key.downArrow;
-            if (isValuesNav) {
-                const vals = activeField === 'values' && currentProp
-                    ? currentProp.values
-                    : activeField === 'allowedComponents' && currentSlot
-                        ? currentSlot.allowedComponents
-                        : null;
-                if (vals !== null) {
-                    // Move the value cursor within the list. At a boundary, fall through to
-                    // field navigation so the field itself is escapable (e.g. reach the
-                    // slot `description` field past `allowedComponents`).
-                    if (arrowUp || input === 'k') {
-                        if (valueCursor > 0) {
-                            setValueCursor((c) => Math.max(0, c - 1));
-                            return;
-                        }
-                    }
-                    else if (arrowDown || input === 'j') {
-                        if (valueCursor < vals.length - 1) {
-                            setValueCursor((c) => Math.min(vals.length - 1, c + 1));
-                            return;
-                        }
-                    }
-                }
-            }
-            {
-                const navUp = arrowUp || (!isDescriptionTextEntry && !isDefaultTextEntry && input === 'k');
-                const navDown = arrowDown || (!isDescriptionTextEntry && !isDefaultTextEntry && input === 'j');
-                if ((navUp || navDown) && fields.length > 0) {
-                    const lastIdx = fields.length - 1;
-                    const targetIdx = navDown
-                        ? currentFieldIdx >= lastIdx
-                            ? 0
-                            : currentFieldIdx + 1
-                        : currentFieldIdx <= 0
-                            ? lastIdx
-                            : currentFieldIdx - 1;
-                    const next = fields[targetIdx];
-                    setActiveField(next);
-                    if (next === 'description') {
-                        const desc = inSlots ? (currentSlot?.description ?? '') : (currentProp?.description ?? '');
-                        setTextCursor(desc.length);
-                    }
-                    else if (next === 'default' && currentProp) {
-                        const cur = typeof currentProp.default === 'string' ? currentProp.default : '';
-                        setTextCursor(cur.length);
-                    }
-                    else if (next === 'values' || next === 'allowedComponents') {
-                        const nextVals = next === 'values' && currentProp
-                            ? currentProp.values
-                            : next === 'allowedComponents' && currentSlot
-                                ? currentSlot.allowedComponents
-                                : [];
-                        // Land at the entry edge matching travel direction so continued
-                        // nav moves through the list before escaping the field again.
-                        setValueCursor(navDown ? 0 : Math.max(0, nextVals.length - 1));
-                    }
-                    return;
-                }
-            }
-            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 };
-                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;
-            }
-            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;
-            }
-            if (activeField === 'default' && currentProp) {
-                const setProp = (next) => {
-                    const nextProps = props.map((p, i) => (i === propIdx ? next : p));
-                    commit({ ...editorState, props: nextProps });
-                };
-                if (currentProp.type === 'boolean' && (key.leftArrow || key.rightArrow)) {
-                    const cycle = [null, true, false];
-                    const curIdx = cycle.findIndex((v) => v === currentProp.default);
-                    const idx = curIdx < 0 ? 0 : curIdx;
-                    const nextIdx = key.rightArrow ? (idx + 1) % cycle.length : (idx - 1 + cycle.length) % cycle.length;
-                    setProp({ ...currentProp, default: cycle[nextIdx] });
-                    return;
-                }
-                if (currentProp.type === 'enum' && (key.leftArrow || key.rightArrow)) {
-                    const opts = [null, ...currentProp.values];
-                    const cur = typeof currentProp.default === 'string' ? currentProp.default : null;
-                    const curIdx = opts.findIndex((v) => v === cur);
-                    const idx = curIdx < 0 ? 0 : curIdx;
-                    const nextIdx = key.rightArrow ? (idx + 1) % opts.length : (idx - 1 + opts.length) % opts.length;
-                    setProp({ ...currentProp, default: opts[nextIdx] });
-                    return;
-                }
-                if (currentProp.type === 'string' || currentProp.type === 'token') {
-                    const cur = typeof currentProp.default === 'string' ? currentProp.default : '';
-                    const setVal = (next) => setProp({ ...currentProp, default: next === '' ? null : next });
-                    if (key.leftArrow) {
-                        setTextCursor((c) => Math.max(0, c - 1));
-                        return;
-                    }
-                    if (key.rightArrow) {
-                        setTextCursor((c) => Math.min(cur.length, c + 1));
-                        return;
-                    }
-                    if (key.backspace) {
-                        if (textCursor > 0) {
-                            setVal(cur.slice(0, textCursor - 1) + cur.slice(textCursor));
-                            setTextCursor((c) => c - 1);
-                        }
-                        return;
-                    }
-                    if (key.delete) {
-                        if (textCursor < cur.length)
-                            setVal(cur.slice(0, textCursor) + cur.slice(textCursor + 1));
-                        return;
-                    }
-                    if (input && input.length === 1 && !key.ctrl && !key.meta && !key.return) {
-                        setVal(cur.slice(0, textCursor) + input + cur.slice(textCursor));
-                        setTextCursor((c) => c + 1);
-                        return;
-                    }
-                    return;
-                }
-                return;
-            }
-            if (activeField === 'description') {
-                const getDesc = () => inComponentDesc
-                    ? editorState.componentDescription
-                    : inSlots
-                        ? (currentSlot?.description ?? '')
-                        : (currentProp?.description ?? '');
-                const setDesc = (next) => {
-                    if (inComponentDesc) {
-                        commit({ ...editorState, componentDescription: next });
-                    }
-                    else 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;
-            }
-            if (activeField === 'allowedComponents' && currentSlot) {
-                const vals = currentSlot.allowedComponents;
-                const setSlotVals = (next) => {
-                    const nextSlots = slots.map((s, i) => (i === slotIdx ? { ...s, allowedComponents: next } : s));
-                    commit({ ...editorState, slots: nextSlots });
-                };
-                if ((key.leftArrow || key.rightArrow || input === 'h' || input === 'l') &&
-                    vals.length > 0 &&
-                    projectSlotGraph &&
-                    currentComponentName) {
-                    const candidates = computeAllowedComponentReplacementCandidates(projectSlotGraph, currentComponentName, slots, currentSlot.name, valueCursor);
-                    if (candidates.length === 0) {
-                        setValidationError('no other valid components for this position');
-                        return;
-                    }
-                    const current = vals[valueCursor] ?? '';
-                    const curIdx = candidates.indexOf(current);
-                    const forward = key.rightArrow || input === 'l';
-                    const baseIdx = curIdx < 0 ? (forward ? -1 : 0) : curIdx;
-                    const nextIdx = forward
-                        ? (baseIdx + 1) % candidates.length
-                        : (baseIdx - 1 + candidates.length) % candidates.length;
-                    const next = candidates[nextIdx];
-                    if (next === undefined || next === current)
-                        return;
-                    const nextVals = vals.map((v, i) => (i === valueCursor ? next : v));
-                    setSlotVals(nextVals);
-                    setValidationError(null);
-                    return;
-                }
-                if (input === 'a') {
-                    setEditingValue({ mode: 'add' });
-                    setValueText('');
-                    return;
-                }
-                if (input === 'e' && vals.length > 0) {
-                    setEditingValue({ mode: 'edit', index: valueCursor });
-                    setValueText(vals[valueCursor] ?? '');
-                    return;
-                }
-                if (input === 'r' && vals.length > 0) {
-                    const nextVals = vals.filter((_, i) => i !== valueCursor);
-                    setSlotVals(nextVals);
-                    setValueCursor((c) => Math.max(0, Math.min(c, nextVals.length - 1)));
-                    return;
-                }
-                if (input === 'K' && valueCursor > 0) {
-                    const nextVals = [...vals];
-                    [nextVals[valueCursor - 1], nextVals[valueCursor]] = [nextVals[valueCursor], nextVals[valueCursor - 1]];
-                    setSlotVals(nextVals);
-                    setValueCursor((c) => c - 1);
-                    return;
-                }
-                if (input === 'J' && valueCursor < vals.length - 1) {
-                    const nextVals = [...vals];
-                    [nextVals[valueCursor], nextVals[valueCursor + 1]] = [nextVals[valueCursor + 1], nextVals[valueCursor]];
-                    setSlotVals(nextVals);
-                    setValueCursor((c) => c + 1);
-                    return;
-                }
-                return;
-            }
-            if (activeField === 'values' && currentProp) {
-                const vals = currentProp.values;
-                if (input === 'a') {
-                    setEditingValue({ mode: 'add' });
-                    setValueText('');
-                    return;
-                }
-                if (input === 'e' && vals.length > 0) {
-                    setEditingValue({ mode: 'edit', index: valueCursor });
-                    setValueText(vals[valueCursor] ?? '');
-                    return;
-                }
-                if (input === 'r' && 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;
-                }
-                if (input === 'K' && 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 === 'J' && 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;
-            }
-            return;
-        }
-    });
-    const innerWidth = Math.max(1, width - 2);
-    if (parseErr) {
-        return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: PALETTE.error, children: [_jsx(Text, { bold: true, color: PALETTE.error, children: "FIELD EDITOR \u2014 parse error" }), _jsx(Text, { color: PALETTE.error, 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: PALETTE.warning, children: [_jsx(Text, { bold: true, color: PALETTE.warning, children: "FIELD EDITOR \u2014 no fields" }), _jsx(Text, { color: PALETTE.warning, children: "⚠ No properties classified for this component. The LLM didn't find anything to classify." }), _jsx(Text, { dimColor: true, children: "You can add fields manually below or reject this component." }), _jsx(Text, { dimColor: true, children: "Ctrl+S to save \u00B7 Esc to discard" })] }));
-    }
-    const hasEmptyProperties = props.length === 0 && slots.length === 0;
-    const modeLabel = (() => {
-        if (editingValue) {
-            return editingValue.mode === 'add' ? 'Enter to add · Esc to cancel' : 'Enter to save edit · Esc to cancel';
-        }
-        if (focusLevel === 'field' && activeField === 'description') {
-            return 'Type to edit  ←→ cursor  ↑↓ cycle field  Esc row  Ctrl+S save';
-        }
-        if (focusLevel === 'field' &&
-            (activeField === 'type' || activeField === 'category' || activeField === 'tokenKind')) {
-            return '←→ cycle value  ↑↓/jk cycle field  Esc row';
-        }
-        if (focusLevel === 'field' && activeField === 'required') {
-            return 'Space/Enter toggle  ↑↓/jk cycle field  Esc row';
-        }
-        if (focusLevel === 'field' && (activeField === 'values' || activeField === 'allowedComponents')) {
-            return '[a]dd  [e]dit  [r]emove  ↑↓/jk navigate  [K/J] reorder  Esc row';
-        }
-        if (rationaleOpen) {
-            return 'jk/Ctrl+u/d scroll  i/Esc close  rationale panel';
-        }
-        return `↑↓/jk navigate rows  Enter edit fields  s source  ${propRationaleKey} prop rationale  ${componentRationaleKey} component rationale  ? help  Ctrl+S save  Esc exit panel`;
-    })();
-    const rows = [];
-    rows.push({ kind: 'component-description' });
-    if (props.length > 0) {
-        rows.push({ kind: 'header', label: `── PROPERTIES (${props.length}) `, section: 'properties' });
-        props.forEach((_, i) => rows.push({ kind: 'prop', idx: i }));
-    }
-    if (slots.length > 0) {
-        rows.push({ kind: 'header', label: `── SLOTS (${slots.length}) `, section: 'slots' });
-        slots.forEach((_, i) => rows.push({ kind: 'slot', idx: i }));
-    }
-    const selectedRowIdx = rows.findIndex((r) => (r.kind === 'prop' && !inSlots && !inComponentDesc && r.idx === propIdx) ||
-        (r.kind === 'slot' && inSlots && r.idx === slotIdx) ||
-        (r.kind === 'component-description' && inComponentDesc));
-    const visibleRows = Math.max(1, height - 3);
-    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: hasEmptyProperties ? PALETTE.warning : PALETTE.info, children: [_jsx(Text, { bold: true, color: hasEmptyProperties ? PALETTE.warning : PALETTE.info, children: 'FIELDS [Ctrl+S save · Esc discard]' }), hasEmptyProperties && (_jsx(Text, { color: PALETTE.warning, children: "⚠ No properties classified for this component. The LLM didn't find anything to classify. Reject this component or add fields manually." })), _jsx(Box, { flexDirection: "column", width: innerWidth, children: visibleRowSlice.map((row, i) => {
-                    if (row.kind === 'header') {
-                        return (_jsx(Text, { bold: true, color: row.section === 'slots' ? PALETTE.info : PALETTE.success, children: row.label }, `header-${i}`));
-                    }
-                    if (row.kind === 'component-description') {
-                        const isSelected = inComponentDesc;
-                        const isEditing = isSelected && focusLevel === 'field' && activeField === 'description';
-                        const desc = editorState.componentDescription;
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { gap: 1, children: _jsx(Text, { color: isSelected ? PALETTE.inverse : PALETTE.info, bold: isSelected, backgroundColor: isSelected ? 'blue' : undefined, children: ' component-$description ' }) }), isEditing ? (_jsx(Box, { paddingLeft: 2, flexDirection: "row", children: _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [_jsx(Text, { children: desc.slice(0, textCursor) }), _jsx(Text, { inverse: cursorVisible, children: desc[textCursor] ?? (cursorVisible ? '█' : ' ') }), _jsx(Text, { children: desc.slice(textCursor + 1) })] }) })) : (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: desc ? PALETTE.success : undefined, dimColor: !desc, children: desc || '(none — Return to edit)' }) }))] }, `component-description-${i}`));
-                    }
-                    if (row.kind === 'prop') {
-                        const p = props[row.idx];
-                        const isSelected = !inSlots && !inComponentDesc && row.idx === propIdx;
-                        const propMeta = metadata?.props?.[p.name];
-                        return (_jsx(PropRow, { prop: p, selected: isSelected, activeField: isSelected && focusLevel === 'field' ? activeField : null, textCursor: textCursor, valueCursor: valueCursor, cursorVisible: cursorVisible, editingValue: isSelected ? editingValue : null, valueText: isSelected ? valueText : '', width: innerWidth, rationale: propMeta?.rationale ?? null, rowKey: String(row.idx) }, `prop-${row.idx}`));
-                    }
-                    const s = slots[row.idx];
-                    const isSelected = inSlots && row.idx === slotIdx;
-                    const slotPickerCandidates = isSelected &&
-                        editingValue?.mode === 'add' &&
-                        activeField === 'allowedComponents' &&
-                        projectSlotGraph &&
-                        currentComponentName
-                        ? computeAllowedComponentCandidates(projectSlotGraph, currentComponentName, slots, s.name)
-                        : null;
-                    return (_jsx(SlotRow, { slot: s, selected: isSelected, activeField: isSelected && focusLevel === 'field' ? activeField : null, textCursor: textCursor, valueCursor: valueCursor, cursorVisible: cursorVisible, editingValue: isSelected ? editingValue : null, valueText: isSelected ? valueText : '', width: innerWidth, pickerCandidates: slotPickerCandidates, pickerCursor: pickerCursor }, `slot-${row.idx}`));
-                }) }), sourceOpen &&
-                !onToggleSourceExternal &&
-                (() => {
-                    const propMeta = !inSlots && !inComponentDesc && currentProp ? metadata?.props?.[currentProp.name] : undefined;
-                    const start = propMeta?.sourceStartLine ?? null;
-                    const end = propMeta?.sourceEndLine ?? null;
-                    const path = metadata?.sourcePath ?? null;
-                    const src = metadata?.componentSource ?? null;
-                    const headerPath = path ?? '<unknown source path>';
-                    if (!start || !end || !src) {
-                        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: `source: ${headerPath}` }), _jsx(Text, { dimColor: true, children: "(no source location captured for this prop)" }), _jsx(Text, { dimColor: true, children: "[s] close" })] }));
-                    }
-                    const lines = src.split('\n').slice(Math.max(0, start - 1), end);
-                    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: `${headerPath}: lines ${start}–${end}` }), lines.map((ln, i) => (_jsx(Text, { dimColor: true, children: ln }, `source-line-${i}`))), _jsx(Text, { dimColor: true, children: "[s] close \u00B7 [Esc] close" })] }));
-                })(), showHelp && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: PALETTE.info, paddingX: 1, children: [_jsx(Text, { bold: true, color: PALETTE.info, children: "Keybindings" }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Row navigation" }), _jsx(Text, { children: '  ↑/↓ or j/k       move between rows' }), _jsx(Text, { children: '  Enter            edit fields on the current row' }), _jsx(Text, { children: '  Esc              exit the panel' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Field editing" }), _jsx(Text, { children: '  ↑/↓ or j/k       cycle through fields (j/k literal in text inputs)' }), _jsx(Text, { children: '  ←/→              cycle picker values · move cursor in text inputs' }), _jsx(Text, { children: '  Space/Enter      toggle required' }), _jsx(Text, { children: '  Type             edit description / string default' }), _jsx(Text, { children: '  Ctrl+S           save changes' }), _jsx(Text, { children: '  Esc              exit field-edit back to the row' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Values / allowedComponents" }), _jsx(Text, { children: '  a / e / r        add · edit · remove' }), _jsx(Text, { children: '  ↑↓ or j/k        navigate the list' }), _jsx(Text, { children: '  K / J            reorder up · down' }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Panels" }), _jsx(Text, { children: '  s                toggle source-view for the current prop' }), _jsx(Text, { children: '  ' + propRationaleKey.padEnd(16) + ' toggle prop rationale panel' }), _jsx(Text, { children: '  ' + componentRationaleKey.padEnd(16) + ' toggle component rationale panel' }), _jsx(Text, { children: '  ?                toggle this overlay' }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press ? or Esc to close" })] })), validationError && _jsx(Text, { color: PALETTE.error, children: '✗ ' + validationError }), _jsx(Text, { dimColor: true, children: modeLabel })] }));
-}