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

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

@@ -0,0 +1,497 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { computeAllClosures, findSharedDeps, } from '../../../composite-closure.js';
+import { previewBadge } from './Sidebar.js';
+import { PALETTE } from '../theme.js';
+const GLYPH_EXPAND_COLLAPSED = '▸';
+const GLYPH_EXPAND_EXPANDED = '▾';
+const GLYPH_TREE_MID = '├─';
+const GLYPH_TREE_LAST = '└─';
+const GLYPH_WARN = '⚠';
+const GLYPH_ERROR = '✗';
+function isEmpty(entry) {
+    return Object.keys(entry.$properties ?? {}).length === 0 && Object.keys(entry.$slots ?? {}).length === 0;
+}
+function aggregateGlyphFor(closure, statusByName) {
+    let worst = 'ok';
+    for (const node of closure.nodes) {
+        const s = statusByName.get(node.name);
+        if (!s)
+            continue;
+        if (s === 'error') {
+            worst = 'error';
+            break;
+        }
+        if (s === 'warning')
+            worst = 'warning';
+    }
+    if (worst === 'error')
+        return GLYPH_ERROR;
+    if (worst === 'warning')
+        return GLYPH_WARN;
+    return null;
+}
+export function buildVisibleRows(props) {
+    const { items, cycleParticipants, alwaysExpanded, showFlatTier, viewMode, graph, filterVisibleKeys } = props;
+    if (viewMode === 'flat') {
+        const rows = [];
+        if (items.length === 0)
+            return rows;
+        const itemByKey = new Map(items.map((it, idx) => [it.key, { it, idx }]));
+        const cycleKeys = [];
+        const otherKeys = [];
+        for (const it of items) {
+            if (cycleParticipants.has(it.key))
+                cycleKeys.push(it.key);
+            else
+                otherKeys.push(it.key);
+        }
+        cycleKeys.sort();
+        otherKeys.sort();
+        const otherKeySet = new Set(otherKeys);
+        const flatGraph = graph.filter((n) => otherKeySet.has(n.name));
+        const closures = computeAllClosures(flatGraph);
+        const depCountByKey = new Map();
+        for (const [name, closure] of closures) {
+            if (closure.nodes.length > 1)
+                depCountByKey.set(name, closure.nodes.length - 1);
+        }
+        for (const key of cycleKeys) {
+            const rec = itemByKey.get(key);
+            if (!rec)
+                continue;
+            rows.push({
+                kind: 'cycle',
+                key: `cycle:${key}`,
+                label: `${GLYPH_WARN} ${key} (cycle)`,
+                indent: 0,
+                itemIdx: rec.idx,
+            });
+        }
+        for (const key of otherKeys) {
+            const rec = itemByKey.get(key);
+            if (!rec)
+                continue;
+            const dep = depCountByKey.get(key);
+            const suffix = dep !== undefined ? ` (${dep} dep${dep === 1 ? '' : 's'})` : '';
+            rows.push({
+                kind: 'flat',
+                key: `flat:${key}`,
+                label: `${key}${suffix}`,
+                indent: 0,
+                itemIdx: rec.idx,
+            });
+        }
+        return rows;
+    }
+    const rows = [];
+    if (items.length === 0)
+        return rows;
+    const itemByKey = new Map(items.map((it, idx) => [it.key, { it, idx }]));
+    const statusByName = new Map(items.map((it) => [it.key, it.status]));
+    const cycleKeys = [];
+    const emptyKeys = [];
+    const otherKeys = [];
+    for (const it of items) {
+        if (cycleParticipants.has(it.key))
+            cycleKeys.push(it.key);
+        else if (isEmpty(it.entry))
+            emptyKeys.push(it.key);
+        else
+            otherKeys.push(it.key);
+    }
+    cycleKeys.sort();
+    emptyKeys.sort();
+    const seenCycleTierChildOccurrence = new Set();
+    const computeCycleMemberSubtree = (root) => {
+        const out = [];
+        const visited = new Set([root]);
+        const queue = [{ name: root, depth: 0 }];
+        while (queue.length > 0) {
+            const cur = queue.shift();
+            const parentItem = itemByKey.get(cur.name)?.it;
+            if (!parentItem)
+                continue;
+            const slotTargets = [];
+            const seenTarget = new Set();
+            for (const slot of Object.values(parentItem.entry.$slots ?? {})) {
+                const allowed = Array.isArray(slot?.$allowedComponents)
+                    ? slot.$allowedComponents.filter((v) => typeof v === 'string')
+                    : [];
+                for (const target of allowed) {
+                    if (!itemByKey.has(target))
+                        continue;
+                    if (seenTarget.has(target))
+                        continue;
+                    seenTarget.add(target);
+                    slotTargets.push(target);
+                }
+            }
+            slotTargets.sort();
+            for (const target of slotTargets) {
+                if (visited.has(target))
+                    continue;
+                visited.add(target);
+                const isCycleMember = cycleParticipants.has(target);
+                out.push({ name: target, depth: cur.depth + 1, isCycleMember });
+                queue.push({ name: target, depth: cur.depth + 1 });
+            }
+        }
+        return out;
+    };
+    for (const key of cycleKeys) {
+        const rec = itemByKey.get(key);
+        if (!rec)
+            continue;
+        const expanded = alwaysExpanded ? true : props.expandedGroups.has(key);
+        const glyphExpand = expanded ? GLYPH_EXPAND_EXPANDED : GLYPH_EXPAND_COLLAPSED;
+        rows.push({
+            kind: 'cycle',
+            key: `cycle:${key}`,
+            label: `${glyphExpand} ${GLYPH_WARN} ${key} (cycle)`,
+            indent: 0,
+            itemIdx: rec.idx,
+            rootName: key,
+        });
+        if (!expanded)
+            continue;
+        const subtree = computeCycleMemberSubtree(key);
+        subtree.forEach((child, i) => {
+            const isLast = i === subtree.length - 1;
+            const glyph = isLast ? GLYPH_TREE_LAST : GLYPH_TREE_MID;
+            let sharedSuffix = false;
+            if (seenCycleTierChildOccurrence.has(child.name))
+                sharedSuffix = true;
+            else
+                seenCycleTierChildOccurrence.add(child.name);
+            const childRec = itemByKey.get(child.name);
+            const indent = '  '.repeat(Math.max(0, child.depth - 1));
+            const labelName = child.isCycleMember ? `${GLYPH_WARN} ${child.name} (cycle)` : child.name;
+            rows.push({
+                kind: 'group-child',
+                key: `cycle-child:${key}:${child.name}`,
+                label: `${indent}${glyph} ${labelName}${sharedSuffix ? ' (shared)' : ''}`,
+                indent: child.depth,
+                sharedSuffix,
+                cycleChild: child.isCycleMember || undefined,
+                itemIdx: childRec?.idx ?? -1,
+                rootName: key,
+            });
+        });
+    }
+    for (const key of emptyKeys) {
+        const rec = itemByKey.get(key);
+        if (!rec)
+            continue;
+        rows.push({
+            kind: 'empty',
+            key: `empty:${key}`,
+            label: `${key} (empty)`,
+            indent: 0,
+            itemIdx: rec.idx,
+        });
+    }
+    const otherKeySet = new Set(otherKeys);
+    const subgraph = graph.filter((n) => otherKeySet.has(n.name));
+    const closures = computeAllClosures(subgraph);
+    const sharedDeps = findSharedDeps(closures);
+    const hasCycleDepDirect = (name) => {
+        const it = itemByKey.get(name)?.it;
+        if (!it)
+            return false;
+        for (const slot of Object.values(it.entry.$slots ?? {})) {
+            const allowed = Array.isArray(slot?.$allowedComponents)
+                ? slot.$allowedComponents.filter((v) => typeof v === 'string')
+                : [];
+            for (const target of allowed) {
+                if (cycleParticipants.has(target))
+                    return true;
+            }
+        }
+        return false;
+    };
+    const rootNames = [...closures.keys()].sort();
+    const standaloneRoots = [];
+    const groupRoots = [];
+    for (const root of rootNames) {
+        const c = closures.get(root);
+        const promotesForCycle = hasCycleDepDirect(root);
+        if (c.nodes.length <= 1 && !promotesForCycle)
+            standaloneRoots.push(root);
+        else
+            groupRoots.push(root);
+    }
+    const seenSharedOccurrence = new Set();
+    const seenCycleChildOccurrence = new Set();
+    for (const root of groupRoots) {
+        const closure = closures.get(root);
+        let injectedCycleCount = 0;
+        const seenInject = new Set();
+        const countInjections = (parentName) => {
+            const parentItem = itemByKey.get(parentName)?.it;
+            if (!parentItem)
+                return;
+            for (const slot of Object.values(parentItem.entry.$slots ?? {})) {
+                const allowed = Array.isArray(slot?.$allowedComponents)
+                    ? slot.$allowedComponents.filter((v) => typeof v === 'string')
+                    : [];
+                for (const target of allowed) {
+                    if (!cycleParticipants.has(target))
+                        continue;
+                    const key = `${parentName}→${target}`;
+                    if (seenInject.has(key))
+                        continue;
+                    seenInject.add(key);
+                    injectedCycleCount += 1;
+                }
+            }
+        };
+        countInjections(root);
+        for (const n of closure.nodes)
+            if (n.name !== root)
+                countInjections(n.name);
+        const depCount = closure.nodes.length - 1 + injectedCycleCount;
+        const expanded = alwaysExpanded ? true : props.expandedGroups.has(root);
+        const glyphExpand = expanded ? GLYPH_EXPAND_EXPANDED : GLYPH_EXPAND_COLLAPSED;
+        const aggregate = expanded ? null : aggregateGlyphFor(closure, statusByName);
+        const rec = itemByKey.get(root);
+        rows.push({
+            kind: 'group-root',
+            key: `root:${root}`,
+            label: `${glyphExpand} ${root} (${depCount} dep${depCount === 1 ? '' : 's'})${aggregate ? ' ' + aggregate : ''}`,
+            indent: 0,
+            aggregateGlyph: aggregate,
+            itemIdx: rec.idx,
+            rootName: root,
+        });
+        if (!expanded)
+            continue;
+        const closureChildren = closure.nodes
+            .filter((n) => n.name !== root)
+            .slice()
+            .sort((a, b) => a.depth - b.depth || a.name.localeCompare(b.name));
+        const injectedChildren = [];
+        const emitCycleChildrenOf = (parentName, parentDepth) => {
+            const parentItem = itemByKey.get(parentName)?.it;
+            if (!parentItem)
+                return;
+            const seen = new Set();
+            for (const slot of Object.values(parentItem.entry.$slots ?? {})) {
+                const allowed = Array.isArray(slot?.$allowedComponents)
+                    ? slot.$allowedComponents.filter((v) => typeof v === 'string')
+                    : [];
+                for (const target of allowed) {
+                    if (!cycleParticipants.has(target))
+                        continue;
+                    if (seen.has(target))
+                        continue;
+                    seen.add(target);
+                    injectedChildren.push({
+                        name: target,
+                        depth: parentDepth + 1,
+                        isCycleChild: true,
+                    });
+                }
+            }
+        };
+        emitCycleChildrenOf(root, 0);
+        for (const c of closureChildren) {
+            injectedChildren.push({ name: c.name, depth: c.depth, isCycleChild: false });
+            emitCycleChildrenOf(c.name, c.depth);
+        }
+        injectedChildren.forEach((child, i) => {
+            const isLast = i === injectedChildren.length - 1;
+            const glyph = isLast ? GLYPH_TREE_LAST : GLYPH_TREE_MID;
+            let sharedSuffix = false;
+            if (child.isCycleChild) {
+                if (seenCycleChildOccurrence.has(child.name))
+                    sharedSuffix = true;
+                else
+                    seenCycleChildOccurrence.add(child.name);
+            }
+            else if (sharedDeps.has(child.name)) {
+                if (seenSharedOccurrence.has(child.name))
+                    sharedSuffix = true;
+                else
+                    seenSharedOccurrence.add(child.name);
+            }
+            const childRec = itemByKey.get(child.name);
+            const indent = '  '.repeat(Math.max(0, child.depth - 1));
+            const labelName = child.isCycleChild ? `${GLYPH_WARN} ${child.name} (cycle)` : child.name;
+            rows.push({
+                kind: 'group-child',
+                key: `child:${root}:${child.name}`,
+                label: `${indent}${glyph} ${labelName}${sharedSuffix ? ' (shared)' : ''}`,
+                indent: child.depth,
+                sharedSuffix,
+                cycleChild: child.isCycleChild || undefined,
+                itemIdx: childRec?.idx ?? -1,
+                rootName: root,
+            });
+        });
+    }
+    for (const name of standaloneRoots) {
+        const rec = itemByKey.get(name);
+        if (!rec)
+            continue;
+        rows.push({
+            kind: 'standalone',
+            key: `stand:${name}`,
+            label: name,
+            indent: 0,
+            itemIdx: rec.idx,
+        });
+    }
+    if (showFlatTier) {
+        const flatNames = otherKeys.slice().sort();
+        if (flatNames.length > 0) {
+            rows.push({
+                kind: 'flat-header',
+                key: 'flat-header',
+                label: '── All components ──',
+                indent: 0,
+                itemIdx: -1,
+            });
+            for (const name of flatNames) {
+                const rec = itemByKey.get(name);
+                if (!rec)
+                    continue;
+                rows.push({
+                    kind: 'flat',
+                    key: `flat:${name}`,
+                    label: name,
+                    indent: 0,
+                    itemIdx: rec.idx,
+                });
+            }
+        }
+    }
+    if (filterVisibleKeys !== undefined) {
+        return rows.filter((row) => {
+            if (row.itemIdx < 0)
+                return true;
+            const name = items[row.itemIdx]?.key;
+            if (name === undefined)
+                return true;
+            return filterVisibleKeys.has(name);
+        });
+    }
+    return rows;
+}
+export function visibleItemOrder(props) {
+    return buildVisibleRows(props)
+        .filter((row) => row.itemIdx >= 0)
+        .map((row) => row.itemIdx);
+}
+function rowColor(row, aggregate) {
+    if (row.kind === 'cycle')
+        return PALETTE.warning;
+    if (row.kind === 'group-child' && row.cycleChild)
+        return PALETTE.warning;
+    if (row.kind === 'empty')
+        return PALETTE.warning;
+    if (row.kind === 'group-root' && aggregate === GLYPH_ERROR)
+        return PALETTE.error;
+    if (row.kind === 'group-root' && aggregate === GLYPH_WARN)
+        return PALETTE.warning;
+    return undefined;
+}
+export function labelStyleFor(input) {
+    const { row, isCursor, wouldDim } = input;
+    if (isCursor) {
+        return { color: PALETTE.info, bold: true, dim: false };
+    }
+    return {
+        color: rowColor(row, row.aggregateGlyph),
+        bold: false,
+        dim: wouldDim,
+    };
+}
+export function selectionGlyphStyleFor(selState, isCycleRow) {
+    if (selState === 'accepted') {
+        return { glyph: '[✓]', color: PALETTE.success, dim: false, bold: isCycleRow };
+    }
+    if (selState === 'rejected') {
+        return { glyph: '[✗]', color: PALETTE.error, dim: false, bold: isCycleRow };
+    }
+    if (selState === 'undecided') {
+        return { glyph: '[ ]', color: PALETTE.muted, dim: !isCycleRow, bold: false };
+    }
+    return { glyph: null, color: undefined, dim: false, bold: false };
+}
+export function inheritanceGlyphStyleFor(input) {
+    const { status, isOwn, isCursor } = input;
+    if (status === 'error') {
+        return { glyph: GLYPH_ERROR, color: PALETTE.error, dim: !isCursor && !isOwn, bold: isCursor };
+    }
+    if (status === 'warning') {
+        return { glyph: GLYPH_WARN, color: PALETTE.warning, dim: !isCursor && !isOwn, bold: isCursor };
+    }
+    return { glyph: null, color: undefined, dim: false, bold: false };
+}
+export function GroupedSidebar(props) {
+    const { items, cycleParticipants = new Set(), expandedGroups, focused, width, selectedIdx, selectedRowIdx, renderStatusByKey, previewAnnotationByKey, scrollOffset, visibleCount, alwaysExpanded, showFlatTier, viewMode, selectionStateByKey, aiFlaggedByKey, dimPredicate, visibleRows: providedRows, graph, filterVisibleKeys, } = props;
+    const allRows = providedRows ??
+        buildVisibleRows({
+            items,
+            cycleParticipants,
+            expandedGroups,
+            alwaysExpanded,
+            showFlatTier,
+            viewMode,
+            graph,
+            filterVisibleKeys,
+        });
+    const windowed = scrollOffset !== undefined && visibleCount !== undefined;
+    const start = windowed ? Math.max(0, scrollOffset ?? 0) : 0;
+    const end = windowed ? start + (visibleCount ?? allRows.length) : allRows.length;
+    const rows = windowed ? allRows.slice(start, end) : allRows;
+    const showScrollUp = windowed && start > 0;
+    const showScrollDown = windowed && end < allRows.length;
+    return (_jsxs(Box, { flexDirection: "column", width: width, flexShrink: 0, borderStyle: "single", borderColor: focused ? 'white' : undefined, children: [showScrollUp && _jsx(Text, { dimColor: true, children: "\u25B2" }), rows.map((row, i) => {
+                const absoluteRowIdx = start + i;
+                const isSelected = selectedRowIdx !== undefined
+                    ? absoluteRowIdx === selectedRowIdx && row.itemIdx >= 0
+                    : row.itemIdx >= 0 && row.itemIdx === selectedIdx;
+                const itemName = row.itemIdx >= 0 ? items[row.itemIdx]?.key : undefined;
+                const rs = itemName ? renderStatusByKey?.get(itemName) : undefined;
+                const badge = itemName ? previewBadge(previewAnnotationByKey?.get(itemName)) : null;
+                const showInheritance = rs !== undefined && row.kind !== 'cycle' && row.kind !== 'empty' && row.kind !== 'group-root';
+                const supportsSelectionGlyph = selectionStateByKey !== undefined &&
+                    itemName !== undefined &&
+                    (row.kind === 'standalone' ||
+                        row.kind === 'group-root' ||
+                        row.kind === 'group-child' ||
+                        row.kind === 'flat' ||
+                        row.kind === 'cycle');
+                const selState = supportsSelectionGlyph ? (selectionStateByKey.get(itemName) ?? 'undecided') : undefined;
+                const isCycleRow = row.kind === 'cycle';
+                const selStyle = selectionGlyphStyleFor(selState, isCycleRow);
+                const selGlyph = selStyle.glyph;
+                const selColor = selStyle.color;
+                const selDim = selStyle.dim;
+                const selBold = selStyle.bold;
+                const aiFlagged = aiFlaggedByKey !== undefined &&
+                    itemName !== undefined &&
+                    row.kind !== 'flat-header' &&
+                    aiFlaggedByKey.get(itemName) === true;
+                const canDim = dimPredicate !== undefined &&
+                    itemName !== undefined &&
+                    row.kind !== 'cycle' &&
+                    row.kind !== 'group-root' &&
+                    row.kind !== 'flat-header' &&
+                    dimPredicate(itemName);
+                const isSynthetic = row.kind === 'flat-header';
+                const isCursor = isSelected && focused;
+                const wouldDim = row.kind === 'flat-header' || row.sharedSuffix === true || canDim;
+                const labelStyle = labelStyleFor({ row, isCursor, wouldDim });
+                const inheritanceStyle = inheritanceGlyphStyleFor({
+                    status: showInheritance ? rs?.status : undefined,
+                    isOwn: rs?.isOwn ?? false,
+                    isCursor,
+                });
+                return (_jsxs(Box, { children: [isCursor ? (_jsx(Text, { color: PALETTE.info, bold: true, children: '▶' })) : (_jsx(Text, { children: " " })), badge ? (_jsx(Text, { color: badge.color, bold: badge.bold, dimColor: badge.dim, children: badge.char })) : (_jsx(Text, { children: " " })), selectionStateByKey !== undefined &&
+                            (selGlyph && !isSynthetic ? (_jsx(Text, { color: selColor, dimColor: selDim, bold: selBold, children: ' ' + selGlyph })) : (_jsx(Text, { children: '    ' }))), aiFlaggedByKey !== undefined &&
+                            (aiFlagged ? (_jsx(Text, { color: PALETTE.warning, bold: true, children: ' [×]' })) : (_jsx(Text, { children: '    ' }))), _jsxs(Text, { color: labelStyle.color, bold: labelStyle.bold, inverse: isSelected && focused, underline: isSelected && !focused, dimColor: labelStyle.dim, wrap: "truncate", children: [' ', row.label] }), inheritanceStyle.glyph && (_jsx(Text, { color: inheritanceStyle.color, bold: inheritanceStyle.bold, dimColor: inheritanceStyle.dim, children: ' ' + inheritanceStyle.glyph }))] }, row.key));
+            }), showScrollDown && _jsx(Text, { dimColor: true, children: "\u25BC" })] }));
+}

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

@@ -1,7 +1,19 @@
 import React from 'react';
+export type HelpSection = {
+    title: string;
+    entries: {
+        keys: string;
+        label: string;
+    }[];
+};
 type HelpOverlayProps = {
     mode: 'analyze' | 'validate' | 'review';
+    sections?: undefined;
+    onClose: () => void;
+} | {
+    mode?: undefined;
+    sections: HelpSection[];
     onClose: () => void;
 };
-export declare function HelpOverlay({ mode, onClose }: HelpOverlayProps): React.ReactElement;
+export declare function HelpOverlay(props: HelpOverlayProps): React.ReactElement;
 export {};

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

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

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { PALETTE } from '../theme.js';
 import { Box, Text } from 'ink';
 import { useUndo } from '../hooks/useUndo.js';
 import { useImmediateInput } from '../hooks/useImmediateInput.js';
@@ -13,7 +14,6 @@ export function JsonEditor({ value, width, height, onSave, onDiscard }) {
     const [validationError, setValidationError] = useState(null);
     const { lines, cursorRow, cursorCol } = undo.current;
     const scrollCol = 0;
-    // Sync scroll with cursor — pure derivation, no setState needed when within bounds
     let effectiveScrollRow = scrollRow;
     if (cursorRow < scrollRow)
         effectiveScrollRow = cursorRow;
@@ -117,7 +117,7 @@ export function JsonEditor({ value, width, height, onSave, onDiscard }) {
     });
     const innerWidth = Math.max(1, width - 2);
     const visibleLines = lines.slice(effectiveScrollRow, effectiveScrollRow + height);
-    return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: "white", children: [_jsx(Text, { bold: true, children: 'EDIT [EDITING — Ctrl+S save · Esc discard]' }), visibleLines.map((line, displayRow) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, borderStyle: "single", borderColor: PALETTE.inverse, children: [_jsx(Text, { bold: true, children: 'EDIT [EDITING — Ctrl+S save · Esc discard]' }), visibleLines.map((line, displayRow) => {
                 const actualRow = displayRow + effectiveScrollRow;
                 const displayLine = line.slice(scrollCol, scrollCol + innerWidth);
                 if (actualRow === cursorRow) {
@@ -127,5 +127,5 @@ export function JsonEditor({ value, width, height, onSave, onDiscard }) {
                     return (_jsxs(Box, { children: [_jsx(Text, { children: beforeCursor }), _jsx(Text, { inverse: true, children: cursorChar }), _jsx(Text, { children: afterCursor })] }, displayRow));
                 }
                 return _jsx(Text, { children: displayLine }, displayRow);
-            }), validationError && _jsx(Text, { color: "red", children: '✗ Invalid JSON: ' + validationError })] }));
+            }), validationError && _jsx(Text, { color: PALETTE.error, children: '✗ Invalid JSON: ' + validationError })] }));
 }

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { LineageEntry, LineageJumpable } from '../../../../import/tui/hooks/useLineage.js';
+export interface LineagePanelProps {
+    focusedComponentKey: string;
+    entries: LineageEntry[];
+    /** Index into the jumpables list — NOT into entries. */
+    cursor: number;
+    jumpables: LineageJumpable[];
+    /** Max entry rows rendered at once. Larger lineages window around the cursor. */
+    maxRows?: number;
+    /** Constrain the panel box to a fixed column width (e.g. the sidebar slot). */
+    width?: number;
+}
+export declare function LineagePanel({ focusedComponentKey, entries, cursor, jumpables, maxRows, width, }: LineagePanelProps): React.ReactElement;

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

@@ -0,0 +1,22 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { PALETTE } from '../theme.js';
+import { Text } from 'ink';
+import { GotoBanner } from './GotoBanner.js';
+const LINEAGE_FOOTER_HINT = '[↑/↓] move · [Enter] jump · [l/Esc] close';
+export function LineagePanel({ focusedComponentKey, entries, cursor, jumpables, maxRows, width, }) {
+    const rows = entries.map((e) => ({
+        label: e.label,
+        jumpTarget: e.kind === 'ancestor' || e.kind === 'descendant' ? e.jumpTarget : '',
+        kind: e.kind,
+    }));
+    const cursorRowIndex = jumpables[cursor]?.i ?? 0;
+    return (_jsx(GotoBanner, { title: `Lineage: ${focusedComponentKey}`, rows: rows, cursor: cursor, cursorRowIndex: cursorRowIndex, maxRows: maxRows, width: width, footerHint: LINEAGE_FOOTER_HINT, renderRow: (row, i, isCursor) => {
+            if (row.kind === 'section') {
+                return (_jsxs(Text, { bold: true, children: ['  ', row.label] }, i));
+            }
+            if (row.kind === 'empty') {
+                return (_jsxs(Text, { children: [_jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: ' ' + row.label })] }, i));
+            }
+            return (_jsxs(Text, { children: [isCursor ? (_jsx(Text, { color: PALETTE.info, bold: true, children: '▶' })) : (_jsx(Text, { children: " " })), _jsx(Text, { inverse: isCursor, children: ' ' + row.label })] }, i));
+        } }));
+}

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

@@ -22,13 +22,6 @@ type RenderedLine = {
 } | {
     kind: 'blank';
 };
-/**
- * Flatten `rows` to a list of rendered lines so scrollOffset slicing matches
- * what the operator sees. Layout per row:
- *   <name>           ← bold
- *   <wrapped text>   ← one or more lines
- *   <blank>          ← spacer (omitted after the final row)
- */
 export declare function renderRationaleLines(rows: RationaleRow[], innerWidth: number): RenderedLine[];
 export declare function RationalePanel({ componentName, rows, scrollOffset, width, height, active, }: RationalePanelProps): React.ReactElement;
 export {};