@contentful/experience-design-system-cli 2.14.2 → 2.15.0

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

@@ -1,14 +1,11 @@
 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';
-// 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 ───────────────────────────────────────────────────────────
+import { findSlotCycles } from '../../../cycle-detection.js';
 function parseToState(json) {
     let parsed;
     try {
@@ -24,7 +21,6 @@ function parseToState(json) {
         };
     }
     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) {
@@ -47,8 +43,6 @@ function parseToState(json) {
                 defaultValue = typeof p.$default === 'boolean' ? p.$default : null;
             }
             else {
-                // Store as string for string/number/token/enum. Numbers/JSON values
-                // are stringified — downstream serialization re-emits the string.
                 defaultValue = typeof p.$default === 'string' ? p.$default : String(p.$default);
             }
         }
@@ -80,7 +74,6 @@ function parseToState(json) {
     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);
@@ -92,9 +85,7 @@ function serializeState(state, originalJson) {
             }
         }
     }
-    catch {
-        // ignore
-    }
+    catch { }
     const $properties = {};
     for (const p of state.props) {
         const def = {
@@ -109,9 +100,6 @@ function serializeState(state, originalJson) {
             def.$values = p.values;
         if (p.type === 'token' && p.tokenKind)
             def['$token.kind'] = p.tokenKind;
-        // $default — gated per type so e.g. boolean props don't get string defaults.
-        // Empty string == unset for text-typed defaults. richtext/media/link don't
-        // emit a default (defaults aren't meaningful for those types).
         if (p.default !== null) {
             if (p.type === 'boolean' && typeof p.default === 'boolean') {
                 def.$default = p.default;
@@ -148,47 +136,40 @@ function serializeState(state, originalJson) {
     }
     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: '›' })] }));
+    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 ? 'cyan' : value ? 'green' : undefined, children: value ? '[✓]' : '[ ]' }) }));
+    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 ? '█' : ' ';
-    // richtext/media/link don't support defaults — render an inert dim line.
     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)" })] }));
     }
-    // boolean — tri-state picker: true | false | (unset).
     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: "white", children: display })] }));
+        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 })] }));
     }
-    // enum — picker over prop.values plus (unset).
     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: "white", children: display })] }));
+        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 })] }));
     }
-    // string / number / token — text input. Active state shows bordered cyan
-    // box analogous to the description editor.
     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: "cyan", 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, 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 ? 'white' : undefined, dimColor: !value, children: value || '(none)' })] }));
+    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';
-    // 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 && (_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: "cyan", 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: "green", children: prop.description || '—' })] })), selected && rationale && rationale.trim().length > 0 && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: (() => {
+    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;
@@ -196,32 +177,42 @@ function PropRow({ prop, selected, activeField, textCursor, valueCursor, cursorV
                         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: "cyan", children: '✎ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }, i));
+                            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 ? 'cyan' : 'white', children: isActiveCursor ? `▶ ${v}` : `  ${v}` }) }, i));
-                    }), editingValue?.mode === 'add' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }))] }))] }));
+                        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, }) {
+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 ? '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, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "allowed:" }), activeField === 'allowedComponents' && (_jsx(Text, { dimColor: true, children: '  [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) => {
+    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: "cyan", children: '✎ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }, i));
+                            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 ? 'cyan' : 'white', children: isActiveCursor ? `▶ ${v}` : `  ${v}` }) }, i));
-                    }), editingValue?.mode === 'add' && activeField === 'allowedComponents' && (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "cyan", children: '+ ' }), _jsx(Text, { children: valueText }), _jsx(Text, { inverse: cursorVisible, children: " " })] }))] })), selected && activeField === 'description' && (_jsxs(Box, { paddingLeft: 2, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "desc:" }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: "cyan", 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: "green", children: slot.description || '—' })] }))] }));
+                        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 || '—' })] }))] }));
 }
-// Field order is intentional: description is LAST so it's the "edge" of the
-// field cycle. The user reaches description by walking through type → category
-// → required → [tokenKind?] → [values?] → [default?] → description via j/k;
-// once active, description swallows j/k as literal text input. Putting it last
-// means the user has to deliberately navigate to it, avoiding accidental
-// text-entry. `default` slots in BEFORE description for the same reason —
-// description-as-last is invariant. richtext/media/link omit `default` because
-// defaults aren't meaningful for those types (per spec D1).
 function propFields(prop) {
     const fields = ['type', 'category', 'required'];
     if (prop.type === 'token')
@@ -234,26 +225,130 @@ function propFields(prop) {
     fields.push('description');
     return fields;
 }
-// Slot fields: description stays last for the same invariant reason. Allowed-
-// components is a list-typed field that swallows j/k similarly to enum $values
-// — placing it before description preserves description-as-last.
 const SLOT_FIELDS = ['required', 'allowedComponents', 'description'];
-// ── Main component ────────────────────────────────────────────────────────────
-export function FieldEditor({ value, width, height, active = true, onChange, onSave, onDiscard, onExit, metadata, onTogglePropRationale, onToggleComponentRationale, onToggleSourceExternal, onTextEntryActiveChange, }) {
+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);
-    // Navigation state — initial state lands at the row level with NO field
-    // auto-active. The user presses Return to enter field-edit at the first
-    // field of the row (type), then j/k to walk through fields uniformly:
-    // type → category → required → [tokenKind?] → [values?] → description.
-    // Description is reached via navigation, not auto-focus — this avoids
-    // trapping the user in description-edit (where j/k type literals).
     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,
             };
@@ -262,6 +357,8 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             return {
                 focusLevel: 'slot',
                 inSlots: true,
+                propIdx: 0,
+                slotIdx: 0,
                 activeField: null,
                 textCursor: 0,
             };
@@ -269,46 +366,31 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
         return {
             focusLevel: 'prop',
             inSlots: false,
+            propIdx: 0,
+            slotIdx: 0,
             activeField: null,
             textCursor: 0,
         };
     })();
     const [focusLevel, setFocusLevel] = useState(initialFocus.focusLevel);
-    const [propIdx, setPropIdx] = useState(0);
-    const [slotIdx, setSlotIdx] = useState(0);
-    // Whether we're navigating props (false) or slots (true) at the top level
+    const [propIdx, setPropIdx] = useState(initialFocus.propIdx);
+    const [slotIdx, setSlotIdx] = useState(initialFocus.slotIdx);
     const [inSlots, setInSlots] = useState(initialFocus.inSlots);
-    // True when the active focus is the component-level $description row (rather
-    // than a prop/slot row). Lives parallel to inSlots — they're mutually exclusive.
     const [inComponentDesc, setInComponentDesc] = useState(false);
-    // Active field within a prop/slot
     const [activeField, setActiveField] = useState(initialFocus.activeField);
-    // Text cursor position for description fields
     const [textCursor, setTextCursor] = useState(initialFocus.textCursor);
-    // Value list cursor for $values editing
     const [valueCursor, setValueCursor] = useState(0);
-    // Inline text-entry mode for adding/editing a $values entry.
-    // mode='add' — append on Enter; mode='edit' — replace at index on Enter.
     const [editingValue, setEditingValue] = useState(null);
     const [valueText, setValueText] = useState('');
+    const [pickerCursor, setPickerCursor] = useState(0);
     const [validationError, setValidationError] = useState(null);
     const [cursorVisible] = useState(true);
-    // Feature 1: source-view panel toggle. Opens with `s`, closes with `s` or Esc.
-    // When open, Esc closes the panel only (does not bubble to onExit).
     const [sourceOpen, setSourceOpen] = useState(false);
-    // Feature 11: rationale panel toggle (`i`). Mutually exclusive with the
-    // source panel — opening one closes the other.
     const [rationaleOpen, setRationaleOpen] = useState(false);
     const [rationaleScrollOffset, setRationaleScrollOffset] = useState(0);
-    // Discoverability overlay. `?` toggles a modal listing every wired
-    // keybinding grouped by context. While open, every other handler is inert
-    // — only `?` and Esc respond. Esc here closes the overlay and does NOT
-    // bubble to onExit.
     const [showHelp, setShowHelp] = useState(false);
     const props = editorState.props;
     const slots = editorState.slots;
-    // Report text-entry-active state to parent so it can gate top-level `i`/`I`/`s`
-    // keybinds against literal keystrokes inside any text-entry surface.
     const textEntryActive = (focusLevel === 'field' && activeField === 'description') ||
         (focusLevel === 'field' &&
             activeField === 'default' &&
@@ -319,26 +401,44 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
     }, [textEntryActive, onTextEntryActiveChange]);
     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));
     };
+    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;
-        // ── Help overlay (`?`) — highest priority ───────────────────────────────
-        // When open, only `?` (toggle) and Esc (close) respond. All other input
-        // is swallowed so j/k/Enter/Ctrl+S can't move state behind the modal.
         if (showHelp) {
             if (input === '?' || key.escape) {
                 setShowHelp(false);
             }
             return;
         }
-        // Open the overlay. Skip when in any inline text-entry context to keep
-        // `?` literal there: description text-entry, string-typed default
-        // text-entry, and the values/allowedComponents add/edit text-entry.
         const inDescriptionTextEntryForHelp = focusLevel === 'field' && activeField === 'description';
         const inStringDefaultTextEntryForHelp = focusLevel === 'field' &&
             activeField === 'default' &&
@@ -354,16 +454,57 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             setShowHelp(true);
             return;
         }
-        // ── Inline value text-entry (add or edit) ─ highest priority ───────────
-        // Handles enum prop $values AND slot $allowedComponents — both use the
-        // same add/edit/remove/reorder list shape.
         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) {
-                const trimmed = valueText.trim();
+                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') {
@@ -384,57 +525,52 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                         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;
         }
-        // ── Save / Discard ───────────────────────────────────────────────────────
         if (key.ctrl && input === 's') {
             setValidationError(null);
+            const canonicalNow = canonicalize(serializeState(editorState, value));
+            setBaselineCanonical(canonicalNow);
+            initialStateRef.current = editorState;
             onSave();
             return;
         }
-        // ── Feature 1: source-view panel toggle ─────────────────────────────────
-        // `s` (without Ctrl) opens/closes the source-view panel. Skip when in
-        // inline text-entry contexts (description text-entry, value-list edit).
-        // Description text-entry is gated by focusLevel === 'field' && activeField
-        // === 'description' — we guard against typing 's' as a literal there.
         const inDescriptionTextEntry = focusLevel === 'field' && activeField === 'description';
         const inComponentDescTextEntry = focusLevel === 'field' && inComponentDesc && activeField === 'description';
         if (input === 's' && !key.ctrl && !key.meta && !inDescriptionTextEntry && !inComponentDescTextEntry) {
-            // When the parent owns the source panel, delegate; otherwise fall
-            // back to the internal toggle for backward compat.
             if (onToggleSourceExternal) {
                 onToggleSourceExternal();
                 return;
             }
-            // Mutual exclusion with the rationale panel (Feature 11) — only when
-            // internally managed.
             setRationaleOpen(false);
             setRationaleScrollOffset(() => 0);
             setSourceOpen((o) => !o);
             return;
         }
-        // ── Rationale-panel scroll while internally open (legacy path) ─────────
-        // When the parent does not own the panel (no onTogglePropRationale prop),
-        // FieldEditor preserves its legacy in-place panel for backward compat
-        // with mounts that pre-date the lifted-panel refactor.
         if (rationaleOpen && !onTogglePropRationale) {
             const PANEL_HEIGHT = 12;
             const next = computeNextScrollOffset(rationaleScrollOffset, input, key, 9999, PANEL_HEIGHT);
@@ -449,10 +585,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             }
             return;
         }
-        // ── Rationale + component-rationale keybinds (`i` / `I`) ────────────────
-        // `i`/`I` are literal in every text-entry context: description editor,
-        // component-description editor, string/token default editor, and the
-        // values/allowedComponents add/edit text-entry.
         const inStringDefaultTextEntry = focusLevel === 'field' &&
             activeField === 'default' &&
             currentProp != null &&
@@ -463,29 +595,26 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             !inComponentDescTextEntry &&
             !inStringDefaultTextEntry &&
             !inValueListTextEntry;
-        if (input === 'i' && rationaleKeyAllowed) {
-            if (onTogglePropRationale) {
-                onTogglePropRationale();
-                return;
-            }
-            // Legacy in-place toggle (no parent callback wired).
+        if (input === propRationaleKey && rationaleKeyAllowed && onTogglePropRationale) {
+            onTogglePropRationale();
+            return;
+        }
+        if (input === 'i' && rationaleKeyAllowed && !onTogglePropRationale) {
             setSourceOpen(false);
             setRationaleScrollOffset(() => 0);
             setRationaleOpen((o) => !o);
             return;
         }
-        if (input === 'I' && rationaleKeyAllowed && onToggleComponentRationale) {
+        if (input === componentRationaleKey && rationaleKeyAllowed && onToggleComponentRationale) {
             onToggleComponentRationale();
             return;
         }
-        // ── Esc when source panel is open: close panel only, do not bubble ─────
         if (key.escape && sourceOpen) {
             setSourceOpen(false);
             return;
         }
         if (key.escape) {
             if (focusLevel === 'field') {
-                // Exit field editing back to prop/slot/component-description row level
                 if (inComponentDesc)
                     setFocusLevel('componentDescription');
                 else
@@ -493,8 +622,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 setActiveField(null);
                 return;
             }
-            // Row-level Esc: bounce focus back out of the panel via onExit.
-            // Falls back to onDiscard when the caller hasn't wired onExit.
             if (onExit) {
                 onExit();
             }
@@ -503,16 +630,12 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             }
             return;
         }
-        // ── Prop-level navigation (not inside a field) ───────────────────────────
-        // Arrows / j / k move between rows. Return enters field-edit at the FIRST
-        // field of the current prop (type). No auto-focus on description.
         if (focusLevel === 'prop') {
             if (key.upArrow || input === 'k') {
                 if (propIdx > 0) {
                     setPropIdx(propIdx - 1);
                 }
                 else {
-                    // From prop[0], k enters the component-description row above.
                     setFocusLevel('componentDescription');
                     setInSlots(false);
                     setInComponentDesc(true);
@@ -531,7 +654,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 return;
             }
             if (key.return && currentProp) {
-                // Enter field editing on the first field of this prop (type).
                 setFocusLevel('field');
                 setActiveField(propFields(currentProp)[0] ?? null);
                 setTextCursor(currentProp.description.length);
@@ -539,14 +661,11 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             }
             return;
         }
-        // ── Component-description row navigation ─────────────────────────────────
         if (focusLevel === 'componentDescription') {
             if (key.upArrow || input === 'k') {
-                // Already at the top-most row — stay put.
                 return;
             }
             if (key.downArrow || input === 'j') {
-                // Move down into the first prop row, or first slot row when no props.
                 if (props.length > 0) {
                     setFocusLevel('prop');
                     setPropIdx(0);
@@ -562,7 +681,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 return;
             }
             if (key.return) {
-                // Enter the single field — description text input.
                 setFocusLevel('field');
                 setActiveField('description');
                 setTextCursor(editorState.componentDescription.length);
@@ -570,9 +688,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             }
             return;
         }
-        // ── Slot-level navigation ────────────────────────────────────────────────
-        // Arrows / j / k move between rows. Return enters field-edit at the FIRST
-        // field of the slot (required). No auto-focus on description.
         if (focusLevel === 'slot') {
             if (key.upArrow || input === 'k') {
                 if (slotIdx > 0) {
@@ -599,23 +714,16 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             }
             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);
             const isDescriptionTextEntry = activeField === 'description';
-            // String/token defaults are also text-entry; j/k must type literals
-            // there too (consistency with description). boolean/enum defaults use
-            // ←/→ pickers so j/k can keep cycling fields.
             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;
-            // ── Inside values: arrow keys AND j/k navigate BETWEEN VALUES, not
-            //    between fields. Reorder is K/J (capital). Same logic for prop
-            //    enum $values and slot $allowedComponents.
             if (isValuesNav) {
                 const vals = activeField === 'values' && currentProp
                     ? currentProp.values
@@ -623,23 +731,24 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                         ? 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') {
-                        setValueCursor((c) => Math.max(0, c - 1));
-                        return;
+                        if (valueCursor > 0) {
+                            setValueCursor((c) => Math.max(0, c - 1));
+                            return;
+                        }
                     }
-                    if (arrowDown || input === 'j') {
-                        setValueCursor((c) => Math.max(0, Math.min(vals.length - 1, c + 1)));
-                        return;
+                    else if (arrowDown || input === 'j') {
+                        if (valueCursor < vals.length - 1) {
+                            setValueCursor((c) => Math.min(vals.length - 1, c + 1));
+                            return;
+                        }
                     }
                 }
             }
-            // ── Field cycling within the current prop/slot.
-            //    Arrows always cycle (including from description, which means in
-            //    description-active state arrows leave text-entry to navigate fields
-            //    of the SAME prop). j/k only cycle when NOT in description, so that
-            //    description preserves literal text-entry for those characters. Use
-            //    Esc to leave the current prop and return to row-level navigation.
-            if (!isValuesNav) {
+            {
                 const navUp = arrowUp || (!isDescriptionTextEntry && !isDefaultTextEntry && input === 'k');
                 const navDown = arrowDown || (!isDescriptionTextEntry && !isDefaultTextEntry && input === 'j');
                 if ((navUp || navDown) && fields.length > 0) {
@@ -658,14 +767,22 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                         setTextCursor(desc.length);
                     }
                     else if (next === 'default' && currentProp) {
-                        // Land cursor at end of any string-typed default for ergonomic typing.
                         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;
                 }
             }
-            // ── Picker fields (left/right cycle) ──────────────────────────────────
             if (activeField === 'type' && (key.leftArrow || key.rightArrow) && currentProp) {
                 const options = CDF_PROPERTY_TYPES;
                 const idx = options.indexOf(currentProp.type);
@@ -673,7 +790,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     ? 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')
@@ -703,7 +819,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 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));
@@ -715,13 +830,11 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 }
                 return;
             }
-            // ── $default editing per type ─────────────────────────────────────────
             if (activeField === 'default' && currentProp) {
                 const setProp = (next) => {
                     const nextProps = props.map((p, i) => (i === propIdx ? next : p));
                     commit({ ...editorState, props: nextProps });
                 };
-                // boolean: tri-state cycle (unset → true → false → unset).
                 if (currentProp.type === 'boolean' && (key.leftArrow || key.rightArrow)) {
                     const cycle = [null, true, false];
                     const curIdx = cycle.findIndex((v) => v === currentProp.default);
@@ -730,7 +843,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     setProp({ ...currentProp, default: cycle[nextIdx] });
                     return;
                 }
-                // enum: cycle through prop.values plus (unset).
                 if (currentProp.type === 'enum' && (key.leftArrow || key.rightArrow)) {
                     const opts = [null, ...currentProp.values];
                     const cur = typeof currentProp.default === 'string' ? currentProp.default : null;
@@ -740,7 +852,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     setProp({ ...currentProp, default: opts[nextIdx] });
                     return;
                 }
-                // string/token: text input. Mirrors description input subroutine.
                 if (currentProp.type === 'string' || currentProp.type === 'token') {
                     const cur = typeof currentProp.default === 'string' ? currentProp.default : '';
                     const setVal = (next) => setProp({ ...currentProp, default: next === '' ? null : next });
@@ -773,7 +884,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 }
                 return;
             }
-            // ── Description text input ─────────────────────────────────────────────
             if (activeField === 'description') {
                 const getDesc = () => inComponentDesc
                     ? editorState.componentDescription
@@ -829,15 +939,36 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 }
                 return;
             }
-            // ── $allowedComponents inline manipulation (slot-level) ──────────────
-            // Mirrors the $values block exactly, but operates on the slot's
-            // allowedComponents list.
             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('');
@@ -870,22 +1001,18 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                 }
                 return;
             }
-            // ── $values inline manipulation (flat — no extra Return) ───────────────
             if (activeField === 'values' && currentProp) {
                 const vals = currentProp.values;
-                // a — add new value (inline text-entry)
                 if (input === 'a') {
                     setEditingValue({ mode: 'add' });
                     setValueText('');
                     return;
                 }
-                // e — edit value at cursor (inline text-entry, pre-filled)
                 if (input === 'e' && vals.length > 0) {
                     setEditingValue({ mode: 'edit', index: valueCursor });
                     setValueText(vals[valueCursor] ?? '');
                     return;
                 }
-                // r — remove value at cursor
                 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));
@@ -893,7 +1020,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     setValueCursor((c) => Math.max(0, Math.min(c, nextVals.length - 1)));
                     return;
                 }
-                // K (Shift+K) — move value up
                 if (input === 'K' && valueCursor > 0) {
                     const nextVals = [...vals];
                     [nextVals[valueCursor - 1], nextVals[valueCursor]] = [nextVals[valueCursor], nextVals[valueCursor - 1]];
@@ -902,7 +1028,6 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     setValueCursor((c) => c - 1);
                     return;
                 }
-                // J (Shift+J) — move value down
                 if (input === 'J' && valueCursor < vals.length - 1) {
                     const nextVals = [...vals];
                     [nextVals[valueCursor], nextVals[valueCursor + 1]] = [nextVals[valueCursor + 1], nextVals[valueCursor]];
@@ -916,18 +1041,14 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
             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." })] }));
+        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: "yellow", children: [_jsx(Text, { bold: true, color: "yellow", children: "FIELD EDITOR \u2014 no fields" }), _jsx(Text, { color: "yellow", 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" })] }));
+        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" })] }));
     }
-    // When $properties is empty but $slots exist, surface the same warning
-    // prominently in the panel so the user understands why the component looks
-    // sparse — and can act on it (manually add a prop or reject).
-    const hasEmptyProperties = props.length === 0;
+    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';
@@ -948,36 +1069,33 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
         if (rationaleOpen) {
             return 'jk/Ctrl+u/d scroll  i/Esc close  rationale panel';
         }
-        return '↑↓/jk navigate rows  Enter edit fields  s source  i prop rationale  I component rationale  ? help  Ctrl+S save  Esc exit 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 = [];
-    // Component-level $description always renders first so it's reachable as
-    // the topmost navigable row, even when empty (the operator can populate it).
     rows.push({ kind: 'component-description' });
     if (props.length > 0) {
-        rows.push({ kind: 'header', label: `── $properties (${props.length}) ` });
+        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}) ` });
+        rows.push({ kind: 'header', label: `── SLOTS (${slots.length}) `, section: 'slots' });
         slots.forEach((_, i) => rows.push({ kind: 'slot', idx: i }));
     }
-    // Scroll to keep selected row visible
     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); // title + hint bar + border
+    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 ? 'yellow' : 'cyan', children: [_jsx(Text, { bold: true, color: hasEmptyProperties ? 'yellow' : 'cyan', children: 'FIELDS [Ctrl+S save · Esc discard]' }), hasEmptyProperties && (_jsx(Text, { color: "yellow", 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) => {
+    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, { dimColor: true, children: row.label }, `header-${i}`));
+                        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 ? 'white' : 'cyan', bold: isSelected, backgroundColor: isSelected ? 'blue' : undefined, children: ' component-$description ' }) }), isEditing ? (_jsx(Box, { paddingLeft: 2, flexDirection: "row", children: _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: "cyan", 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 ? 'green' : undefined, dimColor: !desc, children: desc || '(none — Return to edit)' }) }))] }, `component-description-${i}`));
+                        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];
@@ -985,10 +1103,16 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                         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}`));
                     }
-                    // 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, valueCursor: valueCursor, cursorVisible: cursorVisible, editingValue: isSelected ? editingValue : null, valueText: isSelected ? valueText : '', width: innerWidth }, `slot-${row.idx}`));
+                    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 &&
                 (() => {
@@ -1003,5 +1127,5 @@ export function FieldEditor({ value, width, height, active = true, onChange, onS
                     }
                     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: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", 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: '  i                toggle prop rationale panel' }), _jsx(Text, { children: '  I                toggle component rationale panel' }), _jsx(Text, { children: '  d                toggle removed-components panel (wizard final-review)' }), _jsx(Text, { children: '  ?                toggle this overlay' }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "press ? or Esc to close" })] })), validationError && _jsx(Text, { color: "red", children: '✗ ' + validationError }), _jsx(Text, { dimColor: true, children: modeLabel })] }));
+                })(), 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 })] }));
 }