@iaforged/context-code 1.1.7 → 1.2.1

package/dist/src/components/ThemeBrowser.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from '../ink.js';
+import { useTheme } from './design-system/ThemeProvider.js';
+import { loadAllThemes, resolveTheme } from '../utils/themes/index.js';
+const PREVIEW_TOKENS = [
+    'claude',
+    'success',
+    'error',
+    'warning',
+    'text',
+    'background',
+];
+const SOURCE_LABEL = {
+    cli: 'CLI',
+    opencode: 'Opencode',
+    user: 'User',
+};
+const SOURCE_ORDER = ['cli', 'opencode', 'user'];
+function buildRows(themes) {
+    const grouped = {
+        cli: [],
+        opencode: [],
+        user: [],
+    };
+    for (const t of themes)
+        grouped[t.source].push(t);
+    const rows = [];
+    const selectables = [];
+    for (const src of SOURCE_ORDER) {
+        const list = grouped[src];
+        if (list.length === 0)
+            continue;
+        rows.push({ kind: 'header', source: src });
+        for (const theme of list) {
+            const selectableIndex = selectables.length;
+            selectables.push(theme);
+            rows.push({ kind: 'item', theme, selectableIndex });
+        }
+    }
+    return { rows, selectables };
+}
+function ThemePreview({ json, mode, }) {
+    const colors = useMemo(() => resolveTheme(json, mode), [json, mode]);
+    return (_jsx(Box, { children: PREVIEW_TOKENS.map(token => {
+            const c = colors[token];
+            return (_jsx(Text, { color: c ?? 'rgb(128,128,128)', children: '█' }, token));
+        }) }));
+}
+export function ThemeBrowser({ onSelect, onCancel, initialThemeId, mode = 'dark', }) {
+    const [themes, setThemes] = useState(null);
+    const [error, setError] = useState(null);
+    const [cursor, setCursor] = useState(0);
+    // Keep useTheme so this component re-renders if the live theme changes.
+    useTheme();
+    useEffect(() => {
+        let cancelled = false;
+        loadAllThemes()
+            .then(loaded => {
+            if (cancelled)
+                return;
+            setThemes(loaded);
+        })
+            .catch((e) => {
+            if (cancelled)
+                return;
+            setError(e instanceof Error ? e.message : String(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const { rows, selectables } = useMemo(() => buildRows(themes ?? []), [themes]);
+    // Position cursor on initialThemeId once themes are available.
+    useEffect(() => {
+        if (!initialThemeId || selectables.length === 0)
+            return;
+        const idx = selectables.findIndex(t => t.id === initialThemeId);
+        if (idx >= 0)
+            setCursor(idx);
+    }, [initialThemeId, selectables]);
+    useInput((input, key) => {
+        if (key.escape || input === 'q') {
+            onCancel();
+            return;
+        }
+        if (selectables.length === 0)
+            return;
+        if (key.upArrow || input === 'k') {
+            setCursor(c => (c - 1 + selectables.length) % selectables.length);
+            return;
+        }
+        if (key.downArrow || input === 'j') {
+            setCursor(c => (c + 1) % selectables.length);
+            return;
+        }
+        if (key.return) {
+            const picked = selectables[cursor];
+            if (picked)
+                onSelect(picked.id);
+        }
+    });
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "error", children: ["No se pudieron cargar los temas: ", error] }), _jsx(Text, { dimColor: true, children: "Esc Cancelar" })] }));
+    }
+    if (themes === null) {
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "Cargando temas..." }) }));
+    }
+    if (selectables.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "No hay temas disponibles." }), _jsx(Text, { dimColor: true, children: "Esc Cancelar" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [rows.map((row, idx) => {
+                if (row.kind === 'header') {
+                    return (_jsx(Box, { marginTop: idx === 0 ? 0 : 1, children: _jsx(Text, { bold: true, color: "permission", children: SOURCE_LABEL[row.source] }) }, `h-${row.source}-${idx}`));
+                }
+                const isSelected = row.selectableIndex === cursor;
+                return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? 'claude' : 'text', children: isSelected ? '> ' : '  ' }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { bold: isSelected, color: isSelected ? 'claude' : 'text', children: row.theme.json.name ?? row.theme.id }) }), _jsx(Box, { marginLeft: 1, children: _jsx(ThemePreview, { json: row.theme.json, mode: mode }) })] }, `t-${row.theme.source}-${row.theme.id}`));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: '↑↓ Navegar  Enter Aplicar  Esc Cancelar' }) })] }));
+}
+export default ThemeBrowser;

package/dist/src/components/ThemePicker.js

@@ -1,330 +1,122 @@
-import { feature } from '../recovery/bunBundleShim.js';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { c as _c } from "react/compiler-runtime";
-import { useExitOnCtrlCDWithKeybindings } from '../hooks/useExitOnCtrlCDWithKeybindings.js';
-import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { Box, Text, usePreviewTheme, useTheme, useThemeSetting } from '../ink.js';
-import { useRegisterKeybindingContext } from '../keybindings/KeybindingContext.js';
-import { useKeybinding } from '../keybindings/useKeybinding.js';
-import { useShortcutDisplay } from '../keybindings/useShortcutDisplay.js';
-import { useAppState, useSetAppState } from '../state/AppState.js';
-import { gracefulShutdown } from '../utils/gracefulShutdown.js';
-import { updateSettingsForSource } from '../utils/settings/settings.js';
-import { Select } from './CustomSelect/index.js';
-import { Byline } from './design-system/Byline.js';
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js';
-import { getColorModuleUnavailableReason, getSyntaxTheme } from './StructuredDiff/colorDiff.js';
-import { StructuredDiff } from './StructuredDiff.js';
-export function ThemePicker(t0) {
-    const $ = _c(59);
-    const { onThemeSelect, showIntroText: t1, helpText: t2, showHelpTextBelow: t3, hideEscToCancel: t4, skipExitHandling: t5, onCancel: onCancelProp } = t0;
-    const showIntroText = t1 === undefined ? false : t1;
-    const helpText = t2 === undefined ? "" : t2;
-    const showHelpTextBelow = t3 === undefined ? false : t3;
-    const hideEscToCancel = t4 === undefined ? false : t4;
-    const skipExitHandling = t5 === undefined ? false : t5;
-    const [theme] = useTheme();
-    const themeSetting = useThemeSetting();
-    const { columns } = useTerminalSize();
-    let t6;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t6 = getColorModuleUnavailableReason();
-        $[0] = t6;
-    }
-    else {
-        t6 = $[0];
-    }
-    const colorModuleUnavailableReason = t6;
-    let t7;
-    if ($[1] !== theme) {
-        t7 = colorModuleUnavailableReason === null ? getSyntaxTheme(theme) : null;
-        $[1] = theme;
-        $[2] = t7;
-    }
-    else {
-        t7 = $[2];
-    }
-    const syntaxTheme = t7;
-    const { setPreviewTheme, savePreview, cancelPreview } = usePreviewTheme();
-    const syntaxHighlightingDisabled = useAppState(_temp) ?? false;
-    const setAppState = useSetAppState();
-    useRegisterKeybindingContext("ThemePicker");
-    const syntaxToggleShortcut = useShortcutDisplay("theme:toggleSyntaxHighlighting", "ThemePicker", "ctrl+t");
-    let t8;
-    if ($[3] !== setAppState || $[4] !== syntaxHighlightingDisabled) {
-        t8 = () => {
-            if (colorModuleUnavailableReason === null) {
-                const newValue = !syntaxHighlightingDisabled;
-                updateSettingsForSource("userSettings", {
-                    syntaxHighlightingDisabled: newValue
-                });
-                setAppState(prev => ({
-                    ...prev,
-                    settings: {
-                        ...prev.settings,
-                        syntaxHighlightingDisabled: newValue
-                    }
-                }));
-            }
-        };
-        $[3] = setAppState;
-        $[4] = syntaxHighlightingDisabled;
-        $[5] = t8;
-    }
-    else {
-        t8 = $[5];
-    }
-    let t9;
-    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-        t9 = {
-            context: "ThemePicker"
-        };
-        $[6] = t9;
-    }
-    else {
-        t9 = $[6];
-    }
-    useKeybinding("theme:toggleSyntaxHighlighting", t8, t9);
-    const exitState = useExitOnCtrlCDWithKeybindings(skipExitHandling ? _temp2 : undefined);
-    let t10;
-    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-        t10 = [...(feature("AUTO_THEME") ? [{
-                    label: "Automático (según terminal)",
-                    value: "auto"
-                }] : []), {
-                label: "Modo oscuro",
-                value: "dark"
-            }, {
-                label: "Modo claro",
-                value: "light"
-            }, {
-                label: "Modo oscuro (apto para daltonismo)",
-                value: "dark-daltonized"
-            }, {
-                label: "Modo claro (apto para daltonismo)",
-                value: "light-daltonized"
-            }, {
-                label: "Modo oscuro (solo colores ANSI)",
-                value: "dark-ansi"
-            }, {
-                label: "Modo claro (solo colores ANSI)",
-                value: "light-ansi"
-            }];
-        $[7] = t10;
-    }
-    else {
-        t10 = $[7];
-    }
-    const themeOptions = t10;
-    let t11;
-    if ($[8] !== showIntroText) {
-        t11 = showIntroText ? _jsx(Text, { children: "Empecemos." }) : _jsx(Text, { bold: true, color: "permission", children: "Tema" });
-        $[8] = showIntroText;
-        $[9] = t11;
-    }
-    else {
-        t11 = $[9];
-    }
-    let t12;
-    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-        t12 = _jsx(Text, { bold: true, children: "Elige el estilo de texto que mejor se vea en tu terminal" });
-        $[10] = t12;
-    }
-    else {
-        t12 = $[10];
-    }
-    let t13;
-    if ($[11] !== helpText || $[12] !== showHelpTextBelow) {
-        t13 = helpText && !showHelpTextBelow && _jsx(Text, { dimColor: true, children: helpText });
-        $[11] = helpText;
-        $[12] = showHelpTextBelow;
-        $[13] = t13;
-    }
-    else {
-        t13 = $[13];
-    }
-    let t14;
-    if ($[14] !== t13) {
-        t14 = _jsxs(Box, { flexDirection: "column", children: [t12, t13] });
-        $[14] = t13;
-        $[15] = t14;
-    }
-    else {
-        t14 = $[15];
-    }
-    let t15;
-    if ($[16] !== setPreviewTheme) {
-        t15 = setting => {
-            setPreviewTheme(setting);
-        };
-        $[16] = setPreviewTheme;
-        $[17] = t15;
-    }
-    else {
-        t15 = $[17];
-    }
-    let t16;
-    if ($[18] !== onThemeSelect || $[19] !== savePreview) {
-        t16 = setting_0 => {
-            savePreview();
-            onThemeSelect(setting_0);
-        };
-        $[18] = onThemeSelect;
-        $[19] = savePreview;
-        $[20] = t16;
-    }
-    else {
-        t16 = $[20];
-    }
-    let t17;
-    if ($[21] !== cancelPreview || $[22] !== onCancelProp || $[23] !== skipExitHandling) {
-        t17 = skipExitHandling ? () => {
-            cancelPreview();
-            onCancelProp?.();
-        } : async () => {
-            cancelPreview();
-            await gracefulShutdown(0);
-        };
-        $[21] = cancelPreview;
-        $[22] = onCancelProp;
-        $[23] = skipExitHandling;
-        $[24] = t17;
-    }
-    else {
-        t17 = $[24];
-    }
-    let t18;
-    if ($[25] !== t15 || $[26] !== t16 || $[27] !== t17 || $[28] !== themeSetting) {
-        t18 = _jsx(Select, { options: themeOptions, onFocus: t15, onChange: t16, onCancel: t17, visibleOptionCount: themeOptions.length, defaultValue: themeSetting, defaultFocusValue: themeSetting });
-        $[25] = t15;
-        $[26] = t16;
-        $[27] = t17;
-        $[28] = themeSetting;
-        $[29] = t18;
-    }
-    else {
-        t18 = $[29];
-    }
-    let t19;
-    if ($[30] !== t11 || $[31] !== t14 || $[32] !== t18) {
-        t19 = _jsxs(Box, { flexDirection: "column", gap: 1, children: [t11, t14, t18] });
-        $[30] = t11;
-        $[31] = t14;
-        $[32] = t18;
-        $[33] = t19;
-    }
-    else {
-        t19 = $[33];
-    }
-    let t20;
-    if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-        t20 = {
-            oldStart: 1,
-            newStart: 1,
-            oldLines: 3,
-            newLines: 3,
-            lines: [" function greet() {", "-  console.log(\"Hello, World!\");", "+  console.log(\"Hello, Claude!\");", " }"]
-        };
-        $[34] = t20;
-    }
-    else {
-        t20 = $[34];
-    }
-    let t21;
-    if ($[35] !== columns) {
-        t21 = _jsx(Box, { flexDirection: "column", borderTop: true, borderBottom: true, borderLeft: false, borderRight: false, borderStyle: "dashed", borderColor: "subtle", children: _jsx(StructuredDiff, { patch: t20, dim: false, filePath: "demo.js", firstLine: null, width: columns }) });
-        $[35] = columns;
-        $[36] = t21;
-    }
-    else {
-        t21 = $[36];
-    }
-    const t22 = colorModuleUnavailableReason === "env" ? `Syntax highlighting disabled (via CLAUDE_CODE_SYNTAX_HIGHLIGHT=${process.env.CLAUDE_CODE_SYNTAX_HIGHLIGHT})` : syntaxHighlightingDisabled ? `Syntax highlighting disabled (${syntaxToggleShortcut} to enable)` : syntaxTheme ? `Syntax theme: ${syntaxTheme.theme}${syntaxTheme.source ? ` (from ${syntaxTheme.source})` : ""} (${syntaxToggleShortcut} to disable)` : `Syntax highlighting enabled (${syntaxToggleShortcut} to disable)`;
-    let t23;
-    if ($[37] !== t22) {
-        t23 = _jsxs(Text, { dimColor: true, children: [" ", t22] });
-        $[37] = t22;
-        $[38] = t23;
-    }
-    else {
-        t23 = $[38];
-    }
-    let t24;
-    if ($[39] !== t21 || $[40] !== t23) {
-        t24 = _jsxs(Box, { flexDirection: "column", width: "100%", children: [t21, t23] });
-        $[39] = t21;
-        $[40] = t23;
-        $[41] = t24;
-    }
-    else {
-        t24 = $[41];
-    }
-    let t25;
-    if ($[42] !== t19 || $[43] !== t24) {
-        t25 = _jsxs(Box, { flexDirection: "column", gap: 1, children: [t19, t24] });
-        $[42] = t19;
-        $[43] = t24;
-        $[44] = t25;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from '../ink.js';
+import { useTheme } from './design-system/ThemeProvider.js';
+import { loadAllThemesSync, resolveTheme } from '../utils/themes/index.js';
+import { BUILT_IN_THEME_NAMES, getTheme } from '../utils/theme.js';
+const PREVIEW_TOKENS = [
+    'claude',
+    'success',
+    'error',
+    'warning',
+    'text',
+    'background',
+];
+const SOURCE_LABEL = {
+    cli: 'Built-in',
+    opencode: 'Opencode',
+    user: 'Personalizados',
+};
+const SOURCE_ORDER = ['cli', 'opencode', 'user'];
+function buildRows(themes) {
+    const grouped = {
+        cli: [],
+        opencode: [],
+        user: [],
+    };
+    for (const t of themes)
+        grouped[t.source].push(t);
+    const rows = [];
+    const selectables = [];
+    for (const src of SOURCE_ORDER) {
+        const list = grouped[src];
+        if (list.length === 0)
+            continue;
+        rows.push({ kind: 'header', source: src });
+        for (const theme of list) {
+            const selectableIndex = selectables.length;
+            selectables.push(theme);
+            rows.push({ kind: 'item', theme, selectableIndex });
+        }
     }
-    else {
-        t25 = $[44];
+    return { rows, selectables };
+}
+function themeToJson(theme) {
+    const t = {};
+    for (const [k, v] of Object.entries(theme)) {
+        t[k] = String(v);
     }
-    const content = t25;
-    if (!showIntroText) {
-        let t26;
-        if ($[45] !== content) {
-            t26 = _jsx(Box, { flexDirection: "column", children: content });
-            $[45] = content;
-            $[46] = t26;
-        }
-        else {
-            t26 = $[46];
-        }
-        let t27;
-        if ($[47] !== helpText || $[48] !== showHelpTextBelow) {
-            t27 = showHelpTextBelow && helpText && _jsx(Box, { marginLeft: 3, children: _jsx(Text, { dimColor: true, children: helpText }) });
-            $[47] = helpText;
-            $[48] = showHelpTextBelow;
-            $[49] = t27;
-        }
-        else {
-            t27 = $[49];
-        }
-        let t28;
-        if ($[50] !== exitState || $[51] !== hideEscToCancel) {
-            t28 = !hideEscToCancel && _jsx(Box, { children: _jsx(Text, { dimColor: true, italic: true, children: exitState.pending ? _jsxs(_Fragment, { children: ["Presiona ", exitState.keyName, " de nuevo para salir"] }) : _jsxs(Byline, { children: [_jsx(KeyboardShortcutHint, { shortcut: "Enter", action: "seleccionar" }), _jsx(KeyboardShortcutHint, { shortcut: "Esc", action: "cancelar" })] }) }) });
-            $[50] = exitState;
-            $[51] = hideEscToCancel;
-            $[52] = t28;
+    return { theme: t };
+}
+function builtInThemes() {
+    return BUILT_IN_THEME_NAMES.map(id => ({
+        id,
+        source: 'cli',
+        json: themeToJson(getTheme(id)),
+    }));
+}
+function ThemePreview({ json, mode, }) {
+    const colors = useMemo(() => resolveTheme(json, mode), [json, mode]);
+    return (_jsx(Box, { children: PREVIEW_TOKENS.map(token => {
+            const c = colors[token];
+            return (_jsx(Text, { color: c ?? 'rgb(128,128,128)', children: '█' }, token));
+        }) }));
+}
+export function ThemePicker({ onSelect, onCancel, initialThemeId, mode = 'dark', onThemeSelect, showIntroText: _showIntroText, helpText: _helpText, showHelpTextBelow: _showHelpTextBelow, hideEscToCancel: _hideEscToCancel, skipExitHandling: _skipExitHandling, }) {
+    const handleSelect = onThemeSelect ?? onSelect ?? (() => { });
+    const handleCancel = onCancel ?? (() => { });
+    const [themes] = useState(() => {
+        let dynamic = [];
+        try {
+            dynamic = loadAllThemesSync();
         }
-        else {
-            t28 = $[52];
+        catch {
+            dynamic = [];
         }
-        let t29;
-        if ($[53] !== t27 || $[54] !== t28) {
-            t29 = _jsxs(Box, { marginTop: 1, children: [t27, t28] });
-            $[53] = t27;
-            $[54] = t28;
-            $[55] = t29;
+        return [...builtInThemes(), ...dynamic];
+    });
+    const [cursor, setCursor] = useState(0);
+    // Keep useTheme so this component re-renders if the live theme changes.
+    useTheme();
+    const { rows, selectables } = useMemo(() => buildRows(themes), [themes]);
+    // Position cursor on initialThemeId once themes are available.
+    useEffect(() => {
+        if (!initialThemeId || selectables.length === 0)
+            return;
+        const idx = selectables.findIndex(t => t.id === initialThemeId);
+        if (idx >= 0)
+            setCursor(idx);
+    }, [initialThemeId, selectables]);
+    useInput((input, key) => {
+        if (key.escape || input === 'q') {
+            handleCancel();
+            return;
         }
-        else {
-            t29 = $[55];
+        if (selectables.length === 0)
+            return;
+        if (key.upArrow || input === 'k') {
+            setCursor(c => (c - 1 + selectables.length) % selectables.length);
+            return;
         }
-        let t30;
-        if ($[56] !== t26 || $[57] !== t29) {
-            t30 = _jsxs(_Fragment, { children: [t26, t29] });
-            $[56] = t26;
-            $[57] = t29;
-            $[58] = t30;
+        if (key.downArrow || input === 'j') {
+            setCursor(c => (c + 1) % selectables.length);
+            return;
         }
-        else {
-            t30 = $[58];
+        if (key.return) {
+            const picked = selectables[cursor];
+            if (picked)
+                handleSelect(picked.id);
         }
-        return t30;
-    }
-    return content;
-}
-function _temp2() { }
-function _temp(s) {
-    return s.settings.syntaxHighlightingDisabled;
+    });
+    if (selectables.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "No hay temas disponibles." }), _jsx(Text, { dimColor: true, children: "Esc Cancelar" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [rows.map((row, idx) => {
+                if (row.kind === 'header') {
+                    return (_jsx(Box, { marginTop: idx === 0 ? 0 : 1, children: _jsx(Text, { bold: true, color: "permission", children: SOURCE_LABEL[row.source] }) }, `h-${row.source}-${idx}`));
+                }
+                const isSelected = row.selectableIndex === cursor;
+                return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? 'claude' : 'text', children: isSelected ? '> ' : '  ' }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { bold: isSelected, color: isSelected ? 'claude' : 'text', children: row.theme.json.name ?? row.theme.id }) }), _jsx(Box, { marginLeft: 1, children: _jsx(ThemePreview, { json: row.theme.json, mode: mode }) })] }, `t-${row.theme.source}-${row.theme.id}`));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: '↑↓ Navegar  Enter Aplicar  Esc Cancelar' }) })] }));
 }
+export default ThemePicker;

package/dist/src/components/design-system/ThemeProvider.js

@@ -5,6 +5,9 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import useStdin from '../../ink/hooks/use-stdin.js';
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js';
 import { getSystemThemeName } from '../../utils/systemTheme.js';
+import { bootstrapDynamicThemes } from '../../utils/themes/bootstrap.js';
+// Eagerly load JSON themes so getTheme() can resolve them on first render.
+bootstrapDynamicThemes();
 // Non-'auto' default so useTheme() works without a provider (tests, tooling).
 const DEFAULT_THEME = 'dark';
 const ThemeContext = createContext({